fix bug modal search location in home && send request after click on continue for update list clinics && change style on hover text of specialties and service in clinics page && add loading for list of clinics && fix bug page doctor item && link footer to clinic-pro
This commit is contained in:
ehsan
@@ -1,32 +1,18 @@
|
||||
import SearchD from "@/components/icons/SearchD";
|
||||
import { QueryForClinicsFilter } from "@/helper";
|
||||
import { request } from "@/services/response";
|
||||
import { Button } from "@mui/material";
|
||||
import { useState } from "react";
|
||||
import { Button } from "@mui/material";
|
||||
import SearchD from "@/components/icons/SearchD";
|
||||
|
||||
function FilterButton({ selected, setFilteredClinics }) {
|
||||
function FilterButton({ filterData }) {
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const filterData = () => {
|
||||
const sendReq = () => {
|
||||
setLoading(true);
|
||||
const params = QueryForClinicsFilter(selected);
|
||||
|
||||
request
|
||||
.getClinicList(params)
|
||||
.then((res) => {
|
||||
if (res.data) setFilteredClinics(res.data);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
})
|
||||
.finally(() => {
|
||||
setLoading(false);
|
||||
});
|
||||
filterData().finally(() => setLoading(false));
|
||||
};
|
||||
|
||||
return (
|
||||
<Button
|
||||
onClick={filterData}
|
||||
onClick={sendReq}
|
||||
loading={loading}
|
||||
className="
|
||||
!rounded-[4px] !gap-2.5 !p-2 md:!p-3 lg:!p-4 !grid !place-items-center
|
||||
|
||||
@@ -1,10 +1,14 @@
|
||||
import { ButtonGroup } from "@mui/material";
|
||||
import { useState } from "react";
|
||||
import ButtonFilter from "@/app/component/modalSearchCity/ButtonFilter";
|
||||
import ModalSearchCity from "@/components/home/search/modal";
|
||||
import { ButtonGroup } from "@mui/material";
|
||||
import AutoSearch from "./AutoSearch";
|
||||
import { useRouter } from "next/navigation";
|
||||
import FilterButton from "./FilterButton";
|
||||
import ButtonFilter from "./filter/ButtonFilter";
|
||||
import ModalSearchCity from "./filter";
|
||||
|
||||
// Req
|
||||
import { QueryForClinicsFilter } from "@/helper";
|
||||
import { request } from "@/services/response";
|
||||
|
||||
function SearchBar({
|
||||
state,
|
||||
@@ -30,6 +34,21 @@ function SearchBar({
|
||||
router.push(`?${searchParams.toString()}`);
|
||||
};
|
||||
|
||||
const filterData = (newSelected) => {
|
||||
const data = newSelected || selected;
|
||||
const params = QueryForClinicsFilter(data);
|
||||
|
||||
return request
|
||||
.getClinicList(params)
|
||||
.then((res) => {
|
||||
if (res.data) setFilteredClinics(res.data);
|
||||
return res;
|
||||
})
|
||||
.catch((err) => {
|
||||
throw err;
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<ButtonGroup
|
||||
variant="contained"
|
||||
@@ -43,6 +62,7 @@ function SearchBar({
|
||||
state={state}
|
||||
setOpen={setOpen}
|
||||
selected={selected}
|
||||
filterData={filterData}
|
||||
setSelected={setSelected}
|
||||
>
|
||||
<ButtonFilter setOpen={setOpen} selected={selected} />
|
||||
@@ -53,10 +73,7 @@ function SearchBar({
|
||||
placeholder="جستجوی تخصص"
|
||||
handleSearch={handleSearch}
|
||||
/>
|
||||
<FilterButton
|
||||
selected={selected}
|
||||
setFilteredClinics={setFilteredClinics}
|
||||
/>
|
||||
<FilterButton filterData={filterData} />
|
||||
</ButtonGroup>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,93 @@
|
||||
import BottomSelect from "@/components/icons/BottomSelect";
|
||||
import { Autocomplete, Button, TextField } from "@mui/material";
|
||||
import { styleTextSelectRight } from "@/mui";
|
||||
|
||||
function AutoComplete({
|
||||
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 AutoComplete;
|
||||
@@ -0,0 +1,35 @@
|
||||
// Icons
|
||||
import ArrowBottomH from "@/components/icons/ArrowBottomH";
|
||||
import Location from "@/components/icons/Location";
|
||||
import { Button } from "@mui/material";
|
||||
|
||||
function ButtonFilter({ selected, setOpen }) {
|
||||
const handleOpen = () => setOpen(true);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
className="!border-none hover:!bg-transparent !shadow-none !py-[11.5px] !min-w-fit !px-[7px] sm:!py-3 sm:!px-[9px] md:!px-[11px] lg:!px-[12px] !rounded-3"
|
||||
onClick={handleOpen}
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
>
|
||||
<div className="min-w-[20px] min-h-[20px] hidden md:flex">
|
||||
<Location />
|
||||
</div>
|
||||
<p
|
||||
className="text-[#616161] text-[11px] md:text-[14px] leading-[17px] sm:leading-[19px]
|
||||
md:leading-[22px] lg:leading-[24px] font-medium ml-1 md:mx-1"
|
||||
>
|
||||
{(selected.city?.name !== "نوبت 724" ? selected.city?.name : false) ||
|
||||
"شهر"}
|
||||
</p>
|
||||
<div className="w-[16px] h-[16px] md:w-[18px] md:h-[18px] lg:w-[20px] lg:h-[20px] grid place-items-center">
|
||||
<ArrowBottomH />
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ButtonFilter;
|
||||
@@ -0,0 +1,87 @@
|
||||
import { Button } from "@mui/material";
|
||||
|
||||
// Icon
|
||||
import CloseModalD from "@/components/icons/CloseModalD";
|
||||
import ArrowLeftM from "@/components/icons/ArrowLeftM";
|
||||
import AutoComplete from "./AutoComplete";
|
||||
import { useState } from "react";
|
||||
|
||||
function Content({
|
||||
state,
|
||||
states,
|
||||
selected,
|
||||
updateData,
|
||||
filterData,
|
||||
handleClose,
|
||||
filteredCities,
|
||||
handleSearch,
|
||||
}) {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const listboxProps = {
|
||||
style: {
|
||||
maxHeight: 200,
|
||||
overflow: "auto",
|
||||
},
|
||||
};
|
||||
|
||||
const handleFilter = () => {
|
||||
handleSearch && handleSearch("");
|
||||
setLoading(true);
|
||||
filterData().finally(() => {
|
||||
handleClose();
|
||||
setLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-end w-full">
|
||||
<div className="cursor-pointer" onClick={handleClose}>
|
||||
<CloseModalD />
|
||||
</div>
|
||||
</div>
|
||||
<div className="md:p-[24px] pt-0">
|
||||
<p className="text-[#525252] mt-[38px] md:mt-4 text-[16px] font-medium text-center">
|
||||
شهر یا استان مورد نظر را انتخاب نمایید:
|
||||
</p>
|
||||
<div className="flex md:min-w-[344px] flex-col mt-[52px] md:mt-[44px] mb-14 justify-center items-center gap-10">
|
||||
<AutoComplete
|
||||
list={states}
|
||||
label="استان"
|
||||
name="province"
|
||||
disabled={state}
|
||||
updateData={updateData}
|
||||
value={selected.province}
|
||||
listboxProps={listboxProps}
|
||||
/>
|
||||
<AutoComplete
|
||||
updateData={updateData}
|
||||
listboxProps={listboxProps}
|
||||
value={selected.city}
|
||||
list={filteredCities}
|
||||
name="city"
|
||||
label="شهر"
|
||||
disabled={!selected.province}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full flex justify-end">
|
||||
<Button
|
||||
color="primary"
|
||||
loading={loading}
|
||||
variant="contained"
|
||||
onClick={handleFilter}
|
||||
disabled={!selected.city || !selected.province}
|
||||
className="!w-full md:!w-fit !flex !px-3 items-center justify-center gap-1 mr-auto"
|
||||
>
|
||||
تایید و ادامه
|
||||
<div className={loading ? "opacity-0" : "opacity-100"}>
|
||||
<ArrowLeftM />
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Content;
|
||||
@@ -0,0 +1,85 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { Modal, Box } from "@mui/material";
|
||||
import { styleDefault } from "@/mui";
|
||||
|
||||
// Data
|
||||
import states from "@/data/state.json";
|
||||
import cities from "@/data/city.json";
|
||||
import Content from "./Content";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
function ModalSearchCity({
|
||||
open,
|
||||
state,
|
||||
setOpen,
|
||||
children,
|
||||
selected,
|
||||
filterData,
|
||||
setSelected,
|
||||
handleSearch,
|
||||
}) {
|
||||
const provinceSelected = selected?.province?.name;
|
||||
const router = useRouter();
|
||||
const [filteredCities, setFilteredCities] = useState([]);
|
||||
|
||||
const handleClose = () => setOpen(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (provinceSelected) {
|
||||
const selectedState = states.find(
|
||||
(state) => state.name === provinceSelected
|
||||
);
|
||||
if (selectedState) {
|
||||
const stateId = selectedState.id;
|
||||
const filteredCities = cities.filter(
|
||||
(city) => city.province_id === stateId
|
||||
);
|
||||
setFilteredCities(filteredCities);
|
||||
}
|
||||
} else {
|
||||
setFilteredCities([]);
|
||||
}
|
||||
}, [provinceSelected]);
|
||||
|
||||
const updateData = (name, event) => {
|
||||
const searchParams = new URLSearchParams(window.location.search);
|
||||
|
||||
if (name === "province") {
|
||||
setSelected({ ...selected, province: event, city: "" });
|
||||
searchParams.set("state", event?.name);
|
||||
searchParams.delete("city", selected.city?.name);
|
||||
} else {
|
||||
setSelected({ ...selected, [name]: event });
|
||||
searchParams.set("city", event?.name);
|
||||
searchParams.set("state", selected.province?.name);
|
||||
}
|
||||
router.push(`?${searchParams.toString()}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Button Modal */}
|
||||
{children}
|
||||
|
||||
{/* Content Modal */}
|
||||
<Modal open={open} onClose={handleClose}>
|
||||
<Box sx={styleDefault} className="!w-full !h-full md:!w-fit md:!h-fit">
|
||||
<Content
|
||||
state={state}
|
||||
states={states}
|
||||
selected={selected}
|
||||
updateData={updateData}
|
||||
filterData={filterData}
|
||||
handleClose={handleClose}
|
||||
handleSearch={handleSearch}
|
||||
filteredCities={filteredCities}
|
||||
/>
|
||||
</Box>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default ModalSearchCity;
|
||||
@@ -7,7 +7,17 @@ import { Button } from "@mui/material";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
function ItemClinic({ data, loading }) {
|
||||
function ItemClinic({ setFilteredClinics, data, loading }) {
|
||||
const handleLoading = () => {
|
||||
setFilteredClinics((prevClinics) =>
|
||||
prevClinics.map((item) =>
|
||||
item.id === data.id
|
||||
? { ...item, loading: true }
|
||||
: { ...item, loading: false }
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<li className="p-4 relative bg-[#FFF] border border-solid border-[#EFEFEF] rounded-[8px]">
|
||||
<div className="flex items-center justify-start gap-2">
|
||||
@@ -54,8 +64,14 @@ function ItemClinic({ data, loading }) {
|
||||
|
||||
{/* Arrow */}
|
||||
<Link href={`/clinic/${data.uuid}`}>
|
||||
<Button className="!bg-[#5559CE] !p-[14px] !absolute !left-4 !bottom-4 !rounded-full !w-fit">
|
||||
<ArrowLeftD />
|
||||
<Button
|
||||
onClick={handleLoading}
|
||||
loading={data?.loading}
|
||||
className="!bg-[#5559CE] !p-[14px] !absolute !left-4 !bottom-4 !rounded-full !w-fit"
|
||||
>
|
||||
<div className={data && data.loading ? "opacity-0" : ""}>
|
||||
<ArrowLeftD />
|
||||
</div>
|
||||
</Button>
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
@@ -40,7 +40,12 @@ function List({ limit, selected, clinics, pages, setFilteredClinics }) {
|
||||
gap-y-[16px] sm:gap-y-[24px] md:gap-y-[32px] lg:gap-y-[40px] mt-6"
|
||||
>
|
||||
{clinics.map((item) => (
|
||||
<ItemClinic loading={loading} data={item} key={item.id} />
|
||||
<ItemClinic
|
||||
data={item}
|
||||
key={item.id}
|
||||
loading={loading}
|
||||
setFilteredClinics={setFilteredClinics}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
|
||||
Reference in New Issue
Block a user