ข้อมูลบุคคล ใช้dialogร่วมกัน

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

@@ -3,11 +3,12 @@ import { ref, onMounted } from "vue";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRouter } from "vue-router";
-import { useInsigniaDataStore } from "@/modules/01_metadataNew/stores/InsigniaStore";
+import { usePersonalDataStore } from "@/modules/01_metadataNew/stores/personalStore";
 import dialogHeader from "@/components/DialogHeader.vue";
 import { useQuasar } from "quasar";
+import DialogForm from "@/modules/01_metadataNew/components/personal/DialogForm.vue";
 
-const store = useInsigniaDataStore();
+const store = usePersonalDataStore();
 const router = useRouter();
 const mixin = useCounterMixin();
 const { dialogRemove, dialogConfirm } = mixin;
@@ -77,6 +78,7 @@ const isActive = ref<boolean>(false);
 const bloodGroup = ref<string>("");
 const bloodGroupRef = ref<any>(null);
 const dialogStatus = ref<string>("");
+const personalName = ref<string>("กลุ่มเลือด");
 const visibleColumns = ref<string[]>([
   "bloodGroup",
   "createdAt",
@@ -109,7 +111,7 @@ function fetchData() {
       createdAt: new Date(),
       lastUpdatedAt: new Date(),
       lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
-      isActive: false,
+      isActive: true,
     },
   ];
   store.fetchData(data);
@@ -118,31 +120,6 @@ function fetchData() {
 onMounted(async () => {
   fetchData();
 });
-
-function closeDialog() {
-  dialog.value = false;
-}
-
-function validateForm() {
-  bloodGroupRef.value.validate();
-  onSubmit();
-}
-
-async function onSubmit() {
-  if (bloodGroup.value.length > 0) {
-    dialogConfirm(
-      $q,
-      async () => {
-        console.log("สำเร็จ");
-        closeDialog();
-        bloodGroup.value = "";
-        isActive.value = false;
-      },
-      "ยืนยันการบันทึกข้อมูล",
-      "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
-    );
-  }
-}
 </script>
 
 <template>
@@ -270,127 +247,11 @@ async function onSubmit() {
     </template>
   </d-table>
 
-  <q-dialog v-model="dialog" class="dialog" persistent>
-    <q-card style="min-width: 350px" class="bg-grey-11">
-      <form @submit.prevent="validateForm">
-        <q-card-section class="flex justify-between" style="padding: 0">
-          <dialog-header
-            :tittle="dialogStatus == 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
-            :close="closeDialog"
-          />
-        </q-card-section>
-
-        <q-separator color="grey-4" />
-        <q-card-section class="q-pa-none">
-          <q-input
-            ref="bloodGroupRef"
-            outlined
-            v-model="bloodGroup"
-            label="กลุ่มเลือด"
-            dense
-            lazy-rules
-            borderless
-            class="col-12 bg-white q-ma-md"
-            :rules="[(val) => val.length > 0 || 'กรุณากรอกกลุ่มเลือด']"
-            hide-bottom-space
-          />
-          <div
-            class="col q-ma-md q-pa-sm bg-white border_custom text-weight-medium"
-          >
-            <div class="row items-center q-my-sm justify-between">
-              <p class="q-ma-none">สถานะการใช้งาน</p>
-              <label class="toggle-control">
-                <input type="checkbox" dense v-model="isActive" />
-                <span class="control"></span>
-              </label>
-            </div>
-          </div>
-        </q-card-section>
-
-        <q-card-actions align="right">
-          <q-btn
-            id="onSubmit"
-            type="submit"
-            dense
-            unelevated
-            label="บันทึก"
-            color="public"
-            class="q-px-md"
-          >
-            <q-tooltip>บันทึกข้อมูล</q-tooltip>
-          </q-btn>
-        </q-card-actions>
-      </form>
-    </q-card>
-  </q-dialog>
+  <DialogForm
+    v-model:dialog="dialog"
+    v-model:data="bloodGroup"
+    v-model:isActive="isActive"
+    v-model:personalName="personalName"
+    v-model:dialogStatus="dialogStatus"
+  />
 </template>
-
-<style scoped lang="scss">
-.border_custom {
-  border-radius: 6px !important;
-  border: 1px solid #e1e1e1;
-}
-$toggle-background-color-on: #06884d;
-$toggle-background-color-off: darkgray;
-$toggle-control-color: white;
-$toggle-width: 40px;
-$toggle-height: 25px;
-$toggle-gutter: 3px;
-$toggle-radius: 50%;
-$toggle-control-speed: 0.15s;
-$toggle-control-ease: ease-in;
-
-// These are our computed variables
-// change at your own risk.
-$toggle-radius: $toggle-height / 2;
-$toggle-control-size: $toggle-height - ($toggle-gutter * 2);
-
-.toggle-control {
-  display: block;
-  position: relative;
-  padding-left: $toggle-width;
-  margin-bottom: 12px;
-  cursor: pointer;
-  font-size: 22px;
-  user-select: none;
-
-  input {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-    height: 0;
-    width: 0;
-  }
-
-  input:checked ~ .control {
-    background-color: $toggle-background-color-on;
-
-    &:after {
-      left: $toggle-width - $toggle-control-size - $toggle-gutter;
-    }
-  }
-
-  .control {
-    position: absolute;
-    top: -7px;
-    left: -15px;
-    height: $toggle-height;
-    width: $toggle-width;
-    border-radius: $toggle-radius;
-    background-color: $toggle-background-color-off;
-    transition: background-color $toggle-control-speed $toggle-control-ease;
-
-    &:after {
-      content: "";
-      position: absolute;
-      left: $toggle-gutter;
-      top: $toggle-gutter;
-      width: $toggle-control-size;
-      height: $toggle-control-size;
-      border-radius: $toggle-radius;
-      background: $toggle-control-color;
-      transition: left $toggle-control-speed $toggle-control-ease;
-    }
-  }
-}
-</style>