@addev-be/ui 0.2.16 → 0.2.18

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

@@ -0,0 +1,277 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { SqlRequestDataGridColumn, SqlRequestDataGridColumns } from '../types';
+import {
+  buildExcelFormat,
+  numberFilter,
+  textFilter,
+} from '../../DataGrid/helpers';
+import {
+  formatMoney,
+  formatNumber,
+  formatNumberInvariant,
+  formatPercentage,
+} from '../../../../helpers/numbers';
+
+import { formatDate } from '../../../../helpers/dates';
+
+export const sqlTextColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<SqlRequestDataGridColumn<R>>
+): SqlRequestDataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => row[key] ?? '',
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
+    ...options,
+    footer: (rows) => `${rows[0][key]} éléments`,
+  },
+});
+
+/**
+ * Creates a column with a composed value from multiple fields,
+ * and filtered by a text filter on the first field
+ */
+export const sqlComposedColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  fields: string[],
+  options?: Partial<SqlRequestDataGridColumn<R>>
+): SqlRequestDataGridColumns<R> => ({
+  [key]: {
+    field: {
+      fieldAlias: key,
+      operator: 'jsonObject',
+      operands: fields.flatMap((field) => [
+        { constantValue: field },
+        { fieldName: field },
+      ]),
+    },
+    name: title,
+    render: (row) => row[key] ?? '',
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: {
+      ...textFilter(fields[0]),
+      getter: (value) => value[fields[0]] ?? 0,
+    },
+    filterField: fields[0],
+    sortField: fields[0],
+    footer: (rows) => `${rows[0][key]} éléments`,
+    ...options,
+  },
+});
+
+export const sqlMailColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<SqlRequestDataGridColumn<R>>
+): SqlRequestDataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => <a href={`mailto:${row[key]}`}>{row[key] ?? ''}</a>,
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
+    footer: (rows) => `${rows[0][key]} éléments`,
+    ...options,
+  },
+});
+
+export const sqlPhoneColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<SqlRequestDataGridColumn<R>>
+): SqlRequestDataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => <a href={`tel:${row[key]}`}>{row[key] ?? ''}</a>,
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
+    footer: (rows) => `${rows[0][key]} éléments`,
+    ...options,
+  },
+});
+
+export const sqlDateColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<SqlRequestDataGridColumn<R>>
+): SqlRequestDataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    type: 'date',
+    render: (row) => formatDate(row[key]),
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    excelFormatter: () => 'dd/mm/yyyy',
+    excelValue: (value) => formatDate(value, 'YYYY-MM-DD'),
+    filter: {
+      ...textFilter(key),
+      getter: (value) => value[key] ?? '',
+      formatter: (value) => formatDate(value),
+      renderer: (value) => formatDate(value),
+    },
+    footer: (rows) => `${rows[0][key]} éléments`,
+    ...options,
+  },
+});
+
+export const sqlMonthColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<SqlRequestDataGridColumn<R>>
+): SqlRequestDataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => (row[key] ? `${row[key]} mois ` : ''),
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
+    footer: (rows) => `${rows[0][key]} éléments`,
+    ...options,
+  },
+});
+
+export const sqlNumberColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  decimals = 2,
+  options?: Partial<SqlRequestDataGridColumn<R>>
+): SqlRequestDataGridColumns<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] ?? '',
+    filter: {
+      ...numberFilter(key),
+      getter: (value) => value[key] ?? 0,
+      renderer: (value) => formatNumber(value, decimals) ?? '',
+    },
+    footer: {
+      sum: null,
+      avg: null,
+      count: null,
+      max: null,
+      min: null,
+    },
+    ...options,
+  },
+});
+
+export const sqlMoneyColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  decimals = 2,
+  options?: Partial<SqlRequestDataGridColumn<R>>
+): SqlRequestDataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    type: 'number',
+    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),
+      getter: (value) => value[key] ?? 0,
+      renderer: (value) => formatMoney(value, decimals) ?? '',
+    },
+    footer: {
+      sum: null,
+      avg: null,
+      count: null,
+      max: null,
+      min: null,
+    },
+    ...options,
+  },
+});
+
+export const sqlPercentageColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  decimals = 2,
+  options?: Partial<SqlRequestDataGridColumn<R>>
+): SqlRequestDataGridColumns<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),
+      getter: (value) => value[key] ?? 0,
+      renderer: (value) => formatPercentage(value, decimals) ?? '',
+    },
+    ...options,
+  },
+});
+
+export const sqlCheckboxColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<SqlRequestDataGridColumn<R>>
+): SqlRequestDataGridColumns<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), getter: (value) => value[key] ?? 0 },
+    footer: (rows) => `${rows[0][key]} éléments`,
+    ...options,
+  },
+});
+
+export const sqlColorColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<SqlRequestDataGridColumn<R>>
+): SqlRequestDataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => (
+      <div
+        style={{ position: 'absolute', inset: 0, backgroundColor: row[key] }}
+      >
+        &nbsp;
+      </div>
+    ),
+    excelValue: () => '',
+    excelBackgroundColor: (value) => value,
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: {
+      ...textFilter(key),
+      getter: (value) => value[key] ?? '',
+      renderer: (value) => (
+        <div
+          style={{
+            backgroundColor: value,
+            width: 'var(--space-16)',
+            height: '1em',
+          }}
+        >
+          &nbsp;
+        </div>
+      ),
+    },
+    ...options,
+  },
+});

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

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

