change function of fliter sort, modal and locate set new data and change it and update
This commit is contained in:
Ehsan
@@ -18,7 +18,12 @@ function AutoCompleteSelect({
|
||||
disablePortal
|
||||
options={list}
|
||||
disabled={disabled}
|
||||
ListboxProps={listboxProps}
|
||||
ListboxProps={{
|
||||
style: {
|
||||
maxHeight: 200,
|
||||
overflow: "auto",
|
||||
},
|
||||
}}
|
||||
value={value || null}
|
||||
getOptionLabel={(option) => {
|
||||
if (typeof option === "string") return option;
|
||||
|
||||
@@ -0,0 +1,93 @@
|
||||
import BottomSelect from "@/components/icons/BottomSelect";
|
||||
import { Autocomplete, Button, TextField } from "@mui/material";
|
||||
import { styleTextSelectRight } from "@/mui";
|
||||
|
||||
function AddressSelector({
|
||||
list,
|
||||
value,
|
||||
isError,
|
||||
updateData,
|
||||
label,
|
||||
disabled,
|
||||
listboxProps,
|
||||
name,
|
||||
}) {
|
||||
return (
|
||||
<Autocomplete
|
||||
disablePortal
|
||||
options={list}
|
||||
disabled={disabled}
|
||||
ListboxProps={listboxProps}
|
||||
value={value || null}
|
||||
getOptionLabel={(option) => option?.name || ""}
|
||||
className="!w-full !rounded-lg auto-complete-selector"
|
||||
onChange={(_, value) => updateData(name, value)}
|
||||
sx={{
|
||||
...styleTextSelectRight,
|
||||
// Hide Icon Number
|
||||
"& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
|
||||
{
|
||||
display: "none",
|
||||
},
|
||||
"& input[type=number]": {
|
||||
MozAppearance: "textfield",
|
||||
},
|
||||
"& .MuiInputBase-input": { padding: "12.5px 14px !important" },
|
||||
"& .MuiInputBase-root": {
|
||||
borderRadius: 2,
|
||||
padding: "0 !important",
|
||||
height: {
|
||||
xs: "43px !important",
|
||||
sm: "43px !important",
|
||||
md: "46px !important",
|
||||
lg: "48px !important",
|
||||
},
|
||||
},
|
||||
"& .MuiOutlinedInput-notchedOutline": {
|
||||
border: "1px solid #D7D7D7",
|
||||
},
|
||||
"& .MuiInput-underline:hover:not(.Mui-disabled):before, .MuiOutlinedInput-notchedOutline":
|
||||
{
|
||||
borderColor: "#D7D7D7 !important",
|
||||
},
|
||||
"& .muirtl-1kiro5a-MuiInputBase-root-MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline":
|
||||
{
|
||||
border: "1px solid #5559CE !important",
|
||||
},
|
||||
"& .MuiOutlinedInput-notchedOutline": {
|
||||
border: isError ? "1px solid red !important" : "",
|
||||
},
|
||||
}}
|
||||
renderOption={(props, option) => (
|
||||
<Button
|
||||
fullWidth
|
||||
{...props}
|
||||
key={props.id}
|
||||
className="!flex !justify-start !p-[8px] !text-start !text-[#A1A1A1] hover:dark:!bg-[#35343D] !bg-[#FFF] dark:!bg-[#1F1D2B]"
|
||||
>
|
||||
{option.name}
|
||||
</Button>
|
||||
)}
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
fullWidth
|
||||
{...params}
|
||||
InputProps={{
|
||||
...params.InputProps,
|
||||
endAdornment: (
|
||||
<div className="absolute left-4">
|
||||
<BottomSelect />
|
||||
</div>
|
||||
),
|
||||
}}
|
||||
placeholder={label}
|
||||
sx={{
|
||||
borderRadius: "8px",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default AddressSelector;
|
||||
@@ -2,85 +2,37 @@ import { Button } from "@mui/material";
|
||||
|
||||
// Icon
|
||||
import CloseModalD from "@/components/icons/CloseModalD";
|
||||
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
|
||||
import ArrowLeftM from "@/components/icons/ArrowLeftM";
|
||||
import { useState } from "react";
|
||||
import { request } from "@/services/response";
|
||||
import AddressSelector from "./AddressSelector";
|
||||
|
||||
function Content({
|
||||
state,
|
||||
states,
|
||||
selected,
|
||||
setDoctors,
|
||||
updateData,
|
||||
filter,
|
||||
setFilter,
|
||||
handleClose,
|
||||
modalLocate,
|
||||
filteredCities,
|
||||
handleSearch,
|
||||
}) {
|
||||
const citySelected = selected.city;
|
||||
const [loading, setLoading] = useState(false);
|
||||
const listboxProps = {
|
||||
style: {
|
||||
maxHeight: 200,
|
||||
overflow: "auto",
|
||||
},
|
||||
|
||||
const updateData = (name, value) => {
|
||||
setFilter((prev) => {
|
||||
if (name === "state") {
|
||||
return {
|
||||
...prev,
|
||||
state: value,
|
||||
city: null,
|
||||
};
|
||||
}
|
||||
return {
|
||||
...prev,
|
||||
[name]: value,
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
const handleFilter = (city) => {
|
||||
const current = new URLSearchParams(window.location.search);
|
||||
current.set("province", city.id);
|
||||
const newUrl = `${window.location.pathname}?${current.toString()}`;
|
||||
window.history.replaceState({}, "", newUrl);
|
||||
|
||||
handleSearch && handleSearch("");
|
||||
handleClose();
|
||||
};
|
||||
|
||||
const sendReq = () => {
|
||||
setLoading(true);
|
||||
const itemCity =
|
||||
selected &&
|
||||
citySelected &&
|
||||
filteredCities.find((item) => item.name === citySelected);
|
||||
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const specialty = params.get("specialty");
|
||||
const gender = params.get("gender");
|
||||
const degree = params.get("degree");
|
||||
const active = params.get("turn");
|
||||
|
||||
const city =
|
||||
states.find((item) => item.name === selected.province)?.id || null;
|
||||
const state =
|
||||
filteredCities.find((item) => item.name === selected.city)?.id || null;
|
||||
|
||||
const requestData = {
|
||||
specialty: specialty === "null" ? null : specialty,
|
||||
gender,
|
||||
degree,
|
||||
active,
|
||||
city,
|
||||
state,
|
||||
};
|
||||
|
||||
request
|
||||
.getDoctors(requestData)
|
||||
.then((res) => {
|
||||
if (res && res.data) setDoctors(res.data);
|
||||
})
|
||||
.catch(() => {})
|
||||
.finally(() => {
|
||||
setLoading(false);
|
||||
handleFilter(itemCity);
|
||||
});
|
||||
};
|
||||
|
||||
const valState =
|
||||
selected &&
|
||||
citySelected &&
|
||||
filteredCities.find((item) => item.name === citySelected) &&
|
||||
citySelected;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-end w-full">
|
||||
@@ -93,35 +45,31 @@ function Content({
|
||||
شهر یا استان مورد نظر را انتخاب نمایید:
|
||||
</p>
|
||||
<div className="flex md:min-w-[344px] flex-col mt-[52px] md:mt-[44px] mb-14 justify-center items-center gap-10">
|
||||
<AutoCompleteSelect
|
||||
value={selected.province}
|
||||
disabled={state}
|
||||
sendAll={true}
|
||||
listboxProps={listboxProps}
|
||||
updateData={updateData}
|
||||
<AddressSelector
|
||||
name="state"
|
||||
list={states}
|
||||
label="استان"
|
||||
name="province"
|
||||
/>
|
||||
<AutoCompleteSelect
|
||||
disabled={state}
|
||||
value={filter.state}
|
||||
updateData={updateData}
|
||||
listboxProps={listboxProps}
|
||||
sendAll={true}
|
||||
value={valState}
|
||||
list={filteredCities}
|
||||
/>
|
||||
<AddressSelector
|
||||
name="city"
|
||||
label="شهر"
|
||||
disabled={!selected.province}
|
||||
value={filter.city}
|
||||
list={filteredCities}
|
||||
updateData={updateData}
|
||||
disabled={!filter.state}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full flex justify-end">
|
||||
<Button
|
||||
loading={loading}
|
||||
className="!w-full md:!w-fit !flex !px-3 items-center justify-center gap-1 mr-auto"
|
||||
onClick={sendReq}
|
||||
onClick={modalLocate}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
disabled={!selected.city || !selected.province}
|
||||
disabled={!filter.city || !filter.state}
|
||||
>
|
||||
تایید و ادامه
|
||||
<ArrowLeftM />
|
||||
|
||||
@@ -6,32 +6,31 @@ import { styleDefault } from "@/mui";
|
||||
import { addLabelToList } from "@/helper";
|
||||
|
||||
// Data
|
||||
import statesData from "@/data/state.json";
|
||||
import citiesData from "@/data/city.json";
|
||||
import states from "@/data/state.json";
|
||||
import cities from "@/data/city.json";
|
||||
import Content from "./Content";
|
||||
|
||||
function ModalSearchCity({
|
||||
open,
|
||||
state,
|
||||
filter,
|
||||
setOpen,
|
||||
children,
|
||||
selected,
|
||||
setDoctors,
|
||||
handleSearch,
|
||||
setSelected,
|
||||
setFilter,
|
||||
modalLocate,
|
||||
}) {
|
||||
const provinceSelected = selected.province;
|
||||
const stateSelected = filter?.state?.name;
|
||||
|
||||
const states = addLabelToList(statesData);
|
||||
const cities = addLabelToList(citiesData);
|
||||
// const states = addLabelToList(statesData);
|
||||
// const cities = addLabelToList(citiesData);
|
||||
const [filteredCities, setFilteredCities] = useState([]);
|
||||
|
||||
const handleClose = () => setOpen(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (provinceSelected) {
|
||||
if (stateSelected) {
|
||||
const selectedState = states.find(
|
||||
(state) => state.label === provinceSelected
|
||||
(state) => state.name === stateSelected
|
||||
);
|
||||
if (selectedState) {
|
||||
const stateId = selectedState.id;
|
||||
@@ -43,15 +42,15 @@ function ModalSearchCity({
|
||||
} else {
|
||||
setFilteredCities([]);
|
||||
}
|
||||
}, [provinceSelected]);
|
||||
}, [stateSelected]);
|
||||
|
||||
const updateData = (event, name) => {
|
||||
if (name === "province" && event !== provinceSelected) {
|
||||
setSelected({ province: event.name, city: "" });
|
||||
} else {
|
||||
setSelected({ ...selected, [name]: event.name });
|
||||
}
|
||||
};
|
||||
// const updateData = (event, name) => {
|
||||
// if (name === "province" && event !== stateSelected) {
|
||||
// setSelected({ province: event.name, city: "" });
|
||||
// } else {
|
||||
// setSelected({ ...selected, [name]: event.name });
|
||||
// }
|
||||
// };
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -64,11 +63,10 @@ function ModalSearchCity({
|
||||
<Content
|
||||
state={state}
|
||||
states={states}
|
||||
selected={selected}
|
||||
setDoctors={setDoctors}
|
||||
updateData={updateData}
|
||||
filter={filter}
|
||||
setFilter={setFilter}
|
||||
handleClose={handleClose}
|
||||
handleSearch={handleSearch}
|
||||
modalLocate={modalLocate}
|
||||
filteredCities={filteredCities}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
import React from 'react'
|
||||
|
||||
function Content() {
|
||||
return (
|
||||
<div>Content</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Content
|
||||
@@ -0,0 +1,120 @@
|
||||
import { useState } from "react";
|
||||
|
||||
import SearchBar from "../search";
|
||||
import SortList from "../sortlist";
|
||||
import { Button } from "@mui/material";
|
||||
import { useParams } from "next/navigation";
|
||||
import LocationD from "../../icons/LocationD";
|
||||
import specialties from "@/data/specialties.json";
|
||||
import ModalSearchCity from "@/app/component/modalSearchCity";
|
||||
|
||||
// Data
|
||||
import states from "@/data/state.json";
|
||||
import cities from "@/data/city.json";
|
||||
|
||||
function Head({ matchedCity, matchedState, setDoctors }) {
|
||||
const params = useParams();
|
||||
const fieldName = params.field;
|
||||
const [open, setOpen] = useState(false);
|
||||
const [fields, setFields] = useState({
|
||||
search: params.search || "",
|
||||
stars: "",
|
||||
});
|
||||
|
||||
const findItem = (key, name) =>
|
||||
specialties.find((item) => item[key] === name);
|
||||
const isParent =
|
||||
findItem("name", fieldName) && findItem("name", fieldName).parent;
|
||||
|
||||
const defaultData = {
|
||||
category: isParent ? findItem("id", isParent) : findItem("name", fieldName),
|
||||
specialties: isParent && findItem("name", fieldName),
|
||||
turn: params && params.hasOwnProperty("turn") ? JSON.parse(params.turn) : 1,
|
||||
gender: params.gender || "هر دو",
|
||||
degree: params.degree || "همه موارد",
|
||||
};
|
||||
|
||||
const selectedState = matchedState?.name || params?.state;
|
||||
const selectedCity =
|
||||
(matchedCity?.name && matchedCity?.id !== "63"
|
||||
? matchedCity?.name
|
||||
: false) || params?.city;
|
||||
|
||||
const defaultFilter = {
|
||||
state: selectedState && states.find((item) => item.name === selectedState),
|
||||
city: selectedCity && cities.find((item) => item.name === selectedCity),
|
||||
category: isParent ? findItem("id", isParent) : findItem("name", fieldName),
|
||||
specialty: isParent && findItem("name", fieldName),
|
||||
active: params.active || 0,
|
||||
gender: params.gender || "هر دو",
|
||||
degree: params.degree || "همه موارد",
|
||||
sort: "",
|
||||
name: "",
|
||||
};
|
||||
const modalLocate = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
const [data, setData] = useState(defaultData);
|
||||
const [confirmedData, setConfirmedData] = useState(defaultData);
|
||||
const [filter, setFilter] = useState(defaultFilter);
|
||||
|
||||
console.log(filter);
|
||||
|
||||
|
||||
const updateData = (name, value) => setFilter({ ...filter, [name]: value });
|
||||
|
||||
return (
|
||||
<div className="flex justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px] flex-col items-center mt-0 md:mt-[40px] lg:mt-[90px]">
|
||||
<ModalSearchCity
|
||||
open={open}
|
||||
filter={filter}
|
||||
setOpen={setOpen}
|
||||
state={matchedState}
|
||||
setFilter={setFilter}
|
||||
modalLocate={modalLocate}
|
||||
>
|
||||
<Button
|
||||
className="!flex !ml-auto !w-fit !px-3 !py-1 !items-center !justify-start !gap-2 !cursor-pointer"
|
||||
onClick={() => setOpen(true)}
|
||||
>
|
||||
<LocationD />
|
||||
<h1 className="text-[#525252] text-[16px] font-semibold">
|
||||
{" "}
|
||||
{filter?.state?.name || "استان"}
|
||||
{" / "}
|
||||
{filter?.city?.name || "شهر"}
|
||||
</h1>
|
||||
</Button>
|
||||
</ModalSearchCity>
|
||||
<div className="flex flex-col lg:flex-row items-start lg:items-center justify-center gap-[24px] lg:gap-[32px] w-full">
|
||||
<SearchBar
|
||||
data={data}
|
||||
fields={fields}
|
||||
filter={filter}
|
||||
setData={setData}
|
||||
setFilter={setFilter}
|
||||
setDoctors={setDoctors}
|
||||
updateData={updateData}
|
||||
matchedCity={matchedCity}
|
||||
matchedState={matchedState}
|
||||
confirmedData={confirmedData}
|
||||
setConfirmedData={setConfirmedData}
|
||||
/>
|
||||
<SortList
|
||||
data={data}
|
||||
fields={fields}
|
||||
filter={filter}
|
||||
setData={setData}
|
||||
setFields={setFields}
|
||||
updateData={updateData}
|
||||
setDoctors={setDoctors}
|
||||
matchedCity={matchedCity}
|
||||
matchedState={matchedState}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Head;
|
||||
@@ -1,92 +1,21 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import SearchBar from "./search";
|
||||
import SortList from "./sortlist";
|
||||
import { Button } from "@mui/material";
|
||||
import ListDoctors from "./listDoctors";
|
||||
import LocationD from "../icons/LocationD";
|
||||
import ModalSearchCity from "@/app/component/modalSearchCity";
|
||||
|
||||
// Data
|
||||
import specialties from "@/data/specialties.json";
|
||||
import Head from "./head";
|
||||
|
||||
function DoctorsPage({ params, matchedCity, matchedState, list }) {
|
||||
const fieldName = params.field;
|
||||
function DoctorsPage({ matchedCity, matchedState, list }) {
|
||||
const [doctors, setDoctors] = useState(list);
|
||||
const [open, setOpen] = useState(false);
|
||||
const [fields, setFields] = useState({
|
||||
search: params.search || "",
|
||||
stars: "",
|
||||
});
|
||||
const [selected, setSelected] = useState({
|
||||
province: matchedState?.name || params?.province,
|
||||
city: matchedCity?.name || params?.city,
|
||||
});
|
||||
|
||||
const findItem = (key, name) =>
|
||||
specialties.find((item) => item[key] === name);
|
||||
const isParent =
|
||||
findItem("name", fieldName) && findItem("name", fieldName).parent;
|
||||
|
||||
const defaultData = {
|
||||
category: isParent ? findItem("id", isParent) : findItem("name", fieldName),
|
||||
specialties: isParent && findItem("name", fieldName),
|
||||
turn: params && params.hasOwnProperty("turn") ? JSON.parse(params.turn) : 1,
|
||||
gender: params.gender || "هر دو",
|
||||
degree: params.degree || "همه موارد",
|
||||
};
|
||||
|
||||
const [data, setData] = useState(defaultData);
|
||||
const [confirmedData, setConfirmedData] = useState(defaultData);
|
||||
|
||||
return (
|
||||
<div className="pt-[95px] sm:pt-[120px] padding-responsive">
|
||||
<div className="flex justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px] flex-col items-center mt-0 md:mt-[40px] lg:mt-[90px]">
|
||||
<ModalSearchCity
|
||||
open={open}
|
||||
setOpen={setOpen}
|
||||
selected={selected}
|
||||
state={matchedState}
|
||||
setDoctors={setDoctors}
|
||||
setSelected={setSelected}
|
||||
>
|
||||
<Button
|
||||
className="!flex !ml-auto !w-fit !px-3 !py-1 !items-center !justify-start !gap-2 !cursor-pointer"
|
||||
onClick={() => setOpen(true)}
|
||||
>
|
||||
<LocationD />
|
||||
<h1 className="text-[#525252] text-[16px] font-semibold">
|
||||
{" "}
|
||||
{selected.province || "استان"}
|
||||
{" / "}
|
||||
{selected.city || "شهر"}
|
||||
</h1>
|
||||
</Button>
|
||||
</ModalSearchCity>
|
||||
<div className="flex flex-col lg:flex-row items-start lg:items-center justify-center gap-[24px] lg:gap-[32px] w-full">
|
||||
<SearchBar
|
||||
data={data}
|
||||
fields={fields}
|
||||
setData={setData}
|
||||
setFields={setFields}
|
||||
setDoctors={setDoctors}
|
||||
matchedCity={matchedCity}
|
||||
matchedState={matchedState}
|
||||
confirmedData={confirmedData}
|
||||
setConfirmedData={setConfirmedData}
|
||||
/>
|
||||
<SortList
|
||||
data={data}
|
||||
fields={fields}
|
||||
setData={setData}
|
||||
setFields={setFields}
|
||||
setDoctors={setDoctors}
|
||||
matchedCity={matchedCity}
|
||||
matchedState={matchedState}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Head
|
||||
setDoctors={setDoctors}
|
||||
matchedCity={matchedCity}
|
||||
matchedState={matchedState}
|
||||
/>
|
||||
<ListDoctors list={doctors} />
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,27 +1,31 @@
|
||||
import specialties from "@/data/specialties.json";
|
||||
import Form from "./form";
|
||||
|
||||
function Content({ data, setData }) {
|
||||
const changeData = (value, name, isCategory, key) => {
|
||||
const newData = { ...data, [name]: value };
|
||||
function Content({ filter, setFilter, updateData }) {
|
||||
const changeSpecialty = (name, value) => {
|
||||
const newFilter = { ...filter, [name]: value };
|
||||
|
||||
if (isCategory) {
|
||||
if (name === "category") {
|
||||
const childrenList = specialties.filter((item) => item.parent);
|
||||
const filteredChildrenList = childrenList.filter(
|
||||
(item) => item.parent === value.id
|
||||
);
|
||||
const firstChildren = filteredChildrenList[0];
|
||||
|
||||
newData.specialties = firstChildren || "";
|
||||
newFilter.specialty = firstChildren || "";
|
||||
}
|
||||
|
||||
setData(newData);
|
||||
return newData;
|
||||
setFilter(newFilter);
|
||||
return newFilter;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mt-[50px] px-[0px] md:px-[19px] lg:px-[38px] mb-[32px]">
|
||||
<Form data={data} changeData={changeData} />
|
||||
<Form
|
||||
filter={filter}
|
||||
updateData={updateData}
|
||||
changeSpecialty={changeSpecialty}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -11,9 +11,12 @@ import ButtonApply from "./ButtonApply";
|
||||
|
||||
function FilterModal({
|
||||
data,
|
||||
filter,
|
||||
setData,
|
||||
children,
|
||||
setFilter,
|
||||
setDoctors,
|
||||
updateData,
|
||||
matchedCity,
|
||||
matchedState,
|
||||
confirmedData,
|
||||
@@ -28,7 +31,7 @@ function FilterModal({
|
||||
setData(confirmedData);
|
||||
};
|
||||
|
||||
const deleteData = () => {
|
||||
const resetFilter = () => {
|
||||
clearFilterParams(router, ["turn", "field", "degree", "gender"]);
|
||||
|
||||
const defaultData = {
|
||||
@@ -39,8 +42,20 @@ function FilterModal({
|
||||
degree: "متخصص",
|
||||
};
|
||||
|
||||
const newFilter = {
|
||||
category: undefined,
|
||||
specialty: undefined,
|
||||
active: 0,
|
||||
gender: "هر دو",
|
||||
degree: "همه موارد",
|
||||
};
|
||||
|
||||
setData({ ...defaultData });
|
||||
setConfirmedData({ ...defaultData });
|
||||
setFilter({
|
||||
...filter,
|
||||
...newFilter,
|
||||
});
|
||||
|
||||
handleClose();
|
||||
};
|
||||
@@ -62,7 +77,7 @@ function FilterModal({
|
||||
<p className="text-[#3B3B3B] text-[20px] font-bold">فیلترها</p>
|
||||
<Button
|
||||
className="cursor-pointer !p-0 flex items-center justify-center gap-1"
|
||||
onClick={deleteData}
|
||||
onClick={resetFilter}
|
||||
variant="text"
|
||||
>
|
||||
<CloseOrangeModal />
|
||||
@@ -71,7 +86,11 @@ function FilterModal({
|
||||
</p>
|
||||
</Button>
|
||||
</div>
|
||||
<Content data={data} setData={setData} />
|
||||
<Content
|
||||
filter={filter}
|
||||
setFilter={setFilter}
|
||||
updateData={updateData}
|
||||
/>
|
||||
</div>
|
||||
<ButtonApply
|
||||
data={data}
|
||||
|
||||
@@ -2,7 +2,7 @@ import BottomSelect from "@/components/icons/BottomSelect";
|
||||
import { Autocomplete, Button, TextField } from "@mui/material";
|
||||
import { styleTextSelectRight } from "@/mui";
|
||||
|
||||
function CateSelector({ list, value, isError, updateData, label }) {
|
||||
function CateSelector({ name, list, value, isError, updateData, label }) {
|
||||
return (
|
||||
<Autocomplete
|
||||
disablePortal
|
||||
@@ -10,7 +10,7 @@ function CateSelector({ list, value, isError, updateData, label }) {
|
||||
options={list}
|
||||
getOptionLabel={(option) => option?.name}
|
||||
className="!w-full !rounded-lg auto-complete-selector"
|
||||
onChange={(_, newValue) => updateData(newValue)}
|
||||
onChange={(_, newValue) => updateData(name, newValue)}
|
||||
sx={{
|
||||
...styleTextSelectRight,
|
||||
// Hide Icon Number
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
import Radios from "./Radios";
|
||||
|
||||
function RadioContent({ group, text, value, changeData, name }) {
|
||||
function RadioContent({ group, text, value, updateData, name }) {
|
||||
return (
|
||||
<div>
|
||||
<p className="text-[16px] font-medium text-[#3B3B3B]">{text}</p>
|
||||
<div className="mt-[16px]">
|
||||
<Radios
|
||||
changeData={changeData}
|
||||
updateData={updateData}
|
||||
group={group}
|
||||
value={value}
|
||||
name={name}
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import { FormControlLabel, Radio, RadioGroup } from "@mui/material";
|
||||
|
||||
function Radios({ group, value, changeData, name }) {
|
||||
function Radios({ group, value, updateData, name }) {
|
||||
return (
|
||||
<RadioGroup
|
||||
value={value}
|
||||
className="radio-mui"
|
||||
onChange={(e) => changeData(e.target.value, name, false, name)}
|
||||
onChange={(e) => updateData(name, e.target.value)}
|
||||
sx={{
|
||||
"& .MuiFormControlLabel-root": {
|
||||
marginRight: "0 !important",
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
import { FormControlLabel, Switch } from "@mui/material";
|
||||
|
||||
function SwitchContent({ data, changeData }) {
|
||||
function SwitchContent({ filter, updateData }) {
|
||||
return (
|
||||
<div className="flex items-center justify-start gap-[12px]">
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Switch
|
||||
checked={data.turn}
|
||||
checked={filter.active}
|
||||
onChange={(event) =>
|
||||
changeData(event.target.checked ? 1 : 0, "turn", false, "turn")
|
||||
updateData("active", event.target.checked ? 1 : 0)
|
||||
}
|
||||
/>
|
||||
}
|
||||
|
||||
@@ -6,47 +6,47 @@ import CateSelector from "./CateSelector";
|
||||
const gender = ["زن", "مرد", "هر دو"];
|
||||
const degree = ["پزشک عمومی", "پزشک متخصص", "پزشک فوق تخصص", "همه موارد"];
|
||||
|
||||
function Form({ data, changeData }) {
|
||||
const { parentList, childrenList } = filterList(data);
|
||||
function Form({ filter, changeSpecialty, updateData }) {
|
||||
const { parentList, childrenList } = filterList(filter);
|
||||
|
||||
return (
|
||||
<>
|
||||
<CateSelector
|
||||
name="category"
|
||||
list={parentList}
|
||||
label="دسته بندی"
|
||||
value={data.category}
|
||||
updateData={(value) => changeData(value, "category", true, "specialty")}
|
||||
value={filter.category}
|
||||
updateData={changeSpecialty}
|
||||
/>
|
||||
{!!childrenList.length && (
|
||||
<div className="mt-[24px]">
|
||||
<CateSelector
|
||||
list={childrenList}
|
||||
updateData={(value) =>
|
||||
changeData(value, "specialties", false, "specialty")
|
||||
}
|
||||
value={data.specialties}
|
||||
label="تخصص"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className={`${!!childrenList.length ? "max-h-32 mt-[24px]" : "max-h-0 mt-0"} overflow-hidden transition-all duration-500`}
|
||||
>
|
||||
<CateSelector
|
||||
name="specialty"
|
||||
list={childrenList}
|
||||
updateData={updateData}
|
||||
value={filter.specialty}
|
||||
label="تخصص"
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-[40px] mb-[32px]">
|
||||
<RadioContent
|
||||
changeData={changeData}
|
||||
value={data.gender}
|
||||
updateData={updateData}
|
||||
value={filter.gender}
|
||||
text="جنسیت پزشک"
|
||||
group={gender}
|
||||
name="gender"
|
||||
/>
|
||||
<span className="block mt-[16px] mb-[24px] w-full h-px bg-[#EFEFEF]"></span>
|
||||
<RadioContent
|
||||
changeData={changeData}
|
||||
value={data.degree}
|
||||
updateData={updateData}
|
||||
value={filter.degree}
|
||||
text="درجه علمی"
|
||||
group={degree}
|
||||
name="degree"
|
||||
/>
|
||||
<span className="block mt-[16px] mb-[24px] w-full h-px bg-[#EFEFEF]"></span>
|
||||
<SwitchContent data={data} changeData={changeData} />
|
||||
<SwitchContent filter={filter} updateData={updateData} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
import { TextField } from "@mui/material";
|
||||
import React from "react";
|
||||
|
||||
function SearchField({ fields, setFields }) {
|
||||
function SearchField({ filter, updateData }) {
|
||||
return (
|
||||
<TextField
|
||||
variant="standard"
|
||||
value={fields.search}
|
||||
onChange={(e) => setFields({ ...fields, search: e.target.value })}
|
||||
value={filter.name}
|
||||
onChange={(e) => updateData("name", e.target.value)}
|
||||
InputProps={{
|
||||
disableUnderline: true,
|
||||
}}
|
||||
|
||||
@@ -8,9 +8,11 @@ import SearchField from "./SearchField";
|
||||
function SearchBar({
|
||||
data,
|
||||
fields,
|
||||
filter,
|
||||
setData,
|
||||
setFields,
|
||||
setFilter,
|
||||
setDoctors,
|
||||
updateData,
|
||||
matchedCity,
|
||||
matchedState,
|
||||
confirmedData,
|
||||
@@ -25,8 +27,11 @@ function SearchBar({
|
||||
>
|
||||
<FilterModal
|
||||
data={data}
|
||||
filter={filter}
|
||||
setData={setData}
|
||||
setFilter={setFilter}
|
||||
setDoctors={setDoctors}
|
||||
updateData={updateData}
|
||||
matchedCity={matchedCity}
|
||||
matchedState={matchedState}
|
||||
confirmedData={confirmedData}
|
||||
@@ -48,7 +53,7 @@ function SearchBar({
|
||||
</div>
|
||||
</Button>
|
||||
</FilterModal>
|
||||
<SearchField fields={fields} setFields={setFields} />
|
||||
<SearchField filter={filter} updateData={updateData} />
|
||||
<SendReq
|
||||
fields={fields}
|
||||
setDoctors={setDoctors}
|
||||
|
||||
@@ -14,7 +14,9 @@ const listSort = [
|
||||
function SelectSort({
|
||||
data,
|
||||
fields,
|
||||
filter,
|
||||
setFields,
|
||||
updateData,
|
||||
setDoctors,
|
||||
matchedCity,
|
||||
matchedState,
|
||||
@@ -43,8 +45,8 @@ function SelectSort({
|
||||
return (
|
||||
<Select
|
||||
displayEmpty
|
||||
defaultValue={fields.stars}
|
||||
onChange={handleChange}
|
||||
value={filter.sort}
|
||||
onChange={(e) => updateData("sort", Number(e.target.value))}
|
||||
className="!w-[198px] !max-w-[305px] lg:!w-full text-[14px] md:text-[16px] !bg-transparent lg:!bg-[#FFF] !h-[44px] sm:!h-[50px] md:!h-[57px] lg:!h-[64px]"
|
||||
renderValue={(value) => {
|
||||
return (
|
||||
@@ -54,7 +56,7 @@ function SelectSort({
|
||||
</SvgIcon>
|
||||
{value ? (
|
||||
<ul className="flex items-center justify-start gap-1">
|
||||
{Array(fields.stars)
|
||||
{Array(filter.sort)
|
||||
.fill({})
|
||||
.map((_, idx) => (
|
||||
<li key={idx}>
|
||||
|
||||
@@ -5,10 +5,12 @@ import FilterBtn from "./FilterBtn";
|
||||
import SelectSort from "./SelectSort";
|
||||
|
||||
function SortList({
|
||||
fields,
|
||||
data,
|
||||
fields,
|
||||
filter,
|
||||
setData,
|
||||
setFields,
|
||||
updateData,
|
||||
setDoctors,
|
||||
matchedCity,
|
||||
matchedState,
|
||||
@@ -20,8 +22,10 @@ function SortList({
|
||||
</FilterModal>
|
||||
<SelectSort
|
||||
data={data}
|
||||
filter={filter}
|
||||
fields={fields}
|
||||
setFields={setFields}
|
||||
updateData={updateData}
|
||||
setDoctors={setDoctors}
|
||||
matchedCity={matchedCity}
|
||||
matchedState={matchedState}
|
||||
|
||||
Reference in New Issue
Block a user