Merge pull request #1552 from rockingrohit9639/fix/custom-field

fix(custom-field): fix issue with empty category in custom field
Shelf-nu · Jan 3, 2025 · f0b3a6e · f0b3a6e
2 parents b2876ff + 1dfabc7
commit f0b3a6e
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 33 deletions.
diff --git a/app/components/custom-fields/form.tsx b/app/components/custom-fields/form.tsx
@@ -47,7 +47,10 @@ export const NewCustomFieldFormSchema = z.object({
     .transform((val) => (val === "on" ? true : false)),
   organizationId: z.string(),
   options: z.array(z.string()).optional(),
-  categories: z.array(z.string()).optional(),
+  categories: z
+    .array(z.string().min(1, "Please select a category"))
+    .optional()
+    .default([]),
 });
 
 /** Pass props of the values to be used as default for the form fields */
@@ -263,6 +266,7 @@ export const CustomFieldForm = ({
               <CategoriesInput
                 categories={categories}
                 name={(i) => zo.fields.categories(i)()}
+                error={(i) => zo.errors.categories(i)()?.message}
               />
             )}
           </FormRow>

diff --git a/app/components/forms/categories-input.tsx b/app/components/forms/categories-input.tsx
@@ -2,13 +2,15 @@ import { useState } from "react";
 import { tw } from "~/utils/tw";
 import DynamicSelect from "../dynamic-select/dynamic-select";
 import { Button } from "../shared/button";
+import When from "../when/when";
 
 type CategoriesInputProps = {
   className?: string;
   style?: React.CSSProperties;
   disabled?: boolean;
   name: (index: number) => string;
   categories: string[];
+  error: (index: number) => string | undefined;
 };
 
 export default function CategoriesInput({
@@ -17,46 +19,58 @@ export default function CategoriesInput({
   disabled,
   name,
   categories: incomingCategories,
+  error,
 }: CategoriesInputProps) {
   const [categories, setCategories] = useState<string[]>(
     incomingCategories.length === 0 ? [""] : incomingCategories
   );
 
   return (
     <div className={tw("w-full", className)} style={style}>
-      {categories.map((category, i) => (
-        <div key={i} className="mb-3 flex items-center gap-x-2">
-          <DynamicSelect
-            disabled={disabled}
-            fieldName={name(i)}
-            defaultValue={category}
-            model={{ name: "category", queryKey: "name" }}
-            contentLabel="Category"
-            initialDataKey="categories"
-            countKey="totalCategories"
-            placeholder="Select Category"
-            className="flex-1"
-            excludeItems={categories}
-            onChange={(value) => {
-              if (value !== undefined) {
-                categories[i] = value;
-                setCategories([...categories]);
-              }
-            }}
-          />
+      {categories.map((category, i) => {
+        const errorMessage = error(i);
 
-          <Button
-            icon="x"
-            className="py-2"
-            variant="outline"
-            type="button"
-            onClick={() => {
-              categories.splice(i, 1);
-              setCategories([...categories]);
-            }}
-          />
-        </div>
-      ))}
+        return (
+          <div key={i} className="mb-3">
+            <div className="flex items-center gap-x-2">
+              <DynamicSelect
+                disabled={disabled}
+                fieldName={name(i)}
+                defaultValue={category}
+                model={{ name: "category", queryKey: "name" }}
+                contentLabel="Category"
+                initialDataKey="categories"
+                countKey="totalCategories"
+                placeholder="Select Category"
+                className="flex-1"
+                excludeItems={categories}
+                onChange={(value) => {
+                  if (value !== undefined) {
+                    categories[i] = value;
+                    setCategories([...categories]);
+                  }
+                }}
+              />
+
+              <Button
+                icon="x"
+                className="py-2"
+                variant="outline"
+                type="button"
+                disabled={categories.length === 1}
+                onClick={() => {
+                  categories.splice(i, 1);
+                  setCategories([...categories]);
+                }}
+              />
+            </div>
+
+            <When truthy={!!errorMessage}>
+              <p className="mt-1 text-sm text-red-500">{errorMessage}</p>
+            </When>
+          </div>
+        );
+      })}
 
       <Button
         icon="plus"