@addev-be/ui 0.2.16 → 0.2.19

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

@@ -0,0 +1,267 @@
+import {
+  ConditionDTO,
+  FieldDTO,
+  OrderByDTO,
+  useAdvancedRequestHandler,
+} from '../../../services/advancedRequests';
+import {
+  DataGridColumns,
+  DataGridFilters,
+  DataGridSort,
+} from '../DataGrid/types';
+import _, { debounce } from 'lodash';
+import {
+  convertFiltersToConditions,
+  getAdvancedRequestDto,
+  getColumnSortField,
+  parseJsonObjectFields,
+} from './helpers';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { AdvancedRequestDataGridProps } from './types';
+import { DataGrid } from '../DataGrid';
+
+export const AdvancedRequestDataGrid = <R,>({
+  onSelectionChange: onSelectionChangeFromProps,
+  idField,
+  ...props
+}: AdvancedRequestDataGridProps<R>) => {
+  const currentRows = useRef<R[]>([]);
+  const [rows, setRows] = useState<R[]>([]);
+  const [start, setStart] = useState(0);
+  const [length, setLength] = useState(50);
+  const [total, setTotal] = useState(-1);
+  const advancedRequest = useAdvancedRequestHandler<R>();
+  const idAdvancedRequest = useAdvancedRequestHandler<{ Id: string }>();
+
+  const [conditions, setConditions] = useState<Record<string, ConditionDTO>>(
+    {}
+  );
+  const [orderBy, setOrderBy] = useState<OrderByDTO[]>([]);
+
+  const refresh = useCallback(() => {
+    setRows([]);
+    setStart(0);
+    setLength(50);
+    setTotal(-1);
+  }, []);
+
+  const onFiltersChanged = useCallback(
+    (filters: DataGridFilters) => {
+      const newConditions = convertFiltersToConditions(filters, props.columns);
+      setTotal(-1);
+      setConditions(newConditions);
+    },
+    [props.columns]
+  );
+
+  const onSortsChanged = useCallback(
+    (sorts: Record<string, DataGridSort>) => {
+      refresh();
+      setOrderBy(
+        Object.entries(sorts).map(
+          ([columnKey, direction]) =>
+            ({
+              field: getColumnSortField(props.columns, columnKey),
+              direction: direction.toUpperCase(),
+            } as OrderByDTO)
+        )
+      );
+    },
+    [props.columns, refresh]
+  );
+
+  const loadRows = useRef(
+    debounce(
+      (
+        columns: DataGridColumns<R>,
+        conditions: ConditionDTO[],
+        orderBy: OrderByDTO[],
+        start: number,
+        length: number,
+        idField: FieldDTO | null | undefined,
+        getTotal = false
+      ) => {
+        advancedRequest(
+          getAdvancedRequestDto({
+            type: props.type,
+            columns,
+            conditions,
+            orderBy,
+            start,
+            length,
+            getTotal,
+            idField,
+          })
+        ).then((response) => {
+          if (getTotal) {
+            currentRows.current = Array(response.count).fill(null);
+            if (getTotal) setTotal(response.count ?? 0);
+          }
+          const parsedRows = parseJsonObjectFields(
+            response.data,
+            columns,
+            props.parser
+          );
+          currentRows.current.splice(start, length, ...parsedRows);
+          setRows([...currentRows.current]);
+        });
+      },
+      100
+    )
+  );
+
+  const loadFilterValues = useCallback(
+    (columnKey: string) => {
+      return advancedRequest({
+        fields: [
+          props.columns[columnKey].field ?? {
+            fieldName: columnKey,
+          },
+        ],
+        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,
+            direction: 'ASC',
+          },
+        ],
+        type: props.type,
+        getTotal: false,
+        unique: true,
+      }).then((response) =>
+        response.data.map(
+          (row) => props.columns[columnKey].filter?.getter?.(row) ?? null
+        )
+      );
+    },
+    [advancedRequest, conditions, props.columns, props.conditions, props.type]
+  );
+
+  useEffect(
+    () =>
+      loadRows.current(
+        props.columns,
+        [...(props.conditions ?? []), ...(Object.values(conditions) ?? [])],
+        orderBy,
+        start,
+        length,
+        idField,
+        total < 0
+      ),
+    [
+      props.columns,
+      conditions,
+      orderBy,
+      start,
+      length,
+      total,
+      props.conditions,
+      idField,
+    ]
+  );
+
+  const loadCopyRows = useCallback(
+    () =>
+      advancedRequest(
+        getAdvancedRequestDto({
+          type: props.type,
+          columns: props.columns,
+          conditions: [
+            ...(props.conditions ?? []),
+            ...(Object.values(conditions) ?? []),
+          ],
+          orderBy,
+          start: 0,
+          length: total,
+          idField,
+        })
+      ).then((response) =>
+        parseJsonObjectFields(response.data, props.columns, props.parser)
+      ),
+    [
+      advancedRequest,
+      conditions,
+      idField,
+      orderBy,
+      props.columns,
+      props.conditions,
+      props.parser,
+      props.type,
+      total,
+    ]
+  );
+
+  const loadAllIds = useCallback(
+    () =>
+      idAdvancedRequest(
+        getAdvancedRequestDto({
+          type: props.type,
+          columns: {
+            Id: {
+              name: 'Id',
+              field: idField ?? { fieldName: 'Id' },
+            },
+          },
+          conditions: [
+            ...(props.conditions ?? []),
+            ...(Object.values(conditions) ?? []),
+          ],
+          orderBy,
+          start: 0,
+          length: total,
+          idField: null,
+        })
+      ).then((response) => response.data.map((row) => row['Id'])),
+    [
+      conditions,
+      idAdvancedRequest,
+      idField,
+      orderBy,
+      props.conditions,
+      props.type,
+      total,
+    ]
+  );
+
+  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]
+  );
+
+  return (
+    <DataGrid
+      onVisibleRowsChange={onVisibleRowsChanged}
+      filter={false}
+      sort={false}
+      onFiltersChanged={onFiltersChanged}
+      onSortsChanged={onSortsChanged}
+      filterValuesLoader={loadFilterValues}
+      rows={rows}
+      loadCopyRows={loadCopyRows}
+      refresh={refresh}
+      onSelectionChange={onSelectionChange}
+      getAllIds={loadAllIds}
+      {...props}
+    />
+  );
+};

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

