From c7c659742401c85476f0a910229e783e8b23046e Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 21 Aug 2024 16:33:51 +0100 Subject: [PATCH] Add majority of frontend implementation of row actions --- packages/bbui/src/Form/Core/Switch.svelte | 1 + packages/bbui/src/List/ListItem.svelte | 75 +++++++------ .../buttons/ManageAccessButton.svelte | 3 +- .../buttons/grid/GridAutomationsButton.svelte | 66 ++++++++++- .../buttons/grid/GridGenerateButton.svelte | 7 +- .../buttons/grid/GridRowActionsButton.svelte | 104 +++++++++++++++++- .../buttons/grid/GridScreensButton.svelte | 21 +++- .../components/common/DetailPopover.svelte | 18 ++- .../table/[tableId]/[viewId]/index.svelte | 1 - .../data/table/[tableId]/index.svelte | 12 +- packages/frontend-core/src/api/index.js | 2 + packages/frontend-core/src/api/rowActions.js | 63 +++++++++++ 12 files changed, 311 insertions(+), 62 deletions(-) create mode 100644 packages/frontend-core/src/api/rowActions.js diff --git a/packages/bbui/src/Form/Core/Switch.svelte b/packages/bbui/src/Form/Core/Switch.svelte index deffc19167..d7110a6e67 100644 --- a/packages/bbui/src/Form/Core/Switch.svelte +++ b/packages/bbui/src/Form/Core/Switch.svelte @@ -19,6 +19,7 @@ {disabled} on:change={onChange} on:click + on:click|stopPropagation {id} type="checkbox" class="spectrum-Switch-input" diff --git a/packages/bbui/src/List/ListItem.svelte b/packages/bbui/src/List/ListItem.svelte index 76b242cf9c..0c9b796f5b 100644 --- a/packages/bbui/src/List/ListItem.svelte +++ b/packages/bbui/src/List/ListItem.svelte @@ -1,55 +1,50 @@ -
+
{#if icon} - + {/if} - {#if avatar} - - {/if} - {#if title} - {title} - {/if} - {#if subtitle} - - {/if} -
- {#if $$slots.default} -
- +
+ {#if title} +
+ {title} +
+ {/if} + {#if subtitle} +
+ {subtitle} +
+ {/if}
- {/if} -
+
+
+ + +
+ diff --git a/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte index e43cc33915..de868c60e0 100644 --- a/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte +++ b/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte @@ -1,5 +1,5 @@ diff --git a/packages/builder/src/components/backend/DataTable/buttons/grid/GridAutomationsButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/grid/GridAutomationsButton.svelte index d89bab0fc2..5216fb5ebb 100644 --- a/packages/builder/src/components/backend/DataTable/buttons/grid/GridAutomationsButton.svelte +++ b/packages/builder/src/components/backend/DataTable/buttons/grid/GridAutomationsButton.svelte @@ -1,12 +1,68 @@ - + - - Automations - + Automations + {#if !connectedAutomations.length} + There aren't any automations connected to this data. + {:else} + The following automations are connected to this data. + + {#each connectedAutomations as automation} + + {/each} + + {/if} +
+ +
diff --git a/packages/builder/src/components/backend/DataTable/buttons/grid/GridGenerateButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/grid/GridGenerateButton.svelte index 907213e97e..454c70b607 100644 --- a/packages/builder/src/components/backend/DataTable/buttons/grid/GridGenerateButton.svelte +++ b/packages/builder/src/components/backend/DataTable/buttons/grid/GridGenerateButton.svelte @@ -8,9 +8,14 @@ const { datasource } = getContext("grid") + let popover + $: triggers = $automationStore.blockDefinitions.CREATABLE_TRIGGER $: table = $tables.list.find(table => table._id === $datasource.tableId) + export const show = () => popover?.show() + export const hide = () => popover?.hide() + async function createAutomation(type) { const triggerType = triggers[type] if (!triggerType) { @@ -53,7 +58,7 @@ } - + Generate diff --git a/packages/builder/src/components/backend/DataTable/buttons/grid/GridRowActionsButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/grid/GridRowActionsButton.svelte index 8033f3b3d6..bd50b403f4 100644 --- a/packages/builder/src/components/backend/DataTable/buttons/grid/GridRowActionsButton.svelte +++ b/packages/builder/src/components/backend/DataTable/buttons/grid/GridRowActionsButton.svelte @@ -1,12 +1,110 @@ - + - Row Actions + Row Actions ({suffix}) + A row action is a user-triggered automation for a chosen row. + {#if isView && rowActions.length} +
+ Use the toggle to enable/disable row actions for this view. +
+ {/if} + {#if !rowActions.length} +
+ You haven't created any row actions. + {:else} + + {#each rowActions as action} + + + {#if isView} + + + + {/if} + + + {/each} + + {/if} +
+ +
+ + diff --git a/packages/builder/src/components/backend/DataTable/buttons/grid/GridScreensButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/grid/GridScreensButton.svelte index ac2891a1df..c2c7721664 100644 --- a/packages/builder/src/components/backend/DataTable/buttons/grid/GridScreensButton.svelte +++ b/packages/builder/src/components/backend/DataTable/buttons/grid/GridScreensButton.svelte @@ -1,7 +1,7 @@ - + Screens - The following screens are connected to this data: - {connectedScreens.map(screen => screen.routing.route)} + {#if !connectedScreens.length} + There aren't any screens connected to this data. + {:else} + The following screens are connected to this data. + + {#each connectedScreens as screen} + + {/each} + + {/if} diff --git a/packages/builder/src/components/common/DetailPopover.svelte b/packages/builder/src/components/common/DetailPopover.svelte index b3d856e1ea..223814130b 100644 --- a/packages/builder/src/components/common/DetailPopover.svelte +++ b/packages/builder/src/components/common/DetailPopover.svelte @@ -3,6 +3,8 @@ export let title export let align = "left" + export let minWidth + export let maxWidth let popover let anchor @@ -18,7 +20,14 @@ - +
@@ -34,7 +43,6 @@ diff --git a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/[viewId]/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/[viewId]/index.svelte index e8adc5e031..88537ccd0e 100644 --- a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/[viewId]/index.svelte +++ b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/[viewId]/index.svelte @@ -43,7 +43,6 @@ - diff --git a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/index.svelte index 2526caa203..6c267c2733 100644 --- a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/index.svelte +++ b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/index.svelte @@ -16,6 +16,7 @@ import GridUsersTableButton from "components/backend/DataTable/buttons/grid/GridUsersTableButton.svelte" import GridGenerateButton from "components/backend/DataTable/buttons/grid/GridGenerateButton.svelte" import GridScreensButton from "components/backend/DataTable/buttons/grid/GridScreensButton.svelte" + import GridAutomationsButton from "components/backend/DataTable/buttons/grid/GridAutomationsButton.svelte" import GridRowActionsButton from "components/backend/DataTable/buttons/grid/GridRowActionsButton.svelte" import { DB_TYPE_EXTERNAL } from "constants/backend" @@ -27,6 +28,8 @@ status: { displayName: "Status", disabled: true }, } + let generateButton + $: autoColumnStatus = verifyAutocolumns($tables?.selected) $: duplicates = Object.values(autoColumnStatus).reduce((acc, status) => { if (status.length > 1) { @@ -113,7 +116,12 @@ {#if relationshipsEnabled} {/if} - + {#if !isUsersTable} + + {/if} + generateButton?.show()} + /> {#if !isUsersTable} @@ -122,7 +130,7 @@ - + diff --git a/packages/frontend-core/src/api/index.js b/packages/frontend-core/src/api/index.js index 066ab16f6e..9558ca36cb 100644 --- a/packages/frontend-core/src/api/index.js +++ b/packages/frontend-core/src/api/index.js @@ -34,6 +34,7 @@ import { buildEventEndpoints } from "./events" import { buildAuditLogsEndpoints } from "./auditLogs" import { buildLogsEndpoints } from "./logs" import { buildMigrationEndpoints } from "./migrations" +import { buildRowActionEndpoints } from "./rowActions" /** * Random identifier to uniquely identify a session in a tab. This is @@ -301,5 +302,6 @@ export const createAPIClient = config => { ...buildLogsEndpoints(API), ...buildMigrationEndpoints(API), viewV2: buildViewV2Endpoints(API), + rowActions: buildRowActionEndpoints(API), } } diff --git a/packages/frontend-core/src/api/rowActions.js b/packages/frontend-core/src/api/rowActions.js new file mode 100644 index 0000000000..cf8808f6d0 --- /dev/null +++ b/packages/frontend-core/src/api/rowActions.js @@ -0,0 +1,63 @@ +export const buildRowActionEndpoints = API => ({ + /** + * Gets the available row actions for a table. + * @param tableId the ID of the table + */ + fetch: async tableId => { + const res = await API.get({ + url: `/api/tables/${tableId}/actions`, + }) + return res?.actions || {} + }, + + /** + * Creates a row action. + * @param name the name of the row action + * @param tableId the ID of the table + */ + create: async ({ name, tableId }) => { + return await API.post({ + url: `/api/tables/${tableId}/actions`, + body: { + name, + }, + }) + }, + + /** + * Updates a row action. + * @param name the new name of the row action + * @param tableId the ID of the table + * @param rowActionId the ID of the row action to update + */ + update: async ({ tableId, rowActionId, name }) => { + return await API.post({ + url: `/api/tables/${tableId}/actions/${rowActionId}`, + body: { + name, + }, + }) + }, + + /** + * Deletes a row action. + * @param tableId the ID of the table + * @param rowActionId the ID of the row action to delete + */ + delete: async ({ tableId, rowActionId }) => { + return await API.delete({ + url: `/api/tables/${tableId}/actions/${rowActionId}`, + }) + }, + + /** + * Triggers a row action. + * @param tableId the ID of the table + * @param rowActionId the ID of the row action to trigger + */ + trigger: async ({ tableId, rowActionid }) => { + return await API.post({ + url: `/api/tables/${tableId}/actions/${rowActionId}/trigger`, + }) + }, +})