fix: handle dynamic unit with VTL field

InseeFr · Nov 28, 2024 · d37c2f2 · d37c2f2
1 parent 0f2d7fa
commit d37c2f2
Show file tree

Hide file tree

Showing 9 changed files with 36 additions and 39 deletions.
diff --git a/src/constants/dictionary.jsx b/src/constants/dictionary.jsx
@@ -526,16 +526,16 @@ const dictionary = {
     fr: 'Merci de respecter le format de la date',
   },
   dynamicUnit: {
-    en: 'Dynamic unit of measure',
-    fr: 'Unité de mesure dynamique',
+    en: 'Custom unit of measure',
+    fr: 'Unité de mesure personnalisée',
   },
   unit: {
     en: 'Unit of measure',
     fr: 'Unité de mesure',
   },
-  dynamicUnitVariable: {
-    en: 'Variable of the unit of measure',
-    fr: "Variable de l'unité de mesure",
+  dynamicUnitFormula: {
+    en: 'Formula of the unit of measure',
+    fr: "Formule de l'unité de mesure",
   },
   dynamicUnitEmptySelect: {
     en: 'Select a variable of the unit of measure',

diff --git a/src/forms/controls/control-with-suggestions/components/vtl-editor.jsx b/src/forms/controls/control-with-suggestions/components/vtl-editor.jsx
@@ -17,6 +17,7 @@ const VTLEditor = ({
   label,
   input,
   required,
+  disabled,
   setDisableValidation,
 }) => {
   const [errors, setErrors] = useState([]);
@@ -62,7 +63,9 @@ const VTLEditor = ({
         {required && <span className="ctrl-required">*</span>}
       </label>
       <div>
-        <div className="editor-container">
+        <div
+          className={`editor-container ${disabled ? 'editor-disabled' : ''}`}
+        >
           <AntlrEditor
             script={value}
             setScript={localOnChange}
@@ -80,12 +83,14 @@ const VTLEditor = ({
               lineDecorationsWidth: 0,
               lineNumbersMinChars: 0,
               renderLineHighlight: 'none',
+              readOnly: disabled,
             }}
           />
         </div>
       </div>
       <div style={{ color: 'red', display: 'inline-block' }}>
         {value &&
+          !disabled &&
           errors.map(({ line, column, message }) => (
             <div key={`${line}_${column}`} style={{ marginBottom: '20px' }}>
               <div>{`Ligne : ${line} - Colonne : ${column}`}</div>

diff --git a/src/model/transformations/calculated-variable.jsx b/src/model/transformations/calculated-variable.jsx
@@ -21,8 +21,8 @@ export function remoteToStore(remote = []) {
         Minimum: minimum,
         Maximum: maximum,
         Decimals: decimals,
+        Unit: unit,
         IsDynamicUnit: isDynamicUnit,
-        Unit,
         Format: format,
       },
     } = cv;
@@ -43,8 +43,8 @@ export function remoteToStore(remote = []) {
           minimum,
           maximum,
           decimals,
+          unit,
           isDynamicUnit,
-          unit: isDynamicUnit ? Unit.replaceAll('$', '') : Unit,
           format,
         },
       },
@@ -90,11 +90,9 @@ export function storeToRemote(store) {
     if (Minimum !== undefined) model.Datatype.Minimum = Minimum;
     if (Maximum !== undefined) model.Datatype.Maximum = Maximum;
     if (Decimals !== undefined) model.Datatype.Decimals = Decimals;
+    if (Unit !== undefined) model.Datatype.Unit = Unit;
     if (IsDynamicUnit !== undefined)
       model.Datatype.IsDynamicUnit = IsDynamicUnit;
-    if (Unit !== undefined)
-      model.Datatype.Unit =
-        IsDynamicUnit && Unit.length > 0 ? `$${Unit}$` : Unit;
     if (Format !== undefined) model.Datatype.Format = Format;
     if (Scope) model.Scope = Scope;
     return model;

diff --git a/src/model/transformations/collected-variable.jsx b/src/model/transformations/collected-variable.jsx
@@ -315,9 +315,7 @@ export function storeToRemote(store, componentsStore) {
     if (Decimals !== undefined) model.Datatype.Decimals = Decimals;
     if (IsDynamicUnit !== undefined)
       model.Datatype.IsDynamicUnit = IsDynamicUnit;
-    if (Unit !== undefined)
-      model.Datatype.Unit =
-        IsDynamicUnit && Unit.length > 0 ? `$${Unit}$` : Unit;
+    if (Unit !== undefined) model.Datatype.Unit = Unit;
     if (Format !== undefined) {
       if (typeName === DATATYPE_NAME.DATE) {
         model.Datatype.Format = Format.toUpperCase();

diff --git a/src/model/transformations/external-variable.jsx b/src/model/transformations/external-variable.jsx
@@ -21,8 +21,8 @@ export function remoteToStore(remote = []) {
         Minimum: minimum,
         Maximum: maximum,
         Decimals: decimals,
+        Unit: unit,
         IsDynamicUnit: isDynamicUnit,
-        Unit,
         Format: format,
       },
     } = ev;
@@ -41,8 +41,8 @@ export function remoteToStore(remote = []) {
           minimum,
           maximum,
           decimals,
+          unit,
           isDynamicUnit,
-          unit: isDynamicUnit ? Unit.replaceAll('$', '') : Unit,
           format,
         },
       },
@@ -85,11 +85,9 @@ export function storeToRemote(store) {
     if (Minimum !== undefined) model.Datatype.Minimum = Minimum;
     if (Maximum !== undefined) model.Datatype.Maximum = Maximum;
     if (Decimals !== undefined) model.Datatype.Decimals = Decimals;
+    if (Unit !== undefined) model.Datatype.Unit = Unit;
     if (IsDynamicUnit !== undefined)
       model.Datatype.IsDynamicUnit = IsDynamicUnit;
-    if (Unit !== undefined)
-      model.Datatype.Unit =
-        IsDynamicUnit && Unit.length > 0 ? `$${Unit}$` : Unit;
     if (Format !== undefined) {
       if (typeName === DATATYPE_NAME.DATE) {
         model.Datatype.Format = Format.toUpperCase();

diff --git a/src/model/transformations/response-format-simple.jsx b/src/model/transformations/response-format-simple.jsx
@@ -13,7 +13,7 @@ export function remoteToState(remote) {
           Maximum: maximum,
           Decimals: decimals,
           IsDynamicUnit: isDynamicUnit,
-          Unit,
+          Unit: unit,
           Format: format,
         },
         mandatory,
@@ -28,8 +28,7 @@ export function remoteToState(remote) {
   if (maximum !== undefined) datatype.maximum = maximum;
   if (decimals !== undefined) datatype.decimals = decimals;
   if (isDynamicUnit !== undefined) datatype.isDynamicUnit = isDynamicUnit;
-  if (Unit !== undefined)
-    datatype.unit = isDynamicUnit ? Unit.replaceAll('$', '') : Unit;
+  if (unit !== undefined) datatype.unit = unit;
   if (format !== undefined) datatype.format = format;
 
   if (typeName === DATATYPE_NAME.DURATION) {

diff --git a/src/model/transformations/response.jsx b/src/model/transformations/response.jsx
@@ -67,8 +67,7 @@ export function stateToRemote(state, response) {
   if (Maximum !== undefined) model.Datatype.Maximum = Maximum;
   if (Decimals !== undefined) model.Datatype.Decimals = Decimals;
   if (IsDynamicUnit !== undefined) model.Datatype.IsDynamicUnit = IsDynamicUnit;
-  if (Unit !== undefined)
-    model.Datatype.Unit = IsDynamicUnit && Unit.length > 0 ? `$${Unit}$` : Unit;
+  if (Unit !== undefined) model.Datatype.Unit = Unit;
   if (Format !== undefined) model.Datatype.Format = Format;
   if (Mihours !== undefined) model.Datatype.Mihours = Mihours;
   if (Miminutes !== undefined) model.Datatype.Miminutes = Miminutes;

diff --git a/src/scss/inc/controls/_ctrl-vtl-editor.scss b/src/scss/inc/controls/_ctrl-vtl-editor.scss
@@ -5,4 +5,15 @@
     border: solid 1px #ccc;
     border-radius: 4px;
   }
+
+  .editor-disabled {
+    cursor: not-allowed;
+  }
+
+  .editor-disabled * {
+    background-color: $gray-lighter;
+    color: $gray;
+    opacity: 1;
+    pointer-events: none;
+  }
 }
diff --git a/src/widgets/component-new-edit/components/response-format/simple/simple-numeric.jsx b/src/widgets/component-new-edit/components/response-format/simple/simple-numeric.jsx
@@ -8,6 +8,7 @@ import withCurrentFormVariables from '../../../../../hoc/with-current-form-varia
 import Select from '../../../../../forms/controls/select';
 import GenericOption from '../../../../../forms/controls/generic-option';
 import ListRadios from '../../../../../forms/controls/list-radios';
+import { RichEditorWithVariable } from '../../../../../forms/controls/control-with-suggestions';
 
 const { NUMERIC } = DATATYPE_NAME;
 
@@ -24,13 +25,7 @@ function ResponseFormatDatatypeNumeric({
   readOnly,
   isDynamicUnit,
   setUnit,
-  availableSuggestions,
 }) {
-  const dynamicUnitList = availableSuggestions.map(as => (
-    <GenericOption key={as} value={as}>
-      {as}
-    </GenericOption>
-  ));
   const handleDynamicUnitChange = () => {
     setUnit('');
   };
@@ -86,16 +81,10 @@ function ResponseFormatDatatypeNumeric({
         {isDynamicUnit ? (
           <Field
             name="unit"
-            component={Select}
-            label={Dictionary.dynamicUnitVariable}
-            required={required}
+            component={RichEditorWithVariable}
+            label={Dictionary.dynamicUnitFormula}
             disabled={readOnly}
-          >
-            <GenericOption key="dynamicUnitEmptySelect" value="">
-              {Dictionary.dynamicUnitEmptySelect}
-            </GenericOption>
-            {dynamicUnitList}
-          </Field>
+          />
         ) : (
           <SelectMetaDataContainer
             type="units"