From eb1192ebc09b74e876f72f6e1c973b8b7bc5fc8a Mon Sep 17 00:00:00 2001 From: Martin McKeaveney Date: Fri, 23 Oct 2020 17:38:10 +0100 Subject: [PATCH] more ag grid styling --- .../components/backend/DataTable/Table.svelte | 32 +-- .../DataTable/TableHeader/TableHeader.svelte | 44 ++-- .../buttons/CreateColumnButton.svelte | 8 +- .../popovers/CreateEditColumnPopover.svelte | 34 ++- .../standard-components/src/DataTable.svelte | 201 ------------------ 5 files changed, 67 insertions(+), 252 deletions(-) delete mode 100644 packages/standard-components/src/DataTable.svelte diff --git a/packages/builder/src/components/backend/DataTable/Table.svelte b/packages/builder/src/components/backend/DataTable/Table.svelte index 02922c5c71..acd35fa737 100644 --- a/packages/builder/src/components/backend/DataTable/Table.svelte +++ b/packages/builder/src/components/backend/DataTable/Table.svelte @@ -2,19 +2,9 @@ import { goto, params } from "@sveltech/routify" import { onMount } from "svelte" import { fade } from "svelte/transition" - 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 ActionButton from "components/common/ActionButton.svelte" - import CreateEditRowModal from "./modals/CreateEditRowModal.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" import Spinner from "components/common/Spinner.svelte" // New @@ -28,7 +18,6 @@ export let allowEditing = false export let loading = false - // New stuff export let theme = "alpine" let columnDefs = [] @@ -93,21 +82,6 @@ // `/${$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 handleUpdate = ({ detail }) => { - // data[detail.row] = detail.data - // updateRow(detail.data) - // }
@@ -159,4 +133,10 @@ margin-right: var(--spacing-m); margin-bottom: var(--spacing-xl); } + + :global(.ag-header-cell-text) { + font-family: Inter; + font-weight: 600; + color: var(--ink); + } diff --git a/packages/builder/src/components/backend/DataTable/TableHeader/TableHeader.svelte b/packages/builder/src/components/backend/DataTable/TableHeader/TableHeader.svelte index d24edccf0f..c308d133ba 100644 --- a/packages/builder/src/components/backend/DataTable/TableHeader/TableHeader.svelte +++ b/packages/builder/src/components/backend/DataTable/TableHeader/TableHeader.svelte @@ -40,19 +40,6 @@ modal.show() } - async function saveColumn() { - backendUiStore.update(state => { - backendUiStore.actions.tables.saveField({ - originalName, - field, - primaryDisplay, - }) - return state - }) - notifier.success(`Column ${field.name} saved successfully.`) - modal.hide() - } - onMount(() => { column.addEventListener("sortChanged", () => { sortDirection = column.getSort() @@ -64,15 +51,15 @@
{field.name} {#if enableSorting && sortDirection} - + {/if}
- + showCancelButton={false} + showConfirmButton={false} + title={`Edit Column: ${field.name}`}> +
@@ -88,10 +75,31 @@ diff --git a/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte index 1f315ebe71..7694a39951 100644 --- a/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte +++ b/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte @@ -20,9 +20,9 @@
- + showCancelButton={false} + showConfirmButton={false} + title={'Create Column'}> + diff --git a/packages/builder/src/components/backend/DataTable/popovers/CreateEditColumnPopover.svelte b/packages/builder/src/components/backend/DataTable/popovers/CreateEditColumnPopover.svelte index b10c30a154..3f0460c2ca 100644 --- a/packages/builder/src/components/backend/DataTable/popovers/CreateEditColumnPopover.svelte +++ b/packages/builder/src/components/backend/DataTable/popovers/CreateEditColumnPopover.svelte @@ -20,6 +20,7 @@ import ActionButton from "components/common/ActionButton.svelte" import DatePicker from "components/common/DatePicker.svelte" import LinkedRowSelector from "components/common/LinkedRowSelector.svelte" + import ConfirmDialog from "components/common/ConfirmDialog.svelte" import * as api from "../api" let fieldDefinitions = cloneDeep(FIELDS) @@ -37,6 +38,8 @@ let primaryDisplay = $backendUiStore.selectedTable.primaryDisplay == null || $backendUiStore.selectedTable.primaryDisplay === field.name + let confirmDeleteDialog + $: tableOptions = $backendUiStore.tables.filter( table => table._id !== $backendUiStore.draftTable._id ) @@ -54,6 +57,17 @@ onClosed() } + function deleteColumn() { + if (field.name === $backendUiStore.selectedTable.primaryDisplay) { + notifier.danger("You cannot delete the display column") + } else { + backendUiStore.actions.tables.deleteField(field) + notifier.success("Column deleted") + } + onClosed() + } + + function handleFieldConstraints(event) { const { type, constraints } = fieldDefinitions[ event.target.value.toUpperCase() @@ -75,6 +89,11 @@ field.constraints.presence = { allowEmpty: false } } } + + function confirmDelete() { + onClosed() + confirmDeleteDialog.show() + }
@@ -147,11 +166,20 @@ thin bind:value={field.fieldName} /> {/if} - +
+