fix sort column when saved state has wrong params

src/app/pages/observations/observation-list.component.html

@@ -69,7 +69,7 @@ <h2>{{'Go to an observation' | translate}}</h2>
     <otp-table-column [name]="'ID' | translate" prop="id" [sortable]="false"></otp-table-column>
     <!-- Updated at as a default sort must be as a column, it will be hidden -->
     <otp-table-column name="updated-at" prop="updated-at" [hidden]="true"></otp-table-column>
-    <otp-table-column [name]="'Organization' | translate" prop="observers">
+    <otp-table-column [name]="'Organization' | translate" prop="observers" [sortable]="false">
       <ng-template let-row="row" table-cell-template>
         <div *ngFor="let observer of row.observers">{{observer.name}}</div>
       </ng-template>

src/app/shared/table-filter/table-filter.behavior.ts

@@ -3,6 +3,7 @@ import { JsonApiParams, JsonApiService } from 'app/services/json-api.service';
 import { TableComponent, TableState } from 'app/shared/table/table.component';
 import { FiltersComponent, Filter } from 'app/shared/filters/filters.component';
 import { debounce } from 'lodash';
+import * as Sentry from '@sentry/browser'
 
 export class TableFilterBehavior implements AfterViewInit {
 
@@ -39,19 +40,25 @@ export class TableFilterBehavior implements AfterViewInit {
     const params = Object.assign({}, this.filters.getApiParams(), this.table.getApiParams());
     const requestID = ++this.latestRequestID;
 
-    // We save the current state of the table and
-    // filters so the user can come back to them
-    // later
-    this.saveState();
-
     this.service.get(params)
       .then(res => {
         if (this.latestRequestID === requestID) {
           this.table.rows = res.data;
           this.table.rowCount = res.meta['record-count'];
+          // We save the current state of the table and
+          // filters so the user can come back to them
+          // later
+          this.saveState();
+        }
+      })
+      .catch((error) => {
+        console.error('Error loading the table data', error)
+        Sentry.captureException(error);
+        // bad request so probably a filter or sorting error so bust the saved state
+        if (error.status === 400) {
+          sessionStorage.removeItem('tableFilter');
         }
       })
-      .catch((error) => console.error('Error loading the table data', error))
       .then(() => {
         if (this.latestRequestID === requestID) {
           this.table.loading = false;

src/app/shared/table/table.component.html

@@ -23,7 +23,7 @@
       <tr role="row" aria-rowindex="1">
         <th
           *ngFor="let column of visibleColumns"
-          [attr.class]="(sortColumn === column ? ('-order-' + sortOrder) : '') + (!column.prop ? ' -no-sortable' : '')"
+          [attr.class]="(sortColumn === column ? ('-order-' + sortOrder) : '') + ((!column.prop || !column.sortable) ? ' -no-sortable' : '')"
           [attr.aria-sort]="sortColumn === column ? sortOrder : 'none'"
           [tabindex]="sortColumn === column ? 0 : -1"
           role="columnheader"

src/app/shared/table/table.component.ts

@@ -120,7 +120,7 @@ export class TableComponent implements AfterContentInit {
 
           // We only set the sort if it hasn't set before or if
           // the columns has been reset and it stays the same
-          if (!this.sortColumn || this.sortColumn.prop === sortColumn.prop) {
+          if ((!this.sortColumn || this.sortColumn.prop === sortColumn.prop) && sortColumn.sortable !== false) {
             this.sortColumn = sortColumn;
             this.sortOrder = isDesc ? 'desc' : 'asc';
           }
@@ -129,7 +129,8 @@ export class TableComponent implements AfterContentInit {
         // If the columns are dynamically added or removed
         // the current sorting might not be available anymore
         // so we remove it
-        if (this.sortColumn && !this.columns.find(c => c.prop === this.sortColumn.prop)) {
+        // console.log(sortColumn);
+        if (this.sortColumn && this.sortColumn.sortable === false) {
           this.sortColumn = null;
           this.change.emit();
         }
@@ -293,7 +294,7 @@ export class TableComponent implements AfterContentInit {
       const sortColumn = this.columns.find(c => c.prop.replace(/[\[\]]/g, '') === sortColumnProp);
       const isDesc = !!this.previousState.sort.match(/(-?).*/)[1].length;
 
-      if (sortColumn) {
+      if (sortColumn && sortColumn.sortable !== false) {
         this.sortColumn = sortColumn;
         this.sortOrder = isDesc ? 'desc' : 'asc';
       }