update src/components/Input/index.js, src/views/Auth/Profile/GenderSwitch/index.js and src/views/Auth/Profile/index.js

master
Reza_ashrafi 2 years ago
parent 92e000e0d5
commit 00d0aad208
  1. 2
      src/components/Input/index.js
  2. 2
      src/views/Auth/Profile/GenderSwitch/index.js
  3. 136
      src/views/Auth/Profile/index.js

@ -19,7 +19,7 @@ export default function Input(props) {
return ( return (
<div <div
className="input flex flex-col relative dark:bg-opacity-10 w-full" className="flex flex-col relative dark:bg-opacity-10 w-full"
style={{ width }} style={{ width }}
> >
<label <label

@ -14,7 +14,7 @@ export default function GenderSwitch({
<div className="flex w-full items-center gap-4"> <div className="flex w-full items-center gap-4">
{options?.map((option, index) => ( {options?.map((option, index) => (
<div <div
className={`rounded-sm py-3 flex-1 transition-all border border-solid border-blueC0 duration-500 cursor-pointer text-center ${ className={`rounded-sm py-4 w-1/2 text-tiny lg:flex-auto transition-all border border-solid border-blueC0 duration-500 cursor-pointer text-center ${
selectedOption === index + 1 selectedOption === index + 1
? "bg-blueC0 text-white" ? "bg-blueC0 text-white"
: " text-blueC0" : " text-blueC0"

@ -71,7 +71,7 @@ function Profile({
}, [user]); }, [user]);
useEffect(() => { useEffect(() => {
if(isMobile){ if (isMobile) {
setHeaderOptions(headerOptions); setHeaderOptions(headerOptions);
} }
getProvince(); getProvince();
@ -321,7 +321,11 @@ function Profile({
selectedOptions={formData?.provinceId} selectedOptions={formData?.provinceId}
onChange={(name, value) => { onChange={(name, value) => {
setFormData({ ...formData, cityId: null, [name]: value }); setFormData({ ...formData, cityId: null, [name]: value });
getCity({ provinceId: provinceList.find((province) => province.name === value)?.id }); getCity({
provinceId: provinceList.find(
(province) => province.name === value
)?.id,
});
}} }}
/> />
<Select <Select
@ -457,6 +461,63 @@ function Profile({
direction={"ltr"} direction={"ltr"}
/> />
</div> </div>
<div
className={`w-full flex lg:justify-between lg:flex-row flex-col gap-5 lg:my-2 lg:items-end`}
>
<Gender
options={[window.t("دانش آموز"), window.t("معلم")]}
name="status"
label={window.t("عنوان")}
selectedOption={formData?.status}
onChange={(name, value) => {
setFormData({
...formData,
gradeIds: formData?.gradeIds?.slice(0, 1) || [],
[name]: value,
});
}}
/>
</div>
{formData?.status === 1 ? (
<div
className={`w-full flex lg:flex-row items-center flex-col gap-5 lg:my-2 lg:items-center`}
>
<Input
name="schools"
label={window.t("نام مدرسه")}
value={formData?.schoolId}
regex={(val) => onInput.persianOnly(val)}
onChange={(name, value) =>
setFormData({ ...formData, [name]: value })
}
/>
<div className="w-full"></div>
</div>
) : null}
{formData?.status === 2 ? (
<div
className={`w-full flex lg:flex-row items-center flex-col gap-5 lg:my-2 lg:items-center`}
>
<Input
name="schools"
label={window.t("محل تدریس")}
defaultValue={formData}
regex={(val) => onInput.persianOnly(val)}
onChange={(name, value) =>
setFormData({ ...formData, [name]: value })
}
/>
<Document
onChange={(name, value) => {
upload({ file: value, target: name });
setFormData({ ...formData, [name]: value });
}}
value={String(uploads["docFileIds"] || formData?.docFileIds)}
name="docFileIds"
/>
</div>
) : null}
<div <div
className={`w-full flex lg:flex-row flex-col gap-5 lg:my-2 lg:items-center`} className={`w-full flex lg:flex-row flex-col gap-5 lg:my-2 lg:items-center`}
> >
@ -477,7 +538,7 @@ function Profile({
/> />
</div> </div>
<div <div
className={`w-full flex lg:flex-row flex-col gap-5 lg:my-2 lg:items-center`} className={`w-full flex lg:flex-row items-center flex-col gap-5 lg:my-2 lg:items-center`}
> >
<Gender <Gender
options={[window.t("دختر"), window.t("پسر")]} options={[window.t("دختر"), window.t("پسر")]}
@ -488,10 +549,77 @@ function Profile({
} }
label="جنسیت" label="جنسیت"
/> />
</div>
<div
className={`w-full flex lg:flex-row flex-col gap-5 lg:my-2 lg:items-center`}
>
<Input
name="username"
label={window.t("نام کاربری")}
value={formData?.username}
onChange={(name, value) =>
setFormData({ ...formData, [name]: value })
}
align="left"
regex={(val) => onInput.englishAndNumberWithoutSpace(val)}
/>
<Input
name="password"
label={window.t("رمز عبور")}
onChange={(name, value) =>
setFormData({ ...formData, [name]: value })
}
value={formData?.password}
align="left"
regex={(val) => onInput.englishAndNumberWithoutSpace(val)}
/>
</div>
<div
className={`w-full flex lg:flex-row flex-col gap-5 lg:my-2 lg:items-center`}
>
<Select
options={provinceList}
name="provinceId"
label={window.t("استان")}
selectedOptions={formData?.provinceId}
onChange={(name, value) => {
setFormData({ ...formData, cityId: null, [name]: value });
getCity({
provinceId: provinceList.find(
(province) => province.name === value
)?.id,
});
}}
/>
<Select
options={cityList}
name="cityId"
label={window.t("شهرستان")}
selectedOptions={formData?.cityId}
onChange={(name, value) =>
setFormData({ ...formData, [name]: value })
}
/>
</div>
<div
className={`w-full flex lg:flex-row flex-col gap-5 lg:my-2 lg:items-center`}
>
<Input
name="postalCode"
label={window.t("کد پستی")}
align="left"
onChange={(name, value) =>
setFormData({ ...formData, [name]: value })
}
maxLength={10}
inputMode="numeric"
value={formData?.postalCode}
regex={(val) => onInput.numberOnly(val)}
/>
<div className="w-full"></div> <div className="w-full"></div>
</div> </div>
<button <button
className="w-full bg-blueC0 py-3 text-tiny text-white rounded-sm" className="w-full bg-blueC0 py-4 text-tiny text-white rounded-sm"
onClick={() => onSubmit()} onClick={() => onSubmit()}
> >
{window.t("ذخیره")} {window.t("ذخیره")}

Loading…
Cancel
Save