@addev-be/ui 0.1.18

package/src/components/data/DataGrid/helpers/advancedRequests.tsx

@@ -0,0 +1,61 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import {
+  AdvancedRequestDTO,
+  ConditionDTO,
+  OrderByDTO,
+} from '../../../../services/advancedRequests';
+
+import { DataGridColumns } from '../types';
+
+export const getAdvancedRequestDto = <R,>({
+  type,
+  columns,
+  conditions = [],
+  orderBy = [],
+  start = 0,
+  length = 100,
+  getTotal = false,
+  addIdColumn = true,
+}: {
+  type: string;
+  columns: DataGridColumns<R>;
+  conditions?: ConditionDTO[];
+  orderBy?: OrderByDTO[];
+  start?: number;
+  length?: number;
+  getTotal?: boolean;
+  addIdColumn?: boolean;
+}): AdvancedRequestDTO => ({
+  fields: [
+    ...(Object.keys(columns).includes('Id') || addIdColumn === false
+      ? []
+      : [{ fieldName: 'Id' }]),
+    ...Object.keys(columns).map((key) =>
+      columns[key].field
+        ? {
+            ...columns[key].field,
+            fieldName: columns[key].field?.fieldName ?? key,
+            fieldAlias: key,
+          }
+        : {
+            fieldName: key,
+            fieldAlias: key,
+          }
+    ),
+  ],
+  conditions: [
+    ...conditions,
+    {
+      field: {
+        fieldName: 'DeletedAt',
+      },
+      operator: 'isNull' as const,
+    },
+  ],
+  orderBy,
+  type,
+  start,
+  length,
+  getTotal,
+});

package/src/components/data/DataGrid/helpers/columns.tsx

