From 678afc134ee0b5fa9a31a92b5a6ed4fc52ff55c9 Mon Sep 17 00:00:00 2001 From: Peter Clement Date: Mon, 25 Sep 2023 13:25:23 +0100 Subject: [PATCH 1/4] Create new component for selecting relationships --- .../DataTable/modals/CreateEditColumn.svelte | 86 +++++++++++++------ .../common/RelationshipSelector.svelte | 69 +++++++++++++++ 2 files changed, 131 insertions(+), 24 deletions(-) create mode 100644 packages/builder/src/components/common/RelationshipSelector.svelte diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte index 75964af513..66d6f28a5b 100644 --- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte +++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte @@ -34,6 +34,7 @@ import { getBindings } from "components/backend/DataTable/formula" import JSONSchemaModal from "./JSONSchemaModal.svelte" import { ValidColumnNameRegex } from "@budibase/shared-core" + import RelationshipSelector from "components/common/RelationshipSelector.svelte" const AUTO_TYPE = "auto" const FORMULA_TYPE = FIELDS.FORMULA.type @@ -57,6 +58,10 @@ let indexes = [...($tables.selected.indexes || [])] let isCreating = undefined + let relationshipPart1 = "Many rows" + let relationshipPart2 = "To one row" + + let relationshipTableIdSecondary = null let table = $tables.selected let confirmDeleteDialog let savingColumn @@ -74,6 +79,32 @@ editableColumn.constraints.presence = { allowEmpty: false } } + $: { + console.log("test") + if (editableColumn.type === LINK_TYPE) { + // Determine the relationship type based on the selected values of both parts + if ( + relationshipPart1 === "Many rows" && + relationshipPart2 === "To one row" + ) { + editableColumn.relationshipType = RelationshipType.MANY_TO_ONE + } else if ( + relationshipPart1 === "Many rows" && + relationshipPart2 === "To many rows" + ) { + editableColumn.relationshipType = RelationshipType.MANY_TO_MANY + } else if ( + relationshipPart1 === "One row" && + relationshipPart2 === "To many rows" + ) { + editableColumn.relationshipType = RelationshipType.ONE_TO_MANY + } + + // Set the tableId based on the selected table + editableColumn.tableId = relationshipTableIdSecondary + } + } + const initialiseField = (field, savingColumn) => { isCreating = !field if (field && !savingColumn) { @@ -100,6 +131,28 @@ } } allowedTypes = getAllowedTypes() + + if (editableColumn.type === LINK_TYPE && editableColumn.tableId) { + relationshipTableIdSecondary = editableColumn.tableId + console.log("test?") + console.log(editableColumn.relationshipType) + console.log(RelationshipType.MANY_TO_MANY) + if (editableColumn.relationshipType === RelationshipType.MANY_TO_ONE) { + relationshipPart1 = "Many rows" + relationshipPart2 = "To one row" + } else if ( + editableColumn.relationshipType === RelationshipType.MANY_TO_MANY + ) { + console.log("asdasdasd?") + relationshipPart1 = "Many rows" + relationshipPart2 = "To many rows" + } else if ( + editableColumn.relationshipType === RelationshipType.ONE_TO_MANY + ) { + relationshipPart1 = "One row" + relationshipPart2 = "To many rows" + } + } } $: initialiseField(field, savingColumn) @@ -546,30 +599,15 @@ {:else if editableColumn.type === "link"} - {:else if editableColumn.type === FORMULA_TYPE} {#if !table.sql} diff --git a/packages/builder/src/components/common/RelationshipSelector.svelte b/packages/builder/src/components/common/RelationshipSelector.svelte new file mode 100644 index 0000000000..d196eaeaad --- /dev/null +++ b/packages/builder/src/components/common/RelationshipSelector.svelte @@ -0,0 +1,69 @@ + + +
+
+ +
+
+
+
+ table.name} + getOptionValue={table => table._id} + /> +
+
+ + + From 85f4141e46adbb4fa9610f57254b8c21b8e4471a Mon Sep 17 00:00:00 2001 From: Peter Clement Date: Mon, 25 Sep 2023 14:38:36 +0100 Subject: [PATCH 2/4] code clean up --- .../DataTable/modals/CreateEditColumn.svelte | 68 +++++-------------- .../common/RelationshipSelector.svelte | 8 +-- .../builder/src/constants/backend/index.js | 5 ++ 3 files changed, 25 insertions(+), 56 deletions(-) diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte index 66d6f28a5b..d75df73348 100644 --- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte +++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte @@ -5,7 +5,6 @@ Label, Select, Toggle, - RadioGroup, Icon, DatePicker, Modal, @@ -26,10 +25,10 @@ ALLOWABLE_STRING_TYPES, ALLOWABLE_NUMBER_TYPES, SWITCHABLE_TYPES, + PrettyRelationshipDefinitions, } from "constants/backend" import { getAutoColumnInformation, buildAutoColumn } from "builderStore/utils" import ConfirmDialog from "components/common/ConfirmDialog.svelte" - import { truncate } from "lodash" import ModalBindableInput from "components/common/bindings/ModalBindableInput.svelte" import { getBindings } from "components/backend/DataTable/formula" import JSONSchemaModal from "./JSONSchemaModal.svelte" @@ -58,8 +57,8 @@ let indexes = [...($tables.selected.indexes || [])] let isCreating = undefined - let relationshipPart1 = "Many rows" - let relationshipPart2 = "To one row" + let relationshipPart1 = PrettyRelationshipDefinitions.Many + let relationshipPart2 = PrettyRelationshipDefinitions.One let relationshipTableIdSecondary = null let table = $tables.selected @@ -80,22 +79,21 @@ } $: { - console.log("test") - if (editableColumn.type === LINK_TYPE) { + if (editableColumn.type === LINK_TYPE && editableColumn.tableId) { // Determine the relationship type based on the selected values of both parts if ( - relationshipPart1 === "Many rows" && - relationshipPart2 === "To one row" + relationshipPart1 === PrettyRelationshipDefinitions.Many && + relationshipPart2 === PrettyRelationshipDefinitions.One ) { editableColumn.relationshipType = RelationshipType.MANY_TO_ONE } else if ( - relationshipPart1 === "Many rows" && - relationshipPart2 === "To many rows" + relationshipPart1 === PrettyRelationshipDefinitions.Many && + relationshipPart2 === PrettyRelationshipDefinitions.MANY ) { editableColumn.relationshipType = RelationshipType.MANY_TO_MANY } else if ( - relationshipPart1 === "One row" && - relationshipPart2 === "To many rows" + relationshipPart1 === PrettyRelationshipDefinitions.One && + relationshipPart2 === PrettyRelationshipDefinitions.Many ) { editableColumn.relationshipType = RelationshipType.ONE_TO_MANY } @@ -134,23 +132,19 @@ if (editableColumn.type === LINK_TYPE && editableColumn.tableId) { relationshipTableIdSecondary = editableColumn.tableId - console.log("test?") - console.log(editableColumn.relationshipType) - console.log(RelationshipType.MANY_TO_MANY) if (editableColumn.relationshipType === RelationshipType.MANY_TO_ONE) { - relationshipPart1 = "Many rows" - relationshipPart2 = "To one row" + relationshipPart1 = PrettyRelationshipDefinitions.Many + relationshipPart2 = PrettyRelationshipDefinitions.One } else if ( editableColumn.relationshipType === RelationshipType.MANY_TO_MANY ) { - console.log("asdasdasd?") - relationshipPart1 = "Many rows" - relationshipPart2 = "To many rows" + relationshipPart1 = PrettyRelationshipDefinitions.Many + relationshipPart2 = PrettyRelationshipDefinitions.Many } else if ( editableColumn.relationshipType === RelationshipType.ONE_TO_MANY ) { - relationshipPart1 = "One row" - relationshipPart2 = "To many rows" + relationshipPart1 = PrettyRelationshipDefinitions.One + relationshipPart2 = PrettyRelationshipDefinitions.Many } } } @@ -210,7 +204,6 @@ !uneditable && editableColumn?.type !== AUTO_TYPE && !editableColumn.autocolumn - $: relationshipOptions = getRelationshipOptions(editableColumn) $: external = table.type === "external" // in the case of internal tables the sourceId will just be undefined $: tableOptions = $tables.list.filter( @@ -341,35 +334,6 @@ return match ? parseInt(match[1]) : 0 } - function getRelationshipOptions(field) { - if (!field || !field.tableId) { - return null - } - const linkTable = tableOptions?.find(table => table._id === field.tableId) - if (!linkTable) { - return null - } - const thisName = truncate(table.name, { length: 14 }), - linkName = truncate(linkTable.name, { length: 14 }) - return [ - { - name: `Many ${thisName} rows → many ${linkName} rows`, - alt: `Many ${table.name} rows → many ${linkTable.name} rows`, - value: RelationshipType.MANY_TO_MANY, - }, - { - name: `One ${linkName} row → many ${thisName} rows`, - alt: `One ${linkTable.name} rows → many ${table.name} rows`, - value: RelationshipType.ONE_TO_MANY, - }, - { - name: `One ${thisName} row → many ${linkName} rows`, - alt: `One ${table.name} rows → many ${linkTable.name} rows`, - value: RelationshipType.MANY_TO_ONE, - }, - ] - } - function getAllowedTypes() { if ( originalName && diff --git a/packages/builder/src/components/common/RelationshipSelector.svelte b/packages/builder/src/components/common/RelationshipSelector.svelte index d196eaeaad..dfed2b6f36 100644 --- a/packages/builder/src/components/common/RelationshipSelector.svelte +++ b/packages/builder/src/components/common/RelationshipSelector.svelte @@ -1,6 +1,6 @@
@@ -64,6 +65,6 @@ } .relationship-part { - flex-basis: 45%; + flex-basis: 60%; } From 8af8c33bbe5d0dbfea0c7b0081dd29bc0768f1ed Mon Sep 17 00:00:00 2001 From: Peter Clement Date: Tue, 26 Sep 2023 09:33:44 +0100 Subject: [PATCH 4/4] pr comments --- .../DataTable/modals/CreateEditColumn.svelte | 58 +++++++++---------- .../common/RelationshipSelector.svelte | 1 - 2 files changed, 26 insertions(+), 33 deletions(-) diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte index 7a635dfb5d..bbdbba6473 100644 --- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte +++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte @@ -78,26 +78,28 @@ editableColumn.constraints.presence = { allowEmpty: false } } - $: { - if (editableColumn.type === LINK_TYPE && editableColumn.tableId) { - // Determine the relationship type based on the selected values of both parts - if ( - relationshipPart1 === PrettyRelationshipDefinitions.MANY && - relationshipPart2 === PrettyRelationshipDefinitions.ONE - ) { - editableColumn.relationshipType = RelationshipType.MANY_TO_ONE - } else if ( - relationshipPart1 === PrettyRelationshipDefinitions.MANY && - relationshipPart2 === PrettyRelationshipDefinitions.MANY - ) { - editableColumn.relationshipType = RelationshipType.MANY_TO_MANY - } else if ( - relationshipPart1 === PrettyRelationshipDefinitions.ONE && - relationshipPart2 === PrettyRelationshipDefinitions.MANY - ) { - editableColumn.relationshipType = RelationshipType.ONE_TO_MANY - } + let relationshipMap = { + [RelationshipType.MANY_TO_ONE]: { + part1: PrettyRelationshipDefinitions.MANY, + part2: PrettyRelationshipDefinitions.ONE, + }, + [RelationshipType.MANY_TO_MANY]: { + part1: PrettyRelationshipDefinitions.MANY, + part2: PrettyRelationshipDefinitions.MANY, + }, + [RelationshipType.ONE_TO_MANY]: { + part1: PrettyRelationshipDefinitions.ONE, + part2: PrettyRelationshipDefinitions.MANY, + }, + } + $: { + if (editableColumn.type === LINK_TYPE) { + // Determine the relationship type based on the selected values of both parts + editableColumn.relationshipType = Object.entries(relationshipMap).find( + ([_, parts]) => + parts.part1 === relationshipPart1 && parts.part2 === relationshipPart2 + )?.[0] // Set the tableId based on the selected table editableColumn.tableId = relationshipTableIdSecondary } @@ -132,19 +134,11 @@ if (editableColumn.type === LINK_TYPE && editableColumn.tableId) { relationshipTableIdSecondary = editableColumn.tableId - if (editableColumn.relationshipType === RelationshipType.MANY_TO_ONE) { - relationshipPart1 = PrettyRelationshipDefinitions.MANY - relationshipPart2 = PrettyRelationshipDefinitions.ONE - } else if ( - editableColumn.relationshipType === RelationshipType.MANY_TO_MANY - ) { - relationshipPart1 = PrettyRelationshipDefinitions.MANY - relationshipPart2 = PrettyRelationshipDefinitions.MANY - } else if ( - editableColumn.relationshipType === RelationshipType.ONE_TO_MANY - ) { - relationshipPart1 = PrettyRelationshipDefinitions.ONE - relationshipPart2 = PrettyRelationshipDefinitions.MANY + if (editableColumn.relationshipType in relationshipMap) { + const { part1, part2 } = + relationshipMap[editableColumn.relationshipType] + relationshipPart1 = part1 + relationshipPart2 = part2 } } } diff --git a/packages/builder/src/components/common/RelationshipSelector.svelte b/packages/builder/src/components/common/RelationshipSelector.svelte index 0af25fdddb..c050323bb6 100644 --- a/packages/builder/src/components/common/RelationshipSelector.svelte +++ b/packages/builder/src/components/common/RelationshipSelector.svelte @@ -10,7 +10,6 @@ export let linkEditDisabled export let tableOptions export let errors - $: console.log(relationshipPart1)