fixes
This commit is contained in:
parent
a6553b23d8
commit
f053952b5f
|
|
@ -17,14 +17,16 @@ const FilterLayout = ({
|
||||||
search_by = "name",
|
search_by = "name",
|
||||||
width = "500px",
|
width = "500px",
|
||||||
haveFilter = true,
|
haveFilter = true,
|
||||||
haveOrder = true
|
haveOrder = true,
|
||||||
|
haveSearch = true
|
||||||
}: {
|
}: {
|
||||||
filterTitle: string;
|
filterTitle: string;
|
||||||
sub_children?: any;
|
sub_children?: any;
|
||||||
search_by?:string;
|
search_by?:string;
|
||||||
width?:string;
|
width?:string;
|
||||||
haveFilter?:boolean;
|
haveFilter?:boolean;
|
||||||
haveOrder?:boolean
|
haveOrder?:boolean;
|
||||||
|
haveSearch?:boolean
|
||||||
}) => {
|
}) => {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const translateArray = translateOptions(search_array, t);
|
const translateArray = translateOptions(search_array, t);
|
||||||
|
|
@ -80,7 +82,7 @@ const FilterLayout = ({
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<div className="header_search">
|
<div className="header_search">
|
||||||
<SearchField searchBy={search_by} placeholder={t("practical.search_here")} />
|
{haveSearch && <SearchField searchBy={search_by} placeholder={t("practical.search_here")} />}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,7 @@
|
||||||
import ValidationField from "../../../../Components/ValidationField/ValidationField";
|
import ValidationField from "../../../../Components/ValidationField/ValidationField";
|
||||||
import { Col, Row } from "reactstrap";
|
import { Col, Row } from "reactstrap";
|
||||||
import { useGetAllReseller } from "../../../../api/reseller";
|
|
||||||
|
|
||||||
const FilterForm = () => {
|
const FilterForm = () => {
|
||||||
const {data} = useGetAllReseller()
|
|
||||||
console.log(data);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<Row>
|
<Row>
|
||||||
|
|
|
||||||
|
|
@ -27,6 +27,7 @@ const TableHeader = () => {
|
||||||
<FilterLayout
|
<FilterLayout
|
||||||
sub_children={<FilterForm />}
|
sub_children={<FilterForm />}
|
||||||
filterTitle="table.collections"
|
filterTitle="table.collections"
|
||||||
|
haveSearch={false}
|
||||||
/>
|
/>
|
||||||
<Table />
|
<Table />
|
||||||
</Suspense>
|
</Suspense>
|
||||||
|
|
|
||||||
|
|
@ -4,17 +4,20 @@ import { useColumns } from "./useTableColumns";
|
||||||
import useSearchQuery from "../../../api/utils/useSearchQuery";
|
import useSearchQuery from "../../../api/utils/useSearchQuery";
|
||||||
import { useFilterState } from "../../../Components/Utils/Filter/FilterState";
|
import { useFilterState } from "../../../Components/Utils/Filter/FilterState";
|
||||||
import { useGetAllCollections } from "../../../api/collections";
|
import { useGetAllCollections } from "../../../api/collections";
|
||||||
|
import { useFilterStateState } from "../../../zustand/Filter";
|
||||||
|
|
||||||
const App: React.FC = () => {
|
const App: React.FC = () => {
|
||||||
const [searchQuery] = useSearchQuery("name");
|
|
||||||
const { filterState } = useFilterState();
|
const { filterState } = useFilterState();
|
||||||
|
const { Filter } = useFilterStateState();
|
||||||
|
const name = Filter?.description ;
|
||||||
|
const sort_by = Filter?.sort_by ;
|
||||||
|
|
||||||
const response = useGetAllCollections({
|
const response = useGetAllCollections({
|
||||||
name: searchQuery,
|
|
||||||
pagination: true,
|
pagination: true,
|
||||||
...filterState,
|
...filterState,
|
||||||
|
name,
|
||||||
|
sort_by
|
||||||
});
|
});
|
||||||
|
|
||||||
return <DataTable response={response} useColumns={useColumns} />;
|
return <DataTable response={response} useColumns={useColumns} />;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,7 @@ import { useTranslation } from "react-i18next";
|
||||||
import { QueryStatusEnum } from "../../../../enums/QueryStatus";
|
import { QueryStatusEnum } from "../../../../enums/QueryStatus";
|
||||||
import { Button, Divider, Spin } from "antd";
|
import { Button, Divider, Spin } from "antd";
|
||||||
import { MdCancel } from "react-icons/md";
|
import { MdCancel } from "react-icons/md";
|
||||||
|
import { useQueryClient } from "react-query";
|
||||||
|
|
||||||
const Form = () => {
|
const Form = () => {
|
||||||
|
|
||||||
|
|
@ -15,6 +16,7 @@ const Form = () => {
|
||||||
|
|
||||||
const formik = useFormikContext();
|
const formik = useFormikContext();
|
||||||
const { values, setFieldValue } = useFormikContext<any>()
|
const { values, setFieldValue } = useFormikContext<any>()
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
const handleNext = ()=>{
|
const handleNext = ()=>{
|
||||||
setFieldValue( "currentModalIndex" , values?.currentModalIndex + 1 )
|
setFieldValue( "currentModalIndex" , values?.currentModalIndex + 1 )
|
||||||
|
|
@ -23,9 +25,13 @@ const Form = () => {
|
||||||
const handleCancel = () => {
|
const handleCancel = () => {
|
||||||
setIsOpen("");
|
setIsOpen("");
|
||||||
formik.resetForm();
|
formik.resetForm();
|
||||||
};
|
queryClient.resetQueries();
|
||||||
|
|
||||||
|
};
|
||||||
|
console.log(objectToEdit);
|
||||||
|
|
||||||
const student_info = objectToEdit?.data?.data
|
const student_info = objectToEdit?.data?.data
|
||||||
|
const status = objectToEdit?.data?.status
|
||||||
const PackagesInfo = student_info?.packages.map((info:any) => ({
|
const PackagesInfo = student_info?.packages.map((info:any) => ({
|
||||||
id: info?.id,
|
id: info?.id,
|
||||||
name: info.name + " " + `( ${info?.original_price} )`
|
name: info.name + " " + `( ${info?.original_price} )`
|
||||||
|
|
|
||||||
|
|
@ -9,15 +9,16 @@ import { MdCancel } from "react-icons/md";
|
||||||
import { useAddSales } from "../../../../api/sales";
|
import { useAddSales } from "../../../../api/sales";
|
||||||
import { useEffect } from "react";
|
import { useEffect } from "react";
|
||||||
import { toast } from "react-toastify";
|
import { toast } from "react-toastify";
|
||||||
|
import { useQueryClient } from "react-query";
|
||||||
|
|
||||||
const Form = () => {
|
const Form = () => {
|
||||||
|
|
||||||
const { setObjectToEdit,objectToEdit } = useObjectToEdit();
|
const { setObjectToEdit,objectToEdit } = useObjectToEdit();
|
||||||
const { resetForm, values, setFieldValue } = useFormikContext<any>();
|
const { resetForm, values, setFieldValue , } = useFormikContext<any>();
|
||||||
const { setIsOpen } = useModalState((state) => state);
|
const { setIsOpen } = useModalState((state) => state);
|
||||||
const {t} = useTranslation();
|
const {t} = useTranslation();
|
||||||
|
|
||||||
const {mutate,status,error}:any = useAddSales();
|
const {mutate,status,error,isSuccess} = useAddSales();
|
||||||
const coupon_id_object = objectToEdit?.data?.data?.packages.find((e:any)=>(e.id === values?.package_id))
|
const coupon_id_object = objectToEdit?.data?.data?.packages.find((e:any)=>(e.id === values?.package_id))
|
||||||
const student_info = objectToEdit?.data?.data
|
const student_info = objectToEdit?.data?.data
|
||||||
const PackagesInfo = student_info?.packages.map((info:any) => ({
|
const PackagesInfo = student_info?.packages.map((info:any) => ({
|
||||||
|
|
@ -25,7 +26,7 @@ const Form = () => {
|
||||||
name: info.name + " " + `( ${info?.original_price} )`
|
name: info.name + " " + `( ${info?.original_price} )`
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
const queryClient = useQueryClient();
|
||||||
const handleNext = ()=>{
|
const handleNext = ()=>{
|
||||||
mutate({
|
mutate({
|
||||||
package_id:values?.package_id,
|
package_id:values?.package_id,
|
||||||
|
|
@ -36,7 +37,10 @@ const Form = () => {
|
||||||
const handleCancel = () => {
|
const handleCancel = () => {
|
||||||
resetForm();
|
resetForm();
|
||||||
setIsOpen("");
|
setIsOpen("");
|
||||||
setFieldValue( "currentModalIndex" , 0 )
|
setFieldValue( "currentModalIndex" , 0 );
|
||||||
|
setObjectToEdit({});
|
||||||
|
queryClient.resetQueries();
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -45,7 +49,8 @@ const Form = () => {
|
||||||
setIsOpen("");
|
setIsOpen("");
|
||||||
setObjectToEdit({});
|
setObjectToEdit({});
|
||||||
setFieldValue( "currentModalIndex" , values?.currentModalIndex - 2 )
|
setFieldValue( "currentModalIndex" , values?.currentModalIndex - 2 )
|
||||||
}else if(status === QueryStatusEnum.ERROR){
|
}
|
||||||
|
else if(status === QueryStatusEnum.ERROR){
|
||||||
toast.error(t(`toast.${error?.response?.data?.message}` || `toast.error_while_trying_please_try_again`))
|
toast.error(t(`toast.${error?.response?.data?.message}` || `toast.error_while_trying_please_try_again`))
|
||||||
}
|
}
|
||||||
if(values?.currentModalIndex >= 3){
|
if(values?.currentModalIndex >= 3){
|
||||||
|
|
@ -53,6 +58,7 @@ const Form = () => {
|
||||||
setObjectToEdit({})
|
setObjectToEdit({})
|
||||||
setFieldValue( "currentModalIndex" , 0 )
|
setFieldValue( "currentModalIndex" , 0 )
|
||||||
}
|
}
|
||||||
|
|
||||||
}, [values?.currentModalIndex,status])
|
}, [values?.currentModalIndex,status])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
@ -106,3 +112,9 @@ const Form = () => {
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Form;
|
export default Form;
|
||||||
|
|
||||||
|
|
||||||
|
// in this files in my react project i am trying to handle to apis that one for getting student by phone number and check if this number is exist or not and the second file named salesModel for choosing package for this student and third model is for submitting the values and hit the api request but i am facing some problems i think from caching the values
|
||||||
|
// first problem if i choose a number and submit it and return successfully if i close the model in second level and try to re do the method from begginning the previous phone number is being cached i mean if ijust type and valid phone number it take me to the next step named salesModel without even hitting a new request for the new phone number
|
||||||
|
//
|
||||||
|
// second problem if in the 3rd step in submitting the values happen an error it close the model and try to do the method from beggining it happen the same this the phone number is being cached and it does not hit anew request
|
||||||
|
|
@ -10,49 +10,68 @@ import { MdCancel } from "react-icons/md";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { useGetStudentByPhone } from "../../../../api/sales";
|
import { useGetStudentByPhone } from "../../../../api/sales";
|
||||||
import { toast } from "react-toastify";
|
import { toast } from "react-toastify";
|
||||||
|
import { useQueryClient } from "react-query";
|
||||||
|
|
||||||
const Form = () => {
|
const Form = () => {
|
||||||
|
|
||||||
const [triggerApi, setTriggerApi] = useState(false)
|
const [ triggerApi, setTriggerApi] = useState(false)
|
||||||
const { setIsOpen } = useModalState((state) => state);
|
const { setIsOpen } = useModalState((state) => state);
|
||||||
const { setObjectToEdit } = useObjectToEdit();
|
const { setObjectToEdit } = useObjectToEdit();
|
||||||
const {t} = useTranslation();
|
const {t} = useTranslation();
|
||||||
|
|
||||||
|
|
||||||
const formik = useFormikContext();
|
const formik = useFormikContext();
|
||||||
const {values,setFieldValue} = useFormikContext<any>()
|
const {values,setFieldValue} = useFormikContext<any>()
|
||||||
const phoneNumber : number = values?.phone_number
|
const phoneNumber : number = values?.phone_number
|
||||||
|
|
||||||
const { data,isError,status } = useGetStudentByPhone({
|
const { data,isError,status,isSuccess } = useGetStudentByPhone({
|
||||||
phone_number:phoneNumber,
|
phone_number:phoneNumber,
|
||||||
},{
|
},{
|
||||||
enabled: triggerApi
|
enabled: triggerApi
|
||||||
});
|
});
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
const handleNext = ()=>{
|
const handleNext = ()=>{
|
||||||
if(values?.phone_number && phoneNumber.toString().length === 10){
|
if(values?.phone_number && phoneNumber.toString().length === 10 ){
|
||||||
setTriggerApi(true)
|
setTriggerApi(true);
|
||||||
|
setObjectToEdit({data})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
const handleCancel = () => {
|
const handleCancel = () => {
|
||||||
setIsOpen("");
|
setIsOpen("");
|
||||||
formik.resetForm();
|
formik.resetForm();
|
||||||
|
setTriggerApi(false);
|
||||||
|
setObjectToEdit({});
|
||||||
|
queryClient.resetQueries();
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if(!!data?.data?.phone_number){
|
if(isSuccess){
|
||||||
setFieldValue( "currentModalIndex" , values?.currentModalIndex + 1 )
|
setTriggerApi(false);
|
||||||
setObjectToEdit({data})
|
setObjectToEdit({data})
|
||||||
setTriggerApi(false)
|
setFieldValue( "currentModalIndex" , values?.currentModalIndex + 1 )
|
||||||
}
|
}
|
||||||
else if(!data?.data){
|
}, [isSuccess]);
|
||||||
setTriggerApi(false)
|
|
||||||
}
|
|
||||||
if(isError){
|
// useEffect(() => {
|
||||||
toast.error(t('toast.phone_number_not_found'))
|
// if(!!data?.data?.phone_number){
|
||||||
}
|
// // setFieldValue( "currentModalIndex" , values?.currentModalIndex + 1 )
|
||||||
}, [data?.data,triggerApi,isError])
|
// setObjectToEdit({data})
|
||||||
|
// setTriggerApi(false)
|
||||||
|
// }
|
||||||
|
// else if(!data?.data){
|
||||||
|
// setTriggerApi(false)
|
||||||
|
// }
|
||||||
|
// if(isError){
|
||||||
|
// toast.error(t('toast.phone_number_not_found'))
|
||||||
|
// }
|
||||||
|
// if(values?.phone_number === null){
|
||||||
|
// setTriggerApi(false);
|
||||||
|
// }
|
||||||
|
// }, [data?.data,triggerApi,isError,status])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
values?.currentModalIndex == 0 &&
|
values?.currentModalIndex == 0 &&
|
||||||
|
|
@ -93,7 +112,6 @@ const Form = () => {
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</Row>
|
</Row>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,22 +1,24 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import DataTable from "../../../Layout/Dashboard/Table/DataTable";
|
import DataTable from "../../../Layout/Dashboard/Table/DataTable";
|
||||||
import { useColumns } from "./useTableColumns";
|
import { useColumns } from "./useTableColumns";
|
||||||
import useSearchQuery from "../../../api/utils/useSearchQuery";
|
|
||||||
import { useFilterState } from "../../../Components/Utils/Filter/FilterState";
|
import { useFilterState } from "../../../Components/Utils/Filter/FilterState";
|
||||||
import { useGetAllSales } from "../../../api/sales";
|
import { useGetAllSales } from "../../../api/sales";
|
||||||
import { formatDate } from "../../../utils/formatDate";
|
import { formatDate } from "../../../utils/formatDate";
|
||||||
|
import { useFilterStateState } from "../../../zustand/Filter";
|
||||||
|
|
||||||
const App: React.FC = () => {
|
const App: React.FC = () => {
|
||||||
|
|
||||||
const [searchQuery] = useSearchQuery("name");
|
|
||||||
const { filterState }:any = useFilterState();
|
const { filterState }:any = useFilterState();
|
||||||
|
const { Filter } = useFilterStateState();
|
||||||
|
const name = Filter?.name ;
|
||||||
|
const sort_by = Filter?.sort_by ;
|
||||||
const response = useGetAllSales({
|
const response = useGetAllSales({
|
||||||
name: searchQuery,
|
|
||||||
pagination: true,
|
pagination: true,
|
||||||
...filterState,
|
...filterState,
|
||||||
activation_date:formatDate(filterState?.activation_date),
|
activation_date:formatDate(filterState?.activation_date),
|
||||||
expiration_date:formatDate(filterState?.expiration_date),
|
expiration_date:formatDate(filterState?.expiration_date),
|
||||||
|
name,
|
||||||
|
sort_by
|
||||||
});
|
});
|
||||||
|
|
||||||
return <DataTable response={response} useColumns={useColumns} />;
|
return <DataTable response={response} useColumns={useColumns} />;
|
||||||
|
|
|
||||||
|
|
@ -6,12 +6,12 @@ export const useColumns = () => {
|
||||||
const [t] = useTranslation();
|
const [t] = useTranslation();
|
||||||
|
|
||||||
const columns: TableColumnsType<Sales> = [
|
const columns: TableColumnsType<Sales> = [
|
||||||
{
|
// {
|
||||||
title: t("columns.id"),
|
// title: t("columns.id"),
|
||||||
dataIndex: "id",
|
// dataIndex: "id",
|
||||||
key: "id",
|
// key: "id",
|
||||||
align: "center",
|
// align: "center",
|
||||||
},
|
// },
|
||||||
{
|
{
|
||||||
title: t("columns.student_full_name"),
|
title: t("columns.student_full_name"),
|
||||||
key: "student_full_name",
|
key: "student_full_name",
|
||||||
|
|
|
||||||
|
|
@ -560,7 +560,8 @@
|
||||||
"due_to":"صالح الى",
|
"due_to":"صالح الى",
|
||||||
"reseller":"البائعين",
|
"reseller":"البائعين",
|
||||||
"activation_date":"تاريخ التنشيط",
|
"activation_date":"تاريخ التنشيط",
|
||||||
"expiration_date":"تاريخ الالغاء"
|
"expiration_date":"تاريخ الالغاء",
|
||||||
|
"package":"حزمة"
|
||||||
},
|
},
|
||||||
"select": {
|
"select": {
|
||||||
"enums": {
|
"enums": {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user