@@ -0,0 +1,259 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import {
+  DataGridColumn,
+  DataGridColumns,
+  DataGridFilterType,
+  DataGridSettings,
+} from '../types';
+import {
+  formatMoney,
+  formatNumber,
+  formatPercentage,
+} from '../../../../helpers/numbers';
+
+import _ from 'lodash';
+import moment from 'moment';
+
+export const isColumnVisible = <R,>(
+  obj: DataGridColumn<R, any> | DataGridSettings
+): boolean => {
+  return obj?.order !== -1;
+};
+
+export const textColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<DataGridColumn<R, DataGridFilterType>>
+): DataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (col, row) => row[key] ?? '',
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: {
+      type: 'text',
+      operator: 'contains',
+      values: [''],
+      getter: (row) => row[key] ?? '',
+    },
+    ...options,
+  },
+});
+
+export const mailColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<DataGridColumn<R, DataGridFilterType>>
+): DataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (col, row) => (
+      <a
+        // className="text-blue-500 hover:text-blue-700"
+        href={`mailto:${row[key]}`}
+      >
+        {row[key] ?? ''}
+      </a>
+    ),
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: {
+      type: 'text',
+      operator: 'contains',
+      values: [''],
+      getter: (row) => row[key] ?? '',
+    },
+    ...options,
+  },
+});
+
+export const phoneColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<DataGridColumn<R, DataGridFilterType>>
+): DataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (col, row) => (
+      <a
+        // className="text-blue-500 hover:text-blue-700"
+        href={`tel:${row[key]}`}
+      >
+        {row[key] ?? ''}
+      </a>
+    ),
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: {
+      type: 'text',
+      operator: 'contains',
+      values: [''],
+      getter: (row) => row[key] ?? '',
+    },
+    ...options,
+  },
+});
+
+export const dateColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<DataGridColumn<R, DataGridFilterType>>
+): DataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (col, row) => moment(row[key]).format('DD/MM/YYYY') ?? '',
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: {
+      type: 'text',
+      operator: 'contains',
+      values: [''],
+      getter: (row) => row[key] ?? '',
+    },
+    ...options,
+  },
+});
+
+export const monthColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<DataGridColumn<R, DataGridFilterType>>
+): DataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (col, row) => (row[key] ? `${row[key]} mois ` : ''),
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: {
+      type: 'text',
+      operator: 'contains',
+      values: [''],
+      getter: (row) => row[key] ?? '',
+    },
+    ...options,
+  },
+});
+
+export const numberColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  decimals = 2,
+  options?: Partial<DataGridColumn<R, DataGridFilterType>>
+): DataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (col, row) => formatNumber(row[key], decimals) ?? '',
+    excelFormatter: () => '#',
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: {
+      type: 'number',
+      operator: 'equals',
+      values: [0],
+      getter: (row) => row[key] ?? 0,
+    },
+    ...options,
+  },
+});
+
+export const moneyColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  decimals = 2,
+  options?: Partial<DataGridColumn<R, DataGridFilterType>>
+): DataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (col, row) => formatMoney(row[key], decimals) ?? '',
+    excelFormatter: () => '#0.00',
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: {
+      type: 'number',
+      operator: 'equals',
+      values: [0],
+      getter: (row) => row[key] ?? 0,
+    },
+    ...options,
+  },
+});
+
+export const percentageColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<DataGridColumn<R, DataGridFilterType>>
+): DataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (col, row) => formatPercentage(row[key]) ?? '',
+    excelFormatter: () => '#0.00',
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: {
+      type: 'number',
+      operator: 'equals',
+      values: [0],
+      getter: (row) => row[key] ?? 0,
+    },
+    ...options,
+  },
+});
+
+export const checkboxColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<DataGridColumn<R, DataGridFilterType>>
+): DataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (col, row) => (
+      <>
+        <input type="checkbox" checked={row[key]} />
+        <span>{row[key] ? ' Oui' : ' Non'}</span>
+      </>
+    ),
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: {
+      type: 'number',
+      operator: 'equals',
+      values: [0],
+      getter: (row) => row[key] ?? 0,
+    },
+    ...options,
+  },
+});
+
+export const colorColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<DataGridColumn<R, DataGridFilterType>>
+): DataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (col, row) => (
+      <div style={{ backgroundColor: row[key] }}>{row[key] ?? ''}</div>
+    ),
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: {
+      type: 'text',
+      operator: 'contains',
+      values: [''],
+      getter: (row) => row[key] ?? '',
+    },
+    ...options,
+  },
+});
+
+export const withGroupBy = <R extends Record<string, any>>(
+  columns: DataGridColumns<R>
+): DataGridColumns<R> =>
+  _.mapValues(columns, (column, key) => ({
+    ...column,
+    field: {
+      ...(column.field ?? { fieldName: key }),
+      groupBy: true,
+    },
+  }));

package/src/components/data/DataGrid/helpers/filters.ts

