@sebgroup/green-react 3.28.4 → 3.29.1-rc.20250730100346308

package/src/lib/table/components/parts/helperFunctions/helperFunctions.spec.ts

@@ -0,0 +1,313 @@
+import {
+  FilterColumn,
+  GenericTableRow,
+  SortDirection,
+} from '../../table-typings'
+import {
+  filterArrayByColumns,
+  onRowSelect,
+  paginate,
+  RowSelectOutput,
+  searchTextByColumns,
+  sortArray,
+  sumCols,
+} from './helperFunctions'
+
+type Data = {
+  name: string
+  age: number
+}
+
+type SortArrayTestCase<T = Data> = {
+  statement: string
+  sortKey: keyof T
+  sortDirection: SortDirection
+  result: Array<GenericTableRow<T>>
+}
+
+type FilterDataByColumnTestCase<T = Data> = {
+  statement: string
+  filterColumns: Array<FilterColumn<T>>
+  result: Array<GenericTableRow<T>>
+}
+
+type SearchTextByColumnTestCase<T = Data> = {
+  statement: string
+  keyword?: string
+  fields?: Array<keyof T>
+  result: Array<GenericTableRow<T>>
+}
+
+type PaginateTestCase<T = Data> = {
+  statement: string
+  offset: number | null
+  currentPage: number | null
+  data: Array<GenericTableRow<T>> | null
+  result: Array<GenericTableRow<T>> | null
+}
+
+type RowSelectTestCase<T = Data> = {
+  statement: string
+  event: React.ChangeEvent<HTMLInputElement>
+  rowUniqueAccessor: keyof T
+  rowId: string
+  data: Array<GenericTableRow<T>> | null
+  result: RowSelectOutput<T>
+}
+
+function getData() {
+  return [
+    { name: 'rodd', age: 12 },
+    { name: 'andy', age: 22 },
+    { name: 'andrew', age: 22 },
+    { name: 'zodd', age: 32 },
+  ]
+}
+
+let testData: Array<GenericTableRow>
+
+describe('Table helper functions:', () => {
+  beforeEach(() => {
+    testData = getData()
+  })
+  describe('sumCols', () => {
+    it('Should calculate the sum of the columns', () => {
+      expect(sumCols(1, true, true, true)).toBe(4)
+    })
+  })
+
+  describe('sortArray', () => {
+    const testCases: Array<SortArrayTestCase> = [
+      {
+        statement: 'Should sort array ascendingly according to name',
+        sortKey: 'name',
+        sortDirection: SortDirection.ASC,
+        result: [
+          { name: 'andrew', age: 22 },
+          { name: 'andy', age: 22 },
+          { name: 'rodd', age: 12 },
+          { name: 'zodd', age: 32 },
+        ],
+      },
+      {
+        statement: 'Should sort array descendingly according to name',
+        sortKey: 'name',
+        sortDirection: SortDirection.DESC,
+        result: [
+          { name: 'zodd', age: 32 },
+          { name: 'rodd', age: 12 },
+          { name: 'andy', age: 22 },
+          { name: 'andrew', age: 22 },
+        ],
+      },
+      {
+        statement: 'Should sort array ascendingly according to age',
+        sortKey: 'age',
+        sortDirection: SortDirection.ASC,
+        result: [
+          { name: 'rodd', age: 12 },
+          { name: 'andy', age: 22 },
+          { name: 'andrew', age: 22 },
+          { name: 'zodd', age: 32 },
+        ],
+      },
+      {
+        statement: 'Should sort array descendingly according to age',
+        sortKey: 'age',
+        sortDirection: SortDirection.DESC,
+        result: [
+          { name: 'zodd', age: 32 },
+          { name: 'andy', age: 22 },
+          { name: 'andrew', age: 22 },
+          { name: 'rodd', age: 12 },
+        ],
+      },
+    ]
+    testCases.map((item: SortArrayTestCase) => {
+      it(item.statement, () => {
+        expect(sortArray(testData, item.sortKey, item.sortDirection)).toEqual(
+          item.result,
+        )
+      })
+    })
+  })
+
+  describe('filterArrayByColumns', () => {
+    const testCases: Array<FilterDataByColumnTestCase> = [
+      {
+        statement: 'Should return original array if filter columns is empty',
+        filterColumns: [],
+        result: getData(),
+      },
+      {
+        statement: 'Should return filtered array based on filter columns',
+        filterColumns: [
+          { accessor: 'age', value: 22 },
+          { accessor: 'name', value: ['andrew'] },
+        ],
+        result: [{ age: 22, name: 'andrew' }],
+      },
+    ]
+    testCases.map((item: FilterDataByColumnTestCase) => {
+      it(item.statement, () => {
+        expect(filterArrayByColumns(testData, item.filterColumns)).toEqual(
+          item.result,
+        )
+      })
+    })
+  })
+
+  describe('searchTextByColumns', () => {
+    const testCases: Array<SearchTextByColumnTestCase> = [
+      {
+        statement:
+          'Should return empty array if keyword and fields are undefined',
+        keyword: undefined,
+        fields: undefined,
+        result: [],
+      },
+      {
+        statement: 'Should return empty array if keyword is undefined',
+        keyword: undefined,
+        fields: ['age'],
+        result: [],
+      },
+      {
+        statement: 'Should return empty array if field defined is not existed',
+        keyword: '1',
+        fields: ['age2' as any],
+        result: [],
+      },
+      {
+        statement:
+          'Should return filtered array based on string keyword and fields defined',
+        keyword: 'andrew',
+        fields: ['name'],
+        result: [{ name: 'andrew', age: 22 }],
+      },
+      {
+        statement:
+          'Should return filtered array based on numbered keyword and fields defined',
+        keyword: 32 as any,
+        fields: ['age'],
+        result: [{ name: 'zodd', age: 32 }],
+      },
+    ]
+    testCases.map((item: SearchTextByColumnTestCase) => {
+      it(item.statement, () => {
+        expect(
+          searchTextByColumns(
+            testData,
+            item.keyword as string,
+            item.fields as any,
+          ),
+        ).toEqual(item.result)
+      })
+    })
+  })
+
+  describe('paginate', () => {
+    const testCases: Array<PaginateTestCase> = [
+      {
+        statement: 'Should return original array if offset is null',
+        offset: null,
+        currentPage: null,
+        data: getData(),
+        result: getData(),
+      },
+      {
+        statement: 'Should return original array if data is null',
+        offset: 1,
+        currentPage: null,
+        data: null,
+        result: null,
+      },
+      {
+        statement: 'Should return original array if data is empty',
+        offset: 1,
+        currentPage: null,
+        data: [],
+        result: [],
+      },
+      {
+        statement: 'Should return paginated array',
+        offset: 1,
+        currentPage: 0,
+        data: getData(),
+        result: [getData()[0]],
+      },
+    ]
+    testCases.map((item: PaginateTestCase) => {
+      it(item.statement, () => {
+        expect(
+          paginate(
+            item.data as any,
+            item.offset as any,
+            item.currentPage as any,
+          ),
+        ).toEqual(item.result)
+      })
+    })
+  })
+
+  describe('onRowSelect', () => {
+    const testCases: Array<RowSelectTestCase> = [
+      {
+        statement: 'Should return original array if offset is null',
+        event: { target: { checked: true } } as any,
+        rowUniqueAccessor: 'name',
+        rowId: 'andrew',
+        data: null,
+        result: {
+          data: undefined as any,
+          isAllSelected: false,
+          isIndeterminate: false,
+        },
+      },
+      {
+        statement: 'Should check all if rowId is all',
+        event: { target: { checked: true } } as any,
+        rowUniqueAccessor: 'name',
+        rowId: 'all',
+        data: getData(),
+        result: {
+          data: getData().map((item: GenericTableRow<Data>) => {
+            item.checked = true
+            return item
+          }),
+          isAllSelected: true,
+          isIndeterminate: false,
+        },
+      },
+      {
+        statement: 'Should check selected row',
+        event: { target: { checked: true } } as any,
+        rowUniqueAccessor: 'name',
+        rowId: 'andrew',
+        data: getData(),
+        result: {
+          data: getData().map((item: GenericTableRow<Data>) => {
+            if (item.name === 'andrew') {
+              item.checked = true
+            }
+            return item
+          }),
+          isAllSelected: undefined as any,
+          isIndeterminate: true,
+        },
+      },
+    ]
+    testCases.map((item: RowSelectTestCase) => {
+      it(item.statement, () => {
+        expect(
+          onRowSelect(
+            item.event,
+            item.data as any,
+            item.rowUniqueAccessor,
+            item.rowId,
+          ),
+        ).toEqual(item.result)
+      })
+    })
+  })
+})

