ข้อมูลบุคคล: ปรับสไตล์/validate/ใส่catch

src/modules/01_metadataNew/components/personal/01ListPrefix.vue

@@ -57,7 +57,7 @@ const TABLE_COLUMNS = [
 const $q = useQuasar();
 const store = usePersonalDataStore();
 const mixin = useCounterMixin();
-const { dialogRemove, messageError, showLoader, hideLoader } = mixin;
+const { dialogRemove, messageError, showLoader, hideLoader, success } = mixin;
 
 const filterKeyword = ref<string>("");
 const dialog = ref<boolean>(false);
@@ -72,36 +72,11 @@ const visibleColumns = ref<string[]>([
   "lastUpdateFullName",
 ]);
 
-const data = [
-  {
-    id: "1",
-    name: "ว่าที่ร้อยตรี",
-    createdAt: new Date(),
-    lastUpdatedAt: new Date(),
-    lastUpdateFullName: "สาวิตรี ศรีสมัย",
-  },
-  {
-    id: "2",
-    name: "นางสาว",
-    createdAt: new Date(),
-    lastUpdatedAt: new Date(),
-    lastUpdateFullName: "System Administrator",
-  },
-  {
-    id: "3",
-    name: "นาย",
-    createdAt: new Date(),
-    lastUpdatedAt: new Date(),
-    lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
-  },
-];
-
 async function fetchData() {
   showLoader();
   await http
     .get(config.API.orgPrefix)
     .then(async (res) => {
-      console.log(res.data.result);
       store.save(res.data.result);
     })
     .catch((err) => {
@@ -113,22 +88,51 @@ async function fetchData() {
 }
 
 async function addData() {
-  await http.post(config.API.orgPrefix, {
+  await http
-    name: prefix.value,
+    .post(config.API.orgPrefix, {
-  });
+      name: prefix.value,
-  fetchData();
+    })
+    .then(() => {
+      fetchData();
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 async function editData(id: string) {
-  await http.put(config.API.orgPrefixId(id), {
+  await http
-    name: prefix.value,
+    .put(config.API.orgPrefixId(id), {
-  });
+      name: prefix.value,
-  fetchData();
+    })
+    .then(() => {
+      fetchData();
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 async function deleteData(id: string) {
-  await http.delete(config.API.orgPrefixId(id));
+  await http
-  fetchData();
+    .delete(config.API.orgPrefixId(id))
+    .then(() => {
+      fetchData();
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 onMounted(async () => {

src/modules/01_metadataNew/components/personal/02ListRank.vue

@@ -59,7 +59,7 @@ const columns = [
 const store = usePersonalDataStore();
 const router = useRouter();
 const mixin = useCounterMixin();
-const { dialogRemove, messageError, showLoader, hideLoader } = mixin;
+const { dialogRemove, messageError, showLoader, hideLoader, success } = mixin;
 
 const $q = useQuasar();
 
@@ -81,7 +81,6 @@ async function fetchData() {
   await http
     .get(config.API.orgRank)
     .then(async (res) => {
-      console.log(res.data.result);
       store.save(res.data.result);
     })
     .catch((err) => {
@@ -93,22 +92,51 @@ async function fetchData() {
 }
 
 async function addData() {
-  await http.post(config.API.orgRank, {
+  await http
-    name: rank.value,
+    .post(config.API.orgRank, {
-  });
+      name: rank.value,
-  fetchData();
+    })
+    .then(() => {
+      fetchData();
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 async function editData(id: string) {
-  await http.put(config.API.orgRankId(id), {
+  await http
-    name: rank.value,
+    .put(config.API.orgRankId(id), {
-  });
+      name: rank.value,
-  fetchData();
+    })
+    .then(() => {
+      fetchData();
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 async function deleteData(id: string) {
-  await http.delete(config.API.orgRankId(id));
+  await http
-  fetchData();
+    .delete(config.API.orgRankId(id))
+    .then(() => {
+      fetchData();
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 onMounted(async () => {

src/modules/01_metadataNew/components/personal/03ListBloodGroup.vue

@@ -13,7 +13,7 @@ import config from "@/app.config";
 const store = usePersonalDataStore();
 const router = useRouter();
 const mixin = useCounterMixin();
-const { dialogRemove, messageError, showLoader, hideLoader } = mixin;
+const { dialogRemove, messageError, showLoader, hideLoader, success } = mixin;
 const columns = [
   {
     name: "bloodGroup",
@@ -81,7 +81,6 @@ async function fetchData() {
   await http
     .get(config.API.orgBloodGroup)
     .then(async (res) => {
-      console.log(res.data.result);
       store.save(res.data.result);
     })
     .catch((err) => {
@@ -93,22 +92,51 @@ async function fetchData() {
 }
 
 async function addData() {
-  await http.post(config.API.orgBloodGroup, {
+  await http
-    name: bloodGroup.value,
+    .post(config.API.orgBloodGroup, {
-  });
+      name: bloodGroup.value,
-  fetchData();
+    })
+    .then(() => {
+      fetchData();
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 async function editData(id: string) {
-  await http.put(config.API.orgBloodGroupId(id), {
+  await http
-    name: bloodGroup.value,
+    .put(config.API.orgBloodGroupId(id), {
-  });
+      name: bloodGroup.value,
-  fetchData();
+    })
+    .then(() => {
+      fetchData();
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 async function deleteData(id: string) {
-  await http.delete(config.API.orgBloodGroupId(id));
+  await http
-  fetchData();
+    .delete(config.API.orgBloodGroupId(id))
+    .then(() => {
+      fetchData();
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 onMounted(async () => {

src/modules/01_metadataNew/components/personal/04ListGender.vue

@@ -13,7 +13,7 @@ import config from "@/app.config";
 const store = usePersonalDataStore();
 const router = useRouter();
 const mixin = useCounterMixin();
-const { dialogRemove, messageError, showLoader, hideLoader } = mixin;
+const { dialogRemove, messageError, showLoader, hideLoader, success } = mixin;
 const columns = [
   {
     name: "gender",
@@ -81,7 +81,6 @@ async function fetchData() {
   await http
     .get(config.API.orgGender)
     .then(async (res) => {
-      console.log(res.data.result);
       store.save(res.data.result);
     })
     .catch((err) => {
@@ -93,22 +92,51 @@ async function fetchData() {
 }
 
 async function addData() {
-  await http.post(config.API.orgGender, {
+  await http
-    name: gender.value,
+    .post(config.API.orgGender, {
-  });
+      name: gender.value,
-  fetchData();
+    })
+    .then(() => {
+      fetchData();
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 async function editData(id: string) {
-  await http.put(config.API.orgGenderId(id), {
+  await http
-    name: gender.value,
+    .put(config.API.orgGenderId(id), {
-  });
+      name: gender.value,
-  fetchData();
+    })
+    .then(() => {
+      fetchData();
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 async function deleteData(id: string) {
-  await http.delete(config.API.orgGenderId(id));
+  await http
-  fetchData();
+    .delete(config.API.orgGenderId(id))
+    .then(() => {
+      fetchData();
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 onMounted(async () => {

src/modules/01_metadataNew/components/personal/05ListReligion.vue

@@ -13,7 +13,7 @@ import config from "@/app.config";
 const store = usePersonalDataStore();
 const router = useRouter();
 const mixin = useCounterMixin();
-const { dialogRemove, messageError, showLoader, hideLoader } = mixin;
+const { dialogRemove, messageError, showLoader, hideLoader, success } = mixin;
 const columns = [
   {
     name: "religion",
@@ -81,7 +81,6 @@ async function fetchData() {
   await http
     .get(config.API.orgReligion)
     .then(async (res) => {
-      console.log(res.data.result);
       store.save(res.data.result);
     })
     .catch((err) => {
@@ -93,22 +92,51 @@ async function fetchData() {
 }
 
 async function addData() {
-  await http.post(config.API.orgReligion, {
+  await http
-    name: religion.value,
+    .post(config.API.orgReligion, {
-  });
+      name: religion.value,
-  fetchData();
+    })
+    .then(() => {
+      fetchData();
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 async function editData(id: string) {
-  await http.put(config.API.orgReligionId(id), {
+  await http
-    name: religion.value,
+    .put(config.API.orgReligionId(id), {
-  });
+      name: religion.value,
-  fetchData();
+    })
+    .then(() => {
+      fetchData();
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 async function deleteData(id: string) {
-  await http.delete(config.API.orgReligionId(id));
+  await http
-  fetchData();
+    .delete(config.API.orgReligionId(id))
+    .then(() => {
+      fetchData();
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 onMounted(async () => {

src/modules/01_metadataNew/components/personal/06ListRelationship.vue

@@ -12,7 +12,7 @@ import config from "@/app.config";
 const store = usePersonalDataStore();
 const router = useRouter();
 const mixin = useCounterMixin();
-const { dialogRemove, messageError, showLoader, hideLoader } = mixin;
+const { dialogRemove, messageError, showLoader, hideLoader, success } = mixin;
 const columns = [
   {
     name: "relationship",
@@ -110,7 +110,6 @@ async function fetchData() {
   await http
     .get(config.API.orgRelationship)
     .then(async (res) => {
-      console.log(res.data.result);
       store.save(res.data.result);
     })
     .catch((err) => {
@@ -122,22 +121,50 @@ async function fetchData() {
 }
 
 async function addData() {
-  await http.post(config.API.orgRelationship, {
+  await http
-    name: relationship.value,
+    .post(config.API.orgRelationship, {
-  });
+      name: relationship.value,
-  fetchData();
+    })
+    .then(() => {
+      fetchData();
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
-
 async function editData(id: string) {
-  await http.put(config.API.orgRelationshipId(id), {
+  await http
-    name: relationship.value,
+    .put(config.API.orgRelationshipId(id), {
-  });
+      name: relationship.value,
-  fetchData();
+    })
+    .then(() => {
+      fetchData();
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 async function deleteData(id: string) {
-  await http.delete(config.API.orgRelationshipId(id));
+  await http
-  fetchData();
+    .delete(config.API.orgRelationshipId(id))
+    .then(() => {
+      fetchData();
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 onMounted(async () => {

src/modules/01_metadataNew/components/personal/07ListEducationLevel.vue

@@ -11,7 +11,7 @@ import config from "@/app.config";
 
 const store = usePersonalDataStore();
 const mixin = useCounterMixin();
-const { dialogRemove, messageError, showLoader, hideLoader } = mixin;
+const { dialogRemove, messageError, showLoader, hideLoader, success } = mixin;
 const columns = [
   {
     name: "name",
@@ -91,7 +91,6 @@ async function fetchData() {
   await http
     .get(config.API.orgEducationLevel)
     .then(async (res) => {
-      console.log(res.data.result);
       store.save(res.data.result);
     })
     .catch((err) => {
@@ -103,24 +102,53 @@ async function fetchData() {
 }
 
 async function addData() {
-  await http.post(config.API.orgEducationLevel, {
+  await http
-    name: educationLevel.value,
+    .post(config.API.orgEducationLevel, {
-    rank: educationRank.value,
+      name: educationLevel.value,
-  });
+      rank: educationRank.value,
-  fetchData();
+    })
+    .then(() => {
+      fetchData();
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 async function editData(id: string) {
-  await http.put(config.API.orgEducationLevelId(id), {
+  await http
-    name: educationLevel.value,
+    .put(config.API.orgEducationLevelId(id), {
-    rank: educationRank.value,
+      name: educationLevel.value,
-  });
+      rank: educationRank.value,
-  fetchData();
+    })
+    .then(() => {
+      fetchData();
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 async function deleteData(id: string) {
-  await http.delete(config.API.orgEducationLevelId(id));
+  await http
-  fetchData();
+    .delete(config.API.orgEducationLevelId(id))
+    .then(() => {
+      fetchData();
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 onMounted(async () => {

src/modules/01_metadataNew/components/personal/DialogForm.vue

@@ -63,7 +63,7 @@ async function onSubmit() {
 
 <template>
   <q-dialog v-model="dialog" class="dialog" persistent>
-    <q-card style="min-width: 350px" class="bg-grey-11">
+    <q-card style="min-width: 350px">
       <form @submit.prevent="validateForm">
         <q-card-section class="flex justify-between" style="padding: 0">
           <dialog-header
@@ -74,37 +74,39 @@ async function onSubmit() {
 
         <q-separator color="grey-4" />
         <q-card-section class="q-pa-none">
-          <q-input
+          <div class="col-12 q-ma-md">
-            ref="dataRef"
+            <q-input
-            outlined
+              ref="dataRef"
-            v-model="data"
+              outlined
-            :label="personalName"
+              v-model="data"
-            dense
+              :label="personalName"
-            lazy-rules
+              dense
-            borderless
+              lazy-rules
-            class="col-12 bg-white q-ma-md"
+              borderless
-            :rules="[(val) => val.length > 0 || 'กรุณากรอก' + personalName]"
+              :rules="[(val) => val.length > 0 || 'กรุณากรอก' + personalName]"
-            hide-bottom-space
+              hide-bottom-space
-          />
+            />
+          </div>
         </q-card-section>
         <q-card-section
           class="q-pa-none"
           v-if="personalName === 'ระดับการศึกษา'"
         >
-          <q-input
+          <div class="col-12 q-ma-md">
-            ref="educationRankRef"
+            <q-input
-            outlined
+              ref="educationRankRef"
-            v-model="educationRank"
+              outlined
-            label="ลำดับ"
+              v-model="educationRank"
-            dense
+              label="ลำดับ"
-            type="number"
+              dense
-            lazy-rules
+              type="number"
-            borderless
+              lazy-rules
-            min="1"
+              borderless
-            class="col-12 bg-white q-ma-md"
+              min="1"
-            :rules="[(val) => val != undefined || 'กรุณากรอกลำดับ']"
+              :rules="[(val) => val != undefined || 'กรุณากรอกลำดับ']"
-            hide-bottom-space
+              hide-bottom-space
-          />
+            />
+          </div>
         </q-card-section>
 
         <q-card-actions align="right">
@@ -115,7 +117,6 @@ async function onSubmit() {
             unelevated
             label="บันทึก"
             color="public"
-            class="q-px-md"
           >
             <q-tooltip>บันทึกข้อมูล</q-tooltip>
           </q-btn>

src/modules/01_metadataNew/components/position/02ListType.vue

@@ -174,7 +174,6 @@ function validateForm() {
 }
 
 async function onSubmit() {
-  console.log(posTypeRank.value);
   if (posTypeName.value.length > 0 && posTypeRank.value !== null) {
     dialogConfirm(
       $q,