Formatting.
This commit is contained in:
parent
c801203dc5
commit
99d356a862
|
@ -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;
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue