diff --git a/packages/builder/src/components/design/settings/componentSettings.js b/packages/builder/src/components/design/settings/componentSettings.js index f2d1520878..3b26031ca1 100644 --- a/packages/builder/src/components/design/settings/componentSettings.js +++ b/packages/builder/src/components/design/settings/componentSettings.js @@ -1,4 +1,6 @@ import { Checkbox, Select, RadioGroup, Stepper, Input } from "@budibase/bbui" +import { licensing } from "stores/portal" +import { get } from "svelte/store" import DataSourceSelect from "./controls/DataSourceSelect/DataSourceSelect.svelte" import S3DataSourceSelect from "./controls/S3DataSourceSelect.svelte" import DataProviderSelect from "./controls/DataProviderSelect.svelte" @@ -26,7 +28,8 @@ import FieldConfiguration from "./controls/FieldConfiguration/FieldConfiguration import ButtonConfiguration from "./controls/ButtonConfiguration/ButtonConfiguration.svelte" import RelationshipFilterEditor from "./controls/RelationshipFilterEditor.svelte" import FormStepConfiguration from "./controls/FormStepConfiguration.svelte" -import FormStepControls from "components/design/settings/controls/FormStepControls.svelte" +import FormStepControls from "./controls/FormStepControls.svelte" +import PaywalledSetting from "./controls/PaywalledSetting.svelte" const componentMap = { text: DrawerBindableInput, @@ -86,11 +89,16 @@ const componentMap = { } export const getComponentForSetting = setting => { - const { type, showInBar, barStyle } = setting || {} + const { type, showInBar, barStyle, license } = setting || {} if (!type) { return null } + // Check for paywalled settings + if (license && get(licensing).isFreePlan) { + return PaywalledSetting + } + // We can show a clone of the bar settings for certain select settings if (showInBar && type === "select" && barStyle === "buttons") { return BarButtonList diff --git a/packages/builder/src/components/design/settings/controls/PaywalledSetting.svelte b/packages/builder/src/components/design/settings/controls/PaywalledSetting.svelte new file mode 100644 index 0000000000..c28bc49e3d --- /dev/null +++ b/packages/builder/src/components/design/settings/controls/PaywalledSetting.svelte @@ -0,0 +1,23 @@ + + +
+ + {title} + +
+ + diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte index c7f8094084..9ff2a764b7 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte @@ -183,6 +183,7 @@ props={{ // Generic settings placeholder: setting.placeholder || null, + license: setting.license, // Select settings options: setting.options || [], diff --git a/packages/client/manifest.json b/packages/client/manifest.json index 08d614391b..a056f59cc7 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -4610,6 +4610,35 @@ "key": "dataSource", "required": true }, + { + "type": "select", + "label": "Auto-refresh", + "key": "autoRefresh", + "license": "premium", + "placeholder": "Never", + "options": [ + { + "label": "10 seconds", + "value": 10 + }, + { + "label": "30 seconds", + "value": 30 + }, + { + "label": "1 minute", + "value": 60 + }, + { + "label": "5 minutes", + "value": 300 + }, + { + "label": "10 minutes", + "value": 600 + } + ] + }, { "type": "filter", "label": "Filtering", @@ -4977,6 +5006,35 @@ "key": "dataSource", "required": true }, + { + "type": "select", + "label": "Auto-refresh", + "key": "autoRefresh", + "license": "premium", + "placeholder": "Never", + "options": [ + { + "label": "10 seconds", + "value": 10 + }, + { + "label": "30 seconds", + "value": 30 + }, + { + "label": "1 minute", + "value": 60 + }, + { + "label": "5 minutes", + "value": 300 + }, + { + "label": "10 minutes", + "value": 600 + } + ] + }, { "type": "text", "label": "Title", @@ -5445,6 +5503,35 @@ "key": "dataSource", "required": true }, + { + "type": "select", + "label": "Auto-refresh", + "key": "autoRefresh", + "license": "premium", + "placeholder": "Never", + "options": [ + { + "label": "10 seconds", + "value": 10 + }, + { + "label": "30 seconds", + "value": 30 + }, + { + "label": "1 minute", + "value": 60 + }, + { + "label": "5 minutes", + "value": 300 + }, + { + "label": "10 minutes", + "value": 600 + } + ] + }, { "type": "columns", "label": "Columns", @@ -5731,6 +5818,35 @@ "key": "dataSource", "required": true }, + { + "type": "select", + "label": "Auto-refresh", + "key": "autoRefresh", + "license": "premium", + "placeholder": "Never", + "options": [ + { + "label": "10 seconds", + "value": 10 + }, + { + "label": "30 seconds", + "value": 30 + }, + { + "label": "1 minute", + "value": 60 + }, + { + "label": "5 minutes", + "value": 300 + }, + { + "label": "10 minutes", + "value": 600 + } + ] + }, { "type": "searchfield", "label": "Search columns", @@ -5908,6 +6024,35 @@ "key": "dataSource", "required": true }, + { + "type": "select", + "label": "Auto-refresh", + "key": "autoRefresh", + "license": "premium", + "placeholder": "Never", + "options": [ + { + "label": "10 seconds", + "value": 10 + }, + { + "label": "30 seconds", + "value": 30 + }, + { + "label": "1 minute", + "value": 60 + }, + { + "label": "5 minutes", + "value": 300 + }, + { + "label": "10 minutes", + "value": 600 + } + ] + }, { "type": "filter", "label": "Filtering", @@ -6504,6 +6649,35 @@ "key": "dataSource", "required": true }, + { + "type": "select", + "label": "Auto-refresh", + "key": "autoRefresh", + "license": "premium", + "placeholder": "Never", + "options": [ + { + "label": "10 seconds", + "value": 10 + }, + { + "label": "30 seconds", + "value": 30 + }, + { + "label": "1 minute", + "value": 60 + }, + { + "label": "5 minutes", + "value": 300 + }, + { + "label": "10 minutes", + "value": 600 + } + ] + }, { "type": "text", "label": "Height", diff --git a/packages/client/src/components/app/DataProvider.svelte b/packages/client/src/components/app/DataProvider.svelte index 1c6dfb32b7..dc0c40f55c 100644 --- a/packages/client/src/components/app/DataProvider.svelte +++ b/packages/client/src/components/app/DataProvider.svelte @@ -9,17 +9,18 @@ export let sortOrder export let limit export let paginate + export let autoRefresh const { styleable, Provider, ActionTypes, API } = getContext("sdk") const component = getContext("component") + let interval + let queryExtensions = {} + // We need to manage our lucene query manually as we want to allow components // to extend it - let queryExtensions = {} $: defaultQuery = LuceneUtils.buildLuceneQuery(filter) $: query = extendQuery(defaultQuery, queryExtensions) - - // Fetch data and refresh when needed $: fetch = createFetch(dataSource) $: fetch.update({ query, @@ -28,11 +29,8 @@ limit, paginate, }) - - // Sanitize schema to remove hidden fields $: schema = sanitizeSchema($fetch.schema) - - // Build our action context + $: setUpAutoRefresh(autoRefresh) $: actions = [ { type: ActionTypes.RefreshDatasource, @@ -63,8 +61,6 @@ }, }, ] - - // Build our data context $: dataContext = { rows: $fetch.rows, info: $fetch.info, @@ -140,6 +136,13 @@ }) return extendedQuery } + + const setUpAutoRefresh = autoRefresh => { + clearInterval(interval) + if (autoRefresh) { + interval = setInterval(fetch.refresh, Math.max(10000, autoRefresh * 1000)) + } + }
diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte index 46a507387d..085449a5b0 100644 --- a/packages/client/src/components/app/GridBlock.svelte +++ b/packages/client/src/components/app/GridBlock.svelte @@ -18,6 +18,7 @@ export let columns = null export let onRowClick = null export let buttons = null + export let repeat = null const context = getContext("context") const component = getContext("component") @@ -122,6 +123,7 @@ {fixedRowHeight} {columnWhitelist} {schemaOverrides} + {repeat} canAddRows={allowAddRows} canEditRows={allowEditRows} canDeleteRows={allowDeleteRows} diff --git a/packages/client/src/components/app/blocks/CardsBlock.svelte b/packages/client/src/components/app/blocks/CardsBlock.svelte index bd2b69d352..0368a27e93 100644 --- a/packages/client/src/components/app/blocks/CardsBlock.svelte +++ b/packages/client/src/components/app/blocks/CardsBlock.svelte @@ -31,6 +31,7 @@ export let cardButtonOnClick export let linkColumn export let noRowsMessage + export let autoRefresh const context = getContext("context") const { fetchDatasourceSchema, generateGoldenSample } = getContext("sdk") @@ -184,6 +185,7 @@ sortOrder, paginate, limit, + autoRefresh, }} order={1} > diff --git a/packages/client/src/components/app/blocks/ChartBlock.svelte b/packages/client/src/components/app/blocks/ChartBlock.svelte index 1bbc69ce63..2767c44b8e 100644 --- a/packages/client/src/components/app/blocks/ChartBlock.svelte +++ b/packages/client/src/components/app/blocks/ChartBlock.svelte @@ -8,6 +8,7 @@ export let sortColumn export let sortOrder export let limit + export let autoRefresh // Block export let chartTitle @@ -65,6 +66,7 @@ sortColumn, sortOrder, limit, + autoRefresh, }} > {#if dataProviderId && chartType} diff --git a/packages/client/src/components/app/blocks/RepeaterBlock.svelte b/packages/client/src/components/app/blocks/RepeaterBlock.svelte index 878b827c78..d8816b6c24 100644 --- a/packages/client/src/components/app/blocks/RepeaterBlock.svelte +++ b/packages/client/src/components/app/blocks/RepeaterBlock.svelte @@ -17,6 +17,7 @@ export let hAlign export let vAlign export let gap + export let autoRefresh const component = getContext("component") const context = getContext("context") @@ -47,6 +48,7 @@ sortOrder, limit, paginate, + autoRefresh, }} > {#if $component.empty} diff --git a/packages/client/src/components/app/blocks/RowExplorer.svelte b/packages/client/src/components/app/blocks/RowExplorer.svelte index 1e2357713a..ebddaa83a7 100644 --- a/packages/client/src/components/app/blocks/RowExplorer.svelte +++ b/packages/client/src/components/app/blocks/RowExplorer.svelte @@ -16,6 +16,7 @@ export let detailFields export let detailTitle export let noRowsMessage + export let autoRefresh const stateKey = generate() const context = getContext("context") @@ -66,6 +67,7 @@ noValue: false, }, ], + autoRefresh, }} styles={{ custom: ` diff --git a/packages/client/src/components/app/deprecated/TableBlock.svelte b/packages/client/src/components/app/deprecated/TableBlock.svelte index 5fd197bc02..e67dc5b061 100644 --- a/packages/client/src/components/app/deprecated/TableBlock.svelte +++ b/packages/client/src/components/app/deprecated/TableBlock.svelte @@ -33,6 +33,7 @@ export let sidePanelSaveLabel export let sidePanelDeleteLabel export let notificationOverride + export let autoRefresh const { fetchDatasourceSchema, API, generateGoldenSample } = getContext("sdk") const component = getContext("component") @@ -243,6 +244,7 @@ sortOrder, paginate, limit: rowCount, + autoRefresh, }} context="provider" order={1}