This commit is contained in:
Moaz Dawalibi 2024-09-25 00:04:57 +03:00
parent d6ae95fbd5
commit b47626f950
9 changed files with 140 additions and 35 deletions

View File

@ -8,6 +8,7 @@ import SubmitModelForm from "./SubmitModelForm";
import { useAddSales } from "../../../../api/sales"; import { useAddSales } from "../../../../api/sales";
import LayoutModel from "./LayoutModel"; import LayoutModel from "./LayoutModel";
import { useObjectToEdit } from "../../../../zustand/ObjectToEditState";
const AddModel: React.FC = () => { const AddModel: React.FC = () => {
const { mutate, status } = useAddSales(); const { mutate, status } = useAddSales();
@ -29,6 +30,8 @@ const AddModel: React.FC = () => {
[modal.Sure]: <SubmitModelForm /> [modal.Sure]: <SubmitModelForm />
} }
// const modelTitle = Forms.[modal.Number] ? "sale" : Forms.Package ? "adcs" : "Ascas"; // const modelTitle = Forms.[modal.Number] ? "sale" : Forms.Package ? "adcs" : "Ascas";
const { objectToEdit,setObjectToEdit } = useObjectToEdit();
console.log(objectToEdit);
return ( return (
@ -45,7 +48,9 @@ const AddModel: React.FC = () => {
> >
{/* {Forms["Number"]} */} {/* {Forms["Number"]} */}
<> <>
<SalesModelForm/> <ValidationModelForm/>
<SalesModelForm/>
<SubmitModelForm/>
</> </>
</LayoutModel> </LayoutModel>

View File

@ -86,16 +86,13 @@ const LayoutModel = ({
}, [isOpen]); }, [isOpen]);
return <Form className="w-100 reseller_modal_form"> return <Form className="w-100 reseller_modal_form">
<Divider />
<main className="main_modal"> <main className="main_modal">
{isLoading ? <SpinContainer /> : children} {isLoading ? <SpinContainer /> : children}
</main> </main>
</Form>
</Form>; }}
}} </Formik>
</Formik> </Modal>
</Modal>
</> </>
); );
}; };

View File