@@ -0,0 +1,47 @@
+import {
+  AdvancedRequestRow,
+  ConditionDTO,
+  FieldDTO,
+  OrderByDTO,
+} from '../../../services/advancedRequests';
+import {
+  DataGridColumn,
+  DataGridFilter,
+  DataGridFilterType,
+  DataGridProps,
+} from '../DataGrid/types';
+
+export type AdvancedRequestDataGridFilter<
+  T extends DataGridFilterType = DataGridFilterType
+> = DataGridFilter<T> & {
+  field?: FieldDTO;
+};
+
+export type AdvancedRequestDataGridFilters = Record<
+  string,
+  AdvancedRequestDataGridFilter
+>;
+
+export type AdvancedRequestDataGridColumn<R> = DataGridColumn<R> & {
+  filter?: AdvancedRequestDataGridFilter;
+  field?: FieldDTO;
+  filterField?: string;
+  sortField?: string;
+};
+
+export type AdvancedRequestDataGridColumns<R> = Record<
+  string,
+  AdvancedRequestDataGridColumn<R>
+>;
+
+export type AdvancedRequestDataGridProps<R> = Omit<
+  DataGridProps<R>,
+  'rows' | 'columns'
+> & {
+  columns: AdvancedRequestDataGridColumns<R>;
+  type: string;
+  orderBy?: OrderByDTO[];
+  conditions?: ConditionDTO[];
+  idField?: FieldDTO | null;
+  parser?: (row: AdvancedRequestRow<R>) => R;
+};

package/src/components/data/DataGrid/DataGridCell.tsx

@@ -0,0 +1,73 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
+
+import * as styles from './styles';
+
+import { DataGridCellProps, DataGridColumn } from './types';
+import { MouseEvent, useCallback } from 'react';
+
+import { DataGridEditableCell } from './DataGridEditableCell';
+import { useDataGridContext } from './hooks';
+
+const defaultRender = <R,>(row: R, col: DataGridColumn<R>) => {
+  const value = col.propertyName ? row[col.propertyName] : '';
+  return !value ? '' : String(value);
+};
+
+export const DataGridCell = <R,>({
+  row,
+  rowIndex,
+  columnKey,
+  columnIndex,
+  column,
+  context,
+  style,
+}: DataGridCellProps<R>) => {
+  const {
+    name,
+    editable,
+    editingCell = [-1, -1],
+    setEditingCell,
+    onRowDoubleClick,
+  } = useDataGridContext(context);
+  const isEditable =
+    !!editable && !!column.editable && column.type && column.getter;
+  const isEditing =
+    isEditable && editingCell[0] === rowIndex && editingCell[1] === columnIndex;
+  const DataGridCellComponent = column.component ?? styles.DataGridCell;
+
+  const onDoubleClick = useCallback(
+    (e: MouseEvent) => {
+      e.stopPropagation();
+      e.preventDefault();
+      if (isEditable) {
+        setEditingCell([rowIndex, columnIndex]);
+      } else onRowDoubleClick?.(row, e);
+    },
+    [columnIndex, isEditable, onRowDoubleClick, row, rowIndex, setEditingCell]
+  );
+
+  if (isEditing) {
+    return (
+      <DataGridEditableCell
+        key={`${name}-${rowIndex}-${columnIndex}`}
+        row={row}
+        rowIndex={rowIndex}
+        columnKey={columnKey}
+        columnIndex={columnIndex}
+        column={column}
+        context={context}
+      />
+    );
+  }
+
+  return (
+    <DataGridCellComponent
+      key={`${name}-${rowIndex}-${columnIndex}`}
+      onDoubleClick={onDoubleClick}
+      style={style}
+    >
+      {(column.render ?? defaultRender)(row, column)}
+    </DataGridCellComponent>
+  );
+};

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