@@ -0,0 +1,219 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import {
+  DataGridFilter,
+  DataGridFilterCheckbox,
+  DataGridFilterDataType,
+  DataGridFilterFormatter,
+  DataGridFilterGroup,
+  DataGridFilterPredicateBuilder,
+  DataGridFilterPredicates,
+  DataGridFilterType,
+  DataGridFilters,
+} from '../types';
+
+import { ConditionDTO } from '../../../../services/advancedRequests';
+import _ from 'lodash';
+import moment from 'moment';
+
+const escapeRegExp = (s: string) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+const textContainsPredicate: DataGridFilterPredicateBuilder<string> = (
+  ...filterValues
+) => {
+  const regex = new RegExp(`${escapeRegExp(filterValues[0])}`, 'i');
+  return (valueToVerify: string) => regex.test(valueToVerify);
+};
+const textNotContainsPredicate: DataGridFilterPredicateBuilder<string> = (
+  ...filterValues
+) => {
+  const regex = new RegExp(`${escapeRegExp(filterValues[0])}`, 'i');
+  return (valueToVerify: string) => !regex.test(valueToVerify);
+};
+const textEqualsPredicate: DataGridFilterPredicateBuilder<string> = (
+  ...filterValues
+) => {
+  const regex = new RegExp(`^${escapeRegExp(filterValues[0])}$`, 'i');
+  return (valueToVerify: string) => regex.test(valueToVerify);
+};
+const textNotEqualsPredicate: DataGridFilterPredicateBuilder<string> = (
+  ...filterValues
+) => {
+  const regex = new RegExp(`^${escapeRegExp(filterValues[0])}$`, 'i');
+  return (valueToVerify: string) => !regex.test(valueToVerify);
+};
+const textStartsWithPredicate: DataGridFilterPredicateBuilder<string> = (
+  ...filterValues
+) => {
+  const regex = new RegExp(`^${escapeRegExp(filterValues[0])}`, 'i');
+  return (valueToVerify: string) => regex.test(valueToVerify);
+};
+const textEndsWithPredicate: DataGridFilterPredicateBuilder<string> = (
+  ...filterValues
+) => {
+  const regex = new RegExp(`${escapeRegExp(filterValues[0])}$`, 'i');
+  return (valueToVerify: string) => regex.test(valueToVerify);
+};
+const textInArrayPredicate: DataGridFilterPredicateBuilder<string> = (
+  ...filterValues
+) => {
+  return (valueToVerify: string) => filterValues.includes(valueToVerify);
+};
+
+const numberEqualsPredicate: DataGridFilterPredicateBuilder<number> =
+  (...filterValues) =>
+  (valueToVerify: number) =>
+    valueToVerify === filterValues[0];
+const numberNotEqualsPredicate: DataGridFilterPredicateBuilder<number> =
+  (...filterValues) =>
+  (valueToVerify: number) =>
+    valueToVerify !== filterValues[0];
+const numberLessThanPredicate: DataGridFilterPredicateBuilder<number> =
+  (...filterValues) =>
+  (valueToVerify: number) =>
+    valueToVerify < filterValues[0];
+const numberLessThanOrEqualPredicate: DataGridFilterPredicateBuilder<number> =
+  (...filterValues) =>
+  (valueToVerify: number) =>
+    valueToVerify <= filterValues[0];
+const numberGreaterThanPredicate: DataGridFilterPredicateBuilder<number> =
+  (...filterValues) =>
+  (valueToVerify: number) =>
+    valueToVerify > filterValues[0];
+const numberGreaterThanOrEqualPredicate: DataGridFilterPredicateBuilder<
+  number
+> =
+  (...filterValues) =>
+  (valueToVerify: number) =>
+    valueToVerify >= filterValues[0];
+const numberInRangePredicate: DataGridFilterPredicateBuilder<number> =
+  (...filterValues) =>
+  (valueToVerify: number) =>
+    valueToVerify >= filterValues[0] && valueToVerify <= filterValues[1];
+const numberInArrayPredicate: DataGridFilterPredicateBuilder<number> = (
+  ...filterValues
+) => {
+  return (valueToVerify: number) => filterValues.includes(valueToVerify);
+};
+
+export const filtersPredicates: DataGridFilterPredicates = {
+  text: {
+    contains: textContainsPredicate,
+    notContains: textNotContainsPredicate,
+    equals: textEqualsPredicate,
+    notEquals: textNotEqualsPredicate,
+    startsWith: textStartsWithPredicate,
+    endsWith: textEndsWithPredicate,
+    inArray: textInArrayPredicate,
+  },
+  number: {
+    equals: numberEqualsPredicate,
+    notEquals: numberNotEqualsPredicate,
+    lessThan: numberLessThanPredicate,
+    lessThanOrEqual: numberLessThanOrEqualPredicate,
+    greaterThan: numberGreaterThanPredicate,
+    greaterThanOrEqual: numberGreaterThanOrEqualPredicate,
+    inRange: numberInRangePredicate,
+    inArray: numberInArrayPredicate,
+  },
+};
+
+export const applyFilters = <R>(
+  rows: R[],
+  filters: DataGridFilter<R, DataGridFilterType>[]
+): R[] => {
+  return filters.reduce(
+    (tempRows, filter) => applyFilter(tempRows, filter),
+    rows
+  );
+};
+
+export const applyFilter = <R, T extends DataGridFilterType>(
+  rows: R[],
+  filter: DataGridFilter<R, T>
+): R[] => {
+  const predicateBuilder = filtersPredicates[filter.type][filter.operator];
+  if (typeof predicateBuilder !== 'function') return rows;
+  const predicate = predicateBuilder(...filter.values);
+  return rows.filter((row) => predicate(filter.getter(row)));
+};
+
+export const defaultFilterGetter = (row: any, columnKey: string) =>
+  row[columnKey];
+
+export const defaultFilterValues: {
+  [K in DataGridFilterType]: DataGridFilterDataType<K>;
+} = {
+  text: '',
+  number: 0,
+};
+
+export const defaultValueParsers: {
+  [K in DataGridFilterType]: (value: string) => DataGridFilterDataType<K>;
+} = {
+  text: (value) => value,
+  number: (value) => parseFloat(value),
+};
+
+export const groupDatesByYearAndMonth = (dates: any[]) =>
+  dates.reduce((acc: Record<string, Record<string, any[]>>, date) => {
+    const year = moment(date).format('YYYY');
+    if (!acc[year]) {
+      acc[year] = {};
+    }
+    const yearAndMonth = moment(date).format(`YYYY-MM`);
+    if (!acc[year][yearAndMonth]) {
+      acc[year][yearAndMonth] = [];
+    }
+    acc[year][yearAndMonth].push(date);
+    return acc;
+  }, {} as Record<string, Record<string, any[]>>);
+
+export const getDateGroups = <R extends string | number | null>(
+  dates: any[]
+): DataGridFilterGroup<R>[] => {
+  const grouperDates = groupDatesByYearAndMonth(dates);
+  return Object.entries(grouperDates).map(([year, months]) => ({
+    name: year,
+    values: Object.values(months).flat(),
+    groups: Object.entries(months).map(([month, dates]) => ({
+      name: month,
+      values: dates,
+    })),
+  }));
+};
+
+export const convertFiltersToConditions = <R>(
+  filters: DataGridFilters<R>
+): ConditionDTO[] => {
+  return Object.entries(filters).map(([columnKey, filter]) => {
+    const condition: ConditionDTO = {
+      field: {
+        fieldName: columnKey,
+      },
+      operator: filter.operator,
+      value: ['inArray', 'inRange'].includes(filter.operator)
+        ? filter.values
+        : _.castArray(filter.values)[0],
+    };
+    return condition;
+  });
+};
+
+export const getCheckboxes = <R extends string | number | null>(
+  values: R[],
+  formatter: DataGridFilterFormatter,
+  groups?: DataGridFilterGroup<R>[],
+  level = 0
+): DataGridFilterCheckbox<R>[] => [
+  ...(groups ?? [])
+    .map((group) =>
+      getCheckboxes(group.values ?? [], formatter, group.groups, level + 1)
+    )
+    .flat(),
+  ...values.map((value) => ({
+    displayValue: formatter(value),
+    values: [value],
+    level,
+  })),
+];

