moved unused component and updated records to model
This commit is contained in:
kevmodrome
parent
514bccfd11
commit
c5e3a78e13
|
|
@ -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,151 @@
|
||||||
<script>
|
<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 index
|
||||||
|
let indexableModels = []
|
||||||
|
let currentSnippetEditor = SNIPPET_EDITORS.MAP
|
||||||
|
|
||||||
|
const indexableModelsFromIndex = 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
|
||||||
|
indexableModels = indexableModelsFromIndex($store.hierarchy)
|
||||||
|
})
|
||||||
|
|
||||||
|
const toggleAllowedModel = model => {
|
||||||
|
if (model.isallowed) {
|
||||||
|
index.allowedRecordNodeIds = index.allowedRecordNodeIds.filter(
|
||||||
|
id => id !== model.node.nodeId
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
index.allowedRecordNodeIds.push(model.node.nodeId)
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section>
|
<heading>
|
||||||
<IndexView />
|
<i class="ri-eye-line button--toggled" />
|
||||||
</section>
|
<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 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={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>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue