forked from tsai/budibase
Andrew Kingston
6 years ago
36 changed files with 562 additions and 598 deletions
@ -1,7 +1,7 @@ |
|||||
<script> |
<script> |
||||
import { Input, Select, Label, DatePicker, Toggle } from "@budibase/bbui" |
import { Input, Select, Label, DatePicker, Toggle } from "@budibase/bbui" |
||||
import Dropzone from "components/common/Dropzone.svelte" |
import Dropzone from "components/common/Dropzone.svelte" |
||||
import { capitalise } from "../../../../helpers" |
import { capitalise } from "../../../helpers" |
||||
|
|
||||
export let meta |
export let meta |
||||
export let value = meta.type === "boolean" ? false : "" |
export let value = meta.type === "boolean" ? false : "" |
||||
@ -0,0 +1,19 @@ |
|||||
|
<script> |
||||
|
import { Popover, TextButton, Icon } from "@budibase/bbui" |
||||
|
import CalculatePopover from "../popovers/CalculatePopover.svelte" |
||||
|
|
||||
|
export let view = {} |
||||
|
|
||||
|
let anchor |
||||
|
let dropdown |
||||
|
</script> |
||||
|
|
||||
|
<div bind:this={anchor}> |
||||
|
<TextButton text small on:click={dropdown.show} active={!!view.field}> |
||||
|
<Icon name="calculate" /> |
||||
|
Calculate |
||||
|
</TextButton> |
||||
|
</div> |
||||
|
<Popover bind:this={dropdown} {anchor} align="left"> |
||||
|
<CalculatePopover {view} onClosed={dropdown.hide} /> |
||||
|
</Popover> |
||||
@ -0,0 +1,17 @@ |
|||||
|
<script> |
||||
|
import { TextButton as Button, Icon } from "@budibase/bbui" |
||||
|
import CreateEditRecordModal from "../modals/CreateEditRecordModal.svelte" |
||||
|
import { Modal } from "components/common/Modal" |
||||
|
|
||||
|
let modal |
||||
|
</script> |
||||
|
|
||||
|
<div> |
||||
|
<Button text small on:click={modal.show}> |
||||
|
<Icon name="addrow" /> |
||||
|
Create New Row |
||||
|
</Button> |
||||
|
</div> |
||||
|
<Modal bind:this={modal}> |
||||
|
<CreateEditRecordModal /> |
||||
|
</Modal> |
||||
@ -0,0 +1,17 @@ |
|||||
|
<script> |
||||
|
import { Popover, TextButton, Icon } from "@budibase/bbui" |
||||
|
import CreateViewPopover from "../popovers/CreateViewPopover.svelte" |
||||
|
|
||||
|
let anchor |
||||
|
let dropdown |
||||
|
</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"> |
||||
|
<CreateViewPopover onClosed={dropdown.hide} /> |
||||
|
</Popover> |
||||
@ -0,0 +1,23 @@ |
|||||
|
<script> |
||||
|
import { Popover, TextButton, Icon } from "@budibase/bbui" |
||||
|
import FilterPopover from "../popovers/FilterPopover.svelte" |
||||
|
|
||||
|
export let view = {} |
||||
|
|
||||
|
let anchor |
||||
|
let dropdown |
||||
|
</script> |
||||
|
|
||||
|
<div bind:this={anchor}> |
||||
|
<TextButton |
||||
|
text |
||||
|
small |
||||
|
on:click={dropdown.show} |
||||
|
active={view.filters && view.filters.length}> |
||||
|
<Icon name="filter" /> |
||||
|
Filter |
||||
|
</TextButton> |
||||
|
</div> |
||||
|
<Popover bind:this={dropdown} {anchor} align="left"> |
||||
|
<FilterPopover {view} onClosed={dropdown.hide} /> |
||||
|
</Popover> |
||||
@ -0,0 +1,19 @@ |
|||||
|
<script> |
||||
|
import { Popover, TextButton, Icon } from "@budibase/bbui" |
||||
|
import GroupByPopover from "../popovers/GroupByPopover.svelte" |
||||
|
|
||||
|
export let view = {} |
||||
|
|
||||
|
let anchor |
||||
|
let dropdown |
||||
|
</script> |
||||
|
|
||||
|
<div bind:this={anchor}> |
||||
|
<TextButton text small active={!!view.groupBy} on:click={dropdown.show}> |
||||
|
<Icon name="group" /> |
||||
|
Group By |
||||
|
</TextButton> |
||||
|
</div> |
||||
|
<Popover bind:this={dropdown} {anchor} align="left"> |
||||
|
<GroupByPopover {view} onClosed={dropdown.hide} /> |
||||
|
</Popover> |
||||
@ -1 +0,0 @@ |
|||||
export { default } from "./ModelDataTable.svelte" |
|
||||
@ -0,0 +1,50 @@ |
|||||
|
<script> |
||||
|
import { backendUiStore } from "builderStore" |
||||
|
import { notifier } from "builderStore/store/notifications" |
||||
|
import LinkedRecordSelector from "components/common/LinkedRecordSelector.svelte" |
||||
|
import RecordFieldControl from "../RecordFieldControl.svelte" |
||||
|
import * as api from "../api" |
||||
|
import { ModalTitle, ModalFooter } from "components/common/Modal" |
||||
|
import ErrorsBox from "components/common/ErrorsBox.svelte" |
||||
|
|
||||
|
export let record = {} |
||||
|
export let visible = false |
||||
|
|
||||
|
let modal |
||||
|
let errors = [] |
||||
|
|
||||
|
$: creating = record?._id == null |
||||
|
$: model = record.modelId |
||||
|
? $backendUiStore.models.find(model => model._id === record?.modelId) |
||||
|
: $backendUiStore.selectedModel |
||||
|
$: modelSchema = Object.entries(model?.schema ?? {}) |
||||
|
|
||||
|
async function saveRecord() { |
||||
|
const recordResponse = await api.saveRecord( |
||||
|
{ ...record, modelId: model._id }, |
||||
|
model._id |
||||
|
) |
||||
|
if (recordResponse.errors) { |
||||
|
errors = Object.keys(recordResponse.errors) |
||||
|
.map(k => ({ dataPath: k, message: recordResponse.errors[k] })) |
||||
|
.flat() |
||||
|
// Prevent modal closing if there were errors |
||||
|
return false |
||||
|
} |
||||
|
notifier.success("Record saved successfully.") |
||||
|
backendUiStore.actions.records.save(recordResponse) |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<ModalTitle>{creating ? 'Create Row' : 'Edit Row'}</ModalTitle> |
||||
|
<ErrorsBox {errors} /> |
||||
|
{#each modelSchema as [key, meta]} |
||||
|
<div> |
||||
|
{#if meta.type === 'link'} |
||||
|
<LinkedRecordSelector bind:linkedRecords={record[key]} schema={meta} /> |
||||
|
{:else} |
||||
|
<RecordFieldControl {meta} bind:value={record[key]} /> |
||||
|
{/if} |
||||
|
</div> |
||||
|
{/each} |
||||
|
<ModalFooter confirmText={creating ? 'Add' : 'Save'} onConfirm={saveRecord} /> |
||||
@ -1,102 +0,0 @@ |
|||||
<script> |
|
||||
import { |
|
||||
Popover, |
|
||||
TextButton, |
|
||||
Button, |
|
||||
Icon, |
|
||||
Input, |
|
||||
Select, |
|
||||
} from "@budibase/bbui" |
|
||||
import { backendUiStore } from "builderStore" |
|
||||
import { notifier } from "builderStore/store/notifications" |
|
||||
import CreateEditRecord from "./CreateEditRecord.svelte" |
|
||||
|
|
||||
const CALCULATIONS = [ |
|
||||
{ |
|
||||
name: "Statistics", |
|
||||
key: "stats", |
|
||||
}, |
|
||||
] |
|
||||
|
|
||||
export let view = {} |
|
||||
|
|
||||
let anchor |
|
||||
let dropdown |
|
||||
|
|
||||
$: viewModel = $backendUiStore.models.find( |
|
||||
({ _id }) => _id === $backendUiStore.selectedView.modelId |
|
||||
) |
|
||||
$: fields = |
|
||||
viewModel && |
|
||||
Object.keys(viewModel.schema).filter( |
|
||||
field => viewModel.schema[field].type === "number" |
|
||||
) |
|
||||
|
|
||||
function saveView() { |
|
||||
backendUiStore.actions.views.save(view) |
|
||||
notifier.success(`View ${view.name} saved.`) |
|
||||
dropdown.hide() |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<div bind:this={anchor}> |
|
||||
<TextButton text small on:click={dropdown.show} active={!!view.field}> |
|
||||
<Icon name="calculate" /> |
|
||||
Calculate |
|
||||
</TextButton> |
|
||||
</div> |
|
||||
<Popover bind:this={dropdown} {anchor} align="left"> |
|
||||
<div class="actions"> |
|
||||
<h5>Calculate</h5> |
|
||||
<div class="input-group-row"> |
|
||||
<p>The</p> |
|
||||
<Select secondary thin bind:value={view.calculation}> |
|
||||
<option value="">Choose an option</option> |
|
||||
{#each CALCULATIONS as calculation} |
|
||||
<option value={calculation.key}>{calculation.name}</option> |
|
||||
{/each} |
|
||||
</Select> |
|
||||
<p>of</p> |
|
||||
<Select secondary thin bind:value={view.field}> |
|
||||
<option value="">Choose an option</option> |
|
||||
{#each fields as field} |
|
||||
<option value={field}>{field}</option> |
|
||||
{/each} |
|
||||
</Select> |
|
||||
</div> |
|
||||
<div class="footer"> |
|
||||
<Button secondary on:click={dropdown.hide}>Cancel</Button> |
|
||||
<Button primary on:click={saveView}>Save</Button> |
|
||||
</div> |
|
||||
</div> |
|
||||
</Popover> |
|
||||
|
|
||||
<style> |
|
||||
.actions { |
|
||||
display: grid; |
|
||||
grid-gap: var(--spacing-xl); |
|
||||
} |
|
||||
|
|
||||
h5 { |
|
||||
margin: 0; |
|
||||
font-weight: 500; |
|
||||
} |
|
||||
|
|
||||
.footer { |
|
||||
display: flex; |
|
||||
justify-content: flex-end; |
|
||||
gap: var(--spacing-m); |
|
||||
} |
|
||||
|
|
||||
.input-group-row { |
|
||||
display: grid; |
|
||||
grid-template-columns: 30px 1fr 20px 1fr; |
|
||||
gap: var(--spacing-s); |
|
||||
align-items: center; |
|
||||
} |
|
||||
|
|
||||
p { |
|
||||
margin: 0; |
|
||||
font-size: var(--font-size-xs); |
|
||||
} |
|
||||
</style> |
|
||||
@ -0,0 +1,84 @@ |
|||||
|
<script> |
||||
|
import { Button, Input, Select } from "@budibase/bbui" |
||||
|
import { backendUiStore } from "builderStore" |
||||
|
import { notifier } from "builderStore/store/notifications" |
||||
|
|
||||
|
const CALCULATIONS = [ |
||||
|
{ |
||||
|
name: "Statistics", |
||||
|
key: "stats", |
||||
|
}, |
||||
|
] |
||||
|
|
||||
|
export let view = {} |
||||
|
export let onClosed |
||||
|
|
||||
|
$: viewModel = $backendUiStore.models.find( |
||||
|
({ _id }) => _id === $backendUiStore.selectedView.modelId |
||||
|
) |
||||
|
$: fields = |
||||
|
viewModel && |
||||
|
Object.keys(viewModel.schema).filter( |
||||
|
field => viewModel.schema[field].type === "number" |
||||
|
) |
||||
|
|
||||
|
function saveView() { |
||||
|
backendUiStore.actions.views.save(view) |
||||
|
notifier.success(`View ${view.name} saved.`) |
||||
|
onClosed() |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<div class="actions"> |
||||
|
<h5>Calculate</h5> |
||||
|
<div class="input-group-row"> |
||||
|
<p>The</p> |
||||
|
<Select secondary thin bind:value={view.calculation}> |
||||
|
<option value="">Choose an option</option> |
||||
|
{#each CALCULATIONS as calculation} |
||||
|
<option value={calculation.key}>{calculation.name}</option> |
||||
|
{/each} |
||||
|
</Select> |
||||
|
<p>of</p> |
||||
|
<Select secondary thin bind:value={view.field}> |
||||
|
<option value="">Choose an option</option> |
||||
|
{#each fields as field} |
||||
|
<option value={field}>{field}</option> |
||||
|
{/each} |
||||
|
</Select> |
||||
|
</div> |
||||
|
<div class="footer"> |
||||
|
<Button secondary on:click={onClosed}>Cancel</Button> |
||||
|
<Button primary on:click={saveView}>Save</Button> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<style> |
||||
|
.actions { |
||||
|
display: grid; |
||||
|
grid-gap: var(--spacing-xl); |
||||
|
} |
||||
|
|
||||
|
h5 { |
||||
|
margin: 0; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.footer { |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
gap: var(--spacing-m); |
||||
|
} |
||||
|
|
||||
|
.input-group-row { |
||||
|
display: grid; |
||||
|
grid-template-columns: 30px 1fr 20px 1fr; |
||||
|
gap: var(--spacing-s); |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
p { |
||||
|
margin: 0; |
||||
|
font-size: var(--font-size-xs); |
||||
|
} |
||||
|
</style> |
||||
@ -1,81 +0,0 @@ |
|||||
<script> |
|
||||
import { onMount, tick } from "svelte" |
|
||||
import { store, backendUiStore } from "builderStore" |
|
||||
import { notifier } from "builderStore/store/notifications" |
|
||||
import { compose, map, get, flatten } from "lodash/fp" |
|
||||
import { Input, TextArea, Button } from "@budibase/bbui" |
|
||||
import LinkedRecordSelector from "components/common/LinkedRecordSelector.svelte" |
|
||||
import RecordFieldControl from "./RecordFieldControl.svelte" |
|
||||
import * as api from "../api" |
|
||||
import ErrorsBox from "components/common/ErrorsBox.svelte" |
|
||||
|
|
||||
export let record = {} |
|
||||
export let onClosed |
|
||||
|
|
||||
let errors = [] |
|
||||
$: model = record.modelId |
|
||||
? $backendUiStore.models.find(model => model._id === record?.modelId) |
|
||||
: $backendUiStore.selectedModel |
|
||||
$: modelSchema = Object.entries(model?.schema ?? {}) |
|
||||
|
|
||||
async function saveRecord() { |
|
||||
const recordResponse = await api.saveRecord( |
|
||||
{ |
|
||||
...record, |
|
||||
modelId: model._id, |
|
||||
}, |
|
||||
model._id |
|
||||
) |
|
||||
if (recordResponse.errors) { |
|
||||
errors = Object.keys(recordResponse.errors) |
|
||||
.map(k => ({ dataPath: k, message: recordResponse.errors[k] })) |
|
||||
.flat() |
|
||||
return |
|
||||
} |
|
||||
|
|
||||
onClosed() |
|
||||
notifier.success("Record saved successfully.") |
|
||||
backendUiStore.actions.records.save(recordResponse) |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<div class="actions"> |
|
||||
<ErrorsBox {errors} /> |
|
||||
<form on:submit|preventDefault> |
|
||||
{#each modelSchema as [key, meta]} |
|
||||
<div> |
|
||||
{#if meta.type === 'link'} |
|
||||
<LinkedRecordSelector |
|
||||
bind:linkedRecords={record[key]} |
|
||||
schema={meta} /> |
|
||||
{:else} |
|
||||
<RecordFieldControl {meta} bind:value={record[key]} /> |
|
||||
{/if} |
|
||||
</div> |
|
||||
{/each} |
|
||||
</form> |
|
||||
<footer> |
|
||||
<Button secondary on:click={onClosed}>Cancel</Button> |
|
||||
<Button primary on:click={saveRecord}>Save</Button> |
|
||||
</footer> |
|
||||
</div> |
|
||||
|
|
||||
<style> |
|
||||
.actions { |
|
||||
padding: var(--spacing-xl); |
|
||||
display: grid; |
|
||||
grid-gap: var(--spacing-xl); |
|
||||
min-width: 400px; |
|
||||
} |
|
||||
|
|
||||
form { |
|
||||
display: grid; |
|
||||
grid-gap: var(--spacing-xl); |
|
||||
} |
|
||||
|
|
||||
footer { |
|
||||
display: flex; |
|
||||
justify-content: flex-end; |
|
||||
gap: var(--spacing-m); |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,91 +0,0 @@ |
|||||
<script> |
|
||||
import { |
|
||||
Popover, |
|
||||
TextButton, |
|
||||
Button, |
|
||||
Icon, |
|
||||
Input, |
|
||||
Select, |
|
||||
} from "@budibase/bbui" |
|
||||
import { backendUiStore } from "builderStore" |
|
||||
import { notifier } from "builderStore/store/notifications" |
|
||||
import CreateEditRecord from "./CreateEditRecord.svelte" |
|
||||
|
|
||||
const CALCULATIONS = [ |
|
||||
{ |
|
||||
name: "Statistics", |
|
||||
key: "stats", |
|
||||
}, |
|
||||
] |
|
||||
|
|
||||
export let view = {} |
|
||||
|
|
||||
let anchor |
|
||||
let dropdown |
|
||||
|
|
||||
$: viewModel = $backendUiStore.models.find( |
|
||||
({ _id }) => _id === $backendUiStore.selectedView.modelId |
|
||||
) |
|
||||
$: fields = viewModel && Object.keys(viewModel.schema) |
|
||||
|
|
||||
function saveView() { |
|
||||
backendUiStore.actions.views.save(view) |
|
||||
notifier.success(`View ${view.name} saved.`) |
|
||||
dropdown.hide() |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<div bind:this={anchor}> |
|
||||
<TextButton text small active={!!view.groupBy} on:click={dropdown.show}> |
|
||||
<Icon name="group" /> |
|
||||
Group |
|
||||
</TextButton> |
|
||||
</div> |
|
||||
<Popover bind:this={dropdown} {anchor} align="left"> |
|
||||
<div class="actions"> |
|
||||
<h5>Group</h5> |
|
||||
<div class="input-group-row"> |
|
||||
<p>By</p> |
|
||||
<Select secondary thin bind:value={view.groupBy}> |
|
||||
<option value="">Choose an option</option> |
|
||||
{#each fields as field} |
|
||||
<option value={field}>{field}</option> |
|
||||
{/each} |
|
||||
</Select> |
|
||||
</div> |
|
||||
<div class="footer"> |
|
||||
<Button secondary on:click={dropdown.hide}>Cancel</Button> |
|
||||
<Button primary on:click={saveView}>Save</Button> |
|
||||
</div> |
|
||||
</div> |
|
||||
</Popover> |
|
||||
|
|
||||
<style> |
|
||||
.actions { |
|
||||
display: grid; |
|
||||
grid-gap: var(--spacing-xl); |
|
||||
} |
|
||||
|
|
||||
h5 { |
|
||||
margin: 0; |
|
||||
font-weight: 500; |
|
||||
} |
|
||||
|
|
||||
.footer { |
|
||||
display: flex; |
|
||||
justify-content: flex-end; |
|
||||
gap: var(--spacing-m); |
|
||||
} |
|
||||
|
|
||||
.input-group-row { |
|
||||
display: grid; |
|
||||
grid-template-columns: 20px 1fr; |
|
||||
gap: var(--spacing-s); |
|
||||
align-items: center; |
|
||||
} |
|
||||
|
|
||||
p { |
|
||||
margin: 0; |
|
||||
font-size: var(--font-size-xs); |
|
||||
} |
|
||||
</style> |
|
||||
@ -0,0 +1,66 @@ |
|||||
|
<script> |
||||
|
import { Button, Input, Select } from "@budibase/bbui" |
||||
|
import { backendUiStore } from "builderStore" |
||||
|
import { notifier } from "builderStore/store/notifications" |
||||
|
|
||||
|
export let view = {} |
||||
|
export let onClosed |
||||
|
|
||||
|
$: viewModel = $backendUiStore.models.find( |
||||
|
({ _id }) => _id === $backendUiStore.selectedView.modelId |
||||
|
) |
||||
|
$: fields = viewModel && Object.keys(viewModel.schema) |
||||
|
|
||||
|
function saveView() { |
||||
|
backendUiStore.actions.views.save(view) |
||||
|
notifier.success(`View ${view.name} saved.`) |
||||
|
onClosed() |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<div class="actions"> |
||||
|
<h5>Group</h5> |
||||
|
<div class="input-group-row"> |
||||
|
<p>By</p> |
||||
|
<Select secondary thin bind:value={view.groupBy}> |
||||
|
<option value="">Choose an option</option> |
||||
|
{#each fields as field} |
||||
|
<option value={field}>{field}</option> |
||||
|
{/each} |
||||
|
</Select> |
||||
|
</div> |
||||
|
<div class="footer"> |
||||
|
<Button secondary on:click={onClosed}>Cancel</Button> |
||||
|
<Button primary on:click={saveView}>Save</Button> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<style> |
||||
|
.actions { |
||||
|
display: grid; |
||||
|
grid-gap: var(--spacing-xl); |
||||
|
} |
||||
|
|
||||
|
h5 { |
||||
|
margin: 0; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.footer { |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
gap: var(--spacing-m); |
||||
|
} |
||||
|
|
||||
|
.input-group-row { |
||||
|
display: grid; |
||||
|
grid-template-columns: 20px 1fr; |
||||
|
gap: var(--spacing-s); |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
p { |
||||
|
margin: 0; |
||||
|
font-size: var(--font-size-xs); |
||||
|
} |
||||
|
</style> |
||||
@ -1,27 +0,0 @@ |
|||||
<script> |
|
||||
import { DropdownMenu, TextButton as Button, Icon } from "@budibase/bbui" |
|
||||
import CreateEditRecord from "./CreateEditRecord.svelte" |
|
||||
import { Modal } from "components/common/Modal" |
|
||||
|
|
||||
let anchor |
|
||||
let dropdown |
|
||||
</script> |
|
||||
|
|
||||
<div bind:this={anchor}> |
|
||||
<Button text small on:click={dropdown.show}> |
|
||||
<Icon name="addrow" /> |
|
||||
Create New Row |
|
||||
</Button> |
|
||||
</div> |
|
||||
<Modal bind:this={dropdown}> |
|
||||
<h5>Add New Row</h5> |
|
||||
<CreateEditRecord onClosed={dropdown.hide} /> |
|
||||
</Modal> |
|
||||
|
|
||||
<style> |
|
||||
h5 { |
|
||||
padding: var(--spacing-xl) 0 0 var(--spacing-xl); |
|
||||
margin: 0; |
|
||||
font-weight: 500; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,64 +1,31 @@ |
|||||
<script> |
<script> |
||||
import { Modal, Button, Heading, Spacer } from "@budibase/bbui" |
import { Modal, ModalTitle, ModalFooter } from "components/common/Modal" |
||||
|
|
||||
export let title = "" |
export let title = "" |
||||
export let body = "" |
export let body |
||||
export let okText = "OK" |
export let okText |
||||
export let cancelText = "Cancel" |
export let cancelText |
||||
export let onOk = () => {} |
export let onOk |
||||
export let onCancel = () => {} |
export let onCancel |
||||
|
|
||||
|
let modal |
||||
|
|
||||
export const show = () => { |
export const show = () => { |
||||
theModal.show() |
modal.show() |
||||
} |
} |
||||
|
|
||||
export const hide = () => { |
export const hide = () => { |
||||
theModal.hide() |
modal.hide() |
||||
} |
|
||||
|
|
||||
let theModal |
|
||||
|
|
||||
const cancel = () => { |
|
||||
hide() |
|
||||
onCancel() |
|
||||
} |
|
||||
|
|
||||
const ok = () => { |
|
||||
const result = onOk() |
|
||||
// allow caller to return false, to cancel the "ok" |
|
||||
if (result === false) return |
|
||||
hide() |
|
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<Modal id={title} bind:this={theModal}> |
<Modal id={title} bind:this={modal} on:hide={onCancel}> |
||||
<h2>{title}</h2> |
<ModalTitle>{title}</ModalTitle> |
||||
<Spacer extraLarge /> |
<div class="body">{body}</div> |
||||
<div class="content"> |
<ModalFooter confirmText={okText} {cancelText} onConfirm={onOk} red /> |
||||
<slot class="rows">{body}</slot> |
|
||||
</div> |
|
||||
<Spacer extraLarge /> |
|
||||
<div class="modal-footer"> |
|
||||
<Button red wide on:click={ok}>{okText}</Button> |
|
||||
<Button secondary wide on:click={cancel}>{cancelText}</Button> |
|
||||
</div> |
|
||||
</Modal> |
</Modal> |
||||
|
|
||||
<style> |
<style> |
||||
h2 { |
.body { |
||||
font-size: var(--font-size-xl); |
|
||||
margin: 0; |
|
||||
font-family: var(--font-sans); |
|
||||
font-weight: 600; |
|
||||
} |
|
||||
|
|
||||
.modal-footer { |
|
||||
display: grid; |
|
||||
grid-gap: var(--spacing-s); |
|
||||
} |
|
||||
|
|
||||
.content { |
|
||||
white-space: normal; |
|
||||
font-size: var(--font-size-s); |
font-size: var(--font-size-s); |
||||
} |
} |
||||
</style> |
</style> |
||||
|
|||||
@ -0,0 +1,44 @@ |
|||||
|
<script> |
||||
|
import { getContext } from "svelte" |
||||
|
import { Button } from "@budibase/bbui" |
||||
|
import { ContextKey } from "./context" |
||||
|
|
||||
|
export let cancelText = "Cancel" |
||||
|
export let confirmText = "Confirm" |
||||
|
export let showCancelButton = true |
||||
|
export let showConfirmButton = true |
||||
|
export let onConfirm |
||||
|
|
||||
|
const modalContext = getContext(ContextKey) |
||||
|
|
||||
|
function hide() { |
||||
|
modalContext.hide() |
||||
|
} |
||||
|
|
||||
|
async function confirm() { |
||||
|
if (!onConfirm || (await onConfirm()) !== false) { |
||||
|
hide() |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
{#if showCancelButton || showConfirmButton} |
||||
|
<footer> |
||||
|
{#if showCancelButton} |
||||
|
<Button secondary on:click={hide}>{cancelText}</Button> |
||||
|
{/if} |
||||
|
{#if showConfirmButton} |
||||
|
<Button primary {...$$restProps} on:click={confirm}>{confirmText}</Button> |
||||
|
{/if} |
||||
|
</footer> |
||||
|
{/if} |
||||
|
|
||||
|
<style> |
||||
|
footer { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: flex-end; |
||||
|
align-items: center; |
||||
|
gap: var(--spacing-m); |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,10 @@ |
|||||
|
<h5> |
||||
|
<slot /> |
||||
|
</h5> |
||||
|
|
||||
|
<style> |
||||
|
h5 { |
||||
|
margin: 0; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1 @@ |
|||||
|
export const ContextKey = "budibase-modal" |
||||
@ -1,2 +1,5 @@ |
|||||
export { default as Modal } from "./Modal.svelte" |
export { default as Modal } from "./Modal.svelte" |
||||
export { default as ModalContainer } from "./ModalContainer.svelte" |
export { default as ModalContainer } from "./ModalContainer.svelte" |
||||
|
export { default as ModalTitle } from "./ModalTitle.svelte" |
||||
|
export { default as ModalFooter } from "./ModalFooter.svelte" |
||||
|
export { ContextKey } from "./context" |
||||
|
|||||
Loading…
Reference in new issue