diff --git a/src/Pages/Categories/View/Add/AddForm.tsx b/src/Pages/Categories/View/Add/AddForm.tsx index dc39c7e..a8d7c6a 100644 --- a/src/Pages/Categories/View/Add/AddForm.tsx +++ b/src/Pages/Categories/View/Add/AddForm.tsx @@ -2,21 +2,13 @@ import React from 'react' import { Col, Row } from 'reactstrap'; import ValidationField from '../../../../Components/ValidationField/ValidationField'; -import { useFormikContext } from 'formik'; - -import { DatePicker } from 'antd'; -import { useTranslation } from 'react-i18next'; import { useGetCategories } from '../../../../api/Categories'; import useFormatToSelect from '../../../../Hooks/useFormatToSelect'; -import { useGetOneAttribute } from '../../../../api/attribute'; -import Atteibute from '../Atteibute'; function Form() { - const formik = useFormikContext(); - const [t] = useTranslation(); + const { data } = useGetCategories() const SelectData = useFormatToSelect(data?.categories) - const { values } = useFormikContext(); return ( @@ -30,10 +22,6 @@ function Form() { - {/* */} - {/* {values?.id && - - } */} diff --git a/src/Pages/Categories/View/Add/AttributeValueTab/AttributeTabs.tsx b/src/Pages/Categories/View/Add/AttributeValueTab/AttributeTabs.tsx index 9bc6df5..50bde38 100644 --- a/src/Pages/Categories/View/Add/AttributeValueTab/AttributeTabs.tsx +++ b/src/Pages/Categories/View/Add/AttributeValueTab/AttributeTabs.tsx @@ -1,10 +1,11 @@ // AttributeValueTabs.tsx import React, { useEffect, useState } from 'react'; -import { Col, Row } from 'reactstrap'; +import { Col, Label, Row } from 'reactstrap'; import { FormItem } from './Field/FormItem'; import { useFormikContext, FormikValues } from 'formik'; import File from './Field/File'; import { useTranslation } from 'react-i18next'; +import { ColorPicker, type ColorPickerProps, type GetProp } from 'antd'; interface AttributeValueTabsProps { tabKey: string; @@ -14,7 +15,7 @@ interface AttributeValueTabsProps { export const AttributeValueTabs: React.FC = ({ parentKey, tabKey }) => { const { t } = useTranslation(); const formikContext = useFormikContext(); - const { values, handleChange } = formikContext; + const { values, handleChange,setFieldValue } = formikContext; const [valuesChanged, setvaluesChanged] = useState(values?.Attribute[parentKey]?.type) const handleFieldChange = (fieldName: string) => ( @@ -27,8 +28,15 @@ export const AttributeValueTabs: React.FC = ({ parentKe useEffect(() => { setvaluesChanged(values?.Attribute[parentKey]?.type) }, [values?.Attribute[parentKey]?.type]) - + + + type Color = GetProp; + const handelchangeColor = (value: Color, hex: string)=>{ + console.log(hex); + + setFieldValue(`Attribute.${parentKey}.AttributeValue.${tabKey}.value_en`,hex) + } return ( <>
{t("Value")} {tabKey}
@@ -50,14 +58,26 @@ export const AttributeValueTabs: React.FC = ({ parentKe : - <> - + {/* */} + + + ({color.toHexString()})} + onChange={handelchangeColor} + className=' ' + format='hex' + size='large' + /> - + + } diff --git a/src/Pages/Categories/View/Edit/AttributeTab/AttributeTabs.tsx b/src/Pages/Categories/View/Edit/AttributeTab/AttributeTabs.tsx deleted file mode 100644 index b1b4270..0000000 --- a/src/Pages/Categories/View/Edit/AttributeTab/AttributeTabs.tsx +++ /dev/null @@ -1,54 +0,0 @@ -// AttributeTabs.tsx -import React from 'react'; -import { Col, Row } from 'reactstrap'; -import { FormItem } from './Field/FormItem'; -import { useFormikContext, FormikValues } from 'formik'; -import File from './Field/File'; -import { useTranslation } from 'react-i18next'; -import { TabsContainer } from '../AttributeValueTab/TabsContainer'; -import SelectField from './Field/Select'; - -interface AttributeTabsProps { - tabKey: string; -} - -export const AttributeTabs: React.FC = ({ tabKey }) => { - const { t } = useTranslation(); - const formikContext = useFormikContext(); - const { values, handleChange } = formikContext; - - const handleFieldChange = (fieldName: string) => ( - e: React.ChangeEvent | any - ) => { - handleChange(`Attribute.${tabKey}.${fieldName}`)(e); // Prepend "Attribute" - }; - const FormikName = (FormikFieldname: any) => values?.Attribute[tabKey]?.[FormikFieldname]; - - - - return ( - <> -
{t("Attribute")} {tabKey}
- - - - - - - - - - - - -
- -
- - - ); -}; diff --git a/src/Pages/Categories/View/Edit/AttributeTab/Field/File.tsx b/src/Pages/Categories/View/Edit/AttributeTab/Field/File.tsx deleted file mode 100644 index 2bb8b80..0000000 --- a/src/Pages/Categories/View/Edit/AttributeTab/Field/File.tsx +++ /dev/null @@ -1,62 +0,0 @@ - - - -import { Button, Upload, UploadFile } from 'antd' -import { UploadOutlined } from '@ant-design/icons'; -import { useTranslation } from 'react-i18next'; -import { useFormikContext } from 'formik'; - - -const File = ({ tabKey}:any) => { - const { t } = useTranslation(); - const formik = useFormikContext(); - const name = `Attribute[${tabKey}].${"main_photo"}`; - const imageUrl = formik?.values?.Attribute[tabKey]?.main_photo ? URL.createObjectURL(formik?.values?.Attribute[tabKey]?.main_photo) : "" ; - - const fileList: UploadFile[] = [ - - { - uid: '-1', - name: formik?.values?.Attribute[tabKey]?.main_photo?.name ?? "", - status: 'done', - url: imageUrl , - thumbUrl: imageUrl , - } - ]; - const FilehandleChange = (value:any) => { - - formik.setFieldValue(name, value.file.originFileObj) - - }; - const customRequest = async ({ onSuccess}: any) => { - onSuccess(); - }; - return ( -
- - - - - - - - -
- ) -} - -export default File \ No newline at end of file diff --git a/src/Pages/Categories/View/Edit/AttributeTab/Field/FormItem.tsx b/src/Pages/Categories/View/Edit/AttributeTab/Field/FormItem.tsx deleted file mode 100644 index 94582f4..0000000 --- a/src/Pages/Categories/View/Edit/AttributeTab/Field/FormItem.tsx +++ /dev/null @@ -1,22 +0,0 @@ -// FormItem.tsx -import React from 'react'; -import { Input, Label } from 'reactstrap'; - -interface FormItemProps { - label: string; - value: string; - onChange: (e: React.ChangeEvent) => void; - type?: any -} - -export const FormItem: React.FC = ({ label, value, onChange ,type = "text"}) => { - - return ( - <> - - - ); -}; diff --git a/src/Pages/Categories/View/Edit/AttributeTab/Field/Select.tsx b/src/Pages/Categories/View/Edit/AttributeTab/Field/Select.tsx deleted file mode 100644 index 3c767aa..0000000 --- a/src/Pages/Categories/View/Edit/AttributeTab/Field/Select.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import { Form, Select } from 'antd' -import { useFormikContext } from 'formik'; -import React from 'react' -import { useTranslation } from 'react-i18next'; - -const SelectField = ({tabKey}: any) => { - - const { t } = useTranslation(); - const formik = useFormikContext(); - const Formikname = `Attribute[${tabKey}].type`; - const FormikValue = formik?.values?.Attribute[tabKey]?.["type"]; - - const onChange = (value:any) => { - formik.setFieldValue(Formikname,value) - console.log(value); - - } - const Data = [{label: "color",value :"color"},{label: "text",value :"text"},{label: "image",value :"image"}] - return ( -
- - - ); -}; diff --git a/src/Pages/Categories/View/Edit/AttributeValueTab/TabsContainer.tsx b/src/Pages/Categories/View/Edit/AttributeValueTab/TabsContainer.tsx deleted file mode 100644 index 4130567..0000000 --- a/src/Pages/Categories/View/Edit/AttributeValueTab/TabsContainer.tsx +++ /dev/null @@ -1,148 +0,0 @@ -// TabsContainer.tsx -import React, { useEffect, useState } from 'react'; -import { Tabs, Space } from 'antd'; -import { CopyOutlined } from '@ant-design/icons'; -import { toast } from 'react-toastify'; -import { FormikValues, useFormikContext } from 'formik'; -import { useTranslation } from 'react-i18next'; -import { AttributeValueTabs } from './AttributeTabs'; - -import { AttributeValueTabs as AddAttributeValueTabs } from '../../Add/AttributeValueTab/AttributeTabs'; -import { MdOutlineDeleteOutline } from 'react-icons/md'; - -export const TabsContainer = ({ parentKey }: any) => { - const [activeKey, setActiveKey] = useState('1'); - const [t] = useTranslation() - - const { setFieldValue } = useFormikContext(); - const formikContext = useFormikContext(); - const { values, handleChange } = formikContext; - const [width, setWidth] = useState(window.innerWidth); - - -const initialItemShape: any = { - label: `${t(`Value`)} 1`, - key: '1', - closable: true, -}; - const varianCount = values?.Attribute[parentKey]?.AttributeValue?.slice(1)?.map((item: any, index: any) => { - return { - label: `${t(`Value`)}` + `${index + 1}`, - key: index + 1, - closable: true, - } - }) ?? initialItemShape - - const [items, setItems] = useState(Array.isArray(varianCount) ? varianCount : [initialItemShape]); // Ensure items is always an array - const findFirstMissingKey = (itemKeys:string[]) => { - const keysAsNumbers = itemKeys.map(Number); // Convert strings to numbers - for (let i = 1; i <= keysAsNumbers.length + 1; i++) { - if (!keysAsNumbers.includes(i)) { - return i; - } - } - }; - const [nextKey, setNextKey] = useState(items.map((item: any) => `${item.key}`)); // Initialize the key counter to the length of items + 1 - useEffect(() => { - // Set the active key to the first tab key when the component mounts or items change - if (items.length > 0) { - setActiveKey(items[0].key); - } - }, []); - - useEffect(() => { - const keys = items.map((item: any) => `${item.key}`); - setNextKey(findFirstMissingKey(keys)) - - }, [items]); - const handleAdd = () => { - const newKey = `${nextKey}`; - setItems([...items, { key: newKey, label: `${t(`Value`)} ${newKey}`, closable: true,Add:true }]); - setActiveKey(newKey); - - }; - - const handleDuplicate = (targetKey: string) => { - const targetItem = items.find((item: any) => item.key === targetKey); - if (targetItem) { - const newKey = `${nextKey}`; - const newItem = { ...targetItem, key: newKey, label: `${t(`Value`)} ${newKey}`,Add:true }; - setItems([...items, newItem]); - setActiveKey(newKey); - setNextKey((prevKey : any) => prevKey + 1); - - - const originalValues = values?.Attribute?.[parentKey]?.AttributeValue?.[targetKey]; - - setFieldValue(`Attribute.${parentKey}.AttributeValue.${newKey}`, {...originalValues,id:null}); - console.log({...originalValues,id:null},"{...originalValues,id:null}"); - - } - }; - - const [removedAttributeValues, setRemovedAttributeValues] = useState([]); - useEffect(() => { - setFieldValue(`removedAttributeValue[${parentKey}]`, removedAttributeValues); - - }, [removedAttributeValues]); - - const handleRemove = (targetKey: string) => { - const newItems = items?.filter((item: any) => item.key !== targetKey) as any; - const removedItem = values?.Attribute?.[parentKey]?.AttributeValue?.[targetKey] as any; - console.log(removedItem?.id,"attrrubute value?.id"); - - if (removedItem?.id && removedItem?.id !== null &&removedItem?.id !== 0 ) { - setRemovedAttributeValues((prevRemovedAttributeValues) => [...prevRemovedAttributeValues, removedItem.id]); - } - - const newActiveKey = newItems.length ? newItems[newItems.length - 1].key : '1'; - setItems(newItems); - setActiveKey(newActiveKey); - setFieldValue(`Attribute.${parentKey}.AttributeValue.${targetKey}`, undefined); - - }; - - useEffect(() => { - const handleResize = () => { - setWidth(window.innerWidth); - }; - - window.addEventListener('resize', handleResize); - - return () => { - window.removeEventListener('resize', handleResize); - }; - }, []); - - const tabPosition = 'top'; - - return ( - <> - (action === 'add' ? handleAdd() : handleRemove(targetKey))} - tabPosition={tabPosition} - removeIcon={} - - items={ - items.map((item: any) => ({ - label: {t(`${item.label}`)} handleDuplicate(item.key)} />, - // children: item?.Add ? : , - children: , - - key: item.key, - closable: item.closable, - })) - } - - > - - - { items.length === 0 && ( -
{t("Add_New_value")}
- )} - - ); -}; diff --git a/src/Pages/Categories/View/Edit/Form.tsx b/src/Pages/Categories/View/Edit/Form.tsx deleted file mode 100644 index 9a88262..0000000 --- a/src/Pages/Categories/View/Edit/Form.tsx +++ /dev/null @@ -1,42 +0,0 @@ - -import React from 'react' -import { Col, Row } from 'reactstrap'; -import ValidationField from '../../../../Components/ValidationField/ValidationField'; -import { useFormikContext } from 'formik'; - -import { DatePicker } from 'antd'; -import { useTranslation } from 'react-i18next'; -import { useGetCategories } from '../../../../api/Categories'; -import useFormatToSelect from '../../../../Hooks/useFormatToSelect'; -import { useGetOneAttribute } from '../../../../api/attribute'; -import Atteibute from '../Atteibute'; - -function Form() { - const formik = useFormikContext(); - const [t] = useTranslation(); - const { data } = useGetCategories() - const SelectData = useFormatToSelect(data?.categories) - const { values } = useFormikContext(); - - - return ( - - - - - - - - - - - - - - - ) -} - -export default Form - - diff --git a/src/Pages/Categories/View/EditPage.tsx b/src/Pages/Categories/View/EditPage.tsx index b29da05..804cb14 100644 --- a/src/Pages/Categories/View/EditPage.tsx +++ b/src/Pages/Categories/View/EditPage.tsx @@ -11,7 +11,7 @@ import LoadingPage from '../../../Layout/app/LoadingPage'; import { useTranslation } from 'react-i18next'; import { useGetOneCategories, useUpdateCategories } from '../../../api/Categories'; import useNavigateOnSuccess from '../../../Hooks/useNavigateOnSuccess'; -import { TabsContainer } from './Edit/AttributeTab/TabsContainer'; +import { TabsContainer } from './Add/AttributeTab/TabsContainer'; import { useAddAttribute, useGetSingleAttribute } from '../../../api/attribute'; import { useDeleteAttribute, useUpdateAttribute } from '../../../api/attribute'; import { useAddAttributeValue, useDeleteAttributeValue, useUpdateAttributeValue } from '../../../api/attributeValue'; diff --git a/src/Styles/Layout/Layout.scss b/src/Styles/Layout/Layout.scss index 173d32a..af986a6 100644 --- a/src/Styles/Layout/Layout.scss +++ b/src/Styles/Layout/Layout.scss @@ -550,4 +550,13 @@ padding: 10px 40px; // } .gomecards{ min-height: 220px; +} + +.ValidationFiledCusom{ + display: flex; + flex-direction: column; + >*{ + width: 100%; + + } } \ No newline at end of file diff --git a/src/api/attribute.ts b/src/api/attribute.ts index 443c16a..5c10bb0 100644 --- a/src/api/attribute.ts +++ b/src/api/attribute.ts @@ -2,8 +2,6 @@ import useGetQueryPagination from "./helper/ueGetPagination"; import useAddMutation from "./helper/useAddMutation" import useDeleteMutation from "./helper/useDeleteMutation" -import useGetOneQuery from "./helper/useGetOneQuery"; -import useGetQuery from "./helper/useGetQuery" import useGetSingleQuery from "./helper/useGetSingleQuery"; import useUpdateMutation from "./helper/useUpdateMutation"; import useUpdateMutationById from "./helper/useUpdateMutationById"; @@ -17,11 +15,10 @@ const API = { }; const KEY = "ATTRIBUTE" -const KEY2 = "ATTRIBUTEValue" +const KEYS =['ATTRIBUTE', 'CATEGORIES'] - -export const useGetAttribute = (params?:any) => useGetQueryPagination(KEY, API.GET_ALL,params); -export const useGetOneAttribute = (params?:any) => useGetOneQuery(KEY, API.GET_ALL,params); +export const useGetAttribute = (params?:any) => useGetQueryPagination(KEYS, API.GET_ALL,params); +// export const useGetOneAttribute = (params?:any) => useGetOneQuery(KEY, API.GET_ALL,params); export const useGetSingleAttribute = (params?:any,options?:any) => useGetSingleQuery(KEY, API.GET_ALL,params,options); export const useAddAttribute = () => useAddMutation(KEY, API.ADD); diff --git a/src/api/helper/ueGetPagination.tsx b/src/api/helper/ueGetPagination.tsx index 466747a..d50a3c8 100644 --- a/src/api/helper/ueGetPagination.tsx +++ b/src/api/helper/ueGetPagination.tsx @@ -3,23 +3,22 @@ import useAxios from './useAxios'; import { useLocation, useNavigate } from 'react-router-dom'; import useAuthState from '../../lib/state mangment/AuthState'; -export default function useGetQueryPagination(KEY:string , Api: string , params:any={},options:any={}) { +export default function useGetQueryPagination(KEY: string | string[], Api: string, params: any = {}, options: any = {}) { const axios = useAxios(); const location = useLocation(); const pagination = location?.search || ''; // console.log(params); const {logout} = useAuthState() -const language = localStorage.getItem("language") ?? "en" const navigate = useNavigate() return useQuery( - [KEY, pagination], async () => { + [Array.isArray(KEY) ? KEY.join(',') : KEY, pagination], async () => { const response = await axios.get(Api + pagination , {params}); return response.data; }, { onError: (error:any) => { - if(error?.response?.status == 401 || error?.response?.status == 403){ + if(error?.response?.status === 401 || error?.response?.status === 403){ logout() navigate("/auth")