add prettier formatter to all file
This commit is contained in:
Ehsan
@@ -1,18 +1,20 @@
|
||||
function Content({ isConfirmed, children, title }) {
|
||||
return (
|
||||
<div className='flex w-full flex-col items-start justify-start gap-[8px] sm:gap-[10px] md:gap-[13px] lg:gap-[16px]'>
|
||||
<div className='flex min-h-[32px] items-center justify-start gap-[8px] md:gap-[6px] lg:gap-[4px]'>
|
||||
<p className="text-[#525252] text-[14px] font-medium">{title}</p>
|
||||
{isConfirmed && (
|
||||
<p
|
||||
className='py-[4px] md:py-[2px] px-[5px] bg-[#05BA58] rounded-[40px] text-[#FFF]
|
||||
text-[10px] md:text-[12px] font-normal h-[26px] grid place-items-center'
|
||||
>تایید شده</p>
|
||||
)}
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="flex w-full flex-col items-start justify-start gap-[8px] sm:gap-[10px] md:gap-[13px] lg:gap-[16px]">
|
||||
<div className="flex min-h-[32px] items-center justify-start gap-[8px] md:gap-[6px] lg:gap-[4px]">
|
||||
<p className="text-[#525252] text-[14px] font-medium">{title}</p>
|
||||
{isConfirmed && (
|
||||
<p
|
||||
className="py-[4px] md:py-[2px] px-[5px] bg-[#05BA58] rounded-[40px] text-[#FFF]
|
||||
text-[10px] md:text-[12px] font-normal h-[26px] grid place-items-center"
|
||||
>
|
||||
تایید شده
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Content
|
||||
export default Content;
|
||||
|
||||
@@ -1,70 +1,69 @@
|
||||
import CalendarEdit from '@/components/icons/CalendarEdit';
|
||||
import { convertToJalali } from '@/helper';
|
||||
import { Button, Popover } from '@mui/material'
|
||||
import { DatePicker } from 'jalaali-react-date-picker'
|
||||
import React, { useState } from 'react'
|
||||
import CalendarEdit from "@/components/icons/CalendarEdit";
|
||||
import { convertToJalali } from "@/helper";
|
||||
import { Button, Popover } from "@mui/material";
|
||||
import { DatePicker } from "jalaali-react-date-picker";
|
||||
import React, { useState } from "react";
|
||||
|
||||
function DateBirthday({ data, changeData }) {
|
||||
const [anchorEl, setAnchorEl] = useState(null);
|
||||
|
||||
const [anchorEl, setAnchorEl] = useState(null);
|
||||
const handleClick = (event) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
|
||||
const handleClick = (event) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
const open = Boolean(anchorEl);
|
||||
const id = open ? "simple-popover" : undefined;
|
||||
|
||||
const open = Boolean(anchorEl);
|
||||
const id = open ? 'simple-popover' : undefined;
|
||||
|
||||
return (
|
||||
<div className='w-full'>
|
||||
<div
|
||||
className="relative w-full border cursor-pointer py-[15px] px-[16px] border-solid border-[#D7D7D7] rounded-[8px] h-[48px]"
|
||||
onClick={handleClick}
|
||||
>
|
||||
<p className='text-[#7E7E7E] text-[14px] font-normal cursor-pointer'>{data.value}</p>
|
||||
<Button
|
||||
className="!absolute !left-[8px] !top-1/2 !-translate-y-1/2 !min-w-fit !p-1"
|
||||
>
|
||||
<CalendarEdit />
|
||||
</Button>
|
||||
</div>
|
||||
<Popover
|
||||
id={id}
|
||||
open={open}
|
||||
anchorEl={anchorEl}
|
||||
onClose={handleClose}
|
||||
anchorOrigin={{
|
||||
vertical: 'bottom',
|
||||
horizontal: 'right',
|
||||
}}
|
||||
transformOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'right',
|
||||
}}
|
||||
sx={{
|
||||
'& .MuiPaper-root': {
|
||||
padding: '12px',
|
||||
background: '#FAFAFA !important',
|
||||
borderRadius: '16px',
|
||||
border: '1px solid #E9ECEF',
|
||||
boxShadow: '0px 2px 28.4px 0px rgba(112, 112, 112, 0.28)'
|
||||
},
|
||||
}}
|
||||
>
|
||||
<DatePicker
|
||||
locale='fa'
|
||||
onChange={e => {
|
||||
changeData(convertToJalali(e._d), 'value', 'date_of_birth');
|
||||
handleClose();
|
||||
}}
|
||||
/>
|
||||
</Popover>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div
|
||||
className="relative w-full border cursor-pointer py-[15px] px-[16px] border-solid border-[#D7D7D7] rounded-[8px] h-[48px]"
|
||||
onClick={handleClick}
|
||||
>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal cursor-pointer">
|
||||
{data.value}
|
||||
</p>
|
||||
<Button className="!absolute !left-[8px] !top-1/2 !-translate-y-1/2 !min-w-fit !p-1">
|
||||
<CalendarEdit />
|
||||
</Button>
|
||||
</div>
|
||||
<Popover
|
||||
id={id}
|
||||
open={open}
|
||||
anchorEl={anchorEl}
|
||||
onClose={handleClose}
|
||||
anchorOrigin={{
|
||||
vertical: "bottom",
|
||||
horizontal: "right",
|
||||
}}
|
||||
transformOrigin={{
|
||||
vertical: "top",
|
||||
horizontal: "right",
|
||||
}}
|
||||
sx={{
|
||||
"& .MuiPaper-root": {
|
||||
padding: "12px",
|
||||
background: "#FAFAFA !important",
|
||||
borderRadius: "16px",
|
||||
border: "1px solid #E9ECEF",
|
||||
boxShadow: "0px 2px 28.4px 0px rgba(112, 112, 112, 0.28)",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<DatePicker
|
||||
locale="fa"
|
||||
onChange={(e) => {
|
||||
changeData(convertToJalali(e._d), "value", "date_of_birth");
|
||||
handleClose();
|
||||
}}
|
||||
/>
|
||||
</Popover>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default DateBirthday
|
||||
export default DateBirthday;
|
||||
|
||||
@@ -1,86 +1,139 @@
|
||||
import Content from './Content'
|
||||
import EditField from '@/app/component/EditField'
|
||||
import AutoCompleteSelect from '@/app/component/element/AutoCompleteSelect'
|
||||
import DateBirthday from './DateBirthday'
|
||||
import { insurance, gender, blood_group, marital_status, education, job } from "./listSelector";
|
||||
import Content from "./Content";
|
||||
import EditField from "@/app/component/EditField";
|
||||
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
|
||||
import DateBirthday from "./DateBirthday";
|
||||
import {
|
||||
insurance,
|
||||
gender,
|
||||
blood_group,
|
||||
marital_status,
|
||||
education,
|
||||
job,
|
||||
} from "./listSelector";
|
||||
|
||||
function Form({ data, selected, changeData, updateSelect }) {
|
||||
return (
|
||||
<div className='grid grid-cols-1 lg:grid-cols-2 gap-[24px]'>
|
||||
<Content title='شماره موبایل' isConfirmed={true}>
|
||||
<EditField isTransparent={true} iconGray={true} changeData={changeData} data={data?.phone} name='phone' />
|
||||
</Content>
|
||||
<Content title='کد ملی' isConfirmed={false}>
|
||||
<EditField isTransparent={true} iconGray={true} changeData={changeData} data={data?.national_code} name='national_code' />
|
||||
</Content>
|
||||
<Content title='نام و نام خانوادگی' isConfirmed={false}>
|
||||
<EditField isTransparent={true} iconGray={true} changeData={changeData} data={data?.name} name='name' />
|
||||
</Content>
|
||||
<Content title='جنسیت'>
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label='جنسیت'
|
||||
name='gender'
|
||||
list={gender}
|
||||
/>
|
||||
</Content>
|
||||
<Content title='تاریخ تولد'>
|
||||
<DateBirthday data={data?.date_of_birth} isConfirmed={false} changeData={changeData} />
|
||||
</Content>
|
||||
<Content title='نام پدر' isConfirmed={false}>
|
||||
<EditField isTransparent={true} iconGray={true} changeData={changeData} data={data?.father_name} name='father_name' />
|
||||
</Content>
|
||||
<Content title='نوع بیمه'>
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label='نوع بیمه'
|
||||
name='insurance'
|
||||
list={insurance}
|
||||
/>
|
||||
</Content>
|
||||
<Content title='شماره بیمه' isConfirmed={false}>
|
||||
<EditField isTransparent={true} iconGray={true} changeData={changeData} data={data?.insurance_number} name='insurance_number' />
|
||||
</Content>
|
||||
<Content title='گروه خونی'>
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label='گروه خونی'
|
||||
name='blood_group'
|
||||
list={blood_group}
|
||||
/>
|
||||
</Content>
|
||||
<Content title='وضعیت تاهل'>
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label='وضعیت تاهل'
|
||||
name='marital_status'
|
||||
list={marital_status}
|
||||
/>
|
||||
</Content>
|
||||
<Content title='تلفن منزل' isConfirmed={false}>
|
||||
<EditField isTransparent={true} iconGray={true} changeData={changeData} data={data?.home_phone} name='home_phone' />
|
||||
</Content>
|
||||
<Content title='تحصیلات'>
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label='تحصیلات'
|
||||
name='education'
|
||||
list={education}
|
||||
/>
|
||||
</Content>
|
||||
<Content title='شغل'>
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label='شغل'
|
||||
name='job'
|
||||
list={job}
|
||||
/>
|
||||
</Content>
|
||||
<Content title='تلفن محل کار' isConfirmed={false}>
|
||||
<EditField isTransparent={true} iconGray={true} changeData={changeData} data={data?.work_phone} name='work_phone' />
|
||||
</Content>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-[24px]">
|
||||
<Content title="شماره موبایل" isConfirmed={true}>
|
||||
<EditField
|
||||
isTransparent={true}
|
||||
iconGray={true}
|
||||
changeData={changeData}
|
||||
data={data?.phone}
|
||||
name="phone"
|
||||
/>
|
||||
</Content>
|
||||
<Content title="کد ملی" isConfirmed={false}>
|
||||
<EditField
|
||||
isTransparent={true}
|
||||
iconGray={true}
|
||||
changeData={changeData}
|
||||
data={data?.national_code}
|
||||
name="national_code"
|
||||
/>
|
||||
</Content>
|
||||
<Content title="نام و نام خانوادگی" isConfirmed={false}>
|
||||
<EditField
|
||||
isTransparent={true}
|
||||
iconGray={true}
|
||||
changeData={changeData}
|
||||
data={data?.name}
|
||||
name="name"
|
||||
/>
|
||||
</Content>
|
||||
<Content title="جنسیت">
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label="جنسیت"
|
||||
name="gender"
|
||||
list={gender}
|
||||
/>
|
||||
</Content>
|
||||
<Content title="تاریخ تولد">
|
||||
<DateBirthday
|
||||
data={data?.date_of_birth}
|
||||
isConfirmed={false}
|
||||
changeData={changeData}
|
||||
/>
|
||||
</Content>
|
||||
<Content title="نام پدر" isConfirmed={false}>
|
||||
<EditField
|
||||
isTransparent={true}
|
||||
iconGray={true}
|
||||
changeData={changeData}
|
||||
data={data?.father_name}
|
||||
name="father_name"
|
||||
/>
|
||||
</Content>
|
||||
<Content title="نوع بیمه">
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label="نوع بیمه"
|
||||
name="insurance"
|
||||
list={insurance}
|
||||
/>
|
||||
</Content>
|
||||
<Content title="شماره بیمه" isConfirmed={false}>
|
||||
<EditField
|
||||
isTransparent={true}
|
||||
iconGray={true}
|
||||
changeData={changeData}
|
||||
data={data?.insurance_number}
|
||||
name="insurance_number"
|
||||
/>
|
||||
</Content>
|
||||
<Content title="گروه خونی">
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label="گروه خونی"
|
||||
name="blood_group"
|
||||
list={blood_group}
|
||||
/>
|
||||
</Content>
|
||||
<Content title="وضعیت تاهل">
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label="وضعیت تاهل"
|
||||
name="marital_status"
|
||||
list={marital_status}
|
||||
/>
|
||||
</Content>
|
||||
<Content title="تلفن منزل" isConfirmed={false}>
|
||||
<EditField
|
||||
isTransparent={true}
|
||||
iconGray={true}
|
||||
changeData={changeData}
|
||||
data={data?.home_phone}
|
||||
name="home_phone"
|
||||
/>
|
||||
</Content>
|
||||
<Content title="تحصیلات">
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label="تحصیلات"
|
||||
name="education"
|
||||
list={education}
|
||||
/>
|
||||
</Content>
|
||||
<Content title="شغل">
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label="شغل"
|
||||
name="job"
|
||||
list={job}
|
||||
/>
|
||||
</Content>
|
||||
<Content title="تلفن محل کار" isConfirmed={false}>
|
||||
<EditField
|
||||
isTransparent={true}
|
||||
iconGray={true}
|
||||
changeData={changeData}
|
||||
data={data?.work_phone}
|
||||
name="work_phone"
|
||||
/>
|
||||
</Content>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Form
|
||||
export default Form;
|
||||
|
||||
@@ -4,55 +4,55 @@ import { Button } from "@mui/material";
|
||||
import ArrowLeftWhiteD from "@/components/icons/ArrowLeftWhiteD";
|
||||
|
||||
function DetailUser({ user }) {
|
||||
const [data, setData] = useState({
|
||||
phone: { value: user.phone, isEdit: false },
|
||||
national_code: { value: user.national_code, isEdit: false },
|
||||
name: { value: user.name, isEdit: false },
|
||||
date_of_birth: { value: user.date_of_birth, isEdit: false },
|
||||
father_name: { value: user.father_name, isEdit: false },
|
||||
insurance_number: { value: user.insurance_number, isEdit: false },
|
||||
home_phone: { value: user.home_phone, isEdit: false },
|
||||
work_phone: { value: user.work_phone, isEdit: false },
|
||||
});
|
||||
const [selected, setSelected] = useState({
|
||||
gender: "",
|
||||
blood_group: "",
|
||||
insurance: "",
|
||||
marital_status: "",
|
||||
education: "",
|
||||
job: "",
|
||||
});
|
||||
|
||||
const [data, setData] = useState({
|
||||
phone: { value: user.phone, isEdit: false },
|
||||
national_code: { value: user.national_code, isEdit: false },
|
||||
name: { value: user.name, isEdit: false },
|
||||
date_of_birth: { value: user.date_of_birth, isEdit: false },
|
||||
father_name: { value: user.father_name, isEdit: false },
|
||||
insurance_number: { value: user.insurance_number, isEdit: false },
|
||||
home_phone: { value: user.home_phone, isEdit: false },
|
||||
work_phone: { value: user.work_phone, isEdit: false },
|
||||
});
|
||||
const [selected, setSelected] = useState({
|
||||
gender: '',
|
||||
blood_group: '',
|
||||
insurance: '',
|
||||
marital_status: '',
|
||||
education: '',
|
||||
job: '',
|
||||
const changeData = (value, type, name) =>
|
||||
setData({
|
||||
...data,
|
||||
[name]: {
|
||||
...data[name],
|
||||
[type]: value,
|
||||
},
|
||||
});
|
||||
|
||||
const changeData = (value, type, name) =>
|
||||
setData({
|
||||
...data,
|
||||
[name]: {
|
||||
...data[name],
|
||||
[type]: value
|
||||
}
|
||||
});
|
||||
const updateSelect = (event, name) =>
|
||||
setSelected({ ...selected, [name]: event.target.innerText });
|
||||
|
||||
const updateSelect = (event, name) => setSelected({ ...selected, [name]: event.target.innerText })
|
||||
|
||||
return (
|
||||
<div className="opacity-page">
|
||||
<Form
|
||||
data={data}
|
||||
selected={selected}
|
||||
changeData={changeData}
|
||||
updateSelect={updateSelect}
|
||||
/>
|
||||
<Button
|
||||
className="!gap-[4px] !mr-auto !text-nowrap !flex !flex-nowrap !py-[8px]
|
||||
return (
|
||||
<div className="opacity-page">
|
||||
<Form
|
||||
data={data}
|
||||
selected={selected}
|
||||
changeData={changeData}
|
||||
updateSelect={updateSelect}
|
||||
/>
|
||||
<Button
|
||||
className="!gap-[4px] !mr-auto !text-nowrap !flex !flex-nowrap !py-[8px]
|
||||
!bg-[#5559CE] !rounded-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium
|
||||
!mt-[32px] sm:!mt-[38px] md:!mt-[43px] lg:!mt-[48px] !px-[16px] sm:!px-[19px] md:!px-[22px] lg:!px-[24px]"
|
||||
>
|
||||
ثبت اطلاعات
|
||||
<ArrowLeftWhiteD />
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
>
|
||||
ثبت اطلاعات
|
||||
<ArrowLeftWhiteD />
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default DetailUser
|
||||
export default DetailUser;
|
||||
|
||||
@@ -1,34 +1,34 @@
|
||||
export const gender = [
|
||||
{ label: 'مرد', id: 10 },
|
||||
{ label: 'زن', id: 20 }
|
||||
{ label: "مرد", id: 10 },
|
||||
{ label: "زن", id: 20 },
|
||||
];
|
||||
|
||||
export const blood_group = [
|
||||
{ label: 'A+', id: 10 },
|
||||
{ label: 'B+', id: 20 },
|
||||
{ label: 'AB', id: 30 },
|
||||
{ label: 'O+', id: 40 }
|
||||
{ label: "A+", id: 10 },
|
||||
{ label: "B+", id: 20 },
|
||||
{ label: "AB", id: 30 },
|
||||
{ label: "O+", id: 40 },
|
||||
];
|
||||
|
||||
export const marital_status = [
|
||||
{ label: 'متاهل', id: 10 },
|
||||
{ label: 'مجرد', id: 20 }
|
||||
]
|
||||
{ label: "متاهل", id: 10 },
|
||||
{ label: "مجرد", id: 20 },
|
||||
];
|
||||
|
||||
export const education = [
|
||||
{ label: 'دیپلم', id: 10 },
|
||||
{ label: 'فوق دیپلم', id: 20 },
|
||||
{ label: 'لیسانس', id: 30 },
|
||||
{ label: 'کارشناسی ارشد', id: 40 }
|
||||
]
|
||||
{ label: "دیپلم", id: 10 },
|
||||
{ label: "فوق دیپلم", id: 20 },
|
||||
{ label: "لیسانس", id: 30 },
|
||||
{ label: "کارشناسی ارشد", id: 40 },
|
||||
];
|
||||
|
||||
export const job = [
|
||||
{ label: 'آزاد', id: 10 },
|
||||
{ label: 'دولتی', id: 20 },
|
||||
]
|
||||
{ label: "آزاد", id: 10 },
|
||||
{ label: "دولتی", id: 20 },
|
||||
];
|
||||
|
||||
export const insurance = [
|
||||
{ label: 'بیمه 1', id: 10 },
|
||||
{ label: 'بیمه 2', id: 20 },
|
||||
{ label: 'بیمه 3', id: 30 }
|
||||
];
|
||||
{ label: "بیمه 1", id: 10 },
|
||||
{ label: "بیمه 2", id: 20 },
|
||||
{ label: "بیمه 3", id: 30 },
|
||||
];
|
||||
|
||||
Reference in New Issue
Block a user