CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-06-14 16:35:02 +12:00
Code Issues Projects Releases Wiki Activity

Update other backend popovers to be modals

Browse source
This commit is contained in:
Andrew Kingston 2021-04-26 19:29:22 +01:00
parent 5b78e0c375
commit 11dd3ddf7a
6 changed files with 84 additions and 147 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
packages/builder/src/components/backend/DataTable/buttons/CalculateButton.svelte
View file

@ -1,20 +1,21 @@
<script>
import { Popover, Button } from "@budibase/bbui"
import CalculatePopover from "../popovers/CalculatePopover.svelte"
import { Modal, Button } from "@budibase/bbui"
import CalculateModal from "../modals/CalculateModal.svelte"
export let view = {}
let anchor
let dropdown
let modal
</script>
<div bind:this={anchor}>
<Button icon="Calculator" primary size="S" quiet
on:click={dropdown.show}
active={view.field && view.calculation}>
Calculate
</Button>
</div>
<Popover bind:this={dropdown} {anchor} align="left">
<CalculatePopover {view} onClosed={dropdown.hide} />
</Popover>
<Button
icon="Calculator"
primary
size="S"
quiet
on:click={modal.show}
active={view.field && view.calculation}>
Calculate
</Button>
<Modal bind:this={modal}>
<CalculateModal {view} />
</Modal>

4
packages/builder/src/components/backend/DataTable/buttons/FilterButton.svelte
View file

@ -1,6 +1,6 @@
<script>
import { Button, Modal } from "@budibase/bbui"
import FilterPopover from "../popovers/FilterPopover.svelte"
import FilterModal from "../modals/FilterModal.svelte"
export let view = {}
@ -17,5 +17,5 @@
Filter
</Button>
<Modal bind:this={modal}>
<FilterPopover {view} />
<FilterModal {view} />
</Modal>

27
packages/builder/src/components/backend/DataTable/buttons/GroupByButton.svelte
View file

@ -1,18 +1,21 @@
<script>
import { Popover, Button } from "@budibase/bbui"
import GroupByPopover from "../popovers/GroupByPopover.svelte"
import { Modal, Button } from "@budibase/bbui"
import GroupByModal from "../modals/GroupByModal.svelte"
export let view = {}
let anchor
let dropdown
let modal
</script>
<div bind:this={anchor}>
<Button icon="Group" primary size="S" quiet active={!!view.groupBy} on:click={dropdown.show}>
Group By
</Button>
</div>
<Popover bind:this={dropdown} {anchor} align="left">
<GroupByPopover {view} onClosed={dropdown.hide} />
</Popover>
<Button
icon="Group"
primary
size="S"
quiet
active={!!view.groupBy}
on:click={modal.show}>
Group By
</Button>
<Modal bind:this={modal}>
<GroupByModal {view} />
</Modal>

84
packages/builder/src/components/backend/DataTable/popovers/FilterPopover.svelte → packages/builder/src/components/backend/DataTable/modals/FilterModal.svelte
View file

