From be407ece71981bfbbef594240ae01fa05bf9c23e Mon Sep 17 00:00:00 2001 From: Martin McKeaveney Date: Thu, 22 Oct 2020 15:45:58 +0100 Subject: [PATCH] popovers replaced with table icons --- .../components/backend/DataTable/Table.svelte | 125 ++------- .../DataTable/TableHeader/TableHeader.svelte | 93 ++++++- .../backend/DataTable/TableHeader/index.js | 16 +- .../buttons/CreateColumnButton.svelte | 35 +-- .../DataTable/cells/RelationshipCell.svelte | 11 + .../popovers/ColumnPopover.old.svelte | 145 ++++++++++ .../DataTable/popovers/ColumnPopover.svelte | 1 + .../popovers/CreateEditColumnPopover.svelte | 6 +- packages/builder/yarn.lock | 251 +----------------- 9 files changed, 303 insertions(+), 380 deletions(-) create mode 100644 packages/builder/src/components/backend/DataTable/popovers/ColumnPopover.old.svelte diff --git a/packages/builder/src/components/backend/DataTable/Table.svelte b/packages/builder/src/components/backend/DataTable/Table.svelte index 0c0365b9b8..02922c5c71 100644 --- a/packages/builder/src/components/backend/DataTable/Table.svelte +++ b/packages/builder/src/components/backend/DataTable/Table.svelte @@ -22,9 +22,6 @@ import { getRenderer, editRowRenderer } from "./cells/cellRenderers"; import TableHeader from "./TableHeader" - // const ITEMS_PER_PAGE = 10 - - export let schema = [] export let data = [] export let title @@ -43,21 +40,16 @@ filter: true, }, rowSelection: "multiple", + rowMultiSelectWithClick: true, suppressRowClickSelection: false, paginationAutoPageSize: true, + pagination: true, + enableRangeSelection: true, + popupParent: document.body, } - // let currentPage = 0 - // $: columns = schema ? Object.keys(schema) : [] - // $: sort = $backendUiStore.sort - // $: sorted = sort ? fsort(data)[sort.direction](sort.column) : data - // $: paginatedData = - // sorted && sorted.length - // ? sorted.slice( - // currentPage * ITEMS_PER_PAGE, - // currentPage * ITEMS_PER_PAGE + ITEMS_PER_PAGE - // ) - // : [] + $: console.log(options) + // TODO: refactor $: { let result = [] @@ -67,6 +59,8 @@ sortable: false, resizable: false, suppressMovable: true, + suppressMenu: true, + minWidth: 0, width: 10, cellRenderer: editRowRenderer }) @@ -91,29 +85,29 @@ } $: tableId = data?.length ? data[0].tableId : null - function selectRelationship(row, fieldName) { - if (!row?.[fieldName]?.length) { - return - } - $goto( - `/${$params.application}/data/table/${tableId}/relationship/${row._id}/${fieldName}` - ) - } + // function selectRelationship(row, fieldName) { + // if (!row?.[fieldName]?.length) { + // return + // } + // $goto( + // `/${$params.application}/data/table/${tableId}/relationship/${row._id}/${fieldName}` + // ) + // } // New stuff - const deleteRows = async () => { - const response = await api.post(`/api/${tableId}/rows`, { - rows: selectedRows, - type: "delete", - }) - data = data.filter(row => !selectedRows.includes(row)) - selectedRows = [] - } + // const deleteRows = async () => { + // const response = await api.post(`/api/${tableId}/rows`, { + // rows: selectedRows, + // type: "delete", + // }) + // data = data.filter(row => !selectedRows.includes(row)) + // selectedRows = [] + // } - const handleUpdate = ({ detail }) => { - data[detail.row] = detail.data - updateRow(detail.data) - } + // const handleUpdate = ({ detail }) => { + // data[detail.row] = detail.data + // updateRow(detail.data) + // }
@@ -135,68 +129,7 @@ {options} {data} {columnDefs} - on:update={handleUpdate} - on:select={({ detail }) => (console.log(detail))} /> - - + />
diff --git a/packages/builder/src/components/backend/DataTable/TableHeader/index.js b/packages/builder/src/components/backend/DataTable/TableHeader/index.js index 5507961657..26231035d6 100644 --- a/packages/builder/src/components/backend/DataTable/TableHeader/index.js +++ b/packages/builder/src/components/backend/DataTable/TableHeader/index.js @@ -42,12 +42,15 @@ export default class TableHeaderWrapper { init(params) { console.log("init", params) this.agParams = params - const container = document.createElement("div") - new TableHeader({ - target: container, + this.container = document.createElement("div") + this.container.style.height = "100%" + this.container.style.width = "100%" + + this.headerComponent = new TableHeader({ + target: this.container, props: params, }) - this.eGui = container + this.eGui = this.container } // can get called more than once, you should return the HTML element @@ -57,6 +60,11 @@ export default class TableHeaderWrapper { // gets called when a new Column Definition has been set for this header refresh(params) { + this.agParams = params + this.headerComponent = new TableHeader({ + target: this.container, + props: params, + }) console.log("Refreshing", params) } diff --git a/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte index 7ddced256e..1f315ebe71 100644 --- a/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte +++ b/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte @@ -1,27 +1,28 @@ -
-
- -
Create Column
- - - - + + + + + diff --git a/packages/builder/src/components/backend/DataTable/cells/RelationshipCell.svelte b/packages/builder/src/components/backend/DataTable/cells/RelationshipCell.svelte index 52753463b8..578630248e 100644 --- a/packages/builder/src/components/backend/DataTable/cells/RelationshipCell.svelte +++ b/packages/builder/src/components/backend/DataTable/cells/RelationshipCell.svelte @@ -1,5 +1,6 @@
diff --git a/packages/builder/src/components/backend/DataTable/popovers/ColumnPopover.old.svelte b/packages/builder/src/components/backend/DataTable/popovers/ColumnPopover.old.svelte new file mode 100644 index 0000000000..f844cdefae --- /dev/null +++ b/packages/builder/src/components/backend/DataTable/popovers/ColumnPopover.old.svelte @@ -0,0 +1,145 @@ + + +
+ {field.name} + +
+ + {#if editing} +
Edit Column
+ + {:else} +
    + {#if type !== 'link'} +
  • + + Edit +
    • + {/if} +
  • + + Delete +
    • + {#if sortDirection === 'desc' || sortDirection === 'asc'} +
  • sort('none', field.name)}> + + Remove sort +
    • + {/if} + {#if sortDirection === 'desc' || sortColumn !== field.name} +
  • sort('asc', field.name)}> + + Sort A - Z +
    • + {/if} + {#if sortDirection === 'asc' || sortColumn !== field.name} +
  • sort('desc', field.name)}> + + Sort Z - A +
    • + {/if} +
+ {/if} + + + + diff --git a/packages/builder/src/components/backend/DataTable/popovers/ColumnPopover.svelte b/packages/builder/src/components/backend/DataTable/popovers/ColumnPopover.svelte index f844cdefae..883794bc76 100644 --- a/packages/builder/src/components/backend/DataTable/popovers/ColumnPopover.svelte +++ b/packages/builder/src/components/backend/DataTable/popovers/ColumnPopover.svelte @@ -1,3 +1,4 @@ +