CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-06-01 18:20:18 +12:00
Code Issues Projects Releases Wiki Activity

First version, still playing around with styling.

Browse source
This commit is contained in:
mike12345567 2021-03-01 17:06:08 +00:00
parent 257df940d1
commit a21ca8fb62
5 changed files with 106 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
packages/builder/src/builderStore/store/backend.js
View file

@ -259,6 +259,7 @@ export const getBackendUiStore = () => {
}
state.draftTable.schema[field.name] = cloneDeep(field)
console.log(state.draftTable)
store.actions.tables.save(state.draftTable)
return state
})

110
packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
View file

@ -11,12 +11,13 @@
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 +37,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 +49,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 +59,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 +96,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 +145,23 @@
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: 20 }),
linkName = truncate(linkTable.name, { length: 20 })
return [
{ name: `Many ${thisName} has many ${linkName}`, value: RelationshipTypes.MANY_TO_MANY },
{ name: `One ${thisName} has many ${linkName}`, value: RelationshipTypes.ONE_TO_MANY },
{ name: `Many ${thisName} has one ${linkName}`, value: RelationshipTypes.MANY_TO_ONE },
]
}
</script>
<div class="actions" class:hidden={deletion}>
@ -231,26 +240,32 @@
label="Max Value"
bind:value={field.constraints.numericality.lessThanOrEqualTo} />
{:else if field.type === 'link'}
<div>
<Label grey extraSmall>Select relationship type</Label>
<div class="radio-buttons">
{#each types as type}
<Radio
disabled={originalName}
name="Relationship type"
value={type}
bind:group={selectedRelationshipType}>
<label for={type}>{type}</label>
</Radio>
{/each}
</div>
</div>
<Select label="Table" thin secondary bind:value={field.tableId}>
<option value="">Choose an option</option>
{#each tableOptions as table}
<option value={table._id}>{table.name}</option>
{/each}
</Select>
{#if relationshipOptions && relationshipOptions.length > 0}
<div>
<Label grey extraSmall>Define the relationship</Label>
<div class="radio-buttons">
{#each relationshipOptions as {value, name}}
<Radio
disabled={originalName}
name="Relationship type"
value={value}
bind:group={field.relationshipType}>
<div class="radio-button-labels">
<label class="rel-type-label" for={value}>{name.split(" has ")[0]}</label>
<label class="rel-type-center" for={value}>has</label>
<label class="rel-type-label" for={value}>{name.split(" has ")[1]}</label>
</div>
</Radio>
{/each}
</div>
</div>
{/if}
<Input
label={`Column Name in Other Table`}
thin
@ -282,15 +297,16 @@
title="Confirm Deletion" />
<style>
label {
display: grid;
place-items: center;
}
.radio-buttons {
display: flex;
gap: var(--spacing-m);
font-size: var(--font-size-xs);
}
.radio-buttons :global(> *) {
margin-top: var(--spacing-xs);
width: 100%;
}
.actions {
display: grid;
grid-gap: var(--spacing-xl);
@ -307,7 +323,17 @@
margin-right: auto;
}
.hidden {
display: none;
.rel-type-center {
font-weight: 500;
color: var(--grey-6);
margin-right: 10px;
margin-left: 10px;
background: var(--grey-3);
border-radius: 2px;
}
.radio-button-labels {
display: flex;
align-items: center;
}
</style>

6
packages/builder/src/constants/backend/index.js
View file

@ -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",
}

1
packages/server/src/constants/index.js
View file

@ -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",
}

41
packages/server/src/db/linkedRows/LinkController.js
View file

@ -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) {