vqa fixes media schema rules (#2890)

zesty-io · Jul 29, 2024 · 8c0f3ac · 8c0f3ac
1 parent bae5cea
commit 8c0f3ac
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 19 deletions.
diff --git a/src/apps/schema/src/app/components/AddFieldModal/MediaRules.tsx b/src/apps/schema/src/app/components/AddFieldModal/MediaRules.tsx
@@ -152,12 +152,19 @@ export const MediaRules = ({
     newInputValue: string,
     ruleName: string
   ) => {
-    const formattedInput = "." + newInputValue.replace(/\./g, "");
-    setInputValue(formattedInput);
+    const formattedInput = newInputValue.trim().toLowerCase();
+    if (formattedInput && formattedInput[0] !== ".") {
+      setInputValue(`.${formattedInput}`);
+    } else {
+      setInputValue(formattedInput);
+    }
   };
 
   const handleKeyDown = (event: any, ruleName: string) => {
-    if (event.key === "Enter" || event.key === "," || event.key === " ") {
+    if (
+      (event.key === "Enter" || event.key === "," || event.key === " ") &&
+      inputValue
+    ) {
       event.preventDefault();
       const newOption = inputValue.toLowerCase().trim();
       if (
@@ -171,12 +178,22 @@ export const MediaRules = ({
         });
         setInputValue("");
       }
+    } else if (event.key === "Backspace" && !inputValue) {
+      const newTags = [...(fieldData[ruleName] as string[])];
+      newTags.pop();
+      if (!newTags.length) {
+        setExtensionsError(true);
+      }
+      onDataChange({
+        inputName: ruleName,
+        value: newTags,
+      });
     }
   };
 
   const handleDelete = (option: string, ruleName: string) => {
     const newTags = (fieldData[ruleName] as string[]).filter(
-      (item) => item !== option
+      (item) => item.trim() !== option.trim()
     );
     if (!newTags.length) {
       setExtensionsError(true);

diff --git a/src/apps/schema/src/app/components/AddFieldModal/views/Rules.tsx b/src/apps/schema/src/app/components/AddFieldModal/views/Rules.tsx
@@ -48,21 +48,6 @@ export const Rules = ({
 
   return (
     <Stack gap={2.5}>
-      {type === "images" && (
-        <MediaRules
-          errors={errors}
-          fieldConfig={FORM_CONFIG["images"].rules}
-          onDataChange={onFieldDataChanged}
-          groups={mediaFoldersOptions}
-          fieldData={{
-            limit: formData["limit"],
-            group_id: formData["group_id"],
-            fileExtensions: formData["fileExtensions"],
-            fileExtensionsErrorMessage: formData["fileExtensionsErrorMessage"],
-          }}
-        />
-      )}
-
       <DefaultValue
         type={type}
         value={formData["defaultValue"]}
@@ -84,6 +69,21 @@ export const Rules = ({
         currency={(formData["currency"] as string) || "USD"}
       />
 
+      {type === "images" && (
+        <MediaRules
+          errors={errors}
+          fieldConfig={FORM_CONFIG["images"].rules}
+          onDataChange={onFieldDataChanged}
+          groups={mediaFoldersOptions}
+          fieldData={{
+            limit: formData["limit"],
+            group_id: formData["group_id"],
+            fileExtensions: formData["fileExtensions"],
+            fileExtensionsErrorMessage: formData["fileExtensionsErrorMessage"],
+          }}
+        />
+      )}
+
       {(type === "text" || type === "textarea") && (
         <>
           <CharacterLimit