package/src/components/data/SqlRequestDataGrid/helpers/sqlRequests.ts

@@ -0,0 +1,16 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { ConditionDTO } from '../../../../services/sqlRequests';
+import { SqlRequestDataGridFilters } from '../types';
+import _ from 'lodash';
+
+export const convertSqlFiltersToConditions = (
+  filters: SqlRequestDataGridFilters
+): Record<string, ConditionDTO> =>
+  _.mapValues(filters, (filter, columnKey) => ({
+    field: columnKey,
+    operator: filter.operator,
+    value: ['inArray', 'inRange'].includes(filter.operator)
+      ? filter.values
+      : _.castArray<string | number | null>(filter.values)[0],
+  }));

package/src/components/data/SqlRequestDataGrid/index.tsx

@@ -0,0 +1,347 @@
+import {
+  ConditionDTO,
+  OrderByDTO,
+  SqlRequestFooterFunction,
+  SqlRequestRow,
+  useSqlRequestHandler,
+} from '../../../services/sqlRequests';
+import {
+  DataGridFilters,
+  DataGridFooterFunction,
+  DataGridSort,
+} from '../DataGrid/types';
+import _, { debounce } from 'lodash';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { DataGrid } from '../DataGrid';
+import { SqlRequestDataGridProps } from './types';
+import { convertSqlFiltersToConditions } from './helpers';
+import { isColumnVisible } from '../DataGrid/helpers';
+
+export const SqlRequestDataGrid = <R,>({
+  onSelectionChange: onSelectionChangeFromProps,
+  ...props
+}: SqlRequestDataGridProps<R>) => {
+  const currentRows = useRef<R[]>([]);
+  const [rows, setRows] = useState<R[]>([]);
+  const [start, setStart] = useState(0);
+  const [length, setLength] = useState(50);
+  const [count, setCount] = useState(-1);
+  const [sqlRequest, sqlIdRequest, sqlPartialRequest] = useSqlRequestHandler<R>(
+    props.type
+  );
+
+  const [conditions, setConditions] = useState<Record<string, ConditionDTO>>(
+    {}
+  );
+  const [orderBy, setOrderBy] = useState<OrderByDTO[]>(
+    Object.entries(props.initialSorts ?? {}).map(
+      ([columnKey, direction]): OrderByDTO => ({
+        field: props.columns[columnKey].field?.fieldAlias ?? columnKey,
+        type: props.columns[columnKey].type ?? 'text',
+        direction: direction.toUpperCase() as 'ASC' | 'DESC',
+      })
+    )
+  );
+
+  const [columnsKeys, visibleColumnsKeys] = useMemo(
+    () => [
+      [...Object.keys(props.columns), ...(props.hiddenColumns ?? [])],
+      [
+        ...Object.keys(props.columns).filter((key) =>
+          isColumnVisible(props.columns[key])
+        ),
+        ...(props.hiddenColumns ?? []),
+      ],
+    ],
+    [props.columns, props.hiddenColumns]
+  );
+  const columnTypes = useMemo(
+    () =>
+      visibleColumnsKeys.map((key) =>
+        String(props.columns[key]?.type ?? 'text')
+      ),
+    [visibleColumnsKeys, props.columns]
+  );
+
+  const refresh = useCallback(() => {
+    setRows([]);
+    setStart(0);
+    setLength(50);
+    setCount(-1);
+  }, []);
+
+  const onFiltersChanged = useCallback((filters: DataGridFilters) => {
+    const newConditions = convertSqlFiltersToConditions(filters);
+    setCount(-1);
+    setConditions(newConditions);
+  }, []);
+
+  const onSortsChanged = useCallback(
+    (sorts: Record<string, DataGridSort>) => {
+      refresh();
+      const newOrderBy = Object.entries(sorts).map(
+        ([columnKey, direction]) =>
+          ({
+            field: columnKey,
+            direction: direction.toUpperCase(),
+          } as OrderByDTO)
+      );
+      setOrderBy(newOrderBy);
+    },
+    [refresh]
+  );
+
+  const loadRows = useRef(
+    debounce(
+      (
+        columns: string[],
+        returnColumns: string[],
+        conditions: ConditionDTO[] = [],
+        orderBy: OrderByDTO[] = [],
+        start = 0,
+        length = 100,
+        getCount = false
+      ) => {
+        sqlRequest({
+          columns: columns.includes('Id') ? columns : [...columns, 'Id'],
+          returnColumns: returnColumns.includes('Id')
+            ? returnColumns
+            : [...returnColumns, 'Id'],
+          columnTypes: columnTypes.includes('Id')
+            ? columnTypes
+            : [...columnTypes, 'Id'],
+          conditions,
+          orderBy,
+          start,
+          length,
+          getCount,
+        }).then((response) => {
+          if (getCount) {
+            currentRows.current = Array(response.count).fill(null);
+            if (getCount) setCount(response.count ?? 0);
+          }
+          const parsedRows = props.parser
+            ? response.data.map(props.parser)
+            : (response.data as R[]);
+          currentRows.current.splice(start, length, ...parsedRows);
+          setRows([...currentRows.current]);
+        });
+      },
+      100,
+      {
+        leading: true,
+        trailing: true,
+      }
+    )
+  );
+
+  const loadFilterValues = useCallback(
+    (columnKey: string) => {
+      return sqlRequest({
+        columns: columnsKeys,
+        returnColumns: [columnKey],
+        columnTypes: [props.columns[columnKey].type ?? 'text'],
+        conditions: [
+          ...(props.conditions ?? []),
+          ...Object.values(_.pickBy(conditions, (_, key) => key !== columnKey)),
+        ].filter((condition) => condition.field !== columnKey),
+        orderBy: [
+          {
+            field:
+              props.columns[columnKey].filterField ??
+              props.columns[columnKey].field?.fieldAlias ??
+              props.columns[columnKey].field?.fieldName ??
+              columnKey,
+            type: props.columns[columnKey].type ?? 'text',
+            direction: 'ASC',
+          },
+        ],
+        getCount: false,
+        unique: true,
+      }).then((response) =>
+        response.data.map(
+          (row) => props.columns[columnKey].filter?.getter?.(row) ?? null
+        )
+      );
+    },
+    [columnsKeys, conditions, props.columns, props.conditions, sqlRequest]
+  );
+
+  useEffect(
+    () =>
+      loadRows.current(
+        columnsKeys,
+        visibleColumnsKeys,
+        [...(props.conditions ?? []), ...(Object.values(conditions) ?? [])],
+        orderBy,
+        start,
+        length,
+        count < 0
+      ),
+    [
+      props.columns,
+      conditions,
+      orderBy,
+      start,
+      length,
+      count,
+      props.conditions,
+      columnsKeys,
+      visibleColumnsKeys,
+    ]
+  );
+
+  const loadCopyRows = useCallback(
+    () =>
+      sqlRequest({
+        columns: columnsKeys,
+        returnColumns: visibleColumnsKeys,
+        columnTypes,
+        conditions: [
+          ...(props.conditions ?? []),
+          ...(Object.values(conditions) ?? []),
+        ],
+        orderBy,
+        start: 0,
+        length: count,
+      }).then((response) =>
+        props.parser ? response.data.map(props.parser) : (response.data as R[])
+      ),
+    [
+      sqlRequest,
+      columnsKeys,
+      visibleColumnsKeys,
+      columnTypes,
+      props.conditions,
+      props.parser,
+      conditions,
+      orderBy,
+      count,
+    ]
+  );
+
+  const loadAllIds = useCallback(
+    () =>
+      sqlIdRequest({
+        columns: columnsKeys.includes('Id')
+          ? columnsKeys
+          : [...columnsKeys, 'Id'],
+        returnColumns: ['Id'],
+        columnTypes: ['text'],
+        conditions: [
+          ...(props.conditions ?? []),
+          ...(Object.values(conditions) ?? []),
+        ],
+        orderBy,
+        start: 0,
+        length: count,
+      }).then((response) => response.data.map((row) => row['Id'])),
+    [columnsKeys, conditions, orderBy, props.conditions, sqlIdRequest, count]
+  );
+
+  const onVisibleRowsChanged = useCallback(
+    (newStart: number, newLength: number) => {
+      if (newStart !== start || newLength !== length) {
+        setStart(newStart);
+        setLength(newLength);
+      }
+    },
+    [length, start]
+  );
+
+  const onSelectionChange = useCallback(
+    (selectedKeys: string[]) => {
+      onSelectionChangeFromProps?.(selectedKeys);
+    },
+    [onSelectionChangeFromProps]
+  );
+
+  /** FOOTERS */
+  const [footers, setFooters] = useState<Record<string, string>>(
+    props.initialFooters ?? {}
+  );
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const [footerData, setFooterData] = useState<SqlRequestRow<any>>({});
+
+  const loadFooters = useCallback(() => {
+    if (Object.keys(footers).length === 0) {
+      setFooterData({});
+    } else {
+      sqlPartialRequest({
+        columns: columnsKeys.includes('Id')
+          ? columnsKeys
+          : [...columnsKeys, 'Id'],
+        returnColumns: [],
+        columnTypes: [],
+        totalColumns: footers as Record<string, SqlRequestFooterFunction>,
+        conditions: [
+          ...(props.conditions ?? []),
+          ...(Object.values(conditions) ?? []),
+        ],
+        orderBy,
+      }).then((response) => setFooterData(response.totals ?? {}));
+    }
+  }, [
+    columnsKeys,
+    conditions,
+    footers,
+    orderBy,
+    props.conditions,
+    sqlPartialRequest,
+  ]);
+
+  useEffect(() => {
+    loadFooters();
+  }, [loadFooters]);
+
+  const footerFunctions = useMemo(
+    () =>
+      !footerData
+        ? {}
+        : Object.entries(footers).reduce((acc, [columnKey, footerKey]) => {
+            const column = props.columns[columnKey];
+            const footerFunc =
+              typeof column?.footer === 'function'
+                ? column.footer
+                : column?.footer?.[footerKey];
+            const render = footerFunc
+              ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                (data: any) => footerFunc([data], [], [])
+              : column?.render ?? _.identity;
+            if (!column) {
+              return acc;
+            }
+            acc[columnKey] = () => render(footerData, column);
+            return acc;
+          }, {} as Record<string, DataGridFooterFunction<R>>),
+    [footerData, footers, props.columns]
+  );
+
+  const contextOverride = useMemo(
+    () => ({
+      footers,
+      setFooters,
+      footerFunctions,
+    }),
+    [footers, setFooters, footerFunctions]
+  );
+
+  return (
+    <DataGrid
+      onVisibleRowsChange={onVisibleRowsChanged}
+      filter={false}
+      sort={false}
+      onFiltersChanged={onFiltersChanged}
+      onSortsChanged={onSortsChanged}
+      filterValuesLoader={loadFilterValues}
+      rows={rows}
+      loadCopyRows={loadCopyRows}
+      refresh={refresh}
+      onSelectionChange={onSelectionChange}
+      getAllIds={loadAllIds}
+      contextOverride={contextOverride}
+      {...props}
+    />
+  );
+};

