162 lines
4.8 KiB
TypeScript
162 lines
4.8 KiB
TypeScript
import React, { useEffect, useState } from 'react'
|
|
import { getValidationSchema, getDataToSend ,getInitialValuesForAdd as getInitialValues} from '../formUtil'
|
|
import { Tab, TabList, TabPanel as TabBody, Tabs } from 'react-tabs'
|
|
import 'react-tabs/style/react-tabs.css';
|
|
import { MdLanguage } from 'react-icons/md'
|
|
import ViewPage from '../../../Layout/Dashboard/ViewPage';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useAddCategories } from '../../../api/Categories';
|
|
import Form from './Add/AddForm';
|
|
import { usePageState } from '../../../lib/state mangment/LayoutPagestate';
|
|
import { useAddAttribute } from '../../../api/attribute';
|
|
import { TabsContainer } from './Add/AttributeTab/TabsContainer';
|
|
import { useAddAttributeValue } from '../../../api/attributeValue';
|
|
|
|
import useNavigateOnSuccess from '../../../Hooks/useNavigateOnSuccess';
|
|
import { isvalidation } from './Add/fn/isvalidation';
|
|
|
|
const AddcategoriesPage = () => {
|
|
|
|
const { setObjectToEdit, objectToEdit } = usePageState()
|
|
|
|
const {mutate ,isSuccess,data } = useAddCategories()
|
|
const {mutateAsync} = useAddAttribute()
|
|
const {mutate:AddAttributeValue } = useAddAttributeValue()
|
|
|
|
const [Attribute , setAttribute] = useState<any[]>([])
|
|
const [AttributeValues , setAttributeValues] = useState<any[]>([])
|
|
|
|
|
|
const handleSubmit = (values:any)=>{
|
|
console.log(values,"values");
|
|
function isValid(){
|
|
values?.Attribute?.slice(1)?.forEach((item:any) => {
|
|
if (item && Object.keys(item).length > 0){
|
|
setAttribute((prevAddAttributeValue) => [...prevAddAttributeValue, item]);
|
|
}
|
|
|
|
});
|
|
|
|
setAttributeValues(values?.Attribute?.slice(1)?.map((item:any)=>{
|
|
if (item && Object.keys(item).length > 0){
|
|
return item?.AttributeValue
|
|
}
|
|
}))
|
|
const CategoriesValues = {
|
|
name: {
|
|
en:values?.name_en,
|
|
ar:values?.name_ar,
|
|
de:values?.name_de
|
|
},
|
|
parent_id:values?.parent_id,
|
|
photo:values?.photo,
|
|
}
|
|
mutate(CategoriesValues)
|
|
}
|
|
const validationResults = isvalidation(values?.Attribute, t);
|
|
|
|
if (validationResults.every((result) => result)) {
|
|
isValid();
|
|
}
|
|
|
|
|
|
|
|
}
|
|
useEffect(()=>{
|
|
|
|
if(isSuccess){
|
|
const categoryId = (data as any )?.id ;
|
|
|
|
Attribute?.map((dataToSend:any , index:number)=>{
|
|
|
|
const Attribute = dataToSend
|
|
|
|
const NewAttribute = {
|
|
name:{
|
|
en:Attribute?.name_en,
|
|
ar:Attribute?.name_ar,
|
|
de:Attribute?.name_de
|
|
},
|
|
type:Attribute?.type,
|
|
category_id:categoryId,
|
|
}
|
|
|
|
mutateAsync(NewAttribute).then((data)=>{
|
|
const AttributeId = (data as any )?.id ;
|
|
console.log(AttributeValues[0]?.slice(1),"AttributeValues");
|
|
AttributeValues[index]?.slice(1)?.map((dataToSend:any , index:number)=>{
|
|
|
|
const AttributeValue = dataToSend
|
|
const NewAttributeValues = {
|
|
value:{
|
|
en:AttributeValue?.value_en,
|
|
ar:AttributeValue?.value_ar,
|
|
de:AttributeValue?.value_de
|
|
},
|
|
image:AttributeValue?.main_photo,
|
|
attribute_id:AttributeId,
|
|
}
|
|
if (NewAttribute.type === "color") {
|
|
NewAttributeValues["value"] = {
|
|
en: AttributeValue?.value_en,
|
|
ar: AttributeValue?.value_en,
|
|
de: AttributeValue?.value_en
|
|
}
|
|
}
|
|
|
|
AddAttributeValue(NewAttributeValues)
|
|
|
|
})
|
|
})
|
|
})
|
|
|
|
}
|
|
},[isSuccess])
|
|
|
|
|
|
const {t} = useTranslation();
|
|
|
|
useNavigateOnSuccess(isSuccess , '/categories' )
|
|
|
|
useEffect(() => {
|
|
|
|
setObjectToEdit([]);
|
|
|
|
}, []);
|
|
|
|
|
|
const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit };
|
|
|
|
|
|
return (
|
|
<div className='ViewPage'>
|
|
|
|
<ViewPage {...ViewProps}>
|
|
<Tabs>
|
|
<TabList>
|
|
<Tab><div className='SignleDriverContainer'><span className='SignleDriverInfoIcon'><MdLanguage size={20} /></span> <h6 className='SingleDriverInfo'>{t("BasicInfo")}</h6></div></Tab>
|
|
|
|
<Tab><div className='SignleDriverContainer'><span className='SignleDriverInfoIcon'><MdLanguage size={20} /></span> <h6 className='SingleDriverInfo'>{t("attributes")}</h6></div></Tab>
|
|
|
|
|
|
</TabList>
|
|
<TabBody >
|
|
<div className=" mt-4"><Form /></div>
|
|
</TabBody>
|
|
<TabBody >
|
|
<div className=" mt-4"><TabsContainer /></div>
|
|
</TabBody>
|
|
|
|
</Tabs>
|
|
</ViewPage>
|
|
|
|
|
|
|
|
</div>
|
|
)
|
|
|
|
}
|
|
|
|
export default AddcategoriesPage
|
|
|