@ -1,7 +1,16 @@
<script>
import { Button, Input, Select, DatePicker } from "@budibase/bbui"
import {
Button,
Input,
Body,
Select,
DatePicker,
ModalContent,
Label,
notifications,
Icon,
} from "@budibase/bbui"
import { tables, views } from "stores/backend"
import { notifications } from "@budibase/bbui"
import analytics from "analytics"
const CONDITIONS = [
@ -55,7 +64,6 @@
function saveView() {
views.save(view)
notifications.success(`View ${view.name} saved.`)
onClosed()
analytics.captureEvent("Added View Filter", {
filters: JSON.stringify(view.filters),
})
@ -67,7 +75,7 @@
}
function addFilter() {
view.filters.push({})
view.filters.push({ conjunction: "AND" })
view.filters = view.filters
}
@ -98,9 +106,8 @@
// reset if type changed
if (
filter.key &&
ev.target.value &&
viewTable.schema[filter.key].type !==
viewTable.schema[ev.target.value].type
ev.detail &&
viewTable.schema[filter.key].type !== viewTable.schema[ev.detail].type
) {
filter.value = ""
}
@ -110,17 +117,21 @@
const getOptionValue = x => x.key
</script>
<div class="actions">
<h5>Filter</h5>
<ModalContent
title="Filter"
confirmText="Save"
onConfirm={saveView}
size="large">
{#if view.filters.length}
<div class="input-group-row">
{#each view.filters as filter, idx}
{#if idx === 0}
<p>Where</p>
<Label>Where</Label>
{:else}
<Select
bind:value={filter.conjunction}
options={CONJUNCTIONS}
placeholder={null}
{getOptionLabel}
{getOptionValue} />
{/if}
@ -152,61 +163,22 @@
placeholder={filter.key || fields[0]}
bind:value={filter.value} />
{/if}
<i class="ri-close-circle-fill" on:click={() => removeFilter(idx)} />
<Icon hoverable name="Close" on:click={() => removeFilter(idx)} />
{/each}
</div>
{:else}
<Body s>Add a filter to get started.</Body>
{/if}
<div class="footer">
<div class="add-filter">
<Button text on:click={addFilter}>Add Filter</Button>
</div>
<div class="buttons">
<Button secondary on:click={onClosed}>Cancel</Button>
<Button cta on:click={saveView}>Save</Button>
</div>
<div slot="footer">
<Button secondary on:click={addFilter}>Add Filter</Button>
</div>
</div>
</ModalContent>
<style>
.actions {
display: grid;
grid-gap: var(--spacing-xl);
padding: var(--spacing-xl);
}
h5 {
margin: 0;
font-weight: 500;
}
.footer {
display: flex;
justify-content: space-between;
align-items: center;
}
.buttons {
display: flex;
justify-content: flex-end;
gap: var(--spacing-m);
}
.ri-close-circle-fill {
cursor: pointer;
}
.input-group-row {
display: grid;
grid-template-columns: minmax(50px, auto) 1fr 1fr 1fr 15px;
grid-template-columns: minmax(70px, auto) 1fr 1fr 1fr 15px;
gap: var(--spacing-s);
align-items: center;
}
p {
margin: 0;
font-size: var(--font-size-xs);
}
.add-filter {
margin-right: 16px;
}
</style>

24
packages/builder/src/components/backend/DataTable/modals/GroupByModal.svelte Normal file
View file

@ -0,0 +1,24 @@
<script>
import { Button, Select, ModalContent, notifications } from "@budibase/bbui"
import { tables, views } from "stores/backend"
import { FIELDS } from "constants/backend"
export let view = {}
export let onClosed
$: viewTable = $tables.list.find(({ _id }) => _id === $views.selected.tableId)
$: fields =
viewTable &&
Object.entries(viewTable.schema)
.filter(entry => entry[1].type !== FIELDS.LINK.type)
.map(([key]) => key)
function saveView() {
views.save(view)
notifications.success(`View ${view.name} saved.`)
}
</script>
<ModalContent title="Group By" confirmText="Save" onConfirm={saveView}>
<Select bind:value={view.groupBy} options={fields} />
</ModalContent>

63
packages/builder/src/components/backend/DataTable/popovers/GroupByPopover.svelte
View file

@ -1,63 +0,0 @@
<script>
import { Button, Select } from "@budibase/bbui"
import { tables, views } from "stores/backend"
import { notifications } from "@budibase/bbui"
import { FIELDS } from "constants/backend"
export let view = {}
export let onClosed
$: viewTable = $tables.list.find(({ _id }) => _id === $views.selected.tableId)
$: fields =
viewTable &&
Object.entries(viewTable.schema)
.filter(entry => entry[1].type !== FIELDS.LINK.type)
.map(([key]) => key)
function saveView() {
views.save(view)
notifications.success(`View ${view.name} saved.`)
onClosed()
}
</script>
<div class="actions">
<h5>Group By</h5>
<Select bind:value={view.groupBy} options={fields} />
<div class="footer">
<Button secondary on:click={onClosed}>Cancel</Button>
<Button cta on:click={saveView}>Save</Button>
</div>
</div>
<style>
.actions {
display: grid;
width: 200px;
grid-gap: var(--spacing-xl);
padding: 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>