fixtabs

src/Pages/Categories/Page.tsx

@@ -18,14 +18,10 @@ function Page() {
     const navigate = useNavigate()
     const totalRows = data?.meta?.total;
     const { setObjectToEdit, objectToEdit } = usePageState()
-    console.log(objectToEdit,"objectToEdit");
 
     useEffect(() => {
-      console.log(objectToEdit,"objectToEdit");
       if(objectToEdit)
       setObjectToEdit(null)
-    
-    
     }, [setObjectToEdit,objectToEdit ,data,isRefetching])
     
   return (

src/Pages/newProduct/ProductsPage.tsx

@@ -0,0 +1,58 @@
+
+import DashBody from '../../Layout/Dashboard/DashBody'
+import DashHeader from '../../Layout/Dashboard/DashHeader'
+import LyTable from '../../Layout/Dashboard/LyTable'
+import useTableColumns from './useTableColumns'
+import { QueryStatusEnum } from '../../config/QueryStatus'
+import { useGetProduct } from '../../api/product'
+import { useNavigate } from 'react-router-dom'
+import AddButton from '../../Layout/Dashboard/AddButton/AddButton'
+import SearchField from '../../Layout/Dashboard/SearchField'
+import SelectField from '../../Layout/Dashboard/SelectWSearchField'
+import { useGetCategories } from '../../api/Categories'
+
+function ProductsPage() {
+
+    const column   =useTableColumns()
+    const {data  ,status } = useGetProduct()
+    const navigate = useNavigate()
+    const totalRows = data?.meta?.total;
+    const { data:Categories } = useGetCategories()
+    const language = localStorage.getItem("language") ?? "en"
+
+  const SelectData = Categories?.categories?.map((item:any)=>(
+    {
+      label : item?.name[language],
+      value : item?.id
+    }
+  ))
+  
+
+  return (
+    <DashBody status={status as QueryStatusEnum} >
+    <DashHeader showAddButton={false} title={'products'}>
+      <div className='RightSide  d-flex gap-2 align-center  '>
+
+     <SelectField selectBy="category" submiteBy="category_id" lebel="category" option={SelectData} />
+     <SearchField searchBy="name"/>
+
+     <AddButton  onClick={()=>navigate('/products/add')}></AddButton>
+
+     </div>
+    </DashHeader>
+      
+      <LyTable
+        data={data?.BaseProducts}
+        isLoading={false}
+        columns={column}
+        total={totalRows }
+        is_pagination={true}
+    />
+      
+    
+    </DashBody>
+  )
+}
+
+export default ProductsPage
+

src/Pages/newProduct/formUtil.ts

@@ -0,0 +1,111 @@
+
+import * as Yup from "yup";
+import { ImageBaseURL } from "../../api/config";
+
+
+
+export const getInitialValues = (objectToEdit: any) => {
+  if (!objectToEdit || !objectToEdit?.products) {
+    return {};
+  }
+  const products =  objectToEdit?.products?.map((item: any) => {
+    // console.log(item,"item");
+
+
+   const formattedData = item?.info ? Object.entries(item?.info).map(([key, value], index) => ({
+    [`Description`]: key,
+    [`key`]: value,
+  })) : [];
+
+  // console.log(formattedData,"formattedData");
+  const images_product = item?.images?.map((item:any)=>{
+    return item?.path
+  })
+  console.log(images_product,"images_product");
+  
+  
+    return ({
+    
+      name_ar: item?.name["ar"],
+      name_en: item?.name["en"],
+      name_de: item?.name["de"],
+      description_ar: item?.description["ar"],
+      description_en: item?.description["en"],
+      description_de: item?.description["de"],
+      images: images_product,
+
+      main_photo: item?.main_photo,
+      price: item?.price,
+      // quantity: item?.quantity,
+      // products_attributes: item?.products_attributes,
+      id:item?.id,
+      info:formattedData
+
+    })
+  }) 
+
+  const productsInfo = objectToEdit?.products?.info || {};
+  const formattedData = Object.entries(productsInfo).map(([key, value], index) => ({
+    [`${index}.Description`]: key,
+    [`${index}.key`]: value,
+  }));
+  console.log(products,"products");
+
+
+  return {
+    id:objectToEdit?.id,
+    name: objectToEdit?.name ?? "",
+    name_ar: objectToEdit?.name?.ar ?? '',
+    name_en: objectToEdit?.name?.en ?? '',
+    name_de: objectToEdit?.name?.de ?? '',
+    description_ar: objectToEdit?.description?.ar ?? '',
+    description_en: objectToEdit?.description?.en ?? '',
+    description_de: objectToEdit?.description?.de ?? '',
+    // attribute: objectToEdit?.attribute ?? "",
+    category_id: objectToEdit?.category?.id ?? "",
+    price: objectToEdit?.price ?? "",
+
+    variable: [{}, ...products],
+    // info: [undefined, ...formattedData] ?? [],
+    removedVariant:[],
+  }
+};
+
+export const getInitialValuesAdd = (objectToEdit: any | null = null) => {
+ 
+  return {
+    id: "",
+    name:  "",
+    name_ar:'',
+    name_en: '',
+    name_de: '', 
+    description_ar:'',
+    description_en: '',
+    description_de: '', 
+    price: "",
+    category_id:  "",
+    variable: [],
+    info:  [],
+
+  }
+};
+
+export const getValidationSchema = (editMode: boolean = false) => {
+  // validate input  
+  return Yup.object().shape({
+    name_ar: Yup.string().required('Required'),
+    name_en: Yup.string().required('Required'),
+    name_de: Yup.string().required('Required'),
+    category_id: Yup.string().required('Required'),
+    
+   
+
+  });
+};
+
+export const getDataToSend = (values: any): FormData => {
+  const data = { ...values };
+
+  return data;
+};
+

src/Pages/newProduct/useTableColumns.tsx

@@ -0,0 +1,89 @@
+
+import React, { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import Actions from "../../Components/Ui/tables/Actions";
+import { HovarableImage } from "../../Components/Ui";
+import { BaseURL } from "../../api/config";
+import { ToggleStatus } from "../../Components/Ui/ToggleStatus";
+import ColumnsImage from "../../Components/Columns/ColumnsImage";
+import LoadingSpinner from "../../Components/Ui/LoadingSpinner";
+import { Switch } from "antd";
+import { mapTranslatedProperties } from "../../utils/language/mapTranslatedProperties";
+// import { useDeleteProduct, useUpdateProductStatus } from "../../api/owner_products";
+import { useNavigate } from "react-router-dom";
+import { useDeleteProduct, useUpdateProductStatus } from "../../api/product";
+
+
+const useTableColumns :any = () => {
+  const [t] = useTranslation();
+  const toggleMutation = useUpdateProductStatus();
+  const deleteMutation = useDeleteProduct();
+
+  const navigate  = useNavigate()
+  const handleChange = (row:any)=> {
+    const status = row?.favorite ;  
+    toggleMutation.mutate({id:row?.id,new_status:status})
+      
+  }
+  const language = localStorage.getItem("language") ?? "en"
+
+  return useMemo(
+    () => [
+      {
+        name: t("id"),
+        sortable: true, // Enable sorting for id column
+        center: true,
+        selector: (row: any) => row.id, // Specify selector function for sorting
+      },      {
+        name: t("name"),
+        sortable: false,
+        center: true,
+        selector:(row:any) => row?.name?.[language],
+
+      },
+      {
+        name: t("product_count"),
+        sortable: false,
+        center: true,
+        selector:(row:any) => row?.product_count,
+
+      },
+      
+      {
+        name: t("category"),
+        sortable: false,
+        center: true,
+        cell: (row:any) => (
+          row?.category?.name?.[language]
+        ),
+      },
+     
+      // {
+      //   name: t("favorite"),
+      //   sortable: false,
+      //   center: true,
+      //   cell: (row:any) => (
+      //     <ToggleStatus handleSwitch={handleChange} object={row} toggleMutation={toggleMutation} />
+      //   ),
+      // },
+      {
+        name: "#",
+        sortable: false,
+        center: "true",
+        cell: (row:any) => (
+            <Actions
+              onEdit={()=> navigate('/products/'+row.id)}
+              objectToEdit={row}
+              showEdit={true}
+              showView={false}
+              onDelete={() => deleteMutation.mutate({ id: row.id })}
+              />
+        ),
+      },
+    ],
+    [t]
+  );
+};
+
+export default useTableColumns;
+