From b4b1e5a48681eff5c9323e17b8cc35d42ccdaeab Mon Sep 17 00:00:00 2001 From: Karina Kharchenko Date: Mon, 3 Nov 2025 15:46:24 +0200 Subject: [PATCH 1/8] order columns --- .../db-table-view/db-table-view.component.css | 61 ++++++++++++++ .../db-table-view.component.html | 30 ++++--- .../db-table-view/db-table-view.component.ts | 83 ++++++++++++++++++- 3 files changed, 160 insertions(+), 14 deletions(-) diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css index fc9b6586a..3475982e2 100644 --- a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css +++ b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css @@ -503,3 +503,64 @@ tr.mat-row:hover { .hidden { display: none; } + +/* Columns Menu Drag and Drop Styles */ +.columns-list { + max-height: 400px; + overflow-y: auto; +} + +.draggable-column-item { + cursor: move; + display: flex !important; + align-items: center; + gap: 4px; + transition: background-color 0.2s ease; +} + +.draggable-column-item .drag-handle { + color: #9e9e9e; + cursor: grab; + font-size: 20px; + width: 20px; + height: 20px; + margin-left: -8px; + margin-right: -4px; +} + +.draggable-column-item:active .drag-handle { + cursor: grabbing; +} + +.draggable-column-item:hover .drag-handle { + color: #616161; +} + +@media (prefers-color-scheme: dark) { + .draggable-column-item .drag-handle { + color: #757575; + } + + .draggable-column-item:hover .drag-handle { + color: #bdbdbd; + } +} + +.cdk-drag-preview.draggable-column-item { + box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), + 0 8px 10px 1px rgba(0, 0, 0, 0.14), + 0 3px 14px 2px rgba(0, 0, 0, 0.12); + opacity: 0.9; +} + +.cdk-drag-placeholder { + opacity: 0.3; +} + +.cdk-drag-animating { + transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); +} + +.columns-list.cdk-drop-list-dragging .draggable-column-item:not(.cdk-drag-placeholder) { + transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); +} diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.html b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.html index a52a55a2d..05cb7ef69 100644 --- a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.html +++ b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.html @@ -96,18 +96,24 @@

{{ displayName }}

/ {{ tableData.columns.length }}) - - + +
+ +
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.ts b/frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.ts index 20bb0ebf1..936b39b72 100644 --- a/frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.ts +++ b/frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.ts @@ -61,7 +61,7 @@ export class DbTableSettingsComponent implements OnInit { public loading: boolean = true; public fields: string[]; public fields_to_exclude: string[]; - public orderChanged: boolean = false; + // public orderChanged: boolean = false; public iconChanged: boolean = false; public listFieldsOrder: string[]; public tableSettingsInitial: TableSettings = { @@ -73,12 +73,8 @@ export class DbTableSettingsComponent implements OnInit { identity_column: '', search_fields: [], excluded_fields: [], - list_fields: [], - ordering: TableOrdering.Ascending, - ordering_field: '', readonly_fields: [], sortable_by: [], - columns_view: [], sensitive_fields: [], allow_csv_export: true, allow_csv_import: true, @@ -161,17 +157,17 @@ export class DbTableSettingsComponent implements OnInit { this.iconChanged = true; } - drop(event: CdkDragDrop) { - moveItemInArray(this.listFieldsOrder, event.previousIndex, event.currentIndex); - this.tableSettings.list_fields = [...this.listFieldsOrder]; - this.orderChanged = true; - } + // drop(event: CdkDragDrop) { + // // moveItemInArray(this.listFieldsOrder, event.previousIndex, event.currentIndex); + // // this.tableSettings.list_fields = [...this.listFieldsOrder]; + // // this.orderChanged = true; + // } - resetColumnsOrder() { - this.tableSettings.list_fields = []; - this.listFieldsOrder = [...this.fields]; - this.orderChanged = true; - } + // resetColumnsOrder() { + // // this.tableSettings.list_fields = []; + // this.listFieldsOrder = [...this.fields]; + // // this.orderChanged = true; + // } updateSettings() { this.submitting = true; @@ -183,11 +179,7 @@ export class DbTableSettingsComponent implements OnInit { for (const [key, value] of Object.entries(this.tableSettings)) { if (key !== 'connection_id' && key !== 'table_name' && key !== 'ordering') { if (Array.isArray(value)) { - if (key === 'list_fields') { - updatedSettings[key] = this.orderChanged; - } else { - updatedSettings[key] = value.length > 0; - } + updatedSettings[key] = value.length > 0 } else { updatedSettings[key] = Boolean(value); } diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css index dbe607a38..b61b166b8 100644 --- a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css +++ b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css @@ -375,10 +375,7 @@ } .db-table_withActions ::ng-deep .mat-header-row .mat-column-select { - padding-top: 8px; - display: flex; - align-items: center; - justify-content: center; + padding-top: 18px; } th.mat-header-cell, td.mat-cell { @@ -386,40 +383,7 @@ th.mat-header-cell, td.mat-cell { } .db-table ::ng-deep .mat-mdc-header-cell .mat-sort-header-content { - text-align: left !important; - justify-content: flex-start !important; - align-items: flex-start !important; - display: flex !important; - width: 100%; - padding-top: 8px !important; -} - -.db-table ::ng-deep .mat-sort-header-container { - align-items: flex-start !important; - justify-content: flex-start !important; - padding-top: 0 !important; - display: flex !important; -} - -.db-table ::ng-deep .mat-mdc-header-cell { - vertical-align: top !important; - text-align: left !important; - justify-content: flex-start !important; - align-items: flex-start !important; - display: flex !important; -} - -.db-table ::ng-deep .mat-mdc-header-cell .mat-sort-header-content > div { - text-align: left !important; - white-space: normal !important; - word-wrap: break-word !important; - line-height: 1.2 !important; - align-self: flex-start !important; -} - -.db-table ::ng-deep .mat-mdc-header-cell .mat-sort-header-arrow { - align-self: flex-start !important; - margin-top: 8px !important; + text-align: left; } .db-table-cell-checkbox { @@ -466,10 +430,6 @@ th.mat-header-cell, td.mat-cell { justify-content: flex-end; } -.db-table-header-actions { - padding-top: 8px !important; -} - .table-cell-content { overflow: hidden; white-space: nowrap; diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.ts b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.ts index 82cd7df70..5097acb02 100644 --- a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.ts +++ b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.ts @@ -548,8 +548,22 @@ export class DbTableViewComponent implements OnInit { return; } + // The drag indices are based on sortedColumns (visible first, then hidden) + // We need to map these to the actual indices in this.tableData.columns + const sorted = this.sortedColumns; + const draggedColumn = sorted[event.previousIndex]; + const targetColumn = sorted[event.currentIndex]; + + // Find actual indices in the original columns array + const actualPreviousIndex = this.tableData.columns.findIndex(col => col.title === draggedColumn.title); + const actualCurrentIndex = this.tableData.columns.findIndex(col => col.title === targetColumn.title); + + if (actualPreviousIndex === -1 || actualCurrentIndex === -1) { + return; + } + // Reorder columns array in the menu - moveItemInArray(this.tableData.columns, event.previousIndex, event.currentIndex); + moveItemInArray(this.tableData.columns, actualPreviousIndex, actualCurrentIndex); // Update dataColumns array this.tableData.dataColumns = this.tableData.columns.map(column => column.title); @@ -569,52 +583,63 @@ export class DbTableViewComponent implements OnInit { } // Update normalized columns mapping to maintain consistency - this.updateNormalizedColumnsMapping(); + // this.updateNormalizedColumnsMapping(); // Force Angular to detect changes and re-render the table immediately this.cdr.detectChanges(); // Save the new order to table settings (list_fields) - this.saveColumnsOrderToSettings(this.tableData.columns.map(col => col.title)); - - console.log('Columns reordered in menu - table updated:', newDisplayedOrder); - } + // this.saveColumnsOrderToSettings(this.tableData.columns.map(col => col.title)); - private updateNormalizedColumnsMapping() { - // Rebuild normalized columns mapping to match new order - const newNormalizedColumns = {}; - this.tableData.columns.forEach(column => { - if (this.tableData.dataNormalizedColumns[column.title]) { - newNormalizedColumns[column.title] = this.tableData.dataNormalizedColumns[column.title]; + this._tables.updatePersonalTableViewSettings(this.connectionID, this.name, { + list_fields: this.tableData.columns.map(col => col.title) + }).subscribe({ + next: () => { + console.log('Personal table view settings updated with custom ordering'); + }, + error: (error) => { + console.error('Error updating personal table view settings:', error); } }); - this.tableData.dataNormalizedColumns = newNormalizedColumns; + + console.log('Columns reordered in menu - table updated:', newDisplayedOrder); } - private saveColumnsOrderToSettings(columnsOrder: string[]) { - this._tables.fetchTableSettings(this.connectionID, this.name).subscribe({ - next: (currentSettings) => { - const isSettingsExist = Object.keys(currentSettings).length !== 0; + // private updateNormalizedColumnsMapping() { + // // Rebuild normalized columns mapping to match new order + // const newNormalizedColumns = {}; + // this.tableData.columns.forEach(column => { + // if (this.tableData.dataNormalizedColumns[column.title]) { + // newNormalizedColumns[column.title] = this.tableData.dataNormalizedColumns[column.title]; + // } + // }); + // this.tableData.dataNormalizedColumns = newNormalizedColumns; + // } + + // private saveColumnsOrderToSettings(columnsOrder: string[]) { + // this._tables.fetchTableSettings(this.connectionID, this.name).subscribe({ + // next: (currentSettings) => { + // const isSettingsExist = Object.keys(currentSettings).length !== 0; - const updatedSettings = { - ...currentSettings, - connection_id: this.connectionID, - table_name: this.name, - list_fields: columnsOrder - }; + // const updatedSettings = { + // ...currentSettings, + // connection_id: this.connectionID, + // table_name: this.name, + // list_fields: columnsOrder + // }; - this._tables.updateTableSettings(isSettingsExist, this.connectionID, this.name, updatedSettings).subscribe({ - next: () => { - console.log('Column order saved to table settings'); - }, - error: (error) => { - console.error('Error saving column order:', error); - } - }); - }, - error: (error) => { - console.error('Error fetching table settings:', error); - } - }); - } + // this._tables.updateTableSettings(isSettingsExist, this.connectionID, this.name, updatedSettings).subscribe({ + // next: () => { + // console.log('Column order saved to table settings'); + // }, + // error: (error) => { + // console.error('Error saving column order:', error); + // } + // }); + // }, + // error: (error) => { + // console.error('Error fetching table settings:', error); + // } + // }); + // } } diff --git a/frontend/src/app/models/table.ts b/frontend/src/app/models/table.ts index ab5c6233b..251d59d37 100644 --- a/frontend/src/app/models/table.ts +++ b/frontend/src/app/models/table.ts @@ -21,24 +21,32 @@ export enum TableOrdering { export interface TableSettings { connection_id: string, table_name: string, + icon: string, display_name: string, autocomplete_columns: string[], identity_column: string, search_fields: string[], excluded_fields: string[], - list_fields: string[], - ordering: TableOrdering, - ordering_field: string, readonly_fields: string[], sortable_by: string[], - columns_view: string[], sensitive_fields: string[], allow_csv_export: boolean, allow_csv_import: boolean, can_delete: boolean, } +export interface PersonalTableViewSettings { + ordering?: TableOrdering, + ordering_field?: string, + list_per_page?: number, + list_fields?: string[], + columns_view?: string[], + original_names?: boolean, + + // sortable_by: string[], +} + export interface TableRow { connectionID: string, tableName: string, diff --git a/frontend/src/app/services/tables.service.ts b/frontend/src/app/services/tables.service.ts index 98e96b564..a56611d48 100644 --- a/frontend/src/app/services/tables.service.ts +++ b/frontend/src/app/services/tables.service.ts @@ -1,6 +1,6 @@ import { AlertActionType, AlertType } from '../models/alert'; import { BehaviorSubject, EMPTY, throwError } from 'rxjs'; -import { CustomAction, Rule, TableSettings, Widget } from '../models/table'; +import { CustomAction, PersonalTableViewSettings, Rule, TableSettings, Widget } from '../models/table'; import { HttpClient, HttpHeaders } from '@angular/common/http'; import { NavigationEnd, Router } from '@angular/router'; import { catchError, filter, map } from 'rxjs/operators'; @@ -147,29 +147,6 @@ export class TablesService { ); } - fetchTableSettings(connectionID: string, tableName: string) { - return this._http.get('/settings', { - params: { - connectionId: connectionID, - tableName - } - }) - .pipe( - map(res => res), - catchError((err) => { - console.log(err); - this._notifications.showAlert(AlertType.Error, {abstract: err.error.message, details: err.error.originalMessage}, [ - { - type: AlertActionType.Button, - caption: 'Dismiss', - action: (id: number) => this._notifications.dismissAlert() - } - ]); - return EMPTY; - }) - ); - } - exportTableCSV({ connectionID, tableName, @@ -230,6 +207,29 @@ export class TablesService { ); } + fetchTableSettings(connectionID: string, tableName: string) { + return this._http.get('/settings', { + params: { + connectionId: connectionID, + tableName + } + }) + .pipe( + map(res => res), + catchError((err) => { + console.log(err); + this._notifications.showAlert(AlertType.Error, {abstract: err.error.message, details: err.error.originalMessage}, [ + { + type: AlertActionType.Button, + caption: 'Dismiss', + action: (id: number) => this._notifications.dismissAlert() + } + ]); + return EMPTY; + }) + ); + } + updateTableSettings(isSettingsExist: boolean, connectionID: string, tableName: string, settings: TableSettings) { let method: string; if (isSettingsExist) { @@ -287,6 +287,53 @@ export class TablesService { ); } + // fetchPersonalTableViewSettings(connectionID: string, tableName: string) { + // return this._http.get(`/settings/personal/${connectionID}`, { + // params: { + // tableName + // } + // }) + // .pipe( + // map(res => res), + // catchError((err) => { + // console.log(err); + // this._notifications.showAlert(AlertType.Error, {abstract: err.error.message, details: err.error.originalMessage}, [ + // { + // type: AlertActionType.Button, + // caption: 'Dismiss', + // action: (id: number) => this._notifications.dismissAlert() + // } + // ]); + // return EMPTY; + // }) + // ); + // } + + updatePersonalTableViewSettings(connectionID: string, tableName: string, settings: PersonalTableViewSettings) { + return this._http.put(`/settings/personal/${connectionID}`, settings, { + params: { + tableName + } + }) + .pipe( + map(() => { + this.tables.next('settings'); + // this._notifications.showSuccessSnackbar('Table settings has been updated.') + }), + catchError((err) => { + console.log(err); + this._notifications.showAlert(AlertType.Error, {abstract: err.error.message, details: err.error.originalMessage}, [ + { + type: AlertActionType.Button, + caption: 'Dismiss', + action: (id: number) => this._notifications.dismissAlert() + } + ]); + return EMPTY; + }) + ); + } + fetchTableWidgets(connectionID: string, tableName: string) { return this._http.get(`/widgets/${connectionID}`, { params: { From 0f444303e28e78ac616948c5a391a28ac7508b94 Mon Sep 17 00:00:00 2001 From: Lyubov Voloshko Date: Mon, 12 Jan 2026 15:50:39 +0000 Subject: [PATCH 8/8] table view: save columns visibility --- .../dashboard/dashboard.component.ts | 10 +--- .../db-table-view/db-table-view.component.ts | 55 ++++--------------- .../dashboard/db-tables-data-source.ts | 27 ++------- frontend/src/app/models/ui-settings.ts | 2 +- .../src/app/services/ui-settings.service.ts | 6 +- 5 files changed, 23 insertions(+), 77 deletions(-) diff --git a/frontend/src/app/components/dashboard/dashboard.component.ts b/frontend/src/app/components/dashboard/dashboard.component.ts index efd97516d..ce2ad3845 100644 --- a/frontend/src/app/components/dashboard/dashboard.component.ts +++ b/frontend/src/app/components/dashboard/dashboard.component.ts @@ -3,7 +3,7 @@ import { Angulartics2, Angulartics2Module } from 'angulartics2'; import { Component, OnDestroy, OnInit } from '@angular/core'; import { ConnectionSettingsUI, UiSettings } from 'src/app/models/ui-settings'; import { CustomEvent, TableProperties } from 'src/app/models/table'; -import { first, map } from 'rxjs/operators'; +import { map } from 'rxjs/operators'; import { AlertComponent } from '../ui-components/alert/alert.component'; import { BannerComponent } from '../ui-components/banner/banner.component'; @@ -79,7 +79,6 @@ export class DashboardComponent implements OnInit, OnDestroy { public currentPage: number = 1; public shownTableTitles: boolean = true; public connectionID: string; - // public isTestConnection: boolean = false; public filters: object = {}; public comparators: object; public pageIndex: number; @@ -134,8 +133,7 @@ export class DashboardComponent implements OnInit, OnDestroy { ngOnInit() { this.connectionID = this._connections.currentConnectionID; - // this.isTestConnection = this._connections.currentConnection.isTestConnection; - this.dataSource = new TablesDataSource(this._tables, this._connections, this._uiSettings, this._tableRow); + this.dataSource = new TablesDataSource(this._tables, this._connections, this._tableRow); this._tableState.cast.subscribe(row => { this.selectedRow = row; @@ -382,7 +380,6 @@ export class DashboardComponent implements OnInit, OnDestroy { this.uiSettings = settings?.connections[this.connectionID]; this.shownTableTitles = settings?.connections[this.connectionID]?.shownTableTitles ?? true; - const shownColumns = this.uiSettings?.tables[this.selectedTableName]?.shownColumns; this.dataSource.fetchRows({ connectionID: this.connectionID, tableName: this.selectedTableName, @@ -391,8 +388,7 @@ export class DashboardComponent implements OnInit, OnDestroy { sortColumn: this.sortColumn, sortOrder: this.sortOrder, filters: this.filters, - search, - shownColumns + search }); }); } diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.ts b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.ts index 5097acb02..caaaf71f8 100644 --- a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.ts +++ b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.ts @@ -500,7 +500,6 @@ export class DbTableViewComponent implements OnInit { } isRowSelected(primaryKeys) { - // console.log('isRowSelected', this.selectedRowType, this.selectedRow, primaryKeys); if (this.selectedRowType === 'record' && this.selectedRow && this.selectedRow.primaryKeys !== null) return Object.keys(this.selectedRow.primaryKeys).length && JSON.stringify(this.selectedRow.primaryKeys) === JSON.stringify(primaryKeys); return false; } @@ -541,6 +540,16 @@ export class DbTableViewComponent implements OnInit { onColumnVisibilityChange() { this.tableData.changleColumnList(this.connectionID, this.name); this.cdr.detectChanges(); + this._tables.updatePersonalTableViewSettings(this.connectionID, this.name, { + columns_view: this.tableData.displayedDataColumns + }).subscribe({ + next: () => { + console.log('Personal table view settings updated with custom ordering'); + }, + error: (error) => { + console.error('Error updating personal table view settings:', error); + } + }); } onColumnsMenuDrop(event: CdkDragDrop) { @@ -582,14 +591,8 @@ export class DbTableViewComponent implements OnInit { this.tableData.displayedColumns = [...newDisplayedOrder]; } - // Update normalized columns mapping to maintain consistency - // this.updateNormalizedColumnsMapping(); - // Force Angular to detect changes and re-render the table immediately this.cdr.detectChanges(); - - // Save the new order to table settings (list_fields) - // this.saveColumnsOrderToSettings(this.tableData.columns.map(col => col.title)); this._tables.updatePersonalTableViewSettings(this.connectionID, this.name, { list_fields: this.tableData.columns.map(col => col.title) @@ -604,42 +607,4 @@ export class DbTableViewComponent implements OnInit { console.log('Columns reordered in menu - table updated:', newDisplayedOrder); } - - // private updateNormalizedColumnsMapping() { - // // Rebuild normalized columns mapping to match new order - // const newNormalizedColumns = {}; - // this.tableData.columns.forEach(column => { - // if (this.tableData.dataNormalizedColumns[column.title]) { - // newNormalizedColumns[column.title] = this.tableData.dataNormalizedColumns[column.title]; - // } - // }); - // this.tableData.dataNormalizedColumns = newNormalizedColumns; - // } - - // private saveColumnsOrderToSettings(columnsOrder: string[]) { - // this._tables.fetchTableSettings(this.connectionID, this.name).subscribe({ - // next: (currentSettings) => { - // const isSettingsExist = Object.keys(currentSettings).length !== 0; - - // const updatedSettings = { - // ...currentSettings, - // connection_id: this.connectionID, - // table_name: this.name, - // list_fields: columnsOrder - // }; - - // this._tables.updateTableSettings(isSettingsExist, this.connectionID, this.name, updatedSettings).subscribe({ - // next: () => { - // console.log('Column order saved to table settings'); - // }, - // error: (error) => { - // console.error('Error saving column order:', error); - // } - // }); - // }, - // error: (error) => { - // console.error('Error fetching table settings:', error); - // } - // }); - // } } diff --git a/frontend/src/app/components/dashboard/db-tables-data-source.ts b/frontend/src/app/components/dashboard/db-tables-data-source.ts index 112611cf3..adb7c7933 100644 --- a/frontend/src/app/components/dashboard/db-tables-data-source.ts +++ b/frontend/src/app/components/dashboard/db-tables-data-source.ts @@ -10,12 +10,8 @@ import { CollectionViewer } from '@angular/cdk/collections'; import { ConnectionsService } from 'src/app/services/connections.service'; import { DataSource } from '@angular/cdk/table'; import { MatPaginator } from '@angular/material/paginator'; -import { NotificationsService } from 'src/app/services/notifications.service'; import { TableRowService } from 'src/app/services/table-row.service'; -// import { MatSort } from '@angular/material/sort'; import { TablesService } from 'src/app/services/tables.service'; -import { UiSettingsService } from 'src/app/services/ui-settings.service'; -import { UserService } from 'src/app/services/user.service'; import { filter } from "lodash"; import { formatFieldValue } from 'src/app/lib/format-field-value'; import { getTableTypes } from 'src/app/lib/setup-table-row-structure'; @@ -37,8 +33,7 @@ interface RowsParams { filters?: object, comparators?: object, search?: string, - isTablePageSwitched?: boolean, - shownColumns?: string[] + isTablePageSwitched?: boolean } export class TablesDataSource implements DataSource { @@ -91,7 +86,6 @@ export class TablesDataSource implements DataSource { constructor( private _tables: TablesService, private _connections: ConnectionsService, - private _uiSettings: UiSettingsService, private _tableRow: TableRowService, ) {} @@ -125,8 +119,7 @@ export class TablesDataSource implements DataSource { sortOrder, filters, comparators, search, - isTablePageSwitched, - shownColumns + isTablePageSwitched }: RowsParams) { this.loadingSubject.next(true); this.alert_primaryKeysInfo = null; @@ -217,8 +210,8 @@ export class TablesDataSource implements DataSource { this.tableTypes = getTableTypes(res.structure, this.foreignKeysList); let orderedColumns: TableField[]; - if (res.list_fields.length) { - orderedColumns = res.structure.sort((fieldA: TableField, fieldB: TableField) => res.list_fields.indexOf(fieldA.column_name) - res.list_fields.indexOf(fieldB.column_name)); + if (res.table_settings.list_fields.length) { + orderedColumns = res.structure.sort((fieldA: TableField, fieldB: TableField) => res.table_settings.list_fields.indexOf(fieldA.column_name) - res.table_settings.list_fields.indexOf(fieldB.column_name)); } else { orderedColumns = [...res.structure]; }; @@ -226,17 +219,11 @@ export class TablesDataSource implements DataSource { if (isTablePageSwitched === undefined) this.columns = orderedColumns .filter (item => item.isExcluded === false) .map((item, index) => { - if (shownColumns && shownColumns.length) { + if (res.table_settings.columns_view && res.table_settings.columns_view.length !== 0) { return { title: item.column_name, normalizedTitle: this.widgets[item.column_name]?.name || normalizeFieldName(item.column_name), - selected: shownColumns.includes(item.column_name) - } - } else if (res.columns_view && res.columns_view.length !== 0) { - return { - title: item.column_name, - normalizedTitle: this.widgets[item.column_name]?.name || normalizeFieldName(item.column_name), - selected: res.columns_view.includes(item.column_name) + selected: res.table_settings.columns_view.includes(item.column_name) } } else { if (index < 6) { @@ -328,8 +315,6 @@ export class TablesDataSource implements DataSource { } else { this.displayedColumns = [...this.displayedDataColumns]; }; - - this._uiSettings.updateTableSetting(connectionId, tableName, 'shownColumns', this.displayedDataColumns); } getQueryParams(row, action) { diff --git a/frontend/src/app/models/ui-settings.ts b/frontend/src/app/models/ui-settings.ts index 90c103377..2af628b39 100644 --- a/frontend/src/app/models/ui-settings.ts +++ b/frontend/src/app/models/ui-settings.ts @@ -4,7 +4,7 @@ export interface GlobalSettingsUI { } export interface TableSettingsUI { - shownColumns: string[]; + // shownColumns: string[]; } export interface ConnectionSettingsUI { diff --git a/frontend/src/app/services/ui-settings.service.ts b/frontend/src/app/services/ui-settings.service.ts index 105ee4b54..fcce2fc44 100644 --- a/frontend/src/app/services/ui-settings.service.ts +++ b/frontend/src/app/services/ui-settings.service.ts @@ -52,9 +52,9 @@ export class UiSettingsService { if (!this.settings.connections[connectionId]) { this.settings.connections[connectionId] = { shownTableTitles: false, tables: {} }; } - if (!this.settings.connections[connectionId].tables[tableName]) { - this.settings.connections[connectionId].tables[tableName] = { shownColumns: [] }; - } + // if (!this.settings.connections[connectionId].tables[tableName]) { + // this.settings.connections[connectionId].tables[tableName] = { shownColumns: [] }; + // } this.settings.connections[connectionId].tables[tableName][key] = value; this.syncUiSettings().subscribe(); }