package/src/components/data/DataGrid/helpers/index.ts

@@ -0,0 +1,3 @@
+export * from './columns';
+export * from './filters';
+export * from './advancedRequests';

package/src/components/data/DataGrid/hooks/index.ts

@@ -0,0 +1,30 @@
+import { DataGridColumns, DataGridContext } from '../types';
+import { useContext, useMemo } from 'react';
+
+import { isColumnVisible } from '../helpers';
+import { pickBy } from 'lodash';
+
+export { useDataGridCopy } from './useDataGridCopy';
+export { useDataGridSettings } from './useDataGridSettings';
+export { useDataGrid } from './useDataGrid';
+
+export const useDataGridContext = <R>(context: DataGridContext<R>) =>
+  useContext(context);
+
+export const useVisibleAndHiddenColumns = <R>(columns: DataGridColumns<R>) =>
+  useMemo(
+    () => [
+      pickBy(columns, (col) => isColumnVisible(col)),
+      pickBy(columns, (col) => !isColumnVisible(col)),
+    ],
+    [columns]
+  );
+
+export const useSortedColumns = <R>(columns: DataGridColumns<R>) =>
+  useMemo(
+    () =>
+      Object.entries(columns)
+        .filter(([, col]) => isColumnVisible(col))
+        .sort((a, b) => (a[1].order ?? 0) - (b[1].order ?? 0)),
+    [columns]
+  );