package/src/lib/table/components/parts/helperFunctions/helperFunctions.ts

@@ -0,0 +1,202 @@
+import {
+  FilterColumn,
+  GenericTableRow,
+  SortDirection,
+} from '../../table-typings'
+
+/**
+ * sum the total of columns or cols in a row
+ * @param colsLength the length of the columns
+ * @param useSelection add a column for selection checkboxes
+ * @param useShowActionColumn add another column for action columns
+ * @param useGroupBy add another columns for groupby
+ */
+export function sumCols(
+  colsLength: number,
+  useSelection?: boolean,
+  useShowActionColumn?: boolean,
+  useGroupBy?: boolean,
+): number {
+  let sum = colsLength
+
+  if (useSelection) {
+    sum = sum + 1
+  }
+
+  if (useGroupBy) {
+    sum = sum + 1
+  }
+  if (useShowActionColumn) {
+    sum = sum + 1
+  }
+
+  return sum
+}
+
+/**
+ * sort array of tabke rows
+ * @param items table rows array
+ * @param columnName the target column name
+ * @param sortDirection the sort direction
+ * @return Array of tableRow
+ */
+export function sortArray<T>(
+  items: Array<T> = [],
+  columnName: keyof T,
+  sortDirection: SortDirection,
+): Array<T> {
+  const languages: Readonly<Array<string>> = window.navigator?.languages || [
+    'sw',
+    'en',
+  ]
+
+  const sortedItems: Array<any> = [...items].sort(
+    (firstItem: T, secondItem: T) => {
+      let result = 0
+      if (sortDirection === SortDirection.ASC) {
+        if (
+          isNaN(secondItem[columnName] as number) &&
+          isNaN(firstItem[columnName] as number)
+        ) {
+          result = String(firstItem[columnName]).localeCompare(
+            String(secondItem[columnName]),
+            languages as Array<string>,
+            { sensitivity: 'base', ignorePunctuation: true },
+          )
+        } else {
+          result =
+            (firstItem[columnName] as number) -
+            (secondItem[columnName] as number)
+        }
+      } else {
+        if (
+          isNaN(secondItem[columnName] as number) &&
+          isNaN(firstItem[columnName] as number)
+        ) {
+          result = String(secondItem[columnName]).localeCompare(
+            String(firstItem[columnName]),
+            languages as Array<string>,
+            { sensitivity: 'base', ignorePunctuation: true },
+          )
+        } else {
+          result =
+            (secondItem[columnName] as number) -
+            (firstItem[columnName] as number)
+        }
+      }
+      return result
+    },
+  )
+  return sortedItems
+}
+
+/**
+ *
+ * @param data table data
+ * @param filterColumns filter columns
+ */
+export function filterArrayByColumns<T>(
+  data: Array<T>,
+  filterColumns: Array<FilterColumn<T>>,
+): Array<T> {
+  return data.filter((row: T) => {
+    return (
+      filterColumns.length === 0 ||
+      filterColumns.every((column: FilterColumn<T>) => {
+        return Array.isArray(column.value)
+          ? column.value.length === 0 ||
+              column.value.indexOf(row[column.accessor]) > -1
+          : row[column.accessor] === column.value
+      })
+    )
+  })
+}
+
+/**
+ * search text in array of table row
+ * @param data the array of table rows
+ * @param keyword The keyword to search in the array
+ * @param searchFields the target field to search
+ */
+export function searchTextByColumns<T>(
+  data: Array<T>,
+  keyword: string,
+  searchFields: Array<keyof T>,
+): Array<T> {
+  return [...data].filter((row: T) => {
+    const searchText = String(keyword)
+
+    return searchFields?.some((searchColumn: keyof T) => {
+      let result = false
+      const regEx = new RegExp(searchText, 'gi')
+      if (row[searchColumn] === null || row[searchColumn] === undefined) {
+        result = false
+      } else if (typeof row[searchColumn] === 'string') {
+        result = (row[searchColumn] as string).search(regEx) > -1
+      } else if (typeof row[searchColumn] === 'number') {
+        result = String(row[searchColumn]).search(regEx) !== -1
+      }
+      return result
+    })
+  })
+}
+
+/**
+ * paginate data
+ * @param data table data
+ * @param offset page size
+ * @param currentPage current page index
+ */
+export function paginate<T = any>(
+  data: Array<T>,
+  offset: number,
+  currentPage: number,
+) {
+  if (offset && data?.length > 0) {
+    const start: number = currentPage * offset
+    const end: number = offset + start
+
+    const currentPageData: Array<T> = data?.slice(start, end)
+    return currentPageData
+  }
+  return data
+}
+
+export interface RowSelectOutput<T = any> {
+  data: Array<GenericTableRow<T>>
+  isAllSelected: boolean
+  isIndeterminate: boolean
+}
+
+/**
+ * on row select
+ * @param event input event
+ * @param data rows of data
+ * @param rowUniqueAccessor row unique accessor
+ * @param rowId row id value
+ */
+export function onRowSelect<T = any>(
+  event: React.ChangeEvent<HTMLInputElement>,
+  data: Array<GenericTableRow<T>>,
+  rowUniqueAccessor: keyof GenericTableRow<T>,
+  rowId: string,
+): RowSelectOutput<T> {
+  const target: HTMLInputElement = event.target
+  let isAllSelected: boolean | undefined = true
+  let isIndeterminate: boolean | undefined = false
+  const newData: Array<GenericTableRow<T>> = data?.map(
+    (row: GenericTableRow<T>) => {
+      if (row[rowUniqueAccessor] === rowId || rowId === 'all') {
+        row.checked = target.checked
+      }
+      isAllSelected = isAllSelected && row.checked
+      isIndeterminate = isIndeterminate || row.checked
+      return row
+    },
+  )
+  return {
+    data: newData,
+    isAllSelected: !!newData && isAllSelected,
+    isIndeterminate: isIndeterminate && !isAllSelected,
+  }
+}

package/src/lib/table/components/parts/helperFunctions/index.ts

@@ -0,0 +1 @@
+export * from './helperFunctions'

package/src/lib/table/components/table-typings.ts

@@ -0,0 +1,16 @@
+export enum SortDirection {
+  ASC = 'ASC',
+  DESC = 'DESC',
+}
+
+export interface FilterColumn<T = any> {
+  accessor: keyof T
+  value: any
+}
+
+export type GenericTableRow<T = any> = T & {
+  id?: string
+  checked?: boolean
+  expanded?: boolean
+  indeterminate?: boolean
+}

package/src/lib/table/index.tsx

@@ -0,0 +1 @@
+export * from './components'