package/src/components/data/SqlRequestDataGrid/types.ts

@@ -0,0 +1,47 @@
+import {
+  ConditionDTO,
+  FieldDTO,
+  OrderByDTO,
+  SqlRequestRow,
+} from '../../../services/sqlRequests';
+import {
+  DataGridColumn,
+  DataGridFilter,
+  DataGridFilterType,
+  DataGridProps,
+} from '../DataGrid/types';
+
+export type SqlRequestDataGridFilter<
+  T extends DataGridFilterType = DataGridFilterType
+> = DataGridFilter<T> & {
+  field?: FieldDTO;
+};
+
+export type SqlRequestDataGridFilters = Record<
+  string,
+  SqlRequestDataGridFilter
+>;
+
+export type SqlRequestDataGridColumn<R> = DataGridColumn<R> & {
+  filter?: SqlRequestDataGridFilter;
+  field?: FieldDTO;
+  filterField?: string;
+  sortField?: string;
+};
+
+export type SqlRequestDataGridColumns<R> = Record<
+  string,
+  SqlRequestDataGridColumn<R>
+>;
+
+export type SqlRequestDataGridProps<R> = Omit<
+  DataGridProps<R>,
+  'rows' | 'columns'
+> & {
+  columns: SqlRequestDataGridColumns<R>;
+  hiddenColumns?: string[];
+  type: string;
+  orderBy?: OrderByDTO[];
+  conditions?: ConditionDTO[];
+  parser?: (row: SqlRequestRow<R>) => R;
+};

package/src/components/data/index.ts

@@ -0,0 +1,8 @@
+export * from './DataGrid';
+export * from './DataGrid/helpers';
+export * from './DataGrid/styles';
+export * from './AdvancedRequestDataGrid';
+export * from './SqlRequestDataGrid';
+export * from './SqlRequestDataGrid/helpers';
+export * from './SqlRequestDataGrid/types';
+export * from './AdvancedRequestDataGrid/helpers';