From d5002d3dda46039654e0b921d354f81252b24399 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 5 Nov 2021 12:38:33 +0000 Subject: [PATCH] Add ability to link rows in tables, and link rows in the table with search block --- packages/client/manifest.json | 65 +++++++++++++++++-- .../app/blocks/TableWithSearch.svelte | 8 +++ .../src/components/app/table/Table.svelte | 20 +++++- packages/client/src/stores/routes.js | 24 ++++++- packages/client/src/utils/buttonActions.js | 15 +---- 5 files changed, 109 insertions(+), 23 deletions(-) diff --git a/packages/client/manifest.json b/packages/client/manifest.json index 46f87818ff..982f96ef90 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -2457,12 +2457,12 @@ "settings": [ { "type": "dataProvider", - "label": "Provider", + "label": "Data provider", "key": "dataProvider" }, { "type": "number", - "label": "Row Count", + "label": "Row count", "key": "rowCount", "defaultValue": 8 }, @@ -2496,9 +2496,36 @@ }, { "type": "boolean", - "label": "Auto Columns", + "label": "Show auto columns", "key": "showAutoColumns", "defaultValue": false + }, + { + "type": "boolean", + "label": "Link table rows", + "key": "linkRows" + }, + { + "type": "boolean", + "label": "Open link screens in modal", + "key": "linkPeek" + }, + { + "type": "url", + "label": "Link screen", + "key": "linkURL" + }, + { + "section": true, + "name": "Advanced", + "settings": [ + { + "type": "field", + "label": "ID column for linking (appended to URL)", + "key": "linkColumn", + "placeholder": "Default" + } + ] } ], "context": { @@ -2662,8 +2689,22 @@ { "type": "boolean", "label": "Show auto columns", - "key": "showAutoColumns", - "defaultValue": false + "key": "showAutoColumns" + }, + { + "type": "boolean", + "label": "Link table rows", + "key": "linkRows" + }, + { + "type": "boolean", + "label": "Open link in modal", + "key": "linkPeek" + }, + { + "type": "url", + "label": "Link screen", + "key": "linkURL" } ] }, @@ -2684,10 +2725,22 @@ }, { "type": "event", - "label": "Title Button Action", + "label": "Title button action", "key": "titleButtonOnClick" } ] + }, + { + "section": true, + "name": "Advanced", + "settings": [ + { + "type": "field", + "label": "ID column for linking (appended to URL)", + "key": "linkColumn", + "placeholder": "Default" + } + ] } ], "context": { diff --git a/packages/client/src/components/app/blocks/TableWithSearch.svelte b/packages/client/src/components/app/blocks/TableWithSearch.svelte index c4143df986..378a111571 100644 --- a/packages/client/src/components/app/blocks/TableWithSearch.svelte +++ b/packages/client/src/components/app/blocks/TableWithSearch.svelte @@ -16,6 +16,10 @@ export let rowCount export let quiet export let size + export let linkRows + export let linkURL + export let linkColumn + export let linkPeek export let showTitleButton export let titleButtonText export let titleButtonOnClick @@ -138,6 +142,10 @@ rowCount, quiet, size, + linkRows, + linkURL, + linkColumn, + linkPeek, }} /> diff --git a/packages/client/src/components/app/table/Table.svelte b/packages/client/src/components/app/table/Table.svelte index a6508c5763..4178ca2bb2 100644 --- a/packages/client/src/components/app/table/Table.svelte +++ b/packages/client/src/components/app/table/Table.svelte @@ -9,9 +9,13 @@ export let rowCount export let quiet export let size + export let linkRows + export let linkURL + export let linkColumn + export let linkPeek const component = getContext("component") - const { styleable, getAction, ActionTypes } = getContext("sdk") + const { styleable, getAction, ActionTypes, routeStore } = getContext("sdk") const setSorting = getAction( dataProvider?.id, ActionTypes.SetDataProviderSorting @@ -81,6 +85,19 @@ order: e.detail.order, }) } + + const onClick = e => { + if (!linkRows || !linkURL) { + return + } + const col = linkColumn || "_id" + const id = e.detail?.[col] + if (!id) { + return + } + const split = linkURL.split("/:") + routeStore.actions.navigate(`${split[0]}/${id}`, linkPeek) + }
@@ -97,6 +114,7 @@ showAutoColumns={true} disableSorting on:sort={onSort} + on:click={onClick} > diff --git a/packages/client/src/stores/routes.js b/packages/client/src/stores/routes.js index e6473fb40c..1d5dca1645 100644 --- a/packages/client/src/stores/routes.js +++ b/packages/client/src/stores/routes.js @@ -1,6 +1,8 @@ -import { writable } from "svelte/store" +import { get, writable } from "svelte/store" import { push } from "svelte-spa-router" import * as API from "../api" +import { peekStore } from "./peek" +import { builderStore } from "./builder" const createRouteStore = () => { const initialState = { @@ -59,7 +61,25 @@ const createRouteStore = () => { return state }) } - const navigate = push + const navigate = (url, peek) => { + if (get(builderStore).inBuilder) { + return + } + if (url) { + // If we're already peeking, don't peek again + const isPeeking = get(store).queryParams?.peek + if (peek && !isPeeking) { + peekStore.actions.showPeek(url) + } else { + const external = !url.startsWith("/") + if (external) { + window.location.href = url + } else { + push(url) + } + } + } + } const setRouterLoaded = () => { store.update(state => ({ ...state, routerLoaded: true })) } diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js index 655f2f32e5..01b330d74f 100644 --- a/packages/client/src/utils/buttonActions.js +++ b/packages/client/src/utils/buttonActions.js @@ -42,20 +42,7 @@ const triggerAutomationHandler = async action => { const navigationHandler = action => { const { url, peek } = action.parameters - if (url) { - // If we're already peeking, don't peek again - const isPeeking = get(routeStore).queryParams?.peek - if (peek && !isPeeking) { - peekStore.actions.showPeek(url) - } else { - const external = !url.startsWith("/") - if (external) { - window.location.href = url - } else { - routeStore.actions.navigate(action.parameters.url) - } - } - } + routeStore.actions.navigate(url, peek) } const queryExecutionHandler = async action => {