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 ae2f199807
commit c9d8e4aee9
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 header = ""
export let message = "" export let message = ""
export let onConfirm = undefined export let onConfirm = undefined
export let buttonText = ""
$: icon = selectIcon(type) $: icon = selectIcon(type)
// if newlines used, convert them to different elements // if newlines used, convert them to different elements
@ -40,7 +41,7 @@
{/each} {/each}
{#if onConfirm} {#if onConfirm}
<div class="spectrum-InLineAlert-footer button"> <div class="spectrum-InLineAlert-footer button">
<Button secondary on:click={onConfirm}>OK</Button> <Button secondary on:click={onConfirm}>{buttonText || "OK"}</Button>
</div> </div>
{/if} {/if}
</div> </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 Page } from "./Layout/Page.svelte"
export { default as Link } from "./Link/Link.svelte" export { default as Link } from "./Link/Link.svelte"
export { default as Tooltip } from "./Tooltip/Tooltip.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 Menu } from "./Menu/Menu.svelte"
export { default as MenuSection } from "./Menu/Section.svelte" export { default as MenuSection } from "./Menu/Section.svelte"
export { default as MenuSeparator } from "./Menu/Separator.svelte" export { default as MenuSeparator } from "./Menu/Separator.svelte"

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

@ -1,5 +1,12 @@
<script> <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 description = ""
export let title = "" export let title = ""
@ -25,7 +32,13 @@
{#if textRows.length} {#if textRows.length}
<div class="text-rows"> <div class="text-rows">
{#each textRows as row} {#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} {/each}
</div> </div>
{/if} {/if}

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

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