@gridsuite/commons-ui 0.194.0 → 0.195.0

package/dist/components/network-modifications/by-filter/assignment/assignment/assignment-form.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useMemo, useCallback } from "react";
+import { useMemo, useRef, useState, useEffect, useCallback } from "react";
 import { DensityLarge } from "@mui/icons-material";
 import { useFormContext, useWatch } from "react-hook-form";
 import { useIntl } from "react-intl";
@@ -8,14 +8,13 @@ import "../../../../../utils/conversionUtils.js";
 import { ElementType } from "../../../../../utils/types/elementType.js";
 import "../../../../../utils/types/equipmentType.js";
 import { FieldType } from "../../../../../utils/types/fieldType.js";
-import { areIdsEqual, getIdOrValue } from "../../../../../utils/ts-utils.js";
+import { getIdOrValue, areIdsEqual } from "../../../../../utils/ts-utils.js";
 import "../../../../../utils/yupConfig.js";
 import "@mui/material";
 import "localized-countries";
 import "localized-countries/data/fr";
 import "localized-countries/data/en";
 import { usePredefinedProperties } from "../../../../../hooks/usePredefinedProperties.js";
-import { usePrevious } from "../../../../../hooks/usePrevious.js";
 import "notistack";
 import { useFormatLabelWithUnit } from "../../../../../hooks/useFormatLabelWithUnit.js";
 import "../../../../overflowableText/OverflowableText.js";
@@ -49,6 +48,7 @@ import "react-querybuilder";
 import { DataType } from "./assignment.type.js";
 import GridItem from "../../../../grid/grid-item.js";
 import { EQUIPMENTS_FIELDS } from "./assignment-constants.js";
+import { EMPTY_FIELD_VALUE } from "./assignment-utils.js";
 const comparatorStrIgnoreCase = (str1, str2) => {
   return str1?.toLowerCase()?.localeCompare(str2?.toLowerCase());
 };
