Formatting.

This commit is contained in:
mike12345567 2021-02-22 11:40:24 +00:00
parent 632bfec1e5
commit a81b44ccaf
4 changed files with 43 additions and 27 deletions

View File

@ -7,7 +7,6 @@
Select, Select,
Toggle, Toggle,
Radio, Radio,
} from "@budibase/bbui" } from "@budibase/bbui"
import { cloneDeep } from "lodash/fp" import { cloneDeep } from "lodash/fp"
import { backendUiStore } from "builderStore" import { backendUiStore } from "builderStore"
@ -38,12 +37,14 @@
$backendUiStore.selectedTable.primaryDisplay === field.name $backendUiStore.selectedTable.primaryDisplay === field.name
let relationshipTypes = [ let relationshipTypes = [
{text: 'Many to many (N:N)', value: 'many-to-many',}, { text: "Many to many (N:N)", value: "many-to-many" },
{text: 'One to many (1:N)', value: 'one-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 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 selectedRelationshipType =
relationshipTypes.find(type => type.value === field.relationshipType)
?.text || "Many to many (N:N)"
let indexes = [...($backendUiStore.selectedTable.indexes || [])] let indexes = [...($backendUiStore.selectedTable.indexes || [])]
let confirmDeleteDialog let confirmDeleteDialog
@ -68,10 +69,12 @@
field.type !== LINK_TYPE && !uneditable && field.type !== AUTO_COL field.type !== LINK_TYPE && !uneditable && field.type !== AUTO_COL
async function saveColumn() { async function saveColumn() {
// Set relationship type if it's // Set relationship type if it's
if (field.type === 'link') { if (field.type === "link") {
field.relationshipType = relationshipTypes.find(type => type.text === selectedRelationshipType).value field.relationshipType = relationshipTypes.find(
} type => type.text === selectedRelationshipType
).value
}
if (field.type === AUTO_COL) { if (field.type === AUTO_COL) {
field = buildAutoColumn( field = buildAutoColumn(
@ -228,11 +231,15 @@
label="Max Value" label="Max Value"
bind:value={field.constraints.numericality.lessThanOrEqualTo} /> bind:value={field.constraints.numericality.lessThanOrEqualTo} />
{:else if field.type === 'link'} {:else if field.type === 'link'}
<div> <div>
<Label grey extraSmall>Select relationship type</Label> <Label grey extraSmall>Select relationship type</Label>
<div class="radio-buttons"> <div class="radio-buttons">
{#each types as type} {#each types as type}
<Radio disabled={originalName} name="Relationship type" value={type} bind:group={selectedRelationshipType}> <Radio
disabled={originalName}
name="Relationship type"
value={type}
bind:group={selectedRelationshipType}>
<label for={type}>{type}</label> <label for={type}>{type}</label>
</Radio> </Radio>
{/each} {/each}
@ -282,7 +289,7 @@
.radio-buttons { .radio-buttons {
display: flex; display: flex;
gap: var(--spacing-m); gap: var(--spacing-m);
font-size: var(--font-size-xs) font-size: var(--font-size-xs);
} }
.actions { .actions {
display: grid; display: grid;

View File

@ -42,10 +42,17 @@
</Label> </Label>
{:else} {:else}
{#if schema.relationshipType === 'one-to-many'} {#if schema.relationshipType === 'one-to-many'}
<Select thin secondary on:change={e => linkedRows = [e.target.value]} name={label} {label}> <Select
thin
secondary
on:change={e => (linkedRows = [e.target.value])}
name={label}
{label}>
<option value="">Choose an option</option> <option value="">Choose an option</option>
{#each rows as row} {#each rows as row}
<option selected={row._id === linkedRows[0]} value={row._id}>{getPrettyName(row)}</option> <option selected={row._id === linkedRows[0]} value={row._id}>
{getPrettyName(row)}
</option>
{/each} {/each}
</Select> </Select>
{:else} {:else}

View File

@ -202,10 +202,12 @@
Please run your query to fetch some data. Please run your query to fetch some data.
{:else} {:else}
{JSON.stringify(data[0], undefined, 2)} {JSON.stringify(data[0], undefined, 2)}
{/if} {/if}

View File

@ -18,25 +18,25 @@
let options = [] let options = []
let tableDefinition let tableDefinition
let fieldText = "" let fieldText = ""
const setFieldText = (value) => { const setFieldText = value => {
if (fieldSchema?.relationshipType === 'one-to-many') { if (fieldSchema?.relationshipType === "one-to-many") {
if (value?.length && options?.length) { if (value?.length && options?.length) {
const row = options.find(row => row._id === value[0]) const row = options.find(row => row._id === value[0])
return row.name return row.name
} else { } else {
return placeholder || 'Choose an option' return placeholder || "Choose an option"
} }
} else { } else {
if (value?.length) { if (value?.length) {
return `${value?.length ?? 0} selected rows` return `${value?.length ?? 0} selected rows`
} else { } else {
return placeholder || 'Choose some options' return placeholder || "Choose some options"
} }
} }
} }
$: options, fieldText = setFieldText($fieldState?.value) $: options, (fieldText = setFieldText($fieldState?.value))
$: valueLookupMap = getValueLookupMap($fieldState?.value) $: valueLookupMap = getValueLookupMap($fieldState?.value)
$: isOptionSelected = option => valueLookupMap[option] === true $: isOptionSelected = option => valueLookupMap[option] === true
$: linkedTableId = fieldSchema?.tableId $: linkedTableId = fieldSchema?.tableId
@ -74,14 +74,14 @@
} }
const toggleOption = option => { const toggleOption = option => {
if (fieldSchema.type === 'one-to-many') { if (fieldSchema.type === "one-to-many") {
fieldApi.setValue([option]) fieldApi.setValue([option])
} else { } else {
if ($fieldState.value.includes(option)) { if ($fieldState.value.includes(option)) {
fieldApi.setValue($fieldState.value.filter(x => x !== option)) fieldApi.setValue($fieldState.value.filter(x => x !== option))
} else { } else {
fieldApi.setValue([...$fieldState.value, option]) fieldApi.setValue([...$fieldState.value, option])
} }
} }
} }
</script> </script>