feat: array category

La-Fresca · Jul 18, 2024 · b0d3406 · b0d3406
1 parent e275523
commit b0d3406
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 5 deletions.
diff --git a/src/components/BranchManager/Forms/DynamicForm/EditForm.tsx b/src/components/BranchManager/Forms/DynamicForm/EditForm.tsx
@@ -6,14 +6,14 @@ import { XMarkIcon } from '@heroicons/react/24/outline';
 import { TrashIcon } from '@heroicons/react/24/solid';
 import ImageInput from '@components/BranchManager/Inputs/ImageInput';
 import { Button } from '@nextui-org/react';
-import MultiSelect from '@components/BranchManager/Forms/MultiSelect';
+import MultiSelect from '@components/BranchManager/Forms/MultiCheckBox';
 import { Category } from '@/types/category';
 import { toast } from 'react-toastify';
 import { useNavigate } from 'react-router-dom';
 
 const FormSchema = z.object({
   name: z.string().min(1, { message: 'Item name is required' }),
-  category: z.string().min(1, { message: 'Category is required' }),
+  category: z.array(z.string()).min(1, { message: 'Category is required' }),
   description: z.string().optional(),
   price: z.coerce
     .number()
@@ -167,7 +167,7 @@ function EditForm({ id }: Props) {
     if (item) {
       setItem(item);
       setValue('name', item.name);
-      setValue('category', item.category);
+      setValue('category', item.category || []);
       setValue('description', item.description || '');
       setValue('price', item.price);
       setValue('image', item.image);
@@ -226,6 +226,7 @@ function EditForm({ id }: Props) {
                   categories={categories}
                   register={register}
                   fieldname="category"
+                  setValue={setValue}
                 />
               </label>
 

diff --git a/src/components/BranchManager/Forms/DynamicForm/index.tsx b/src/components/BranchManager/Forms/DynamicForm/index.tsx
@@ -6,14 +6,14 @@ import { XMarkIcon } from '@heroicons/react/24/outline';
 import { TrashIcon } from '@heroicons/react/24/solid';
 import ImageInput from '@components/BranchManager/Inputs/ImageInput';
 import { Button } from '@nextui-org/react';
-import MultiSelect from '@components/BranchManager/Forms/MultiSelect';
+import MultiSelect from '@components/BranchManager/Forms/MultiCheckBox';
 import { Category } from '@/types/category';
 import { toast } from 'react-toastify';
 import { useNavigate } from 'react-router-dom';
 
 const FormSchema = z.object({
   name: z.string().min(1, { message: 'Item name is required' }),
-  category: z.string().min(1, { message: 'Category is required' }),
+  category: z.array(z.string()).min(1, { message: 'Category is required' }),
   description: z.string().optional(),
   price: z.coerce
     .number()
@@ -174,6 +174,7 @@ const DynamicForm: FC = () => {
                   categories={categories}
                   register={register}
                   fieldname="category"
+                  setValue={setValue}
                 />
               </label>
 

diff --git a/src/components/BranchManager/Forms/MultiCheckBox.tsx b/src/components/BranchManager/Forms/MultiCheckBox.tsx
@@ -0,0 +1,65 @@
+import { FC, useState, useEffect } from 'react';
+import { Select, SelectItem } from '@nextui-org/react';
+import { Category } from '@/types/category';
+import { UseFormRegister, UseFormSetValue } from 'react-hook-form';
+
+interface AppProps {
+  categories: Category[];
+  fieldname: string;
+  register: UseFormRegister<any>;
+  setValue: UseFormSetValue<any>;
+}
+
+const App: FC<AppProps> = ({ categories, register, fieldname, setValue }) => {
+  const [selectedKeys, setSelectedKeys] = useState<Set<string>>(new Set());
+  let value = Array.from(selectedKeys);
+
+  useEffect(() => {
+    setValue(fieldname, Array.from(selectedKeys));
+    console.log(/*selectedKeys*/ Array.from(selectedKeys));
+    console.log(value);
+  }, [selectedKeys, setValue, fieldname]);
+
+  const handleSelectionChange = (keys: Set<string> | any) => {
+    setSelectedKeys(keys instanceof Set ? keys : new Set(keys)); // Ensure keys is always a Set<string>
+  };
+
+  return (
+    <div className="relative">
+      <div className="flex flex-col items-center">
+        <div className="w-full">
+          <div className="mb-2 flex rounded border border-stroke py-2 outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark bg-inherit">
+            <Select
+              items={categories}
+              placeholder="Select an option"
+              className="w-full"
+              variant="bordered"
+              isMultiline={true}
+              selectionMode="multiple"
+              labelPlacement="outside"
+              classNames={{
+                base: 'max-w-full',
+                trigger: 'min-h-12 py-2',
+              }}
+              selectedKeys={selectedKeys}
+              onSelectionChange={(keys) => handleSelectionChange(keys)}
+            >
+              {(category) => (
+                <SelectItem
+                  className="dark:bg-[#000000] bg-white rounded-sm border border-solid w-full dark:text-white text-[#000000]"
+                  key={category.key}
+                  value={category.key}
+                >
+                  {category.label}
+                </SelectItem>
+              )}
+            </Select>
+            <input type="hidden" value={value} {...register(fieldname)} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default App;
diff --git a/src/pages/BranchManager/FoodList/index.tsx b/src/pages/BranchManager/FoodList/index.tsx
@@ -229,6 +229,9 @@ export default function FoodList() {
   }, []);
 
   const topContent = React.useMemo(() => {
+    if (!foods.length) {
+      return <div>Loading...</div>;
+    }
     return (
       <div className="flex flex-col gap-4">
         <h1 className="text-2xl text-white font-bold">Food List</h1>