@@ -94,24 +94,31 @@ function AssignmentForm(props) {
   const options = useMemo(() => {
     return equipmentFields?.find((fieldOption) => fieldOption?.id === watchEditedField)?.values ?? [];
   }, [watchEditedField, equipmentFields]);
-  const prevDataType = usePrevious(dataType);
-  if (prevDataType && prevDataType !== dataType) {
-    setValue(`${name}.${index}.${FieldConstants.VALUE}`, dataType === DataType.BOOLEAN ? false : null);
-  }
-  const emptyValueStr = useMemo(() => {
+  const emptyFieldLabel = useMemo(() => {
     return intl.formatMessage({ id: "EmptyField" });
   }, [intl]);
   const formatLabelWithUnit = useFormatLabelWithUnit();
+  const prevEditedField = useRef(watchEditedField);
+  const [editedFieldKey, setEditedFieldKey] = useState(watchEditedField);
+  useEffect(() => {
+    if (prevEditedField.current !== watchEditedField) {
+      prevEditedField.current = watchEditedField;
+      setValue(`${name}.${index}.${FieldConstants.VALUE}`, dataType === DataType.BOOLEAN ? false : null);
+      setValue(`${name}.${index}.${FieldConstants.PROPERTY_NAME}`, null);
+      setEditedFieldKey(watchEditedField);
+    }
+  }, [dataType, index, name, setValue, watchEditedField]);
   const renderAutoCompleteSettableToNone = useCallback(
     (numberOnly) => /* @__PURE__ */ jsx(
       AutocompleteInput,
       {
         name: `${name}.${index}.${FieldConstants.VALUE}`,
         label: "ValueOrEmptyField",
-        options: [emptyValueStr],
+        options: [emptyFieldLabel],
         size: "small",
         onCheckNewValue: numberOnly ? (option) => {
-          if (option && option !== emptyValueStr && Number.isNaN(Number(option))) {
+          const optionValue = getIdOrValue(option);
+          if (optionValue && optionValue !== emptyFieldLabel && optionValue !== EMPTY_FIELD_VALUE && Number.isNaN(Number(optionValue))) {
             setError(`${name}.${index}.${FieldConstants.VALUE}`, {
               message: "NumericValueOrEmptyField"
             });
@@ -123,10 +130,19 @@ function AssignmentForm(props) {
           return true;
         } : void 0,
         getOptionLabel: (option) => typeof option !== "string" ? option?.label ?? option : option,
+        inputTransform: (value) => value === EMPTY_FIELD_VALUE ? emptyFieldLabel : value,
+        outputTransform: (value) => {
+          const optionValue = getIdOrValue(value);
+          if (optionValue === emptyFieldLabel) {
+            return EMPTY_FIELD_VALUE;
+          }
+          return optionValue ?? null;
+        },
         allowNewValue: true
-      }
+      },
+      editedFieldKey
     ),
-    [emptyValueStr, index, name, setError]
+    [emptyFieldLabel, index, name, setError, editedFieldKey]
   );
   const filtersField = /* @__PURE__ */ jsx(
     DirectoryItemsInput,
@@ -162,47 +178,50 @@ function AssignmentForm(props) {
       allowNewValue: true
     }
   );
-  const valueField = useMemo(() => {
-    if (dataType === DataType.PROPERTY) {
-      return /* @__PURE__ */ jsx(
-        AutocompleteInput,
-        {
-          name: `${name}.${index}.${FieldConstants.VALUE}`,
-          label: "PropertyValue",
-          options: predefinedPropertiesValues,
-          size: "small",
-          allowNewValue: true
-        }
-      );
-    }
-    if (dataType === DataType.INTEGER) {
-      return /* @__PURE__ */ jsx(IntegerInput, { name: `${name}.${index}.${FieldConstants.VALUE}`, label: "Value" });
-    }
-    if (dataType === DataType.BOOLEAN) {
-      return /* @__PURE__ */ jsx(SwitchInput, { name: `${name}.${index}.${FieldConstants.VALUE}`, formProps: { value: false } });
-    }
-    if (dataType === DataType.ENUM) {
-      return /* @__PURE__ */ jsx(
-        SelectInput,
-        {
-          name: `${name}.${index}.${FieldConstants.VALUE}`,
-          label: "Value",
-          options,
-          size: "small"
-        }
-      );
-    }
-    if (dataType === DataType.STRING && settableToNone) {
-      return renderAutoCompleteSettableToNone();
-    }
-    if (dataType === DataType.STRING) {
-      return /* @__PURE__ */ jsx(TextInput, { name: `${name}.${index}.${FieldConstants.VALUE}`, label: "Value", clearable: true });
-    }
-    if (dataType === DataType.DOUBLE && settableToNone) {
-      return renderAutoCompleteSettableToNone(true);
-    }
-    return /* @__PURE__ */ jsx(FloatInput, { name: `${name}.${index}.${FieldConstants.VALUE}`, label: "Value" });
-  }, [dataType, settableToNone, name, index, predefinedPropertiesValues, options, renderAutoCompleteSettableToNone]);
+  let valueField;
+  if (dataType === DataType.PROPERTY) {
+    valueField = /* @__PURE__ */ jsx(
+      AutocompleteInput,
+      {
+        name: `${name}.${index}.${FieldConstants.VALUE}`,
+        label: "PropertyValue",
+        options: predefinedPropertiesValues,
+        size: "small",
+        allowNewValue: true
+      },
+      editedFieldKey
+    );
+  } else if (dataType === DataType.INTEGER) {
+    valueField = /* @__PURE__ */ jsx(IntegerInput, { name: `${name}.${index}.${FieldConstants.VALUE}`, label: "Value" }, editedFieldKey);
+  } else if (dataType === DataType.BOOLEAN) {
+    valueField = /* @__PURE__ */ jsx(
+      SwitchInput,
+      {
+        name: `${name}.${index}.${FieldConstants.VALUE}`,
+        formProps: { value: false }
+      },
+      editedFieldKey
+    );
+  } else if (dataType === DataType.ENUM) {
+    valueField = /* @__PURE__ */ jsx(
+      SelectInput,
+      {
+        name: `${name}.${index}.${FieldConstants.VALUE}`,
+        label: "Value",
+        options,
+        size: "small"
+      },
+      editedFieldKey
+    );
+  } else if (dataType === DataType.STRING && settableToNone) {
+    valueField = renderAutoCompleteSettableToNone();
+  } else if (dataType === DataType.STRING) {
+    valueField = /* @__PURE__ */ jsx(TextInput, { name: `${name}.${index}.${FieldConstants.VALUE}`, label: "Value", clearable: true }, editedFieldKey);
+  } else if (dataType === DataType.DOUBLE && settableToNone) {
+    valueField = renderAutoCompleteSettableToNone(true);
+  } else {
+    valueField = /* @__PURE__ */ jsx(FloatInput, { name: `${name}.${index}.${FieldConstants.VALUE}`, label: "Value" }, editedFieldKey);
+  }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(GridItem, { size: 3.25, children: filtersField }),
     /* @__PURE__ */ jsx(GridItem, { size: 3, children: editedField }),

package/dist/components/network-modifications/by-filter/assignment/assignment/assignment-utils.d.ts

@@ -1,5 +1,6 @@
 import { yupConfig as yup } from '../../../../../utils';
 import { Assignment, DataType, FieldOptionType, FieldValue } from './assignment.type';
+export declare const EMPTY_FIELD_VALUE = "\u2014";
 export declare const getFieldOption: (fieldName?: string | null) => FieldOptionType | undefined;
 export declare const getDataType: (fieldName?: string | null) => DataType | undefined;
 export declare const getUnsettable: (fieldName?: string | null) => boolean | undefined;

package/dist/components/network-modifications/by-filter/assignment/assignment/assignment-utils.js

@@ -1,4 +1,5 @@
 import { FieldConstants } from "../../../../../utils/constants/fieldConstants.js";
+import { YUP_REQUIRED } from "../../../../../utils/constants/translationKeys.js";
 import "../../../../../utils/conversionUtils.js";
 import "../../../../../utils/types/equipmentType.js";
 import "react/jsx-runtime";
@@ -7,6 +8,7 @@ import "../../../../../utils/yupConfig.js";
 import { DataType } from "./assignment.type.js";
 import { FIELD_OPTIONS } from "./assignment-constants.js";
 import * as yup from "yup";
+const EMPTY_FIELD_VALUE = "—";
 const getFieldOption = (fieldName) => {
   return Object.values(FIELD_OPTIONS).find((fieldOption) => fieldOption.id === fieldName);
 };
@@ -40,7 +42,7 @@ function getValueSchema(emptyValueStr, dataType, settable_to_none) {
     default:
       schema = yup.number();
   }
-  return schema.required();
+  return schema.required(YUP_REQUIRED);
 }
 const getAssignmentInitialValue = () => ({
   [FieldConstants.FILTERS]: [],
@@ -56,12 +58,12 @@ function getAssignmentsSchema(emptyValueStr) {
           [FieldConstants.ID]: yup.string().required(),
           [FieldConstants.NAME]: yup.string().required()
         })
-      ).required().min(1, "YupRequired"),
-      [FieldConstants.EDITED_FIELD]: yup.string().required(),
+      ).required().min(1, YUP_REQUIRED),
+      [FieldConstants.EDITED_FIELD]: yup.string().required(YUP_REQUIRED),
       [FieldConstants.PROPERTY_NAME]: yup.string().when([FieldConstants.EDITED_FIELD], ([editedField], schema) => {
         const dataType = getDataType(editedField);
         if (dataType === DataType.PROPERTY) {
-          return schema.required();
+          return schema.required(YUP_REQUIRED);
         }
         return schema.nullable();
       }),
@@ -69,7 +71,7 @@ function getAssignmentsSchema(emptyValueStr) {
         const dataType = getDataType(editedField);
         const unsettable = getUnsettable(editedField);
         return getValueSchema(emptyValueStr, dataType, unsettable);
-      }).required()
+      }).required(YUP_REQUIRED)
     })
   ).required();
 }
