Order of tables (dnd)

frontend/angular.json

@@ -137,8 +137,7 @@
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
             "buildTarget": "dissendium-v0:build",
-            "host": "127.0.0.1",
-            "proxyConfig": "src/proxy.conf.json"
+            "host": "127.0.0.1"
           },
           "configurations": {
             "production": {

frontend/src/app/components/dashboard/dashboard.component.ts

@@ -1,22 +1,24 @@
+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 { map } from 'rxjs/operators';
+
+import { AlertComponent } from '../ui-components/alert/alert.component';
 import { SelectionModel } from '@angular/cdk/collections';
 import { CommonModule } from '@angular/common';
 import { HttpErrorResponse } from '@angular/common/http';
-import { Component, OnDestroy, OnInit } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { Title } from '@angular/platform-browser';
 import { ActivatedRoute, ParamMap, Router, RouterModule } from '@angular/router';
 import JsonURL from '@jsonurl/jsonurl';
-import { Angulartics2, Angulartics2Module } from 'angulartics2';
 import { omitBy } from 'lodash';
-import { first, map } from 'rxjs/operators';
 import { getComparatorsFromUrl } from 'src/app/lib/parse-filter-params';
 import { ServerError } from 'src/app/models/alert';
 import { TableCategory } from 'src/app/models/connection';
-import { CustomEvent, TableProperties } from 'src/app/models/table';
-import { ConnectionSettingsUI, UiSettings } from 'src/app/models/ui-settings';
 import { User } from 'src/app/models/user';
 import { CompanyService } from 'src/app/services/company.service';
 import { ConnectionsService } from 'src/app/services/connections.service';
@@ -27,7 +29,6 @@ import { UiSettingsService } from 'src/app/services/ui-settings.service';
 import { environment } from 'src/environments/environment';
 import { normalizeTableName } from '../../lib/normalize';
 import { PlaceholderTableViewComponent } from '../skeletons/placeholder-table-view/placeholder-table-view.component';
-import { AlertComponent } from '../ui-components/alert/alert.component';
 import { BannerComponent } from '../ui-components/banner/banner.component';
 import { ContentLoaderComponent } from '../ui-components/content-loader/content-loader.component';
 import { DbActionLinkDialogComponent } from './db-table-view/db-action-link-dialog/db-action-link-dialog.component';
@@ -76,14 +77,12 @@ 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;
 	public pageSize: number;
 	public sortColumn: string;
 	public sortOrder: 'ASC' | 'DESC';
-
 	public loading: boolean = true;
 	public isServerError: boolean = false;
 	public serverError: ServerError;
@@ -131,10 +130,8 @@ 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.connectionID = this._connections.currentConnectionID;
+    this.dataSource = new TablesDataSource(this._tables, this._connections, this._tableRow);
 		this._tableState.cast.subscribe((row) => {
 			this.selectedRow = row;
 		});
@@ -384,7 +381,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,
@@ -393,8 +389,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
 				sortColumn: this.sortColumn,
 				sortOrder: this.sortOrder,
 				filters: this.filters,
-				search,
-				shownColumns,
+				search
 			});
 		});
 	}

frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.html

@@ -62,17 +62,17 @@ <h2 class="mat-heading-2 settings-fields__heading">General settings</h2>
             </mat-slide-toggle>
 
             <h2 class="mat-heading-2 settings-fields__heading">Table view</h2>
-            <mat-form-field appearance="outline">
+            <!--<mat-form-field appearance="outline">
                 <mat-label>Columns visible by default</mat-label>
                 <mat-select multiple
                     name="columns_view"
                     [(ngModel)]="tableSettings.columns_view">
                     <mat-option *ngFor="let field of fields" [value]="field">{{field}}</mat-option>
                 </mat-select>
                 <mat-hint>Choose the columns you want users to see when they first open this table. Changes made to a table's Columns view are saved over the default values.</mat-hint>
-            </mat-form-field>
+            </mat-form-field>-->
 
-            <div class="order-settings">
+            <!--<div class="order-settings">
                 <div class="order-settings__panel">
                     <span class="order__title">
                         Columns order
@@ -103,7 +103,7 @@ <h2 class="mat-heading-2 settings-fields__heading">Table view</h2>
                     (click)="resetColumnsOrder()">
                     <mat-icon>restart_alt</mat-icon>
                 </button>
-            </div>
+            </div>-->
 
             <mat-form-field appearance="outline">
                 <mat-label>Searchable columns</mat-label>
@@ -115,7 +115,7 @@ <h2 class="mat-heading-2 settings-fields__heading">Table view</h2>
                 <mat-hint>Choose the columns Rocketadmin scans when using the Search bar.</mat-hint>
             </mat-form-field>
 
-            <div class="form-group-ordering">
+            <!--<div class="form-group-ordering">
                 <mat-form-field appearance="outline" class="form-group-ordering__ordering-by">
                     <mat-label>Order by</mat-label>
                     <mat-select name="ordering_field" [(ngModel)]="tableSettings.ordering_field">
@@ -132,7 +132,7 @@ <h2 class="mat-heading-2 settings-fields__heading">Table view</h2>
                     <mat-radio-button value="ASC" checked>Ascending</mat-radio-button>
                     <mat-radio-button value="DESC">Descending</mat-radio-button>
                 </mat-radio-group>
-            </div>
+            </div>-->
 
             <mat-form-field appearance="outline">
                 <mat-label>Sortable columns</mat-label>
@@ -189,7 +189,7 @@ <h2 class="mat-heading-2" style="margin-bottom: -4px; margin-top: 12px">"Edit ro
             <button mat-flat-button color="primary"
                 type="submit"
                 class="settings-form__save-button"
-                [disabled]="(submitting || tableSettingsForm.form.invalid || tableSettingsForm.form.pristine) && !orderChanged && !iconChanged">
+                [disabled]="(submitting || tableSettingsForm.form.invalid || tableSettingsForm.form.pristine) && !iconChanged">
                 Save
             </button>
         </div>

frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.spec.ts

@@ -84,18 +84,14 @@ describe('DbTableSettingsComponent', () => {
     icon: "",
     search_fields: [],
     excluded_fields: [],
-    list_fields: [],
     // identification_fields: [],
     // list_per_page: null,
-    ordering: TableOrdering.Ascending,
-    ordering_field: "",
     identity_column: "",
     readonly_fields: [],
     sortable_by: [],
     autocomplete_columns: [
       "FirstName"
     ],
-    columns_view: [],
     sensitive_fields: [],
     connection_id: "63f804e4-8588-4957-8d7f-655e2309fef7",
     allow_csv_export: true,

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<string[]>) {
-    moveItemInArray(this.listFieldsOrder, event.previousIndex, event.currentIndex);
-    this.tableSettings.list_fields = [...this.listFieldsOrder];
-    this.orderChanged = true;
-  }
+  // drop(event: CdkDragDrop<string[]>) {
+  //   // 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);
         }

frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css

@@ -551,3 +551,85 @@ tr.mat-row:hover {
     padding: 8px 0;
     width: 100%;
 }
+
+.hidden {
+    display: none;
+}
+
+/* Columns Menu Drag and Drop Styles */
+.columns-list {
+    max-height: 400px;
+    overflow-y: auto;
+    padding: 8px 0;
+}
+
+.draggable-column-item {
+    cursor: move;
+    display: flex !important;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 0px;
+    padding: 8px 24px 8px 8px !important;
+    min-height: 48px !important;
+    transition: background-color 0.2s ease;
+}
+
+.draggable-column-item .drag-handle {
+    color: #9e9e9e;
+    cursor: grab;
+    font-size: 20px;
+    width: 20px;
+    height: 20px;
+    margin-right: 0px;
+    flex-shrink: 0;
+}
+
+.draggable-column-item ::ng-deep .mat-mdc-checkbox {
+    align-items: center !important;
+}
+
+.draggable-column-item ::ng-deep .mat-mdc-checkbox-label {
+    text-align: left;
+    line-height: 1.5;
+}
+
+.draggable-column-item ::ng-deep .mdc-form-field {
+    align-items: center !important;
+}
+
+.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);
+}

frontend/src/app/components/dashboard/db-table-view/db-table-view.component.html

@@ -104,18 +104,24 @@ <h2 class="mat-h2 table-name">{{ displayName }}</h2>
                                 {{ tableData.columns.length }})
                             </span>
                     </button>
-                    <mat-menu #menu="matMenu">
-                        <button mat-menu-item
-                            role="menuitemcheckbox"
-                            *ngFor="let column of tableData.columns"
-                            (click)="$event.stopPropagation();">
-                            <mat-checkbox
-                                [disabled]="tableData.displayedDataColumns.length === 1 && column.selected"
-                                (change)="tableData.changleColumnList(connectionID, name)"
-                                [(ngModel)]="column.selected">
-                                {{column.normalizedTitle}}
-                            </mat-checkbox>
-                        </button>
+                    <mat-menu #menu="matMenu" class="columns-menu">
+                        <div cdkDropList (cdkDropListDropped)="onColumnsMenuDrop($event)" class="columns-list">
+                            <button mat-menu-item
+                                role="menuitemcheckbox"
+                                *ngFor="let column of sortedColumns"
+                                cdkDrag
+                                [cdkDragData]="column"
+                                class="draggable-column-item"
+                                (click)="$event.stopPropagation();">
+                                <mat-icon class="drag-handle">drag_indicator</mat-icon>
+                                <mat-checkbox
+                                    [disabled]="tableData.displayedDataColumns.length === 1 && column.selected"
+                                    (change)="onColumnVisibilityChange()"
+                                    [(ngModel)]="column.selected">
+                                    {{column.normalizedTitle}}
+                                </mat-checkbox>
+                            </button>
+                        </div>
                     </mat-menu>
                 </div>
                 <button mat-icon-button type="button"

frontend/src/app/components/dashboard/db-table-view/db-table-view.component.spec.ts

@@ -91,7 +91,7 @@ describe('DbTableViewComponent', () => {
 	beforeEach(() => {
 		fixture = TestBed.createComponent(DbTableViewComponent);
 		component = fixture.componentInstance;
-		component.table = new TablesDataSource({} as any, {} as any, {} as any, {} as any);
+		component.table = new TablesDataSource({} as any, {} as any, {} as any);
 		component.selection = new SelectionModel<any>(true, []);
 		component.filterComparators = mockFilterComparators;
 		fixture.autoDetectChanges();