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

show only the first item in appo list & update appo item text && change key in /doctors page URL && handle setting and updating data on first modal filter load

Browse Source
This commit is contained in:
Ehsan
2025-08-26 22:35:05 +03:30
parent 8e4f182868
commit 09867bf84a
13 changed files with 137 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/component/date/dateTime/SendAppo.js
+2 -1
View File
@@ -20,9 +20,10 @@ function SendAppo({ hour }) {
setLoading(false);
})
.catch(() => {
//
//
});
};
console.log(hour);
return (
<div className="w-full flex justify-end">
app/component/date/dateTime/hours/List.js
+3 -2
View File
@@ -3,6 +3,7 @@ import React from "react";
function List({ appo, hour, setHour, value }) {
const list = appo && appo[value ? "evening" : "morning"];
const checkHour = (item) => JSON.stringify(item) === JSON.stringify(hour);
if (list && list.length) {
return (
@@ -14,14 +15,14 @@ function List({ appo, hour, setHour, value }) {
disabled={!item.status === "available"}
className={`
!w-full !rounded-[8px] !bg-[#EFEFEF] !flex !justify-center !items-center !py-[10px] !px-[14px] !h-[40px] md:!h-[42px] lg:!h-[44px]
${JSON.stringify(item) === JSON.stringify(hour) ? "!bg-[#F79463] " : ""}
${checkHour(item) ? "!bg-[#F79463] " : ""}
`}
>
<p
className={`
text-[16px] font-semibold text-[#525252]
${item.status === "available" ? "text-[#525252]" : "text-[#D7D7D7]"}
${JSON.stringify(item) === JSON.stringify(hour) ? "!text-[#FAFAFA] " : ""}
${checkHour(item) ? "!text-[#FAFAFA] " : ""}
`}
>
{item.time}
components/appointment/date/PlaceVisit.js
-29
View File
@@ -1,29 +0,0 @@
"use client";
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
function PlaceVisit({ locateVisit, setLocateVisit, isError }) {
const clinics = [
{ label: "درمانگاه رازی", id: 10 },
{ label: "درمانگاه ابوعلی", id: 20 },
{ label: "درمانگاه مرکزی", id: 30 },
];
const updateData = (event) => setLocateVisit(event);
return (
<div className="flex flex-col items-start gap-[19px] justify-start">
<p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">
1. انتخاب محل ویزیت
</p>
<AutoCompleteSelect
isError={isError && !locateVisit}
updateData={updateData}
label="درمانگاه"
list={clinics}
/>
</div>
);
}
export default PlaceVisit;
components/appointment/date/Time/index.js
+1 -1
View File
@@ -4,7 +4,7 @@ function Time({ isStep, setDate }) {
return (
<div className="flex relative mt-[24px] flex-col items-start gap-[19px] justify-start">
<p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">
2. انتخاب روز
1. انتخاب روز
</p>
<SelectDatePicker setDate={setDate} />
{!isStep && (
components/appointment/date/hour/index.js
+2 -3
View File
@@ -1,16 +1,15 @@
import DateTime from "@/app/component/date/dateTime";
function Hour({ doctor, setStep, date, setIsError, locateVisit, isStep }) {
function Hour({ doctor, setStep, date, locateVisit, isStep }) {
return (
<div className="flex relative mt-[24px] flex-col items-start gap-[12px] justify-start">
<p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">
3. انتخاب ساعت
2. انتخاب ساعت
</p>
<DateTime
date={date}
doctor={doctor}
setStep={setStep}
setIsError={setIsError}
locateVisit={locateVisit}
/>
{!isStep && (
components/appointment/date/index.js
-7
View File
@@ -1,7 +1,6 @@
import { useState } from "react";
import Hour from "./hour";
import Time from "./Time";
import PlaceVisit from "./PlaceVisit";
function Date({ doctor, setStep }) {
const [locateVisit, setLocateVisit] = useState(true);
@@ -14,11 +13,6 @@ function Date({ doctor, setStep }) {
className="p-0 lg:p-[24px] rounded-[8px] border border-solid border-transparent lg:border-[#EFEFEF]
bg-transparent lg:bg-[#FFF]"
>
<PlaceVisit
setLocateVisit={setLocateVisit}
locateVisit={locateVisit}
isError={isError}
/>
<Time
setDate={setDate}
locateVisit={locateVisit}
@@ -28,7 +22,6 @@ function Date({ doctor, setStep }) {
isStep={doctor?.multiwork ? locateVisit : true}
setLocateVisit={setLocateVisit}
locateVisit={locateVisit}
setIsError={setIsError}
setStep={setStep}
doctor={doctor}
date={date}
components/doctor/appointmentList/ItemAppointment.js
+1 -1
View File
@@ -39,7 +39,7 @@ function ItemAppointment({ turn, loading }) {
<GreenCalendarTurn />
<TextLoading width={100} height={15} loading={loading}>
<p className="text-[#05BA58] text-[12px] font-medium">
اولین نوبت آزاد: {turn.first_free_turn}
اولین نوبت آزاد: {turn.first_free_turn || "یکشنبه 24 اردیبهشت"}
</p>
</TextLoading>
</div>
components/doctor/appointmentList/index.js
+7 -3
View File
@@ -9,9 +9,13 @@ function AppointmentList({ doctors, loading }) {
return (
<>
<ul className="hidden sticky top-[122px] sm:top-[150px] mt:top-[178px] lg:top-[206px] lg:flex w-[38%] flex-col justify-start items-center gap-8">
{doctors?.map((item) => (
<ItemAppointment turn={item} key={item.id} loading={loading} />
))}
{doctors && doctors.length && (
<ItemAppointment
loading={loading}
turn={doctors[0]}
key={doctors[0].id}
/>
)}
</ul>
<div
className="fixed lg:hidden bg-[#FFF] border-t border-transparent border-t-[#D7D7D7]
components/doctors/index.js
+10 -6
View File
@@ -12,21 +12,25 @@ import ModalSearchCity from "@/app/component/modalSearchCity";
import specialties from "@/data/specialties.json";
function DoctorsPage({ params, matchedCity, matchedState, list }) {
const fieldId = params.field;
const [loading, setLoading] = useState(true);
const [open, setOpen] = useState(false);
const [selected, setSelected] = useState({
province: matchedState?.name || params?.province,
city: matchedCity?.name || params?.city,
});
console.log(specialties);
// console.log(fieldId);
const findItem = (id) => specialties.find((item) => item.id === id);
const isParent = findItem(fieldId) && findItem(fieldId).parent;
console.log(isParent);
const findSpecial = (id) => specialties.find((item) => item.id === id);
const [data, setData] = useState({
category: findSpecial(params.specialties)?.parent
? findSpecial(findSpecial(params.specialties)?.parent)
: findSpecial(params.specialties) || "",
specialties: findSpecial(params.specialties)?.parent
? findSpecial(params.specialties)
: "",
category: isParent ? findItem(isParent) : findItem(fieldId),
specialties: isParent && findItem(fieldId),
turn: params && params.hasOwnProperty("turn") ? JSON.parse(params.turn) : 1,
gender: params.gender || "هر دو",
degree: params.degree || "همه موارد",
components/doctors/modal/Content.js
+16 -13
View File
@@ -12,27 +12,30 @@ function Content({ data, setData }) {
router.push(`/doctors?${queryString}`);
};
const changeData = (value, name, isCategory) => {
changeUrl(value, name);
const newData = data;
newData[name] = value;
const childrenList = specialties.filter((item) => item.parent);
const filteredChildrenList = childrenList.filter(
(item) => item.parent === value.id
);
const changeData = (value, name, isCategory, key) => {
const newData = { ...data, [name]: value };
if (isCategory) {
newData.specialties = "";
newData.specialties = filteredChildrenList[0];
const childrenList = specialties.filter((item) => item.parent);
const filteredChildrenList = childrenList.filter(
(item) => item.parent === value.id
);
const firstChildren = filteredChildrenList[0];
console.log(firstChildren);
newData.specialties = firstChildren || "";
changeUrl(firstChildren || value, key);
} else {
changeUrl(value, key);
}
setData(newData);
return newData;
};
console.log(data);
return (
<div className="mt-[50px] px-[0px] md:px-[19px] lg:px-[38px] mb-[32px]">
<Form data={data} changeUrl={changeUrl} changeData={changeData} />
<Form data={data} changeData={changeData} />
</div>
);
}
components/doctors/modal/form/CateSelector.js
+82
View File
@@ -0,0 +1,82 @@
import BottomSelect from "@/components/icons/BottomSelect";
import { Autocomplete, Button, TextField } from "@mui/material";
import { styleTextSelectRight } from "@/mui";
function CateSelector({ list, value, isError, updateData, label }) {
return (
<Autocomplete
disablePortal
value={value}
options={list}
getOptionLabel={(option) => option?.name}
className="!w-full !rounded-lg auto-complete-selector"
onChange={(_, newValue) => updateData(newValue)}
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={option.id || 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 CateSelector;
components/doctors/modal/form/Radios.js
+1 -1
View File
@@ -5,7 +5,7 @@ function Radios({ group, value, changeData, name }) {
<RadioGroup
value={value}
className="radio-mui"
onChange={(e) => changeData(e.target.value, name)}
onChange={(e) => changeData(e.target.value, name, false, name)}
sx={{
"& .MuiFormControlLabel-root": {
marginRight: "0 !important",
components/doctors/modal/form/index.js
+12 -18
View File
@@ -1,37 +1,31 @@
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
import SwitchContent from "./SwitchContent";
import RadioContent from "./RadioContent";
import { filterList } from "@/helper";
import { useState } from "react";
import CateSelector from "./CateSelector";
const gender = ["زن", "مرد", "هر دو"];
const degree = ["پزشک عمومی", "پزشک متخصص", "پزشک فوق تخصص", "همه موارد"];
function Form({ data, changeUrl, changeData }) {
const [list, setList] = useState({});
function Form({ data, changeData }) {
const { parentList, childrenList } = filterList(data);
console.log(filterList(data));
return (
<>
<AutoCompleteSelect
list={list.parentList}
sendAll={true}
<CateSelector
list={parentList}
label="دسته بندی"
value={data.category?.name}
updateData={(value) => {
const newData = changeData(value, "specialties", true);
setList(filterList(newData));
console.log(newData);
}}
value={data.category}
updateData={(value) => changeData(value, "category", true, "field")}
/>
{!!childrenList.length && (
<div className="mt-[24px]">
<AutoCompleteSelect
list={list.childrenList}
updateData={(value) => changeData(value, "specialties")}
sendAll={true}
value={data.specialties?.name}
<CateSelector
list={childrenList}
updateData={(value) =>
changeData(value, "specialties", false, "field")
}
value={data.specialties}
label="تخصص"
/>
</div>