ปรับ UI mobile

2024-05-17 20:16:57 +07:00
parent c11f53f288
commit ba0ed54e12
8 changed files with 184 additions and 48 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
        "thai-id-validator": "^1.1.3",
        "vue": "^3.2.13",
        "vue-router": "^4.3.0",
+        "vue-sweetalert2": "^5.0.10",
        "vuetify": "^3.0.0-beta.0",
        "vuex": "^4.0.0",
        "webfontloader": "^1.0.0"
@@ -12995,6 +12996,14 @@
        "node": ">= 10"
      }
    },
+    "node_modules/sweetalert2": {
+      "version": "11.4.4",
+      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.4.4.tgz",
+      "integrity": "sha512-9yYWQuRT1v9JNI/paPTSYV+68MHwe9C+HQ/I2jtfaFzoJgYRftWXOs4JqmDSjT7m2m4r8ebMMn8LcxD1Wq9B/w==",
+      "funding": {
+        "url": "https://sweetalert2.github.io/#donations"
+      }
+    },
    "node_modules/symbol-tree": {
      "version": "3.2.4",
      "resolved": "https://registry.npmmirror.com/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -13817,6 +13826,17 @@
      "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
      "dev": true
    },
+    "node_modules/vue-sweetalert2": {
+      "version": "5.0.10",
+      "resolved": "https://registry.npmjs.org/vue-sweetalert2/-/vue-sweetalert2-5.0.10.tgz",
+      "integrity": "sha512-6T8z69YM8z5WYRDwKyPgBBB+1Rk7KZ56xrabyEJ3UPrGtdDaZ1UYoDwITiWLgVSYeCESiVByR4mGvn/YovphCQ==",
+      "dependencies": {
+        "sweetalert2": "11.4.4"
+      },
+      "peerDependencies": {
+        "vue": "*"
+      }
+    },
    "node_modules/vue-template-es2015-compiler": {
      "version": "1.9.1",
      "resolved": "https://registry.npmmirror.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
@@ -24924,6 +24944,11 @@
        }
      }
    },
+    "sweetalert2": {
+      "version": "11.4.4",
+      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.4.4.tgz",
+      "integrity": "sha512-9yYWQuRT1v9JNI/paPTSYV+68MHwe9C+HQ/I2jtfaFzoJgYRftWXOs4JqmDSjT7m2m4r8ebMMn8LcxD1Wq9B/w=="
+    },
    "symbol-tree": {
      "version": "3.2.4",
      "resolved": "https://registry.npmmirror.com/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -25565,6 +25590,14 @@
        }
      }
    },
