update 5 files

2 years ago · 82d7aec1df
parent 0e6c073a99
commit 82d7aec1df
5 changed files with 239 additions and 270 deletions
--- a/src/components/Input/index.js
+++ b/src/components/Input/index.js
@ -19,11 +19,11 @@ export default function Input(props) {

  return (
    <div
-      className="input flex flex-col relative my-2 dark:bg-opacity-10 w-full"
+      className="input flex flex-col relative dark:bg-opacity-10 w-full"
      style={{ width }}
    >
      <label
-        className={`absolute right-2 transform bg-white -translate-y-1/2 dark:text-white  px-2 text-xs transition-all duration-300 pointer-events-none ${value || focusToggle ? "top-0 text-xs" : "top-1/2 text-sm"} ${focusToggle ? "text-blueC0" : "text-gray1"}`}
+        className={`absolute right-2 transform bg-white -translate-y-1/2 dark:text-white  px-2 text-xs transition-all duration-300 pointer-events-none ${value || focusToggle ? "top-0 lg:text-xs text-sm" : "top-1/2 text-tiny lg:text-sm"} ${focusToggle ? "text-blueC0" : "text-gray1"}`}
      >
        {label}
      </label>
--- a/src/components/Select/index.js
+++ b/src/components/Select/index.js
@ -10,7 +10,7 @@ function Select({
  onChange,
  name,
  defaultValue,
-  width = "w-1/2",
+  width = "w-full",
  selectProvince,
 }) {
  return (
--- a/src/components/Textarea/index.js
+++ b/src/components/Textarea/index.js
@ -7,7 +7,7 @@ export default function Textarea({ placeholder, onChange, value, name }) {
      <textarea
        className={_.join(
          [
-            "my-2 border border-gray-300 rounded-md text-xs lg:text-sm py-6 px-3 outline-none focus:border-greenB9",
+            "border w-full border-gray-300 rounded-md text-xs lg:text-sm py-6 px-3 outline-none focus:border-greenB9",
            // backgroundColor,
          ],
          " "
--- a/src/router.js
+++ b/src/router.js
@ -34,6 +34,7 @@ import Dialog from "./components/Dialog";
 import Address from "./views/Address";
 import Favorites from "./views/Favorites";
 import Addresses from "./views/Dashboard/layouts/Mobile/ProfileAddress";
+import Profile from "./views/Auth/Profile"

 function Router({
  isDark,
@ -567,6 +568,24 @@ function Router({
                />
              }
            />
+            <Route
+              path="/profile"
+              exact
+              element={
+                <Profile
+                  headerOptions={{
+                    logo: false,
+                    hamburgerMenu: false,
+                    qr: false,
+                    title: false,
+                    back: true,
+                    shown: true,
+                    menu: false,
+                    // bookmark: "contentId",
+                  }}
+                />
+              }
+            />
            <Route
              path="*"
              exact
--- a/src/views/Auth/Profile/index.js
+++ b/src/views/Auth/Profile/index.js
@ -29,6 +29,7 @@ function Profile({
  provinceList,
  cityList,
  setHeaderOptions,
+  headerOptions,
  loading,
 }) {
  let navigate = useNavigate();
@ -69,18 +70,7 @@ function Profile({
  }, [user]);

  useEffect(() => {
-    if (!isMobile) {
-      setHeaderOptions({
-        logo: true,
-        hamburgerMenu: true,
-        qr: true,
-        title: false,
-        back: false,
-        shown: true,
-        menu: false,
-      });
-    }
-
+    setHeaderOptions(headerOptions);
    getProvince();
    getCity({ provinceId: profile.provinceId });
  }, []);
@ -216,33 +206,23 @@ function Profile({
  // if (setDone) return <Navigate path="/" />;

  return isMobile ? (
-    <div className="profile main d-flex justify-content-center">
-      <main>
-        <header className="d-flex align-items-center justify-content-between">
-          <div>
-            <h1>{window.t("حساب کاربری")}</h1>
-            <p>{window.t("لطفا مشخصات خود را به صورت کامل نمایید.")}</p>
-          </div>
-          <div className="mobile justify-content-center">
-            <Upload
-              name="file"
-              value={formData?.file}
-              onChange={onChange}
-              label={window.t("فایل")}
-            />
-          </div>
+    <div className="flex flex-col gap-6 lg:hidden px-4 pb-20">
+      <header className="flex flex-col gap-2 w-full">
+        <h1 className="text-base text-gray1">{window.t("حساب کاربری")}</h1>
+        <p className="text-sm text-gray1">
+          {window.t("لطفا مشخصات خود را به صورت کامل نمایید.")}
+        </p>
      </header>
-        <div className="profile__box d-flex" onSubmit={(e) => onSubmit()}>
-          <div className="profile__box--section">
-            <div className="mb-2 desktop justify-content-center">
+      <form
+        className="flex flex-col items-center w-full gap-4"
+        onSubmit={(e) => e.preventDefault()}
+      >
        <Upload
          name="file"
          value={formData?.file}
          onChange={onChange}
          label={window.t("فایل")}
        />
-            </div>
-            <div className="mb-2">
        <Input
          name="firstName"
          label={window.t("نام")}
@ -254,8 +234,6 @@ function Profile({
          }
          regex={(val) => val}
        />
-            </div>
-            <div className="mb-2">
        <Input
          name="lastName"
          label={window.t("نام نام خانوادگی")}
@ -267,8 +245,6 @@ function Profile({
          onInput={onInput.persianOnly}
          regex={(val) => val}
        />
-            </div>
-            <div className="mb-2">
        <Input
          name="username"
          label={window.t("نام کاربری")}
@ -279,8 +255,6 @@ function Profile({
          align="left"
          regex={(val) => onInput.englishAndNumberWithoutSpace(val)}
        />
-            </div>
-            <div className="mb-2">
        <Gender
          options={[window.t("دختر"), window.t("پسر")]}
          name="gender"
@ -288,10 +262,8 @@ function Profile({
          onChange={(name, value) =>
            setFormData({ ...formData, [name]: value })
          }
-                label=""
+          label="جنسیت"
        />
-            </div>
-            <div className="mb-2">
        <Input
          name="nationalId"
          label={window.t("کد ملی/اتباع")}
@ -303,8 +275,6 @@ function Profile({
          }
          regex={(val) => onInput.numberOnly(val)}
        />
-            </div>
-            <div className="mb-2">
        <Birthdate
          name="birthDate"
          onChange={(name, value) =>
@ -312,8 +282,6 @@ function Profile({
          }
          value={formData?.birthDate}
        />
-            </div>
-            <div className="mb-2">
        <Input
          name="password"
          label={window.t("رمز عبور")}
@ -324,10 +292,6 @@ function Profile({
          align="left"
          regex={(val) => onInput.englishAndNumberWithoutSpace(val)}
        />
-            </div>
-          </div>
-          <div className="profile__box--section">
-            <div className="mb-2" style={{ minWidth: "100%" }}>
        <Gender
          options={[window.t("معلم"), window.t("دانش آموز")]}
          name="status"
@ -335,9 +299,7 @@ function Profile({
          selectedOption={formData?.status}
          onChange={onChange}
        />
-            </div>
        {formData?.status === 1 ? (
-              <div className="mb-2">
          <Select
            options={grades}
            name="gradeIds"
@ -347,10 +309,8 @@ function Profile({
              setFormData({ ...formData, [name]: value })
            }
          />
-              </div>
        ) : null}
        {formData?.status === 2 ? (
-              <div className="mb-2">
          <MultipleSelector
            options={grades}
            name="gradeIds"
@ -362,12 +322,10 @@ function Profile({
            align="right"
            defaultValue={profile}
          />
-              </div>
        ) : null}

        {formData?.status === window.t("دانش آموز") &&
        formData?.gradeIds > 9 ? (
-              <div className="mb-2">
          <Select
            options={[
              window.t("ریاضی"),
@ -384,9 +342,7 @@ function Profile({
              setFormData({ ...formData, [name]: value })
            }
          />
-              </div>
        ) : null}
-            <div className="mb-2" style={{ minWidth: "100%" }}>
        <Select
          options={provinceList}
          name="provinceId"
@ -396,8 +352,6 @@ function Profile({
            setFormData({ ...formData, [name]: value })
          }
        />
-            </div>
-            <div className="mb-2">
        <Select
          options={cityList}
          name="cityId"
@ -407,9 +361,7 @@ function Profile({
            setFormData({ ...formData, [name]: value })
          }
        />
-            </div>
        {formData?.status == 1 ? (
-              <div className="mb-2">
          <Input
            name="schools"
            label={window.t("نام مدرسه")}
@ -419,10 +371,8 @@ function Profile({
              setFormData({ ...formData, [name]: value })
            }
          />
-              </div>
        ) : null}
        {formData?.status == 2 ? (
-              <div className="mb-2">
          <Input
            name="schools"
            label={window.t("محل تدریس")}
@ -430,7 +380,6 @@ function Profile({
            regex={(val) => onInput.persianOnly(val)}
            onChange={onChange}
          />
-              </div>
        ) : null}
        {formData?.status == 2 ? (
          <Document
@ -441,7 +390,6 @@ function Profile({
            name="docFileIds"
          />
        ) : null}
-            <div className="mb-2">
        <Input
          name="postalCode"
          placeholder={window.t("کد پستی")}
@ -452,8 +400,6 @@ function Profile({
          value={formData?.postalCode}
          regex={(val) => onInput.numberOnly(val)}
        />
-            </div>
-            <div className="mb-2">
        <TextArea
          placeholder={window.t("آدرس محل سکونت")}
          name="address"
@ -462,13 +408,13 @@ function Profile({
            setFormData({ ...formData, [name]: value })
          }
        />
-            </div>
-            <div className="profile__box--form__footer d-flex justify-content-center">
-              <button onClick={() => onSubmit()}>{window.t("ذخیره")}</button>
-            </div>
-          </div>
-        </div>
-      </main>
+        <button
+          className="w-full bg-blueC0 py-3 text-base text-white rounded-sm"
+          onClick={() => onSubmit()}
+        >
+          {window.t("ذخیره")}
+        </button>
+      </form>
    </div>
  ) : (
    <div
@ -504,7 +450,6 @@ function Profile({
            setFormData({ ...formData, [name]: value })
          }
          regex={(val) => val}
-          padding="py-4"
          value={formData?.lastName}
        />
      </div>
@ -569,7 +514,12 @@ function Profile({
        />
        <div className="w-full"></div>
      </div>
-      <button className="w-full bg-blueC0 py-3 text-tiny text-white rounded-sm" onClick={() => onSubmit()}>{window.t("ذخیره")}</button>
+      <button
+        className="w-full bg-blueC0 py-3 text-tiny text-white rounded-sm"
+        onClick={() => onSubmit()}
+      >
+        {window.t("ذخیره")}
+      </button>
    </div>
  );
 }