diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte index ae19489575..598bcdaad2 100644 --- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte +++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte @@ -11,12 +11,17 @@ import { cloneDeep } from "lodash/fp" import { backendUiStore } from "builderStore" import { TableNames, UNEDITABLE_USER_FIELDS } from "constants" - import { FIELDS, AUTO_COLUMN_SUB_TYPES } from "constants/backend" + import { + FIELDS, + AUTO_COLUMN_SUB_TYPES, + RelationshipTypes, + } from "constants/backend" import { getAutoColumnInformation, buildAutoColumn } from "builderStore/utils" import { notifier } from "builderStore/store/notifications" import ValuesList from "components/common/ValuesList.svelte" import DatePicker from "components/common/DatePicker.svelte" import ConfirmDialog from "components/common/ConfirmDialog.svelte" + import { truncate } from "lodash" const AUTO_COL = "auto" const LINK_TYPE = FIELDS.LINK.type @@ -36,16 +41,7 @@ $backendUiStore.selectedTable.primaryDisplay == null || $backendUiStore.selectedTable.primaryDisplay === field.name - let relationshipTypes = [ - { text: "Many to many (N:N)", value: "many-to-many" }, - { text: "One to many (1:N)", value: "one-to-many" }, - ] - let types = ["Many to many (N:N)", "One to many (1:N)"] - - let selectedRelationshipType = - relationshipTypes.find(type => type.value === field.relationshipType) - ?.text || "Many to many (N:N)" - + let table = $backendUiStore.selectedTable let indexes = [...($backendUiStore.selectedTable.indexes || [])] let confirmDeleteDialog let deletion @@ -57,7 +53,7 @@ $: uneditable = $backendUiStore.selectedTable?._id === TableNames.USERS && UNEDITABLE_USER_FIELDS.includes(field.name) - $: invalid = field.type === FIELDS.LINK.type && !field.tableId + $: invalid = field.type === LINK_TYPE && !field.tableId // used to select what different options can be displayed for column type $: canBeSearched = @@ -67,15 +63,9 @@ $: canBeDisplay = field.type !== LINK_TYPE && field.type !== AUTO_COL $: canBeRequired = field.type !== LINK_TYPE && !uneditable && field.type !== AUTO_COL + $: relationshipOptions = getRelationshipOptions(field) async function saveColumn() { - // Set relationship type if it's - if (field.type === "link") { - field.relationshipType = relationshipTypes.find( - type => type.text === selectedRelationshipType - ).value - } - if (field.type === AUTO_COL) { field = buildAutoColumn( $backendUiStore.draftTable.name, @@ -110,12 +100,18 @@ if (!definition) { return } - field.type = definition.type - field.constraints = definition.constraints // remove any extra fields that may not be related to this type delete field.autocolumn delete field.subtype delete field.tableId + delete field.relationshipType + // add in defaults and initial definition + field.type = definition.type + field.constraints = definition.constraints + // default relationships many to many + if (field.type === LINK_TYPE) { + field.relationshipType = RelationshipTypes.MANY_TO_MANY + } } function onChangeRequired(e) { @@ -153,6 +149,32 @@ confirmDeleteDialog.hide() deletion = false } + + 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: 15 }), + linkName = truncate(linkTable.name, { length: 15 }) + return [ + { + name: `Many ${thisName} rows has many ${linkName} rows`, + value: RelationshipTypes.MANY_TO_MANY, + }, + { + name: `One ${thisName} row has many ${linkName} rows`, + value: RelationshipTypes.ONE_TO_MANY, + }, + { + name: `Many ${thisName} rows has one ${linkName} row`, + value: RelationshipTypes.MANY_TO_ONE, + }, + ] + }
@@ -231,26 +253,32 @@ label="Max Value" bind:value={field.constraints.numericality.lessThanOrEqualTo} /> {:else if field.type === 'link'} -
- -
- {#each types as type} - - - - {/each} -
-
+ {#if relationshipOptions && relationshipOptions.length > 0} +
+ +
+ {#each relationshipOptions as { value, name }} + +
+ + + +
+ + {/each} +
+
+ {/if} diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte index 6291917cd0..39eb2752bf 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte @@ -73,8 +73,8 @@ {categories} {selectedCategory} /> -{#if showDisplayName} -
{$selectedComponent._instanceName}
+{#if definition && definition.name} +
{definition.name}
{/if}
diff --git a/packages/builder/src/constants/backend/index.js b/packages/builder/src/constants/backend/index.js index 22d5544753..f7bb77db3b 100644 --- a/packages/builder/src/constants/backend/index.js +++ b/packages/builder/src/constants/backend/index.js @@ -123,3 +123,9 @@ export function isAutoColumnUserRelationship(subtype) { subtype === AUTO_COLUMN_SUB_TYPES.UPDATED_BY ) } + +export const RelationshipTypes = { + MANY_TO_MANY: "many-to-many", + ONE_TO_MANY: "one-to-many", + MANY_TO_ONE: "many-to-one", +} diff --git a/packages/server/src/constants/index.js b/packages/server/src/constants/index.js index 90893730be..46fb5cb649 100644 --- a/packages/server/src/constants/index.js +++ b/packages/server/src/constants/index.js @@ -14,6 +14,7 @@ exports.FieldTypes = { exports.RelationshipTypes = { ONE_TO_MANY: "one-to-many", + MANY_TO_ONE: "many-to-one", MANY_TO_MANY: "many-to-many", } diff --git a/packages/server/src/db/linkedRows/LinkController.js b/packages/server/src/db/linkedRows/LinkController.js index 2e86592b24..433bf57ad4 100644 --- a/packages/server/src/db/linkedRows/LinkController.js +++ b/packages/server/src/db/linkedRows/LinkController.js @@ -145,6 +145,27 @@ class LinkController { return true } + /** + * Given two the field of this table, and the field of the linked table, this makes sure + * the state of relationship type is accurate on both. + */ + handleRelationshipType(field, linkedField) { + if ( + !field.relationshipType || + field.relationshipType === RelationshipTypes.MANY_TO_MANY + ) { + linkedField.relationshipType = RelationshipTypes.MANY_TO_MANY + // make sure by default all are many to many (if not specified) + field.relationshipType = RelationshipTypes.MANY_TO_MANY + } else if (field.relationshipType === RelationshipTypes.MANY_TO_ONE) { + // Ensure that the other side of the relationship is locked to one record + linkedField.relationshipType = RelationshipTypes.ONE_TO_MANY + } else if (field.relationshipType === RelationshipTypes.ONE_TO_MANY) { + linkedField.relationshipType = RelationshipTypes.MANY_TO_ONE + } + return { field, linkedField } + } + // all operations here will assume that the table // this operation is related to has linked rows /** @@ -317,34 +338,32 @@ class LinkController { } catch (err) { continue } - const linkConfig = { + const fields = this.handleRelationshipType(field, { name: field.fieldName, type: FieldTypes.LINK, // these are the props of the table that initiated the link tableId: table._id, fieldName: fieldName, - } + }) + + // update table schema after checking relationship types + schema[fieldName] = fields.field + const linkedField = fields.linkedField if (field.autocolumn) { - linkConfig.autocolumn = field.autocolumn - } - - if (field.relationshipType) { - // Ensure that the other side of the relationship is locked to one record - linkConfig.relationshipType = field.relationshipType - delete field.relationshipType + linkedField.autocolumn = field.autocolumn } // check the linked table to make sure we aren't overwriting an existing column const existingSchema = linkedTable.schema[field.fieldName] if ( existingSchema != null && - !this.areSchemasEqual(existingSchema, linkConfig) + !this.areSchemasEqual(existingSchema, linkedField) ) { throw new Error("Cannot overwrite existing column.") } // create the link field in the other table - linkedTable.schema[field.fieldName] = linkConfig + linkedTable.schema[field.fieldName] = linkedField const response = await this._db.put(linkedTable) // special case for when linking back to self, make sure rev updated if (linkedTable._id === table._id) {