From 4b57861e926ddd277026b28a610d19daf93b53df Mon Sep 17 00:00:00 2001 From: Alek Lefebvre Date: Thu, 22 Dec 2022 07:31:00 -0500 Subject: [PATCH 001/137] functionnal, need to make the ID row droppable and add visual feedback on where the column will be dropped --- mathesar_ui/src/api/tables.ts | 37 ++++++++++++++++ mathesar_ui/src/pages/table/TablePage.svelte | 2 +- mathesar_ui/src/stores/tables.ts | 9 ++++ .../src/systems/table-view/TableView.svelte | 24 ++++++----- .../systems/table-view/header/Header.svelte | 28 +++++++++++++ .../header/header-cell/HeaderCell.svelte | 42 ++++++++++--------- mathesar_ui/src/utils/tables.ts | 20 +++++++++ 7 files changed, 130 insertions(+), 32 deletions(-) create mode 100644 mathesar_ui/src/api/tables.ts diff --git a/mathesar_ui/src/api/tables.ts b/mathesar_ui/src/api/tables.ts new file mode 100644 index 0000000000..08fa1c7105 --- /dev/null +++ b/mathesar_ui/src/api/tables.ts @@ -0,0 +1,37 @@ +import type { PaginatedResponse } from '@mathesar/utils/api'; +import type { Column } from './tables/columns'; + +export type MinimalColumnDetails = Pick< + Column, + 'id' | 'name' | 'type' | 'type_options' | 'display_options' +>; + +export interface TableSettings { + /** This is the settings id, not the table id */ + id: number; + preview_settings: { + customized: boolean; + template: string; + }; + column_order: number[]; +} + +/** + * This is the GET response for: `/api/db/v0/tables//` + * + * TODO: Rename this to TableInstance + */ +export interface TableEntry { + id: number; + name: string; + schema: number; + import_verified: boolean; + data_files?: number[]; + columns: MinimalColumnDetails[]; + settings: TableSettings; +} + +/** + * This is the GET response for: `/api/db/v0/tables/` + */ +export type TablesList = PaginatedResponse; diff --git a/mathesar_ui/src/pages/table/TablePage.svelte b/mathesar_ui/src/pages/table/TablePage.svelte index 1fa88ed322..2c78e86e35 100644 --- a/mathesar_ui/src/pages/table/TablePage.svelte +++ b/mathesar_ui/src/pages/table/TablePage.svelte @@ -46,7 +46,7 @@
- +
diff --git a/mathesar_ui/src/stores/tables.ts b/mathesar_ui/src/stores/tables.ts index 00c060a5af..896daad63f 100644 --- a/mathesar_ui/src/stores/tables.ts +++ b/mathesar_ui/src/stores/tables.ts @@ -459,3 +459,12 @@ export function saveRecordSummaryTemplate( preview_settings: customized ? previewSettings : { customized }, }); } + +export function saveColumnOrder( + table: Pick, + columnOrder: TableSettings['column_order'], +): Promise { + return saveTableSettings(table, { + column_order: columnOrder + }); +} \ No newline at end of file diff --git a/mathesar_ui/src/systems/table-view/TableView.svelte b/mathesar_ui/src/systems/table-view/TableView.svelte index 1fc3feb538..af96d07c32 100644 --- a/mathesar_ui/src/systems/table-view/TableView.svelte +++ b/mathesar_ui/src/systems/table-view/TableView.svelte @@ -1,5 +1,5 @@ @@ -28,6 +52,7 @@ isControlCell let:htmlAttributes let:style + on:dragover={(e) => {e.preventDefault()}} >
@@ -45,6 +70,9 @@ on:mousedown={() => selection.onColumnSelectionStart(processedColumn)} on:mouseenter={() => selection.onMouseEnterColumnHeaderWhileSelection(processedColumn)} + on:dragstart={(e) => dragStart(e, processedColumn)} + on:drop={(e) => dropColumn(e, processedColumn)} + on:dragover={(e) => {e.preventDefault()}} />
diff --git a/mathesar_ui/src/systems/table-view/header/header-cell/HeaderCell.svelte b/mathesar_ui/src/systems/table-view/header/header-cell/HeaderCell.svelte index 53e7b21d27..631d28f167 100644 --- a/mathesar_ui/src/systems/table-view/header/header-cell/HeaderCell.svelte +++ b/mathesar_ui/src/systems/table-view/header/header-cell/HeaderCell.svelte @@ -37,26 +37,28 @@
- +
+ +
+ \ No newline at end of file diff --git a/mathesar_ui/src/systems/table-view/header/drag-and-drop/index.ts b/mathesar_ui/src/systems/table-view/header/drag-and-drop/index.ts new file mode 100644 index 0000000000..9dc98387d4 --- /dev/null +++ b/mathesar_ui/src/systems/table-view/header/drag-and-drop/index.ts @@ -0,0 +1,2 @@ +export { default as Draggable } from './Draggable.svelte'; +export { default as Droppable } from './Droppable.svelte'; diff --git a/mathesar_ui/src/systems/table-view/header/header-cell/HeaderCell.svelte b/mathesar_ui/src/systems/table-view/header/header-cell/HeaderCell.svelte index 631d28f167..53e7b21d27 100644 --- a/mathesar_ui/src/systems/table-view/header/header-cell/HeaderCell.svelte +++ b/mathesar_ui/src/systems/table-view/header/header-cell/HeaderCell.svelte @@ -37,28 +37,26 @@
-
- -
+
- \ No newline at end of file diff --git a/mathesar_ui/src/utils/tables.ts b/mathesar_ui/src/utils/tables.ts index 9b1858728f..c2612b6ab2 100644 --- a/mathesar_ui/src/utils/tables.ts +++ b/mathesar_ui/src/utils/tables.ts @@ -16,7 +16,10 @@ export function isTableImportConfirmationRequired( ); } -export function orderProcessedColumns(processedColumns: Map, table: Partial>):Map { +export function orderProcessedColumns( + processedColumns: Map, + table: Partial>, +): Map { const columns = [...processedColumns.values()]; const orderedColumns = new Map(); @@ -34,10 +37,10 @@ export function orderProcessedColumns(processedColumns: Map> + table: Partial>, ) { const allColumns = [...processedColumns.values()]; - let completeColumnOrder:number[] = []; + let completeColumnOrder: number[] = []; const { settings } = table; if (settings) { const { column_order: columnOrder } = settings; From bb79b20c7f0b94436c010750fb48f237bd77a05e Mon Sep 17 00:00:00 2001 From: Alek Lefebvre Date: Fri, 6 Jan 2023 13:38:22 -0500 Subject: [PATCH 013/137] link --- mathesar_ui/src/utils/tables.ts | 38 ++++++++++++++++----------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/mathesar_ui/src/utils/tables.ts b/mathesar_ui/src/utils/tables.ts index c2612b6ab2..e9134a97ba 100644 --- a/mathesar_ui/src/utils/tables.ts +++ b/mathesar_ui/src/utils/tables.ts @@ -16,25 +16,6 @@ export function isTableImportConfirmationRequired( ); } -export function orderProcessedColumns( - processedColumns: Map, - table: Partial>, -): Map { - const columns = [...processedColumns.values()]; - const orderedColumns = new Map(); - - const columnOrder = getColumnOrder(columns, table); - columnOrder.forEach((id) => { - const index = columns.map((column) => column.id).indexOf(id); - if (index !== -1) { - const orderColumn = columns.splice(index, 1)[0]; - orderedColumns.set(orderColumn.id, orderColumn); - } - }); - - return orderedColumns; -} - export function getColumnOrder( processedColumns: ProcessedColumn[], table: Partial>, @@ -55,3 +36,22 @@ export function getColumnOrder( return completeColumnOrder; } + +export function orderProcessedColumns( + processedColumns: Map, + table: Partial>, +): Map { + const columns = [...processedColumns.values()]; + const orderedColumns = new Map(); + + const columnOrder = getColumnOrder(columns, table); + columnOrder.forEach((id) => { + const index = columns.map((column) => column.id).indexOf(id); + if (index !== -1) { + const orderColumn = columns.splice(index, 1)[0]; + orderedColumns.set(orderColumn.id, orderColumn); + } + }); + + return orderedColumns; +} From 6de4dca0120fdacf2114897e12680569fc13ce9d Mon Sep 17 00:00:00 2001 From: Alek Lefebvre Date: Fri, 6 Jan 2023 13:55:34 -0500 Subject: [PATCH 014/137] fix type errors --- .../src/pages/record/TableWidget.svelte | 2 +- .../src/stores/table-data/tabularData.ts | 47 ++++++++++--------- .../src/systems/table-view/TableView.svelte | 2 +- .../systems/table-view/header/Header.svelte | 2 +- 4 files changed, 27 insertions(+), 26 deletions(-) diff --git a/mathesar_ui/src/pages/record/TableWidget.svelte b/mathesar_ui/src/pages/record/TableWidget.svelte index 1048ee4ef6..6273915f14 100644 --- a/mathesar_ui/src/pages/record/TableWidget.svelte +++ b/mathesar_ui/src/pages/record/TableWidget.svelte @@ -22,7 +22,7 @@ }); export let recordId: number; - export let table: Pick; + export let table: Pick; export let fkColumn: Pick; $: abstractTypesMap = $currentDbAbstractTypes.data; diff --git a/mathesar_ui/src/stores/table-data/tabularData.ts b/mathesar_ui/src/stores/table-data/tabularData.ts index ad4f412e8b..e7e7d3a520 100644 --- a/mathesar_ui/src/stores/table-data/tabularData.ts +++ b/mathesar_ui/src/stores/table-data/tabularData.ts @@ -106,29 +106,30 @@ export class TabularData { ); const table = get(currentTable); - - this.selection = new SheetSelection({ - getColumns: () => [...get(this.processedColumns).values()], - getColumnOrder: () => - getColumnOrder([...get(this.processedColumns).values()], table), - getRows: () => this.recordsData.getRecordRows(), - getMaxSelectionRowIndex: () => { - const totalCount = get(this.recordsData.totalCount) ?? 0; - const savedRecords = get(this.recordsData.savedRecords); - const newRecords = get(this.recordsData.newRecords); - const pagination = get(this.meta.pagination); - const { offset } = pagination; - const pageSize = pagination.size; - /** - * We are not subtracting 1 from the below maxRowIndex calculation - * inorder to account for the add-new-record placeholder row - */ - return ( - Math.min(pageSize, totalCount - offset, savedRecords.length) + - newRecords.length - ); - }, - }); + if (table) { + this.selection = new SheetSelection({ + getColumns: () => [...get(this.processedColumns).values()], + getColumnOrder: () => + getColumnOrder([...get(this.processedColumns).values()], table), + getRows: () => this.recordsData.getRecordRows(), + getMaxSelectionRowIndex: () => { + const totalCount = get(this.recordsData.totalCount) ?? 0; + const savedRecords = get(this.recordsData.savedRecords); + const newRecords = get(this.recordsData.newRecords); + const pagination = get(this.meta.pagination); + const { offset } = pagination; + const pageSize = pagination.size; + /** + * We are not subtracting 1 from the below maxRowIndex calculation + * inorder to account for the add-new-record placeholder row + */ + return ( + Math.min(pageSize, totalCount - offset, savedRecords.length) + + newRecords.length + ); + }, + }); + } this.isLoading = derived( [ diff --git a/mathesar_ui/src/systems/table-view/TableView.svelte b/mathesar_ui/src/systems/table-view/TableView.svelte index d428cb1bc0..a3d4d3de80 100644 --- a/mathesar_ui/src/systems/table-view/TableView.svelte +++ b/mathesar_ui/src/systems/table-view/TableView.svelte @@ -18,7 +18,7 @@ const tabularData = getTabularDataStoreFromContext(); export let context: 'page' | 'widget' = 'page'; - export let table: TableEntry; + export let table: Pick; $: usesVirtualList = context === 'page'; $: allowsDdlOperations = context === 'page'; diff --git a/mathesar_ui/src/systems/table-view/header/Header.svelte b/mathesar_ui/src/systems/table-view/header/Header.svelte index d955c80145..ecd078ce58 100644 --- a/mathesar_ui/src/systems/table-view/header/Header.svelte +++ b/mathesar_ui/src/systems/table-view/header/Header.svelte @@ -21,7 +21,7 @@ export let hasNewColumnButton = false; export let columnOrder: number[]; - export let table: TableEntry; + export let table: Pick; $: ({ selection, processedColumns } = $tabularData); $: ({ From d7f70922561f9ecb8235c17da6f842e959fe3d30 Mon Sep 17 00:00:00 2001 From: Alek Lefebvre Date: Fri, 6 Jan 2023 13:58:41 -0500 Subject: [PATCH 015/137] prettier --- mathesar_ui/src/systems/table-view/TableView.svelte | 2 +- mathesar_ui/src/systems/table-view/header/Header.svelte | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/mathesar_ui/src/systems/table-view/TableView.svelte b/mathesar_ui/src/systems/table-view/TableView.svelte index a3d4d3de80..dd41b60433 100644 --- a/mathesar_ui/src/systems/table-view/TableView.svelte +++ b/mathesar_ui/src/systems/table-view/TableView.svelte @@ -18,7 +18,7 @@ const tabularData = getTabularDataStoreFromContext(); export let context: 'page' | 'widget' = 'page'; - export let table: Pick; + export let table: Pick; $: usesVirtualList = context === 'page'; $: allowsDdlOperations = context === 'page'; diff --git a/mathesar_ui/src/systems/table-view/header/Header.svelte b/mathesar_ui/src/systems/table-view/header/Header.svelte index ecd078ce58..3580e651dd 100644 --- a/mathesar_ui/src/systems/table-view/header/Header.svelte +++ b/mathesar_ui/src/systems/table-view/header/Header.svelte @@ -21,7 +21,7 @@ export let hasNewColumnButton = false; export let columnOrder: number[]; - export let table: Pick; + export let table: Pick; $: ({ selection, processedColumns } = $tabularData); $: ({ From cf62dbfcc2d915f6b3909c5dc84c97a85f9bf323 Mon Sep 17 00:00:00 2001 From: Alek Lefebvre Date: Fri, 6 Jan 2023 14:12:01 -0500 Subject: [PATCH 016/137] typecheck --- mathesar_ui/src/pages/record/Widgets.svelte | 7 ++- .../src/stores/table-data/tabularData.ts | 50 +++++++++---------- 2 files changed, 30 insertions(+), 27 deletions(-) diff --git a/mathesar_ui/src/pages/record/Widgets.svelte b/mathesar_ui/src/pages/record/Widgets.svelte index 835a615846..b63b580af3 100644 --- a/mathesar_ui/src/pages/record/Widgets.svelte +++ b/mathesar_ui/src/pages/record/Widgets.svelte @@ -1,14 +1,17 @@ @@ -29,6 +38,7 @@ ; diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/formatted-input/FormattedInputCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/formatted-input/FormattedInputCell.svelte index bff819a81c..ab3516ee50 100644 --- a/mathesar_ui/src/components/cell-fabric/data-types/components/formatted-input/FormattedInputCell.svelte +++ b/mathesar_ui/src/components/cell-fabric/data-types/components/formatted-input/FormattedInputCell.svelte @@ -12,6 +12,11 @@ export let isIndependentOfSheet: $$Props['isIndependentOfSheet']; export let formatter: $$Props['formatter']; export let formatForDisplay: $$Props['formatForDisplay']; + + $: cssVariables = { + '--input-element-text-align': 'right', + ...($$restProps.cssVariables || {}), + }; diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/money/MoneyCellInput.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/money/MoneyCellInput.svelte index 15d68f034f..62f09095a4 100644 --- a/mathesar_ui/src/components/cell-fabric/data-types/components/money/MoneyCellInput.svelte +++ b/mathesar_ui/src/components/cell-fabric/data-types/components/money/MoneyCellInput.svelte @@ -25,12 +25,17 @@ childValue = getNewChildValue(newParentValue); } $: handleParentValueChange(parentValue); + $: cssVariables = { + '--input-element-text-align': 'right', + ...($$restProps.cssVariables || {}), + }; diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/number/NumberCellInput.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/number/NumberCellInput.svelte index 15d68f034f..62f09095a4 100644 --- a/mathesar_ui/src/components/cell-fabric/data-types/components/number/NumberCellInput.svelte +++ b/mathesar_ui/src/components/cell-fabric/data-types/components/number/NumberCellInput.svelte @@ -25,12 +25,17 @@ childValue = getNewChildValue(newParentValue); } $: handleParentValueChange(parentValue); + $: cssVariables = { + '--input-element-text-align': 'right', + ...($$restProps.cssVariables || {}), + }; diff --git a/mathesar_ui/src/layouts/LayoutWithHeader.svelte b/mathesar_ui/src/layouts/LayoutWithHeader.svelte index c3eb8ebee1..7e4a8afeac 100644 --- a/mathesar_ui/src/layouts/LayoutWithHeader.svelte +++ b/mathesar_ui/src/layouts/LayoutWithHeader.svelte @@ -1,17 +1,13 @@
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/record/RowActions.svelte b/mathesar_ui/src/systems/table-view/table-inspector/record/RowActions.svelte index d9e9288685..c5a1c3c895 100644 --- a/mathesar_ui/src/systems/table-view/table-inspector/record/RowActions.svelte +++ b/mathesar_ui/src/systems/table-view/table-inspector/record/RowActions.svelte @@ -4,7 +4,6 @@ Button, Icon, iconExternalLink, - iconLoading, } from '@mathesar/component-library'; import { iconDeleteMajor, iconRecord } from '@mathesar/icons'; import { confirmDelete } from '@mathesar/stores/confirmation'; diff --git a/mathesar_ui/src/types.ts b/mathesar_ui/src/types.ts new file mode 100644 index 0000000000..2d5ed0e7ae --- /dev/null +++ b/mathesar_ui/src/types.ts @@ -0,0 +1 @@ +export type CssVariablesObj = Record; diff --git a/mathesar_ui/src/utils/styles.ts b/mathesar_ui/src/utils/styles.ts new file mode 100644 index 0000000000..e3296b58b6 --- /dev/null +++ b/mathesar_ui/src/utils/styles.ts @@ -0,0 +1,10 @@ +import type { CssVariablesObj } from '@mathesar/types'; + +export function createStyleString(cssVariables: CssVariablesObj) { + const isCssVariable = (str: string) => str.indexOf('--') === 0; + + return Object.entries(cssVariables) + .filter((maybeCssVariable) => isCssVariable(maybeCssVariable[0])) + .map((cssVariable) => `${cssVariable[0]}: ${cssVariable[1]};`) + .join(''); +} From 1d78b6ff3a49bad8dc9e85e032b07c4f27c46fb2 Mon Sep 17 00:00:00 2001 From: SEGRR Date: Thu, 2 Feb 2023 23:26:11 +0530 Subject: [PATCH 031/137] issue solved: diplay message for 10 records #2378 --- .../RecordSelectorContent.svelte | 21 +++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/mathesar_ui/src/systems/record-selector/RecordSelectorContent.svelte b/mathesar_ui/src/systems/record-selector/RecordSelectorContent.svelte index 571b98650f..f044d47a56 100644 --- a/mathesar_ui/src/systems/record-selector/RecordSelectorContent.svelte +++ b/mathesar_ui/src/systems/record-selector/RecordSelectorContent.svelte @@ -134,8 +134,8 @@ {/if} {/if} - {#if hasSearchQueries} -
+
+ {#if hasSearchQueries} -
- {/if} + {/if} + {#if records.length === 10 && isInitialized} +

+ {#if hasSearchQueries} + The 10 best matches are shown. Continue filtering to see more. + {:else}The first 10 records are shown. Filter to see more.{/if} +

+ {/if} +
From e4ab391550392c8b1840caa8af97cddea60ed270 Mon Sep 17 00:00:00 2001 From: Rajat Vijay Date: Fri, 3 Feb 2023 03:26:34 +0000 Subject: [PATCH 032/137] fix spread order --- .../components/formatted-input/FormattedInputCell.svelte | 2 +- .../data-types/components/money/MoneyCellInput.svelte | 2 +- .../data-types/components/number/NumberCellInput.svelte | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/formatted-input/FormattedInputCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/formatted-input/FormattedInputCell.svelte index ab3516ee50..7c0b6c4e83 100644 --- a/mathesar_ui/src/components/cell-fabric/data-types/components/formatted-input/FormattedInputCell.svelte +++ b/mathesar_ui/src/components/cell-fabric/data-types/components/formatted-input/FormattedInputCell.svelte @@ -14,8 +14,8 @@ export let formatForDisplay: $$Props['formatForDisplay']; $: cssVariables = { - '--input-element-text-align': 'right', ...($$restProps.cssVariables || {}), + '--input-element-text-align': 'right', }; diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/money/MoneyCellInput.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/money/MoneyCellInput.svelte index 62f09095a4..af2839aa40 100644 --- a/mathesar_ui/src/components/cell-fabric/data-types/components/money/MoneyCellInput.svelte +++ b/mathesar_ui/src/components/cell-fabric/data-types/components/money/MoneyCellInput.svelte @@ -26,8 +26,8 @@ } $: handleParentValueChange(parentValue); $: cssVariables = { - '--input-element-text-align': 'right', ...($$restProps.cssVariables || {}), + '--input-element-text-align': 'right', }; diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/number/NumberCellInput.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/number/NumberCellInput.svelte index 62f09095a4..af2839aa40 100644 --- a/mathesar_ui/src/components/cell-fabric/data-types/components/number/NumberCellInput.svelte +++ b/mathesar_ui/src/components/cell-fabric/data-types/components/number/NumberCellInput.svelte @@ -26,8 +26,8 @@ } $: handleParentValueChange(parentValue); $: cssVariables = { - '--input-element-text-align': 'right', ...($$restProps.cssVariables || {}), + '--input-element-text-align': 'right', }; From 6771055f9c5f2fff4b8da791a50eafe69da4530f Mon Sep 17 00:00:00 2001 From: Alek Lefebvre Date: Sun, 5 Feb 2023 09:53:03 -0500 Subject: [PATCH 033/137] can't drag column if not completely select + indicator styling --- mathesar_ui/src/components/sheet/SheetSelection.ts | 10 +++------- .../table-view/header/drag-and-drop/Droppable.svelte | 6 +++++- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/mathesar_ui/src/components/sheet/SheetSelection.ts b/mathesar_ui/src/components/sheet/SheetSelection.ts index afe1103430..0f45344e1c 100644 --- a/mathesar_ui/src/components/sheet/SheetSelection.ts +++ b/mathesar_ui/src/components/sheet/SheetSelection.ts @@ -524,13 +524,9 @@ export default class SheetSelection< } onColumnSelectionStart(column: Column): boolean { - if ( - !isColumnSelected( - new ImmutableSet(this.selectedCells.getValues()), - new ImmutableSet(this.columnsSelectedWhenTheTableIsEmpty.getValues()), - column, - ) - ) { + console.log("is completely selected") + console.log(this.isCompleteColumnSelected(column)) + if (!this.isCompleteColumnSelected(column)) { this.activateCell({ rowIndex: 0 }, { id: column.id }); const rows = this.getRows(); diff --git a/mathesar_ui/src/systems/table-view/header/drag-and-drop/Droppable.svelte b/mathesar_ui/src/systems/table-view/header/drag-and-drop/Droppable.svelte index 79d33562f8..2b6794da70 100644 --- a/mathesar_ui/src/systems/table-view/header/drag-and-drop/Droppable.svelte +++ b/mathesar_ui/src/systems/table-view/header/drag-and-drop/Droppable.svelte @@ -10,6 +10,10 @@ function dragLeave() { isDraggedOverCounter -= 1; } + + function dragDropped() { + isDraggedOverCounter = 0; + }
:global(div) { - border-right: 1px solid blue !important; + border-right: 0.3rem solid var(--sky-700) !important; } From 47d7aabd1f5a42dca4b621d959be61f1afabdc00 Mon Sep 17 00:00:00 2001 From: IamEzio Date: Tue, 7 Feb 2023 08:22:48 +0530 Subject: [PATCH 034/137] passed num_tables as prop --- mathesar_ui/src/pages/schema/SchemaOverview.svelte | 2 +- mathesar_ui/src/pages/schema/SchemaPage.svelte | 2 +- mathesar_ui/src/pages/schema/TableSkeleton.svelte | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/mathesar_ui/src/pages/schema/SchemaOverview.svelte b/mathesar_ui/src/pages/schema/SchemaOverview.svelte index 4f1c5f7287..3e912472ca 100644 --- a/mathesar_ui/src/pages/schema/SchemaOverview.svelte +++ b/mathesar_ui/src/pages/schema/SchemaOverview.svelte @@ -30,7 +30,7 @@ {#if isTablesLoading} - + {:else if tablesMap.size} {:else} diff --git a/mathesar_ui/src/pages/schema/SchemaPage.svelte b/mathesar_ui/src/pages/schema/SchemaPage.svelte index b72b9ed410..232865877b 100644 --- a/mathesar_ui/src/pages/schema/SchemaPage.svelte +++ b/mathesar_ui/src/pages/schema/SchemaPage.svelte @@ -124,7 +124,7 @@ {:else if activeTab?.id === 'tables'}
{#if isTablesLoading} - + {:else} {/if} diff --git a/mathesar_ui/src/pages/schema/TableSkeleton.svelte b/mathesar_ui/src/pages/schema/TableSkeleton.svelte index 9e65ba41eb..62adce3f25 100644 --- a/mathesar_ui/src/pages/schema/TableSkeleton.svelte +++ b/mathesar_ui/src/pages/schema/TableSkeleton.svelte @@ -1,11 +1,11 @@
- {#each skeletalTables as skeletalTable} + {#each Array(num_tables) as _, index (index)}
From f265c639b712655964eff9347bc2564b062ac82e Mon Sep 17 00:00:00 2001 From: IamEzio Date: Tue, 7 Feb 2023 17:05:09 +0530 Subject: [PATCH 035/137] added spacing in schema overview tab --- mathesar_ui/src/pages/schema/SchemaOverview.svelte | 1 + 1 file changed, 1 insertion(+) diff --git a/mathesar_ui/src/pages/schema/SchemaOverview.svelte b/mathesar_ui/src/pages/schema/SchemaOverview.svelte index 4f1c5f7287..970b240a34 100644 --- a/mathesar_ui/src/pages/schema/SchemaOverview.svelte +++ b/mathesar_ui/src/pages/schema/SchemaOverview.svelte @@ -107,6 +107,7 @@ } .tables { flex-basis: 65%; + padding-bottom: 20px; } .explorations { flex-basis: 35%; From 45cc75b4a67aa94bab3f9f9bf2af6dce4e53b7e9 Mon Sep 17 00:00:00 2001 From: IamEzio Date: Tue, 7 Feb 2023 17:18:13 +0530 Subject: [PATCH 036/137] added padding bottom in tables list --- mathesar_ui/src/pages/schema/SchemaOverview.svelte | 1 - mathesar_ui/src/pages/schema/TablesList.svelte | 5 ++++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/mathesar_ui/src/pages/schema/SchemaOverview.svelte b/mathesar_ui/src/pages/schema/SchemaOverview.svelte index 970b240a34..4f1c5f7287 100644 --- a/mathesar_ui/src/pages/schema/SchemaOverview.svelte +++ b/mathesar_ui/src/pages/schema/SchemaOverview.svelte @@ -107,7 +107,6 @@ } .tables { flex-basis: 65%; - padding-bottom: 20px; } .explorations { flex-basis: 35%; diff --git a/mathesar_ui/src/pages/schema/TablesList.svelte b/mathesar_ui/src/pages/schema/TablesList.svelte index 3926d19fa2..308363407a 100644 --- a/mathesar_ui/src/pages/schema/TablesList.svelte +++ b/mathesar_ui/src/pages/schema/TablesList.svelte @@ -10,7 +10,7 @@ export let schema: SchemaEntry; -
+
{#each tables as table (table.id)} {:else} @@ -27,6 +27,9 @@ --minimum-item-width: 18rem; // align all child items to the left } + .tables-list { + padding-bottom: 20px; + } @supports (width: min(var(--minimum-item-width), 100%)) { .container { grid-template-columns: repeat( From a602d28cfb8151da395d7054ebfd85e9bc695178 Mon Sep 17 00:00:00 2001 From: Rajat Vijay Date: Tue, 7 Feb 2023 12:43:02 +0000 Subject: [PATCH 037/137] renamed createStyleString to makeStyleStringFromCssVariables --- .../src/component-library/text-input/TextInput.svelte | 4 ++-- mathesar_ui/src/layouts/LayoutWithHeader.svelte | 6 ++++-- mathesar_ui/src/utils/styles.ts | 2 +- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/mathesar_ui/src/component-library/text-input/TextInput.svelte b/mathesar_ui/src/component-library/text-input/TextInput.svelte index d3bfaaf477..7eb2fbaab3 100644 --- a/mathesar_ui/src/component-library/text-input/TextInput.svelte +++ b/mathesar_ui/src/component-library/text-input/TextInput.svelte @@ -1,6 +1,6 @@
diff --git a/mathesar_ui/src/utils/styles.ts b/mathesar_ui/src/utils/styles.ts index e3296b58b6..c34650f514 100644 --- a/mathesar_ui/src/utils/styles.ts +++ b/mathesar_ui/src/utils/styles.ts @@ -1,6 +1,6 @@ import type { CssVariablesObj } from '@mathesar/types'; -export function createStyleString(cssVariables: CssVariablesObj) { +export function makeStyleStringFromCssVariables(cssVariables: CssVariablesObj) { const isCssVariable = (str: string) => str.indexOf('--') === 0; return Object.entries(cssVariables) From 5b0f9ff59e550ea13e6236bd7b274a9e9309c8ca Mon Sep 17 00:00:00 2001 From: Rajat Vijay Date: Tue, 7 Feb 2023 12:44:35 +0000 Subject: [PATCH 038/137] ability to override --input-element-text-align --- .../components/formatted-input/FormattedInputCell.svelte | 2 +- .../data-types/components/money/MoneyCellInput.svelte | 2 +- .../data-types/components/number/NumberCellInput.svelte | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/formatted-input/FormattedInputCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/formatted-input/FormattedInputCell.svelte index 7c0b6c4e83..ab3516ee50 100644 --- a/mathesar_ui/src/components/cell-fabric/data-types/components/formatted-input/FormattedInputCell.svelte +++ b/mathesar_ui/src/components/cell-fabric/data-types/components/formatted-input/FormattedInputCell.svelte @@ -14,8 +14,8 @@ export let formatForDisplay: $$Props['formatForDisplay']; $: cssVariables = { - ...($$restProps.cssVariables || {}), '--input-element-text-align': 'right', + ...($$restProps.cssVariables || {}), }; diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/money/MoneyCellInput.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/money/MoneyCellInput.svelte index af2839aa40..62f09095a4 100644 --- a/mathesar_ui/src/components/cell-fabric/data-types/components/money/MoneyCellInput.svelte +++ b/mathesar_ui/src/components/cell-fabric/data-types/components/money/MoneyCellInput.svelte @@ -26,8 +26,8 @@ } $: handleParentValueChange(parentValue); $: cssVariables = { - ...($$restProps.cssVariables || {}), '--input-element-text-align': 'right', + ...($$restProps.cssVariables || {}), }; diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/number/NumberCellInput.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/number/NumberCellInput.svelte index af2839aa40..62f09095a4 100644 --- a/mathesar_ui/src/components/cell-fabric/data-types/components/number/NumberCellInput.svelte +++ b/mathesar_ui/src/components/cell-fabric/data-types/components/number/NumberCellInput.svelte @@ -26,8 +26,8 @@ } $: handleParentValueChange(parentValue); $: cssVariables = { - ...($$restProps.cssVariables || {}), '--input-element-text-align': 'right', + ...($$restProps.cssVariables || {}), }; From e099c24a29e2505795a40618e14780926a58290c Mon Sep 17 00:00:00 2001 From: Rajat Vijay Date: Tue, 7 Feb 2023 12:59:48 +0000 Subject: [PATCH 039/137] extracted common function for mergeStyleString --- .../component-library/text-input/TextInput.svelte | 9 +++++---- mathesar_ui/src/types.ts | 2 ++ mathesar_ui/src/utils/styles.ts | 12 ++++++++++++ mathesar_ui/src/utils/typeUtils.ts | 6 ++++++ 4 files changed, 25 insertions(+), 4 deletions(-) diff --git a/mathesar_ui/src/component-library/text-input/TextInput.svelte b/mathesar_ui/src/component-library/text-input/TextInput.svelte index 7eb2fbaab3..6041fb65fa 100644 --- a/mathesar_ui/src/component-library/text-input/TextInput.svelte +++ b/mathesar_ui/src/component-library/text-input/TextInput.svelte @@ -1,6 +1,9 @@ diff --git a/mathesar_ui/src/types.ts b/mathesar_ui/src/types.ts index 2d5ed0e7ae..a2cf4fea92 100644 --- a/mathesar_ui/src/types.ts +++ b/mathesar_ui/src/types.ts @@ -1 +1,3 @@ export type CssVariablesObj = Record; + +export type Truthy = T extends false | '' | 0 | null | undefined ? never : T; // from lodash \ No newline at end of file diff --git a/mathesar_ui/src/utils/styles.ts b/mathesar_ui/src/utils/styles.ts index c34650f514..529ca4d089 100644 --- a/mathesar_ui/src/utils/styles.ts +++ b/mathesar_ui/src/utils/styles.ts @@ -1,4 +1,5 @@ import type { CssVariablesObj } from '@mathesar/types'; +import { truthy } from './typeUtils'; export function makeStyleStringFromCssVariables(cssVariables: CssVariablesObj) { const isCssVariable = (str: string) => str.indexOf('--') === 0; @@ -8,3 +9,14 @@ export function makeStyleStringFromCssVariables(cssVariables: CssVariablesObj) { .map((cssVariable) => `${cssVariable[0]}: ${cssVariable[1]};`) .join(''); } + +export function mergeStyleStrings(...args: (string | undefined)[]) { + return args.filter(truthy).map((styleString) => { + const trimmedStyleString = styleString.trim(); + if (trimmedStyleString.endsWith(";")) { + return trimmedStyleString; + } else { + return trimmedStyleString + ";" + } + }).join("") +} \ No newline at end of file diff --git a/mathesar_ui/src/utils/typeUtils.ts b/mathesar_ui/src/utils/typeUtils.ts index 2ba2936818..e9bc20a094 100644 --- a/mathesar_ui/src/utils/typeUtils.ts +++ b/mathesar_ui/src/utils/typeUtils.ts @@ -1,3 +1,4 @@ +import type { Truthy } from '@mathesar/types'; import { MissingExhaustiveConditionError } from './errors'; /** @@ -7,3 +8,8 @@ import { MissingExhaustiveConditionError } from './errors'; export function assertExhaustive(value: never): never { throw new MissingExhaustiveConditionError(value); } + + +export function truthy(value: T): value is Truthy { + return !!value; +} \ No newline at end of file From 136c77edebc772ee32e605b04b86797fc074cdd8 Mon Sep 17 00:00:00 2001 From: Rajat Vijay Date: Tue, 7 Feb 2023 13:04:11 +0000 Subject: [PATCH 040/137] lint fixes --- mathesar_ui/src/types.ts | 2 +- mathesar_ui/src/utils/styles.ts | 20 +++++++++++--------- mathesar_ui/src/utils/typeUtils.ts | 3 +-- 3 files changed, 13 insertions(+), 12 deletions(-) diff --git a/mathesar_ui/src/types.ts b/mathesar_ui/src/types.ts index a2cf4fea92..930c2f6493 100644 --- a/mathesar_ui/src/types.ts +++ b/mathesar_ui/src/types.ts @@ -1,3 +1,3 @@ export type CssVariablesObj = Record; -export type Truthy = T extends false | '' | 0 | null | undefined ? never : T; // from lodash \ No newline at end of file +export type Truthy = T extends false | '' | 0 | null | undefined ? never : T; // from lodash diff --git a/mathesar_ui/src/utils/styles.ts b/mathesar_ui/src/utils/styles.ts index 529ca4d089..32dd033a72 100644 --- a/mathesar_ui/src/utils/styles.ts +++ b/mathesar_ui/src/utils/styles.ts @@ -11,12 +11,14 @@ export function makeStyleStringFromCssVariables(cssVariables: CssVariablesObj) { } export function mergeStyleStrings(...args: (string | undefined)[]) { - return args.filter(truthy).map((styleString) => { - const trimmedStyleString = styleString.trim(); - if (trimmedStyleString.endsWith(";")) { - return trimmedStyleString; - } else { - return trimmedStyleString + ";" - } - }).join("") -} \ No newline at end of file + return args + .filter(truthy) + .map((styleString) => { + const trimmedStyleString = styleString.trim(); + if (trimmedStyleString.endsWith(';')) { + return trimmedStyleString; + } + return `${trimmedStyleString};`; + }) + .join(''); +} diff --git a/mathesar_ui/src/utils/typeUtils.ts b/mathesar_ui/src/utils/typeUtils.ts index e9bc20a094..efd609fc02 100644 --- a/mathesar_ui/src/utils/typeUtils.ts +++ b/mathesar_ui/src/utils/typeUtils.ts @@ -9,7 +9,6 @@ export function assertExhaustive(value: never): never { throw new MissingExhaustiveConditionError(value); } - export function truthy(value: T): value is Truthy { return !!value; -} \ No newline at end of file +} From 27e5efed1479a4a8f4458c1ece593b56a0b13672 Mon Sep 17 00:00:00 2001 From: Rajat Vijay Date: Tue, 7 Feb 2023 13:11:37 +0000 Subject: [PATCH 041/137] lint fixes --- mathesar_ui/src/utils/styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/mathesar_ui/src/utils/styles.ts b/mathesar_ui/src/utils/styles.ts index 32dd033a72..3879ef5bdf 100644 --- a/mathesar_ui/src/utils/styles.ts +++ b/mathesar_ui/src/utils/styles.ts @@ -18,7 +18,7 @@ export function mergeStyleStrings(...args: (string | undefined)[]) { if (trimmedStyleString.endsWith(';')) { return trimmedStyleString; } - return `${trimmedStyleString};`; + return `${trimmedStyleString};`; }) .join(''); } From 9cd476f86e2168de3b358759cd73db4e767bb132 Mon Sep 17 00:00:00 2001 From: IamEzio Date: Wed, 8 Feb 2023 08:33:38 +0530 Subject: [PATCH 042/137] fixed linting issues --- mathesar_ui/src/pages/schema/SchemaOverview.svelte | 2 +- mathesar_ui/src/pages/schema/SchemaPage.svelte | 2 +- mathesar_ui/src/pages/schema/TableSkeleton.svelte | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/mathesar_ui/src/pages/schema/SchemaOverview.svelte b/mathesar_ui/src/pages/schema/SchemaOverview.svelte index 3e912472ca..24e32ff755 100644 --- a/mathesar_ui/src/pages/schema/SchemaOverview.svelte +++ b/mathesar_ui/src/pages/schema/SchemaOverview.svelte @@ -30,7 +30,7 @@ {#if isTablesLoading} - + {:else if tablesMap.size} {:else} diff --git a/mathesar_ui/src/pages/schema/SchemaPage.svelte b/mathesar_ui/src/pages/schema/SchemaPage.svelte index 232865877b..4f9e987992 100644 --- a/mathesar_ui/src/pages/schema/SchemaPage.svelte +++ b/mathesar_ui/src/pages/schema/SchemaPage.svelte @@ -124,7 +124,7 @@ {:else if activeTab?.id === 'tables'}
{#if isTablesLoading} - + {:else} {/if} diff --git a/mathesar_ui/src/pages/schema/TableSkeleton.svelte b/mathesar_ui/src/pages/schema/TableSkeleton.svelte index 62adce3f25..e8eec20c2c 100644 --- a/mathesar_ui/src/pages/schema/TableSkeleton.svelte +++ b/mathesar_ui/src/pages/schema/TableSkeleton.svelte @@ -1,11 +1,11 @@
- {#each Array(num_tables) as _, index (index)} + {#each Array(numTables) as _, index (index)}
From dd3e66dabacff9172f69d8a8c448067e0edc651b Mon Sep 17 00:00:00 2001 From: aagman Date: Wed, 8 Feb 2023 21:33:37 +0530 Subject: [PATCH 043/137] add delete access policy --- mathesar/api/db/permissions/records.py | 2 +- mathesar/api/ui/permissions/ui_records.py | 65 ----------------------- mathesar/api/ui/viewsets/records.py | 4 +- mathesar/tests/api/test_record_api.py | 6 +-- 4 files changed, 6 insertions(+), 71 deletions(-) delete mode 100644 mathesar/api/ui/permissions/ui_records.py diff --git a/mathesar/api/db/permissions/records.py b/mathesar/api/db/permissions/records.py index e4747789fa..ed5895d115 100644 --- a/mathesar/api/db/permissions/records.py +++ b/mathesar/api/db/permissions/records.py @@ -21,7 +21,7 @@ class RecordAccessPolicy(AccessPolicy): 'condition_expression': ['(is_superuser or is_table_viewer)'] }, { - 'action': ['destroy', 'update', 'partial_update', 'create'], + 'action': ['destroy', 'update', 'partial_update', 'create', 'delete'], 'principal': '*', 'effect': 'allow', 'condition_expression': ['(is_superuser or is_table_editor)'] diff --git a/mathesar/api/ui/permissions/ui_records.py b/mathesar/api/ui/permissions/ui_records.py deleted file mode 100644 index ff8eb8a672..0000000000 --- a/mathesar/api/ui/permissions/ui_records.py +++ /dev/null @@ -1,65 +0,0 @@ -from rest_access_policy import AccessPolicy - -from mathesar.api.utils import get_table_or_404 -from mathesar.models.users import DatabaseRole, Role, SchemaRole - - -class RecordAccessPolicy(AccessPolicy): - """ - Anyone can view a Record as long as they are a superuser or have - at least a Viewer access to the Schema or the Database of the Table. - The permissions trickle down, so if someone has a Viewer Access for a Database - They automatically become a Schema Viewer - Refer https://wiki.mathesar.org/en/product/specs/users-permissions#database-permissions - Only superuser or schema/database Manager/Editor can delete/modify/create a Record - """ - statements = [ - { - 'action': ['list', 'retrieve'], - 'principal': '*', - 'effect': 'allow', - 'condition_expression': ['(is_superuser or is_table_viewer)'] - }, - { - 'action': ['update', 'partial_update', 'create', 'delete'], - 'principal': '*', - 'effect': 'allow', - 'condition_expression': ['(is_superuser or is_table_editor)'] - }, - ] - - def is_table_viewer(self, request, view, action): - # Record access control is based on Schema and Database Roles as of now - # TODO Include Table Role based access when Table Roles are introduced - table = get_table_or_404(view.kwargs['table_pk']) - allowed_roles = (Role.MANAGER.value, Role.EDITOR.value, Role.VIEWER.value) - - is_schema_viewer = SchemaRole.objects.filter( - user=request.user, - schema=table.schema, - role__in=allowed_roles - ).exists() - is_db_viewer = DatabaseRole.objects.filter( - user=request.user, - database=table.schema.database, - role__in=allowed_roles - ).exists() - return is_db_viewer or is_schema_viewer - - def is_table_editor(self, request, view, action): - # Record access control is based on Schema and Database Roles as of now - # TODO Include Table Role based access when Table Roles are introduced - table = get_table_or_404(view.kwargs['table_pk']) - allowed_roles = (Role.MANAGER.value, Role.EDITOR.value) - - is_schema_manager = SchemaRole.objects.filter( - user=request.user, - schema=table.schema, - role__in=allowed_roles - ).exists() - is_db_manager = DatabaseRole.objects.filter( - user=request.user, - database=table.schema.database, - role__in=allowed_roles - ).exists() - return is_db_manager or is_schema_manager diff --git a/mathesar/api/ui/viewsets/records.py b/mathesar/api/ui/viewsets/records.py index 89c464c9ee..e59a1f9ece 100644 --- a/mathesar/api/ui/viewsets/records.py +++ b/mathesar/api/ui/viewsets/records.py @@ -5,7 +5,7 @@ from rest_framework.decorators import action from sqlalchemy.exc import IntegrityError -from mathesar.api.ui.permissions.ui_records import RecordAccessPolicy +from mathesar.api.db.permissions.records import RecordAccessPolicy import mathesar.api.exceptions.database_exceptions.exceptions as database_api_exceptions from mathesar.api.utils import get_table_or_404 @@ -18,7 +18,7 @@ class RecordViewSet(AccessViewSetMixin, viewsets.GenericViewSet): def get_queryset(self): return Table.objects.all().order_by('-created_at') - @action(methods=['delete'], detail=False) + @action(methods=['post'], detail=False) def delete(self, request, table_pk=None): table = get_table_or_404(table_pk) pks = request.data.get("pks") diff --git a/mathesar/tests/api/test_record_api.py b/mathesar/tests/api/test_record_api.py index ed0eb58c9f..a752bea0b3 100644 --- a/mathesar/tests/api/test_record_api.py +++ b/mathesar/tests/api/test_record_api.py @@ -1158,7 +1158,7 @@ def test_record_bulk_delete(create_patents_table, client): 'pks': record_ids } - response = client.delete(f'/api/ui/v0/tables/{table.id}/records/delete/', data=data) + response = client.post(f'/api/ui/v0/tables/{table.id}/records/delete/', data=data) assert response.status_code == 204 assert len(table.get_records()) == original_num_records - len(record_ids) @@ -1171,7 +1171,7 @@ def test_record_bulk_delete_fkey_violation(library_ma_tables, client): 'pks': record_ids } - response = client.delete(f'/api/ui/v0/tables/{publications.id}/records/delete/', data=data) + response = client.post(f'/api/ui/v0/tables/{publications.id}/records/delete/', data=data) assert response.status_code == 400 response_exception = response.json()[0] assert response_exception['code'] == ErrorCodes.ForeignKeyViolation.value @@ -1196,7 +1196,7 @@ def test_record_bulk_delete_atomicity(library_ma_tables, client): 'pks': record_ids } - response = client.delete(f'/api/ui/v0/tables/{publications.id}/records/delete/', data=data) + response = client.post(f'/api/ui/v0/tables/{publications.id}/records/delete/', data=data) assert response.status_code == 400 response_exception = response.json()[0] assert response_exception['code'] == ErrorCodes.ForeignKeyViolation.value From 6550344df2393f2afad7f52d619f7888708159f4 Mon Sep 17 00:00:00 2001 From: Alek Lefebvre Date: Thu, 9 Feb 2023 22:21:00 -0500 Subject: [PATCH 044/137] drag on right or left side based on column position + draggable should cover whole cell --- .../systems/table-view/header/Header.svelte | 93 +++++++++++-------- .../header/drag-and-drop/Draggable.svelte | 18 +++- .../header/drag-and-drop/Droppable.svelte | 26 +++++- .../header/header-cell/HeaderCell.svelte | 4 +- 4 files changed, 95 insertions(+), 46 deletions(-) diff --git a/mathesar_ui/src/systems/table-view/header/Header.svelte b/mathesar_ui/src/systems/table-view/header/Header.svelte index a19a1bce89..338b41055a 100644 --- a/mathesar_ui/src/systems/table-view/header/Header.svelte +++ b/mathesar_ui/src/systems/table-view/header/Header.svelte @@ -34,13 +34,11 @@ $columnsSelectedWhenTheTableIsEmpty, ); - function dropColumn(e: DragEvent, columnDroppedOn?: ProcessedColumn) { - // Early exit if a column is dropped in the same place. - // Should only be done for single column if non-continuous selection is allowed. - if (selectedColumnIds.length > 0 && columnDroppedOn && selectedColumnIds[0] == columnDroppedOn.id) { - return; - } + let locationOfFirstDraggedColumn: number | undefined = undefined; + let selectedColumnIdsOrdered: number[] = []; + let newColumnOrder: number[] = []; + function dragColumn(e: DragEvent) { columnOrder = columnOrder ?? []; // Keep only IDs for which the column exists for (const columnId of $processedColumns.keys()) { @@ -49,12 +47,7 @@ } } - let locationOfFirstDraggedColumn: number | undefined = undefined; - - const selectedColumnIdsOrdered: number[] = []; - // Remove selected column IDs and keep their order - const newColumnOrder: number[] = []; for (const id of columnOrder) { if (selectedColumnIds.includes(id)) { selectedColumnIdsOrdered.push(id); @@ -65,12 +58,18 @@ newColumnOrder.push(id); } } + } + + function dropColumn(e: DragEvent, columnDroppedOn?: ProcessedColumn) { + // Early exit if a column is dropped in the same place. + // Should only be done for single column if non-continuous selection is allowed. + if (selectedColumnIds.length > 0 && columnDroppedOn && selectedColumnIds[0] == columnDroppedOn.id) { + return; + } // Insert selected column IDs after the column where they are dropped // if that column is to the right, else insert it before if (columnDroppedOn) { - console.log(locationOfFirstDraggedColumn); - console.log(columnOrder.indexOf(columnDroppedOn.id)) if (locationOfFirstDraggedColumn && locationOfFirstDraggedColumn < columnOrder.indexOf(columnDroppedOn.id)) { newColumnOrder.splice( columnOrder.indexOf(columnDroppedOn.id) + 1, @@ -90,6 +89,12 @@ } void saveColumnOrder(table, newColumnOrder); + + // Reset draga information + locationOfFirstDraggedColumn = undefined; + selectedColumnIdsOrdered = []; + newColumnOrder = []; + console.log(locationOfFirstDraggedColumn); } @@ -104,6 +109,8 @@ dropColumn(e)} on:dragover={(e) => e.preventDefault()} + locationOfFirstDraggedColumn={0} + columnLocation={-1} >
@@ -111,34 +118,42 @@ {#each [...$processedColumns] as [columnId, processedColumn] (columnId)} - - dropColumn(e, processedColumn)}> -
- - selection.onColumnSelectionStart(processedColumn)} - on:mouseenter={() => - selection.onMouseEnterColumnHeaderWhileSelection( +
+ dragColumn(e)} + isSelected={isColumnSelected( + $selectedCells, + $columnsSelectedWhenTheTableIsEmpty, + processedColumn, + )} + selectionInProgress={$selectionInProgress} + > + dropColumn(e, processedColumn)} + on:dragover={(e) => e.preventDefault()} + locationOfFirstDraggedColumn={locationOfFirstDraggedColumn} + columnLocation={columnOrder.indexOf(columnId)} + > +
+ - -
- - + on:mousedown={() => + selection.onColumnSelectionStart(processedColumn)} + on:mouseenter={() => + selection.onMouseEnterColumnHeaderWhileSelection( + processedColumn, + )} + /> + +
+ + +
{/each} diff --git a/mathesar_ui/src/systems/table-view/header/drag-and-drop/Draggable.svelte b/mathesar_ui/src/systems/table-view/header/drag-and-drop/Draggable.svelte index 5f0ad82554..9e14379beb 100644 --- a/mathesar_ui/src/systems/table-view/header/drag-and-drop/Draggable.svelte +++ b/mathesar_ui/src/systems/table-view/header/drag-and-drop/Draggable.svelte @@ -1,8 +1,24 @@ -
+
+ + diff --git a/mathesar_ui/src/systems/table-view/header/drag-and-drop/Droppable.svelte b/mathesar_ui/src/systems/table-view/header/drag-and-drop/Droppable.svelte index 2b6794da70..a8ebab3b82 100644 --- a/mathesar_ui/src/systems/table-view/header/drag-and-drop/Droppable.svelte +++ b/mathesar_ui/src/systems/table-view/header/drag-and-drop/Droppable.svelte @@ -1,6 +1,12 @@
e.preventDefault()} on:dragenter={(e) => dragEnter(e)} @@ -30,8 +42,12 @@ diff --git a/mathesar_ui/src/systems/table-view/header/header-cell/HeaderCell.svelte b/mathesar_ui/src/systems/table-view/header/header-cell/HeaderCell.svelte index e8888d8d61..6dcc3784d8 100644 --- a/mathesar_ui/src/systems/table-view/header/header-cell/HeaderCell.svelte +++ b/mathesar_ui/src/systems/table-view/header/header-cell/HeaderCell.svelte @@ -36,7 +36,7 @@
- +
diff --git a/mathesar_ui/src/pages/admin-users/UserRow.svelte b/mathesar_ui/src/pages/admin-users/UserRow.svelte index a7ac0c02f3..21f321755c 100644 --- a/mathesar_ui/src/pages/admin-users/UserRow.svelte +++ b/mathesar_ui/src/pages/admin-users/UserRow.svelte @@ -6,13 +6,24 @@ export let user: User; + let hoveringTrigger = false; + // TODO: Update the icon $: userTypeIcon = user.is_superuser ? iconUser : iconUser; $: userTypeText = user.is_superuser ? 'Admin' : 'Custom'; $: showUserDetailedInfo = user.email || user.full_name; - + { + hoveringTrigger = true; + }} + on:mouseleave={() => { + hoveringTrigger = false; + }} + >