From 495427082fa093629174b38bb5cb548333bf0c3d Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 8 Dec 2020 14:03:47 +0000 Subject: [PATCH 1/5] Add custom renderer for user roles to show pretty names --- .../components/backend/DataTable/Table.svelte | 15 ++++++- .../backend/DataTable/cells/RoleCell.svelte | 43 +++++++++++++++++++ .../backend/DataTable/cells/cellRenderers.js | 36 +++++++++++++--- .../TableNavigator/TableNavigator.svelte | 5 ++- 4 files changed, 89 insertions(+), 10 deletions(-) create mode 100644 packages/builder/src/components/backend/DataTable/cells/RoleCell.svelte diff --git a/packages/builder/src/components/backend/DataTable/Table.svelte b/packages/builder/src/components/backend/DataTable/Table.svelte index 718e56b31b..3787c05a1b 100644 --- a/packages/builder/src/components/backend/DataTable/Table.svelte +++ b/packages/builder/src/components/backend/DataTable/Table.svelte @@ -75,18 +75,29 @@ ] } + const canEditColumn = key => { + if (!allowEditing) { + return false + } + return !(isUsersTable && ["email", "roleId"].indexOf(key) !== -1) + } + Object.entries(schema || {}).forEach(([key, value]) => { result.push({ headerCheckboxSelection: false, headerComponent: TableHeader, headerComponentParams: { field: schema[key], - editable: allowEditing, + editable: canEditColumn(key), }, headerName: value.displayFieldName || key, field: key, sortable: true, - cellRenderer: getRenderer(schema[key], true), + cellRenderer: getRenderer({ + schema: schema[key], + editable: true, + isUsersTable, + }), cellRendererParams: { selectRelationship, }, diff --git a/packages/builder/src/components/backend/DataTable/cells/RoleCell.svelte b/packages/builder/src/components/backend/DataTable/cells/RoleCell.svelte new file mode 100644 index 0000000000..f3b90aaf98 --- /dev/null +++ b/packages/builder/src/components/backend/DataTable/cells/RoleCell.svelte @@ -0,0 +1,43 @@ + + + + + +
{roleName}
diff --git a/packages/builder/src/components/backend/DataTable/cells/cellRenderers.js b/packages/builder/src/components/backend/DataTable/cells/cellRenderers.js index f3a7b86740..15a7910186 100644 --- a/packages/builder/src/components/backend/DataTable/cells/cellRenderers.js +++ b/packages/builder/src/components/backend/DataTable/cells/cellRenderers.js @@ -3,15 +3,23 @@ import EditRow from "../modals/EditRow.svelte" import CreateEditUser from "../modals/CreateEditUser.svelte" import DeleteRow from "../modals/DeleteRow.svelte" import RelationshipDisplay from "./RelationshipCell.svelte" +import RoleCell from "./RoleCell.svelte" const renderers = { attachment: attachmentRenderer, link: linkedRowRenderer, } -export function getRenderer(schema, editable) { +export function getRenderer({ schema, editable, isUsersTable }) { + const rendererParams = { + options: schema.options, + constraints: schema.constraints, + editable, + } if (renderers[schema.type]) { - return renderers[schema.type](schema.options, schema.constraints, editable) + return renderers[schema.type](rendererParams) + } else if (isUsersTable && schema.name === "roleId") { + return roleRenderer(rendererParams) } else { return false } @@ -63,15 +71,14 @@ export function userRowRenderer(params) { return container } -/* eslint-disable no-unused-vars */ -function attachmentRenderer(options, constraints, editable) { +function attachmentRenderer() { return params => { const container = document.createElement("div") container.style.height = "100%" container.style.display = "flex" container.style.alignItems = "center" - const attachmentInstance = new AttachmentList({ + new AttachmentList({ target: container, props: { files: params.value || [], @@ -82,7 +89,6 @@ function attachmentRenderer(options, constraints, editable) { } } -/* eslint-disable no-unused-vars */ function linkedRowRenderer() { return params => { let container = document.createElement("div") @@ -102,3 +108,21 @@ function linkedRowRenderer() { return container } } + +function roleRenderer() { + return params => { + let container = document.createElement("div") + container.style.display = "grid" + container.style.height = "100%" + container.style.alignItems = "center" + + new RoleCell({ + target: container, + props: { + roleId: params.value, + }, + }) + + return container + } +} diff --git a/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte b/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte index 39ac8a1fdc..30a0568e8e 100644 --- a/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte +++ b/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte @@ -2,7 +2,6 @@ import { goto } from "@sveltech/routify" import { backendUiStore } from "builderStore" import { TableNames } from "constants" - import ListItem from "./ListItem.svelte" import CreateTableModal from "./modals/CreateTableModal.svelte" import EditTablePopover from "./popovers/EditTablePopover.svelte" import EditViewPopover from "./popovers/EditViewPopover.svelte" @@ -47,7 +46,9 @@ text={table.name} selected={selectedView === `all_${table._id}`} on:click={() => selectTable(table)}> - + {#if table._id !== TableNames.USERS} + + {/if} {#each Object.keys(table.views || {}) as viewName} Date: Tue, 8 Dec 2020 15:11:26 +0000 Subject: [PATCH 2/5] Fix indentation level in screen and layout trees --- .../userInterface/ComponentNavigationTree/ComponentTree.svelte | 2 +- .../userInterface/ComponentNavigationTree/PathTree.svelte | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/builder/src/components/userInterface/ComponentNavigationTree/ComponentTree.svelte b/packages/builder/src/components/userInterface/ComponentNavigationTree/ComponentTree.svelte index 6a2019aa69..485af84e74 100644 --- a/packages/builder/src/components/userInterface/ComponentNavigationTree/ComponentTree.svelte +++ b/packages/builder/src/components/userInterface/ComponentNavigationTree/ComponentTree.svelte @@ -71,7 +71,7 @@ on:drop={dragDropStore.actions.drop} text={isScreenslot(component._component) ? 'Screenslot' : component._instanceName} withArrow - indentLevel={level + 3} + indentLevel={level + 1} selected={$store.selectedComponentId === component._id}> diff --git a/packages/builder/src/components/userInterface/ComponentNavigationTree/PathTree.svelte b/packages/builder/src/components/userInterface/ComponentNavigationTree/PathTree.svelte index 6fefd92cd8..765041b184 100644 --- a/packages/builder/src/components/userInterface/ComponentNavigationTree/PathTree.svelte +++ b/packages/builder/src/components/userInterface/ComponentNavigationTree/PathTree.svelte @@ -50,6 +50,7 @@ {#if selectedScreen?._id === screenId} From ff3e79696d163a606281130b3838bd8a0dd6e2a1 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 8 Dec 2020 15:21:01 +0000 Subject: [PATCH 3/5] Fix bug which caused autolinks to not be generated --- packages/builder/src/builderStore/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/builder/src/builderStore/index.js b/packages/builder/src/builderStore/index.js index 503d9b08a7..887ef733e4 100644 --- a/packages/builder/src/builderStore/index.js +++ b/packages/builder/src/builderStore/index.js @@ -70,7 +70,7 @@ export const allScreens = derived(store, $store => { export const mainLayout = derived(store, $store => { return $store.layouts?.find( - layout => layout.props?._id === LAYOUT_NAMES.MASTER.PRIVATE + layout => layout._id === LAYOUT_NAMES.MASTER.PRIVATE ) }) From 3c6be9d48149e5c9fef3c0373c9182dbfd00b9a2 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 8 Dec 2020 15:34:15 +0000 Subject: [PATCH 4/5] Sort path groupings --- .../userInterface/ComponentNavigationTree/index.svelte | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/builder/src/components/userInterface/ComponentNavigationTree/index.svelte b/packages/builder/src/components/userInterface/ComponentNavigationTree/index.svelte index d1ed4b687e..9528b2844c 100644 --- a/packages/builder/src/components/userInterface/ComponentNavigationTree/index.svelte +++ b/packages/builder/src/components/userInterface/ComponentNavigationTree/index.svelte @@ -1,11 +1,12 @@
- {#each Object.keys($store.routes || {}) as path} + {#each paths as path} {/each}
From a926b23720bd9d8c97e8484aa9a180afff0ac3e0 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 8 Dec 2020 15:44:35 +0000 Subject: [PATCH 5/5] Sort routes to ensure the client router always matches correctly --- packages/client/src/store/routes.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/client/src/store/routes.js b/packages/client/src/store/routes.js index c69bb83ef0..88ca90df73 100644 --- a/packages/client/src/store/routes.js +++ b/packages/client/src/store/routes.js @@ -21,6 +21,12 @@ const createRouteStore = () => { }) }) }) + + // Sort route by paths so that the router matches correctly + routes.sort((a, b) => { + return a.path > b.path ? -1 : 1 + }) + store.update(state => { state.routes = routes return state