diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/RefreshDatasource.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/RefreshDatasource.svelte new file mode 100644 index 0000000000..c052a9588f --- /dev/null +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/RefreshDatasource.svelte @@ -0,0 +1,37 @@ + + +
+ + +
+ + diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js index e851bdb4be..b267b8ab3e 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js @@ -4,6 +4,7 @@ import DeleteRow from "./DeleteRow.svelte" import ExecuteQuery from "./ExecuteQuery.svelte" import TriggerAutomation from "./TriggerAutomation.svelte" import ValidateForm from "./ValidateForm.svelte" +import RefreshDatasource from "./RefreshDatasource.svelte" // defines what actions are available, when adding a new one // the component is the setup panel for the action @@ -35,4 +36,8 @@ export default [ name: "Validate Form", component: ValidateForm, }, + { + name: "Refresh Datasource", + component: RefreshDatasource, + }, ] diff --git a/packages/client/src/components/Provider.svelte b/packages/client/src/components/Provider.svelte index 13dd70667b..8c50eeeb01 100644 --- a/packages/client/src/components/Provider.svelte +++ b/packages/client/src/components/Provider.svelte @@ -14,7 +14,7 @@ $: providerKey = key || $component.id // Add data context - $: newContext.actions.provideData(providerKey, data) + $: data !== undefined && newContext.actions.provideData(providerKey, data) // Add actions context $: { diff --git a/packages/client/src/constants.js b/packages/client/src/constants.js index effb8f2449..3aa302bec9 100644 --- a/packages/client/src/constants.js +++ b/packages/client/src/constants.js @@ -4,4 +4,5 @@ export const TableNames = { export const ActionTypes = { ValidateForm: "ValidateForm", + RefreshDatasource: "RefreshDatasource", } diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js index b769b688d6..f96d18269d 100644 --- a/packages/client/src/utils/buttonActions.js +++ b/packages/client/src/utils/buttonActions.js @@ -50,14 +50,29 @@ const queryExecutionHandler = async action => { }) } -const validateFormHandler = async (action, context) => { - const { componentId } = action.parameters - const fn = context[`${componentId}_${ActionTypes.ValidateForm}`] +const executeActionHandler = async (context, componentId, actionType) => { + const fn = context[`${componentId}_${actionType}`] if (fn) { return await fn() } } +const validateFormHandler = async (action, context) => { + return await executeActionHandler( + context, + action.parameters.componentId, + ActionTypes.ValidateForm + ) +} + +const refreshDatasourceHandler = async (action, context) => { + return await executeActionHandler( + context, + action.parameters.componentId, + ActionTypes.RefreshDatasource + ) +} + const handlerMap = { ["Save Row"]: saveRowHandler, ["Delete Row"]: deleteRowHandler, @@ -65,6 +80,7 @@ const handlerMap = { ["Execute Query"]: queryExecutionHandler, ["Trigger Automation"]: triggerAutomationHandler, ["Validate Form"]: validateFormHandler, + ["Refresh Datasource"]: refreshDatasourceHandler, } /** diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json index a57acf0114..5694e3c5b3 100644 --- a/packages/standard-components/manifest.json +++ b/packages/standard-components/manifest.json @@ -106,6 +106,7 @@ "styleable": true, "hasChildren": true, "dataProvider": true, + "actions": ["RefreshDatasource"], "settings": [ { "type": "datasource", diff --git a/packages/standard-components/src/List.svelte b/packages/standard-components/src/List.svelte index 0c09e0b884..4ba10cc28c 100644 --- a/packages/standard-components/src/List.svelte +++ b/packages/standard-components/src/List.svelte @@ -2,7 +2,9 @@ import { getContext } from "svelte" import { isEmpty } from "lodash/fp" - const { API, styleable, Provider, builderStore } = getContext("sdk") + const { API, styleable, Provider, builderStore, ActionTypes } = getContext( + "sdk" + ) const component = getContext("component") export let datasource = [] @@ -18,25 +20,34 @@ } loaded = true } + + $: actions = [ + { + type: ActionTypes.RefreshDatasource, + callback: () => fetchData(datasource), + }, + ] -{#if rows.length > 0} -
- {#if $component.children === 0 && $builderStore.inBuilder} -

Add some components too

- {:else} - {#each rows as row} - - - - {/each} - {/if} -
-{:else if loaded && $builderStore.inBuilder} -
-

Feed me some data

-
-{/if} + + {#if rows.length > 0} +
+ {#if $component.children === 0 && $builderStore.inBuilder} +

Add some components too

+ {:else} + {#each rows as row} + + + + {/each} + {/if} +
+ {:else if loaded && $builderStore.inBuilder} +
+

Feed me some data

+
+ {/if} +