fix(core/table): fixed^Corting on table columns

gnucoop · Oct 20, 2022 · 8701be1 · 8701be1
1 parent d3239b8
commit 8701be1
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 30 deletions.
diff --git a/projects/core/table/src/table.html b/projects/core/table/src/table.html
@@ -1,7 +1,7 @@
-<table *ngIf="data" matSort (matSortChange)="sortData($event)">
-  <tr *ngIf="data.length > 0">
+<table *ngIf="sortedData" matSort (matSortChange)="sortData($event)">
+  <tr *ngIf="sortedData.length > 0">
     <th
-      *ngFor="let headerCell of data[0]; let idx = index"
+      *ngFor="let headerCell of sortedData[0]; let idx = index"
       [applyStyles]="headerCell.style"
       [ngStyle]="{'padding': cellpadding}"
       [attr.colspan]="headerCell.colspan"
@@ -11,8 +11,8 @@
       {{headerCell.value}}
     </th>
   </tr>
-  <ng-container *ngIf="data.length > 1">
-    <tr *ngFor="let row of data.slice(1)">
+  <ng-container *ngIf="sortedData.length > 1">
+    <tr *ngFor="let row of sortedData.slice(1)">
       <td
         *ngFor="let cell of row"
         [applyStyles]="cell.style"

diff --git a/projects/core/table/src/table.ts b/projects/core/table/src/table.ts
@@ -56,9 +56,18 @@ export class AjfTable implements OnDestroy {
   @Input()
   set data(data: AjfTableCell[][]) {
     this._data = this._fixData(data);
+    this._sortedData = [...this._data];
     this._cdr.markForCheck();
   }
 
+  /**
+   * sorted data to be shown in the table
+   */
+  private _sortedData: AjfTableCell[][] = [];
+  get sortedData(): AjfTableCell[][] {
+    return this._sortedData;
+  }
+
   /**
    * cellpadding for all rows, include header
    */
@@ -111,13 +120,15 @@ export class AjfTable implements OnDestroy {
    */
   sortData(sort: Sort): void {
     if (!sort.active || sort.direction === '') {
-      return;
+      this._sortedData = [...this._data];
+    } else {
+      const columnIdx = parseInt(sort.active.slice(-1)) || 0;
+      const sortedData = this._data.slice(1).sort((a, b) => {
+        const isAsc = sort.direction === 'asc';
+        return this._compare(a[columnIdx], b[columnIdx], isAsc);
+      });
+      this._sortedData = [this._data[0], ...sortedData];
     }
-    const sortedData = this._data.slice(1).sort((a, b) => {
-      const isAsc = sort.direction === 'asc';
-      return this._compare(a[0], b[0], isAsc);
-    });
-    this._data = [this._data[0], ...sortedData];
     this.sortSelected.emit(sort);
   }
 

diff --git a/projects/dev-app/src/widgets.ts b/projects/dev-app/src/widgets.ts
@@ -174,8 +174,8 @@ export function demoWidgets(ts: TranslocoService): {name: string; instance: AjfW
             {value: 'header 3', style: {}},
           ],
           [
-            {value: '<b>a</b>', style: {}},
-            {value: 'b', style: {}},
+            {value: 'a', style: {}},
+            {value: '120', style: {}},
             {
               value:
                 '<div class="read_more_cell"><p class="read_more_text">Read more</p><b class="material-icons">add_circle_outline</b></div>',
@@ -184,8 +184,8 @@ export function demoWidgets(ts: TranslocoService): {name: string; instance: AjfW
             },
           ],
           [
-            {value: 'd', style: {}},
-            {value: 'e', style: {}},
+            {value: 'b', style: {}},
+            {value: '-', style: {}},
             {
               value:
                 '<div class="read_more_cell"><p class="read_more_text">Read more</p><b class="material-icons">add_circle_outline</b></div>',
@@ -195,8 +195,8 @@ export function demoWidgets(ts: TranslocoService): {name: string; instance: AjfW
             },
           ],
           [
-            {value: 'g', style: {}},
-            {value: 'h', style: {}},
+            {value: 'c', style: {}},
+            {value: '0', style: {}},
             {value: 'i', style: {}},
           ],
         ],

diff --git a/projects/material/reports/src/widget.ts b/projects/material/reports/src/widget.ts
@@ -285,8 +285,16 @@ export class AjfPaginatedTableWidgetComponent
   }
   private _currentContent: AjfTableCell[][] = [];
 
+  /**
+   * full data table
+   */
   private _allDataContent: AjfTableCell[][] = [];
 
+  /**
+   * full sorted data table
+   */
+  private _sortedAllDataContent: AjfTableCell[][] = [];
+
   get headerContent(): AjfTableCell[] {
     return this._headerContent;
   }
@@ -362,18 +370,20 @@ export class AjfPaginatedTableWidgetComponent
    * @returns
    */
   sortPaginatedData(sort: Sort): void {
-    if (!sort.active || sort.direction === '') {
-      return;
-    }
     if (this._allDataContent.length > 1) {
-      this._currentPage = 1;
-      this._canGoForward = this._currentPage < this._pages;
-      this._canGoBackward = false;
-
-      this._allDataContent = this._allDataContent.sort((a, b) => {
-        const isAsc = sort.direction === 'asc';
-        return this._compare(a[0], b[0], isAsc);
-      });
+      if (!sort.active || sort.direction === '') {
+        this._sortedAllDataContent = this._allDataContent.slice();
+      } else {
+        this._currentPage = 1;
+        this._canGoForward = this._currentPage < this._pages;
+        this._canGoBackward = false;
+
+        const columnIdx = parseInt(sort.active.slice(-1)) || 0;
+        this._sortedAllDataContent = this._allDataContent.slice().sort((a, b) => {
+          const isAsc = sort.direction === 'asc';
+          return this._compare(a[columnIdx], b[columnIdx], isAsc);
+        });
+      }
       this._fillCurrentContent();
     }
   }
@@ -393,9 +403,11 @@ export class AjfPaginatedTableWidgetComponent
       this._headerContent = [];
       this._currentContent = [];
       this._allDataContent = [];
+      this._sortedAllDataContent = [];
     } else {
       this._headerContent = this.instance.data[0];
       this._allDataContent = this.instance.data.slice(1);
+      this._sortedAllDataContent = [...this._allDataContent];
       this._currentPage = 1;
 
       this._pages = Math.ceil(this._allDataContent.length / this.paginatorConfig.pageSize);
@@ -408,13 +420,13 @@ export class AjfPaginatedTableWidgetComponent
    * Update current data for the table, using page and sorted data
    */
   private _fillCurrentContent(): void {
-    if (this._allDataContent.length === 0 && this._headerContent.length > 0) {
+    if (this._sortedAllDataContent.length === 0 && this._headerContent.length > 0) {
       this._currentContent = [this._headerContent];
     } else {
       const start = (this._currentPage - 1) * this.paginatorConfig.pageSize;
       this._currentContent = [
         this._headerContent,
-        ...this._allDataContent.slice(start, start + this.paginatorConfig.pageSize),
+        ...this._sortedAllDataContent.slice(start, start + this.paginatorConfig.pageSize),
       ];
     }
     this._cdr.markForCheck();