change component folders && add multipleselector && send img of doctor page && send skills to create doctor item

This commit is contained in:
Ehsan
2025-07-17 15:50:23 +03:30
parent c88a371eda
commit 278602372d
22 changed files with 144 additions and 34 deletions
+72
View File
@@ -0,0 +1,72 @@
import OutlinedInput from "@mui/material/OutlinedInput";
import MenuItem from "@mui/material/MenuItem";
import Select from "@mui/material/Select";
import { styleTextSelectRight } from "@/mui";
import IconMultipleSelect from "@/components/icons/IconMultipleSelect";
export default function MultipleSelect({ value, updateData, name, list }) {
const handleChange = (event) => {
const {
target: { value },
} = event;
const newVal = typeof value === "string" ? value.split(",") : value;
updateData(newVal, "value", name);
};
return (
<div className="auto-complete-selector w-full">
<Select
multiple
displayEmpty
value={value}
onChange={handleChange}
input={<OutlinedInput />}
IconComponent={IconMultipleSelect}
className=""
sx={{
...styleTextSelectRight,
width: "100% !important",
"& .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",
},
}}
>
{list.map((item) => (
<MenuItem
key={item.id || item.uuid}
value={item.id}
selected={value.includes(item.id)}
className={`!flex !justify-start !p-[8px] !text-start !text-[#A1A1A1]
${
value.includes(item.id)
? "dark:!bg-[#35343D] !bg-[#F1F1F1]"
: "dark:!bg-[#1F1D2B] !bg-[#FFF]"
}
hover:dark:!bg-[#35343D] hover:!bg-[#F5F5F5]`}
>
{item.name || item.label}
</MenuItem>
))}
</Select>
</div>
);
}
+1 -1
View File
@@ -1,5 +1,5 @@
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
import EditField from "../../../app/component/EditField";
import EditField from "../../../app/component/fields/EditField";
import Content from "./Content";
const bime = [
+1 -1
View File
@@ -1,7 +1,7 @@
import ArrowLeftC from "../icons/ArrowLeftC";
import { Button } from "@mui/material";
import FieldLabel from "./FieldLabel";
import Field from "@/app/component/Field";
import Field from "@/app/component/fields/Field";
function Connect() {
return (
@@ -1,5 +1,5 @@
import FieldLabel from "@/components/contactUs/FieldLabel";
import Field from "@/app/component/Field";
import Field from "@/app/component/fields/Field";
import AutoSelector from "@/app/component/element/AutoSelector";
const listIntensity = [
@@ -1,5 +1,5 @@
import FieldLabel from "@/components/contactUs/FieldLabel";
import Field from "@/app/component/Field";
import Field from "@/app/component/fields/Field";
function Content({ setData, data }) {
const handleChange = (name, value) =>
@@ -1,5 +1,5 @@
import FieldLabel from "@/components/contactUs/FieldLabel";
import Field from "@/app/component/Field";
import Field from "@/app/component/fields/Field";
function Content({ setData, data }) {
const handleChange = (name, value) =>
@@ -1,5 +1,5 @@
import FieldLabel from "@/components/contactUs/FieldLabel";
import Field from "@/app/component/Field";
import Field from "@/app/component/fields/Field";
function Content({ setData, data }) {
const handleChange = (name, value) =>
@@ -1,5 +1,5 @@
import FieldLabel from "@/components/contactUs/FieldLabel";
import Field from "@/app/component/Field";
import Field from "@/app/component/fields/Field";
const listIntensity = [
{ label: "شدید" },
@@ -4,7 +4,7 @@ import { useState } from "react";
import { styleDefault } from "@/mui";
import { Box, Button, Modal, Rating, Slider } from "@mui/material";
import CloseModalD from "@/components/icons/CloseModalD";
import Field from "@/app/component/Field";
import Field from "@/app/component/fields/Field";
import ArrowLeftD from "@/components/icons/ArrowLeftD";
import ProgressChange from "@/app/component/ProgressChange";
import Link from "next/link";
+23
View File
@@ -0,0 +1,23 @@
function IconMultipleSelect() {
return (
<svg
className="cursor-pointer ml-[14px] min-w-[24px] min-h-[24px]"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M19.9181 8.95L13.3981 15.47C12.6281 16.24 11.3681 16.24 10.5981 15.47L4.07812 8.95"
stroke="#495057"
strokeWidth="1.5"
strokeMiterlimit="10"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
}
export default IconMultipleSelect;
+1 -1
View File
@@ -7,7 +7,7 @@ export const defaultState = {
},
expertise: { value: "", placeholder: "دندان پزشکی", isEdit: true },
description: { value: "", isEdit: true },
skills: { value: "", isEdit: true },
skills: { value: [], isEdit: true },
time_work: { value: "", isEdit: true },
phone: { value: "", placeholder: "", isEdit: true },
degree: { value: "", isEdit: true },
@@ -1,7 +1,7 @@
import { useState } from "react";
import { convertToJalali } from "@/helper";
import EditField from "@/app/component/EditField";
import EditField from "@/app/component/fields/EditField";
import ButtonDate from "@/app/component/ButtonDate";
import CalendarPD from "@/components/icons/CalendarPD";
import ContentText from "@/app/component/ContentText";
@@ -9,7 +9,7 @@ function Selector({ updateData, nameKey, label, name, list }) {
options={list}
getOptionLabel={(option) => option[nameKey] || ""}
isOptionEqualToValue={(option, value) => option.id === value.id}
className="!w-full !rounded-lg auto-complete-selector "
className="!w-full !rounded-lg auto-complete-selector"
onChange={(e, newValue) => {
if (newValue) {
updateData && updateData(newValue.id, "value", name);
+33 -20
View File
@@ -1,15 +1,18 @@
import { useEffect, useState } from "react";
import FieldDate from "./fields/FieldDate";
import RadioGender from "./fields/RadioGender";
import SendReq from "./sendReq";
import Selector from "./fields/Selector";
// Components
import EditField from "@/app/component/EditField";
import EditField from "@/app/component/fields/EditField";
import ContentText from "@/app/component/ContentText";
// Data
import specialties from "@/data/specialties.json";
import education from "@/data/education.json";
import MultipleSelect from "@/app/component/selectors/MultipleSelect";
import { request } from "@/services/response";
const validate_medical_number = {
min: 1,
@@ -17,6 +20,8 @@ const validate_medical_number = {
};
function Form({ image, data, setData, resetData }) {
const [services, setServices] = useState([]);
const changeData = (value, type, name) => {
type !== "isEdit" &&
setData((prev) => {
@@ -38,6 +43,18 @@ function Form({ image, data, setData, resetData }) {
};
const filteredSpe = specialties.filter((item) => item.parent);
useEffect(() => {
request
.getDoctorServices()
.then((res) => {
setServices(res.data);
})
.catch((err) => {
console.log(err);
});
}, []);
console.log(services);
return (
<>
<div className="mt-[24px] sm-modal scroll-mui md:mt-[26px] lg:mt-[28px] grid grid-cols-1 md:grid-cols-2 gap-x-[48px] gap-y-[24px]">
@@ -86,29 +103,14 @@ function Form({ image, data, setData, resetData }) {
nameKey="label"
/>
</ContentText>
<ContentText text="توضیحات">
<EditField
multiline={5}
placeholder="درباره سوابق خود توضیحاتی بنویسید..."
isTransparent={true}
iconGray={true}
changeData={changeData}
data={data?.description}
name="description"
/>
</ContentText>
<ContentText text="مهارت ها">
<EditField
multiline={5}
placeholder="مهارت های خود را بنویسید..."
isTransparent={true}
iconGray={true}
changeData={changeData}
data={data?.skills}
<MultipleSelect
name="skills"
list={services}
updateData={changeData}
value={data?.skills.value}
/>
</ContentText>
<ContentText text="شماره موبایل">
<EditField
isTransparent={true}
@@ -124,6 +126,17 @@ function Form({ image, data, setData, resetData }) {
<ContentText text="جنسیت">
<RadioGender changeData={changeData} name="gender" />
</ContentText>
<ContentText text="توضیحات">
<EditField
multiline={5}
placeholder="درباره سوابق خود توضیحاتی بنویسید..."
isTransparent={true}
iconGray={true}
changeData={changeData}
data={data?.description}
name="description"
/>
</ContentText>
</div>
<SendReq img={image} data={data} resetData={resetData} />
</>
@@ -4,7 +4,6 @@ import { request } from "@/services/response";
import { Button } from "@mui/material";
import { useState } from "react";
import { transformData } from "./function";
import { defaultState } from "../../defaultState";
function SendReq({ img, data, resetData }) {
const [loading, setLoading] = useState(false);
+1
View File
@@ -9,6 +9,7 @@ function AddDoctorPage() {
const [data, setData] = useState(defaultState);
const [image, setImage] = useState("");
console.log(data);
const resetData = () => {
setData(defaultState);
setImage();
@@ -3,7 +3,7 @@
import { useState } from "react";
import ContentText from "../../../../../app/component/ContentText";
import EditField from "@/app/component/EditField";
import EditField from "@/app/component/fields/EditField";
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
import { bank, city, state } from "./listSelector";
import AddLocationP from "@/components/icons/AddLocationP";
@@ -1,4 +1,4 @@
import EditField from "@/app/component/EditField";
import EditField from "@/app/component/fields/EditField";
import ContentText from "@/app/component/ContentText";
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
import { validate_phone_number } from "./validate";
+2
View File
@@ -68,4 +68,6 @@ export const request = {
"X-CSRF-Token": "",
},
}),
getDoctorServices: () =>
api.get("api/v1/categorys/doctor_services", removeTokenHead),
};