change component folders && add multipleselector && send img of doctor page && send skills to create doctor item
This commit is contained in:
@@ -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,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,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";
|
||||
|
||||
@@ -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;
|
||||
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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";
|
||||
|
||||
@@ -68,4 +68,6 @@ export const request = {
|
||||
"X-CSRF-Token": "",
|
||||
},
|
||||
}),
|
||||
getDoctorServices: () =>
|
||||
api.get("api/v1/categorys/doctor_services", removeTokenHead),
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user