From ecf5b1c9b661e537a11b6a59484ecba0ff4dcea6 Mon Sep 17 00:00:00 2001 From: karimalden Date: Mon, 22 Jul 2024 12:52:21 +0300 Subject: [PATCH] fixtabs --- src/Pages/Categories/Page.tsx | 4 - src/Pages/newProduct/ProductsPage.tsx | 58 ++++++++++++ src/Pages/newProduct/formUtil.ts | 111 +++++++++++++++++++++++ src/Pages/newProduct/useTableColumns.tsx | 89 ++++++++++++++++++ 4 files changed, 258 insertions(+), 4 deletions(-) create mode 100644 src/Pages/newProduct/ProductsPage.tsx create mode 100644 src/Pages/newProduct/formUtil.ts create mode 100644 src/Pages/newProduct/useTableColumns.tsx diff --git a/src/Pages/Categories/Page.tsx b/src/Pages/Categories/Page.tsx index a6cc0c8..1007440 100644 --- a/src/Pages/Categories/Page.tsx +++ b/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 ( diff --git a/src/Pages/newProduct/ProductsPage.tsx b/src/Pages/newProduct/ProductsPage.tsx new file mode 100644 index 0000000..98d05aa --- /dev/null +++ b/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 ( + + +
+ + + + + navigate('/products/add')}> + +
+ + + + + + + ) +} + +export default ProductsPage + diff --git a/src/Pages/newProduct/formUtil.ts b/src/Pages/newProduct/formUtil.ts new file mode 100644 index 0000000..3793bd2 --- /dev/null +++ b/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; +}; + diff --git a/src/Pages/newProduct/useTableColumns.tsx b/src/Pages/newProduct/useTableColumns.tsx new file mode 100644 index 0000000..d6af11a --- /dev/null +++ b/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) => ( + // + // ), + // }, + { + name: "#", + sortable: false, + center: "true", + cell: (row:any) => ( + navigate('/products/'+row.id)} + objectToEdit={row} + showEdit={true} + showView={false} + onDelete={() => deleteMutation.mutate({ id: row.id })} + /> + ), + }, + ], + [t] + ); +}; + +export default useTableColumns; +