refactor: Metadata refactored

src/features/AddModel/AddModelDialog/AddModelDialog.tsx

@@ -16,9 +16,7 @@ interface AddModelDialogProps {
 export default interface MetadataProps {
   name: string;
   description: string;
-  field: MetadataDto[];
-  zone?: MetadataDto[];
-  formation: MetadataDto[];
+  metadata: MetadataDto[];
   analogue?: AnalogueList[];
 }
 
@@ -38,9 +36,7 @@ export type ErrorType = {
 const defaultMetadata: MetadataProps = {
   name: '',
   description: '',
-  field: [],
-  zone: [],
-  formation: [],
+  metadata: [],
   analogue: [],
 };
 
@@ -83,13 +79,18 @@ export const AddModelDialog = ({
       errors.description = 'Description not provided';
     }
 
-    if (inputValues?.field === undefined || inputValues?.field?.length === 0) {
+    if (
+      inputValues?.metadata === undefined ||
+      inputValues?.metadata?.filter((m) => m.metadataType === 'Field').length <=
+        0
+    ) {
       errors.field = 'Field not selected';
     }
 
     if (
-      inputValues?.formation === undefined ||
-      inputValues?.formation?.length === 0
+      inputValues?.metadata === undefined ||
+      inputValues?.metadata?.filter((m) => m.metadataType === 'Formation')
+        .length <= 0
     ) {
       errors.formation = 'Formation not selected';
     }

src/features/AddModel/ModelMetadata/ModelMetadata.tsx

@@ -44,6 +44,20 @@ export const ModelMetadata = ({
     enabled: !!token,
   });
 
+  function handleAddMetadata(
+    e: AutocompleteChanges<MetadataDto>,
+    propType: string,
+  ) {
+    const metadataList: MetadataDto[] = metadata.metadata.filter(
+      (i) => i.metadataType !== propType,
+    );
+    const newList = [...metadataList, ...e.selectedItems];
+    setMetadata({
+      ...metadata,
+      metadata: [...newList],
+    });
+  }
+
   if (isLoading || !data?.success) return <p>Loading ...</p>;
   if (analougeData.isLoading || !analougeData?.data?.success)
     return <p>Loading ...</p>;
@@ -88,9 +102,12 @@ export const ModelMetadata = ({
                 label="Field"
                 options={data.data.filter((d) => d.metadataType === 'Field')}
                 optionLabel={(option) => option.value}
-                selectedOptions={metadata?.field}
+                selectedOptions={metadata?.metadata.filter(
+                  (m) => m.metadataType === 'Field',
+                )}
+                multiple
                 onOptionsChange={(e: AutocompleteChanges<MetadataDto>) =>
-                  setMetadata({ ...metadata, field: e.selectedItems })
+                  handleAddMetadata(e, 'Field')
                 }
               ></Autocomplete>
               {errors.field && <Label label="This field is required"></Label>}
@@ -103,10 +120,12 @@ export const ModelMetadata = ({
                   (d) => d.metadataType === 'Formation',
                 )}
                 optionLabel={(option) => option.value}
-                selectedOptions={metadata?.formation}
+                selectedOptions={metadata?.metadata.filter(
+                  (m) => m.metadataType === 'Formation',
+                )}
                 multiple
                 onOptionsChange={(e: AutocompleteChanges<MetadataDto>) =>
-                  setMetadata({ ...metadata, formation: e.selectedItems })
+                  handleAddMetadata(e, 'Formation')
                 }
               ></Autocomplete>
               {errors.formation && (
@@ -122,16 +141,22 @@ export const ModelMetadata = ({
               selectedOptions={metadata?.analogue}
               multiple
               onOptionsChange={(e: AutocompleteChanges<AnalogueList>) =>
-                setMetadata({ ...metadata, analogue: e.selectedItems })
+                setMetadata({
+                  ...metadata,
+                  analogue: e.selectedItems,
+                })
               }
             ></Autocomplete>
             <Autocomplete
               label="Zone (optional)"
               options={data.data.filter((d) => d.metadataType === 'Zone')}
               optionLabel={(option) => option.value}
-              selectedOptions={metadata?.zone}
+              selectedOptions={metadata?.metadata.filter(
+                (m) => m.metadataType === 'Zone',
+              )}
+              multiple
               onOptionsChange={(e: AutocompleteChanges<MetadataDto>) =>
-                setMetadata({ ...metadata, zone: e.selectedItems })
+                handleAddMetadata(e, 'Zone')
               }
             ></Autocomplete>
           </Styled.AutocompleteRow>

src/pages/Browse/Browse.tsx

@@ -132,9 +132,7 @@ export const Browse = () => {
   }
 
   async function uploadMetadata(modelId: string, metadata: MetadataProps) {
-    addMetadataFields(metadata.zone);
-    addMetadataFields(metadata.field);
-    addMetadataFields(metadata.formation);
+    addMetadataFields(metadata.metadata);
     addAnalogueFields(metadata.analogue);
 
     const readyMetadata: AddAnalogueModelMetadataCommandForm = {