@addev-be/ui 0.11.7 → 0.12.0

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

@@ -0,0 +1,333 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import {
+  ColumnDTO,
+  ColumnWithHavingDTO,
+  ConditionDTO,
+} from '../../../../services/smartQueries';
+import { SmartQueryDataGridColumn, SmartQueryDataGridColumns } from '../types';
+import {
+  buildExcelFormat,
+  dateFilter,
+  numberFilter,
+  textFilter,
+} from '../../DataGrid/helpers';
+import { formatDate, formatDateTime } from '../../../../helpers/dates';
+import {
+  formatMoney,
+  formatNumber,
+  formatNumberInvariant,
+  formatPercentage,
+} from '../../../../helpers/numbers';
+
+export const smartTextColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<SmartQueryDataGridColumn<R>>
+): SmartQueryDataGridColumns<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 smartComposedColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  fields: string[],
+  options?: Partial<SmartQueryDataGridColumn<R>>
+): SmartQueryDataGridColumns<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 smartMailColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<SmartQueryDataGridColumn<R>>
+): SmartQueryDataGridColumns<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 smartPhoneColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<SmartQueryDataGridColumn<R>>
+): SmartQueryDataGridColumns<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 smartDateColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<SmartQueryDataGridColumn<R>>
+): SmartQueryDataGridColumns<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: {
+      ...dateFilter(key),
+      getter: (value) => value[key] ?? '',
+      formatter: (value) => formatDate(value),
+      renderer: (value) => formatDate(value),
+    },
+    footer: (rows) => `${rows[0][key]} éléments`,
+    ...options,
+  },
+});
+
+export const smartDateTimeColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<SmartQueryDataGridColumn<R>>
+): SmartQueryDataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    type: 'date',
+    render: (row) => formatDateTime(row[key]),
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    excelFormatter: () => 'dd/mm/yyyy hh:mm:ss',
+    excelValue: (value) => formatDateTime(value, 'YYYY-MM-DD HH:mm:ss'),
+    filter: {
+      ...dateFilter(key),
+      getter: (value) => value[key] ?? '',
+      formatter: (value) => formatDateTime(value),
+      renderer: (value) => formatDateTime(value),
+    },
+    footer: (rows) => `${rows[0][key]} éléments`,
+    ...options,
+  },
+});
+
+export const smartMonthColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<SmartQueryDataGridColumn<R>>
+): SmartQueryDataGridColumns<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 smartNumberColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  decimals = 2,
+  options?: Partial<SmartQueryDataGridColumn<R>>
+): SmartQueryDataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    type: 'number',
+    render: (row) => formatNumber(row[key], decimals) ?? '',
+    excelFormatter: () => buildExcelFormat(decimals),
+    excelValue: (value) => formatNumberInvariant(value, decimals),
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? 0,
+    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 smartMoneyColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  decimals = 2,
+  options?: Partial<SmartQueryDataGridColumn<R>>
+): SmartQueryDataGridColumns<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] ?? 0,
+    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 smartPercentageColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  decimals = 2,
+  options?: Partial<SmartQueryDataGridColumn<R>>
+): SmartQueryDataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    type: 'number',
+    render: (row) => formatPercentage(row[key]) ?? '',
+    excelFormatter: () => buildExcelFormat(decimals, '%'),
+    excelValue: (value) => formatNumberInvariant(value, decimals),
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? 0,
+    filter: {
+      ...numberFilter(key),
+      getter: (value) => value[key] ?? 0,
+      renderer: (value) => formatPercentage(value, decimals) ?? '',
+    },
+    ...options,
+  },
+});
+
+export const smartCheckboxColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<SmartQueryDataGridColumn<R>>
+): SmartQueryDataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => {
+      const value = !!+(row[key] ?? 0);
+      return (
+        <>
+          <input type="checkbox" checked={value} readOnly />
+          <span>{value ? ' 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 smartColorColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<SmartQueryDataGridColumn<R>>
+): SmartQueryDataGridColumns<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,
+  },
+});
+
+export const getColumnsConditions = (columns: ColumnDTO[]): ConditionDTO[] =>
+  columns
+    .filter((column): column is ColumnWithHavingDTO => !!column.having)
+    .map((column) => ({
+      field: column.field,
+      operator: column.having?.operator ?? 'equals',
+      value: column.having?.value,
+    }));
+
+export const getFooterColumn = (column: ColumnDTO): ColumnDTO =>
+  !column.footer
+    ? column
+    : {
+        ...column,
+        field: {
+          operator: column.footer,
+          operands: [{ fieldName: column.field.fieldName }],
+          fieldAlias: column.field.fieldAlias ?? column.field.fieldName,
+        },
+        groupBy: true,
+      };