@@ -80,6 +82,7 @@ function getAssignmentFromEditData(assignment) {
   };
 }
 export {
+  EMPTY_FIELD_VALUE,
   getAssignmentFromEditData,
   getAssignmentInitialValue,
   getAssignmentsSchema,

package/dist/components/network-modifications/by-filter/assignment/modificationByAssignment.utils.js

@@ -8,12 +8,11 @@ import { FieldType } from "../../../../utils/types/fieldType.js";
 import "react/jsx-runtime";
 import "@mui/icons-material";
 import "../../../../utils/yupConfig.js";
-import { getAssignmentsSchema, getAssignmentInitialValue, getAssignmentFromEditData, getDataType } from "./assignment/assignment-utils.js";
+import { getAssignmentsSchema, getAssignmentInitialValue, getAssignmentFromEditData, getUnsettable, EMPTY_FIELD_VALUE, getDataType } from "./assignment/assignment-utils.js";
 import { DataType } from "./assignment/assignment.type.js";
-const emptyValueStr = "—";
 const modificationByAssignmentFormSchema = yup.object().shape({
   [FieldConstants.EQUIPMENT_TYPE]: mixed().oneOf(Object.values(EquipmentType)).required(),
-  [FieldConstants.ASSIGNMENTS]: getAssignmentsSchema(emptyValueStr)
+  [FieldConstants.ASSIGNMENTS]: getAssignmentsSchema(EMPTY_FIELD_VALUE)
 }).required();
 const emptyModificationByAssignmentFormData = {
   [FieldConstants.EQUIPMENT_TYPE]: null,
@@ -27,9 +26,10 @@ const modificationByAssignmentDtoToForm = (dto) => ({
     const field = FieldType[fieldKey];
     const { value } = assignment;
     const valueConverted = convertInputValue(field, value);
+    const unsettable = getUnsettable(assignment.editedField);
     return {
       ...assignment,
-      value: valueConverted !== 0 && !valueConverted ? emptyValueStr : valueConverted
+      value: unsettable && valueConverted !== 0 && !valueConverted ? EMPTY_FIELD_VALUE : valueConverted
     };
   }) ?? [getAssignmentInitialValue()]
 });
