From a89fc4a3f9e606fb647b36a7a3aa8606d7343564 Mon Sep 17 00:00:00 2001 From: Ehsan Date: Fri, 9 May 2025 22:04:56 +0330 Subject: [PATCH] update modals & text & design --- app/component/element/AutoCompleteSelect.js | 22 +++++---- app/component/element/Field.js | 15 +++--- app/component/modalSearchCity/Content.js | 14 ++++-- app/component/modalSearchCity/index.js | 14 +++--- components/doctors/index.js | 55 ++++++++++++++++----- components/home/search/index.js | 25 +++++++++- components/register/LogInPage.js | 14 +++++- 7 files changed, 115 insertions(+), 44 deletions(-) diff --git a/app/component/element/AutoCompleteSelect.js b/app/component/element/AutoCompleteSelect.js index 26142b0..11a77ed 100644 --- a/app/component/element/AutoCompleteSelect.js +++ b/app/component/element/AutoCompleteSelect.js @@ -10,13 +10,15 @@ function AutoCompleteSelect({ name, label, disabled = false, + listboxProps }) { return ( { updateData && updateData(newValue ? newValue.label : "", name); @@ -25,9 +27,9 @@ function AutoCompleteSelect({ ...styleTextSelectRight, // Hide Icon Number "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button": - { - display: "none", - }, + { + display: "none", + }, "& input[type=number]": { MozAppearance: "textfield", }, @@ -46,13 +48,13 @@ function AutoCompleteSelect({ border: "1px solid #D7D7D7", }, "& .MuiInput-underline:hover:not(.Mui-disabled):before, .MuiOutlinedInput-notchedOutline": - { - borderColor: "#D7D7D7 !important", - }, + { + borderColor: "#D7D7D7 !important", + }, "& .muirtl-1kiro5a-MuiInputBase-root-MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": - { - border: "1px solid #5559CE !important", - }, + { + border: "1px solid #5559CE !important", + }, "& .MuiOutlinedInput-notchedOutline": { border: isError ? "1px solid red !important" : "", }, diff --git a/app/component/element/Field.js b/app/component/element/Field.js index 271bac3..522cc57 100644 --- a/app/component/element/Field.js +++ b/app/component/element/Field.js @@ -1,25 +1,22 @@ import { TextField } from "@mui/material"; import { styleTextSelectRight } from "@/mui"; -function Field({ - title, - type, - dir, - // isPlaceHolder -}) { +function Field({ title, type, dir, value, updateState }) { return ( updateState(e.target.value)} className="!w-full !mx-auto !bg-[#FFF]" sx={{ ...styleTextSelectRight, // Hide Icon Number "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button": - { - display: "none", - }, + { + display: "none", + }, "& input[type=number]": { MozAppearance: "textfield", }, diff --git a/app/component/modalSearchCity/Content.js b/app/component/modalSearchCity/Content.js index fc069ab..dcb7c68 100644 --- a/app/component/modalSearchCity/Content.js +++ b/app/component/modalSearchCity/Content.js @@ -15,6 +15,12 @@ function Content({ isProvinceInclude, }) { const citySelected = selected.city; + const listboxProps = { + style: { + maxHeight: 200, + overflow: "auto", + }, + }; return (
@@ -29,15 +35,17 @@ function Content({

diff --git a/app/component/modalSearchCity/index.js b/app/component/modalSearchCity/index.js index 434bffc..dac8e7f 100644 --- a/app/component/modalSearchCity/index.js +++ b/app/component/modalSearchCity/index.js @@ -13,7 +13,10 @@ import { useProvince } from "@/context/ProvinceProvider"; function ModalSearchCity({ children, selected, setSelected, open, setOpen }) { const provinceSelected = selected.province; const { isProvinceInclude } = useProvince(); - const newProvinceData = isProvinceInclude?.id === 63; + const newProvinceData = + isProvinceInclude && isProvinceInclude.id === "63" + ? false + : isProvinceInclude; const [states, setStates] = useState([]); const [cities, setCities] = useState([]); @@ -21,15 +24,12 @@ function ModalSearchCity({ children, selected, setSelected, open, setOpen }) { const handleClose = () => setOpen(false); - // Load states and cities from JSON files useEffect(() => { - // Format states data to match the structure expected by AutoCompleteSelect const formattedStates = statesData.map((state) => ({ label: state.name, id: state.id, })); - // Format cities data const formattedCities = citiesData.map((city) => ({ label: city.name, id: city.id, @@ -40,7 +40,6 @@ function ModalSearchCity({ children, selected, setSelected, open, setOpen }) { setCities(formattedCities); }, []); - // Filter cities when state is selected useEffect(() => { if (provinceSelected) { const selectedState = states.find( @@ -53,11 +52,11 @@ function ModalSearchCity({ children, selected, setSelected, open, setOpen }) { ); setFilteredCities(filteredCities); } - } else if (isProvinceInclude) { + } else if (newProvinceData) { setSelected({ ...selected, province: statesData.find( - (state) => state.id === isProvinceInclude.province_id + (state) => state.id === newProvinceData.province_id )?.name, }); } else { @@ -68,7 +67,6 @@ function ModalSearchCity({ children, selected, setSelected, open, setOpen }) { const updateData = (event, name) => { if (name === "province" && event !== provinceSelected) { - // If state changes, reset city selection setSelected({ province: event, city: "" }); } else { setSelected({ ...selected, [name]: event }); diff --git a/components/doctors/index.js b/components/doctors/index.js index e833d3f..5ceda62 100644 --- a/components/doctors/index.js +++ b/components/doctors/index.js @@ -6,22 +6,46 @@ import SortList from "./sortlist"; import ListDoctors from "./listDoctors"; import LocationD from "../icons/LocationD"; import { useSearchParams } from "next/navigation"; +import ModalSearchCity from "@/app/component/modalSearchCity"; import { useProvince } from "@/context/ProvinceProvider"; +import { Button } from "@mui/material"; + +// Data +import citiesData from "@/data/city.json"; +import statesData from "@/data/state.json"; function DoctorsPage() { const [loading, setLoading] = useState(true); - const searchParams = useSearchParams(); + const [open, setOpen] = useState(false); const { isProvinceInclude } = useProvince(); + const [selected, setSelected] = useState({ + // province: isProvinceInclude?.name || locationSelected.province, + // city: locationSelected.city || newCity, + province: isProvinceInclude?.name, + city: null, + }); + const searchParams = useSearchParams(); const locationSelected = { province: searchParams.get("province"), city: searchParams.get("city"), }; + const provinceId = statesData.find( + (state) => state.name === locationSelected?.province + ); + + const newCity = + locationSelected.city || + (provinceId && + citiesData.find((city) => city.province_id === provinceId.id)?.name); + const [data, setData] = useState({ expertise: "", gender: 0, degree: 0, turn: true, }); + console.log(newCity); + useEffect(() => { setTimeout(() => { @@ -32,16 +56,25 @@ function DoctorsPage() { return (
-
- -

- {" "} - {isProvinceInclude?.name || locationSelected.province || "استان"} - {/* {isProvinceInclude?.name ? "" : " / "} */} - {" / "} - {locationSelected.city || "شهر"} -

-
+ + +
diff --git a/components/home/search/index.js b/components/home/search/index.js index aee9cee..9e3e8ae 100644 --- a/components/home/search/index.js +++ b/components/home/search/index.js @@ -5,15 +5,36 @@ import { Button, ButtonGroup, TextField } from "@mui/material"; import SearchD from "@/components/icons/SearchD"; import ModalSearchCity from "@/app/component/modalSearchCity"; import ButtonFilter from "@/app/component/modalSearchCity/ButtonFilter"; -import { useState } from "react"; +import { useState, useCallback } from "react"; import Link from "next/link"; +import statesData from "@/data/state.json"; +import citiesData from "@/data/city.json"; + +const provinceIdMap = Object.fromEntries( + statesData.map((state) => [state.name, state.id]) +); +const citiesByProvinceId = citiesData.reduce((acc, city) => { + if (!acc[city.province_id]) acc[city.province_id] = []; + acc[city.province_id].push(city); + return acc; +}, {}); + function SearchBar() { const [selected, setSelected] = useState({ province: "", city: "", }); const [open, setOpen] = useState(false); + const getDefaultCityForProvince = useCallback((provinceName) => { + if (!provinceName) return undefined; + const provinceId = provinceIdMap[provinceName]; + return citiesByProvinceId[provinceId]?.[0]?.name; + }, []); + console.log(getDefaultCityForProvince(selected.province)); + console.log(selected.province); + + return ( diff --git a/components/register/LogInPage.js b/components/register/LogInPage.js index 69179c1..938b70d 100644 --- a/components/register/LogInPage.js +++ b/components/register/LogInPage.js @@ -1,8 +1,14 @@ import Field from "@/app/component/element/Field"; import { Button } from "@mui/material"; import Link from "next/link"; +import { useState } from "react"; function LogInPage({ setIsSendMsg, setStep }) { + const [num, setNum] = useState("09"); + const updateNum = (value) => { + setNum(value === "0" || !value ? "09" : value); + }; + return (
- +