forked from tsai/budibase
mike12345567
6 years ago
65 changed files with 1054 additions and 1618 deletions
@ -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> |
|||
@ -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 : "" |
|||
@ -0,0 +1,19 @@ |
|||
<script> |
|||
import { Popover, TextButton, Icon } from "@budibase/bbui" |
|||
import CalculatePopover from "../popovers/CalculatePopover.svelte" |
|||
|
|||
export let view = {} |
|||
|
|||
let anchor |
|||
let dropdown |
|||
</script> |
|||
|
|||
<div bind:this={anchor}> |
|||
<TextButton text small on:click={dropdown.show} active={!!view.field}> |
|||
<Icon name="calculate" /> |
|||
Calculate |
|||
</TextButton> |
|||
</div> |
|||
<Popover bind:this={dropdown} {anchor} align="left"> |
|||
<CalculatePopover {view} onClosed={dropdown.hide} /> |
|||
</Popover> |
|||
@ -0,0 +1,17 @@ |
|||
<script> |
|||
import { TextButton as Button, Icon } from "@budibase/bbui" |
|||
import CreateEditRecordModal from "../modals/CreateEditRecordModal.svelte" |
|||
import { Modal } from "components/common/Modal" |
|||
|
|||
let modal |
|||
</script> |
|||
|
|||
<div> |
|||
<Button text small on:click={modal.show}> |
|||
<Icon name="addrow" /> |
|||
Create New Row |
|||
</Button> |
|||
</div> |
|||
<Modal bind:this={modal}> |
|||
<CreateEditRecordModal /> |
|||
</Modal> |
|||
@ -0,0 +1,17 @@ |
|||
<script> |
|||
import { Popover, TextButton, Icon } from "@budibase/bbui" |
|||
import CreateViewPopover from "../popovers/CreateViewPopover.svelte" |
|||
|
|||
let anchor |
|||
let dropdown |
|||
</script> |
|||
|
|||
<div bind:this={anchor}> |
|||
<TextButton text small on:click={dropdown.show}> |
|||
<Icon name="view" /> |
|||
Create New View |
|||
</TextButton> |
|||
</div> |
|||
<Popover bind:this={dropdown} {anchor} align="left"> |
|||
<CreateViewPopover onClosed={dropdown.hide} /> |
|||
</Popover> |
|||
@ -0,0 +1,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> |
|||
@ -0,0 +1,23 @@ |
|||
<script> |
|||
import { Popover, TextButton, Icon } from "@budibase/bbui" |
|||
import FilterPopover from "../popovers/FilterPopover.svelte" |
|||
|
|||
export let view = {} |
|||
|
|||
let anchor |
|||
let dropdown |
|||
</script> |
|||
|
|||
<div bind:this={anchor}> |
|||
<TextButton |
|||
text |
|||
small |
|||
on:click={dropdown.show} |
|||
active={view.filters && view.filters.length}> |
|||
<Icon name="filter" /> |
|||
Filter |
|||
</TextButton> |
|||
</div> |
|||
<Popover bind:this={dropdown} {anchor} align="left"> |
|||
<FilterPopover {view} onClosed={dropdown.hide} /> |
|||
</Popover> |
|||
@ -0,0 +1,19 @@ |
|||
<script> |
|||
import { Popover, TextButton, Icon } from "@budibase/bbui" |
|||
import GroupByPopover from "../popovers/GroupByPopover.svelte" |
|||
|
|||
export let view = {} |
|||
|
|||
let anchor |
|||
let dropdown |
|||
</script> |
|||
|
|||
<div bind:this={anchor}> |
|||
<TextButton text small active={!!view.groupBy} on:click={dropdown.show}> |
|||
<Icon name="group" /> |
|||
Group By |
|||
</TextButton> |
|||
</div> |
|||
<Popover bind:this={dropdown} {anchor} align="left"> |
|||
<GroupByPopover {view} onClosed={dropdown.hide} /> |
|||
</Popover> |
|||
@ -1 +0,0 @@ |
|||
export { default } from "./ModelDataTable.svelte" |
|||
@ -0,0 +1,50 @@ |
|||
<script> |
|||
import { backendUiStore } from "builderStore" |
|||
import { notifier } from "builderStore/store/notifications" |
|||
import LinkedRecordSelector from "components/common/LinkedRecordSelector.svelte" |
|||
import RecordFieldControl from "../RecordFieldControl.svelte" |
|||
import * as api from "../api" |
|||
import { ModalTitle, ModalFooter } from "components/common/Modal" |
|||
import ErrorsBox from "components/common/ErrorsBox.svelte" |
|||
|
|||
export let record = {} |
|||
export let visible = false |
|||
|
|||
let modal |
|||
let errors = [] |
|||
|
|||
$: creating = record?._id == null |
|||
$: model = record.modelId |
|||
? $backendUiStore.models.find(model => model._id === record?.modelId) |
|||
: $backendUiStore.selectedModel |
|||
$: modelSchema = Object.entries(model?.schema ?? {}) |
|||
|
|||
async function saveRecord() { |
|||
const recordResponse = await api.saveRecord( |
|||
{ ...record, modelId: model._id }, |
|||
model._id |
|||
) |
|||
if (recordResponse.errors) { |
|||
errors = Object.keys(recordResponse.errors) |
|||
.map(k => ({ dataPath: k, message: recordResponse.errors[k] })) |
|||
.flat() |
|||
// Prevent modal closing if there were errors |
|||
return false |
|||
} |
|||
notifier.success("Record saved successfully.") |
|||
backendUiStore.actions.records.save(recordResponse) |
|||
} |
|||
</script> |
|||
|
|||
<ModalTitle>{creating ? 'Create Row' : 'Edit Row'}</ModalTitle> |
|||
<ErrorsBox {errors} /> |
|||
{#each modelSchema as [key, meta]} |
|||
<div> |
|||
{#if meta.type === 'link'} |
|||
<LinkedRecordSelector bind:linkedRecords={record[key]} schema={meta} /> |
|||
{:else} |
|||
<RecordFieldControl {meta} bind:value={record[key]} /> |
|||
{/if} |
|||
</div> |
|||
{/each} |
|||
<ModalFooter confirmText={creating ? 'Add' : 'Save'} onConfirm={saveRecord} /> |
|||
@ -1,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> |
|||
@ -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> |
|||
@ -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> |
|||
@ -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> |
|||
@ -1,91 +0,0 @@ |
|||
<script> |
|||
import { |
|||
Popover, |
|||
TextButton, |
|||
Button, |
|||
Icon, |
|||
Input, |
|||
Select, |
|||
} from "@budibase/bbui" |
|||
import { backendUiStore } from "builderStore" |
|||
import { notifier } from "builderStore/store/notifications" |
|||
import CreateEditRecord from "./CreateEditRecord.svelte" |
|||
|
|||
const CALCULATIONS = [ |
|||
{ |
|||
name: "Statistics", |
|||
key: "stats", |
|||
}, |
|||
] |
|||
|
|||
export let view = {} |
|||
|
|||
let anchor |
|||
let dropdown |
|||
|
|||
$: viewModel = $backendUiStore.models.find( |
|||
({ _id }) => _id === $backendUiStore.selectedView.modelId |
|||
) |
|||
$: fields = viewModel && Object.keys(viewModel.schema) |
|||
|
|||
function saveView() { |
|||
backendUiStore.actions.views.save(view) |
|||
notifier.success(`View ${view.name} saved.`) |
|||
dropdown.hide() |
|||
} |
|||
</script> |
|||
|
|||
<div bind:this={anchor}> |
|||
<TextButton text small active={!!view.groupBy} on:click={dropdown.show}> |
|||
<Icon name="group" /> |
|||
Group |
|||
</TextButton> |
|||
</div> |
|||
<Popover bind:this={dropdown} {anchor} align="left"> |
|||
<div class="actions"> |
|||
<h5>Group</h5> |
|||
<div class="input-group-row"> |
|||
<p>By</p> |
|||
<Select secondary thin bind:value={view.groupBy}> |
|||
<option value="">Choose an option</option> |
|||
{#each fields as field} |
|||
<option value={field}>{field}</option> |
|||
{/each} |
|||
</Select> |
|||
</div> |
|||
<div class="footer"> |
|||
<Button secondary on:click={dropdown.hide}>Cancel</Button> |
|||
<Button primary on:click={saveView}>Save</Button> |
|||
</div> |
|||
</div> |
|||
</Popover> |
|||
|
|||
<style> |
|||
.actions { |
|||
display: grid; |
|||
grid-gap: var(--spacing-xl); |
|||
} |
|||
|
|||
h5 { |
|||
margin: 0; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.footer { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
gap: var(--spacing-m); |
|||
} |
|||
|
|||
.input-group-row { |
|||
display: grid; |
|||
grid-template-columns: 20px 1fr; |
|||
gap: var(--spacing-s); |
|||
align-items: center; |
|||
} |
|||
|
|||
p { |
|||
margin: 0; |
|||
font-size: var(--font-size-xs); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,66 @@ |
|||
<script> |
|||
import { Button, Input, Select } from "@budibase/bbui" |
|||
import { backendUiStore } from "builderStore" |
|||
import { notifier } from "builderStore/store/notifications" |
|||
|
|||
export let view = {} |
|||
export let onClosed |
|||
|
|||
$: viewModel = $backendUiStore.models.find( |
|||
({ _id }) => _id === $backendUiStore.selectedView.modelId |
|||
) |
|||
$: fields = viewModel && Object.keys(viewModel.schema) |
|||
|
|||
function saveView() { |
|||
backendUiStore.actions.views.save(view) |
|||
notifier.success(`View ${view.name} saved.`) |
|||
onClosed() |
|||
} |
|||
</script> |
|||
|
|||
<div class="actions"> |
|||
<h5>Group</h5> |
|||
<div class="input-group-row"> |
|||
<p>By</p> |
|||
<Select secondary thin bind:value={view.groupBy}> |
|||
<option value="">Choose an option</option> |
|||
{#each fields as field} |
|||
<option value={field}>{field}</option> |
|||
{/each} |
|||
</Select> |
|||
</div> |
|||
<div class="footer"> |
|||
<Button secondary on:click={onClosed}>Cancel</Button> |
|||
<Button primary on:click={saveView}>Save</Button> |
|||
</div> |
|||
</div> |
|||
|
|||
<style> |
|||
.actions { |
|||
display: grid; |
|||
grid-gap: var(--spacing-xl); |
|||
} |
|||
|
|||
h5 { |
|||
margin: 0; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.footer { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
gap: var(--spacing-m); |
|||
} |
|||
|
|||
.input-group-row { |
|||
display: grid; |
|||
grid-template-columns: 20px 1fr; |
|||
gap: var(--spacing-s); |
|||
align-items: center; |
|||
} |
|||
|
|||
p { |
|||
margin: 0; |
|||
font-size: var(--font-size-xs); |
|||
} |
|||
</style> |
|||
@ -1,27 +0,0 @@ |
|||
<script> |
|||
import { DropdownMenu, TextButton as Button, Icon } from "@budibase/bbui" |
|||
import CreateEditRecord from "./CreateEditRecord.svelte" |
|||
import { Modal } from "components/common/Modal" |
|||
|
|||
let anchor |
|||
let dropdown |
|||
</script> |
|||
|
|||
<div bind:this={anchor}> |
|||
<Button text small on:click={dropdown.show}> |
|||
<Icon name="addrow" /> |
|||
Create New Row |
|||
</Button> |
|||
</div> |
|||
<Modal bind:this={dropdown}> |
|||
<h5>Add New Row</h5> |
|||
<CreateEditRecord onClosed={dropdown.hide} /> |
|||
</Modal> |
|||
|
|||
<style> |
|||
h5 { |
|||
padding: var(--spacing-xl) 0 0 var(--spacing-xl); |
|||
margin: 0; |
|||
font-weight: 500; |
|||
} |
|||
</style> |
|||
@ -1,64 +1,31 @@ |
|||
<script> |
|||
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> |
|||
|
|||
@ -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> |
|||
@ -0,0 +1,10 @@ |
|||
<h5> |
|||
<slot /> |
|||
</h5> |
|||
|
|||
<style> |
|||
h5 { |
|||
margin: 0; |
|||
font-weight: 500; |
|||
} |
|||
</style> |
|||
@ -0,0 +1 @@ |
|||
export const ContextKey = "budibase-modal" |
|||
@ -1,2 +1,5 @@ |
|||
export { default as Modal } from "./Modal.svelte" |
|||
export { default as ModalContainer } from "./ModalContainer.svelte" |
|||
export { default as ModalTitle } from "./ModalTitle.svelte" |
|||
export { default as ModalFooter } from "./ModalFooter.svelte" |
|||
export { ContextKey } from "./context" |
|||
|
|||
@ -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() |
|||
}, |
|||
} |
|||
} |
|||
@ -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> |
|||
@ -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> |
|||
@ -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> |
|||
Loading…
Reference in new issue