hamed/nobat724_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change function of fliter sort, modal and locate set new data and change it and update

Browse Source
This commit is contained in:
Ehsan
2025-09-12 09:39:48 +03:30
parent d04aa8568d
commit dbef29b9d9
18 changed files with 371 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/doctors/content/index.js
+9
View File
@@ -0,0 +1,9 @@
import React from 'react'
function Content() {
return (
<div>Content</div>
)
}
export default Content
components/doctors/head/index.js
+120
View File
@@ -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;
components/doctors/index.js
+7 -78
View File
@@ -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>
);
components/doctors/modal/Content.js
+12 -8
View File
@@ -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>
);
}
components/doctors/modal/FilterModal.js
+22 -3
View File
@@ -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}
components/doctors/modal/form/CateSelector.js
+2 -2
View File
@@ -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
components/doctors/modal/form/RadioContent.js
+2 -2
View File
@@ -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}
components/doctors/modal/form/Radios.js
+2 -2
View File
@@ -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",
components/doctors/modal/form/SwitchContent.js
+3 -3
View File
@@ -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)
}
/>
}
components/doctors/modal/form/index.js
+21 -21
View File
@@ -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>
</>
);
components/doctors/search/SearchField.js
+3 -3
View File
@@ -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,
}}
components/doctors/search/index.js
+7 -2
View File
@@ -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}
components/doctors/sortlist/SelectSort.js
+5 -3
View File
@@ -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}>
components/doctors/sortlist/index.js
+5 -1
View File
@@ -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}