change list sort doctors page & change function search list specialties & remove pagination from page specialties & fix zoom page & change design all fields & change regex validation phone number for nobat724 and clinic-pro
This commit is contained in:
@@ -21,8 +21,6 @@ function ButtonFilter({ selected, setOpen }) {
|
|||||||
className='text-[#616161] text-[11px] md:text-[14px] leading-[17px] sm:leading-[19px]
|
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'
|
md:leading-[22px] lg:leading-[24px] font-medium ml-1 md:mx-1'
|
||||||
>
|
>
|
||||||
{selected.province || 'استان'}
|
|
||||||
{' | '}
|
|
||||||
{selected.city || 'شهر'}
|
{selected.city || 'شهر'}
|
||||||
</p>
|
</p>
|
||||||
<div className="w-[16px] h-[16px] md:w-[18px] md:h-[18px] lg:w-[20px] lg:h-[20px] grid place-items-center">
|
<div className="w-[16px] h-[16px] md:w-[18px] md:h-[18px] lg:w-[20px] lg:h-[20px] grid place-items-center">
|
||||||
|
|||||||
+2
-2
@@ -235,7 +235,7 @@ html {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.MuiFormControl-root .MuiInputBase-root .MuiInputBase-input {
|
.MuiFormControl-root .MuiInputBase-root .MuiInputBase-input {
|
||||||
font-size: 10px !important;
|
font-size: 16px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes openx {
|
@keyframes openx {
|
||||||
@@ -384,7 +384,7 @@ html {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.MuiFormControl-root .MuiInputBase-root .MuiInputBase-input {
|
.MuiFormControl-root .MuiInputBase-root .MuiInputBase-input {
|
||||||
font-size: 13px !important;
|
font-size: 16px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.MuiModal-root .MuiBox-root {
|
.MuiModal-root .MuiBox-root {
|
||||||
|
|||||||
@@ -3,38 +3,18 @@
|
|||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import SearchBar from "./search";
|
import SearchBar from "./search";
|
||||||
import SortList from "./sortlist";
|
import SortList from "./sortlist";
|
||||||
|
import { Button } from "@mui/material";
|
||||||
import ListDoctors from "./listDoctors";
|
import ListDoctors from "./listDoctors";
|
||||||
import LocationD from "../icons/LocationD";
|
import LocationD from "../icons/LocationD";
|
||||||
import { useSearchParams } from "next/navigation";
|
|
||||||
import ModalSearchCity from "@/app/component/modalSearchCity";
|
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({ params, matchedCity, matchedState }) {
|
function DoctorsPage({ params, matchedCity, matchedState }) {
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
const { isProvinceInclude } = useProvince();
|
|
||||||
const [selected, setSelected] = useState({
|
const [selected, setSelected] = useState({
|
||||||
province: matchedState?.name,
|
province: matchedState?.name || params?.province,
|
||||||
city: matchedCity?.name,
|
city: matchedCity?.name || params?.city,
|
||||||
});
|
});
|
||||||
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({
|
const [data, setData] = useState({
|
||||||
expertise: "",
|
expertise: "",
|
||||||
|
|||||||
@@ -2,17 +2,20 @@ import { MenuItem, Select, SvgIcon } from "@mui/material";
|
|||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import ArrowBottomD from "../../icons/ArrowBottomD";
|
import ArrowBottomD from "../../icons/ArrowBottomD";
|
||||||
import SortD from "../../icons/SortD";
|
import SortD from "../../icons/SortD";
|
||||||
|
import StarDI from "@/components/icons/StarDI";
|
||||||
|
|
||||||
const listSort = [
|
const listSort = [
|
||||||
{ label: "براساس امتیاز 1", id: 10 },
|
{ label: 3, id: 30 },
|
||||||
{ label: "براساس امتیاز 2", id: 20 },
|
{ label: 4, id: 40 },
|
||||||
{ label: "براساس امتیاز 3", id: 30 },
|
{ label: 5, id: 50 },
|
||||||
];
|
];
|
||||||
|
|
||||||
function SelectSort() {
|
function SelectSort() {
|
||||||
const [sort, setSort] = useState("");
|
const [sort, setSort] = useState(3);
|
||||||
|
|
||||||
|
const handleChange = (event) => setSort(event.target.value);
|
||||||
|
console.log(sort);
|
||||||
|
|
||||||
const handleChange = (event) => setSort(event.target.name);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Select
|
<Select
|
||||||
@@ -26,7 +29,14 @@ function SelectSort() {
|
|||||||
<SvgIcon color="primary">
|
<SvgIcon color="primary">
|
||||||
<SortD />
|
<SortD />
|
||||||
</SvgIcon>
|
</SvgIcon>
|
||||||
{value || "مرتب سازی"}
|
<ul className="flex items-center justify-start gap-1">
|
||||||
|
{Array(sort).fill({}).map((_, idx) => (
|
||||||
|
<li key={idx}>
|
||||||
|
<StarDI />
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
{/* {value || "مرتب سازی"} */}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}}
|
}}
|
||||||
@@ -51,8 +61,11 @@ function SelectSort() {
|
|||||||
name={item.label}
|
name={item.label}
|
||||||
className="!flex !flex-col !items-start !w-full hover:!bg-transparent"
|
className="!flex !flex-col !items-start !w-full hover:!bg-transparent"
|
||||||
>
|
>
|
||||||
<div value={item.id} className="!p-2 !mr-2 !w-[calc(100%_-_16px)]">
|
<div value={item.id} className="!p-2 !mr-2 !w-[calc(100%_-_16px)] flex items-center justify-start">
|
||||||
{item.label}
|
{/* {item.label} */}
|
||||||
|
{Array(item.label).fill({}).map((_, idx) => (
|
||||||
|
<StarDI key={idx} />
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
{/* {listSort.length > idx + 1 && (
|
{/* {listSort.length > idx + 1 && (
|
||||||
<span className="block mr-2 w-[calc(100%_-_16px)] h-px bg-[#EFEFEF]"></span>
|
<span className="block mr-2 w-[calc(100%_-_16px)] h-px bg-[#EFEFEF]"></span>
|
||||||
|
|||||||
@@ -8,7 +8,6 @@ function LogInPage({ setIsSendMsg, setStep, matchedCity }) {
|
|||||||
const [num, setNum] = useState("");
|
const [num, setNum] = useState("");
|
||||||
const [error, setError] = useState({ valid: true, text: '' });
|
const [error, setError] = useState({ valid: true, text: '' });
|
||||||
|
|
||||||
|
|
||||||
const handleChange = (val) => {
|
const handleChange = (val) => {
|
||||||
const formatted = formatPhoneNumber(val);
|
const formatted = formatPhoneNumber(val);
|
||||||
const checkedNum = validatePhoneNumber(formatted);
|
const checkedNum = validatePhoneNumber(formatted);
|
||||||
|
|||||||
@@ -1,13 +1,7 @@
|
|||||||
import SearchD from "@/components/icons/SearchD";
|
import SearchD from "@/components/icons/SearchD";
|
||||||
import { Button, ButtonGroup, TextField } from "@mui/material";
|
import { Button, ButtonGroup, TextField } from "@mui/material";
|
||||||
|
|
||||||
function SmSearch({ placeholder, onSearch }) {
|
function SmSearch({ placeholder, searchHandler }) {
|
||||||
const handleSearchChange = (event) => {
|
|
||||||
if (onSearch) {
|
|
||||||
onSearch(event.target.value);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ButtonGroup
|
<ButtonGroup
|
||||||
variant="contained"
|
variant="contained"
|
||||||
@@ -32,7 +26,7 @@ function SmSearch({ placeholder, onSearch }) {
|
|||||||
}}
|
}}
|
||||||
placeholder={placeholder}
|
placeholder={placeholder}
|
||||||
dir="rtl"
|
dir="rtl"
|
||||||
onChange={handleSearchChange}
|
onChange={e => searchHandler(e)}
|
||||||
className={`!shadow-none !w-full !px-5 !h-full bg-[#FAFAFA] !text-[14px] md:!text-[16px] !min-w-[50%] !rounded-0 !font-normal !text-[#6C757D]`}
|
className={`!shadow-none !w-full !px-5 !h-full bg-[#FAFAFA] !text-[14px] md:!text-[16px] !min-w-[50%] !rounded-0 !font-normal !text-[#6C757D]`}
|
||||||
/>
|
/>
|
||||||
<Button
|
<Button
|
||||||
|
|||||||
@@ -1,29 +1,21 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useEffect, useState } from "react";
|
import { useState } from "react";
|
||||||
import List from "./list";
|
import List from "./list";
|
||||||
import SmSearch from "../searchHead/SmSearch";
|
import SmSearch from "../searchHead/SmSearch";
|
||||||
import HeadPageList from "@/app/component/head";
|
import HeadPageList from "@/app/component/head";
|
||||||
import specialtiesData from "@/data/specialties.json";
|
import specialtiesData from "@/data/specialties.json";
|
||||||
|
|
||||||
function SpecialtiesPage() {
|
function SpecialtiesPage() {
|
||||||
const [searchQuery, setSearchQuery] = useState("");
|
|
||||||
const [filteredSpecialties, setFilteredSpecialties] = useState(specialtiesData);
|
const [filteredSpecialties, setFilteredSpecialties] = useState(specialtiesData);
|
||||||
|
|
||||||
useEffect(() => {
|
const searchHandler = (e) => {
|
||||||
if (searchQuery.trim() === "") {
|
const value = e.target.value
|
||||||
setFilteredSpecialties(specialtiesData);
|
setFilteredSpecialties(
|
||||||
} else {
|
specialtiesData.filter(item =>
|
||||||
const query = searchQuery.toLowerCase().trim();
|
item.name.toLowerCase().includes(value)
|
||||||
const filtered = specialtiesData.filter((specialty) =>
|
)
|
||||||
specialty.name.toLowerCase().includes(query)
|
)
|
||||||
);
|
|
||||||
setFilteredSpecialties(filtered);
|
|
||||||
}
|
|
||||||
}, [searchQuery]);
|
|
||||||
|
|
||||||
const handleSearch = (query) => {
|
|
||||||
setSearchQuery(query);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -32,7 +24,7 @@ function SpecialtiesPage() {
|
|||||||
title="تخصص مورد نظر شما چیست؟"
|
title="تخصص مورد نظر شما چیست؟"
|
||||||
detail="تخصص مورد نظرتان را جستجو کرده و یا از لیست زیر انتخاب نمایید:"
|
detail="تخصص مورد نظرتان را جستجو کرده و یا از لیست زیر انتخاب نمایید:"
|
||||||
>
|
>
|
||||||
<SmSearch placeholder="جستجوی تخصص" onSearch={handleSearch} />
|
<SmSearch placeholder="جستجوی تخصص" searchHandler={searchHandler} />
|
||||||
</HeadPageList>
|
</HeadPageList>
|
||||||
<List specialties={filteredSpecialties} />
|
<List specialties={filteredSpecialties} />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,16 +1,7 @@
|
|||||||
import MenuS from "@/components/icons/MenuS";
|
import MenuS from "@/components/icons/MenuS";
|
||||||
import Pagination from "@/app/component/Pagination";
|
|
||||||
import ItemSpecialties from "./ItemSpecialties";
|
import ItemSpecialties from "./ItemSpecialties";
|
||||||
import { useState } from "react";
|
|
||||||
|
|
||||||
function List({ specialties = [] }) {
|
function List({ specialties = [] }) {
|
||||||
const [page, setPage] = useState(1);
|
|
||||||
const itemsPerPage = 24;
|
|
||||||
|
|
||||||
const startIndex = (page - 1) * itemsPerPage;
|
|
||||||
const endIndex = startIndex + itemsPerPage;
|
|
||||||
const currentList = specialties.filter((_, i) => i >= startIndex && i < endIndex);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="bg-[#FAFAFA]">
|
<div className="bg-[#FAFAFA]">
|
||||||
<div className="flex items-center justify-center gap-[12px] pt-[24px] mb-[40px]">
|
<div className="flex items-center justify-center gap-[12px] pt-[24px] mb-[40px]">
|
||||||
@@ -29,19 +20,11 @@ function List({ specialties = [] }) {
|
|||||||
gap-x-[16px] md:gap-x-[20px] lg:gap-x-[24px]
|
gap-x-[16px] md:gap-x-[20px] lg:gap-x-[24px]
|
||||||
gap-y-[16px] sm:gap-y-[24px] md:gap-y-[32px] lg:gap-y-[40px]"
|
gap-y-[16px] sm:gap-y-[24px] md:gap-y-[32px] lg:gap-y-[40px]"
|
||||||
>
|
>
|
||||||
{currentList.map((speciality) => (
|
{specialties.map((speciality) => (
|
||||||
<ItemSpecialties data={speciality} key={speciality.id} />
|
<ItemSpecialties data={speciality} key={speciality.id} />
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
)}
|
)}
|
||||||
<div className="mt-[48px] flex justify-center">
|
|
||||||
<Pagination
|
|
||||||
page={page}
|
|
||||||
setPage={setPage}
|
|
||||||
list={specialties}
|
|
||||||
itemsPerPage={itemsPerPage}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
+2
-1
@@ -119,11 +119,12 @@ export function validatePhoneNumber(input) {
|
|||||||
return { valid: false, text: 'شماره موبایل نمیتواند خالی باشد.' };
|
return { valid: false, text: 'شماره موبایل نمیتواند خالی باشد.' };
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
if (digits.length !== 9) {
|
if (digits.length !== 9) {
|
||||||
return { valid: false, text: 'شماره موبایل باید دقیقا 11 رقم باشد.' };
|
return { valid: false, text: 'شماره موبایل باید دقیقا 11 رقم باشد.' };
|
||||||
}
|
}
|
||||||
|
|
||||||
const isValid = /^9\d{8}$/.test(digits);
|
const isValid = /^[1-9]\d{8}$/.test(digits);
|
||||||
if (!isValid) {
|
if (!isValid) {
|
||||||
return { valid: false, text: 'شماره موبایل نامعتبر است.' };
|
return { valid: false, text: 'شماره موبایل نامعتبر است.' };
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user