add pro check and default state
This commit is contained in:
Peter Clement
parent
89dd9b259d
commit
146cdaa131
BIN
packages/builder/assets/backups-default.png
Normal file
BIN
packages/builder/assets/backups-default.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 314 KiB |
|
|
@ -1,17 +1,23 @@
|
||||||
<script>
|
<script>
|
||||||
import {
|
import {
|
||||||
ActionButton,
|
ActionButton,
|
||||||
|
Button,
|
||||||
DatePicker,
|
DatePicker,
|
||||||
|
Divider,
|
||||||
Layout,
|
Layout,
|
||||||
Modal,
|
Modal,
|
||||||
notifications,
|
notifications,
|
||||||
Pagination,
|
Pagination,
|
||||||
Select,
|
Select,
|
||||||
|
Heading,
|
||||||
|
Body,
|
||||||
|
Tags,
|
||||||
|
Tag,
|
||||||
Table,
|
Table,
|
||||||
|
Page,
|
||||||
} from "@budibase/bbui"
|
} from "@budibase/bbui"
|
||||||
import { backups } from "stores/portal"
|
import { backups, licensing, auth, admin } from "stores/portal"
|
||||||
import { createPaginationStore } from "helpers/pagination"
|
import { createPaginationStore } from "helpers/pagination"
|
||||||
|
|
||||||
import AppSizeRenderer from "./AppSizeRenderer.svelte"
|
import AppSizeRenderer from "./AppSizeRenderer.svelte"
|
||||||
import CreateBackupModal from "./CreateBackupModal.svelte"
|
import CreateBackupModal from "./CreateBackupModal.svelte"
|
||||||
import ActionsRenderer from "./ActionsRenderer.svelte"
|
import ActionsRenderer from "./ActionsRenderer.svelte"
|
||||||
|
|
@ -19,7 +25,7 @@
|
||||||
import UserRenderer from "./UserRenderer.svelte"
|
import UserRenderer from "./UserRenderer.svelte"
|
||||||
import StatusRenderer from "./StatusRenderer.svelte"
|
import StatusRenderer from "./StatusRenderer.svelte"
|
||||||
import TypeRenderer from "./TypeRenderer.svelte"
|
import TypeRenderer from "./TypeRenderer.svelte"
|
||||||
|
import BackupsDefault from "assets/backups-default.png"
|
||||||
export let app
|
export let app
|
||||||
|
|
||||||
let backupData = null
|
let backupData = null
|
||||||
|
|
@ -30,6 +36,7 @@
|
||||||
let endDate = null
|
let endDate = null
|
||||||
let filters = getFilters()
|
let filters = getFilters()
|
||||||
|
|
||||||
|
$: console.log(backupData)
|
||||||
$: page = $pageInfo.page
|
$: page = $pageInfo.page
|
||||||
$: fetchBackups(filterOpt, page, startDate, endDate)
|
$: fetchBackups(filterOpt, page, startDate, endDate)
|
||||||
|
|
||||||
|
|
@ -146,38 +153,78 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="root">
|
<div class="root">
|
||||||
<Layout noPadding gap="M" alignContent="start">
|
{#if !$licensing.backupsEnabled}
|
||||||
<div class="search">
|
<Page wide={false}>
|
||||||
<div class="select">
|
<Layout gap="XS" noPadding>
|
||||||
<Select
|
<div class="title">
|
||||||
placeholder="All"
|
<Heading size="M">Backups</Heading>
|
||||||
label="Type"
|
<Tags>
|
||||||
options={filters}
|
<Tag icon="LockClosed">Pro plan</Tag>
|
||||||
getOptionValue={filter => filter.value}
|
</Tags>
|
||||||
getOptionLabel={filter => filter.label}
|
</div>
|
||||||
bind:value={filterOpt}
|
<div>
|
||||||
/>
|
<Body>
|
||||||
</div>
|
Backup your apps and restore them to their previous state.
|
||||||
<div>
|
{#if !$auth.accountPortalAccess && !$licensing.groupsEnabled && $admin.cloud}
|
||||||
<DatePicker
|
Contact your account holder to upgrade your plan.
|
||||||
range={true}
|
{/if}
|
||||||
label={"Filter Range"}
|
</Body>
|
||||||
on:change={e => {
|
</div>
|
||||||
if (e.detail[0].length > 1) {
|
<Divider />
|
||||||
startDate = e.detail[0][0].toISOString()
|
<div class="pro-buttons">
|
||||||
endDate = e.detail[0][1].toISOString()
|
<Button
|
||||||
}
|
newStyles
|
||||||
}}
|
primary
|
||||||
/>
|
disabled={!$auth.accountPortalAccess && $admin.cloud}
|
||||||
</div>
|
on:click={$licensing.goToUpgradePage()}
|
||||||
|
>
|
||||||
|
Upgrade
|
||||||
|
</Button>
|
||||||
|
<!--Show the view plans button-->
|
||||||
|
<Button
|
||||||
|
newStyles
|
||||||
|
secondary
|
||||||
|
on:click={() => {
|
||||||
|
window.open("https://budibase.com/pricing/", "_blank")
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
View Plans
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
|
</Page>
|
||||||
|
{:else if backupData}
|
||||||
|
<Layout noPadding gap="M" alignContent="start">
|
||||||
|
<div class="search">
|
||||||
|
<div class="select">
|
||||||
|
<Select
|
||||||
|
placeholder="All"
|
||||||
|
label="Type"
|
||||||
|
options={filters}
|
||||||
|
getOptionValue={filter => filter.value}
|
||||||
|
getOptionLabel={filter => filter.label}
|
||||||
|
bind:value={filterOpt}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<DatePicker
|
||||||
|
range={true}
|
||||||
|
label={"Filter Range"}
|
||||||
|
on:change={e => {
|
||||||
|
if (e.detail[0].length > 1) {
|
||||||
|
startDate = e.detail[0][0].toISOString()
|
||||||
|
endDate = e.detail[0][1].toISOString()
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="split-buttons">
|
<div class="split-buttons">
|
||||||
<ActionButton on:click={modal.show} icon="SaveAsFloppy"
|
<ActionButton on:click={modal.show} icon="SaveAsFloppy"
|
||||||
>Create new backup</ActionButton
|
>Create new backup</ActionButton
|
||||||
>
|
>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
{#if backupData}
|
|
||||||
<div>
|
<div>
|
||||||
<Table
|
<Table
|
||||||
{schema}
|
{schema}
|
||||||
|
|
@ -200,8 +247,28 @@
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
</Layout>
|
||||||
</Layout>
|
{:else if !backupData}
|
||||||
|
<Page wide={false}>
|
||||||
|
<div class="align">
|
||||||
|
<img
|
||||||
|
width="200px"
|
||||||
|
height="100px"
|
||||||
|
src={BackupsDefault}
|
||||||
|
alt="BackupsDefault"
|
||||||
|
/>
|
||||||
|
<Layout gap="S">
|
||||||
|
<Heading>You have no backups yet</Heading>
|
||||||
|
<div class="opacity">
|
||||||
|
<Body size="S">You can manually backup your app any time</Body>
|
||||||
|
</div>
|
||||||
|
<div class="padding">
|
||||||
|
<Button cta>Create Backup</Button>
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
|
</div>
|
||||||
|
</Page>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Modal bind:this={modal}>
|
<Modal bind:this={modal}>
|
||||||
|
|
@ -242,4 +309,21 @@
|
||||||
flex: 1;
|
flex: 1;
|
||||||
gap: var(--spacing-xl);
|
gap: var(--spacing-xl);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-m);
|
||||||
|
}
|
||||||
|
|
||||||
|
.align {
|
||||||
|
margin-top: 5%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pro-buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--spacing-m);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -14,6 +14,7 @@ export const createLicensingStore = () => {
|
||||||
isFreePlan: true,
|
isFreePlan: true,
|
||||||
// features
|
// features
|
||||||
groupsEnabled: false,
|
groupsEnabled: false,
|
||||||
|
backupsEnabled: false,
|
||||||
// the currently used quotas from the db
|
// the currently used quotas from the db
|
||||||
quotaUsage: undefined,
|
quotaUsage: undefined,
|
||||||
// derived quota metrics for percentages used
|
// derived quota metrics for percentages used
|
||||||
|
|
@ -56,12 +57,17 @@ export const createLicensingStore = () => {
|
||||||
const groupsEnabled = license.features.includes(
|
const groupsEnabled = license.features.includes(
|
||||||
Constants.Features.USER_GROUPS
|
Constants.Features.USER_GROUPS
|
||||||
)
|
)
|
||||||
|
const backupsEnabled = license.features.includes(
|
||||||
|
Constants.Features.BACKUPS
|
||||||
|
)
|
||||||
|
|
||||||
store.update(state => {
|
store.update(state => {
|
||||||
return {
|
return {
|
||||||
...state,
|
...state,
|
||||||
license,
|
license,
|
||||||
isFreePlan,
|
isFreePlan,
|
||||||
groupsEnabled,
|
groupsEnabled,
|
||||||
|
backupsEnabled,
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -113,6 +113,7 @@ export const ApiVersion = "1"
|
||||||
|
|
||||||
export const Features = {
|
export const Features = {
|
||||||
USER_GROUPS: "userGroups",
|
USER_GROUPS: "userGroups",
|
||||||
|
BACKUPS: "appBackups",
|
||||||
}
|
}
|
||||||
|
|
||||||
// Role IDs
|
// Role IDs
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue