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