@ -14,7 +14,7 @@ const Form = ({status}:{status?:any}) => {
const {values,setFieldValue} = useFormikContext<any>() const {values,setFieldValue} = useFormikContext<any>()
console.log(values?.currentModalIndex); console.log(values?.currentModalIndex);
const { isOpen, setIsOpen } = useModalState((state) => state); const { isOpen, setIsOpen } = useModalState((state) => state);
const { setObjectToEdit } = useObjectToEdit(); const { objectToEdit,setObjectToEdit } = useObjectToEdit();
const {t} = useTranslation(); const {t} = useTranslation();
const formik = useFormikContext(); const formik = useFormikContext();
const handleNext = ()=>{ const handleNext = ()=>{
@ -25,8 +25,17 @@ const Form = ({status}:{status?:any}) => {
setObjectToEdit({}); setObjectToEdit({});
}; };
console.log(objectToEdit);
const student_info = objectToEdit?.data?.data
const PackagesInfo = student_info?.packages.map((info:any) => ({
id: info?.id,
name: info.name + " " + `( ${info?.original_price} )`
}));
console.log(PackagesInfo);
return ( return (
values?.currentModalIndex == 0 && values?.currentModalIndex == 1 &&
<div className="w-100"> <div className="w-100">
<header className="modal_title"> <header className="modal_title">
@ -36,8 +45,23 @@ const Form = ({status}:{status?:any}) => {
<MdCancel onClick={handleCancel} /> <MdCancel onClick={handleCancel} />
</header> </header>
<Divider /> <Divider />
sac <div className="sales_info_modal">
{values?.currentModalIndex} <div className="info">
<img src="/Image/faker_user.png" alt="" />
<span>
<h5>{student_info?.first_name +" " + student_info?.last_name}</h5>
<h5>الصف: <p> {student_info?.grade_name}</p></h5>
</span>
</div>
<ValidationField
placeholder="choose"
label="package"
name="package_id"
type="Select"
option={PackagesInfo}
/>
</div>
{/* {values?.currentModalIndex} */}
<div className="buttons"> <div className="buttons">
<div className="back_button pointer" onClick={handleCancel}> <div className="back_button pointer" onClick={handleCancel}>
{t("practical.cancel")} {t("practical.cancel")}
@ -47,7 +71,7 @@ sac
disabled={status === QueryStatusEnum.LOADING || !formik.dirty} disabled={status === QueryStatusEnum.LOADING || !formik.dirty}
onClick={handleNext} onClick={handleNext}
> >
{t(`practical.search`)} {t(`practical.sale`)}
{status === QueryStatusEnum.LOADING && ( {status === QueryStatusEnum.LOADING && (
<span className="Spinier_Div"> <span className="Spinier_Div">
<Spin /> <Spin />

View File

@ -18,7 +18,9 @@ const Form = ({status}:{status?:any}) => {
const {t} = useTranslation(); const {t} = useTranslation();
const formik = useFormikContext(); const formik = useFormikContext();
const handleNext = ()=>{ const handleNext = ()=>{
setFieldValue( "currentModalIndex" , values?.currentModalIndex + 1 ) setFieldValue( "currentModalIndex" , values?.currentModalIndex - 2 )
setIsOpen("");
} }
const handleCancel = () => { const handleCancel = () => {
setIsOpen(""); setIsOpen("");
@ -26,7 +28,7 @@ const Form = ({status}:{status?:any}) => {
}; };
return ( return (
values?.currentModalIndex == 1 && values?.currentModalIndex == 2 &&
<div className="w-100"> <div className="w-100">
<header className="modal_title"> <header className="modal_title">
@ -36,18 +38,33 @@ const Form = ({status}:{status?:any}) => {
<MdCancel onClick={handleCancel} /> <MdCancel onClick={handleCancel} />
</header> </header>
<Divider /> <Divider />
<div className="sales_info_modal">
{values?.currentModalIndex} <div className="info">
<img src="/Image/faker_user.png" alt="" />
<span>
<h5>أنس محمد ياسر القلعجي</h5>
<h5>الصف: <p> بكالوريا / علمي</p></h5>
</span>
</div>
<ValidationField
placeholder="choose"
label="package"
name="package"
type="Select"
option={[]}
/>
</div>
{/* {values?.currentModalIndex} */}
<div className="buttons"> <div className="buttons">
<div className="back_button pointer" onClick={handleCancel}> <div className="back_button pointer" onClick={handleCancel}>
{t("practical.cancel")} {t("practical.cancel")}
</div> </div>
<button <button
className="add_button" className="add_button"
disabled={status === QueryStatusEnum.LOADING || !formik.dirty} disabled={status === QueryStatusEnum.LOADING}
onClick={handleNext} onClick={handleNext}
> >
{t(`practical.search`)} {t(`practical.yes`)}
{status === QueryStatusEnum.LOADING && ( {status === QueryStatusEnum.LOADING && (
<span className="Spinier_Div"> <span className="Spinier_Div">
<Spin /> <Spin />

View File

@ -8,30 +8,59 @@ import { useTranslation } from "react-i18next";
import { QueryStatusEnum } from "../../../../enums/QueryStatus"; import { QueryStatusEnum } from "../../../../enums/QueryStatus";
import { Divider, Spin } from "antd"; import { Divider, Spin } from "antd";
import { MdCancel } from "react-icons/md"; import { MdCancel } from "react-icons/md";
import { useEffect, useState } from "react";
import { useGetStudentByPhone } from "../../../../api/sales";
const Form = ({status}:{status?:any}) => { const Form = () => {
const {values,setFieldValue} = useFormikContext<any>() const {values,setFieldValue} = useFormikContext<any>()
console.log(values?.currentModalIndex); const [triggerApi, setTriggerApi] = useState(false)
const phoneNumber : number = values?.phone_number
const { isOpen, setIsOpen } = useModalState((state) => state); const { isOpen, setIsOpen } = useModalState((state) => state);
const { setObjectToEdit } = useObjectToEdit(); const { objectToEdit,setObjectToEdit } = useObjectToEdit();
const {t} = useTranslation(); const {t} = useTranslation();
const formik = useFormikContext(); const formik = useFormikContext();
const {data,isError,isSuccess,status} = useGetStudentByPhone({
phone_number:phoneNumber
},{
enabled: triggerApi
});
const handleNext = ()=>{ const handleNext = ()=>{
setFieldValue( "currentModalIndex" , values?.currentModalIndex + 1 ) if(values?.phone_number && phoneNumber.toString().length === 10){
setTriggerApi(true)
}
} }
console.log(status);
console.log(isSuccess);
const handleCancel = () => { const handleCancel = () => {
setIsOpen(""); setIsOpen("");
setObjectToEdit({}); setObjectToEdit({});
}; };
useEffect(() => {
if(isSuccess == true){
setFieldValue( "currentModalIndex" , values?.currentModalIndex + 1 )
setObjectToEdit({data})
setTriggerApi(false)
}
else {
setTriggerApi(false)
}
}, [isSuccess])
return ( return (
values?.currentModalIndex == 1 && values?.currentModalIndex == 0 &&
<div className="w-100"> <div className="w-100">
<header className="modal_title"> <header className="modal_title">
<span> <span>
{t(`models.`)}{" "} {t(`models.add_sales`)}{" "}
</span> </span>
<MdCancel onClick={handleCancel} /> <MdCancel onClick={handleCancel} />
</header> </header>
@ -46,7 +75,6 @@ const Form = ({status}:{status?:any}) => {
/> />
<Divider className="margin_auto"/> <Divider className="margin_auto"/>
</Col> </Col>
{values?.currentModalIndex}
<div className="buttons"> <div className="buttons">
<div className="back_button pointer" onClick={handleCancel}> <div className="back_button pointer" onClick={handleCancel}>
{t("practical.cancel")} {t("practical.cancel")}

View File

@ -4,7 +4,8 @@ export const getInitialValues = (objectToEdit: any): any => {
return { return {
id: objectToEdit?.id ?? null, id: objectToEdit?.id ?? null,
phone_number: objectToEdit?.phone_number ?? null, phone_number: objectToEdit?.phone_number ?? null,
currentModalIndex: 0 currentModalIndex: 0,
package_id:objectToEdit?.package_id ?? null
}; };
}; };
@ -17,3 +18,9 @@ export const getValidationSchema = () => {
currentModalIndex: Yup.number().max(2) currentModalIndex: Yup.number().max(2)
}); });
}; };
export const getValidationSchemaForSale = () => {
return Yup.object().shape({
package_id: Yup.string().required("package_id is required")
});
};

View File

@ -3,4 +3,28 @@
.modal_title{ .modal_title{
height: 5vh; height: 5vh;
} }
.sales_info_modal{
margin-block: 30px 10px;
display: flex; flex-direction: column;
gap: 20px;
}
.info{
width: 100%;
display: flex;align-items: center;
gap: 10px;
img{
width: 60px;
border-radius: 50%;
}
span{
h5{
color: var(--value);
display: flex;align-items: center;
gap: 10px;
p{
color: var(--primary);
}
}
}
}
} }

View File

@ -11,6 +11,7 @@ const API = {
const KEY = "sales"; const KEY = "sales";
export const useGetAllSales = (params?: any, options?: any) => export const useGetAllSales = (params?: any, options?: any) =>useGetQuery(KEY, API.GET, params, options);
useGetQuery(KEY, API.GET, params, options);
export const useAddSales = () => useAddMutation(KEY, API.ADD); export const useAddSales = () => useAddMutation(KEY, API.ADD);
export const useGetStudentByPhone = (params?: any, options?: any) => useGetQuery(KEY, API.GET_BY_PHONE, params, options);
export const useGetSummery = () => useGetQuery(KEY, API.GET_SUMMERY);

View File

@ -309,7 +309,8 @@
"account_activities":"أنشطة الحساب", "account_activities":"أنشطة الحساب",
"This will close your account. Your account will be interactive when you log in again":"سيؤدي هذا إلى إغلاق حسابك. سيكون حسابك تفاعليا عند تسجيل الدخول مرة أخرى", "This will close your account. Your account will be interactive when you log in again":"سيؤدي هذا إلى إغلاق حسابك. سيكون حسابك تفاعليا عند تسجيل الدخول مرة أخرى",
"Your account will be permanently deleted":"سيتم حذف حسابك نهائيا", "Your account will be permanently deleted":"سيتم حذف حسابك نهائيا",
"search":"بحث" "search":"بحث",
"sale":"بيع"
}, },
"Table": { "Table": {
"header": "", "header": "",
@ -525,7 +526,8 @@
"contact_number1":"رقم الهاتف", "contact_number1":"رقم الهاتف",
"contact_number2":"رقم الهاتف الإضافي", "contact_number2":"رقم الهاتف الإضافي",
"lat":"الطول", "lat":"الطول",
"lng":"العرض" "lng":"العرض",
"choose":"حدد"
}, },
"select": { "select": {
"enums": { "enums": {