@@ -0,0 +1,14 @@
+import { DataGridColumnKeyValuePair, DataGridColumns } from '../types';
+
+export const normalizeColumnsOrders = <R>(
+  columns: DataGridColumns<R> | DataGridColumnKeyValuePair<R>[]
+) =>
+  (Array.isArray(columns) ? columns : Object.entries(columns)).map<
+    DataGridColumnKeyValuePair<R>
+  >(([key, column], index) => [
+    key,
+    {
+      ...column,
+      order: index,
+    },
+  ]);

package/src/components/data/DataGrid/DataGridColumnsModal/hooks.tsx

@@ -0,0 +1,59 @@
+import { useCallback, useContext, useMemo, useState } from 'react';
+
+import { Button } from '../../../forms';
+import { DataGridColumnsEditor } from '.';
+import { DataGridContext } from '../types';
+import { Modal } from '../../../layout/Modal';
+import { mapValues } from 'lodash';
+
+export const useDataGridColumnsModal = <R,>(context: DataGridContext<R>) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const { columns, setSettings, saveSettings } = useContext(context);
+  const [currentColumns, setCurrentColumns] = useState(columns);
+
+  const openModal = useCallback(() => {
+    setCurrentColumns(columns);
+    setIsVisible(true);
+  }, [columns]);
+  const closeModal = useCallback(() => {
+    setIsVisible(false);
+  }, []);
+
+  const onApplyClicked = useCallback(() => {
+    const newSettings = mapValues(currentColumns, (col) => ({
+      order: col.order ?? 0,
+      width: col.width ?? 150,
+    }));
+    setSettings(() => newSettings);
+    saveSettings(newSettings);
+    closeModal();
+  }, [currentColumns, closeModal, saveSettings, setSettings]);
+
+  const modal = useMemo(
+    () =>
+      isVisible ? (
+        <Modal $width={600} $height={400}>
+          <Modal.Header>Paramètres des colonnes</Modal.Header>
+          <Modal.Content>
+            <DataGridColumnsEditor
+              columns={currentColumns}
+              onColumnsChanged={setCurrentColumns}
+            />
+          </Modal.Content>
+          <Modal.Footer>
+            <Button onClick={closeModal}>Annuler</Button>
+            <Button
+              color="primary"
+              style={{ marginLeft: 'auto' }}
+              onClick={onApplyClicked}
+            >
+              Appliquer
+            </Button>
+          </Modal.Footer>
+        </Modal>
+      ) : null,
+    [closeModal, currentColumns, isVisible, onApplyClicked]
+  );
+
+  return { openModal, closeModal, modal };
+};

package/src/components/data/DataGrid/DataGridColumnsModal/index.tsx

