@gridsuite/commons-ui 0.107.1 → 0.108.0

package/dist/components/dnd-table/dnd-table.js

@@ -0,0 +1,394 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useMemo } from "react";
+import { useFormContext, useWatch } from "react-hook-form";
+import { Grid, TableContainer, Table, TableHead, TableRow, TableCell, Box, TableBody, Tooltip, Checkbox } from "@mui/material";
+import { DragIndicator } from "@mui/icons-material";
+import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
+import { useIntl } from "react-intl";
+import { SELECTED, MAX_ROWS_NUMBER, DndColumnType } from "./dnd-table.type.js";
+import { DndTableBottomLeftButtons } from "./dnd-table-bottom-left-buttons.js";
+import { DndTableBottomRightButtons } from "./dnd-table-bottom-right-buttons.js";
+import { DndTableAddRowsDialog } from "./dnd-table-add-rows-dialog.js";
+import { ChipItemsInput } from "../inputs/reactHookForm/chip-items-input.js";
+import { DirectoryItemsInput } from "../inputs/reactHookForm/DirectoryItemsInput.js";
+import { RawReadOnlyInput } from "../inputs/reactHookForm/RawReadOnlyInput.js";
+import "../inputs/reactHookForm/agGridTable/BottomRightButtons.js";
+import "../customAGGrid/customAggrid.js";
+import "ag-grid-community";
+import "react-papaparse";
+import "react-csv-downloader";
+import { AutocompleteInput } from "../inputs/reactHookForm/autocompleteInputs/AutocompleteInput.js";
+import { CheckboxInput } from "../inputs/reactHookForm/booleans/CheckboxInput.js";
+import { ErrorInput } from "../inputs/reactHookForm/errorManagement/ErrorInput.js";
+import { FieldErrorAlert } from "../inputs/reactHookForm/errorManagement/FieldErrorAlert.js";
+import "yup";
+import "../inputs/reactHookForm/provider/CustomFormProvider.js";
+import "../inputs/reactHookForm/numbers/RangeInput.js";
+import "localized-countries";
+import "localized-countries/data/fr";
+import "localized-countries/data/en";
+import { TableNumericalInput } from "../inputs/reactHookForm/tableInputs/table-numerical-input.js";
+import { TableTextInput } from "../inputs/reactHookForm/tableInputs/table-text-input.js";
+import "../../utils/conversionUtils.js";
+import "../../utils/types/equipmentType.js";
+import "../../utils/yupConfig.js";
+import "notistack";
+import "@react-querybuilder/material";
+import "../filter/expert/expertFilterConstants.js";
+import "../inputs/reactQueryBuilder/CustomReactQueryBuilder.js";
+import "uuid";
+import "../inputs/reactQueryBuilder/PropertyValueEditor.js";
+import "react-querybuilder";
+const styles = {
+  columnsStyle: {
+    display: "inline-flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    margin: 1,
+    textTransform: "none"
+  }
+};
+function MultiCheckbox({
+  arrayFormName,
+  handleClickCheck,
+  handleClickUncheck,
+  ...props
+}) {
+  const arrayToWatch = useWatch({
+    name: arrayFormName
+  });
+  const allRowSelected = useMemo(
+    () => arrayToWatch ? arrayToWatch == null ? void 0 : arrayToWatch.every((row) => row[SELECTED]) : false,
+    [arrayToWatch]
+  );
+  const someRowSelected = useMemo(
+    () => arrayToWatch ? arrayToWatch == null ? void 0 : arrayToWatch.some((row) => row[SELECTED]) : false,
+    [arrayToWatch]
+  );
+  return /* @__PURE__ */ jsx(
+    Checkbox,
+    {
+      checked: (arrayToWatch == null ? void 0 : arrayToWatch.length) > 0 && allRowSelected,
+      indeterminate: someRowSelected && !allRowSelected,
+      onChange: (event) => {
+        if (event.target.checked) {
+          handleClickCheck();
+        } else {
+          handleClickUncheck();
+        }
+      },
+      ...props
+    }
+  );
+}
+function DefaultTableCell({ arrayFormName, rowIndex, column, ...props }) {
+  return /* @__PURE__ */ jsx(TableCell, { sx: { padding: 1 }, children: /* @__PURE__ */ jsx(RawReadOnlyInput, { name: `${arrayFormName}[${rowIndex}].${column.dataKey}`, ...props }) }, column.dataKey);
+}
+function EditableTableCell({
+  arrayFormName,
+  rowIndex,
+  column,
+  previousValue,
+  valueModified,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(TableCell, { sx: { padding: 0.5, maxWidth: column.maxWidth }, children: [
+    column.type === DndColumnType.NUMERIC && /* @__PURE__ */ jsx(
+      TableNumericalInput,
+      {
+        ...props,
+        name: `${arrayFormName}[${rowIndex}].${column.dataKey}`,
+        previousValue,
+        valueModified,
+        adornment: column == null ? void 0 : column.adornment,
+        isClearable: column == null ? void 0 : column.clearable,
+        style: {
+          textAlign: column == null ? void 0 : column.textAlign
+        }
+      }
+    ),
+    column.type === DndColumnType.TEXT && /* @__PURE__ */ jsx(
+      TableTextInput,
+      {
+        ...props,
+        name: `${arrayFormName}[${rowIndex}].${column.dataKey}`,
+        showErrorMsg: column.showErrorMsg
+      }
+    ),
+    column.type === DndColumnType.AUTOCOMPLETE && /* @__PURE__ */ jsx(
+      AutocompleteInput,
+      {
+        forcePopupIcon: true,
+        freeSolo: true,
+        name: `${arrayFormName}[${rowIndex}].${column.dataKey}`,
+        options: column.options,
+        inputTransform: (value) => value ?? "",
+        outputTransform: (value) => value,
+        size: "small"
+      }
+    ),
+    column.type === DndColumnType.DIRECTORY_ITEMS && /* @__PURE__ */ jsx(
+      DirectoryItemsInput,
+      {
+        name: `${arrayFormName}[${rowIndex}].${column.dataKey}`,
+        equipmentTypes: column.equipmentTypes,
+        elementType: column.elementType,
+        titleId: column.titleId,
+        hideErrorMessage: true,
+        label: void 0
+      }
+    ),
+    column.type === DndColumnType.CHIP_ITEMS && /* @__PURE__ */ jsx(ChipItemsInput, { name: `${arrayFormName}[${rowIndex}].${column.dataKey}`, hideErrorMessage: true }),
+    column.type === DndColumnType.CUSTOM && column.component(rowIndex)
+  ] }, column.dataKey);
+}
+function DndTable(props) {
+  const {
+    arrayFormName,
+    useFieldArrayOutput,
+    columnsDefinition,
+    tableHeight,
+    allowedToAddRows = () => Promise.resolve(true),
+    createRows,
+    disabled = false,
+    withResetButton = false,
+    withAddRowsDialog = true,
+    previousValues,
+    disableTableCell,
+    getPreviousValue,
+    isValueModified,
+    disableAddingRows = false,
+    showMoveArrow = true,
+    disableDragAndDrop = false,
+    handleUploadButton = void 0,
+    uploadButtonMessageId = void 0,
+    handleResetButton = void 0,
+    resetButtonMessageId = void 0
+  } = props;
+  const intl = useIntl();
+  const { getValues, setValue, setError, clearErrors } = useFormContext();
+  const {
+    fields: currentRows,
+    // don't use it to access form data ! check doc
+    move,
+    swap,
+    append,
+    remove
+  } = useFieldArrayOutput;
+  const [openAddRowsDialog, setOpenAddRowsDialog] = useState(false);
+  function renderTableCell(rowId, rowIndex, column) {
+    const CustomTableCell = column.editable ? EditableTableCell : DefaultTableCell;
+    return /* @__PURE__ */ jsx(
+      CustomTableCell,
+      {
+        arrayFormName,
+        rowIndex,
+        column,
+        disabled: disableTableCell ? disableTableCell(rowIndex, column, arrayFormName, previousValues) : disabled,
+        previousValue: getPreviousValue ? getPreviousValue(rowIndex, column, arrayFormName, previousValues) : void 0,
+        valueModified: isValueModified ? isValueModified(rowIndex, arrayFormName) : false
+      },
+      rowId + column.dataKey
+    );
+  }
+  const addNewRows = (numberOfRows) => {
+    if (currentRows.length + numberOfRows > MAX_ROWS_NUMBER) {
+      setError(arrayFormName, {
+        type: "custom",
+        message: intl.formatMessage(
+          {
+            id: "MaximumRowNumberError"
+          },
+          {
+            value: MAX_ROWS_NUMBER
+          }
+        )
+      });
+      return;
+    }
+    clearErrors(arrayFormName);
+    const rowsToAdd = createRows == null ? void 0 : createRows(numberOfRows).map((row) => {
+      return { ...row, [SELECTED]: false };
+    });
+    append(rowsToAdd);
+  };
+  const handleAddRowsButton = () => {
+    allowedToAddRows().then((isAllowed) => {
+      if (isAllowed) {
+        if (withAddRowsDialog) {
+          setOpenAddRowsDialog(true);
+        } else {
+          addNewRows(1);
+        }
+      }
+    });
+  };
+  const handleCloseAddRowsDialog = () => {
+    setOpenAddRowsDialog(false);
+  };
+  const deleteSelectedRows = () => {
+    const currentRowsValues = getValues(arrayFormName);
+    const rowsToDelete = [];
+    for (let i = 0; i < currentRowsValues.length; i++) {
+      if (currentRowsValues[i][SELECTED]) {
+        rowsToDelete.push(i);
+      }
+    }
+    remove(rowsToDelete);
+  };
+  const selectAllRows = () => {
+    for (let i = 0; i < currentRows.length; i++) {
+      setValue(`${arrayFormName}[${i}].${SELECTED}`, true);
+    }
+  };
+  const unselectAllRows = () => {
+    for (let i = 0; i < currentRows.length; i++) {
+      setValue(`${arrayFormName}[${i}].${SELECTED}`, false);
+    }
+  };
+  const moveUpSelectedRows = () => {
+    const currentRowsValues = getValues(arrayFormName);
+    if (currentRowsValues[0][SELECTED]) {
+      return;
+    }
+    for (let i = 1; i < currentRowsValues.length; i++) {
+      if (currentRowsValues[i][SELECTED]) {
+        swap(i - 1, i);
+      }
+    }
+  };
+  const moveDownSelectedRows = () => {
+    const currentRowsValues = getValues(arrayFormName);
+    if (currentRowsValues[currentRowsValues.length - 1][SELECTED]) {
+      return;
+    }
+    for (let i = currentRowsValues.length - 2; i >= 0; i--) {
+      if (currentRowsValues[i][SELECTED]) {
+        swap(i, i + 1);
+      }
+    }
+  };
+  const onDragEnd = (result) => {
+    if (!result.destination) {
+      return;
+    }
+    move(result.source.index, result.destination.index);
+  };
+  function renderTableHead() {
+    return /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+      !disableDragAndDrop && /* @__PURE__ */ jsx(TableCell, { sx: { width: "3%" } }),
+      /* @__PURE__ */ jsx(TableCell, { sx: { width: "5%", textAlign: "center" }, children: /* @__PURE__ */ jsx(
+        MultiCheckbox,
+        {
+          arrayFormName,
+          handleClickCheck: selectAllRows,
+          handleClickUncheck: unselectAllRows,
+          disabled: disabled || currentRows.length === 0
+        }
+      ) }),
+      columnsDefinition.map((column) => /* @__PURE__ */ jsx(TableCell, { sx: { width: column.width, maxWidth: column.maxWidth }, children: /* @__PURE__ */ jsxs(Box, { sx: styles.columnsStyle, children: [
+        column.label,
+        column.extra
+      ] }) }, column.dataKey))
+    ] }) });
+  }
+  function renderTableBody(providedDroppable) {
+    return /* @__PURE__ */ jsxs(TableBody, { children: [
+      currentRows.map((row, index) => /* @__PURE__ */ jsx(
+        Draggable,
+        {
+          draggableId: row.id.toString(),
+          index,
+          isDragDisabled: disableDragAndDrop,
+          children: (provided) => /* @__PURE__ */ jsxs(TableRow, { ref: provided.innerRef, ...provided.draggableProps, children: [
+            !disableDragAndDrop && /* @__PURE__ */ jsx(
+              Tooltip,
+              {
+                title: intl.formatMessage({
+                  id: "DragAndDrop"
+                }),
+                placement: "right",
+                children: /* @__PURE__ */ jsx(
+                  TableCell,
+                  {
+                    sx: { textAlign: "center" },
+                    ...disabled ? {} : { ...provided.dragHandleProps },
+                    children: /* @__PURE__ */ jsx(DragIndicator, {})
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(TableCell, { sx: { textAlign: "center" }, children: /* @__PURE__ */ jsx(
+              CheckboxInput,
+              {
+                name: `${arrayFormName}[${index}].${SELECTED}`,
+                formProps: { disabled }
+              }
+            ) }),
+            columnsDefinition.map((column) => renderTableCell(row.id, index, column))
+          ] })
+        },
+        row.id
+      )),
+      providedDroppable.placeholder
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Grid, { item: true, container: true, spacing: 1, children: [
+    /* @__PURE__ */ jsxs(Grid, { item: true, container: true, children: [
+      /* @__PURE__ */ jsx(DragDropContext, { onDragEnd, children: /* @__PURE__ */ jsx(Droppable, { droppableId: "tapTable", isDropDisabled: disabled, children: (provided) => /* @__PURE__ */ jsx(
+        TableContainer,
+        {
+          ref: provided.innerRef,
+          ...provided.droppableProps,
+          sx: {
+            height: tableHeight,
+            border: "solid 1px rgba(0,0,0,0.1)"
+          },
+          children: /* @__PURE__ */ jsxs(Table, { stickyHeader: true, size: "small", padding: "none", children: [
+            renderTableHead(),
+            renderTableBody(provided)
+          ] })
+        }
+      ) }) }),
+      /* @__PURE__ */ jsx(ErrorInput, { name: arrayFormName, InputField: FieldErrorAlert })
+    ] }),
+    /* @__PURE__ */ jsxs(Grid, { container: true, item: true, children: [
+      handleResetButton && handleUploadButton && resetButtonMessageId && uploadButtonMessageId ? /* @__PURE__ */ jsx(
+        DndTableBottomLeftButtons,
+        {
+          withResetButton,
+          disableUploadButton: disableAddingRows,
+          disabled,
+          handleUploadButton,
+          uploadButtonMessageId,
+          handleResetButton,
+          resetButtonMessageId
+        }
+      ) : null,
+      /* @__PURE__ */ jsx(
+        DndTableBottomRightButtons,
+        {
+          arrayFormName,
+          handleAddButton: handleAddRowsButton,
+          handleDeleteButton: deleteSelectedRows,
+          handleMoveUpButton: moveUpSelectedRows,
+          handleMoveDownButton: moveDownSelectedRows,
+          disableAddingRows,
+          showMoveArrow,
+          disabled
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      DndTableAddRowsDialog,
+      {
+        open: openAddRowsDialog,
+        handleAddButton: addNewRows,
+        onClose: handleCloseAddRowsDialog
+      }
+    )
+  ] });
+}
+export {
+  DndTable
+};

package/dist/components/dnd-table/dnd-table.type.d.ts

@@ -0,0 +1,51 @@
+import { ReactNode } from 'react';
+import { ElementType, EquipmentType } from '../../utils';
+export declare const SELECTED = "selected";
+export declare const MAX_ROWS_NUMBER = 100;
+export declare enum DndColumnType {
+    TEXT = "TEXT",
+    NUMERIC = "NUMERIC",
+    AUTOCOMPLETE = "AUTOCOMPLETE",
+    CHIP_ITEMS = "CHIP_ITEMS",
+    DIRECTORY_ITEMS = "DIRECTORY_ITEMS",
+    CUSTOM = "CUSTOM"
+}
+export interface ColumnBase {
+    dataKey: string;
+    maxWidth?: number | string;
+    width?: number | string;
+    label?: string;
+    extra?: JSX.Element;
+    editable?: boolean;
+    type: DndColumnType;
+}
+export interface ColumnText extends ColumnBase {
+    type: DndColumnType.TEXT;
+    showErrorMsg?: boolean;
+}
+export interface ColumnNumeric extends ColumnBase {
+    type: DndColumnType.NUMERIC;
+    adornment?: {
+        text: string;
+    };
+    clearable?: boolean;
+    textAlign?: 'right' | 'left';
+}
+export interface ColumnAutocomplete extends ColumnBase {
+    type: DndColumnType.AUTOCOMPLETE;
+    options: string[];
+}
+export interface ColumnDirectoryItem extends ColumnBase {
+    type: DndColumnType.DIRECTORY_ITEMS;
+    equipmentTypes: EquipmentType[];
+    elementType: ElementType;
+    titleId: string;
+}
+export interface ColumnChipsItem extends ColumnBase {
+    type: DndColumnType.CHIP_ITEMS;
+}
+export interface ColumnCustom extends ColumnBase {
+    type: DndColumnType.CUSTOM;
+    component: (rowIndex: number) => ReactNode;
+}
+export type DndColumn = ColumnNumeric | ColumnAutocomplete | ColumnText | ColumnDirectoryItem | ColumnChipsItem | ColumnCustom;

package/dist/components/dnd-table/dnd-table.type.js

@@ -0,0 +1,16 @@
+const SELECTED = "selected";
+const MAX_ROWS_NUMBER = 100;
+var DndColumnType = /* @__PURE__ */ ((DndColumnType2) => {
+  DndColumnType2["TEXT"] = "TEXT";
+  DndColumnType2["NUMERIC"] = "NUMERIC";
+  DndColumnType2["AUTOCOMPLETE"] = "AUTOCOMPLETE";
+  DndColumnType2["CHIP_ITEMS"] = "CHIP_ITEMS";
+  DndColumnType2["DIRECTORY_ITEMS"] = "DIRECTORY_ITEMS";
+  DndColumnType2["CUSTOM"] = "CUSTOM";
+  return DndColumnType2;
+})(DndColumnType || {});
+export {
+  DndColumnType,
+  MAX_ROWS_NUMBER,
+  SELECTED
+};

package/dist/components/dnd-table/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2025, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+export * from './dnd-table';
+export * from './dnd-table.type';
+export * from './dnd-table-add-rows-dialog';
+export * from './dnd-table-bottom-left-buttons';
+export * from './dnd-table-bottom-right-buttons';

package/dist/components/dnd-table/index.js

@@ -0,0 +1,14 @@
+import { DndTable } from "./dnd-table.js";
+import { DndColumnType, MAX_ROWS_NUMBER, SELECTED } from "./dnd-table.type.js";
+import { DndTableAddRowsDialog } from "./dnd-table-add-rows-dialog.js";
+import { DndTableBottomLeftButtons } from "./dnd-table-bottom-left-buttons.js";
+import { DndTableBottomRightButtons } from "./dnd-table-bottom-right-buttons.js";
+export {
+  DndColumnType,
+  DndTable,
+  DndTableAddRowsDialog,
+  DndTableBottomLeftButtons,
+  DndTableBottomRightButtons,
+  MAX_ROWS_NUMBER,
+  SELECTED
+};

package/dist/components/filter/HeaderFilterForm.js

@@ -10,9 +10,12 @@ import "../../utils/yupConfig.js";
 import "react-intl";
 import "react";
 import "react-hook-form";
+import "localized-countries";
+import "localized-countries/data/fr";
+import "localized-countries/data/en";
+import "notistack";
 import "../inputs/reactHookForm/provider/CustomFormProvider.js";
 import * as yup from "yup";
-import "notistack";
 import "../overflowableText/OverflowableText.js";
 import "../treeViewFinder/TreeViewFinder.js";
 import "../inputs/reactHookForm/agGridTable/BottomRightButtons.js";
@@ -21,9 +24,6 @@ import "ag-grid-community";
 import "react-papaparse";
 import "react-csv-downloader";
 import "../inputs/reactHookForm/numbers/RangeInput.js";
-import "localized-countries";
-import "localized-countries/data/fr";
-import "localized-countries/data/en";
 import { DescriptionField } from "../inputs/reactHookForm/text/DescriptionField.js";
 import { UniqueNameInput } from "../inputs/reactHookForm/text/UniqueNameInput.js";
 import "@react-querybuilder/material";

package/dist/components/index.d.ts

@@ -11,6 +11,7 @@ export * from './checkBoxList';
 export * from './customAGGrid';
 export * from './dialogs';
 export * from './directoryItemSelector/DirectoryItemSelector';
+export * from './dnd-table';
 export * from './elementSearch';
 export * from './filter';
 export * from './flatParameters';