@addev-be/ui 0.2.16 → 0.2.18

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

@@ -0,0 +1,295 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { DataGridColumn, DataGridColumns, DataGridSettings } from '../types';
+import { dateFilter, numberFilter, textFilter } from './filters';
+import {
+  formatMoney,
+  formatNumber,
+  formatNumberInvariant,
+  formatPercentage,
+} from '../../../../helpers/numbers';
+
+import moment from 'moment';
+import { repeat } from 'lodash';
+
+export const isColumnVisible = <R,>(
+  obj: DataGridColumn<R> | DataGridSettings
+): boolean => obj?.order !== -1;
+
+export const buildExcelFormat = (decimals = 2, suffix = '') =>
+  `#0${decimals > 0 ? `.${repeat('0', decimals)}` : ''}${suffix}`;
+
+export const textColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<DataGridColumn<R>>
+): DataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => row[key] ?? '',
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    footer: (_, filteredRows) => `${filteredRows.length} éléments`,
+    filter: textFilter(key),
+    ...options,
+  },
+});
+
+export const mailColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<DataGridColumn<R>>
+): DataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (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] ?? '',
+    footer: (_, filteredRows) => `${filteredRows.length} éléments`,
+    filter: textFilter(key),
+    ...options,
+  },
+});
+
+export const phoneColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<DataGridColumn<R>>
+): DataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (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] ?? '',
+    footer: (_, filteredRows) => `${filteredRows.length} éléments`,
+    filter: textFilter(key),
+    ...options,
+  },
+});
+
+export const dateColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<DataGridColumn<R>>
+): DataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    type: 'date',
+    render: (row) => moment(row[key]).format('DD/MM/YYYY') ?? '',
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    footer: (_, filteredRows) => `${filteredRows.length} éléments`,
+    filter: {
+      ...dateFilter(key),
+      renderer: (value) => moment(value).format('DD/MM/YYYY') ?? '',
+    },
+    ...options,
+  },
+});
+
+export const monthColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<DataGridColumn<R>>
+): DataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => (row[key] ? `${row[key]} mois ` : ''),
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    footer: (_, filteredRows) => `${filteredRows.length} éléments`,
+    filter: textFilter(key),
+    ...options,
+  },
+});
+
+export const numberColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  decimals = 2,
+  options?: Partial<DataGridColumn<R>>
+): DataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => formatNumber(row[key], decimals) ?? '',
+    excelFormatter: () => buildExcelFormat(decimals),
+    excelValue: (value) => formatNumberInvariant(value, decimals),
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    footer: {
+      sum: (_, filteredRows) =>
+        formatNumber(
+          filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0),
+          decimals
+        ),
+      average: (_, filteredRows) =>
+        formatNumber(
+          filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0) /
+            (filteredRows.length || 1),
+          decimals
+        ),
+      count: (_, filteredRows) => `${filteredRows.length} éléments`,
+      max: (_, filteredRows) =>
+        formatNumber(
+          Math.max(...filteredRows.map((row) => row[key] ?? 0)),
+          decimals
+        ),
+      min: (_, filteredRows) =>
+        formatNumber(
+          Math.min(...filteredRows.map((row) => row[key] ?? 0)),
+          decimals
+        ),
+    },
+    filter: {
+      ...numberFilter(key),
+      renderer: (value) => formatNumber(value, decimals) ?? '',
+    },
+    ...options,
+  },
+});
+
+export const moneyColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  decimals = 2,
+  options?: Partial<DataGridColumn<R>>
+): DataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => formatMoney(row[key], decimals) ?? '',
+    excelFormatter: () => buildExcelFormat(decimals, ' €'),
+    excelValue: (value) => formatNumberInvariant(value, decimals),
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: {
+      ...numberFilter(key),
+      renderer: (value) => formatMoney(value, decimals) ?? '',
+    },
+    footer: {
+      sum: (_, filteredRows) =>
+        formatMoney(
+          filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0),
+          decimals
+        ),
+      average: (_, filteredRows) =>
+        formatMoney(
+          filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0) /
+            (filteredRows.length || 1),
+          decimals
+        ),
+      count: (_, filteredRows) => `${filteredRows.length} éléments`,
+      max: (_, filteredRows) =>
+        formatMoney(
+          Math.max(...filteredRows.map((row) => row[key] ?? 0)),
+          decimals
+        ),
+      min: (_, filteredRows) =>
+        formatMoney(
+          Math.min(...filteredRows.map((row) => row[key] ?? 0)),
+          decimals
+        ),
+    },
+    ...options,
+  },
+});
+
+export const percentageColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  decimals = 2,
+  options?: Partial<DataGridColumn<R>>
+): DataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => formatPercentage(row[key]) ?? '',
+    excelFormatter: () => buildExcelFormat(decimals, '%'),
+    excelValue: (value) => formatNumberInvariant(value, decimals),
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: numberFilter(key),
+    footer: {
+      average: (_, filteredRows) =>
+        formatNumber(
+          filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0) /
+            (filteredRows.length || 1),
+          decimals
+        ),
+      count: (_, filteredRows) => `${filteredRows.length} éléments`,
+      max: (_, filteredRows) =>
+        formatNumber(
+          Math.max(...filteredRows.map((row) => row[key] ?? 0)),
+          decimals
+        ),
+      min: (_, filteredRows) =>
+        formatNumber(
+          Math.min(...filteredRows.map((row) => row[key] ?? 0)),
+          decimals
+        ),
+      sum: (_, filteredRows) =>
+        formatNumber(
+          filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0),
+          decimals
+        ),
+    },
+    ...options,
+  },
+});
+
+export const checkboxColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<DataGridColumn<R>>
+): DataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => (
+      <>
+        <input type="checkbox" checked={row[key]} />
+        <span>{row[key] ? ' Oui' : ' Non'}</span>
+      </>
+    ),
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: numberFilter(key),
+    footer: {
+      count: (_, filteredRows) => `${filteredRows.length} éléments`,
+      checked: (_, filteredRows) =>
+        `${filteredRows.filter((row) => !!row[key]).length} cochés`,
+      unchecked: (_, filteredRows) =>
+        `${filteredRows.filter((row) => !row[key]).length} décochés`,
+    },
+    ...options,
+  },
+});
+
+export const colorColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<DataGridColumn<R>>
+): DataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => (
+      <div style={{ backgroundColor: row[key] }}>{row[key] ?? ''}</div>
+    ),
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: textFilter(key),
+    footer: (rows) => `${rows.length} éléments`,
+    ...options,
+  },
+});

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

