MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'linked-records' of github.com:Budibase/budibase into linked-records

This commit is contained in:
mike12345567 2020-10-05 09:45:38 +01:00
parent 4ec17df0d5 f5ed9b9f32
commit 0db876ad53
65 changed files with 1055 additions and 1619 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/builder/package.json
View File

@ -79,7 +79,6 @@
"shortid": "^2.2.15",
"svelte-loading-spinners": "^0.1.1",
"svelte-portal": "^0.1.0",
"svelte-simple-modal": "^0.4.2",
"yup": "^0.29.2"
},
"devDependencies": {

26
packages/builder/src/components/automation/AutomationPanel/AutomationList/AutomationList.svelte
View File

@ -1,32 +1,23 @@
<script>
import Modal from "svelte-simple-modal"
import { notifier } from "builderStore/store/notifications"
import { onMount, getContext } from "svelte"
import { backendUiStore, automationStore } from "builderStore"
import { onMount } from "svelte"
import { automationStore } from "builderStore"
import CreateAutomationModal from "./CreateAutomationModal.svelte"
import { Button } from "@budibase/bbui"
import { Modal } from "components/common/Modal"
const { open, close } = getContext("simple-modal")
let modal
$: selectedAutomationId = $automationStore.selectedAutomation?.automation?._id
function newAutomation() {
open(
CreateAutomationModal,
{
onClosed: close,
},
{ styleContent: { padding: "0" } }
)
}
onMount(() => {
automationStore.actions.fetch()
})
</script>
<section>
<Button primary wide on:click={newAutomation}>Create New Automation</Button>
<Button primary wide on:click={() => modal.show()}>
Create New Automation
</Button>
<ul>
{#each $automationStore.automations as automation}
<li
@ -39,6 +30,9 @@
{/each}
</ul>
</section>
<Modal bind:this={modal}>
<CreateAutomationModal />
</Modal>
<style>
section {

81
packages/builder/src/components/automation/AutomationPanel/AutomationList/CreateAutomationModal.svelte
View File

@ -1,11 +1,9 @@
<script>
import { store, backendUiStore, automationStore } from "builderStore"
import { notifier } from "builderStore/store/notifications"
import ActionButton from "components/common/ActionButton.svelte"
import { Input } from "@budibase/bbui"
import analytics from "analytics"
export let onClosed
import { ModalTitle, ModalFooter } from "components/common/Modal"
let name
@ -13,71 +11,38 @@
$: instanceId = $backendUiStore.selectedDatabase._id
$: appId = $store.appId
function sleep(ms) {
return new Promise(resolve => {
setTimeout(resolve, ms)
})
}
async function createAutomation() {
await automationStore.actions.create({
name,
instanceId,
})
onClosed()
notifier.success(`Automation ${name} created.`)
analytics.captureEvent("Automation Created", { name })
}
</script>
<div class="container">
<header>
<i class="ri-stackshare-line" />
<h3>Create Automation</h3>
</header>
<div class="content">
<Input bind:value={name} label="Name" />
</div>
<footer>
<a href="https://docs.budibase.com">
<i class="ri-information-line" />
<span>Learn about automations</span>
</a>
<ActionButton secondary on:click={onClosed}>Cancel</ActionButton>
<ActionButton disabled={!valid} on:click={createAutomation}>
Save
</ActionButton>
</footer>
</div>
<ModalTitle>Create Automation</ModalTitle>
<Input bind:value={name} label="Name" />
<ModalFooter
confirmText="Create"
onConfirm={createAutomation}
disabled={!valid}>
<a
target="_blank"
href="https://docs.budibase.com/automate/introduction-to-automate">
<i class="ri-information-line" />
<span>Learn about automations</span>
</a>
</ModalFooter>
<style>
.container {
padding: var(--spacing-xl);
}
header {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
header h3 {
font-size: var(--font-size-xl);
color: var(--ink);
font-weight: 600;
margin: 0;
}
header i {
margin-right: var(--spacing-m);
font-size: 28px;
color: var(--grey-6);
}
.content {
padding: var(--spacing-xl) 0;
}
footer {
display: grid;
grid-auto-flow: column;
grid-gap: var(--spacing-m);
grid-auto-columns: 3fr 1fr 1fr;
}
footer a {
a {
color: var(--ink);
font-size: 14px;
vertical-align: middle;
@ -85,10 +50,10 @@
align-items: center;
text-decoration: none;
}
footer a span {
a span {
text-decoration: underline;
}
footer i {
i {
font-size: 20px;
margin-right: var(--spacing-m);
text-decoration: none;

3
packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
View File

@ -13,6 +13,7 @@
$: allowDeleteBlock =
$automationStore.selectedBlock?.type !== "TRIGGER" ||
!automation?.definition?.steps?.length
$: name = automation?.name ?? ""
function deleteAutomationBlock() {
automationStore.actions.deleteAutomationBlock(
@ -101,7 +102,7 @@
<ConfirmDialog
bind:this={confirmDeleteDialog}
title="Confirm Delete"
body={`Are you sure you wish to delete the automation '${automation.name}'?`}
body={`Are you sure you wish to delete the automation '${name}'?`}
okText="Delete Automation"
onOk={deleteAutomation} />

124
packages/builder/src/components/backend/DataTable/LinkedRecord.svelte
View File

@ -1,124 +0,0 @@
<script>
import { onMount } from "svelte"
import { fade } from "svelte/transition"
import { backendUiStore } from "builderStore"
import api from "builderStore/api"
export let ids = []
export let field
let records = []
let open = false
let model
$: FIELDS_TO_HIDE = [$backendUiStore.selectedModel.name]
async function fetchRecords() {
const response = await api.post("/api/records/search", {
keys: ids,
})
const modelResponse = await api.get(`/api/models/${field.modelId}`)
records = await response.json()
model = await modelResponse.json()
}
$: ids && fetchRecords()
function toggleOpen() {
open = !open
}
onMount(() => {
fetchRecords()
})
</script>
<section>
<a on:click={toggleOpen}>{records.length}</a>
{#if open}
<div class="popover" transition:fade>
<header>
<h3>{field.name}</h3>
<i class="ri-close-circle-fill" on:click={toggleOpen} />
</header>
{#each records as record}
<div class="linked-record">
<div class="fields">
{#each Object.keys(model.schema).filter(key => !FIELDS_TO_HIDE.includes(key)) as key}
<div class="field">
<span>{model.schema[key].name}</span>
<p>{record[key]}</p>
</div>
{/each}
</div>
</div>
{/each}
</div>
{/if}
</section>
<style>
section {
display: relative;
}
header {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
i {
font-size: 24px;
color: var(--ink-lighter);
}
i:hover {
cursor: pointer;
}
a {
font-size: 14px;
}
.popover {
width: 500px;
position: absolute;
right: 15%;
padding: 20px;
background: var(--grey-1);
border: 1px solid var(--grey);
}
h3 {
font-size: 20px;
font-weight: bold;
margin: 0;
}
.fields {
padding: 15px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 20px;
background: var(--white);
border: 1px solid var(--grey);
border-radius: 5px;
margin-bottom: 8px;
}
.field span {
color: var(--ink-lighter);
font-size: 12px;
}
.field p {
color: var(--ink);
font-size: 14px;
word-break: break-word;
font-weight: 500;
margin-top: 4px;
}
</style>

18
packages/builder/src/components/backend/DataTable/ModelDataTable.svelte
View File

@ -1,8 +1,9 @@
<script>
import { backendUiStore } from "builderStore"
import RowPopover from "./popovers/Row.svelte"
import ColumnPopover from "./popovers/Column.svelte"
import ViewPopover from "./popovers/View.svelte"
import CreateRowButton from "./buttons/CreateRowButton.svelte"
import CreateColumnButton from "./buttons/CreateColumnButton.svelte"
import CreateViewButton from "./buttons/CreateViewButton.svelte"
import ExportButton from "./buttons/ExportButton.svelte"
import * as api from "./api"
import Table from "./Table.svelte"
@ -10,6 +11,10 @@
$: title = $backendUiStore.selectedModel.name
$: schema = $backendUiStore.selectedModel.schema
$: modelView = {
schema,
name: $backendUiStore.selectedView.name,
}
// Fetch records for specified model
$: {
@ -22,9 +27,10 @@
</script>
<Table {title} {schema} {data} allowEditing={true}>
<ColumnPopover />
<CreateColumnButton />
{#if Object.keys(schema).length > 0}
<RowPopover />
<ViewPopover />
<CreateRowButton />
<CreateViewButton />
<ExportButton view={modelView} />
{/if}
</Table>

2
packages/builder/src/components/backend/DataTable/popovers/RecordFieldControl.svelte → packages/builder/src/components/backend/DataTable/RecordFieldControl.svelte
View File

@ -1,7 +1,7 @@
<script>
import { Input, Select, Label, DatePicker, Toggle } from "@budibase/bbui"
import Dropzone from "components/common/Dropzone.svelte"
import { capitalise } from "../../../../helpers"
import { capitalise } from "../../../helpers"
export let meta
export let value = meta.type === "boolean" ? false : ""

122
packages/builder/src/components/backend/DataTable/Table.svelte
View File

@ -9,13 +9,13 @@
import ActionButton from "components/common/ActionButton.svelte"
import AttachmentList from "./AttachmentList.svelte"
import TablePagination from "./TablePagination.svelte"
import CreateEditRecordModal from "./popovers/CreateEditRecord.svelte"
import RowPopover from "./popovers/Row.svelte"
import ColumnPopover from "./popovers/Column.svelte"
import ViewPopover from "./popovers/View.svelte"
import ColumnHeaderPopover from "./popovers/ColumnHeader.svelte"
import EditRowPopover from "./popovers/EditRow.svelte"
import CalculationPopover from "./popovers/Calculate.svelte"
import CreateEditRecordModal from "./modals/CreateEditRecordModal.svelte"
import RowPopover from "./buttons/CreateRowButton.svelte"
import ColumnPopover from "./buttons/CreateColumnButton.svelte"
import ViewPopover from "./buttons/CreateViewButton.svelte"
import ColumnHeaderPopover from "./popovers/ColumnPopover.svelte"
import EditRowPopover from "./popovers/RowPopover.svelte"
import CalculationPopover from "./buttons/CalculateButton.svelte"
const ITEMS_PER_PAGE = 10
@ -32,9 +32,9 @@
$: paginatedData =
sorted && sorted.length
? sorted.slice(
currentPage * ITEMS_PER_PAGE,
currentPage * ITEMS_PER_PAGE + ITEMS_PER_PAGE,
)
currentPage * ITEMS_PER_PAGE,
currentPage * ITEMS_PER_PAGE + ITEMS_PER_PAGE
)
: []
$: modelId = data?.length ? data[0].modelId : null
@ -42,7 +42,9 @@
if (!record?.[fieldName]?.length) {
return
}
$goto(`/${$params.application}/backend/model/${modelId}/relationship/${record._id}/${fieldName}`)
$goto(
`/${$params.application}/backend/model/${modelId}/relationship/${record._id}/${fieldName}`
)
}
</script>
@ -50,68 +52,68 @@
<div class="table-controls">
<h2 class="title">{title}</h2>
<div class="popovers">
<slot/>
<slot />
</div>
</div>
<table class="bb-table">
<thead>
<tr>
{#if allowEditing}
<th class="edit-header">
<div>Edit</div>
</th>
{/if}
{#each columns as header}
<th>
{#if allowEditing}
<ColumnHeaderPopover field={schema[header]}/>
{:else}
<div class="header">{header}</div>
{/if}
</th>
{/each}
</tr>
</thead>
<tbody>
{#if paginatedData.length === 0}
{#if allowEditing}
<td class="no-border">No data.</td>
{/if}
{#each columns as header, idx}
<td class="no-border">
{#if idx === 0}No data.{/if}
</td>
{/each}
{/if}
{#each paginatedData as row}
<tr>
{#if allowEditing}
<td>
<EditRowPopover {row}/>
</td>
<th class="edit-header">
<div>Edit</div>
</th>
{/if}
{#each columns as header}
<td>
{#if schema[header].type === 'link'}
<div
class:link={row[header] && row[header].length}
on:click={() => selectRelationship(row, header)}>
{row[header] ? row[header].length : 0} linked row(s)
</div>
{:else if schema[header].type === 'attachment'}
<AttachmentList files={row[header] || []}/>
{:else}{getOr('', header, row)}{/if}
</td>
<th>
{#if allowEditing}
<ColumnHeaderPopover field={schema[header]} />
{:else}
<div class="header">{header}</div>
{/if}
</th>
{/each}
</tr>
{/each}
</thead>
<tbody>
{#if paginatedData.length === 0}
{#if allowEditing}
<td class="no-border">No data.</td>
{/if}
{#each columns as header, idx}
<td class="no-border">
{#if idx === 0 && !allowEditing}No data.{/if}
</td>
{/each}
{/if}
{#each paginatedData as row}
<tr>
{#if allowEditing}
<td>
<EditRowPopover {row} />
</td>
{/if}
{#each columns as header}
<td>
{#if schema[header].type === 'link'}
<div
class:link={row[header] && row[header].length}
on:click={() => selectRelationship(row, header)}>
{row[header] ? row[header].length : 0} related row(s)
</div>
{:else if schema[header].type === 'attachment'}
<AttachmentList files={row[header] || []} />
{:else}{getOr('', header, row)}{/if}
</td>
{/each}
</tr>
{/each}
</tbody>
</table>
<TablePagination
{data}
bind:currentPage
pageItemCount={paginatedData.length}
{ITEMS_PER_PAGE}/>
{data}
bind:currentPage
pageItemCount={paginatedData.length}
{ITEMS_PER_PAGE} />
</section>
<style>

14
packages/builder/src/components/backend/DataTable/ViewDataTable.svelte
View File

@ -1,9 +1,10 @@
<script>
import api from "builderStore/api"
import Table from "./Table.svelte"
import CalculationPopover from "./popovers/Calculate.svelte"
import GroupByPopover from "./popovers/GroupBy.svelte"
import FilterPopover from "./popovers/Filter.svelte"
import CalculateButton from "./buttons/CalculateButton.svelte"
import GroupByButton from "./buttons/GroupByButton.svelte"
import FilterButton from "./buttons/FilterButton.svelte"
import ExportButton from "./buttons/ExportButton.svelte"
export let view = {}
@ -34,9 +35,10 @@
</script>
<Table title={decodeURI(name)} schema={view.schema} {data}>
<FilterPopover {view} />
<CalculationPopover {view} />
<FilterButton {view} />
<CalculateButton {view} />
{#if view.calculation}
<GroupByPopover {view} />
<GroupByButton {view} />
{/if}
<ExportButton {view} />
</Table>

19
packages/builder/src/components/backend/DataTable/buttons/CalculateButton.svelte Normal file
View File

@ -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>

14
packages/builder/src/components/backend/DataTable/popovers/Column.svelte → packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte
View File

@ -1,14 +1,6 @@
<script>
import { backendUiStore } from "builderStore"
import {
DropdownMenu,
TextButton as Button,
Icon,
Input,
Select,
} from "@budibase/bbui"
import { FIELDS } from "constants/backend"
import CreateEditColumn from "./CreateEditColumn.svelte"
import { DropdownMenu, TextButton as Button, Icon } from "@budibase/bbui"
import CreateEditColumnPopover from "../popovers/CreateEditColumnPopover.svelte"
let anchor
let dropdown
@ -23,7 +15,7 @@
</div>
<DropdownMenu bind:this={dropdown} {anchor} align="left">
<h5>Create Column</h5>
<CreateEditColumn onClosed={dropdown.hide} />
<CreateEditColumnPopover onClosed={dropdown.hide} />
</DropdownMenu>
<style>

17
packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte Normal file
View File

@ -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>

17
packages/builder/src/components/backend/DataTable/buttons/CreateViewButton.svelte Normal file
View File

@ -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>

20
packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte Normal file
View File

@ -0,0 +1,20 @@
<script>
import { TextButton, Icon, Popover } from "@budibase/bbui"
import api from "builderStore/api"
import ExportPopover from "../popovers/ExportPopover.svelte"
export let view
let anchor
let dropdown
</script>
<div bind:this={anchor}>
<TextButton text small on:click={dropdown.show}>
<Icon name="download" />
Export
</TextButton>
</div>
<Popover bind:this={dropdown} {anchor} align="left">
<ExportPopover {view} onClosed={dropdown.hide} />
</Popover>

23
packages/builder/src/components/backend/DataTable/buttons/FilterButton.svelte Normal file
View File

@ -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>

19
packages/builder/src/components/backend/DataTable/buttons/GroupByButton.svelte Normal file
View File

@ -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
packages/builder/src/components/backend/DataTable/index.js
View File

@ -1 +0,0 @@
export { default } from "./ModelDataTable.svelte"

50
packages/builder/src/components/backend/DataTable/modals/CreateEditRecordModal.svelte Normal file
View File

@ -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} />

104
packages/builder/src/components/backend/DataTable/popovers/Calculate.svelte
View File

@ -1,104 +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"
import analytics from "analytics"
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.`)
analytics.captureEvent("Added View Calculate", { field: view.field })
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>

86
packages/builder/src/components/backend/DataTable/popovers/CalculatePopover.svelte Normal file
View File

@ -0,0 +1,86 @@
<script>
import { Button, Input, Select } from "@budibase/bbui"
import { backendUiStore } from "builderStore"
import { notifier } from "builderStore/store/notifications"
import analytics from "analytics"
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()
analytics.captureEvent("Added View Calculate", { field: view.field })
}
</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>

13
packages/builder/src/components/backend/DataTable/popovers/ColumnHeader.svelte → packages/builder/src/components/backend/DataTable/popovers/ColumnPopover.svelte
View File

@ -2,7 +2,7 @@
import { backendUiStore } from "builderStore"
import { DropdownMenu, Button, Icon, Input, Select } from "@budibase/bbui"
import { FIELDS } from "constants/backend"
import CreateEditColumnModal from "./CreateEditColumn.svelte"
import CreateEditColumnPopover from "./CreateEditColumnPopover.svelte"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import { notifier } from "../../../../builderStore/store/notifications"
@ -26,6 +26,11 @@
editing = false
}
function showDelete() {
dropdown.hide()
confirmDeleteDialog.show()
}
function deleteColumn() {
if (field.name === $backendUiStore.selectedModel.primaryDisplay) {
notifier.danger("You cannot delete the primary display column")
@ -52,7 +57,7 @@
<DropdownMenu bind:this={dropdown} {anchor} align="left">
{#if editing}
<h5>Edit Column</h5>
<CreateEditColumnModal onClosed={hideEditor} {field} />
<CreateEditColumnPopover onClosed={hideEditor} {field} />
{:else}
<ul>
{#if type !== 'link'}
@ -61,9 +66,7 @@
Edit
</li>
{/if}
<li
data-cy="delete-column-header"
on:click={() => confirmDeleteDialog.show()}>
<li data-cy="delete-column-header" on:click={showDelete}>
<Icon name="delete" />
Delete
</li>

0
packages/builder/src/components/backend/DataTable/popovers/CreateEditColumn.svelte → packages/builder/src/components/backend/DataTable/popovers/CreateEditColumnPopover.svelte
View File

81
packages/builder/src/components/backend/DataTable/popovers/CreateEditRecord.svelte
View File

@ -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>

37
packages/builder/src/components/backend/DataTable/popovers/View.svelte → packages/builder/src/components/backend/DataTable/popovers/CreateViewPopover.svelte
View File

@ -1,20 +1,11 @@
<script>
import {
Popover,
TextButton,
Button,
Icon,
Input,
Select,
} from "@budibase/bbui"
import { Button, Input, Select } from "@budibase/bbui"
import { goto } from "@sveltech/routify"
import { backendUiStore } from "builderStore"
import { notifier } from "builderStore/store/notifications"
import CreateEditRecord from "./CreateEditRecord.svelte"
import analytics from "analytics"
let anchor
let dropdown
export let onClosed
let name
let field
@ -37,28 +28,20 @@
field,
})
notifier.success(`View ${name} created`)
dropdown.hide()
onClosed()
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">
<div class="actions">
<h5>Create View</h5>
<Input label="View Name" thin bind:value={name} />
<div class="footer">
<Button secondary on:click={dropdown.hide}>Cancel</Button>
<Button primary on:click={saveView}>Save View</Button>
</div>
<div class="actions">
<h5>Create View</h5>
<Input label="View Name" thin bind:value={name} />
<div class="footer">
<Button secondary on:click={onClosed}>Cancel</Button>
<Button primary on:click={saveView}>Save View</Button>
</div>
</Popover>
</div>
<style>
h5 {

61
packages/builder/src/components/backend/DataTable/popovers/ExportPopover.svelte Normal file
View File

@ -0,0 +1,61 @@
<script>
import api from "builderStore/api"
import { Button, Select } from "@budibase/bbui"
const FORMATS = [
{
name: "CSV",
key: "csv",
},
{
name: "JSON",
key: "json",
},
]
export let view
export let onClosed
let exportFormat = FORMATS[0].key
async function exportView() {
const response = await api.post(
`/api/views/export?format=${exportFormat}`,
view
)
const downloadInfo = await response.json()
onClosed()
window.location = downloadInfo.url
}
</script>
<div class="popover">
<h5>Export Data</h5>
<Select label="Format" secondary thin bind:value={exportFormat}>
{#each FORMATS as format}
<option value={format.key}>{format.name}</option>
{/each}
</Select>
<div class="footer">
<Button secondary on:click={onClosed}>Cancel</Button>
<Button primary on:click={exportView}>Export</Button>
</div>
</div>
<style>
.popover {
display: grid;
grid-gap: var(--spacing-xl);
}
h5 {
margin: 0;
font-weight: 500;
}
.footer {
display: flex;
justify-content: flex-end;
gap: var(--spacing-m);
}
</style>

110
packages/builder/src/components/backend/DataTable/popovers/Filter.svelte → packages/builder/src/components/backend/DataTable/popovers/FilterPopover.svelte
View File

@ -1,15 +1,7 @@
<script>
import {
Popover,
TextButton,
Button,
Icon,
Input,
Select,
} from "@budibase/bbui"
import { Button, Input, Select } from "@budibase/bbui"
import { backendUiStore } from "builderStore"
import { notifier } from "builderStore/store/notifications"
import CreateEditRecord from "./CreateEditRecord.svelte"
import analytics from "analytics"
const CONDITIONS = [
@ -51,9 +43,7 @@
]
export let view = {}
let anchor
let dropdown
export let onClosed
$: viewModel = $backendUiStore.models.find(
({ _id }) => _id === $backendUiStore.selectedView.modelId
@ -63,7 +53,7 @@
function saveView() {
backendUiStore.actions.views.save(view)
notifier.success(`View ${view.name} saved.`)
dropdown.hide()
onClosed()
analytics.captureEvent("Added View Filter", {
filters: JSON.stringify(view.filters),
})
@ -88,67 +78,55 @@
}
</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">
<div class="actions">
<h5>Filter</h5>
{#if view.filters.length}
<div class="input-group-row">
{#each view.filters as filter, idx}
{#if idx === 0}
<p>Where</p>
{:else}
<Select secondary thin bind:value={filter.conjunction}>
<option value="">Choose an option</option>
{#each CONJUNCTIONS as conjunction}
<option value={conjunction.key}>{conjunction.name}</option>
{/each}
</Select>
{/if}
<Select secondary thin bind:value={filter.key}>
<div class="actions">
<h5>Filter</h5>
{#if view.filters.length}
<div class="input-group-row">
{#each view.filters as filter, idx}
{#if idx === 0}
<p>Where</p>
{:else}
<Select secondary thin bind:value={filter.conjunction}>
<option value="">Choose an option</option>
{#each fields as field}
<option value={field}>{field}</option>
{#each CONJUNCTIONS as conjunction}
<option value={conjunction.key}>{conjunction.name}</option>
{/each}
</Select>
<Select secondary thin bind:value={filter.condition}>
{/if}
<Select secondary thin bind:value={filter.key}>
<option value="">Choose an option</option>
{#each fields as field}
<option value={field}>{field}</option>
{/each}
</Select>
<Select secondary thin bind:value={filter.condition}>
<option value="">Choose an option</option>
{#each CONDITIONS as condition}
<option value={condition.key}>{condition.name}</option>
{/each}
</Select>
{#if filter.key && isMultipleChoice(filter.key)}
<Select secondary thin bind:value={filter.value}>
<option value="">Choose an option</option>
{#each CONDITIONS as condition}
<option value={condition.key}>{condition.name}</option>
{#each viewModel.schema[filter.key].constraints.inclusion as option}
<option value={option}>{option}</option>
{/each}
</Select>
{#if filter.key && isMultipleChoice(filter.key)}
<Select secondary thin bind:value={filter.value}>
<option value="">Choose an option</option>
{#each viewModel.schema[filter.key].constraints.inclusion as option}
<option value={option}>{option}</option>
{/each}
</Select>
{:else}
<Input thin placeholder="Value" bind:value={filter.value} />
{/if}
<i class="ri-close-circle-fill" on:click={() => removeFilter(idx)} />
{/each}
</div>
{/if}
<div class="footer">
<Button text on:click={addFilter}>Add Filter</Button>
<div class="buttons">
<Button secondary on:click={dropdown.hide}>Cancel</Button>
<Button primary on:click={saveView}>Save</Button>
</div>
{:else}
<Input thin placeholder="Value" bind:value={filter.value} />
{/if}
<i class="ri-close-circle-fill" on:click={() => removeFilter(idx)} />
{/each}
</div>
{/if}
<div class="footer">
<Button text on:click={addFilter}>Add Filter</Button>
<div class="buttons">
<Button secondary on:click={onClosed}>Cancel</Button>
<Button primary on:click={saveView}>Save</Button>
</div>
</div>
</Popover>
</div>
<style>
.actions {

91
packages/builder/src/components/backend/DataTable/popovers/GroupBy.svelte
View File

@ -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>

66
packages/builder/src/components/backend/DataTable/popovers/GroupByPopover.svelte Normal file
View File

@ -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>

27
packages/builder/src/components/backend/DataTable/popovers/Row.svelte
View File

@ -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>

54
packages/builder/src/components/backend/DataTable/popovers/EditRow.svelte → packages/builder/src/components/backend/DataTable/popovers/RowPopover.svelte
View File

@ -1,41 +1,33 @@
<script>
import { getContext } from "svelte"
import { backendUiStore } from "builderStore"
import {
DropdownMenu,
Button,
Icon,
Input,
Select,
Heading,
} from "@budibase/bbui"
import { FIELDS } from "constants/backend"
import CreateEditRecordModal from "./CreateEditRecord.svelte"
import { DropdownMenu, Icon } from "@budibase/bbui"
import CreateEditRecordModal from "../modals/CreateEditRecordModal.svelte"
import * as api from "../api"
import { notifier } from "builderStore/store/notifications"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import { Modal } from "components/common/Modal"
export let row
let anchor
let dropdown
let editing
let confirmDeleteDialog
let modal
function showEditor() {
editing = true
function showModal() {
dropdown.hide()
modal.show()
}
function hideEditor() {
function showDelete() {
dropdown.hide()
editing = false
confirmDeleteDialog.show()
}
async function deleteRow() {
await api.deleteRecord(row)
notifier.success("Record deleted")
backendUiStore.actions.records.delete(row)
hideEditor()
}
</script>
@ -43,21 +35,16 @@
<i class="ri-more-line" />
</div>
<DropdownMenu bind:this={dropdown} {anchor} align="left">
{#if editing}
<h5>Edit Row</h5>
<CreateEditRecordModal onClosed={hideEditor} record={row} />
{:else}
<ul>
<li data-cy="edit-row" on:click={showEditor}>
<Icon name="edit" />
<span>Edit</span>
</li>
<li data-cy="delete-row" on:click={() => confirmDeleteDialog.show()}>
<Icon name="delete" />
<span>Delete</span>
</li>
</ul>
{/if}
<ul>
<li data-cy="edit-row" on:click={showModal}>
<Icon name="edit" />
<span>Edit</span>
</li>
<li data-cy="delete-row" on:click={showDelete}>
<Icon name="delete" />
<span>Delete</span>
</li>
</ul>
</DropdownMenu>
<ConfirmDialog
bind:this={confirmDeleteDialog}
@ -65,6 +52,9 @@
okText="Delete Row"
onOk={deleteRow}
title="Confirm Delete" />
<Modal bind:this={modal}>
<CreateEditRecordModal record={row} />
</Modal>
<style>
.ri-more-line:hover {

9
packages/builder/src/components/backend/ModelNavigator/EditTable.svelte
View File

@ -1,5 +1,4 @@
<script>
import { getContext } from "svelte"
import { backendUiStore } from "builderStore"
import { notifier } from "builderStore/store/notifications"
import { DropdownMenu, Button, Icon, Input, Select } from "@budibase/bbui"
@ -24,6 +23,11 @@
editing = false
}
function showModal() {
hideEditor()
confirmDeleteDialog.show()
}
async function deleteTable() {
await backendUiStore.actions.models.delete(table)
notifier.success("Table deleted")
@ -66,7 +70,7 @@
<Icon name="edit" />
Edit
</li>
<li data-cy="delete-table" on:click={() => confirmDeleteDialog.show()}>
<li data-cy="delete-table" on:click={showModal}>
<Icon name="delete" />
Delete
</li>
@ -78,7 +82,6 @@
body={`Are you sure you wish to delete the table '${table.name}'? Your data will be deleted and this action cannot be undone.`}
okText="Delete Table"
onOk={deleteTable}
onCancel={hideEditor}
title="Confirm Delete" />
<style>

8
packages/builder/src/components/backend/ModelNavigator/EditView.svelte
View File

@ -1,6 +1,5 @@
<script>
import { goto } from "@sveltech/routify"
import { getContext } from "svelte"
import { backendUiStore } from "builderStore"
import { notifier } from "builderStore/store/notifications"
import { DropdownMenu, Button, Icon, Input, Select } from "@budibase/bbui"
@ -24,6 +23,11 @@
editing = false
}
function showDelete() {
dropdown.hide()
confirmDeleteDialog.show()
}
async function save() {
await backendUiStore.actions.views.save({
originalName,
@ -61,7 +65,7 @@
<Icon name="edit" />
Edit
</li>
<li data-cy="delete-view" on:click={() => confirmDeleteDialog.show()}>
<li data-cy="delete-view" on:click={showDelete}>
<Icon name="delete" />
Delete
</li>

8
packages/builder/src/components/backend/ModelNavigator/ModelNavigator.svelte
View File

@ -1,19 +1,13 @@
<script>
import { getContext } from "svelte"
import { slide } from "svelte/transition"
import { Switcher } from "@budibase/bbui"
import { goto } from "@sveltech/routify"
import { store, backendUiStore } from "builderStore"
import { backendUiStore } from "builderStore"
import ListItem from "./ListItem.svelte"
import { Button } from "@budibase/bbui"
import CreateTablePopover from "./CreateTable.svelte"
import EditTablePopover from "./EditTable.svelte"
import EditViewPopover from "./EditView.svelte"
import { Heading } from "@budibase/bbui"
import { Spacer } from "@budibase/bbui"
const { open, close } = getContext("simple-modal")
$: selectedView =
$backendUiStore.selectedView && $backendUiStore.selectedView.name

55
packages/builder/src/components/common/ConfirmDialog.svelte
View File

@ -1,64 +1,31 @@
<script>
import { Modal, Button, Heading, Spacer } from "@budibase/bbui"
import { Modal, ModalTitle, ModalFooter } from "components/common/Modal"
export let title = ""
export let body = ""
export let okText = "OK"
export let okText = "Confirm"
export let cancelText = "Cancel"
export let onOk = () => {}
export let onCancel = () => {}
let modal
export const show = () => {
theModal.show()
modal.show()
}
export const hide = () => {
theModal.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()
modal.hide()
}
</script>
<Modal id={title} bind:this={theModal}>
<h2>{title}</h2>
<Spacer extraLarge />
<div class="content">
<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 id={title} bind:this={modal} on:hide={onCancel}>
<ModalTitle>{title}</ModalTitle>
<div class="body">{body}</div>
<ModalFooter confirmText={okText} {cancelText} onConfirm={onOk} red />
</Modal>
<style>
h2 {
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;
.body {
font-size: var(--font-size-s);
}
</style>

20
packages/builder/src/components/common/ErrorsBox.svelte
View File

@ -5,9 +5,25 @@
</script>
{#if hasErrors}
<div class="bb__alert bb__alert--danger">
<div class="container bb__alert bb__alert--danger">
{#each errors as error}
<div>{error.dataPath} {error.message}</div>
<div class="error">{error.dataPath} {error.message}</div>
{/each}
</div>
{/if}
<style>
.container {
border-radius: var(--border-radius-m);
margin: 0;
padding: var(--spacing-m);
}
.error {
font-size: var(--font-size-xs);
font-weight: 500;
}
.error:first-letter {
text-transform: uppercase;
}
</style>

1
packages/builder/src/components/common/LinkedRecordSelector.svelte
View File

@ -20,7 +20,6 @@
const FETCH_RECORDS_URL = `/api/${linkedModelId}/records`
const response = await api.get(FETCH_RECORDS_URL)
const result = await response.json()
console.log(result)
return result
}

56
packages/builder/src/components/common/Modal/Modal.svelte
View File

@ -1,17 +1,26 @@
<script>
import { createEventDispatcher } from "svelte"
/**
* Confirmation is handled as a callback rather than an event to allow
* handling the result - meaning a parent can prevent the modal closing.
*
* A show/hide API is exposed as part of the modal and also via context for
* children inside the modal.
* "show" and "hide" events are emitted as visibility changes.
*
* Modals are rendered at the top of the DOM tree.
*/
import { createEventDispatcher, setContext } from "svelte"
import { fade, fly } from "svelte/transition"
import { portal } from "./portal"
import Portal from "svelte-portal"
import { ContextKey } from "./context"
const dispatch = createEventDispatcher()
export let visible = false
export let cancelText = "Cancel"
export let confirmText = "Confirm"
export let showCancelButton = true
export let showConfirmButton = true
export let wide = false
export let padded = true
let visible
export function show() {
console.log("show")
if (visible) {
return
}
@ -26,10 +35,12 @@
visible = false
dispatch("hide")
}
setContext(ContextKey, { show, hide })
</script>
{#if visible}
<div class="portal-wrapper" use:portal={'#modal-container'}>
<Portal target="#modal-container">
<div
class="overlay"
on:click|self={hide}
@ -37,15 +48,16 @@
<div
class="scroll-wrapper"
on:click|self={hide}
transition:fly={{ y: 100 }}>
transition:fly={{ y: 50 }}>
<div class="content-wrapper" on:click|self={hide}>
<div class="content">
<div class="content" class:wide class:padded>
<slot />
<i class="ri-close-line" on:click={hide} />
</div>
</div>
</div>
</div>
</div>
</Portal>
{/if}
<style>
@ -66,7 +78,6 @@
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.25);
z-index: 999;
}
.scroll-wrapper {
@ -98,5 +109,24 @@
flex: 0 0 400px;
margin: 2rem 0;
border-radius: var(--border-radius-m);
gap: var(--spacing-xl);
}
.content.wide {
flex: 0 0 600px;
}
.content.padded {
padding: var(--spacing-xl);
}
i {
position: absolute;
top: var(--spacing-xl);
right: var(--spacing-xl);
color: var(--ink);
font-size: var(--font-size-xl);
}
i:hover {
color: var(--grey-6);
cursor: pointer;
}
</style>

1
packages/builder/src/components/common/Modal/ModalContainer.svelte
View File

@ -5,5 +5,6 @@
position: fixed;
top: 0;
left: 0;
z-index: 999;
}
</style>

63
packages/builder/src/components/common/Modal/ModalFooter.svelte Normal file
View File

@ -0,0 +1,63 @@
<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)
let loading = false
function hide() {
modalContext.hide()
}
async function confirm() {
loading = true
if (!onConfirm || (await onConfirm()) !== false) {
hide()
}
loading = false
}
</script>
<footer>
<div class="content">
<slot />
</div>
<div class="buttons">
{#if showCancelButton}
<Button secondary on:click={hide}>{cancelText}</Button>
{/if}
{#if showConfirmButton}
<Button
primary
{...$$restProps}
disabled={$$props.disabled || loading}
on:click={confirm}>
{confirmText}
</Button>
{/if}
</div>
</footer>
<style>
footer {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: var(--spacing-m);
}
.buttons {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
gap: var(--spacing-m);
}
</style>

10
packages/builder/src/components/common/Modal/ModalTitle.svelte Normal file
View File

@ -0,0 +1,10 @@
<h5>
<slot />
</h5>
<style>
h5 {
margin: 0;
font-weight: 500;
}
</style>

1
packages/builder/src/components/common/Modal/context.js Normal file
View File

@ -0,0 +1 @@
export const ContextKey = "budibase-modal"

3
packages/builder/src/components/common/Modal/index.js
View File

@ -1,2 +1,5 @@
export { default as Modal } from "./Modal.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"

14
packages/builder/src/components/common/Modal/portal.js
View File

@ -1,14 +0,0 @@
export function portal(node, targetNodeOrSelector) {
const targetNode =
typeof targetNodeOrSelector == "string"
? document.querySelector(targetNodeOrSelector)
: targetNodeOrSelector
const portalChildren = [...node.children]
targetNode.append(...portalChildren)
return {
destroy() {
for (const portalChild of portalChildren) portalChild.remove()
},
}
}

232
packages/builder/src/components/common/MultiSelect.svelte
View File

@ -6,83 +6,68 @@
"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
export let value = []
export let readonly = false
export let label
let placeholder = "Type to search"
let input
let inputValue
let options = []
let activeOption
let optionsVisible = false
let selected = {}
let first = true
let slot
onMount(() => {
slot.querySelectorAll("option").forEach(o => {
o.selected && !value.includes(o.value) && (value = [...value, o.value])
options = [...options, { value: o.value, name: o.textContent }]
})
value &&
(selected = options.reduce(
(obj, op) =>
value.includes(op.value) ? { ...obj, [op.value]: op } : obj,
{}
))
const domOptions = Array.from(slot.querySelectorAll("option"))
options = domOptions.map(option => ({
value: option.value,
name: option.textContent,
}))
if (value) {
options.forEach(option => {
if (value.includes(option.value)) {
selected[option.value] = option
}
})
}
first = false
})
$: if (!first) value = Object.values(selected).map(o => o.value)
$: filtered = options.filter(o =>
inputValue ? o.name.toLowerCase().includes(inputValue.toLowerCase()) : o
)
$: if (
(activeOption && !filtered.includes(activeOption)) ||
(!activeOption && inputValue)
)
activeOption = filtered[0]
// Keep value up to date with selected options
$: {
if (!first) {
value = Object.values(selected).map(option => option.value)
}
}
function add(token) {
if (!readonly) selected[token.value] = token
selected[token.value] = token
}
function remove(value) {
if (!readonly) {
const { [value]: val, ...rest } = selected
selected = rest
}
const { [value]: val, ...rest } = selected
selected = rest
}
function removeAll() {
selected = []
inputValue = ""
}
function showOptions(show) {
optionsVisible = show
if (!show) {
activeOption = undefined
} else {
input.focus()
}
}
function handleBlur() {
showOptions(false)
}
function handleFocus() {
showOptions(true)
function handleClick() {
showOptions(!optionsVisible)
}
function handleOptionMousedown(e) {
const value = e.target.dataset.value
if (value == null) {
return
}
if (selected[value]) {
remove(value)
} else {
add(options.filter(option => option.value === value)[0])
input.focus()
}
}
</script>
@ -91,76 +76,52 @@
{#if label}
<Label extraSmall grey>{label}</Label>
{/if}
<div class="multiselect" class:readonly>
<div class="multiselect">
<div class="tokens-wrapper">
<div class="tokens" class:showOptions>
<div
class="tokens"
class:optionsVisible
on:click|self={handleClick}
class:empty={!value || !value.length}>
{#each Object.values(selected) as option}
<div class="token" data-id={option.value}>
<div class="token" data-id={option.value} on:click|self={handleClick}>
<span>{option.name}</span>
{#if !readonly}
<div
class="token-remove"
title="Remove {option.name}"
on:click={() => remove(option.value)}>
<svg
class="icon-clear"
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 24 24">
<path d={xPath} />
</svg>
</div>
{/if}
<div
class="token-remove"
title="Remove {option.name}"
on:click={() => remove(option.value)}>
<svg
class="icon-clear"
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 24 24">
<path d={xPath} />
</svg>
</div>
</div>
{/each}
{#if !value || !value.length}&nbsp;{/if}
</div>
</div>
<div class="actions">
{#if !readonly}
<input
autocomplete="off"
bind:value={inputValue}
bind:this={input}
on:blur={handleBlur}
on:focus={handleFocus}
{placeholder} />
<div
class="remove-all"
title="Remove All"
class:hidden={!Object.keys(selected).length}
on:click={removeAll}>
<svg
class="icon-clear"
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 24 24">
<path d={xPath} />
</svg>
</div>
{/if}
</div>
<select bind:this={slot} type="multiple" class="hidden">
<slot />
</select>
{#if optionsVisible}
<div class="options-overlay" on:click|self={() => showOptions(false)} />
<ul
class="options"
transition:fly={{ duration: 200, y: 5 }}
on:mousedown|preventDefault={handleOptionMousedown}>
{#each filtered as option}
<li
class:selected={selected[option.value]}
class:active={activeOption === option}
data-value={option.value}>
{#each options as option}
<li class:selected={selected[option.value]} data-value={option.value}>
{option.name}
</li>
{/each}
{#if !filtered.length && inputValue.length}
<li>No results</li>
{#if !options.length}
<li class="no-results">No results</li>
{/if}
</ul>
{/if}
@ -175,7 +136,7 @@
justify-content: flex-start;
align-items: stretch;
}
.multiselect:not(.readonly):hover {
.multiselect:hover {
border-bottom-color: hsl(0, 0%, 50%);
}
@ -185,6 +146,7 @@
justify-content: flex-start;
align-items: center;
flex: 0 1 auto;
z-index: 2;
}
.tokens {
@ -194,6 +156,14 @@
position: relative;
width: 0;
flex: 1 1 auto;
background-color: var(--grey-2);
border-radius: var(--border-radius-m);
padding: 0 var(--spacing-m) calc(var(--spacing-m) - var(--spacing-xs))
calc(var(--spacing-m) / 2);
border: var(--border-transparent);
}
.tokens:hover {
cursor: pointer;
}
.tokens::after {
background: none repeat scroll 0 0 transparent;
@ -206,74 +176,72 @@
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0;
}
.tokens.showOptions::after {
.tokens.optionsVisible {
border: var(--border-blue);
}
.tokens.empty {
padding: var(--spacing-m);
font-size: var(--font-size-xs);
user-select: none;
}
.tokens::after {
width: 100%;
left: 0;
}
.token {
font-size: var(--font-size-xs);
align-items: center;
background-color: var(--grey-3);
background-color: white;
border-radius: var(--border-radius-l);
display: flex;
margin: 0.25rem 0.5rem 0.25rem 0;
margin: calc(var(--spacing-m) - var(--spacing-xs)) 0 0
calc(var(--spacing-m) / 2);
max-height: 1.3rem;
padding: var(--spacing-s) var(--spacing-m);
padding: var(--spacing-xs) var(--spacing-s);
transition: background-color 0.3s;
white-space: nowrap;
}
.token:hover {
background-color: var(--grey-4);
.token span {
pointer-events: none;
user-select: none;
}
.readonly .token {
color: hsl(0, 0%, 40%);
}
.token-remove,
.remove-all {
.token-remove {
align-items: center;
background-color: var(--grey-5);
background-color: var(--grey-4);
border-radius: 50%;
color: var(--white);
display: flex;
justify-content: center;
height: 1.25rem;
margin-left: 0.25rem;
min-width: 1.25rem;
height: 1rem;
width: 1rem;
margin: calc(-1 * var(--spacing-xs)) 0 calc(-1 * var(--spacing-xs))
var(--spacing-xs);
}
.token-remove:hover,
.remove-all:hover {
background-color: var(--grey-6);
.token-remove:hover {
background-color: var(--grey-5);
cursor: pointer;
}
.actions {
align-items: center;
display: flex;
flex: 1;
}
.actions > * {
flex: 0 0 auto;
}
.actions > input {
border: none;
font-size: var(--font-size-xs);
line-height: 1.5rem;
outline: none;
background-color: transparent;
flex: 1 1 auto;
}
.icon-clear path {
fill: white;
}
.options-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1;
}
.options {
z-index: 2;
left: 0;
list-style: none;
margin-block-end: 0;
margin-block-start: 0;
max-height: 70vh;
overflow: auto;
overflow-y: auto;
padding-inline-start: 0;
position: absolute;
top: calc(100% + 1px);
@ -283,8 +251,8 @@
box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
margin-top: var(--spacing-xs);
padding: var(--spacing-s) 0;
z-index: 1;
background-color: white;
max-height: 200px;
}
li {
background-color: white;
@ -299,6 +267,10 @@
li:not(.selected):hover {
background-color: var(--grey-1);
}
li.no-results:hover {
background-color: white;
cursor: initial;
}
.hidden {
display: none;

27
packages/builder/src/components/common/Notification/NotificationDisplay.svelte
View File

@ -1,7 +1,7 @@
<script>
import { notificationStore } from "builderStore/store/notifications"
import { onMount, onDestroy } from "svelte"
import { fade } from "svelte/transition"
import { fly } from "svelte/transition"
export let themes = {
danger: "#E26D69",
@ -24,36 +24,41 @@
}
</script>
<ul class="notifications">
<div class="notifications">
{#each $notificationStore.notifications as notification (notification.id)}
<li
<div
class="toast"
style="background: {themes[notification.type]};"
transition:fade>
transition:fly={{ y: -30 }}>
<div class="content">{notification.message}</div>
{#if notification.icon}
<i class={notification.icon} />
{/if}
</li>
</div>
{/each}
</ul>
</div>
<style>
.notifications {
width: 40vw;
list-style: none;
position: fixed;
top: 0;
top: 10px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
margin: 0 auto;
padding: 0;
z-index: 9999;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.toast {
flex: 0 0 auto;
margin-bottom: 10px;
border-radius: var(--border-radius-s);
/* The toasts now support being auto sized, so this static width could be removed */
width: 40vw;
}
.content {

196
packages/builder/src/components/database/DataTable/ModelDataTable.svelte
View File

@ -1,196 +0,0 @@
<script>
import { onMount } from "svelte"
import fsort from "fast-sort"
import getOr from "lodash/fp/getOr"
import { store, backendUiStore } from "builderStore"
import { Button, Icon } from "@budibase/bbui"
import ActionButton from "components/common/ActionButton.svelte"
import LinkedRecord from "./LinkedRecord.svelte"
import AttachmentList from "./AttachmentList.svelte"
import TablePagination from "./TablePagination.svelte"
import { DeleteRecordModal, CreateEditRecordModal } from "./modals"
import RowPopover from "./popovers/Row.svelte"
import ColumnPopover from "./popovers/Column.svelte"
import ViewPopover from "./popovers/View.svelte"
import ExportPopover from "./popovers/Export.svelte"
import ColumnHeaderPopover from "./popovers/ColumnHeader.svelte"
import EditRowPopover from "./popovers/EditRow.svelte"
import * as api from "./api"
const ITEMS_PER_PAGE = 10
// Internal headers we want to hide from the user
const INTERNAL_HEADERS = ["_id", "_rev", "modelId", "type"]
let modalOpen = false
let data = []
let headers = []
let currentPage = 0
let search
$: {
if (
$backendUiStore.selectedView &&
$backendUiStore.selectedView.name.startsWith("all_")
) {
api.fetchDataForView($backendUiStore.selectedView).then(records => {
data = records || []
})
}
}
$: sort = $backendUiStore.sort
$: sorted = sort ? fsort(data)[sort.direction](sort.column) : data
$: paginatedData = sorted
? sorted.slice(
currentPage * ITEMS_PER_PAGE,
currentPage * ITEMS_PER_PAGE + ITEMS_PER_PAGE
)
: []
$: headers = Object.keys($backendUiStore.selectedModel.schema)
.sort()
.filter(id => !INTERNAL_HEADERS.includes(id))
$: schema = $backendUiStore.selectedModel.schema
$: modelView = {
schema: $backendUiStore.selectedModel.schema,
name: $backendUiStore.selectedView.name,
}
</script>
<section>
<div class="table-controls">
<h2 class="title">{$backendUiStore.selectedModel.name}</h2>
<div class="popovers">
<ColumnPopover />
{#if Object.keys($backendUiStore.selectedModel.schema).length > 0}
<RowPopover />
<ViewPopover />
<ExportPopover view={modelView} />
{/if}
</div>
</div>
<table class="bb-table">
<thead>
<tr>
<th class="edit-header">
<div>Edit</div>
</th>
{#each headers as header}
<th>
<ColumnHeaderPopover
field={$backendUiStore.selectedModel.schema[header]} />
</th>
{/each}
</tr>
</thead>
<tbody>
{#if paginatedData.length === 0}
<div class="no-data">No Data.</div>
{/if}
{#each paginatedData as row}
<tr>
<td>
<EditRowPopover {row} />
</td>
{#each headers as header}
<td>
{#if schema[header].type === 'link'}
<LinkedRecord field={schema[header]} ids={row[header]} />
{:else if schema[header].type === 'attachment'}
<AttachmentList files={row[header] || []} />
{:else}{getOr('', header, row)}{/if}
</td>
{/each}
</tr>
{/each}
</tbody>
</table>
<TablePagination
{data}
bind:currentPage
pageItemCount={paginatedData.length}
{ITEMS_PER_PAGE} />
</section>
<style>
section {
margin-bottom: 20px;
}
.title {
font-size: 24px;
font-weight: 600;
text-rendering: optimizeLegibility;
text-transform: capitalize;
}
table {
border: 1px solid var(--grey-4);
background: #fff;
border-radius: 3px;
border-collapse: collapse;
}
thead {
height: 40px;
background: var(--grey-3);
border: 1px solid var(--grey-4);
}
thead th {
color: var(--ink);
text-transform: capitalize;
font-weight: 500;
font-size: 14px;
text-rendering: optimizeLegibility;
transition: 0.5s all;
vertical-align: middle;
}
.edit-header {
width: 100px;
cursor: default;
}
.edit-header:hover {
color: var(--ink);
}
th:hover {
color: var(--blue);
cursor: pointer;
}
td {
max-width: 200px;
text-overflow: ellipsis;
border: 1px solid var(--grey-4);
overflow: hidden;
white-space: pre;
box-sizing: border-box;
}
tbody tr {
border-bottom: 1px solid var(--grey-4);
transition: 0.3s background-color;
color: var(--ink);
font-size: 12px;
}
tbody tr:hover {
background: var(--grey-1);
}
.table-controls {
width: 100%;
}
.popovers {
display: flex;
}
.no-data {
padding: 14px;
}
</style>

56
packages/builder/src/components/database/DataTable/ViewDataTable.svelte
View File

@ -1,56 +0,0 @@
<script>
import { onMount } from "svelte"
import fsort from "fast-sort"
import getOr from "lodash/fp/getOr"
import { store, backendUiStore } from "builderStore"
import api from "builderStore/api"
import { Button, Icon } from "@budibase/bbui"
import Table from "./Table.svelte"
import ActionButton from "components/common/ActionButton.svelte"
import LinkedRecord from "./LinkedRecord.svelte"
import TablePagination from "./TablePagination.svelte"
import { DeleteRecordModal, CreateEditRecordModal } from "./modals"
import RowPopover from "./popovers/Row.svelte"
import ColumnPopover from "./popovers/Column.svelte"
import ViewPopover from "./popovers/View.svelte"
import ColumnHeaderPopover from "./popovers/ColumnHeader.svelte"
import EditRowPopover from "./popovers/EditRow.svelte"
import CalculationPopover from "./popovers/Calculate.svelte"
import GroupByPopover from "./popovers/GroupBy.svelte"
import FilterPopover from "./popovers/Filter.svelte"
import ExportPopover from "./popovers/Export.svelte"
export let view = {}
let data = []
$: name = view.name
$: filters = view.filters
$: field = view.field
$: groupBy = view.groupBy
$: !name.startsWith("all_") && filters && fetchViewData(name, field, groupBy)
async function fetchViewData(name, field, groupBy) {
const params = new URLSearchParams()
if (field) {
params.set("field", field)
params.set("stats", true)
}
if (groupBy) params.set("group", groupBy)
let QUERY_VIEW_URL = `/api/views/${name}?${params}`
const response = await api.get(QUERY_VIEW_URL)
data = await response.json()
}
</script>
<Table title={decodeURI(name)} schema={view.schema} {data}>
<FilterPopover {view} />
<CalculationPopover {view} />
{#if view.calculation}
<GroupByPopover {view} />
{/if}
<ExportPopover {view} />
</Table>

71
packages/builder/src/components/database/DataTable/popovers/Export.svelte
View File

@ -1,71 +0,0 @@
<script>
import {
TextButton,
Button,
Icon,
Input,
Select,
Popover,
} from "@budibase/bbui"
import { backendUiStore } from "builderStore"
import { notifier } from "builderStore/store/notifications"
import api from "builderStore/api"
const FORMATS = [
{
name: "CSV",
key: "csv",
},
{
name: "JSON",
key: "json",
},
]
export let view
let anchor
let dropdown
let exportFormat
async function exportView() {
const response = await api.post(
`/api/views/export?format=${exportFormat}`,
view
)
const downloadInfo = await response.json()
window.location = downloadInfo.url
}
</script>
<div bind:this={anchor}>
<TextButton text small on:click={dropdown.show}>
<Icon name="download" />
Export
</TextButton>
</div>
<Popover bind:this={dropdown} {anchor} align="left">
<h5>Export Format</h5>
<Select secondary thin bind:value={exportFormat}>
<option value={''}>Select an option</option>
{#each FORMATS as format}
<option value={format.key}>{format.name}</option>
{/each}
</Select>
<div class="button-group">
<Button secondary on:click={dropdown.hide}>Cancel</Button>
<Button primary on:click={exportView}>Export</Button>
</div>
</Popover>
<style>
h5 {
margin-top: 0;
}
.button-group {
margin-top: var(--spacing-l);
display: flex;
justify-content: flex-end;
}
</style>

28
packages/builder/src/components/settings/Link.svelte
View File

@ -1,31 +1,17 @@
<script>
import Modal from "./Modal.svelte"
import SettingsModal from "./SettingsModal.svelte"
import { SettingsIcon } from "components/common/Icons/"
import { getContext } from "svelte"
import { isActive, goto, layout } from "@sveltech/routify"
import { Modal } from "components/common/Modal"
// Handle create app modal
const { open, close } = getContext("simple-modal")
const showSettingsModal = () => {
open(
Modal,
{
name: "Placeholder App Name",
description: "This is a hardcoded description that needs to change",
},
{
closeOnEsc: true,
styleContent: { padding: 0 },
closeOnOuterClick: true,
}
)
}
let modal
</script>
<span class="topnavitemright settings" on:click={showSettingsModal}>
<span class="topnavitemright settings" on:click={modal.show}>
<SettingsIcon />
</span>
<Modal bind:this={modal} wide>
<SettingsModal />
</Modal>
<style>
span:first-letter {

37
packages/builder/src/components/settings/Modal.svelte → packages/builder/src/components/settings/SettingsModal.svelte
View File

@ -1,13 +1,8 @@
<script>
import { General, Users, DangerZone, APIKeys } from "./tabs"
import { Switcher } from "@budibase/bbui"
import { ModalTitle } from "components/common/Modal"
import { Input, TextArea, Button, Switcher } from "@budibase/bbui"
import { SettingsIcon, CloseIcon } from "components/common/Icons/"
import { getContext } from "svelte"
import { post } from "builderStore/api"
export let name = ""
export let description = ""
const tabs = [
{
title: "General",
@ -30,15 +25,16 @@
component: DangerZone,
},
]
let value = "GENERAL"
$: selectedTab = tabs.find(tab => tab.key === value).component
function hide() {}
</script>
<div class="container">
<div class="heading">
<i class="ri-settings-2-fill" />
<h3>Settings</h3>
</div>
<ModalTitle>Settings</ModalTitle>
<Switcher headings={tabs} bind:value>
<svelte:component this={selectedTab} />
</Switcher>
@ -46,7 +42,6 @@
<style>
.container {
padding: 30px;
display: grid;
grid-gap: var(--spacing-xl);
}
@ -54,21 +49,7 @@
/* Fix margin defined in BBUI as L rather than XL */
margin-bottom: var(--spacing-xl);
}
.heading {
display: flex;
flex-direction: row;
align-items: center;
}
.heading h3 {
font-size: var(--font-size-xl);
color: var(--ink);
font-weight: 600;
margin: 0;
}
.heading i {
margin-right: var(--spacing-m);
font-size: 28px;
color: var(--grey-6);
.container :global(textarea) {
min-height: 60px;
}
</style>

24
packages/builder/src/components/settings/tabs/DangerZone.svelte
View File

@ -2,6 +2,7 @@
import { params, goto } from "@sveltech/routify"
import { Input, TextArea, Button, Body } from "@budibase/bbui"
import { del } from "builderStore/api"
import { ModalFooter } from "components/common/Modal"
let value = ""
let loading = false
@ -9,16 +10,9 @@
async function deleteApp() {
loading = true
const id = $params.application
const res = await del(`/api/${id}`)
const json = await res.json()
await del(`/api/${id}`)
loading = false
if (res.ok) {
$goto("/")
return json
} else {
throw new Error(json)
}
$goto("/")
}
</script>
@ -35,13 +29,12 @@
thin
disabled={loading}
placeholder="" />
<Button
<ModalFooter
disabled={value !== 'DELETE' || loading}
red
wide
on:click={deleteApp}>
Delete Entire Web App
</Button>
showCancelButton={false}
confirmText="Delete Entire App"
onConfirm={deleteApp} />
</div>
<style>
@ -53,7 +46,4 @@
line-height: 1.2;
margin: 0;
}
.background :global(button) {
max-width: 100%;
}
</style>

21
packages/builder/src/components/start/CreateAppModal.svelte
View File

@ -11,12 +11,10 @@
import { Input, TextArea, Button } from "@budibase/bbui"
import { goto } from "@sveltech/routify"
import { AppsIcon, InfoIcon, CloseIcon } from "components/common/Icons/"
import { getContext } from "svelte"
import { fade } from "svelte/transition"
import { post } from "builderStore/api"
import analytics from "analytics"
const { open, close } = getContext("simple-modal")
//Move this to context="module" once svelte-forms is updated so that it can bind to stores correctly
const createAppStore = writable({ currentStep: 0, values: {} })
@ -169,7 +167,7 @@
}
const userResp = await api.post(`/api/users`, user)
const json = await userResp.json()
$goto(`./${appJson._id}`)
$goto(`/${appJson._id}`)
} catch (error) {
console.error(error)
}
@ -194,10 +192,6 @@
let onChange = () => {}
function _onCancel() {
close()
}
async function _onOkay() {
await createNewApp()
}
@ -249,9 +243,6 @@
{/if}
</div>
</div>
<div class="close-button" on:click={_onCancel}>
<CloseIcon />
</div>
<img src="/_builder/assets/bb-logo.svg" alt="budibase icon" />
{#if submitting}
<div in:fade class="spinner-container">
@ -276,16 +267,6 @@
align-content: center;
background: #f5f5f5;
}
.close-button {
cursor: pointer;
position: absolute;
top: 20px;
right: 20px;
}
.close-button :global(svg) {
width: 24px;
height: 24px;
}
.heading {
display: flex;
flex-direction: row;

60
packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
View File

@ -1,5 +1,4 @@
<script>
import { MoreIcon } from "components/common/Icons"
import { store } from "builderStore"
import { getComponentDefinition } from "builderStore/storeUtils"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
@ -109,9 +108,9 @@
</script>
<div bind:this={anchor} on:click|stopPropagation={() => {}}>
<button on:click={dropdown.show}>
<MoreIcon />
</button>
<div class="icon" on:click={dropdown.show}>
<i class="ri-more-line" />
</div>
</div>
<DropdownMenu
class="menu"
@ -122,27 +121,27 @@
align="left">
<ul>
<li class="item" on:click={() => confirmDeleteDialog.show()}>
<i class="icon ri-delete-bin-2-line" />
<i class="ri-delete-bin-2-line" />
Delete
</li>
<li class="item" on:click={moveUpComponent}>
<i class="icon ri-arrow-up-line" />
<i class="ri-arrow-up-line" />
Move up
</li>
<li class="item" on:click={moveDownComponent}>
<i class="icon ri-arrow-down-line" />
<i class="ri-arrow-down-line" />
Move down
</li>
<li class="item" on:click={copyComponent}>
<i class="icon ri-repeat-one-line" />
<i class="ri-repeat-one-line" />
Duplicate
</li>
<li class="item" on:click={() => storeComponentForCopy(true)}>
<i class="icon ri-scissors-cut-line" />
<i class="ri-scissors-cut-line" />
Cut
</li>
<li class="item" on:click={() => storeComponentForCopy(false)}>
<i class="icon ri-file-copy-line" />
<i class="ri-file-copy-line" />
Copy
</li>
<hr class="hr-style" />
@ -150,21 +149,21 @@
class="item"
class:disabled={noPaste}
on:click={() => pasteComponent('above')}>
<i class="icon ri-insert-row-top" />
<i class="ri-insert-row-top" />
Paste above
</li>
<li
class="item"
class:disabled={noPaste}
on:click={() => pasteComponent('below')}>
<i class="icon ri-insert-row-bottom" />
<i class="ri-insert-row-bottom" />
Paste below
</li>
<li
class="item"
class:disabled={noPaste || noChildrenAllowed}
on:click={() => pasteComponent('inside')}>
<i class="icon ri-insert-column-right" />
<i class="ri-insert-column-right" />
Paste inside
</li>
</ul>
@ -181,7 +180,7 @@
ul {
list-style: none;
padding: 0;
margin: var(--spacing-xs) 0;
margin: var(--spacing-s) 0;
}
li {
@ -190,44 +189,29 @@
font-size: var(--font-size-xs);
color: var(--ink);
padding: var(--spacing-s) var(--spacing-m);
margin: auto 0px;
margin: auto 0;
align-items: center;
cursor: pointer;
}
button {
border-style: none;
border-radius: 2px;
padding: 0;
background: transparent;
cursor: pointer;
color: var(--ink);
outline: none;
}
li:hover {
li:not(.disabled):hover {
background-color: var(--grey-2);
}
li:active {
color: var(--blue);
}
.item {
display: flex;
align-items: center;
font-size: 14px;
}
.icon {
li i {
margin-right: 8px;
font-size: var(--font-size-s);
}
.disabled {
li.disabled {
color: var(--grey-4);
cursor: default;
}
.icon i {
font-size: 16px;
}
.hr-style {
margin: 8px 0;
color: var(--grey-4);

9
packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
View File

@ -190,9 +190,9 @@
.item {
display: grid;
grid-template-columns: 1fr auto auto auto;
padding: 0px 5px 0px 15px;
margin: auto 0px;
border-radius: 5px;
padding: 0 var(--spacing-m);
margin: 0;
border-radius: var(--border-radius-m);
height: 36px;
align-items: center;
}
@ -205,9 +205,6 @@
.actions {
display: none;
color: var(--ink);
padding: 0 5px;
width: 24px;
height: 24px;
border-style: none;
background: rgba(0, 0, 0, 0);
cursor: pointer;

49
packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte
View File

@ -1,29 +1,14 @@
<script>
import { getContext } from "svelte"
import {
keys,
map,
some,
includes,
cloneDeep,
isEqual,
sortBy,
filter,
difference,
} from "lodash/fp"
import { pipe } from "components/common/core"
import Checkbox from "components/common/Checkbox.svelte"
import { keys, map, includes, filter } from "lodash/fp"
import EventEditorModal from "./EventEditorModal.svelte"
import { PencilIcon } from "components/common/Icons"
import { EVENT_TYPE_MEMBER_NAME } from "components/common/eventHandlers"
import { Modal } from "components/common/Modal"
export const EVENT_TYPE = "event"
export let component
let events = []
let selectedEvent = null
let modal
$: {
events = Object.keys(component)
@ -35,28 +20,9 @@
}))
}
// Handle create app modal
const { open, close } = getContext("simple-modal")
const openModal = event => {
selectedEvent = event
open(
EventEditorModal,
{
eventOptions: events,
event: selectedEvent,
onClose: () => {
close()
selectedEvent = null
},
},
{
closeButton: false,
closeOnEsc: false,
styleContent: { padding: 0 },
closeOnOuterClick: true,
}
)
modal.show()
}
</script>
@ -81,6 +47,13 @@
</form>
</div>
<Modal bind:this={modal}>
<EventEditorModal
eventOptions={events}
event={selectedEvent}
on:hide={() => (selectedEvent = null)} />
</Modal>
<style>
.root {
font-size: 10pt;

2
packages/builder/src/components/userInterface/PropertyControl.svelte
View File

@ -10,7 +10,7 @@
} from "builderStore/replaceBindings"
import { DropdownMenu } from "@budibase/bbui"
import BindingDropdown from "components/userInterface/BindingDropdown.svelte"
import { onMount, getContext } from "svelte"
import { onMount } from "svelte"
export let label = ""
export let componentInstance = {}

70
packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte
View File

@ -1,5 +1,4 @@
<script>
import { MoreIcon } from "components/common/Icons"
import { store } from "builderStore"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import api from "builderStore/api"
@ -10,7 +9,7 @@
let confirmDeleteDialog
let dropdown
let buttonForDropdown
let anchor
const hideDropdown = () => {
dropdown.hide()
@ -34,14 +33,17 @@
}
</script>
<div class="root boundary" on:click|stopPropagation={() => {}}>
<button on:click={() => dropdown.show()} bind:this={buttonForDropdown}>
<MoreIcon />
</button>
<DropdownMenu bind:this={dropdown} anchor={buttonForDropdown}>
<ul class="menu" on:click={hideDropdown}>
<li class="item" on:click={() => confirmDeleteDialog.show()}>
<i class="icon ri-delete-bin-2-line" />
<div
bind:this={anchor}
class="root boundary"
on:click|stopPropagation={() => {}}>
<div class="icon" on:click={() => dropdown.show()}>
<i class="ri-more-line" />
</div>
<DropdownMenu bind:this={dropdown} {anchor} align="left">
<ul on:click={hideDropdown}>
<li on:click={() => confirmDeleteDialog.show()}>
<i class="ri-delete-bin-2-line" />
Delete
</li>
</ul>
@ -71,40 +73,40 @@
outline: none;
}
.menu {
ul {
z-index: 100000;
overflow: visible;
padding: var(--spacing-xs) 0;
margin: var(--spacing-s) 0;
border-radius: var(--border-radius-s);
padding: 0;
}
.menu li {
border-style: none;
background-color: transparent;
list-style-type: none;
padding: 4px 16px;
margin: 0;
width: 100%;
box-sizing: border-box;
}
.item {
li {
display: flex;
font-family: var(--font-sans);
font-size: var(--font-size-xs);
color: var(--ink);
padding: var(--spacing-s) var(--spacing-m);
margin: auto 0;
align-items: center;
cursor: pointer;
}
li:not(.disabled):hover {
background-color: var(--grey-2);
}
li:active {
color: var(--blue);
}
li i {
margin-right: 8px;
font-size: var(--font-size-s);
}
.icon {
margin-right: 8px;
li.disabled {
color: var(--grey-4);
cursor: default;
}
.menu li:not(.disabled) {
cursor: pointer;
color: var(--ink);
}
.menu li:not(.disabled):hover {
color: var(--ink);
background-color: var(--grey-1);
.icon i {
font-size: 16px;
}
</style>

88
packages/builder/src/pages/[application]/_reset.svelte
View File

@ -1,13 +1,9 @@
<script>
import Modal from "svelte-simple-modal"
import { store, automationStore, backendUiStore } from "builderStore"
import SettingsLink from "components/settings/Link.svelte"
import { get } from "builderStore/api"
import { fade } from "svelte/transition"
import { isActive, goto, layout, url } from "@sveltech/routify"
import { SettingsIcon, PreviewIcon } from "components/common/Icons/"
import { isActive, goto, layout } from "@sveltech/routify"
import { PreviewIcon } from "components/common/Icons/"
// Get Package and set store
export let application
@ -47,50 +43,46 @@
}
</script>
<Modal>
<div class="root">
<div class="root">
<div class="top-nav">
<div class="topleftnav">
<button class="home-logo">
<img
src="/_builder/assets/bb-logo.svg"
alt="budibase icon"
on:click={() => $goto(`/`)} />
</button>
<div class="top-nav">
<div class="topleftnav">
<button class="home-logo">
<img
src="/_builder/assets/bb-logo.svg"
alt="budibase icon"
on:click={() => $goto(`/`)} />
</button>
<!-- This gets all indexable subroutes and sticks them in the top nav. -->
{#each $layout.children as { path, title }}
<span
class:active={$isActive(path)}
class="topnavitem"
on:click={topItemNavigate(path)}>
{title}
</span>
{/each}
</div>
<div class="toprightnav">
<SettingsLink />
<!-- This gets all indexable subroutes and sticks them in the top nav. -->
{#each $layout.children as { path, title }}
<span
class:active={false}
class="topnavitemright"
on:click={() => window.open(`/${application}`)}>
<PreviewIcon />
class:active={$isActive(path)}
class="topnavitem"
on:click={topItemNavigate(path)}>
{title}
</span>
</div>
{/each}
</div>
<div class="toprightnav">
<SettingsLink />
<span
class:active={false}
class="topnavitemright"
on:click={() => window.open(`/${application}`)}>
<PreviewIcon />
</span>
</div>
{#await promise}
<!-- This should probably be some kind of loading state? -->
<div />
{:then}
<slot />
{:catch error}
<p>Something went wrong: {error.message}</p>
{/await}
</div>
</Modal>
{#await promise}
<!-- This should probably be some kind of loading state? -->
<div />
{:then _}
<slot />
{:catch error}
<p>Something went wrong: {error.message}</p>
{/await}
</div>
<style>
.root {
@ -138,7 +130,7 @@
margin: 0px 00px 0px 20px;
padding-top: 4px;
font-weight: 500;
font-size: var(--font-size-md);
font-size: var(--font-size-m);
height: 100%;
align-items: center;
box-sizing: border-box;
@ -183,10 +175,6 @@
align-items: center;
}
.home-logo:hover {
color: var(--hovercolor);
}
.home-logo:active {
outline: none;
}

1
packages/builder/src/pages/[application]/backend/_layout.svelte
View File

@ -1,5 +1,4 @@
<script>
import { getContext } from "svelte"
import { store, backendUiStore } from "builderStore"
import * as api from "components/backend/DataTable/api"
import ModelNavigator from "components/backend/ModelNavigator/ModelNavigator.svelte"

9
packages/builder/src/pages/[application]/backend/model/[selectedModel]/index.svelte
View File

@ -1,13 +1,6 @@
<script>
import { getContext } from "svelte"
import { Button } from "@budibase/bbui"
import ModelDataTable from "components/backend/DataTable"
import ModelDataTable from "components/backend/DataTable/ModelDataTable.svelte"
import { backendUiStore } from "builderStore"
import ActionButton from "components/common/ActionButton.svelte"
import * as api from "components/backend/DataTable/api"
import CreateEditRecordModal from "components/backend/DataTable/popovers/CreateEditRecord.svelte"
const { open, close } = getContext("simple-modal")
$: selectedModel = $backendUiStore.selectedModel
</script>

7
packages/builder/src/pages/[application]/backend/view/[selectedView]/index.svelte
View File

@ -1,13 +1,6 @@
<script>
import { getContext } from "svelte"
import { Button } from "@budibase/bbui"
import ViewDataTable from "components/backend/DataTable/ViewDataTable"
import { backendUiStore } from "builderStore"
import ActionButton from "components/common/ActionButton.svelte"
import * as api from "components/backend/DataTable/api"
import CreateEditRecord from "components/backend/DataTable/popovers/CreateEditRecord.svelte"
const { open, close } = getContext("simple-modal")
$: selectedView = $backendUiStore.selectedView
</script>

61
packages/builder/src/pages/_layout.svelte
View File

@ -1,5 +1,4 @@
<script>
import Modal from "svelte-simple-modal"
import { Home as Link } from "@budibase/bbui"
import {
AppsIcon,
@ -7,43 +6,41 @@
DocumentationIcon,
CommunityIcon,
BugIcon,
} from "components/common/Icons/"
} from "components/common/Icons"
</script>
<Modal>
<div class="root">
<div class="ui-nav">
<div class="home-logo">
<img src="/_builder/assets/budibase-logo.svg" alt="Budibase icon" />
</div>
<div class="nav-section">
<Link icon={AppsIcon} title="Apps" href="/" active />
<Link
icon={HostingIcon}
title="Hosting"
href="https://portal.budi.live/" />
<Link
icon={DocumentationIcon}
title="Documentation"
href="https://docs.budibase.com/" />
<Link
icon={CommunityIcon}
title="Community"
href="https://forum.budibase.com/" />
<Link
icon={BugIcon}
title="Raise an issue"
href="https://github.com/Budibase/budibase" />
</div>
<div class="root">
<div class="ui-nav">
<div class="home-logo">
<img src="/_builder/assets/budibase-logo.svg" alt="Budibase icon" />
</div>
<div class="main">
<slot />
<div class="nav-section">
<Link icon={AppsIcon} title="Apps" href="/" active />
<Link
icon={HostingIcon}
title="Hosting"
href="https://portal.budi.live/" />
<Link
icon={DocumentationIcon}
title="Documentation"
href="https://docs.budibase.com/" />
<Link
icon={CommunityIcon}
title="Community"
href="https://forum.budibase.com/" />
<Link
icon={BugIcon}
title="Raise an issue"
href="https://github.com/Budibase/budibase" />
</div>
</div>
</Modal>
<div class="main">
<slot />
</div>
</div>
<style>
.root {

35
packages/builder/src/pages/index.svelte
View File

@ -1,5 +1,4 @@
<script>
import { getContext } from "svelte"
import { store } from "builderStore"
import api from "builderStore/api"
import AppList from "components/start/AppList.svelte"
@ -10,8 +9,11 @@
import CreateAppModal from "components/start/CreateAppModal.svelte"
import { Button, Heading } from "@budibase/bbui"
import analytics from "analytics"
import { Modal } from "components/common/Modal"
let promise = getApps()
let hasKey
let modal
async function getApps() {
const res = await get("/api/applications")
@ -24,8 +26,6 @@
}
}
let hasKey
async function fetchKeys() {
const response = await api.get(`/api/keys/`)
return await response.json()
@ -40,37 +40,16 @@
}
if (!keys.budibase) {
showCreateAppModal()
modal.show()
}
}
// Handle create app modal
const { open } = getContext("simple-modal")
const showCreateAppModal = () => {
open(
CreateAppModal,
{
hasKey,
},
{
closeButton: false,
closeOnEsc: false,
closeOnOuterClick: false,
styleContent: { padding: 0 },
closeOnOuterClick: true,
}
)
}
checkIfKeysAndApps()
</script>
<div class="header">
<Heading medium black>Welcome to the Budibase Beta</Heading>
<Button primary black on:click={showCreateAppModal}>
Create New Web App
</Button>
<Button primary black on:click={modal.show}>Create New Web App</Button>
</div>
<div class="banner">
@ -80,6 +59,10 @@
</div>
</div>
<Modal bind:this={modal} wide padded={false}>
<CreateAppModal {hasKey} />
</Modal>
{#await promise}
<div class="spinner-container">
<Spinner />

6
packages/server/src/api/controllers/record.js
View File

@ -18,8 +18,8 @@ validateJs.extend(validateJs.validators.datetime, {
exports.patch = async function(ctx) {
const instanceId = ctx.user.instanceId
const db = new CouchDB(instanceId)
const model = await db.get(record.modelId)
let record = await db.get(ctx.params.id)
const model = await db.get(record.modelId)
const patchfields = ctx.request.body
for (let key of Object.keys(patchfields)) {
@ -152,14 +152,14 @@ exports.fetchView = async function(ctx) {
exports.fetchModelRecords = async function(ctx) {
const instanceId = ctx.user.instanceId
const db = new CouchDB(instanceId)
const db = new CouchDB(instanceId)
const response = await db.allDocs(
getRecordParams(ctx.params.modelId, null, {
include_docs: true,
})
)
ctx.body = response.rows.map(row => row.doc)
ctx.body = await linkRecords.attachLinkInfo(
ctx.body = await linkRecords.attachLinkInfo(
instanceId,
response.rows.map(row => row.doc)
)

35
packages/server/src/api/controllers/view/index.js
View File

@ -4,6 +4,7 @@ const fs = require("fs")
const path = require("path")
const os = require("os")
const exporters = require("./exporters")
const { fetchView } = require("../record")
const controller = {
fetch: async ctx => {
@ -12,6 +13,10 @@ const controller = {
const response = []
for (let name of Object.keys(designDoc.views)) {
// Only return custom views
if (name === "by_link") {
continue
}
response.push({
name,
...designDoc.views[name],
@ -77,36 +82,24 @@ const controller = {
ctx.message = `View ${ctx.params.viewName} saved successfully.`
},
exportView: async ctx => {
const db = new CouchDB(ctx.user.instanceId)
const view = ctx.request.body
const format = ctx.query.format
// fetch records for the view
const response = await db.query(`database/${view.name}`, {
include_docs: !view.calculation,
group: view.groupBy,
})
if (view.calculation === "stats") {
response.rows = response.rows.map(row => ({
group: row.key,
field: view.field,
...row.value,
avg: row.value.sum / row.value.count,
}))
} else {
response.rows = response.rows.map(row => row.doc)
// Fetch view records
ctx.params.viewName = view.name
ctx.query.group = view.groupBy
if (view.field) {
ctx.query.stats = true
ctx.query.field = view.field
}
await fetchView(ctx)
// Export part
let headers = Object.keys(view.schema)
const exporter = exporters[format]
const exportedFile = exporter(headers, response.rows)
const exportedFile = exporter(headers, ctx.body)
const filename = `${view.name}.${format}`
fs.writeFileSync(path.join(os.tmpdir(), filename), exportedFile)
ctx.body = {
url: `/api/views/export/download/${filename}`,
name: view.name,