@@ -39,7 +39,7 @@ const modificationByAssignmentFormToDto = (formData) => ({
   assignmentInfosList: formData.assignments.map((assignment) => {
     const fieldKey = assignment.editedField;
     const field = FieldType[fieldKey];
-    const value = assignment.value === emptyValueStr ? "" : assignment.value;
+    const value = assignment.value === EMPTY_FIELD_VALUE ? "" : assignment.value;
     return {
       ...assignment,
       dataType: getDataType(assignment.editedField) ?? DataType.STRING,

package/dist/components/parameters/common/parameter-table-field/parameter-table-field.js

@@ -50,7 +50,7 @@ function ParameterTableField({
   });
   const { getValues } = useFormContext();
   const validRowCountRef = useRef(
-    getValues(name).filter((row) => isValidRow ? isValidRow(row) : true).length
+    getValues(name)?.filter((row) => isValidRow ? isValidRow(row) : true).length
   );
   const newDefaultRowData = useMemo(() => {
     return getDefaultRowData(columnsDefinition);

package/dist/components/parameters/dynamic-margin-calculation/loads-variations-parameters.js

@@ -145,8 +145,7 @@ function LoadsVariationsParameters({ path }) {
         label: "DynamicMarginCalculationLoadsVariations",
         tooltipProps: { title: "DynamicMarginCalculationLoadsVariations" },
         columnsDefinition,
-        tableHeight: 270,
-        disableDragAndDrop: true
+        tableHeight: 270
       }
     )
   ] });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gridsuite/commons-ui",
-    "version": "0.194.0",
+    "version": "0.195.0",
     "description": "common react components for gridsuite applications",
     "author": "gridsuite team",
     "homepage": "https://github.com/gridsuite",