updated linkage

src/components/LoginLinkage.vue

@@ -1,27 +1,41 @@
 <script setup lang="ts">
 import { ref } from "vue";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useLinkageStore } from "@/stores/linkage";
 
 import DialogHeader from "./DialogHeader.vue";
 
+const $q = useQuasar();
+const { showLoader, hideLoader } = useCounterMixin();
+
+const store = useLinkageStore();
 const modal = defineModel<boolean>("modal", { required: true });
 
-const step = ref<number>(1);
-const devices = ref<string>("");
-const devicesData = ref<string[]>(["Generic EMV Smartcard Reader0"]);
-const devicesOp = ref<string[]>([]);
-
 /** 1.เสียบบัตรประชาชนเข้ากับเครื่องอ่าน*/
-function fetchDeviceLists() {
-  step.value++;
+async function fetchDeviceLists() {
+  showLoader();
+  await store.fetchDeviceLists($q);
+  hideLoader();
 }
 
 /** 2.เลือกเครื่องอ่านบัตร*/
-function readDevice() {
-  step.value++;
+async function readDevice() {
+  showLoader();
+  await store.readDevice($q);
+  await store.getInfo($q); // ดึงข้อมูล CID
+  await store.postReadIdCard($q); // ดึงข้อมูล id card จากเครื่องอ่านบัตร
+  await store.amiEnvironment($q);
+  await store.amiConnect($q);
+  await store.amiRequest($q, 9080);
+  hideLoader();
 }
 
-function verifyPin() {
-  step.value++;
+async function verifyPin() {
+  showLoader();
+  await store.authentication($q);
+  await store.verifyPin($q);
+  hideLoader();
 }
 
 /**
@@ -32,7 +46,7 @@ function verifyPin() {
 function filterOption(val: string, update: Function) {
   update(() => {
     const newVal = val.toLocaleUpperCase();
-    devicesOp.value = devicesData.value.filter(
+    store.devicesOp = store.devicesData.filter(
       (v: string) => v.toLocaleUpperCase().indexOf(newVal) > -1
     );
   });
@@ -40,8 +54,6 @@ function filterOption(val: string, update: Function) {
 
 function onClose() {
   modal.value = false;
-  step.value = 1;
-  devices.value = "";
 }
 </script>
 
@@ -69,14 +81,14 @@ function onClose() {
                 title="เสียบบัตรประชาชนเข้ากับเครื่องอ่าน"
                 style="font-size: 12px"
                 :icon="
-                  step === 1
+                  store.step === 1
                     ? 'mdi-pencil'
-                    : step > 1
+                    : store.step > 1
                     ? 'done'
                     : 'mdi-numeric-1'
                 "
               >
-                <div class="row" v-if="step === 1">
+                <div class="row" v-if="store.step === 1">
                   <q-btn
                     color="primary"
                     label="ดำเนินการต่อ"
@@ -89,15 +101,15 @@ function onClose() {
               <q-timeline-entry
                 title="เลือกเครื่องอ่านบัตร"
                 :icon="
-                  step === 2
+                  store.step === 2
                     ? 'mdi-pencil'
-                    : step > 2
+                    : store.step > 2
                     ? 'done'
                     : 'mdi-numeric-2'
                 "
-                :color="step < 2 ? 'grey-4' : ''"
+                :color="store.step < 2 ? 'grey-4' : ''"
               >
-                <div class="row" v-if="step === 2">
+                <div class="row" v-if="store.step === 2">
                   <q-form
                     greedy
                     @submit.prevent
@@ -107,7 +119,7 @@ function onClose() {
                       <div>
                         <q-select
                           dense
-                          v-model="devices"
+                          v-model="store.devices"
                           label="เลือกเครื่องอ่านบัตร"
                           outlined
                           emit-value
@@ -119,7 +131,7 @@ function onClose() {
                           option-label="name"
                           option-value="id"
                           class="inputgreen"
-                          :options="devicesOp"
+                          :options="store.devicesOp"
                           use-input
                           :rules="[(val:string) => !!val || `${'กรุณาเลือกเลือกเครื่องอ่านบัตร'}`,]"
                           @filter="(inputValue:string,doneFn:Function) => filterOption(inputValue, doneFn) "
@@ -149,15 +161,15 @@ function onClose() {
               <q-timeline-entry
                 title="เชื่อมต่อและใส่ PIN"
                 :icon="
-                  step === 3
+                  store.step === 3
                     ? 'mdi-pencil'
-                    : step > 3
+                    : store.step > 3
                     ? 'done'
                     : 'mdi-numeric-3'
                 "
-                :color="step < 3 ? 'grey-4' : ''"
+                :color="store.step < 3 ? 'grey-4' : ''"
               >
-                <div class="row" v-if="step === 3">
+                <div class="row" v-if="store.step === 3">
                   <q-btn
                     color="primary"
                     label="ดำเนินการต่อ"
@@ -169,6 +181,14 @@ function onClose() {
           </q-card-section>
         </q-card>
       </q-card-section>
+
+      <q-card-actions v-if="store.tKey" align="right">
+        <q-btn
+          label="ยกเลิกการเชื่อมต่อ"
+          color="negative"
+          @click="store.disconnect($q)"
+        />
+      </q-card-actions>
     </q-card>
   </q-dialog>
 </template>