From 8a4c0c6acd28e34f833d90bde5138021cee7342e Mon Sep 17 00:00:00 2001 From: Mel O'Hagan Date: Thu, 19 Jan 2023 22:54:06 +0000 Subject: [PATCH] Overhaul of CreateEditRelationship modal --- .../Datasources/CreateEditRelationship.svelte | 417 +++++++++--------- 1 file changed, 211 insertions(+), 206 deletions(-) diff --git a/packages/builder/src/components/backend/Datasources/CreateEditRelationship.svelte b/packages/builder/src/components/backend/Datasources/CreateEditRelationship.svelte index 7110374569..1454408017 100644 --- a/packages/builder/src/components/backend/Datasources/CreateEditRelationship.svelte +++ b/packages/builder/src/components/backend/Datasources/CreateEditRelationship.svelte @@ -10,7 +10,6 @@ } from "@budibase/bbui" import { tables } from "stores/backend" import { Helpers } from "@budibase/bbui" - import { writable } from "svelte/store" export let save export let datasource @@ -18,47 +17,95 @@ export let fromRelationship = {} export let toRelationship = {} export let close - export let selectedFromTable - let originalFromName = fromRelationship.name, - originalToName = toRelationship.name + const colNotSet = "Please specify a column name" + const relationshipTypes = [ + { + label: "One to Many", + value: RelationshipTypes.MANY_TO_ONE, + }, + { + label: "Many to Many", + value: RelationshipTypes.MANY_TO_MANY, + }, + ] + + let originalFromColumnName = fromRelationship.name, + originalToColumnName = toRelationship.name let originalFromTable = plusTables.find( table => table._id === toRelationship?.tableId ) let originalToTable = plusTables.find( table => table._id === fromRelationship?.tableId ) - let fromTable, toTable, through, linkTable, tableOptions - let isManyToMany, isManyToOne, relationshipTypes - let errors, valid - let currentTables = {} - if (fromRelationship && !fromRelationship.relationshipType) { - fromRelationship.relationshipType = RelationshipTypes.MANY_TO_ONE - } + let tableOptions + let errors = {} + let hasClickedSave = !!fromRelationship.relationshipType + let fromPrimary, + fromForeign, + fromTable, + toTable, + throughTable, + fromColumn, + toColumn + let fromId, toId, throughId, throughToKey, throughFromKey + let isManyToMany, isManyToOne, relationshipType - if (toRelationship && selectedFromTable) { - toRelationship.tableId = selectedFromTable._id - } - - function inSchema(table, prop, ogName) { - if (!table || !prop || prop === ogName) { - return false + $: { + if (!fromPrimary) { + fromPrimary = fromRelationship.foreignKey + fromForeign = toRelationship.foreignKey + } + if (!fromColumn && !errors.fromColumn) { + fromColumn = toRelationship.name + } + if (!toColumn && !errors.toColumn) { + toColumn = fromRelationship.name + } + if (!fromId) { + fromId = toRelationship.tableId + } + if (!toId) { + toId = fromRelationship.tableId + } + if (!throughId) { + throughId = fromRelationship.through + throughFromKey = fromRelationship.throughFrom + throughToKey = fromRelationship.throughTo + } + if (!relationshipType) { + relationshipType = fromRelationship.relationshipType } - const keys = Object.keys(table.schema).map(key => key.toLowerCase()) - return keys.indexOf(prop.toLowerCase()) !== -1 } - const touched = writable({}) + $: tableOptions = plusTables.map(table => ({ + label: table.name, + value: table._id, + })) + $: valid = getErrorCount(errors) === 0 || !hasClickedSave - function invalidThroughTable({ through, throughTo, throughFrom }) { + $: isManyToMany = relationshipType === RelationshipTypes.MANY_TO_MANY + $: isManyToOne = relationshipType === RelationshipTypes.MANY_TO_ONE + $: fromTable = plusTables.find(table => table._id === fromId) + $: toTable = plusTables.find(table => table._id === toId) + $: throughTable = plusTables.find(table => table._id === throughId) + + $: toRelationship.relationshipType = fromRelationship?.relationshipType + + const getErrorCount = errors => + Object.entries(errors) + .filter(entry => !!entry[1]) + .map(entry => entry[0]).length + + function invalidThroughTable() { // need to know the foreign key columns to check error - if (!through || !throughTo || !throughFrom) { + if (!throughId || !throughToKey || !throughFromKey) { return false } - const throughTable = plusTables.find(tbl => tbl._id === through) - const otherColumns = Object.values(throughTable.schema).filter( - col => col.name !== throughFrom && col.name !== throughTo + const throughTbl = plusTables.find(tbl => tbl._id === throughId) + const otherColumns = Object.values(throughTbl.schema).filter( + col => col.name !== throughFromKey && col.name !== throughToKey ) for (let col of otherColumns) { if (col.constraints?.presence && !col.autocolumn) { @@ -68,145 +115,134 @@ return false } - function checkForErrors(fromRelate, toRelate) { - const isMany = - fromRelate.relationshipType === RelationshipTypes.MANY_TO_MANY + function validate() { + const isMany = relationshipType === RelationshipTypes.MANY_TO_MANY const tableNotSet = "Please specify a table" + const foreignKeyNotSet = "Please pick a foreign key" const errObj = {} - if ($touched.from && !fromTable) { - errObj.from = tableNotSet + if (!relationshipType) { + errObj.relationshipType = "Please specify a relationship type" } - if ($touched.to && !toTable) { - errObj.to = tableNotSet + if (!fromTable) { + errObj.fromTable = tableNotSet } - if ($touched.through && isMany && !fromRelate.through) { - errObj.through = tableNotSet + if (!toTable) { + errObj.toTable = tableNotSet } - if ($touched.through && invalidThroughTable(fromRelate)) { - errObj.through = "Ensure non-key columns are nullable or auto-generated" + if (isMany && !throughTable) { + errObj.throughTable = tableNotSet } - if ($touched.foreign && !isMany && !fromRelate.fieldName) { - errObj.foreign = "Please pick the foreign key" + if (isMany && !throughFromKey) { + errObj.throughFromKey = foreignKeyNotSet } - const colNotSet = "Please specify a column name" - if ($touched.fromCol && !toRelate.name) { - errObj.fromCol = colNotSet + if (isMany && !throughToKey) { + errObj.throughToKey = foreignKeyNotSet } - if ($touched.toCol && !fromRelate.name) { - errObj.toCol = colNotSet + if (invalidThroughTable()) { + errObj.throughTable = + "Ensure non-key columns are nullable or auto-generated" } - if ($touched.primary && !isMany && !fromPrimary) { - errObj.primary = "Please pick the primary key" + if (!isMany && !fromForeign) { + errObj.fromForeign = foreignKeyNotSet } + if (!fromColumn) { + errObj.fromColumn = colNotSet + } + if (!toColumn) { + errObj.toColumn = colNotSet + } + if (!isMany && !fromPrimary) { + errObj.fromPrimary = "Please pick the primary key" + } + // currently don't support relationships back onto the table itself, needs to relate out const tableError = "From/to/through tables must be different" - if (fromTable && (fromTable === toTable || fromTable === through)) { - errObj.from = tableError + if (fromTable && (fromTable === toTable || fromTable === throughTable)) { + errObj.fromTable = tableError } - if (toTable && (toTable === fromTable || toTable === through)) { - errObj.to = tableError + if (toTable && (toTable === fromTable || toTable === throughTable)) { + errObj.toTable = tableError } - if (through && (through === fromTable || through === toTable)) { - errObj.through = tableError + if ( + throughTable && + (throughTable === fromTable || throughTable === toTable) + ) { + errObj.throughTable = tableError } const colError = "Column name cannot be an existing column" - if (inSchema(fromTable, fromRelate.name, originalFromName)) { - errObj.fromCol = colError + if (isColumnNameBeingUsed(fromTable, fromColumn, originalFromColumnName)) { + errObj.fromColumn = colError } - if (inSchema(toTable, toRelate.name, originalToName)) { - errObj.toCol = colError + if (isColumnNameBeingUsed(toTable, toColumn, originalToColumnName)) { + errObj.toColumn = colError } let fromType, toType - if (fromPrimary && fromRelate.fieldName) { + if (fromPrimary && fromForeign) { fromType = fromTable?.schema[fromPrimary]?.type - toType = toTable?.schema[fromRelate.fieldName]?.type + toType = toTable?.schema[fromForeign]?.type } if (fromType && toType && fromType !== toType) { - errObj.foreign = + errObj.fromForeign = "Column type of the foreign key must match the primary key" } + errors = errObj + return getErrorCount(errors) === 0 } - let fromPrimary - $: { - if (!fromPrimary && fromTable) { - fromPrimary = fromRelationship?.foreignKey - } - } - $: isManyToMany = - fromRelationship?.relationshipType === RelationshipTypes.MANY_TO_MANY - $: isManyToOne = - fromRelationship?.relationshipType === RelationshipTypes.MANY_TO_ONE - $: tableOptions = plusTables.map(table => ({ - label: table.name, - value: table._id, - })) - $: fromTable = plusTables.find(table => table._id === toRelationship?.tableId) - $: toTable = plusTables.find(table => table._id === fromRelationship?.tableId) - $: through = plusTables.find(table => table._id === fromRelationship?.through) - $: checkForErrors(fromRelationship, toRelationship) - $: valid = - Object.keys(errors).length === 0 && - Object.keys($touched).length !== 0 && - fromTable && - toTable - - $: linkTable = through || toTable - $: relationshipTypes = [ - { - label: "Many", - value: RelationshipTypes.MANY_TO_MANY, - }, - { - label: "One", - value: RelationshipTypes.MANY_TO_ONE, - }, - ] - $: updateRelationshipType(fromRelationship?.relationshipType) - $: tableChanged(fromTable, toTable) - - function updateRelationshipType(fromType) { - if (fromType === RelationshipTypes.MANY_TO_MANY) { - toRelationship.relationshipType = RelationshipTypes.MANY_TO_MANY - } else { - toRelationship.relationshipType = RelationshipTypes.MANY_TO_ONE + function isColumnNameBeingUsed(table, columnName, originalName) { + if (!table || !columnName || columnName === originalName) { + return false } + const keys = Object.keys(table.schema).map(key => key.toLowerCase()) + return keys.indexOf(columnName.toLowerCase()) !== -1 } function buildRelationships() { - // if any to many only need to check from - const manyToMany = - fromRelationship.relationshipType === RelationshipTypes.MANY_TO_MANY - // main is simply used to know this is the side the user configured it from const id = Helpers.uuid() - if (!manyToMany) { - delete fromRelationship.through - delete toRelationship.through - } + //Map temporary variables let relateFrom = { ...fromRelationship, + tableId: toId, + name: toColumn, + relationshipType, + fieldName: fromForeign, + through: throughId, + throughFrom: throughFromKey, + throughTo: throughToKey, type: "link", main: true, _id: id, } - let relateTo = { + let relateTo = (toRelationship = { ...toRelationship, + tableId: fromId, + name: fromColumn, + through: throughId, type: "link", _id: id, + }) + + // if any to many only need to check from + const manyToMany = + relateFrom.relationshipType === RelationshipTypes.MANY_TO_MANY + + if (!manyToMany) { + delete relateFrom.through + delete relateTo.through } // [0] is because we don't support composite keys for relationships right now if (manyToMany) { relateFrom = { ...relateFrom, - through: through._id, + through: throughTable._id, fieldName: toTable.primary[0], } relateTo = { ...relateTo, - through: through._id, + through: throughTable._id, fieldName: fromTable.primary[0], throughFrom: relateFrom.throughTo, throughTo: relateFrom.throughFrom, @@ -235,9 +271,27 @@ toRelationship = relateTo } - // save the relationship on to the datasource + function removeExistingRelationship() { + if (originalFromTable && originalFromColumnName) { + delete datasource.entities[originalFromTable.name].schema[ + originalFromColumnName + ] + } + if (originalToTable && originalToColumnName) { + delete datasource.entities[originalToTable.name].schema[ + originalToColumnName + ] + } + } + async function saveRelationship() { + hasClickedSave = true + if (!validate()) { + return false + } buildRelationships() + removeExistingRelationship() + // source of relationship datasource.entities[fromTable.name].schema[fromRelationship.name] = fromRelationship @@ -245,61 +299,14 @@ datasource.entities[toTable.name].schema[toRelationship.name] = toRelationship - // If relationship has been renamed or a different table selected - if ( - originalFromTable?.name && - (originalFromName !== fromRelationship.name || - hasTableChanged(fromTable, toTable)) - ) { - delete datasource.entities[originalFromTable.name].schema[ - originalFromName - ] - } - if ( - originalToTable?.name && - (originalToName !== toRelationship.name || - hasTableChanged(fromTable, toTable)) - ) { - delete datasource.entities[originalToTable.name].schema[originalToName] - } - - // store the original names so it won't cause an error - originalToName = toRelationship.name - originalFromName = fromRelationship.name await save() } - async function deleteRelationship() { - delete datasource.entities[originalFromTable.name].schema[originalFromName] - delete datasource.entities[originalToTable.name].schema[originalToName] + removeExistingRelationship() await save() await tables.fetch() close() } - - function hasTableChanged(fromTbl, toTbl) { - const areRelationshipsSet = - (originalFromName || originalToName) && - originalFromTable?.name === fromTbl?.name && - originalToTable?.name === toTbl?.name - - return ( - currentTables?.from?._id !== fromTbl?._id || - currentTables?.to?._id !== toTbl?._id || - !areRelationshipsSet - ) - } - - function tableChanged(fromTbl, toTbl) { - if (!hasTableChanged(fromTbl, toTbl)) { - return - } - fromRelationship.name = toTbl?.name || "" - errors.fromCol = "" - toRelationship.name = fromTbl?.name || "" - errors.toCol = "" - currentTables = { from: fromTbl, to: toTbl } - } (errors.relationshipType = null)} />
Tables @@ -319,68 +328,64 @@ ($touched.primary = true)} - bind:error={errors.primary} + label={`Primary Key (${fromTable.name})`} + options={Object.keys(fromTable.schema)} bind:value={fromPrimary} + bind:error={errors.fromPrimary} + on:change={e => (errors.fromPrimary = null)} /> {/if} { - $touched.through = true - $touched.fromForeign = true - $touched.toForeign = true - }} - bind:error={errors.through} - bind:value={fromRelationship.through} + bind:value={throughId} + bind:error={errors.throughTable} /> - {#if fromTable && toTable && through} + {#if fromTable && toTable && throughTable} ($touched.toForeign = true)} - bind:error={errors.toForeign} - bind:value={fromRelationship.throughFrom} + options={Object.keys(throughTable?.schema)} + bind:value={throughFromKey} + bind:error={errors.throughFromKey} + on:change={e => (errors.throughFromKey = null)} /> {/if} {:else if isManyToOne && toTable} ($touched.fromCol = true)} - on:change={() => ($touched.fromCol = true)} - bind:error={errors.fromCol} label="From table column" - bind:value={toRelationship.name} + bind:value={fromColumn} + bind:error={errors.fromColumn} + on:change={e => { + errors.fromColumn = e.detail?.length > 0 ? null : colNotSet + }} /> ($touched.toCol = true)} - on:change={() => ($touched.toCol = true)} - bind:error={errors.toCol} label="To table column" - bind:value={fromRelationship.name} + bind:value={toColumn} + bind:error={errors.toColumn} + on:change={e => (errors.toColumn = e.detail?.length > 0 ? null : colNotSet)} />
- {#if originalFromName != null} + {#if originalFromColumnName != null} {/if}