@@ -0,0 +1,181 @@
+import * as styles from './styles';
+
+import { DataGridColumn, DataGridColumns } from '../types';
+import { Dispatch, SetStateAction, useCallback } from 'react';
+import { DownIcon, LeftIcon, RightIcon, UpIcon } from '../../../../Icons';
+
+import { IconButton } from '../../../forms/IconButton';
+import _ from 'lodash';
+import { normalizeColumnsOrders } from './helpers';
+import { useVisibleAndHiddenColumns } from '../hooks';
+
+export const DataGridColumnItem = <R,>({
+  columnIndex,
+  columnKey,
+  column,
+  visible,
+  onUpButtonClicked,
+  onDownButtonClicked,
+  onVisibleButtonClicked,
+}: {
+  columnIndex: number;
+  columnKey: string;
+  column: DataGridColumn<R>;
+  visible: boolean;
+  onUpButtonClicked?: (index: number) => void;
+  onDownButtonClicked?: (index: number) => void;
+  onVisibleButtonClicked: (key: string) => void;
+}) => (
+  <styles.ColumnItem $visible={visible}>
+    {!visible && (
+      <styles.Buttons $visible={false}>
+        <IconButton
+          size="small"
+          icon={LeftIcon}
+          onClick={() => onVisibleButtonClicked(columnKey)}
+        />
+      </styles.Buttons>
+    )}
+    <span>{column?.name}</span>
+    {visible && (
+      <styles.Buttons $visible>
+        {onUpButtonClicked && (
+          <IconButton
+            size="small"
+            icon={UpIcon}
+            onClick={() => onUpButtonClicked(columnIndex)}
+          />
+        )}
+        {onDownButtonClicked && (
+          <IconButton
+            size="small"
+            icon={DownIcon}
+            onClick={() => onDownButtonClicked(columnIndex)}
+          />
+        )}
+        <IconButton
+          size="small"
+          icon={RightIcon}
+          onClick={() => onVisibleButtonClicked(columnKey)}
+        />
+      </styles.Buttons>
+    )}
+  </styles.ColumnItem>
+);
+
+export const DataGridColumnsEditor = <R,>({
+  columns,
+  onColumnsChanged,
+}: {
+  columns: DataGridColumns<R>;
+  onColumnsChanged: Dispatch<SetStateAction<DataGridColumns<R>>>;
+}) => {
+  const [visibleColumns, hiddenColumns] = useVisibleAndHiddenColumns(columns);
+  const sortedVisibleColumnsEntries = normalizeColumnsOrders(
+    _.sortBy(Object.entries(visibleColumns), ([, col]) => col.order ?? 0)
+  );
+
+  const onUpButtonClicked = useCallback(
+    (index: number) => {
+      if (index > 0) {
+        const newArray = normalizeColumnsOrders([
+          ...sortedVisibleColumnsEntries.slice(0, index - 1),
+          sortedVisibleColumnsEntries[index],
+          sortedVisibleColumnsEntries[index - 1],
+          ...sortedVisibleColumnsEntries.slice(index + 1),
+        ]);
+        onColumnsChanged(() => ({
+          ...Object.fromEntries(newArray),
+          ...hiddenColumns,
+        }));
+      }
+    },
+    [hiddenColumns, onColumnsChanged, sortedVisibleColumnsEntries]
+  );
+
+  const onDownButtonClicked = useCallback(
+    (index: number) => {
+      if (index < sortedVisibleColumnsEntries.length - 1) {
+        const newArray = normalizeColumnsOrders([
+          ...sortedVisibleColumnsEntries.slice(0, index),
+          sortedVisibleColumnsEntries[index + 1],
+          sortedVisibleColumnsEntries[index],
+          ...sortedVisibleColumnsEntries.slice(index + 2),
+        ]);
+        onColumnsChanged(() => ({
+          ...Object.fromEntries(newArray),
+          ...hiddenColumns,
+        }));
+      }
+    },
+    [hiddenColumns, onColumnsChanged, sortedVisibleColumnsEntries]
+  );
+
+  const onHideButtonClicked = useCallback(
+    (columnKey: string) => {
+      onColumnsChanged((prev) => ({
+        ...prev,
+        [columnKey]: {
+          ...prev[columnKey],
+          order: -1,
+        },
+      }));
+    },
+    [onColumnsChanged]
+  );
+
+  const onShowButtonClicked = useCallback(
+    (columnKey: string) => {
+      onColumnsChanged((prev) => ({
+        ...prev,
+        [columnKey]: {
+          ...hiddenColumns[columnKey],
+          order: Object.keys(prev).length,
+        },
+      }));
+    },
+    [hiddenColumns, onColumnsChanged]
+  );
+
+  return (
+    <styles.Container>
+      <styles.Panel>
+        <styles.Title>Colonnes visibles</styles.Title>
+        <styles.ColumnsList>
+          {sortedVisibleColumnsEntries.map(([key, column], index) => (
+            <DataGridColumnItem
+              key={key}
+              columnKey={key}
+              columnIndex={index}
+              column={column}
+              visible
+              onUpButtonClicked={index > 0 ? onUpButtonClicked : undefined}
+              onDownButtonClicked={
+                index < sortedVisibleColumnsEntries.length - 1
+                  ? onDownButtonClicked
+                  : undefined
+              }
+              onVisibleButtonClicked={onHideButtonClicked}
+            />
+          ))}
+        </styles.ColumnsList>
+      </styles.Panel>
+
+      <styles.Panel>
+        <styles.Title>Colonnes masquées</styles.Title>
+        <styles.ColumnsList>
+          {Object.entries(hiddenColumns).map(([key, column], index) => (
+            <DataGridColumnItem
+              key={key}
+              columnKey={key}
+              columnIndex={index}
+              column={column}
+              visible={false}
+              onVisibleButtonClicked={onShowButtonClicked}
+            />
+          ))}
+        </styles.ColumnsList>
+      </styles.Panel>
+    </styles.Container>
+  );
+};