+    "vue-sweetalert2": {
+      "version": "5.0.10",
+      "resolved": "https://registry.npmjs.org/vue-sweetalert2/-/vue-sweetalert2-5.0.10.tgz",
+      "integrity": "sha512-6T8z69YM8z5WYRDwKyPgBBB+1Rk7KZ56xrabyEJ3UPrGtdDaZ1UYoDwITiWLgVSYeCESiVByR4mGvn/YovphCQ==",
+      "requires": {
+        "sweetalert2": "11.4.4"
+      }
+    },
    "vue-template-es2015-compiler": {
      "version": "1.9.1",
      "resolved": "https://registry.npmmirror.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
    "thai-id-validator": "^1.1.3",
    "vue": "^3.2.13",
    "vue-router": "^4.3.0",
+    "vue-sweetalert2": "^5.0.10",
    "vuetify": "^3.0.0-beta.0",
    "vuex": "^4.0.0",
    "webfontloader": "^1.0.0"
--- a/src/components/HeaderHome.vue
+++ b/src/components/HeaderHome.vue
@@ -9,9 +9,14 @@
              src="../assets/logo-title.png"
              width="600"
              @click="$router.push('/')"
+              class="logo-home"
            ></v-img>
          </v-col>
-          <v-col align-self="center" align="center">
+          <v-col align-self="center" align="center" v-if="
+                getUsername == '' ||
+                getUsername == null ||
+                getUsername == undefined
+              ">
            <div style="width: 90%">
              สว. ระบบใหม่ <b>“แบ่งกลุ่มอาชีพ”</b> และ
              <b>“เลือกกันเอง”</b>
@@ -201,6 +206,13 @@ export default {
  padding: 7px 10px;
 }
@media only screen and (min-width: 0px) and (max-width: 700px) {
+  #app > div > div > main > div:nth-child(2) > div > div:nth-child(1) > div.text-normal.mb-5 > div > div > div.v-col-sm-12.v-col-md.v-col-auto > div{
+    height: 171px !important;
+  }
+  .logo-home{
+    height: 300px !important;
+    width: auto;
+  }
  .bg-curve {
    height: 450px;
    position: relative;
--- a/src/components/edit/FormSteperEdit.vue
+++ b/src/components/edit/FormSteperEdit.vue
@@ -52,7 +52,7 @@
                    <div class="text-medium-emphasis" style="font-size: 15px">
                      กรอกเลขบัตรประชาชน 13 หลัก เช่น 1234567890123
                      <span class="text-red-accent-4 ml-2">
-                        * ใช้เป็น username
+                        * ชื่อผู้ใช้งาน (username)
                      </span>
                    </div>
                    <v-text-field
@@ -67,7 +67,7 @@
                    <div class="text-medium-emphasis" style="font-size: 15px">
                      กรอกโทรศัพท์ 10 หลัก เช่น 0812345678
                      <span class="text-red-accent-4 ml-2">
-                        * ใช้เป็น password
+                        * รหัสผ่าน (password)
                      </span>
                    </div>
                    <v-text-field
@@ -169,7 +169,7 @@
                    variant="tonal"
                    class="float-right"
                    size="large"
-                    >ถัดไป</v-btn
+                    >ถัดไป <v-icon size="28">mdi-chevron-right</v-icon></v-btn
                  >
                </div>

@@ -283,7 +283,7 @@
                    class="float-left"
                    size="large"
                    variant="tonal"
-                    >ก่อนหน้า</v-btn
+                    > <v-icon size="28">mdi-chevron-left</v-icon> ก่อนหน้า</v-btn
                  >
                  <!-- <v-spacer></v-spacer> -->

@@ -297,7 +297,7 @@
                    size="large"
                    variant="tonal"
                    class="float-right"
-                    >ถัดไป</v-btn
+                    >ถัดไป <v-icon size="28">mdi-chevron-right</v-icon></v-btn
                  >
                </div>
                <!-- <v-stepper-actions
@@ -408,7 +408,7 @@
                        variant="tonal"
                        size="large"
                        class="float-left"
-                        >ก่อนหน้า</v-btn
+                        > <v-icon size="28">mdi-chevron-left</v-icon> ก่อนหน้า</v-btn
                      >
                      <!-- <v-spacer></v-spacer> -->

@@ -418,7 +418,7 @@
                        variant="tonal"
                        class="float-right"
                        size="large"
-                        >ถัดไป</v-btn
+                        >ถัดไป <v-icon size="28">mdi-chevron-right</v-icon></v-btn
                      >
                    </div>
                    <!-- {{ checkOpt1 }} -->
@@ -561,7 +561,7 @@
                      class="float-left"
                      size="large"
                      variant="tonal"
-                      >ก่อนหน้า</v-btn
+                      > <v-icon size="28">mdi-chevron-left</v-icon> ก่อนหน้า</v-btn
                    >
                  </div>
                </v-card>
@@ -585,7 +585,7 @@ import { mapGetters } from "vuex";

 // client.info.getAllGroups.query({}).then(console.log);
 export default {
-  components: { },
+  components: {},
  watch: {
    image(val) {
      console.log(val);
@@ -952,8 +952,16 @@ export default {
        this.$store.commit("setUsername", data.firstName);
        this.$store.commit("setImg", data.image);
        this.load = false;
-        alert("บันทึกข้อมูลสำเร็จ");
-        this.$router.push("/");
+        this.$swal
+          .fire({
+            title: "บันทึกข้อมูลสำเร็จ",
+            icon: "success",
+            timer: 3000,
+            showConfirmButton: false,
+          })
+          .then(() => {
+            this.$router.push("/");
+          });
      });
    },

@@ -971,17 +979,17 @@ export default {
        method: "POST",
        body: formData,
      }).then(() => {
-        client.user.confirmChangeImage.mutate().then(() => {
-          this.getUserAfterEdit();
-        }).catch((error) => {
-
-          console.log('error.message',error.message);
-          alert(
-              "บันทึกรูปภาพไม่สำเร็จ!"
-            );
-          this.getUserAfterEdit();
-          // alert("ไม่สามารถบันทึกข้อมูลจุดยืนได้: " + error.message);
-          
+        client.user.confirmChangeImage
+          .mutate()
+          .then(() => {
+            this.getUserAfterEdit();
+          })
+          .catch((error) => {
+            this.load = false;
+            console.log("error.message", error.message);
+            alert("บันทึกรูปภาพไม่สำเร็จ!");
+            this.getUserAfterEdit();
+            // alert("ไม่สามารถบันทึกข้อมูลจุดยืนได้: " + error.message);
          });
        // alert("บันทึกข้อมูลสำเร็จ");
      });
@@ -1037,7 +1045,21 @@ export default {
          // }
        })
        .catch((error) => {
-          alert("ไม่สามารถบันทึกข้อมูลได้: " + error.message);
+          this.load = false;
+          console.log("eeee" +  error.message);
+          if ( error.message == "Unable to create new user") {
+            this.$swal.fire({
+              title: "บันทึกข้อมูลไม่สำเร็จสำเร็จ",
+              text: "บัญชีผู้ใช้งานซ้ำ",
+              icon: "error",
+            });
+          } else {
+            this.$swal.fire({
+              title: "บันทึกข้อมูลไม่สำเร็จสำเร็จ",
+              text: error.message,
+              icon: "error",
+            });
+          }
          console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
        });
    },
@@ -1051,7 +1073,21 @@ export default {
          this.$router.push("/");
        })
        .catch((error) => {
-          alert("ไม่สามารถบันทึกข้อมูลได้: " + error.message);
+          this.load = false;
+          console.log("eeee" +  error.message);
+          if ( error.message == "Unable to create new user") {
+            this.$swal.fire({
+              title: "บันทึกข้อมูลไม่สำเร็จสำเร็จ",
+              text: "บัญชีผู้ใช้งานซ้ำ",
+              icon: "error",
+            });
+          } else {
+            this.$swal.fire({
+              title: "บันทึกข้อมูลไม่สำเร็จสำเร็จ",
+              text: error.message,
+              icon: "error",
+            });
+          }
          console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
        });
    },
