mirror of https://github.com/Budibase/budibase.git
Browse Source
Changes a most instances of Record to Model. Less work done on Index to View conversion.pull/4023/head
Kevin Åberg Kultalahti
6 years ago
committed by
GitHub
GitHub
46 changed files with 13274 additions and 12845 deletions
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
@ -1,151 +0,0 @@ |
|||
<script> |
|||
import Textbox from "components/common/Textbox.svelte" |
|||
import CodeArea from "components/common/CodeArea.svelte" |
|||
import Button from "components/common/Button.svelte" |
|||
import Dropdown from "components/common/Dropdown.svelte" |
|||
import { store } from "builderStore" |
|||
import { filter, some, map, compose } from "lodash/fp" |
|||
import { |
|||
hierarchy as hierarchyFunctions, |
|||
common, |
|||
} from "../../../../core/src/" |
|||
import ErrorsBox from "components/common/ErrorsBox.svelte" |
|||
import ActionButton from "components/common/ActionButton.svelte" |
|||
|
|||
const SNIPPET_EDITORS = { |
|||
MAP: "Map", |
|||
FILTER: "Filter", |
|||
SHARD: "Shard Name", |
|||
} |
|||
|
|||
let index |
|||
let indexableRecords = [] |
|||
let currentSnippetEditor = SNIPPET_EDITORS.MAP |
|||
|
|||
const indexableRecordsFromIndex = compose( |
|||
map(node => ({ |
|||
node, |
|||
isallowed: |
|||
index.allowedRecordNodeIds && |
|||
index.allowedRecordNodeIds.some(id => node.nodeId === id), |
|||
})), |
|||
filter(hierarchyFunctions.isRecord), |
|||
filter(hierarchyFunctions.isDecendant($store.currentNode.parent())), |
|||
hierarchyFunctions.getFlattenedHierarchy |
|||
) |
|||
|
|||
store.subscribe($store => { |
|||
index = $store.currentNode |
|||
indexableRecords = indexableRecordsFromIndex($store.hierarchy) |
|||
}) |
|||
|
|||
const toggleAllowedRecord = record => { |
|||
if (record.isallowed) { |
|||
index.allowedRecordNodeIds = index.allowedRecordNodeIds.filter( |
|||
id => id !== record.node.nodeId |
|||
) |
|||
} else { |
|||
index.allowedRecordNodeIds.push(record.node.nodeId) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<heading> |
|||
<i class="ri-eye-line button--toggled" /> |
|||
<h3 class="budibase__title--3">Create / Edit View</h3> |
|||
</heading> |
|||
<form on:submit|preventDefault class="uk-form-stacked root"> |
|||
<h4 class="budibase__label--big">Settings</h4> |
|||
{#if $store.errors && $store.errors.length > 0} |
|||
<ErrorsBox errors={$store.errors} /> |
|||
{/if} |
|||
<div class="uk-grid-small" uk-grid> |
|||
<div class="uk-width-1-2@s"> |
|||
<Textbox bind:text={index.name} label="Name" /> |
|||
</div> |
|||
<div class="uk-width-1-2@s"> |
|||
<Dropdown |
|||
label="View Type" |
|||
bind:selected={index.indexType} |
|||
options={['ancestor', 'reference']} /> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="allowed-records"> |
|||
<div class="budibase__label--big"> |
|||
Which models would you like to add to this view? |
|||
</div> |
|||
{#each indexableRecords as rec} |
|||
<input |
|||
class="uk-checkbox" |
|||
type="checkbox" |
|||
checked={rec.isallowed} |
|||
on:change={() => toggleAllowedRecord(rec)} /> |
|||
<span class="checkbox-model-label">{rec.node.name}</span> |
|||
{/each} |
|||
</div> |
|||
|
|||
<h4 class="budibase__label--big">Snippets</h4> |
|||
{#each Object.values(SNIPPET_EDITORS) as snippetType} |
|||
<span |
|||
class="snippet-selector__heading hoverable" |
|||
class:highlighted={currentSnippetEditor === snippetType} |
|||
on:click={() => (currentSnippetEditor = snippetType)}> |
|||
{snippetType} |
|||
</span> |
|||
{/each} |
|||
{#if currentSnippetEditor === SNIPPET_EDITORS.MAP} |
|||
<CodeArea bind:text={index.map} label="Map" /> |
|||
{:else if currentSnippetEditor === SNIPPET_EDITORS.FILTER} |
|||
<CodeArea bind:text={index.filter} label="Filter" /> |
|||
{:else if currentSnippetEditor === SNIPPET_EDITORS.SHARD} |
|||
<CodeArea bind:text={index.getShardName} label="Shard Name" /> |
|||
{/if} |
|||
|
|||
<ActionButton color="secondary" on:click={store.saveCurrentNode}> |
|||
Save |
|||
</ActionButton> |
|||
|
|||
{#if !$store.currentNodeIsNew} |
|||
<ActionButton alert on:click={store.deleteCurrentNode}>Delete</ActionButton> |
|||
{/if} |
|||
|
|||
</form> |
|||
|
|||
<style> |
|||
.root { |
|||
height: 100%; |
|||
padding: 15px; |
|||
} |
|||
|
|||
.allowed-records { |
|||
margin: 20px 0px; |
|||
} |
|||
|
|||
.allowed-records > span { |
|||
margin-right: 30px; |
|||
} |
|||
|
|||
.snippet-selector__heading { |
|||
margin-right: 20px; |
|||
opacity: 0.7; |
|||
} |
|||
|
|||
.highlighted { |
|||
opacity: 1; |
|||
} |
|||
|
|||
.checkbox-model-label { |
|||
text-transform: capitalize; |
|||
} |
|||
|
|||
h3 { |
|||
margin: 0 0 0 10px; |
|||
} |
|||
|
|||
heading { |
|||
padding: 20px 20px 0 20px; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
</style> |
|||
@ -1,7 +1,231 @@ |
|||
<script> |
|||
import ModelView from "../../ModelView.svelte" |
|||
import { tick } from "svelte" |
|||
import Textbox from "components/common/Textbox.svelte" |
|||
import Button from "components/common/Button.svelte" |
|||
import Select from "components/common/Select.svelte" |
|||
import ActionButton from "components/common/ActionButton.svelte" |
|||
import getIcon from "components/common/icon" |
|||
import FieldView from "../../FieldView.svelte" |
|||
import { |
|||
get, |
|||
compose, |
|||
map, |
|||
join, |
|||
filter, |
|||
some, |
|||
find, |
|||
keys, |
|||
isDate, |
|||
} from "lodash/fp" |
|||
import { store, backendUiStore } from "builderStore" |
|||
import { common, hierarchy } from "../../../../../../core/src/" |
|||
import { getNode } from "components/common/core" |
|||
import { templateApi, pipe, validate } from "components/common/core" |
|||
import ErrorsBox from "components/common/ErrorsBox.svelte" |
|||
|
|||
let model |
|||
let editingField = false |
|||
let fieldToEdit |
|||
let isNewField = false |
|||
let newField |
|||
let editField |
|||
let deleteField |
|||
let onFinishedFieldEdit |
|||
let editIndex |
|||
|
|||
$: parent = model && model.parent() |
|||
$: isChildModel = parent && parent.name !== "root" |
|||
$: modelExistsInHierarchy = |
|||
$store.currentNode && getNode($store.hierarchy, $store.currentNode.nodeId) |
|||
|
|||
store.subscribe($store => { |
|||
model = $store.currentNode |
|||
const flattened = hierarchy.getFlattenedHierarchy($store.hierarchy) |
|||
|
|||
newField = () => { |
|||
isNewField = true |
|||
fieldToEdit = templateApi($store.hierarchy).getNewField("string") |
|||
editingField = true |
|||
} |
|||
|
|||
onFinishedFieldEdit = field => { |
|||
if (field) { |
|||
store.saveField(field) |
|||
} |
|||
editingField = false |
|||
} |
|||
|
|||
editField = field => { |
|||
isNewField = false |
|||
fieldToEdit = field |
|||
editingField = true |
|||
} |
|||
|
|||
deleteField = field => { |
|||
store.deleteField(field) |
|||
} |
|||
|
|||
editIndex = index => { |
|||
store.selectExistingNode(index.nodeId) |
|||
} |
|||
}) |
|||
|
|||
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 (model.collectionName === "") { |
|||
model.collectionName = pluralName(ev.target.value) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<section> |
|||
<ModelView /> |
|||
</section> |
|||
<heading> |
|||
{#if !editingField} |
|||
<i class="ri-list-settings-line button--toggled" /> |
|||
<h3 class="budibase__title--3">Create / Edit Model</h3> |
|||
{:else} |
|||
<i class="ri-file-list-line button--toggled" /> |
|||
<h3 class="budibase__title--3">Create / Edit Field</h3> |
|||
{/if} |
|||
</heading> |
|||
{#if !editingField} |
|||
<div class="padding"> |
|||
<h4 class="budibase__label--big">Settings</h4> |
|||
|
|||
{#if $store.errors && $store.errors.length > 0} |
|||
<ErrorsBox errors={$store.errors} /> |
|||
{/if} |
|||
|
|||
<form on:submit|preventDefault class="uk-form-stacked"> |
|||
|
|||
<Textbox label="Name" bind:text={model.name} on:change={nameChanged} /> |
|||
{#if isChildModel} |
|||
<div> |
|||
<label class="uk-form-label">Parent</label> |
|||
<div class="uk-form-controls parent-name">{parent.name}</div> |
|||
</div> |
|||
{/if} |
|||
</form> |
|||
|
|||
<div class="table-controls"> |
|||
<span class="budibase__label--big">Fields</span> |
|||
<h4 class="hoverable new-field" on:click={newField}>Add new field</h4> |
|||
</div> |
|||
|
|||
<table class="uk-table fields-table budibase__table"> |
|||
<thead> |
|||
<tr> |
|||
<th>Edit</th> |
|||
<th>Name</th> |
|||
<th>Type</th> |
|||
<th>Values</th> |
|||
<th /> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
{#each model ? model.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> |
|||
<td> |
|||
<i |
|||
class="ri-delete-bin-6-line hoverable" |
|||
on:click={() => deleteField(field)} /> |
|||
</td> |
|||
</tr> |
|||
{/each} |
|||
</tbody> |
|||
</table> |
|||
<div class="uk-margin"> |
|||
<ActionButton color="secondary" on:click={store.saveCurrentNode}> |
|||
Save |
|||
</ActionButton> |
|||
{#if modelExistsInHierarchy} |
|||
<ActionButton color="primary" on:click={store.newChildModel}> |
|||
Create Child Model on {model.name} |
|||
</ActionButton> |
|||
<ActionButton |
|||
color="primary" |
|||
on:click={async () => { |
|||
backendUiStore.actions.modals.show('VIEW') |
|||
await tick() |
|||
store.newChildIndex() |
|||
}}> |
|||
Create Child View on {model.name} |
|||
</ActionButton> |
|||
<ActionButton alert on:click={store.deleteCurrentNode}> |
|||
Delete |
|||
</ActionButton> |
|||
{/if} |
|||
</div> |
|||
</div> |
|||
{:else} |
|||
<FieldView |
|||
field={fieldToEdit} |
|||
onFinished={onFinishedFieldEdit} |
|||
allFields={model.fields} |
|||
store={$store} /> |
|||
{/if} |
|||
|
|||
<style> |
|||
.padding { |
|||
padding: 20px; |
|||
} |
|||
|
|||
.new-field { |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
color: var(--button-text); |
|||
} |
|||
|
|||
.fields-table { |
|||
margin: 1rem 1rem 0rem 0rem; |
|||
border-collapse: collapse; |
|||
} |
|||
|
|||
tbody > tr:hover { |
|||
background-color: var(--primary10); |
|||
} |
|||
|
|||
.table-controls { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
.ri-more-line:hover { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
heading { |
|||
padding: 20px 20px 0 20px; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
h3 { |
|||
margin: 0 0 0 10px; |
|||
} |
|||
|
|||
.parent-name { |
|||
font-weight: bold; |
|||
} |
|||
</style> |
|||
|
|||
@ -1,7 +1,151 @@ |
|||
<script> |
|||
import IndexView from "../../IndexView.svelte" |
|||
import Textbox from "components/common/Textbox.svelte" |
|||
import CodeArea from "components/common/CodeArea.svelte" |
|||
import Button from "components/common/Button.svelte" |
|||
import Dropdown from "components/common/Dropdown.svelte" |
|||
import { store } from "builderStore" |
|||
import { filter, some, map, compose } from "lodash/fp" |
|||
import { |
|||
hierarchy as hierarchyFunctions, |
|||
common, |
|||
} from "../../../../../../core/src/" |
|||
import ErrorsBox from "components/common/ErrorsBox.svelte" |
|||
import ActionButton from "components/common/ActionButton.svelte" |
|||
|
|||
const SNIPPET_EDITORS = { |
|||
MAP: "Map", |
|||
FILTER: "Filter", |
|||
SHARD: "Shard Name", |
|||
} |
|||
|
|||
let view |
|||
let indexableModels = [] |
|||
let currentSnippetEditor = SNIPPET_EDITORS.MAP |
|||
|
|||
const indexableModelsFromIndex = compose( |
|||
map(node => ({ |
|||
node, |
|||
isallowed: |
|||
view.allowedModelNodeIds && |
|||
view.allowedModelNodeIds.some(id => node.nodeId === id), |
|||
})), |
|||
filter(hierarchyFunctions.isModel), |
|||
filter(hierarchyFunctions.isDecendant($store.currentNode.parent())), |
|||
hierarchyFunctions.getFlattenedHierarchy |
|||
) |
|||
|
|||
store.subscribe($store => { |
|||
view = $store.currentNode |
|||
indexableModels = indexableModelsFromIndex($store.hierarchy) |
|||
}) |
|||
|
|||
const toggleAllowedModel = model => { |
|||
if (model.isallowed) { |
|||
view.allowedModelNodeIds = view.allowedModelNodeIds.filter( |
|||
id => id !== model.node.nodeId |
|||
) |
|||
} else { |
|||
view.allowedModelNodeIds.push(model.node.nodeId) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<section> |
|||
<IndexView /> |
|||
</section> |
|||
<heading> |
|||
<i class="ri-eye-line button--toggled" /> |
|||
<h3 class="budibase__title--3">Create / Edit View</h3> |
|||
</heading> |
|||
<form on:submit|preventDefault class="uk-form-stacked root"> |
|||
<h4 class="budibase__label--big">Settings</h4> |
|||
{#if $store.errors && $store.errors.length > 0} |
|||
<ErrorsBox errors={$store.errors} /> |
|||
{/if} |
|||
<div class="uk-grid-small" uk-grid> |
|||
<div class="uk-width-1-2@s"> |
|||
<Textbox bind:text={view.name} label="Name" /> |
|||
</div> |
|||
<div class="uk-width-1-2@s"> |
|||
<Dropdown |
|||
label="View Type" |
|||
bind:selected={view.indexType} |
|||
options={['ancestor', 'reference']} /> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="allowed-records"> |
|||
<div class="budibase__label--big"> |
|||
Which models would you like to add to this view? |
|||
</div> |
|||
{#each indexableModels as model} |
|||
<input |
|||
class="uk-checkbox" |
|||
type="checkbox" |
|||
checked={model.isallowed} |
|||
on:change={() => toggleAllowedModel(model)} /> |
|||
<span class="checkbox-model-label">{model.node.name}</span> |
|||
{/each} |
|||
</div> |
|||
|
|||
<h4 class="budibase__label--big">Snippets</h4> |
|||
{#each Object.values(SNIPPET_EDITORS) as snippetType} |
|||
<span |
|||
class="snippet-selector__heading hoverable" |
|||
class:highlighted={currentSnippetEditor === snippetType} |
|||
on:click={() => (currentSnippetEditor = snippetType)}> |
|||
{snippetType} |
|||
</span> |
|||
{/each} |
|||
{#if currentSnippetEditor === SNIPPET_EDITORS.MAP} |
|||
<CodeArea bind:text={view.map} label="Map" /> |
|||
{:else if currentSnippetEditor === SNIPPET_EDITORS.FILTER} |
|||
<CodeArea bind:text={view.filter} label="Filter" /> |
|||
{:else if currentSnippetEditor === SNIPPET_EDITORS.SHARD} |
|||
<CodeArea bind:text={view.getShardName} label="Shard Name" /> |
|||
{/if} |
|||
|
|||
<ActionButton color="secondary" on:click={store.saveCurrentNode}> |
|||
Save |
|||
</ActionButton> |
|||
|
|||
{#if !$store.currentNodeIsNew} |
|||
<ActionButton alert on:click={store.deleteCurrentNode}>Delete</ActionButton> |
|||
{/if} |
|||
|
|||
</form> |
|||
|
|||
<style> |
|||
.root { |
|||
height: 100%; |
|||
padding: 15px; |
|||
} |
|||
|
|||
.allowed-records { |
|||
margin: 20px 0px; |
|||
} |
|||
|
|||
.allowed-records > span { |
|||
margin-right: 30px; |
|||
} |
|||
|
|||
.snippet-selector__heading { |
|||
margin-right: 20px; |
|||
opacity: 0.7; |
|||
} |
|||
|
|||
.highlighted { |
|||
opacity: 1; |
|||
} |
|||
|
|||
.checkbox-model-label { |
|||
text-transform: capitalize; |
|||
} |
|||
|
|||
h3 { |
|||
margin: 0 0 0 10px; |
|||
} |
|||
|
|||
heading { |
|||
padding: 20px 20px 0 20px; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
</style> |
|||
|
|||
@ -1,240 +0,0 @@ |
|||
<script> |
|||
import { tick } from "svelte" |
|||
import Textbox from "components/common/Textbox.svelte" |
|||
import Button from "components/common/Button.svelte" |
|||
import Select from "components/common/Select.svelte" |
|||
import ActionButton from "components/common/ActionButton.svelte" |
|||
import getIcon from "components/common/icon" |
|||
import FieldView from "./FieldView.svelte" |
|||
import { |
|||
get, |
|||
compose, |
|||
map, |
|||
join, |
|||
filter, |
|||
some, |
|||
find, |
|||
keys, |
|||
isDate, |
|||
} from "lodash/fp" |
|||
import { store, backendUiStore } from "builderStore" |
|||
import { common, hierarchy } from "../../../../core/src/" |
|||
import { getNode } from "components/common/core" |
|||
import { templateApi, pipe, validate } from "components/common/core" |
|||
import ErrorsBox from "components/common/ErrorsBox.svelte" |
|||
|
|||
let record |
|||
let getIndexAllowedRecords |
|||
let editingField = false |
|||
let fieldToEdit |
|||
let isNewField = false |
|||
let newField |
|||
let editField |
|||
let deleteField |
|||
let onFinishedFieldEdit |
|||
let editIndex |
|||
|
|||
$: models = $store.hierarchy.children |
|||
$: parent = record && record.parent() |
|||
$: isChildModel = parent && parent.name !== "root" |
|||
$: modelExistsInHierarchy = |
|||
$store.currentNode && getNode($store.hierarchy, $store.currentNode.nodeId) |
|||
|
|||
store.subscribe($store => { |
|||
record = $store.currentNode |
|||
const flattened = hierarchy.getFlattenedHierarchy($store.hierarchy) |
|||
|
|||
getIndexAllowedRecords = compose( |
|||
join(", "), |
|||
map(id => flattened.find(n => n.nodeId === id).name), |
|||
filter(id => flattened.some(n => n.nodeId === id)), |
|||
get("allowedRecordNodeIds") |
|||
) |
|||
|
|||
newField = () => { |
|||
isNewField = true |
|||
fieldToEdit = templateApi($store.hierarchy).getNewField("string") |
|||
editingField = true |
|||
} |
|||
|
|||
onFinishedFieldEdit = field => { |
|||
if (field) { |
|||
store.saveField(field) |
|||
} |
|||
editingField = false |
|||
} |
|||
|
|||
editField = field => { |
|||
isNewField = false |
|||
fieldToEdit = field |
|||
editingField = true |
|||
} |
|||
|
|||
deleteField = field => { |
|||
store.deleteField(field) |
|||
} |
|||
|
|||
editIndex = index => { |
|||
store.selectExistingNode(index.nodeId) |
|||
} |
|||
}) |
|||
|
|||
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) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<heading> |
|||
{#if !editingField} |
|||
<i class="ri-list-settings-line button--toggled" /> |
|||
<h3 class="budibase__title--3">Create / Edit Model</h3> |
|||
{:else} |
|||
<i class="ri-file-list-line button--toggled" /> |
|||
<h3 class="budibase__title--3">Create / Edit Field</h3> |
|||
{/if} |
|||
</heading> |
|||
{#if !editingField} |
|||
<div class="padding"> |
|||
<h4 class="budibase__label--big">Settings</h4> |
|||
|
|||
{#if $store.errors && $store.errors.length > 0} |
|||
<ErrorsBox errors={$store.errors} /> |
|||
{/if} |
|||
|
|||
<form on:submit|preventDefault class="uk-form-stacked"> |
|||
|
|||
<Textbox label="Name" bind:text={record.name} on:change={nameChanged} /> |
|||
{#if isChildModel} |
|||
<div> |
|||
<label class="uk-form-label">Parent</label> |
|||
<div class="uk-form-controls parent-name">{parent.name}</div> |
|||
</div> |
|||
{/if} |
|||
</form> |
|||
|
|||
<div class="table-controls"> |
|||
<span class="budibase__label--big">Fields</span> |
|||
<h4 class="hoverable new-field" on:click={newField}>Add new field</h4> |
|||
</div> |
|||
|
|||
<table class="uk-table fields-table budibase__table"> |
|||
<thead> |
|||
<tr> |
|||
<th>Edit</th> |
|||
<th>Name</th> |
|||
<th>Type</th> |
|||
<th>Values</th> |
|||
<th /> |
|||
</tr> |
|||
</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> |
|||
<td> |
|||
<i |
|||
class="ri-delete-bin-6-line hoverable" |
|||
on:click={() => deleteField(field)} /> |
|||
</td> |
|||
</tr> |
|||
{/each} |
|||
</tbody> |
|||
</table> |
|||
<div class="uk-margin"> |
|||
<ActionButton color="secondary" on:click={store.saveCurrentNode}> |
|||
Save |
|||
</ActionButton> |
|||
{#if modelExistsInHierarchy} |
|||
<ActionButton color="primary" on:click={store.newChildRecord}> |
|||
Create Child Model on {record.name} |
|||
</ActionButton> |
|||
<ActionButton |
|||
color="primary" |
|||
on:click={async () => { |
|||
backendUiStore.actions.modals.show('VIEW') |
|||
await tick() |
|||
store.newChildIndex() |
|||
}}> |
|||
Create Child View on {record.name} |
|||
</ActionButton> |
|||
<ActionButton alert on:click={store.deleteCurrentNode}> |
|||
Delete |
|||
</ActionButton> |
|||
{/if} |
|||
</div> |
|||
</div> |
|||
{:else} |
|||
<FieldView |
|||
field={fieldToEdit} |
|||
onFinished={onFinishedFieldEdit} |
|||
allFields={record.fields} |
|||
store={$store} /> |
|||
{/if} |
|||
|
|||
<style> |
|||
.padding { |
|||
padding: 20px; |
|||
} |
|||
|
|||
.new-field { |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
color: var(--button-text); |
|||
} |
|||
|
|||
.fields-table { |
|||
margin: 1rem 1rem 0rem 0rem; |
|||
border-collapse: collapse; |
|||
} |
|||
|
|||
tbody > tr:hover { |
|||
background-color: var(--primary10); |
|||
} |
|||
|
|||
.table-controls { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
.ri-more-line:hover { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
heading { |
|||
padding: 20px 20px 0 20px; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
h3 { |
|||
margin: 0 0 0 10px; |
|||
} |
|||
|
|||
.parent-name { |
|||
font-weight: bold; |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue