dashboard: stash sort params

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

@@ -83,6 +83,8 @@ export class DashboardComponent implements OnInit, OnDestroy {
   public comparators: object;
   public pageIndex: number;
   public pageSize: number;
+  public sortColumn: string;
+  public sortOrder: 'ASC' | 'DESC';
 
   public loading: boolean = true;
   public isServerError: boolean = false;
@@ -235,6 +237,9 @@ export class DashboardComponent implements OnInit, OnDestroy {
       this.comparators = getComparatorsFromUrl(this.filters);
       this.pageIndex = parseInt(queryParams.page_index) || 0;
       this.pageSize = parseInt(queryParams.page_size) || 30;
+      this.sortColumn = queryParams.sort_active;
+      this.sortOrder = queryParams.sort_direction;
+
       const search = queryParams.search;
       this.getRows(search);
     })
@@ -353,8 +358,8 @@ export class DashboardComponent implements OnInit, OnDestroy {
           tableName: this.selectedTableName,
           requstedPage: this.pageIndex,
           pageSize: this.pageSize,
-          sortColumn: undefined,
-          sortOrder: undefined,
+          sortColumn: this.sortColumn,
+          sortOrder: this.sortOrder,
           filters: this.filters,
           search,
           shownColumns

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

@@ -1,17 +1,18 @@
+import { ActivatedRoute, Router } from '@angular/router';
 import { Component, EventEmitter, Input, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
 import { CustomAction, TableForeignKey, TablePermissions, TableProperties, TableRow } from 'src/app/models/table';
 import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { Observable, merge, of } from 'rxjs';
 import { map, startWith, tap } from 'rxjs/operators';
 
 import { AccessLevel } from 'src/app/models/user';
-import { ActivatedRoute } from '@angular/router';
 import { Angulartics2OnModule } from 'angulartics2';
 import { ClipboardModule } from '@angular/cdk/clipboard';
 import { CommonModule } from '@angular/common';
 import { DbTableExportDialogComponent } from '../db-table-export-dialog/db-table-export-dialog.component';
 import { DbTableImportDialogComponent } from '../db-table-import-dialog/db-table-import-dialog.component';
 import { DragDropModule } from '@angular/cdk/drag-drop';
+import JsonURL from "@jsonurl/jsonurl";
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
@@ -123,6 +124,7 @@ export class DbTableComponent implements OnInit {
     private _tableState: TableStateService,
     private _notifications: NotificationsService,
     private route: ActivatedRoute,
+    public router: Router,
     public dialog: MatDialog,
   ) {}
 
@@ -134,7 +136,21 @@ export class DbTableComponent implements OnInit {
 
     merge(this.sort.sortChange, this.paginator.page)
       .pipe(
-          tap(() => this.loadRowsPage())
+          tap(() => {
+            const filters = JsonURL.stringify( this.activeFilters );
+
+
+            this.router.navigate([`/dashboard/${this.connectionID}/${this.name}`], {
+              queryParams: {
+                filters,
+                sort_active: this.sort.active,
+                sort_direction: this.sort.direction.toUpperCase(),
+                page_index: this.paginator.pageIndex,
+                page_size: this.paginator.pageSize
+              }
+            });
+            this.loadRowsPage()
+          })
       )
       .subscribe();
   }
@@ -162,7 +178,6 @@ export class DbTableComponent implements OnInit {
   }
 
   loadRowsPage() {
-    console.log(this.paginator);
     this.tableData.fetchRows({
       connectionID: this.connectionID,
       tableName: this.name,
@@ -202,12 +217,8 @@ export class DbTableComponent implements OnInit {
   }
 
   getWidgetValue(column: string, value: string) {
-    console.log(this.tableData.widgets);
     if (this.tableData.widgets[column].widget_type === 'Select') {
-      console.log(this.tableData.widgets['Region']);
       const fieldOptions = this.tableData.widgets[column].widget_params.options;
-      console.log('fieldOptions');
-      console.log(fieldOptions);
       if (fieldOptions) {
         const cellValue = fieldOptions.find(option => option.value === value);
           if (cellValue) return cellValue.label
@@ -318,7 +329,7 @@ export class DbTableComponent implements OnInit {
   }
 
   stashUrlParams() {
-    this._tableState.setBackUrlParams(this.paginator.pageIndex, this.paginator.pageSize, this.sort.active, this.sort.direction);
+    this._tableState.setBackUrlParams(this.route.snapshot.queryParams.page_index, this.route.snapshot.queryParams.page_size, this.route.snapshot.queryParams.sort_active, this.route.snapshot.queryParams.sort_direction);
     this.stashFilters();
   }
 
@@ -339,8 +350,6 @@ export class DbTableComponent implements OnInit {
   handleAction(e, action, element) {
     e.stopPropagation();
 
-    console.log(element);
-
     this.activateActions.emit({
       action,
       primaryKeys: [this.tableData.getQueryParams(element)],

frontend/src/app/services/table-state.service.ts

@@ -34,11 +34,12 @@ export class TableStateService {
   }
 
   setBackUrlParams(pageIndex: number, pageSize: number, sortField: string, sortDirection: string) {
+    console.log('setBackUrlParams', pageIndex, pageSize, sortField, sortDirection);
     const params = {
       page_index: pageIndex,
       page_size: pageSize,
       sort_active: sortField,
-      sort_direction: sortDirection
+      sort_direction: sortDirection.toUpperCase()
     };
     this.setSessionStorageItem('backUrlParams', params);
   }