82 lines
1.9 KiB
Svelte
82 lines
1.9 KiB
Svelte
<script>
|
|
import {
|
|
Popover,
|
|
TextButton,
|
|
Button,
|
|
Icon,
|
|
Input,
|
|
Select,
|
|
} from "@budibase/bbui"
|
|
import { goto } from "@sveltech/routify"
|
|
import { backendUiStore } from "builderStore"
|
|
import { notifier } from "builderStore/store/notifications"
|
|
import CreateEditRecord from "../modals/CreateEditRecord.svelte"
|
|
import analytics from "analytics"
|
|
|
|
let anchor
|
|
let dropdown
|
|
|
|
let name
|
|
let field
|
|
|
|
$: fields = Object.keys($backendUiStore.selectedModel.schema).filter(key => {
|
|
return $backendUiStore.selectedModel.schema[key].type === "number"
|
|
})
|
|
$: views = $backendUiStore.models.flatMap(model =>
|
|
Object.keys(model.views || {})
|
|
)
|
|
|
|
function saveView() {
|
|
if (views.includes(name)) {
|
|
notifier.danger(`View exists with name ${name}.`)
|
|
return
|
|
}
|
|
backendUiStore.actions.views.save({
|
|
name,
|
|
modelId: $backendUiStore.selectedModel._id,
|
|
field,
|
|
})
|
|
notifier.success(`View ${name} created`)
|
|
dropdown.hide()
|
|
analytics.captureEvent("View Created", { name })
|
|
$goto(`../../../view/${name}`)
|
|
}
|
|
</script>
|
|
|
|
<div bind:this={anchor}>
|
|
<TextButton text small on:click={dropdown.show}>
|
|
<Icon name="view" />
|
|
Create New View
|
|
</TextButton>
|
|
</div>
|
|
<Popover bind:this={dropdown} {anchor} align="left">
|
|
<h5>Create View</h5>
|
|
<div class="input-group-column">
|
|
<Input placeholder="View Name" thin bind:value={name} />
|
|
</div>
|
|
<div class="button-group">
|
|
<Button secondary on:click={dropdown.hide}>Cancel</Button>
|
|
<Button primary on:click={saveView}>Save View</Button>
|
|
</div>
|
|
</Popover>
|
|
|
|
<style>
|
|
h5 {
|
|
margin-bottom: var(--spacing-l);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.button-group {
|
|
margin-top: var(--spacing-l);
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: var(--spacing-s);
|
|
}
|
|
|
|
.input-group-column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-s);
|
|
}
|
|
</style>
|