package/src/components/data/SmartQueryDataGrid/helpers/hooks.ts

@@ -0,0 +1,41 @@
+import { ColumnDTO, ConditionDTO } from '../../../../services/smartQueries';
+
+import { SmartQueryDataGridColumns } from '../types';
+import { SmartQueries } from '../../../../services';
+import { useMemo } from 'react';
+
+export const useSmartColumnDTOs = <R>(
+  columns: SmartQueryDataGridColumns<R>,
+  conditions: Record<string, ConditionDTO> = {},
+  footers: Record<string, SmartQueries.FooterFunction> = {},
+  sorts: Record<string, SmartQueries.OrderByDirection> = {}
+) =>
+  useMemo(
+    () =>
+      Object.entries(columns).map<ColumnDTO>(([key, col]) => ({
+        key,
+        field: {
+          fieldName: col.field?.fieldName ?? key,
+          fieldAlias: col.field?.fieldAlias ?? key,
+          groupBy: col.field?.groupBy ?? false,
+        },
+        having: conditions[key],
+        footer: footers[key],
+        orderBy: sorts[key],
+      })),
+    [columns, conditions, footers, sorts]
+  );
+
+export const useIdSmartColumnDTO = (smartColumns: SmartQueries.ColumnDTO[]) =>
+  useMemo(
+    () =>
+      smartColumns.find((col) => col.field.fieldName === 'id') ?? {
+        key: 'id',
+        field: {
+          fieldName: 'id',
+          fieldAlias: 'id',
+          groupBy: false,
+        },
+      },
+    [smartColumns]
+  );

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

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

package/src/components/data/SmartQueryDataGrid/helpers/smartQueries.ts

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

package/src/components/data/SmartQueryDataGrid/hooks.ts

@@ -0,0 +1,75 @@
+import { useCallback, useMemo, useState } from 'react';
+
+import { ColumnDTO } from '../../../services/smartQueries';
+import { SmartQueries } from '../../../services';
+
+export const useSmartQuery = (type: string, columns: ColumnDTO[]) => {
+  const [query, setQuery] = useState<SmartQueries.QueryDTO>({
+    type,
+    columns,
+  });
+
+  const havings = useMemo(
+    () =>
+      (query.columns ?? [])
+        .filter(
+          (column): column is SmartQueries.ColumnWithHavingDTO =>
+            !!column.having
+        )
+        .map((col) => col.having),
+    [query.columns]
+  );
+
+  const setHaving = useCallback(
+    (columnId: string, having: SmartQueries.HavingDTO) => {
+      setQuery((currentQuery) => ({
+        ...currentQuery,
+        columns: currentQuery.columns?.map((column) =>
+          column.key === columnId
+            ? {
+                ...column,
+                having,
+              }
+            : column
+        ),
+      }));
+    },
+    []
+  );
+
+  const footers = useMemo(
+    () =>
+      (query.columns ?? [])
+        .filter(
+          (column): column is SmartQueries.ColumnWithFooterDTO =>
+            !!column.footer
+        )
+        .map((col) => col.footer),
+    [query.columns]
+  );
+
+  const setFooter = useCallback(
+    (columnId: string, footer: SmartQueries.FooterFunction) => {
+      setQuery((currentQuery) => ({
+        ...currentQuery,
+        columns: currentQuery.columns?.map((column) =>
+          column.key === columnId
+            ? {
+                ...column,
+                footer,
+              }
+            : column
+        ),
+      }));
+    },
+    []
+  );
+
+  return {
+    query,
+    havings,
+    setHaving,
+    footers,
+    setFooter,
+  };
+};