ui: fix import from list in select fields

Signed-off-by: Miguel Garcia Garcia <miguel.garcia.garcia@cern.ch>
cernanalysispreservation · Oct 11, 2023 · cd5515b · cd5515b
1 parent 017aa4f
commit cd5515b
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 32 deletions.
diff --git a/cap/modules/fixtures/schemas/cms.json b/cap/modules/fixtures/schemas/cms.json
@@ -326,7 +326,7 @@
           "ana_notes": {
             "items": {
               "pattern": "^AN-[0-9]{4}/[0-9]{3}$",
-              "placeholder": "e.g. AN-2010-107",
+              "placeholder": "e.g. AN-2010/107",
               "type": "string"
             },
             "type": "array",
@@ -1160,7 +1160,7 @@
         "ui:array": "StringArrayField",
         "items": {
           "ui:options": {
-            "mask":"\\AN-0000-000"
+            "mask":"\\AN-0000/000"
           }
         }
       }

diff --git a/ui/cap-react/src/antd/admin/utils/index.js b/ui/cap-react/src/antd/admin/utils/index.js
@@ -67,3 +67,5 @@ export const isItTheArrayField = (schema, uiSchema) => {
     schema.type === "array" && !uiSchema["ui:field"] && !uiSchema["ui:widget"]
   );
 };
+
+export const timer = ms => new Promise(res => setTimeout(res, ms));
diff --git a/ui/cap-react/src/antd/forms/templates/ArrayFieldTemplates/ImportListModal.js b/ui/cap-react/src/antd/forms/templates/ArrayFieldTemplates/ImportListModal.js
@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { Checkbox, Input, List, Modal, Tabs, Typography } from "antd";
 import axios from "../../../../axios";
+import { timer } from "../../../admin/utils";
 
 const ImportListModal = ({
   open,
@@ -23,7 +24,6 @@ const ImportListModal = ({
   const [fetchedResults, setFetchedResults] = useState(null);
   const [currentIndex, setCurrentIndex] = useState(null);
   const [data, setData] = useState(null);
-  // const [error, setError] = useState(null);
 
   useEffect(() => {
     if (currentIndex) {
@@ -60,10 +60,33 @@ const ImportListModal = ({
       setFetchedResults(data);
       updateAll(data, true);
     } catch (err) {
-      // setError(error);
+      //
     }
   };
 
+  const populateItems = async (values, type) => {
+    for (let [index, value] of values.entries()) {
+      let _index = formData.length + index;
+      if (type == "object" && to) {
+        value = { [to]: value };
+      }
+      setCurrentIndex({
+        index: _index,
+        value,
+      });
+      await timer(1);
+    }
+  };
+
+  const addItem = async (values, type) => {
+    // eslint-disable-next-line no-unused-vars
+    for (const _ of values) {
+      onAddClick();
+      await timer(1);
+    }
+    populateItems(values, type);
+  };
+
   const _batchImport = () => {
     let values = [];
     if (!data) return;
@@ -82,28 +105,9 @@ const ImportListModal = ({
     let { items: { type } = {} } = schema;
 
     if (Array.isArray(values)) {
-      setTimeout(() => {
-        values.map(() => {
-          onAddClick();
-        });
-      }, 1);
+      addItem(values, type);
     }
 
-    setTimeout(
-      () =>
-        values.map((value, index) => {
-          let _index = formData.length + index;
-          if (type == "object" && to) {
-            value = { [to]: value };
-          }
-          setCurrentIndex({
-            index: _index,
-            value,
-          });
-        }),
-      1
-    );
-
     onCancel();
   };
   return (
@@ -136,7 +140,7 @@ const ImportListModal = ({
               <>
                 <Input.Search
                   enterButton="Fetch"
-                  placeHolder="Insert your pattern e.x /dataset/*"
+                  placeholder="Insert your pattern e.x /dataset/*"
                   onChange={e => {
                     e.target.value == "" &&
                       fetchedResults &&
@@ -182,8 +186,8 @@ const ImportListModal = ({
             children: (
               <>
                 <Typography.Title level={5}>
-                  {description} || Paste your list here. Insert one item per
-                  line:
+                  {description ||
+                    "Paste your list here. Insert one item per line:"}
                 </Typography.Title>
                 <Input.TextArea
                   rows={15}

diff --git a/ui/cap-react/src/antd/forms/templates/ArrayFieldTemplates/LayerArrayFieldTemplate.js b/ui/cap-react/src/antd/forms/templates/ArrayFieldTemplates/LayerArrayFieldTemplate.js
@@ -126,14 +126,14 @@ const LayerArrayFieldTemplate = ({ items = [] }) => {
               actions={getActionsButtons(item)}
               style={{
                 border: "1px solid #f0f0f0",
-                padding: "10px",
+                padding: "0 10px",
                 marginBottom: "5px",
                 backgroundColor: "white",
               }}
             >
               <List.Item.Meta
                 title={
-                  <Typography.Text ellipsis={{ rows: 1 }}>
+                  <Typography.Text ellipsis>
                     {stringifyItem(
                       item?.children?.props?.uiSchema?.["ui:options"] ?? null,
                       item.children.props.formData
@@ -147,6 +147,7 @@ const LayerArrayFieldTemplate = ({ items = [] }) => {
                     children: item.children,
                   });
                 }}
+                style={{ padding: "10px 0" }}
               />
             </List.Item>
           </ErrorFieldIndicator>

diff --git a/ui/cap-react/src/antd/forms/widgets/SelectWidget.js b/ui/cap-react/src/antd/forms/widgets/SelectWidget.js
@@ -63,8 +63,6 @@ const SelectWidget = ({
 
   const getPopupContainer = node => node.parentNode;
 
-  console.log(value, enumOptions, multiple);
-
   const selectedIndexes = enumOptionsIndexForValue(
     value,
     enumOptions,
@@ -126,7 +124,7 @@ const SelectWidget = ({
       onSearch={suggestions && debounce(handleSearch, 500)}
       showSearch={suggestions}
       placeholder={placeholder}
-      value={selectedIndexes}
+      value={suggestions ? value : selectedIndexes}
       {...extraProps}
       filterOption={filterOption}
       aria-describedby={ariaDescribedByIds(id)}