Category

src/pages/food/Category.tsx

@@ -20,7 +20,8 @@ import { extractErrorMessage } from '@/config/func'
 type CategoryFormValues = {
     title: string
     icon: File[]
-    order: number
+    order: number,
+    parentId?: string,
 }
 
 const CategoryFood: FC = () => {
@@ -49,7 +50,8 @@ const CategoryFood: FC = () => {
         initialValues: {
             title: '',
             icon: [],
-            order: 0
+            order: 0,
+            parentId: undefined,
         },
         validationSchema: Yup.object().shape({
             title: Yup.string().required('عنوان دسته‌بندی الزامی است')
@@ -60,7 +62,8 @@ const CategoryFood: FC = () => {
                     title: values.title,
                     isActive,
                     avatarUrl: avatarUrl || selectedIconUrl || editingCategory?.avatarUrl || '',
-                    order: values.order
+                    order: values.order,
+                    parentId: values.parentId || undefined,
                 }
 
                 if (editingCategory) {

src/pages/food/components/CategoryForm.tsx

@@ -4,13 +4,15 @@ import Input from '@/components/Input'
 import SwitchComponent from '@/components/Switch'
 import Button from '@/components/Button'
 import type { FormikProps } from 'formik'
-import { useGetIcons } from '../hooks/useFoodData'
+import { useGetCategories, useGetIcons } from '../hooks/useFoodData'
 import IconSelectModal from './IconSelectModal'
+import Select from '@/components/Select'
 
 type CategoryFormValues = {
   title: string
   icon: File[]
-  order: number
+  order: number,
+  parentId?: string,
 }
 
 type Props = {
@@ -34,7 +36,9 @@ const CategoryForm: FC<Props> = ({
   onIconUrlChange,
   selectedIconUrl
 }) => {
+
   const { data: iconsData } = useGetIcons()
+  const { data: categories } = useGetCategories()
   const icons = iconsData?.data || []
   const [isIconModalOpen, setIsIconModalOpen] = useState(false)
 
@@ -67,6 +71,20 @@ const CategoryForm: FC<Props> = ({
         />
       </div>
 
+      <div className='mb-3 lg:mb-4'>
+        <Select
+          label='والد (اختیاری)'
+          items={categories?.data?.map((item) => {
+            return {
+              label: item.title,
+              value: item.id
+            }
+          }) || []}
+          placeholder='انتخاب'
+          {...formik.getFieldProps('parentId')}
+        />
+      </div>
+
       <div className="mb-3 lg:mb-4">
         <Input
           label="اولویت"

src/pages/food/components/CategoryTableColumns.tsx

@@ -35,6 +35,15 @@ const CategoryTableColumns = ({ onStatusChange, onEdit, onDelete, isDeleting = f
       title: 'عنوان',
       key: 'title'
     },
+    {
+      title: 'والد',
+      key: 'categoryId',
+      render: (item: Category) => {
+        return (
+          <div>{item.parent?.title || '-'}</div>
+        )
+      }
+    },
     {
       title: 'وضعیت',
       key: 'isActive',

src/pages/food/types/Types.ts

@@ -29,6 +29,7 @@ export type Category = {
   restId: string;
   avatarUrl: string;
   order: number | null;
+  parent?: Category;
 };
 
 export type FoodDetailsCategory = {
@@ -128,6 +129,7 @@ export type CreateCategoryType = {
   isActive: boolean;
   avatarUrl: string;
   order: number;
+  parentId?: string;
 };
 
 export type Icon = {