@@ -0,0 +1,287 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import {
+  DataGridFilter,
+  DataGridFilterCheckbox,
+  DataGridFilterDataType,
+  DataGridFilterFormatter,
+  DataGridFilterGroup,
+  DataGridFilterPredicateBuilder,
+  DataGridFilterPredicates,
+  DataGridFilterRenderer,
+  DataGridFilterType,
+  DataGridFilterValue,
+} from '../types';
+
+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);
+};
+
+const dateBeforePredicate: DataGridFilterPredicateBuilder<string> = (
+  ...filterValues
+) => {
+  const limitDate = moment(filterValues[0]);
+  return (valueToVerify) => moment(valueToVerify).isBefore(limitDate);
+};
+const dateAfterPredicate: DataGridFilterPredicateBuilder<string> = (
+  ...filterValues
+) => {
+  const limitDate = moment(filterValues[0]);
+  return (valueToVerify) => moment(valueToVerify).isAfter(limitDate);
+};
+const dateEqualsPredicate: DataGridFilterPredicateBuilder<string> = (
+  ...filterValues
+) => {
+  const date = moment(filterValues[0]);
+  return (valueToVerify) => moment(valueToVerify).isSame(date);
+};
+const dateNotEqualsPredicate: DataGridFilterPredicateBuilder<string> = (
+  ...filterValues
+) => {
+  const date = moment(filterValues[0]);
+  return (valueToVerify) => !moment(valueToVerify).isSame(date);
+};
+const dateInRangePredicate: DataGridFilterPredicateBuilder<string> = (
+  ...filterValues
+) => {
+  const date1 = moment(filterValues[0]);
+  const date2 = moment(filterValues[1]);
+  const startDate = date1.isBefore(date2) ? date1 : date2;
+  const endDate = date1.isBefore(date2) ? date2 : date1;
+  return (valueToVerify) =>
+    moment(valueToVerify).isBetween(startDate, endDate, 'days', '[]');
+};
+const dateInArrayPredicate: DataGridFilterPredicateBuilder<string> = (
+  ...filterValues
+) => {
+  return (valueToVerify) => filterValues.includes(valueToVerify);
+};
+
+export const filtersPredicates: DataGridFilterPredicates = {
+  date: {
+    before: dateBeforePredicate,
+    after: dateAfterPredicate,
+    equals: dateEqualsPredicate,
+    notEquals: dateNotEqualsPredicate,
+    inRange: dateInRangePredicate,
+    inArray: dateInArrayPredicate,
+  },
+  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[] => {
+  return filters.reduce(
+    (tempRows, filter) => applyFilter(tempRows, filter),
+    rows
+  );
+};
+
+export const applyFilter = <R>(rows: R[], filter: DataGridFilter): R[] => {
+  const predicateBuilder = (filtersPredicates as any)[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>;
+} = {
+  date: '',
+  text: '',
+  number: 0,
+};
+
+export const defaultValueParsers: {
+  [K in DataGridFilterType]: (value: string) => DataGridFilterDataType<K>;
+} = {
+  date: (value) => moment(value).format('YYYY-MM-DD'),
+  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(`MM/YYYY`);
+    if (!acc[year][yearAndMonth]) {
+      acc[year][yearAndMonth] = [];
+    }
+    acc[year][yearAndMonth].push(date);
+    return acc;
+  }, {} as Record<string, Record<string, any[]>>);
+
+export const getDateGroups = (dates: any[]): DataGridFilterGroup[] => {
+  const grouperDates = groupDatesByYearAndMonth(dates);
+  return Object.entries(grouperDates).map(([year, months]) => ({
+    name: year,
+    displayValue: year,
+    values: Object.values(months).flat(),
+    groups: Object.entries(months).map(([month, dates]) => ({
+      displayValue: month,
+      name: month,
+      values: dates,
+    })),
+  }));
+};
+
+export const defaultRendererAndFormatter = (value: any) =>
+  String(value ?? '').trim() || '(Vides)';
+
+export const getCheckboxes = (
+  values: DataGridFilterValue[],
+  displayValue: DataGridFilterValue,
+  renderer: DataGridFilterRenderer,
+  formatter: DataGridFilterFormatter,
+  groups?: DataGridFilterGroup[],
+  level = 0
+): DataGridFilterCheckbox[] =>
+  groups
+    ? groups
+        .map<DataGridFilterCheckbox[]>((group) => [
+          {
+            displayValue: group.displayValue,
+            title: formatter(group.displayValue),
+            values: group.values ?? [],
+            level,
+          },
+          ...getCheckboxes(
+            group.values ?? [],
+            group.displayValue,
+            renderer,
+            formatter,
+            group.groups,
+            level + 1
+          ),
+        ])
+        .flat()
+    : values.map<DataGridFilterCheckbox>((value) => ({
+        displayValue: renderer(value),
+        title: formatter(value),
+        values: [value ?? ''],
+        level,
+      }));
+
+export const dateFilter = (key: string): DataGridFilter<'date'> => ({
+  type: 'date',
+  operator: 'before',
+  values: [''],
+  getter: (row) => row[key] ?? '',
+});
+
+export const textFilter = (key: string): DataGridFilter<'text'> => ({
+  type: 'text',
+  operator: 'contains',
+  values: [''],
+  getter: (row) => row[key] ?? '',
+});
+
+export const numberFilter = (key: string): DataGridFilter<'number'> => ({
+  type: 'number',
+  operator: 'equals',
+  values: [0],
+  getter: (row) => row[key] ?? '',
+});

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

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

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/columns';
+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]
+  );