2019-07-13 21:35:57 +12:00
|
|
|
<script>
|
2020-02-03 22:50:30 +13:00
|
|
|
import Textbox from "../common/Textbox.svelte"
|
|
|
|
import Button from "../common/Button.svelte"
|
2020-03-21 07:47:01 +13:00
|
|
|
import Select from "../common/Select.svelte"
|
2020-02-03 22:50:30 +13:00
|
|
|
import getIcon from "../common/icon"
|
|
|
|
import FieldView from "./FieldView.svelte"
|
|
|
|
import Modal from "../common/Modal.svelte"
|
|
|
|
import { map, join, filter, some, find, keys, isDate } from "lodash/fp"
|
|
|
|
import { store } from "../builderStore"
|
2020-03-22 22:21:18 +13:00
|
|
|
import { common, hierarchy } from "../../../core/src"
|
2020-02-03 22:50:30 +13:00
|
|
|
import { templateApi, pipe, validate } from "../common/core"
|
2020-03-22 22:21:18 +13:00
|
|
|
import ActionsHeader from "./ActionsHeader.svelte"
|
2020-02-03 22:50:30 +13:00
|
|
|
|
|
|
|
let record
|
|
|
|
let getIndexAllowedRecords
|
|
|
|
let editingField = false
|
|
|
|
let fieldToEdit
|
|
|
|
let isNewField = false
|
|
|
|
let newField
|
|
|
|
let editField
|
|
|
|
let deleteField
|
|
|
|
let onFinishedFieldEdit
|
|
|
|
let editIndex
|
2020-03-21 07:47:01 +13:00
|
|
|
let parentRecord
|
|
|
|
|
|
|
|
$: models = $store.hierarchy.children
|
2020-02-03 22:50:30 +13:00
|
|
|
|
|
|
|
store.subscribe($store => {
|
|
|
|
record = $store.currentNode
|
2020-03-22 22:21:18 +13:00
|
|
|
const flattened = hierarchy.getFlattenedHierarchy($store.hierarchy)
|
2020-02-03 22:50:30 +13:00
|
|
|
getIndexAllowedRecords = index =>
|
2020-03-13 03:23:29 +13:00
|
|
|
pipe(
|
|
|
|
index.allowedRecordNodeIds,
|
|
|
|
[
|
|
|
|
filter(id => some(n => n.nodeId === id)(flattened)),
|
|
|
|
map(id => find(n => n.nodeId === id)(flattened).name),
|
|
|
|
join(", "),
|
|
|
|
]
|
|
|
|
)
|
2019-07-13 21:35:57 +12:00
|
|
|
|
|
|
|
newField = () => {
|
2020-02-03 22:50:30 +13:00
|
|
|
isNewField = true
|
|
|
|
fieldToEdit = templateApi($store.hierarchy).getNewField("string")
|
|
|
|
editingField = true
|
2019-07-13 21:35:57 +12:00
|
|
|
}
|
|
|
|
|
2020-02-03 22:50:30 +13:00
|
|
|
onFinishedFieldEdit = field => {
|
|
|
|
if (field) {
|
|
|
|
store.saveField(field)
|
|
|
|
}
|
|
|
|
editingField = false
|
2019-07-13 21:35:57 +12:00
|
|
|
}
|
|
|
|
|
2020-02-03 22:50:30 +13:00
|
|
|
editField = field => {
|
|
|
|
isNewField = false
|
|
|
|
fieldToEdit = field
|
|
|
|
editingField = true
|
2019-07-13 21:35:57 +12:00
|
|
|
}
|
|
|
|
|
2020-02-03 22:50:30 +13:00
|
|
|
deleteField = field => {
|
|
|
|
store.deleteField(field)
|
2019-07-13 21:35:57 +12:00
|
|
|
}
|
|
|
|
|
|
|
|
editIndex = index => {
|
2020-02-03 22:50:30 +13:00
|
|
|
store.selectExistingNode(index.nodeId)
|
2019-07-13 21:35:57 +12:00
|
|
|
}
|
2020-02-03 22:50:30 +13:00
|
|
|
})
|
|
|
|
|
|
|
|
let getTypeOptionsValueText = value => {
|
|
|
|
if (
|
|
|
|
value === Number.MAX_SAFE_INTEGER ||
|
|
|
|
value === Number.MIN_SAFE_INTEGER ||
|
|
|
|
new Date(value).getTime() === new Date(8640000000000000).getTime() ||
|
|
|
|
new Date(value).getTime() === new Date(-8640000000000000).getTime()
|
|
|
|
)
|
|
|
|
return "(any)"
|
|
|
|
|
|
|
|
if (value === null) return "(not set)"
|
|
|
|
return value
|
|
|
|
}
|
|
|
|
|
|
|
|
const nameChanged = ev => {
|
|
|
|
const pluralName = n => `${n}s`
|
|
|
|
if (record.collectionName === "") {
|
|
|
|
record.collectionName = pluralName(ev.target.value)
|
2019-10-31 22:25:26 +13:00
|
|
|
}
|
2020-02-03 22:50:30 +13:00
|
|
|
}
|
2019-07-13 21:35:57 +12:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<div class="root">
|
2020-03-22 22:21:18 +13:00
|
|
|
<heading>
|
|
|
|
{#if !editingField}
|
|
|
|
<i class="ri-list-settings-line button--toggled" />
|
2020-03-23 00:35:35 +13:00
|
|
|
<h3 class="budibase__title--3">Create / Edit Model</h3>
|
2020-03-22 22:21:18 +13:00
|
|
|
{:else}
|
|
|
|
<i class="ri-file-list-line button--toggled" />
|
2020-03-23 00:35:35 +13:00
|
|
|
<h3 class="budibase__title--3">Create / Edit Field</h3>
|
2019-07-13 21:35:57 +12:00
|
|
|
{/if}
|
2020-03-22 22:21:18 +13:00
|
|
|
</heading>
|
|
|
|
{#if !editingField}
|
2020-03-23 00:35:35 +13:00
|
|
|
<h4 class="budibase__label--big">Settings</h4>
|
2020-03-22 22:21:18 +13:00
|
|
|
<form class="uk-form-stacked">
|
|
|
|
|
|
|
|
<Textbox label="Name" bind:text={record.name} on:change={nameChanged} />
|
|
|
|
|
|
|
|
<div class="horizontal-stack">
|
|
|
|
{#if !record.isSingle}
|
|
|
|
<Textbox label="Collection Name" bind:text={record.collectionName} />
|
|
|
|
{/if}
|
|
|
|
<div>
|
|
|
|
<label class="uk-form-label">Parent</label>
|
|
|
|
<div class="uk-form-controls">
|
|
|
|
<Select
|
|
|
|
value={parentRecord}
|
|
|
|
on:change={e => {
|
|
|
|
store.selectExistingNode(record)
|
|
|
|
store.newChildRecord()
|
|
|
|
}}>
|
|
|
|
{#each models as model}
|
|
|
|
<option value={model}>{model.name}</option>
|
|
|
|
{/each}
|
|
|
|
</Select>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</form>
|
2020-02-03 22:50:30 +13:00
|
|
|
|
2020-03-22 22:21:18 +13:00
|
|
|
<div class="table-controls">
|
|
|
|
<span class="budibase__label--big">Fields</span>
|
|
|
|
<h4 class="hoverable new-field" on:click={newField}>Add new field</h4>
|
|
|
|
</div>
|
2020-03-13 03:23:29 +13:00
|
|
|
|
2020-03-22 22:21:18 +13:00
|
|
|
<table class="uk-table fields-table budibase__table">
|
|
|
|
<thead>
|
2020-02-03 22:50:30 +13:00
|
|
|
<tr>
|
2020-03-22 22:21:18 +13:00
|
|
|
<th>Edit</th>
|
|
|
|
<th>Name</th>
|
|
|
|
<th>Type</th>
|
|
|
|
<th>Values</th>
|
2020-02-03 22:50:30 +13:00
|
|
|
</tr>
|
2020-03-22 22:21:18 +13:00
|
|
|
</thead>
|
|
|
|
<tbody>
|
|
|
|
{#each record ? record.fields : [] as field}
|
|
|
|
<tr>
|
|
|
|
<td>
|
|
|
|
<i class="ri-more-line" on:click={() => editField(field)} />
|
|
|
|
</td>
|
|
|
|
<td>
|
|
|
|
<div>{field.name}</div>
|
|
|
|
</td>
|
|
|
|
<td>{field.type}</td>
|
|
|
|
<td>{field.typeOptions.values}</td>
|
|
|
|
</tr>
|
|
|
|
{/each}
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
<ActionsHeader />
|
2020-02-03 22:50:30 +13:00
|
|
|
{:else}
|
2020-03-22 22:21:18 +13:00
|
|
|
<FieldView
|
|
|
|
field={fieldToEdit}
|
|
|
|
onFinished={onFinishedFieldEdit}
|
|
|
|
allFields={record.fields}
|
|
|
|
store={$store} />
|
|
|
|
{/if}
|
2019-07-13 21:35:57 +12:00
|
|
|
</div>
|
|
|
|
|
|
|
|
<style>
|
2020-02-03 22:50:30 +13:00
|
|
|
.root {
|
2019-07-13 21:35:57 +12:00
|
|
|
height: 100%;
|
2020-02-03 22:50:30 +13:00
|
|
|
}
|
2019-09-19 06:16:11 +12:00
|
|
|
|
2020-03-22 22:21:18 +13:00
|
|
|
.horizontal-stack {
|
|
|
|
display: flex;
|
|
|
|
justify-content: space-between
|
|
|
|
}
|
|
|
|
|
|
|
|
.new-field {
|
|
|
|
font-size: 16px;
|
|
|
|
font-weight: bold;
|
|
|
|
color: var(--button-text);
|
2020-02-03 22:50:30 +13:00
|
|
|
}
|
2019-07-13 21:35:57 +12:00
|
|
|
|
2020-02-03 22:50:30 +13:00
|
|
|
.fields-table {
|
2019-09-19 06:16:11 +12:00
|
|
|
margin: 1rem 1rem 0rem 0rem;
|
2020-02-03 22:50:30 +13:00
|
|
|
border-collapse: collapse;
|
|
|
|
}
|
2019-07-13 21:35:57 +12:00
|
|
|
|
2020-02-03 22:50:30 +13:00
|
|
|
tbody > tr:hover {
|
2019-07-13 21:35:57 +12:00
|
|
|
background-color: var(--primary10);
|
2020-02-03 22:50:30 +13:00
|
|
|
}
|
2019-07-13 21:35:57 +12:00
|
|
|
|
2020-03-13 03:23:29 +13:00
|
|
|
.table-controls {
|
|
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
|
|
|
align-items: center;
|
2020-02-03 22:50:30 +13:00
|
|
|
}
|
2019-07-13 21:35:57 +12:00
|
|
|
|
2020-03-13 03:23:29 +13:00
|
|
|
.ri-more-line:hover {
|
|
|
|
cursor: pointer;
|
2020-02-03 22:50:30 +13:00
|
|
|
}
|
2019-07-13 21:35:57 +12:00
|
|
|
|
2020-03-22 22:21:18 +13:00
|
|
|
heading {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
|
2020-03-23 00:35:35 +13:00
|
|
|
h3 {
|
2020-03-22 22:21:18 +13:00
|
|
|
margin: 0 0 0 10px;
|
2020-02-03 22:50:30 +13:00
|
|
|
}
|
|
|
|
</style>
|