@addev-be/ui 0.11.7 → 0.12.0

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

@@ -1,319 +1,319 @@
-/* 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') ?? '',
-    excelFormatter: () => 'dd/mm/yyyy',
-    excelValue: (date) => moment(date).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 dateTimeColumn = <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 HH:mm:ss') ?? '',
-    excelFormatter: () => 'dd/mm/yyyy hh:mm:ss',
-    excelValue: (date) => moment(date).format('DD/MM/YYYY HH:mm:ss') ?? '',
-    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 HH:mm:ss') ?? '',
-    },
-    ...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]} readOnly />
-        <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,
-  },
-});
+/* 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') ?? '',
+    excelFormatter: () => 'dd/mm/yyyy',
+    excelValue: (date) => moment(date).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 dateTimeColumn = <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 HH:mm:ss') ?? '',
+    excelFormatter: () => 'dd/mm/yyyy hh:mm:ss',
+    excelValue: (date) => moment(date).format('DD/MM/YYYY HH:mm:ss') ?? '',
+    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 HH:mm:ss') ?? '',
+    },
+    ...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]} readOnly />
+        <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,
+  },
+});