From 42a7a21050b36cda0acab3e9fdcbef3614727661 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 2 Oct 2020 12:00:17 +0100 Subject: [PATCH 01/23] Add new modal to backend and fix backend file structure --- .../backend/DataTable/ModelDataTable.svelte | 12 +- .../{popovers => }/RecordFieldControl.svelte | 2 +- .../components/backend/DataTable/Table.svelte | 122 +++++++++--------- .../backend/DataTable/ViewDataTable.svelte | 12 +- .../DataTable/buttons/CalculateButton.svelte | 19 +++ .../CreateColumnButton.svelte} | 14 +- .../DataTable/buttons/CreateRowButton.svelte | 17 +++ .../DataTable/buttons/CreateViewButton.svelte | 17 +++ .../DataTable/buttons/FilterButton.svelte | 23 ++++ .../DataTable/buttons/GroupByButton.svelte | 19 +++ .../src/components/backend/DataTable/index.js | 1 - .../modals/CreateEditRecordModal.svelte | 50 +++++++ .../DataTable/popovers/Calculate.svelte | 102 --------------- .../popovers/CalculatePopover.svelte | 84 ++++++++++++ ...lumnHeader.svelte => ColumnPopover.svelte} | 13 +- ....svelte => CreateEditColumnPopover.svelte} | 0 .../popovers/CreateEditRecord.svelte | 81 ------------ .../{View.svelte => CreateViewPopover.svelte} | 37 ++---- .../{Filter.svelte => FilterPopover.svelte} | 110 +++++++--------- .../backend/DataTable/popovers/GroupBy.svelte | 91 ------------- .../DataTable/popovers/GroupByPopover.svelte | 66 ++++++++++ .../backend/DataTable/popovers/Row.svelte | 27 ---- .../{EditRow.svelte => RowPopover.svelte} | 54 ++++---- .../backend/ModelNavigator/EditTable.svelte | 8 +- .../backend/ModelNavigator/EditView.svelte | 7 +- .../ModelNavigator/ModelNavigator.svelte | 8 +- .../components/common/ConfirmDialog.svelte | 63 +++------ .../common/LinkedRecordSelector.svelte | 1 - .../src/components/common/Modal/Modal.svelte | 25 ++-- .../common/Modal/ModalContainer.svelte | 1 + .../common/Modal/ModalFooter.svelte | 44 +++++++ .../components/common/Modal/ModalTitle.svelte | 10 ++ .../src/components/common/Modal/context.js | 1 + .../src/components/common/Modal/index.js | 3 + .../model/[selectedModel]/index.svelte | 9 +- .../backend/view/[selectedView]/index.svelte | 7 - 36 files changed, 562 insertions(+), 598 deletions(-) rename packages/builder/src/components/backend/DataTable/{popovers => }/RecordFieldControl.svelte (96%) create mode 100644 packages/builder/src/components/backend/DataTable/buttons/CalculateButton.svelte rename packages/builder/src/components/backend/DataTable/{popovers/Column.svelte => buttons/CreateColumnButton.svelte} (57%) create mode 100644 packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte create mode 100644 packages/builder/src/components/backend/DataTable/buttons/CreateViewButton.svelte create mode 100644 packages/builder/src/components/backend/DataTable/buttons/FilterButton.svelte create mode 100644 packages/builder/src/components/backend/DataTable/buttons/GroupByButton.svelte delete mode 100644 packages/builder/src/components/backend/DataTable/index.js create mode 100644 packages/builder/src/components/backend/DataTable/modals/CreateEditRecordModal.svelte delete mode 100644 packages/builder/src/components/backend/DataTable/popovers/Calculate.svelte create mode 100644 packages/builder/src/components/backend/DataTable/popovers/CalculatePopover.svelte rename packages/builder/src/components/backend/DataTable/popovers/{ColumnHeader.svelte => ColumnPopover.svelte} (91%) rename packages/builder/src/components/backend/DataTable/popovers/{CreateEditColumn.svelte => CreateEditColumnPopover.svelte} (100%) delete mode 100644 packages/builder/src/components/backend/DataTable/popovers/CreateEditRecord.svelte rename packages/builder/src/components/backend/DataTable/popovers/{View.svelte => CreateViewPopover.svelte} (60%) rename packages/builder/src/components/backend/DataTable/popovers/{Filter.svelte => FilterPopover.svelte} (50%) delete mode 100644 packages/builder/src/components/backend/DataTable/popovers/GroupBy.svelte create mode 100644 packages/builder/src/components/backend/DataTable/popovers/GroupByPopover.svelte delete mode 100644 packages/builder/src/components/backend/DataTable/popovers/Row.svelte rename packages/builder/src/components/backend/DataTable/popovers/{EditRow.svelte => RowPopover.svelte} (65%) create mode 100644 packages/builder/src/components/common/Modal/ModalFooter.svelte create mode 100644 packages/builder/src/components/common/Modal/ModalTitle.svelte create mode 100644 packages/builder/src/components/common/Modal/context.js diff --git a/packages/builder/src/components/backend/DataTable/ModelDataTable.svelte b/packages/builder/src/components/backend/DataTable/ModelDataTable.svelte index 6587451462..6565bf1766 100644 --- a/packages/builder/src/components/backend/DataTable/ModelDataTable.svelte +++ b/packages/builder/src/components/backend/DataTable/ModelDataTable.svelte @@ -1,8 +1,8 @@ - + {#if Object.keys(schema).length > 0} - - + + {/if}
diff --git a/packages/builder/src/components/backend/DataTable/popovers/RecordFieldControl.svelte b/packages/builder/src/components/backend/DataTable/RecordFieldControl.svelte similarity index 96% rename from packages/builder/src/components/backend/DataTable/popovers/RecordFieldControl.svelte rename to packages/builder/src/components/backend/DataTable/RecordFieldControl.svelte index 10aeb56ae8..55129b47e3 100644 --- a/packages/builder/src/components/backend/DataTable/popovers/RecordFieldControl.svelte +++ b/packages/builder/src/components/backend/DataTable/RecordFieldControl.svelte @@ -1,7 +1,7 @@ @@ -50,68 +52,68 @@

{title}

- +
- - {#if allowEditing} - - {/if} - {#each columns as header} - - {/each} - - - - {#if paginatedData.length === 0} - {#if allowEditing} - - {/if} - {#each columns as header, idx} - - {/each} - {/if} - {#each paginatedData as row} {#if allowEditing} - + {/if} {#each columns as header} - + {/each} - {/each} + + + {#if paginatedData.length === 0} + {#if allowEditing} + + {/if} + {#each columns as header, idx} + + {/each} + {/if} + {#each paginatedData as row} + + {#if allowEditing} + + {/if} + {#each columns as header} + + {/each} + + {/each}
-
Edit
- 		- {#if allowEditing} - - {:else} -
{header}
- {/if} -
No data. - {#if idx === 0}No data.{/if} -
- - +
Edit
+ 		- {#if schema[header].type === 'link'} -
selectRelationship(row, header)}> - {row[header] ? row[header].length : 0} linked row(s) -
- {:else if schema[header].type === 'attachment'} - - {:else}{getOr('', header, row)}{/if} - 		+ {#if allowEditing} + + {:else} +
{header}
+ {/if} +
No data. + {#if idx === 0}No data.{/if} +
+ + + {#if schema[header].type === 'link'} +
selectRelationship(row, header)}> + {row[header] ? row[header].length : 0} linked row(s) +
+ {:else if schema[header].type === 'attachment'} + + {:else}{getOr('', header, row)}{/if} +
+ {data} + bind:currentPage + pageItemCount={paginatedData.length} + {ITEMS_PER_PAGE} /> diff --git a/packages/builder/src/components/backend/DataTable/popovers/CalculatePopover.svelte b/packages/builder/src/components/backend/DataTable/popovers/CalculatePopover.svelte new file mode 100644 index 0000000000..ef97598af5 --- /dev/null +++ b/packages/builder/src/components/backend/DataTable/popovers/CalculatePopover.svelte @@ -0,0 +1,84 @@ + + +
+
Calculate
+
+

The

+ +

of

+ +
+
+ + +
+
+ + diff --git a/packages/builder/src/components/backend/DataTable/popovers/ColumnHeader.svelte b/packages/builder/src/components/backend/DataTable/popovers/ColumnPopover.svelte similarity index 91% rename from packages/builder/src/components/backend/DataTable/popovers/ColumnHeader.svelte rename to packages/builder/src/components/backend/DataTable/popovers/ColumnPopover.svelte index e1429edb34..de431035da 100644 --- a/packages/builder/src/components/backend/DataTable/popovers/ColumnHeader.svelte +++ b/packages/builder/src/components/backend/DataTable/popovers/ColumnPopover.svelte @@ -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 @@ {#if editing}
Edit Column
- + {:else}
    {#if type !== 'link'} @@ -61,9 +66,7 @@ Edit {/if} -
  • confirmDeleteDialog.show()}> +
  • Delete
    • diff --git a/packages/builder/src/components/backend/DataTable/popovers/CreateEditColumn.svelte b/packages/builder/src/components/backend/DataTable/popovers/CreateEditColumnPopover.svelte similarity index 100% rename from packages/builder/src/components/backend/DataTable/popovers/CreateEditColumn.svelte rename to packages/builder/src/components/backend/DataTable/popovers/CreateEditColumnPopover.svelte diff --git a/packages/builder/src/components/backend/DataTable/popovers/CreateEditRecord.svelte b/packages/builder/src/components/backend/DataTable/popovers/CreateEditRecord.svelte deleted file mode 100644 index dda74a6ab3..0000000000 --- a/packages/builder/src/components/backend/DataTable/popovers/CreateEditRecord.svelte +++ /dev/null @@ -1,81 +0,0 @@ - - -
    - -
    - {#each modelSchema as [key, meta]} -
    - {#if meta.type === 'link'} - - {:else} - - {/if} -
    - {/each} -
    -
    - - -
    -
    - - diff --git a/packages/builder/src/components/backend/DataTable/popovers/View.svelte b/packages/builder/src/components/backend/DataTable/popovers/CreateViewPopover.svelte similarity index 60% rename from packages/builder/src/components/backend/DataTable/popovers/View.svelte rename to packages/builder/src/components/backend/DataTable/popovers/CreateViewPopover.svelte index f8f6ce948b..1c732c7edc 100644 --- a/packages/builder/src/components/backend/DataTable/popovers/View.svelte +++ b/packages/builder/src/components/backend/DataTable/popovers/CreateViewPopover.svelte @@ -1,19 +1,10 @@ -
    - - - Create New View - -
    - -
    -
    Create View
    - -
    - - -
    +
    +
    Create View
    + +
    + +
    - +
    diff --git a/packages/builder/src/components/backend/DataTable/popovers/GroupByPopover.svelte b/packages/builder/src/components/backend/DataTable/popovers/GroupByPopover.svelte new file mode 100644 index 0000000000..da5cf7b8ec --- /dev/null +++ b/packages/builder/src/components/backend/DataTable/popovers/GroupByPopover.svelte @@ -0,0 +1,66 @@ + + +
    +
    Group
    +
    +

    By

    + +
    +
    + + +
    +
    + + diff --git a/packages/builder/src/components/backend/DataTable/popovers/Row.svelte b/packages/builder/src/components/backend/DataTable/popovers/Row.svelte deleted file mode 100644 index 38b56e83fd..0000000000 --- a/packages/builder/src/components/backend/DataTable/popovers/Row.svelte +++ /dev/null @@ -1,27 +0,0 @@ - - -
    - -
    - -
    Add New Row
    - -     - - diff --git a/packages/builder/src/components/backend/DataTable/popovers/EditRow.svelte b/packages/builder/src/components/backend/DataTable/popovers/RowPopover.svelte similarity index 65% rename from packages/builder/src/components/backend/DataTable/popovers/EditRow.svelte rename to packages/builder/src/components/backend/DataTable/popovers/RowPopover.svelte index 8b50bf6b61..ca8488e134 100644 --- a/packages/builder/src/components/backend/DataTable/popovers/EditRow.svelte +++ b/packages/builder/src/components/backend/DataTable/popovers/RowPopover.svelte @@ -1,41 +1,33 @@ @@ -43,21 +35,16 @@
    - {#if editing} -
    Edit Row
    - - {:else} -
      -
    • - - Edit -
      • -
    • confirmDeleteDialog.show()}> - - Delete -
      • -
    - {/if} +
      +
    • + + Edit +
      • +
    • + + Delete +
      • +
    + + + diff --git a/packages/builder/src/components/common/LinkedRecordSelector.svelte b/packages/builder/src/components/common/LinkedRecordSelector.svelte index c263332ca5..f4df3a7d1f 100644 --- a/packages/builder/src/components/common/LinkedRecordSelector.svelte +++ b/packages/builder/src/components/common/LinkedRecordSelector.svelte @@ -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 } diff --git a/packages/builder/src/components/common/Modal/Modal.svelte b/packages/builder/src/components/common/Modal/Modal.svelte index 0077567100..dd6c6615fd 100644 --- a/packages/builder/src/components/common/Modal/Modal.svelte +++ b/packages/builder/src/components/common/Modal/Modal.svelte @@ -1,17 +1,23 @@ {#if visible} @@ -66,7 +74,6 @@ justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 0.25); - z-index: 999; } .scroll-wrapper { @@ -98,5 +105,7 @@ flex: 0 0 400px; margin: 2rem 0; border-radius: var(--border-radius-m); + gap: var(--spacing-xl); + padding: var(--spacing-xl); } diff --git a/packages/builder/src/components/common/Modal/ModalContainer.svelte b/packages/builder/src/components/common/Modal/ModalContainer.svelte index 891df8630b..ed6d9e15ad 100644 --- a/packages/builder/src/components/common/Modal/ModalContainer.svelte +++ b/packages/builder/src/components/common/Modal/ModalContainer.svelte @@ -5,5 +5,6 @@ position: fixed; top: 0; left: 0; + z-index: 999; } diff --git a/packages/builder/src/components/common/Modal/ModalFooter.svelte b/packages/builder/src/components/common/Modal/ModalFooter.svelte new file mode 100644 index 0000000000..39c2652ead --- /dev/null +++ b/packages/builder/src/components/common/Modal/ModalFooter.svelte @@ -0,0 +1,44 @@ + + +{#if showCancelButton || showConfirmButton} +
    + {#if showCancelButton} + + {/if} + {#if showConfirmButton} + + {/if} +
    +{/if} + + diff --git a/packages/builder/src/components/common/Modal/ModalTitle.svelte b/packages/builder/src/components/common/Modal/ModalTitle.svelte new file mode 100644 index 0000000000..0f6a4f5207 --- /dev/null +++ b/packages/builder/src/components/common/Modal/ModalTitle.svelte @@ -0,0 +1,10 @@ +
    + +
    + + diff --git a/packages/builder/src/components/common/Modal/context.js b/packages/builder/src/components/common/Modal/context.js new file mode 100644 index 0000000000..81ea1cdcf5 --- /dev/null +++ b/packages/builder/src/components/common/Modal/context.js @@ -0,0 +1 @@ +export const ContextKey = "budibase-modal" diff --git a/packages/builder/src/components/common/Modal/index.js b/packages/builder/src/components/common/Modal/index.js index bd53a1373b..8420f8416a 100644 --- a/packages/builder/src/components/common/Modal/index.js +++ b/packages/builder/src/components/common/Modal/index.js @@ -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" diff --git a/packages/builder/src/pages/[application]/backend/model/[selectedModel]/index.svelte b/packages/builder/src/pages/[application]/backend/model/[selectedModel]/index.svelte index 176bfc4c30..c2cf7f6ff9 100644 --- a/packages/builder/src/pages/[application]/backend/model/[selectedModel]/index.svelte +++ b/packages/builder/src/pages/[application]/backend/model/[selectedModel]/index.svelte @@ -1,13 +1,6 @@ diff --git a/packages/builder/src/pages/[application]/backend/view/[selectedView]/index.svelte b/packages/builder/src/pages/[application]/backend/view/[selectedView]/index.svelte index 168461699b..8a0c87b98b 100644 --- a/packages/builder/src/pages/[application]/backend/view/[selectedView]/index.svelte +++ b/packages/builder/src/pages/[application]/backend/view/[selectedView]/index.svelte @@ -1,13 +1,6 @@ From cfcfa0bb8751e53e4a36239c83f86765a1e78ce2 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 2 Oct 2020 12:02:11 +0100 Subject: [PATCH 02/23] Rename linked rows to related rows and remove deprecated file --- .../backend/DataTable/LinkedRecord.svelte | 124 ------------------ .../components/backend/DataTable/Table.svelte | 2 +- 2 files changed, 1 insertion(+), 125 deletions(-) delete mode 100644 packages/builder/src/components/backend/DataTable/LinkedRecord.svelte diff --git a/packages/builder/src/components/backend/DataTable/LinkedRecord.svelte b/packages/builder/src/components/backend/DataTable/LinkedRecord.svelte deleted file mode 100644 index 0cbf9ab307..0000000000 --- a/packages/builder/src/components/backend/DataTable/LinkedRecord.svelte +++ /dev/null @@ -1,124 +0,0 @@ - - -
    - {records.length} - {#if open} -
    -
    -

    {field.name}

    - -
    - {#each records as record} -
    -
    - {#each Object.keys(model.schema).filter(key => !FIELDS_TO_HIDE.includes(key)) as key} -
    - {model.schema[key].name} -

    {record[key]}

    -
    - {/each} -
    -
    - {/each} -
    - {/if} -
    - - diff --git a/packages/builder/src/components/backend/DataTable/Table.svelte b/packages/builder/src/components/backend/DataTable/Table.svelte index a4d08fc6e3..907fc53dd7 100644 --- a/packages/builder/src/components/backend/DataTable/Table.svelte +++ b/packages/builder/src/components/backend/DataTable/Table.svelte @@ -98,7 +98,7 @@
    selectRelationship(row, header)}> - {row[header] ? row[header].length : 0} linked row(s) + {row[header] ? row[header].length : 0} related row(s)
    {:else if schema[header].type === 'attachment'} From ccf41046d67be64712db735bfa3d084fa68ef9f8 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 2 Oct 2020 12:22:34 +0100 Subject: [PATCH 03/23] Add wide prop for modals --- packages/builder/src/components/common/Modal/Modal.svelte | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/builder/src/components/common/Modal/Modal.svelte b/packages/builder/src/components/common/Modal/Modal.svelte index dd6c6615fd..802297d728 100644 --- a/packages/builder/src/components/common/Modal/Modal.svelte +++ b/packages/builder/src/components/common/Modal/Modal.svelte @@ -15,6 +15,8 @@ import { ContextKey } from "./context" const dispatch = createEventDispatcher() + export let wide + let visible export function show() { @@ -47,7 +49,7 @@ on:click|self={hide} transition:fly={{ y: 100 }}>
    -
    +
    @@ -108,4 +110,7 @@ gap: var(--spacing-xl); padding: var(--spacing-xl); } + .content.wide { + flex: 0 0 600px; + } From 337f0591b5ee8c71508618db8b3ef7e64d3038d9 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 2 Oct 2020 12:22:49 +0100 Subject: [PATCH 04/23] Update settings to use new modal --- .../src/components/settings/Link.svelte | 28 ++++---------- .../{Modal.svelte => SettingsModal.svelte} | 37 +++++-------------- .../settings/tabs/DangerZone.svelte | 24 ++++-------- 3 files changed, 23 insertions(+), 66 deletions(-) rename packages/builder/src/components/settings/{Modal.svelte => SettingsModal.svelte} (56%) diff --git a/packages/builder/src/components/settings/Link.svelte b/packages/builder/src/components/settings/Link.svelte index 1d702d032b..1550815c33 100644 --- a/packages/builder/src/components/settings/Link.svelte +++ b/packages/builder/src/components/settings/Link.svelte @@ -1,31 +1,17 @@ - + + + + diff --git a/packages/builder/src/components/settings/tabs/DangerZone.svelte b/packages/builder/src/components/settings/tabs/DangerZone.svelte index e8b6706d5a..6807f4289e 100644 --- a/packages/builder/src/components/settings/tabs/DangerZone.svelte +++ b/packages/builder/src/components/settings/tabs/DangerZone.svelte @@ -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("/") } @@ -35,13 +29,12 @@ thin disabled={loading} placeholder="" /> - + showCancelButton={false} + confirmText="Delete Entire App" + onConfirm={deleteApp} />
    From f53bf549293144677e7a066580417cc44e5acfce Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 2 Oct 2020 12:27:52 +0100 Subject: [PATCH 05/23] Add close icon to modals --- .../src/components/common/Modal/Modal.svelte | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/packages/builder/src/components/common/Modal/Modal.svelte b/packages/builder/src/components/common/Modal/Modal.svelte index 802297d728..2193dc0a9f 100644 --- a/packages/builder/src/components/common/Modal/Modal.svelte +++ b/packages/builder/src/components/common/Modal/Modal.svelte @@ -51,6 +51,7 @@
    +
    @@ -113,4 +114,16 @@ .content.wide { flex: 0 0 600px; } + + 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; + } From e6db9aefd110a97d4c3feef315341459e5305edf Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 2 Oct 2020 16:38:33 +0100 Subject: [PATCH 06/23] Add final version of multiselect --- .../src/components/common/MultiSelect.svelte | 223 ++++++++---------- 1 file changed, 94 insertions(+), 129 deletions(-) diff --git a/packages/builder/src/components/common/MultiSelect.svelte b/packages/builder/src/components/common/MultiSelect.svelte index f000df7f41..f2fa530530 100644 --- a/packages/builder/src/components/common/MultiSelect.svelte +++ b/packages/builder/src/components/common/MultiSelect.svelte @@ -6,74 +6,57 @@ "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) { @@ -82,7 +65,6 @@ remove(value) } else { add(options.filter(option => option.value === value)[0]) - input.focus() } } @@ -91,75 +73,51 @@ {#if label} {/if} -
    +
    -
    +
    {#each Object.values(selected) as option} -
    +
    {option.name} - {#if !readonly} -
    remove(option.value)}> - - - -
    - {/if} +
    remove(option.value)}> + + + +
    {/each} + {#if !value || !value.length} {/if}
    -
    - {#if !readonly} - -
    - - - -
    - {/if} -
    {#if optionsVisible} +
    showOptions(false)} />
      - {#each filtered as option} -
    • + {#each options as option} +
    • {option.name}
      • {/each} - {#if !filtered.length && inputValue.length} + {#if !options.length}
    • No results
      • {/if}
    @@ -175,7 +133,7 @@ justify-content: flex-start; align-items: stretch; } - .multiselect:not(.readonly):hover { + .multiselect:hover { border-bottom-color: hsl(0, 0%, 50%); } @@ -185,6 +143,7 @@ justify-content: flex-start; align-items: center; flex: 0 1 auto; + z-index: 2; } .tokens { @@ -194,6 +153,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 +173,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 +248,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; From 4c18e93d8c2377c136aa108c3f7ae09232a6902b Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 2 Oct 2020 16:48:01 +0100 Subject: [PATCH 07/23] Remove double 'no data' in empty tables --- packages/builder/src/components/backend/DataTable/Table.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/builder/src/components/backend/DataTable/Table.svelte b/packages/builder/src/components/backend/DataTable/Table.svelte index 907fc53dd7..2e28577c60 100644 --- a/packages/builder/src/components/backend/DataTable/Table.svelte +++ b/packages/builder/src/components/backend/DataTable/Table.svelte @@ -81,7 +81,7 @@ {/if} {#each columns as header, idx} - {#if idx === 0}No data.{/if} + {#if idx === 0 && !allowEditing}No data.{/if} {/each} {/if} From 31d31fcddafe08df9172c946b10d8381a4a8986e Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 2 Oct 2020 16:53:41 +0100 Subject: [PATCH 08/23] Fix multiselect crashing in certain circumstances --- .../builder/src/components/common/MultiSelect.svelte | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/builder/src/components/common/MultiSelect.svelte b/packages/builder/src/components/common/MultiSelect.svelte index f2fa530530..22cc3f16be 100644 --- a/packages/builder/src/components/common/MultiSelect.svelte +++ b/packages/builder/src/components/common/MultiSelect.svelte @@ -61,6 +61,9 @@ function handleOptionMousedown(e) { const value = e.target.dataset.value + if (value == null) { + return + } if (selected[value]) { remove(value) } else { @@ -118,7 +121,7 @@ {/each} {#if !options.length} -
  • No results
    • +
  • No results
    • {/if}
{/if} @@ -264,6 +267,10 @@ li:not(.selected):hover { background-color: var(--grey-1); } + li.no-results:hover { + background-color: white; + cursor: initial; + } .hidden { display: none; From d2ec751891e21fc2eb0c973c68bd9e2f3db2a380 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 2 Oct 2020 18:37:24 +0100 Subject: [PATCH 09/23] Adjust modal styles --- packages/builder/src/components/common/Modal/Modal.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/builder/src/components/common/Modal/Modal.svelte b/packages/builder/src/components/common/Modal/Modal.svelte index 2193dc0a9f..beb7613ff3 100644 --- a/packages/builder/src/components/common/Modal/Modal.svelte +++ b/packages/builder/src/components/common/Modal/Modal.svelte @@ -47,7 +47,7 @@
+ transition:fly={{ y: 50 }}>
From 2df104568ddf3c8926e7022c9aef609a5156eb2c Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 2 Oct 2020 18:49:00 +0100 Subject: [PATCH 10/23] Fix error box styles --- .../src/components/common/ErrorsBox.svelte | 20 +++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/packages/builder/src/components/common/ErrorsBox.svelte b/packages/builder/src/components/common/ErrorsBox.svelte index 0e565a4ad8..9e29784c66 100644 --- a/packages/builder/src/components/common/ErrorsBox.svelte +++ b/packages/builder/src/components/common/ErrorsBox.svelte @@ -5,9 +5,25 @@ {#if hasErrors} -
+
{#each errors as error} -
{error.dataPath} {error.message}
+
{error.dataPath} {error.message}
{/each}
{/if} + + From 4d8e4061b3e5b11987991a3efd57f73b9fb3195c Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 2 Oct 2020 19:09:19 +0100 Subject: [PATCH 11/23] Disable modal confirm button while async callbacks are being processed to avoid multiple executions --- .../common/Modal/ModalFooter.svelte | 29 +++++++++++++++---- 1 file changed, 24 insertions(+), 5 deletions(-) diff --git a/packages/builder/src/components/common/Modal/ModalFooter.svelte b/packages/builder/src/components/common/Modal/ModalFooter.svelte index 39c2652ead..fb85a1cbb2 100644 --- a/packages/builder/src/components/common/Modal/ModalFooter.svelte +++ b/packages/builder/src/components/common/Modal/ModalFooter.svelte @@ -10,31 +10,50 @@ 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 } -{#if showCancelButton || showConfirmButton} -
+
+
+ +
+
{#if showCancelButton} {/if} {#if showConfirmButton} - + {/if} -
-{/if} +
+ diff --git a/packages/builder/src/components/database/DataTable/ModelDataTable.svelte b/packages/builder/src/components/database/DataTable/ModelDataTable.svelte deleted file mode 100644 index c0d5ad6959..0000000000 --- a/packages/builder/src/components/database/DataTable/ModelDataTable.svelte +++ /dev/null @@ -1,196 +0,0 @@ - - -
-
-

{$backendUiStore.selectedModel.name}

-
- - {#if Object.keys($backendUiStore.selectedModel.schema).length > 0} - - - - {/if} -
-
- - - - - {#each headers as header} - - {/each} - - - - {#if paginatedData.length === 0} -
No Data.
- {/if} - {#each paginatedData as row} - - - {#each headers as header} - - {/each} - - {/each} - -
-
Edit
- 		- -
- - - {#if schema[header].type === 'link'} - - {:else if schema[header].type === 'attachment'} - - {:else}{getOr('', header, row)}{/if} -
- -
- - diff --git a/packages/builder/src/components/database/DataTable/ViewDataTable.svelte b/packages/builder/src/components/database/DataTable/ViewDataTable.svelte deleted file mode 100644 index 0958737b59..0000000000 --- a/packages/builder/src/components/database/DataTable/ViewDataTable.svelte +++ /dev/null @@ -1,56 +0,0 @@ - - - - - - {#if view.calculation} - - {/if} - -
diff --git a/packages/builder/src/components/database/DataTable/popovers/Export.svelte b/packages/builder/src/components/database/DataTable/popovers/Export.svelte deleted file mode 100644 index 00514edb9c..0000000000 --- a/packages/builder/src/components/database/DataTable/popovers/Export.svelte +++ /dev/null @@ -1,71 +0,0 @@ - - -
- - - Export - -
- -
Export Format
- -
- - -
- - - From f19e60dcb1472b2e86e088f70306f24922a2ad68 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Sat, 3 Oct 2020 21:07:59 +0100 Subject: [PATCH 20/23] Update data export with new DB view structure and linked records --- .../server/src/api/controllers/view/index.js | 31 ++++++------------- 1 file changed, 10 insertions(+), 21 deletions(-) diff --git a/packages/server/src/api/controllers/view/index.js b/packages/server/src/api/controllers/view/index.js index d2ce3b0835..b7826a015c 100644 --- a/packages/server/src/api/controllers/view/index.js +++ b/packages/server/src/api/controllers/view/index.js @@ -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 => { @@ -77,36 +78,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, From 36cf5d5631f1eaa87938bf19a02e4281435ee779 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Sun, 4 Oct 2020 17:10:32 +0100 Subject: [PATCH 21/23] Standardise dropdownmenus in frontend page --- .../ComponentDropdownMenu.svelte | 60 ++++++---------- .../ComponentsHierarchyChildren.svelte | 9 +-- .../userInterface/ScreenDropdownMenu.svelte | 70 ++++++++++--------- 3 files changed, 61 insertions(+), 78 deletions(-) diff --git a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte index 7d646d22d5..ec2122d6bf 100644 --- a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte +++ b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte @@ -1,5 +1,4 @@
{}}> - +
+ +
  • confirmDeleteDialog.show()}> - + Delete
  • - + Move up
  • - + Move down
  • - + Duplicate
  • storeComponentForCopy(true)}> - + Cut
  • storeComponentForCopy(false)}> - + Copy
    • @@ -150,21 +149,21 @@ class="item" class:disabled={noPaste} on:click={() => pasteComponent('above')}> - + Paste above
  • pasteComponent('below')}> - + Paste below
  • pasteComponent('inside')}> - + Paste inside
@@ -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); diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte index d9c619fae3..bec42b7f4f 100644 --- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte +++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte @@ -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; diff --git a/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte b/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte index 01c114a569..f0e7360ca3 100644 --- a/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte +++ b/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte @@ -1,5 +1,4 @@ -
{}}> - - -
    -
  • confirmDeleteDialog.show()}> - +
    {}}> +
    dropdown.show()}> + +
    + +
      +
    • confirmDeleteDialog.show()}> + Delete
    @@ -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; } From da035452e6016153a8a9be43326b1a8030dd3d87 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Sun, 4 Oct 2020 17:59:20 +0100 Subject: [PATCH 22/23] Fix record patch function --- packages/server/src/api/controllers/record.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/server/src/api/controllers/record.js b/packages/server/src/api/controllers/record.js index 3559a2568b..45d983eb2b 100644 --- a/packages/server/src/api/controllers/record.js +++ b/packages/server/src/api/controllers/record.js @@ -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) ) From 82476e2ae9ed70ee8b547b9dd494ea3254738d53 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Sun, 4 Oct 2020 17:59:49 +0100 Subject: [PATCH 23/23] Fix get views endpoint returning built in by_link view --- packages/server/src/api/controllers/view/index.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/server/src/api/controllers/view/index.js b/packages/server/src/api/controllers/view/index.js index b7826a015c..d803074c88 100644 --- a/packages/server/src/api/controllers/view/index.js +++ b/packages/server/src/api/controllers/view/index.js @@ -13,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],