From dbef29b9d90a28559d3098c2c124f50f890431cf Mon Sep 17 00:00:00 2001 From: Ehsan Date: Fri, 12 Sep 2025 09:39:48 +0330 Subject: [PATCH] change function of fliter sort, modal and locate set new data and change it and update --- app/component/element/AutoCompleteSelect.js | 7 +- .../modalSearchCity/AddressSelector.js | 93 ++++++++++++++ app/component/modalSearchCity/Content.js | 114 +++++------------ app/component/modalSearchCity/index.js | 44 +++---- components/doctors/content/index.js | 9 ++ components/doctors/head/index.js | 120 ++++++++++++++++++ components/doctors/index.js | 85 +------------ components/doctors/modal/Content.js | 20 +-- components/doctors/modal/FilterModal.js | 25 +++- components/doctors/modal/form/CateSelector.js | 4 +- components/doctors/modal/form/RadioContent.js | 4 +- components/doctors/modal/form/Radios.js | 4 +- .../doctors/modal/form/SwitchContent.js | 6 +- components/doctors/modal/form/index.js | 42 +++--- components/doctors/search/SearchField.js | 6 +- components/doctors/search/index.js | 9 +- components/doctors/sortlist/SelectSort.js | 8 +- components/doctors/sortlist/index.js | 6 +- 18 files changed, 371 insertions(+), 235 deletions(-) create mode 100644 app/component/modalSearchCity/AddressSelector.js create mode 100644 components/doctors/content/index.js create mode 100644 components/doctors/head/index.js diff --git a/app/component/element/AutoCompleteSelect.js b/app/component/element/AutoCompleteSelect.js index 53a34ef..4a2a214 100644 --- a/app/component/element/AutoCompleteSelect.js +++ b/app/component/element/AutoCompleteSelect.js @@ -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; diff --git a/app/component/modalSearchCity/AddressSelector.js b/app/component/modalSearchCity/AddressSelector.js new file mode 100644 index 0000000..5e7bcf7 --- /dev/null +++ b/app/component/modalSearchCity/AddressSelector.js @@ -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 ( + 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) => ( + + )} + renderInput={(params) => ( + + + + ), + }} + placeholder={label} + sx={{ + borderRadius: "8px", + }} + /> + )} + /> + ); +} + +export default AddressSelector; diff --git a/app/component/modalSearchCity/Content.js b/app/component/modalSearchCity/Content.js index 35f2036..4c2d5c1 100644 --- a/app/component/modalSearchCity/Content.js +++ b/app/component/modalSearchCity/Content.js @@ -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 (
@@ -93,35 +45,31 @@ function Content({ شهر یا استان مورد نظر را انتخاب نمایید:

- - +
+ +
+ + +
+
+ ); +} + +export default Head; diff --git a/components/doctors/index.js b/components/doctors/index.js index 5733e41..7b6303c 100644 --- a/components/doctors/index.js +++ b/components/doctors/index.js @@ -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 (
-
- - - -
- - -
-
+
); diff --git a/components/doctors/modal/Content.js b/components/doctors/modal/Content.js index c9a954b..5935080 100644 --- a/components/doctors/modal/Content.js +++ b/components/doctors/modal/Content.js @@ -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 (
-
+
); } diff --git a/components/doctors/modal/FilterModal.js b/components/doctors/modal/FilterModal.js index 92ef32e..8588ed4 100644 --- a/components/doctors/modal/FilterModal.js +++ b/components/doctors/modal/FilterModal.js @@ -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({

فیلترها

- +
option?.name} className="!w-full !rounded-lg auto-complete-selector" - onChange={(_, newValue) => updateData(newValue)} + onChange={(_, newValue) => updateData(name, newValue)} sx={{ ...styleTextSelectRight, // Hide Icon Number diff --git a/components/doctors/modal/form/RadioContent.js b/components/doctors/modal/form/RadioContent.js index c0f8366..09069af 100644 --- a/components/doctors/modal/form/RadioContent.js +++ b/components/doctors/modal/form/RadioContent.js @@ -1,12 +1,12 @@ import Radios from "./Radios"; -function RadioContent({ group, text, value, changeData, name }) { +function RadioContent({ group, text, value, updateData, name }) { return (

{text}

changeData(e.target.value, name, false, name)} + onChange={(e) => updateData(name, e.target.value)} sx={{ "& .MuiFormControlLabel-root": { marginRight: "0 !important", diff --git a/components/doctors/modal/form/SwitchContent.js b/components/doctors/modal/form/SwitchContent.js index f9eae17..f5b1323 100644 --- a/components/doctors/modal/form/SwitchContent.js +++ b/components/doctors/modal/form/SwitchContent.js @@ -1,14 +1,14 @@ import { FormControlLabel, Switch } from "@mui/material"; -function SwitchContent({ data, changeData }) { +function SwitchContent({ filter, updateData }) { return (
- changeData(event.target.checked ? 1 : 0, "turn", false, "turn") + updateData("active", event.target.checked ? 1 : 0) } /> } diff --git a/components/doctors/modal/form/index.js b/components/doctors/modal/form/index.js index 6f3fe78..1642968 100644 --- a/components/doctors/modal/form/index.js +++ b/components/doctors/modal/form/index.js @@ -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 ( <> changeData(value, "category", true, "specialty")} + value={filter.category} + updateData={changeSpecialty} /> - {!!childrenList.length && ( -
- - changeData(value, "specialties", false, "specialty") - } - value={data.specialties} - label="تخصص" - /> -
- )} +
+ +
- +
); diff --git a/components/doctors/search/SearchField.js b/components/doctors/search/SearchField.js index 5420409..6914710 100644 --- a/components/doctors/search/SearchField.js +++ b/components/doctors/search/SearchField.js @@ -1,12 +1,12 @@ import { TextField } from "@mui/material"; import React from "react"; -function SearchField({ fields, setFields }) { +function SearchField({ filter, updateData }) { return ( setFields({ ...fields, search: e.target.value })} + value={filter.name} + onChange={(e) => updateData("name", e.target.value)} InputProps={{ disableUnderline: true, }} diff --git a/components/doctors/search/index.js b/components/doctors/search/index.js index f9d14c6..79ca6f5 100644 --- a/components/doctors/search/index.js +++ b/components/doctors/search/index.js @@ -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({ > - + 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({ {value ? (
    - {Array(fields.stars) + {Array(filter.sort) .fill({}) .map((_, idx) => (
  • diff --git a/components/doctors/sortlist/index.js b/components/doctors/sortlist/index.js index da70329..a933714 100644 --- a/components/doctors/sortlist/index.js +++ b/components/doctors/sortlist/index.js @@ -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({