fix: sorting and filtering in data table view fix (#339)

Co-authored-by: kim.tran <[email protected]>

libs/accelerator/src/index.ts

@@ -1,4 +1,5 @@
 export * from './lib/topic/topic'
 export * from './lib/topic/syncable-topic'
 export * from './lib/topic/topic-publisher'
-export * from './lib/utils/path.utils'
+export * from './lib/utils/path.utils'
+export * from './lib/utils/date.utils'

libs/accelerator/src/lib/utils/date.utils.ts

@@ -0,0 +1,4 @@
+export function isValidDate(value: any): value is Date {
+    return value instanceof Date && !isNaN(value as any);
+  }
+

libs/angular-accelerator/src/lib/components/data-sort-base/data-sort-base.ts

@@ -11,7 +11,10 @@ import { ObjectUtils } from '../../utils/objectutils'
 type RowListGridData = ListGridData | Row
 
 export class DataSortBase {
-  constructor(protected locale: string, protected translateService: TranslateService) {}
+  constructor(
+    protected locale: string,
+    protected translateService: TranslateService
+  ) {}
 
   translateItems(
     [items, filters, sortColumn, sortDirection]: [RowListGridData[], Filter[], string, DataSortDirection],
@@ -23,7 +26,10 @@ export class DataSortBase {
       let translationKeys: string[] = []
       const translatedColumns = columns.filter((c) => c.columnType === ColumnType.TRANSLATION_KEY)
       translatedColumns.forEach((c) => {
-        translationKeys = [...translationKeys, ...items.map((i) => ObjectUtils.resolveFieldData(i, c.id)?.toString())]
+        translationKeys = [
+          ...translationKeys,
+          ...items.map((i) => ObjectUtils.resolveFieldData(i, c.id)?.toString()).filter((v) => !!v),
+        ]
       })
       if (translationKeys.length) {
         return this.translateService.get(translationKeys).pipe(
@@ -51,7 +57,7 @@ export class DataSortBase {
       Filter[],
       string,
       DataSortDirection,
-      Record<string, Record<string, string>>
+      Record<string, Record<string, string>>,
     ],
     clientSideFiltering: boolean
   ): [RowListGridData[], Filter[], string, DataSortDirection, Record<string, Record<string, string>>] {
@@ -69,9 +75,9 @@ export class DataSortBase {
               .some(
                 (filter) =>
                   (
-                    translations[filter.columnId]?.[ObjectUtils.resolveFieldData(item, filter.columnId).toString()] ||
+                    translations[filter.columnId]?.[ObjectUtils.resolveFieldData(item, filter.columnId)?.toString()] ||
                     ObjectUtils.resolveFieldData(item, filter.columnId)
-                  ).toString() === filter.value.toString()
+                  )?.toString() === filter.value.toString()
               )
           )
       ),
@@ -88,7 +94,7 @@ export class DataSortBase {
       Filter[],
       string,
       DataSortDirection,
-      Record<string, Record<string, string>>
+      Record<string, Record<string, string>>,
     ],
     columns: DataTableColumn[],
     clientSideSorting: boolean

libs/angular-accelerator/src/lib/components/data-table/data-table.component.html

@@ -168,7 +168,7 @@
                 </ng-template>
                 <ng-template pTemplate="item" let-value>
                   <ng-container [ngSwitch]="(currentFilterColumn$ | async)?.columnType">
-                    <span *ngSwitchCase="'DATE'">{{ value.label | date }}</span>
+                    <span *ngSwitchCase="'DATE'">{{ isDate(value.label) ? (value.label | date) : '' }}</span>
                     <span *ngSwitchDefault> {{ value.label }} </span>
                   </ng-container>
                 </ng-template>

libs/angular-accelerator/src/lib/components/data-table/data-table.component.ts

@@ -8,7 +8,7 @@ import {
   LOCALE_ID,
   OnInit,
   Output,
-  TemplateRef
+  TemplateRef,
 } from '@angular/core'
 import { Router } from '@angular/router'
 import { TranslateService } from '@ngx-translate/core'
@@ -22,6 +22,7 @@ import { DataSortDirection } from '../../model/data-sort-direction'
 import { DataTableColumn } from '../../model/data-table-column.model'
 import { ObjectUtils } from '../../utils/objectutils'
 import { DataSortBase } from '../data-sort-base/data-sort-base'
+import { isValidDate } from '@onecx/accelerator'
 
 type Primitive = number | string | boolean | bigint | Date
 export type Row = {
@@ -304,7 +305,7 @@ export class DataTableComponent extends DataSortBase implements OnInit {
                   ({
                     label: filterOption,
                     value: filterOption,
-                  } as SelectItem)
+                  }) as SelectItem
               )
           })
         )
@@ -424,10 +425,18 @@ export class DataTableComponent extends DataSortBase implements OnInit {
       map((actions) =>
         actions.some(
           (a) =>
-            (!a.actionVisibleField || (this.fieldIsTruthy(row, a.actionVisibleField)) &&
-            this.userService.hasPermission(a.permission))
+            !a.actionVisibleField ||
+            (this.fieldIsTruthy(row, a.actionVisibleField) && this.userService.hasPermission(a.permission))
         )
       )
     )
   }
+
+  isDate(value: Date | string | number) {
+    if (value instanceof Date) {
+      return true
+    }
+    const d = new Date(value)
+    return isValidDate(d)
+  }
 }

libs/angular-accelerator/src/lib/utils/dateutils.ts

@@ -22,6 +22,9 @@ export class DateUtils {
   }
 }
 
+/**
+ * @deprecated Will be removed. Please use isValidDate() from @onecx/accelerator
+ */
 export function isValidDate(value: any): value is Date {
   return value instanceof Date && !isNaN(value as any);
 }