MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Usage tooltips and server accurate remaining days calculations

This commit is contained in:
Rory Powell 2022-09-12 00:02:29 +01:00
parent 48464b2fe3
commit 03458f0f34
4 changed files with 35 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/bbui/src/InlineAlert/InlineAlert.svelte
View File

@ -6,6 +6,7 @@
export let header = ""
export let message = ""
export let onConfirm = undefined
export let buttonText = ""
$: icon = selectIcon(type)
// if newlines used, convert them to different elements
@ -40,7 +41,7 @@
{/each}
{#if onConfirm}
<div class="spectrum-InLineAlert-footer button">
<Button secondary on:click={onConfirm}>OK</Button>
<Button secondary on:click={onConfirm}>{buttonText || "OK"}</Button>
</div>
{/if}
</div>

1
packages/bbui/src/index.js
View File

@ -34,6 +34,7 @@ export { default as Layout } from "./Layout/Layout.svelte"
export { default as Page } from "./Layout/Page.svelte"
export { default as Link } from "./Link/Link.svelte"
export { default as Tooltip } from "./Tooltip/Tooltip.svelte"
export { default as TooltipWrapper } from "./Tooltip/TooltipWrapper.svelte"
export { default as Menu } from "./Menu/Menu.svelte"
export { default as MenuSection } from "./Menu/Section.svelte"
export { default as MenuSeparator } from "./Menu/Separator.svelte"

17
packages/builder/src/components/usage/UsageDashCard.svelte
View File

@ -1,5 +1,12 @@
<script>
import { Detail, Button, Heading, Layout, Body } from "@budibase/bbui"
import {
Detail,
Button,
Heading,
Layout,
Body,
TooltipWrapper,
} from "@budibase/bbui"
export let description = ""
export let title = ""
@ -25,7 +32,13 @@
{#if textRows.length}
<div class="text-rows">
{#each textRows as row}
<Body>{row}</Body>
{#if row.tooltip}
<TooltipWrapper tooltip={row.tooltip}>
<Body>{row.message}</Body>
</TooltipWrapper>
{:else}
<Body>{row.message}</Body>
{/if}
{/each}
</div>
{/if}

26
packages/builder/src/pages/builder/portal/settings/usage.svelte
View File

@ -7,6 +7,7 @@
notifications,
Detail,
Link,
TooltipWrapper,
} from "@budibase/bbui"
import { onMount } from "svelte"
import { admin, auth, licensing } from "../../../../stores/portal"
@ -29,6 +30,7 @@
$: quotaUsage = $licensing.quotaUsage
$: license = $auth.user?.license
$: accountPortalAccess = $auth?.user?.accountPortalAccess
$: quotaReset = quotaUsage?.quotaReset
const setMonthlyUsage = () => {
monthlyUsage = []
@ -97,17 +99,19 @@
textRows = []
if (cancelAt) {
textRows.push("Subscription has been cancelled")
textRows.push(`${getDaysRemaining(cancelAt * 1000)} days remaining`)
textRows.push({ message: "Subscription has been cancelled" })
textRows.push({
message: `${getDaysRemaining(cancelAt * 1000)} days remaining`,
tooltip: new Date(cancelAt * 1000),
})
}
}
const setDaysRemainingInMonth = () => {
let now = new Date()
now = new Date(now.getFullYear(), now.getMonth(), now.getDate())
const resetDate = new Date(quotaReset)
const firstNextMonth = new Date(now.getFullYear(), now.getMonth() + 1, 1)
const difference = firstNextMonth.getTime() - now.getTime()
const now = new Date()
const difference = resetDate.getTime() - now.getTime()
// return the difference in days
daysRemainingInMonth = (difference / (1000 * 3600 * 24)).toFixed(0)
@ -207,7 +211,10 @@
<Layout gap="S">
<Heading size="S" weight="light">Monthly</Heading>
<div class="detail">
<Detail size="M">Resets in {daysRemainingInMonth} days</Detail>
<TooltipWrapper tooltip={new Date(quotaReset)}>
<Detail size="M">Resets in {daysRemainingInMonth} days</Detail
>
</TooltipWrapper>
</div>
<div class="usages">
<Layout noPadding>
@ -236,7 +243,8 @@
}
.detail :global(.spectrum-Detail) {
color: var(--spectrum-global-color-gray-700);
margin-bottom: 5px;
margin-top: -8px;
}
.detail :global(.icon) {
margin-bottom: 0;
}
</style>