front: editor-slopes-fix-form-validation

Remove local errors check in slopes form and let global form validate the form

Author: Wadjetz

front/src/applications/editor/components/LinearMetadata/FormComponent.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import React, { useState, useRef, useEffect, useMemo } from 'react';
 import Form, { FieldProps, utils } from '@rjsf/core';
 import { JSONSchema7 } from 'json-schema';
 import { omit, head, max as fnMax, min as fnMin, isNil } from 'lodash';
@@ -106,13 +106,6 @@ export const FormComponent: React.FC<FieldProps> = (props) => {
     return field;
   }, [jsonSchema]);
 
-  const customOnChange = useCallback(
-    (newData: Array<LinearMetadataItem>) => {
-      onChange(newData.filter((e) => (valueField ? !isNil(e[valueField]) : true)));
-    },
-    [onChange, valueField]
-  );
-
   const fixedData = useMemo(
     () => fixLinearMetadataItems(formData?.filter(notEmpty), distance),
     [formData, distance]
@@ -180,6 +173,13 @@ export const FormComponent: React.FC<FieldProps> = (props) => {
                     // case when you click on the already selected item => reset
                     setSelected((old) => ((old ?? -1) === index ? null : index));
                     setHovered(null);
+                    if (valueField && isNil(_item[valueField]) && isNil(selected)) {
+                      fixedData[index] = {
+                        ..._item,
+                        [valueField]: 0,
+                      }
+                      onChange(fixedData)
+                    }
                   }
                   setClickPrevent(false);
                 }, 150) as number;
@@ -190,7 +190,7 @@ export const FormComponent: React.FC<FieldProps> = (props) => {
               if (clickTimeout) clearTimeout(clickTimeout);
               setClickPrevent(true);
               const newData = splitAt(data, point);
-              customOnChange(newData);
+              onChange(newData);
             }}
             onWheel={(e, _item, _index, point) => {
               setViewBox(getZoomedViewBox(data, viewBox, e.deltaY > 0 ? 'OUT' : 'IN', point));
@@ -203,7 +203,7 @@ export const FormComponent: React.FC<FieldProps> = (props) => {
               setMode(!finalized ? 'resizing' : null);
               try {
                 const result = resizeSegment(fixedData, index, gap, 'end');
-                if (finalized) customOnChange(result.result);
+                if (finalized) onChange(result.result);
                 else {
                   setData(result.result);
                   // if index has changed, we need to impact the index modification
@@ -285,7 +285,7 @@ export const FormComponent: React.FC<FieldProps> = (props) => {
                     title={t('Editor.linear-metadata.merge-with-left')}
                     disabled={selected === 0}
                     onClick={() => {
-                      customOnChange(mergeIn(data, selected, 'left'));
+                      onChange(mergeIn(data, selected, 'left'));
                       setSelected(selected - 1);
                     }}
                   >
@@ -299,7 +299,7 @@ export const FormComponent: React.FC<FieldProps> = (props) => {
                       const splitPosition =
                         selectedData.begin + (selectedData.end - selectedData.begin) / 2;
                       const newData = splitAt(data, splitPosition);
-                      customOnChange(newData);
+                      onChange(newData);
                     }}
                   >
                     <IoIosCut />
@@ -309,7 +309,7 @@ export const FormComponent: React.FC<FieldProps> = (props) => {
                     type="button"
                     title={t('Editor.linear-metadata.merge-with-right')}
                     disabled={selected === data.length - 1}
-                    onClick={() => customOnChange(mergeIn(data, selected, 'right'))}
+                    onClick={() => onChange(mergeIn(data, selected, 'right'))}
                   >
                     <BsBoxArrowInRight />
                   </button>
@@ -363,43 +363,41 @@ export const FormComponent: React.FC<FieldProps> = (props) => {
                 }}
                 formData={selectedData}
                 onChange={(e) => {
-                  if (e.errors.length === 0) {
-                    const newItem = e.formData;
-                    const oldItem = data[selected];
-                    let newData = [...data];
-                    // we keep the old value for begin and end
-                    // they will be change in the resize function if needed
-                    newData[selected] = {
-                      ...oldItem,
-                      ...omit(newItem, ['begin', 'end']),
-                    };
+                  const newItem = e.formData;
+                  const oldItem = data[selected];
+                  let newData = [...data];
+                  // we keep the old value for begin and end
+                  // they will be change in the resize function if needed
+                  newData[selected] = {
+                    ...oldItem,
+                    ...omit(newItem, ['begin', 'end']),
+                  };
 
-                    // Check if there is a resize
-                    try {
-                      if (newItem.begin !== oldItem.begin) {
-                        const resizeBegin = resizeSegment(
-                          [...newData],
-                          selected,
-                          newItem.begin - oldItem.begin,
-                          'begin'
-                        );
-                        newData = resizeBegin.result;
-                      }
-                      if (oldItem.end !== newItem.end) {
-                        const resizeEnd = resizeSegment(
-                          [...newData],
-                          selected,
-                          newItem.end - oldItem.end,
-                          'end'
-                        );
-                        newData = resizeEnd.result;
-                      }
-                      customOnChange(newData);
-                    } catch (error) {
-                      // TODO: Should we display the resize error ?
-                    } finally {
-                      setSelectedData(newItem);
+                  // Check if there is a resize
+                  try {
+                    if (newItem.begin !== oldItem.begin) {
+                      const resizeBegin = resizeSegment(
+                        [...newData],
+                        selected,
+                        newItem.begin - oldItem.begin,
+                        'begin'
+                      );
+                      newData = resizeBegin.result;
+                    }
+                    if (oldItem.end !== newItem.end) {
+                      const resizeEnd = resizeSegment(
+                        [...newData],
+                        selected,
+                        newItem.end - oldItem.end,
+                        'end'
+                      );
+                      newData = resizeEnd.result;
                     }
+                    onChange(newData);
+                  } catch (error) {
+                    // TODO: Should we display the resize error ?
+                  } finally {
+                    setSelectedData(newItem);
                   }
                 }}
               >