validate email & phone

src/modules/10_registry/01_Information/01_Information.vue

@@ -3,7 +3,6 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
 import { useQuasar, type QTableColumn, type QTableProps } from "quasar";
 import { ref, reactive, onMounted, computed } from "vue";
-import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -13,9 +12,7 @@ import type { InformationData } from "@/interface/Main";
 
 const link = ref<string>("");
 const $q = useQuasar();
-const store = useRegistryInFormationStore();
 const dataStore = useDataStore();
-const officerLink = computed(() => dataStore.officerLink);
 const mixin = useCounterMixin();
 const {
   showLoader,
@@ -30,6 +27,8 @@ const editPhone = ref<boolean>(false);
 const editEmail = ref<boolean>(false);
 const rowsHistory = ref<any[]>([]);
 const modalHistory = ref<boolean>(false);
+const phone = ref<string>("");
+const email = ref<string>("");
 
 /** ตัวแปรข้อมูล */
 const formDataInformation = reactive<InformationData>({
@@ -265,6 +264,9 @@ async function getData() {
       formDataInformation.phone = data.phone;
       formDataInformation.email = data.email ? data.email.split("@")[0] : "";
 
+      email.value = data.email ? data.email.split("@")[0] : "";
+      phone.value = data.phone;
+
       emailVerify.value = data.statusEmail;
       hideLoader();
     })
@@ -297,60 +299,70 @@ function getHistory() {
     });
 }
 
-function onUndo(type: string) {
-  if (type == "phone") {
-    editPhone.value = false;
-  } else {
-    editEmail.value = false;
-  }
-}
-
-function onSubmitEdit(type: string) {
-  dialogConfirm(
-    $q,
-    () => {
-      if (type == "phone") {
-        onSavePhone();
-      } else {
-        onSaveEmail();
-      }
-    },
-    `ยืนยันการบันทึก${type == "phone" ? "(เบอร์โทร)" : "(Email)"}`
-  );
-}
+const isValidPhone = ref<boolean>(true); // validate เบอร์โทร
+const isValidEmail = ref<boolean>(true); // validate อีเมล
 
 /** บันทึกเบอร์โทร */
 async function onSavePhone() {
-  await http
-    .put(config.API.upDateNumberByType(link.value), {
-      phone: formDataInformation.phone,
-    })
-    .then(async (res) => {
-      await getData();
-      editPhone.value = false;
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {});
+  if (!formDataInformation.phone || formDataInformation.phone.length != 10) {
+    isValidPhone.value = false;
+    return;
+  } else {
+    isValidPhone.value = true;
+
+    dialogConfirm(
+      $q,
+      async () => {
+        showLoader();
+        await http
+          .put(config.API.upDateNumberByType(link.value), {
+            phone: formDataInformation.phone,
+          })
+          .then(async (res) => {
+            editPhone.value = false;
+            success($q, "บันทึกข้อมูลสำเร็จ");
+            hideLoader();
+          })
+          .catch((e) => {
+            messageError($q, e);
+          })
+          .finally(() => {
+            getData();
+          });
+      },
+      "ยืนยันการแก้ไขเบอร์โทร"
+    );
+  }
 }
 
 /** บันทึก email */
 async function onSaveEmail() {
-  await http
-    .put(config.API.updateEmailByType(link.value), {
-      email: formDataInformation.email + `@bangkok.go.th`,
-    })
-    .then(async (res) => {
-      await getData();
-      editEmail.value = false;
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {});
+  if (!formDataInformation.email) {
+    isValidEmail.value = false;
+    return;
+  } else {
+    isValidEmail.value = true;
+
+    dialogConfirm(
+      $q,
+      async () => {
+        await http
+          .put(config.API.updateEmailByType(link.value), {
+            email: formDataInformation.email + `@bangkok.go.th`,
+          })
+          .then(async (res) => {
+            await getData();
+            editEmail.value = false;
+            success($q, "บันทึกข้อมูลสำเร็จ");
+          })
+          .catch((e) => {
+            messageError($q, e);
+          })
+          .finally(() => {});
+      },
+      "ยืนยันการแก้ไขอีเมล"
+    );
+  }
 }
 
 onMounted(async () => {
@@ -497,8 +509,11 @@ onMounted(async () => {
                     :readonly="!editPhone"
                     mask="##########"
                     :class="editPhone ? 'inputgreen' : ''"
-                  >
-                  </q-input>
+                    hide-bottom-space
+                    error-message="กรุณากรอกเบอร์โทร"
+                    :error="!isValidPhone"
+                    @change="() => (isValidPhone = true)"
+                  />
                 </div>
 
                 <div v-if="editPhone == false" class="self-center col-3">
@@ -520,7 +535,7 @@ onMounted(async () => {
                     round
                     icon="save"
                     color="primary"
-                    @click="onSubmitEdit('phone')"
+                    @click="onSavePhone"
                   >
                     <q-tooltip>บันทึก</q-tooltip>
                   </q-btn>
@@ -530,7 +545,13 @@ onMounted(async () => {
                     round
                     icon="undo"
                     color="red"
-                    @click="onUndo('phone')"
+                    @click="
+                      () => {
+                        editPhone = false;
+                        formDataInformation.phone = phone;
+                        isValidPhone = true;
+                      }
+                    "
                   >
                     <q-tooltip>ยกเลิก</q-tooltip>
                   </q-btn>
@@ -551,8 +572,11 @@ onMounted(async () => {
                     type="email"
                     suffix="@bangkok.go.th"
                     :class="editEmail ? 'inputgreen' : ''"
-                  >
-                  </q-input>
+                    hide-bottom-space
+                    error-message="กรุณากรอกอีเมล"
+                    :error="!isValidEmail"
+                    @change="isValidEmail = true"
+                  />
                 </div>
                 <div v-if="emailVerify == null" class="self-center col-3">
                   <div v-if="editEmail == false">
@@ -574,7 +598,7 @@ onMounted(async () => {
                       round
                       icon="save"
                       color="primary"
-                      @click="onSubmitEdit('email')"
+                      @click="onSaveEmail"
                     >
                       <q-tooltip>บันทึก</q-tooltip>
                     </q-btn>
@@ -584,7 +608,13 @@ onMounted(async () => {
                       round
                       icon="undo"
                       color="red"
-                      @click="onUndo('email')"
+                      @click="
+                        () => {
+                          editEmail = false;
+                          formDataInformation.email = email;
+                          isValidEmail = true;
+                        }
+                      "
                     >
                       <q-tooltip>ยกเลิก</q-tooltip>
                     </q-btn>