@@ -1068,7 +1104,21 @@ export default {
          this.$store.commit("setImg", data.image);
        })
        .catch((error) => {
-          alert("ไม่สามารถโหลดข้อมูลได้");
+          this.load = false;
+          console.log("eeee" +  error.message);
+          if ( error.message == "Unable to create new user") {
+            this.$swal.fire({
+              title: "บันทึกข้อมูลไม่สำเร็จสำเร็จ",
+              text: "บัญชีผู้ใช้งานซ้ำ",
+              icon: "error",
+            });
+          } else {
+            this.$swal.fire({
+              title: "บันทึกข้อมูลไม่สำเร็จสำเร็จ",
+              text: error.message,
+              icon: "error",
+            });
+          }
          console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
        });
    },
--- a/src/components/form/FormSteper.vue
+++ b/src/components/form/FormSteper.vue
@@ -53,7 +53,7 @@
                    <div class="text-medium-emphasis" style="font-size: 15px">
                      กรอกเลขบัตรประชาชน 13 หลัก เช่น 1234567890123
                      <span class="ml-2 text-red-accent-4">
-                        * ใช้เป็น username
+                        * ชื่อผู้ใช้งาน (username)
                      </span>
                    </div>
                    <v-text-field
@@ -69,7 +69,7 @@
                    <div class="text-medium-emphasis" style="font-size: 15px">
                      กรอกโทรศัพท์ 10 หลัก เช่น 0812345678
                      <span class="text-red-accent-4 ml-2">
-                        * ใช้เป็น password
+                        * รหัสผ่าน (password)
                      </span>
                    </div>
                    <v-text-field
@@ -169,7 +169,7 @@
                    variant="tonal"
                    class="float-right"
                    size="large"
-                    >ถัดไป</v-btn
+                    >ถัดไป <v-icon size="28">mdi-chevron-right</v-icon></v-btn
                  >
                </div>
                <!-- <v-stepper-actions
@@ -281,7 +281,7 @@
                    variant="tonal"
                    class="float-left"
                    size="large"
-                    >ก่อนหน้า</v-btn
+                    > <v-icon size="28">mdi-chevron-left</v-icon> ก่อนหน้า</v-btn
                  >

                  <v-btn
@@ -294,7 +294,7 @@
                    variant="tonal"
                    class="float-right"
                    size="large"
-                    >ถัดไป</v-btn
+                    >ถัดไป <v-icon size="28">mdi-chevron-right</v-icon></v-btn
                  >
                </div>
                <!-- <v-stepper-actions
@@ -386,7 +386,7 @@
                        class="float-left"
                        size="large"
                        variant="tonal"
-                        >ก่อนหน้า</v-btn
+                        > <v-icon size="28">mdi-chevron-left</v-icon> ก่อนหน้า</v-btn
                      >
                      <!-- <v-spacer></v-spacer> -->

@@ -396,7 +396,7 @@
                        variant="tonal"
                        class="float-right"
                        size="large"
-                        >ถัดไป</v-btn
+                        >ถัดไป <v-icon size="28">mdi-chevron-right</v-icon></v-btn
                      >
                    </div>
                    <!-- {{ checkOpt1 }} -->
@@ -541,7 +541,7 @@
                      class="float-left"
                      size="large"
                      variant="tonal"
-                      >ก่อนหน้า</v-btn
+                      > <v-icon size="28">mdi-chevron-left</v-icon> ก่อนหน้า</v-btn
                    >
                  </div>
                </v-card>
@@ -955,15 +955,26 @@ export default {
          if (this.file) {
            this.uploadImage();
          } else {
-            alert(
-              "บันทึกรูปภาพไม่สำเร็จ!"
-            );
+            alert("บันทึกรูปภาพไม่สำเร็จ!");
            this.getUser();
-           
          }
        })
        .catch((error) => {
-          alert("ไม่สามารถบันทึกข้อมูลได้: " + error.message);
+          this.load = false;
+          console.log("eeee" +  error.message);
+          if ( error.message == "Unable to create new user") {
+            this.$swal.fire({
+              title: "บันทึกข้อมูลไม่สำเร็จสำเร็จ",
+              text: "บัญชีผู้ใช้งานซ้ำ",
+              icon: "error",
+            });
+          } else {
+            this.$swal.fire({
+              title: "บันทึกข้อมูลไม่สำเร็จสำเร็จ",
+              text: error.message,
+              icon: "error",
+            });
+          }
          console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
        });
    },
@@ -974,10 +985,33 @@ export default {
          this.load = false;
          this.$store.commit("setCheckLogin", false);
          localStorage.setItem("token", data.token);
-          this.$router.push("/");
+          this.$swal
+            .fire({
+              title: "บันทึกข้อมูลสำเร็จ",
+              icon: "success",
+              timer: 3000,
+              showConfirmButton: false,
+            })
+            .then(() => {
+              this.$router.push("/");
+            });
        })
        .catch((error) => {
-          alert("ไม่สามารถบันทึกข้อมูลได้: " + error.message);
+          this.load = false;
+          console.log("eeee" +  error.message);
+          if ( error.message == "Unable to create new user") {
+            this.$swal.fire({
+              title: "บันทึกข้อมูลไม่สำเร็จสำเร็จ",
+              text: "บัญชีผู้ใช้งานซ้ำ",
+              icon: "error",
+            });
+          } else {
+            this.$swal.fire({
+              title: "บันทึกข้อมูลไม่สำเร็จสำเร็จ",
+              text: error,
+              icon: "error",
+            });
+          }
          console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
        });
    },
@@ -990,9 +1024,10 @@ export default {
          localStorage.setItem("img", data.image);
          this.$store.commit("setUsername", data.firstName);
          this.$store.commit("setImg", data.image);
-          alert(
-            "บันทึกข้อมูลสำเร็จ\n สามารถ login ด้วย username : เลขบัตรประชาชน / password : เบอร์โทรศัพท์"
-          );
+
+          // alert(
+          //   "บันทึกข้อมูลสำเร็จ\n สามารถ login ด้วย username : เลขบัตรประชาชน / password : เบอร์โทรศัพท์"
+          // );

          this.login({ cid: data.cid, phone: data.phone });
        })
--- a/src/config.js
+++ b/src/config.js
@@ -1,3 +1,4 @@
 export const CONFIG = {
+  //  api_url: "http://178.128.18.156:3000",
  api_url: process.env.VUE_APP_API_URL || "http://localhost:3000",
 };
--- a/src/main.js
+++ b/src/main.js
@@ -4,6 +4,10 @@ import store from "./store";
 import vuetify from "./plugins/vuetify";
 import { loadFonts } from "./plugins/webfontloader";
 import router from './router' 
+
+import VueSweetalert2 from 'vue-sweetalert2';
+import 'sweetalert2/dist/sweetalert2.min.css';
+
 loadFonts();

-createApp(App).use(store).use(vuetify).use(router).mount("#app");
+createApp(App).use(store).use(vuetify).use(VueSweetalert2).use(router).mount("#app");
--- a/src/views/RegisterForm.vue
+++ b/src/views/RegisterForm.vue
@@ -3,14 +3,14 @@
    <FormMain v-if="
        getUsername == '' || getUsername == null || getUsername == undefined
      "/>
-      <div
+      <!-- <div
      v-if="
-        getUsername"
+        getUsername&&getCheckLogin"
      class="text-sub text-center py-10"
    >
      <v-icon icon="mdi-alert-circle-outline" size="35" color="red"></v-icon>
      ไม่สามารถเข้าถึงได้ คุณลงทะเบียนแสดงตัวตนแล้ว 
-    </div>
+    </div> -->
  </div>
 </template>
 <script>