From ef0295d882efd0cec95e005e0826309728018818 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 1 Oct 2024 16:39:25 +0700
Subject: [PATCH] ui Linkage Center

---
 src/components/LoginLinkage.vue | 190 ++++++++++++++++++++++++++++++++
 src/views/MainLayout.vue        |  17 ++-
 2 files changed, 206 insertions(+), 1 deletion(-)
 create mode 100644 src/components/LoginLinkage.vue

diff --git a/src/components/LoginLinkage.vue b/src/components/LoginLinkage.vue
new file mode 100644
index 000000000..0be840181
--- /dev/null
+++ b/src/components/LoginLinkage.vue
@@ -0,0 +1,190 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+import DialogHeader from "./DialogHeader.vue";
+
+const modal = defineModel<boolean>("modal", { required: true });
+
+const step = ref<number>(1);
+const devices = ref<string>("");
+const devicesData = ref<string[]>([
+  "Generic",
+  "EMV",
+  "Smartcard",
+  "Reader",
+  "0",
+]);
+const devicesOp = ref<string[]>([]);
+
+/** 1.เสียบบัตรประชาชนเข้ากับเครื่องอ่าน*/
+function fetchDeviceLists() {
+  step.value++;
+}
+
+/** 2.เลือกเครื่องอ่านบัตร*/
+function readDevice() {
+  step.value++;
+}
+
+function verifyPin() {
+  step.value++;
+}
+
+/**
+ * function ต้นหาข้อมูลของ Option
+ * @param val ค่าที่ต้องการฟิลเตอร์
+ * @param update  อัพเดทค่า
+ */
+function filterOption(val: string, update: Function) {
+  update(() => {
+    const newVal = val.toLocaleUpperCase();
+    devicesOp.value = devicesData.value.filter(
+      (v: string) => v.toLocaleUpperCase().indexOf(newVal) > -1
+    );
+  });
+}
+
+function onClose() {
+  modal.value = false;
+  step.value = 1;
+  devices.value = "";
+}
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 700px; max-width: 80vw">
+      <DialogHeader :tittle="'เข้าสู่ระบบ Linkage Center'" :close="onClose" />
+      <q-separator />
+      <q-card-section>
+        <q-card flat bordered>
+          <q-card-section>
+            <div
+              class="row"
+              style="
+                display: flex;
+                flex-direction: column;
+                align-items: flex-end;
+              "
+            >
+              <div class="text-red">
+                *ต้องใช้บน Windows และต้องติดตั้ง Agent
+              </div>
+              <div>
+                <a
+                  href="https://linkagemgmt.bora.dopa.go.th/app/LinkageManagement-v1.11.0.zip"
+                  >ลิงก์ดาวน์โหลด Agent</a
+                >
+              </div>
+            </div>
+
+            <q-timeline color="primary">
+              <!-- เสียบบัตรประชาชนเข้ากับเครื่องอ่าน -->
+              <q-timeline-entry
+                title="เสียบบัตรประชาชนเข้ากับเครื่องอ่าน"
+                :icon="
+                  step === 1
+                    ? 'mdi-pencil'
+                    : step > 1
+                    ? 'done'
+                    : 'mdi-numeric-1'
+                "
+              >
+                <div class="row" v-if="step === 1">
+                  <q-btn
+                    color="primary"
+                    label="ดำเนินการต่อ"
+                    @click="fetchDeviceLists"
+                  />
+                </div>
+              </q-timeline-entry>
+
+              <!-- เลือกเครื่องอ่านบัตร -->
+              <q-timeline-entry
+                title="เลือกเครื่องอ่านบัตร"
+                :icon="
+                  step === 2
+                    ? 'mdi-pencil'
+                    : step > 2
+                    ? 'done'
+                    : 'mdi-numeric-2'
+                "
+                :color="step < 2 ? 'grey-4' : ''"
+              >
+                <div class="row" v-if="step === 2">
+                  <q-form
+                    greedy
+                    @submit.prevent
+                    @validation-success="readDevice"
+                  >
+                    <div class="q-col-gutter-sm">
+                      <div>
+                        <q-select
+                          dense
+                          v-model="devices"
+                          label="เลือกเครื่องอ่านบัตร"
+                          outlined
+                          emit-value
+                          map-options
+                          fill-input
+                          hide-selected
+                          lazy-rules
+                          hide-bottom-space
+                          option-label="name"
+                          option-value="id"
+                          class="inputgreen"
+                          :options="devicesOp"
+                          use-input
+                          :rules="[(val:string) => !!val || `${'กรุณาเลือกเลือกเครื่องอ่านบัตร'}`,]"
+                          @filter="(inputValue:string,doneFn:Function) => filterOption(inputValue, doneFn) "
+                        >
+                          <template v-slot:no-option>
+                            <q-item>
+                              <q-item-section class="text-grey">
+                                ไม่มีข้อมูล
+                              </q-item-section>
+                            </q-item>
+                          </template>
+                        </q-select>
+                      </div>
+
+                      <div>
+                        <q-btn
+                          color="primary"
+                          label="ดำเนินการต่อ"
+                          type="submit"
+                        />
+                      </div></div
+                  ></q-form>
+                </div>
+              </q-timeline-entry>
+
+              <!-- เชื่อมต่อและใส่ PIN -->
+              <q-timeline-entry
+                title="เชื่อมต่อและใส่ PIN"
+                :icon="
+                  step === 3
+                    ? 'mdi-pencil'
+                    : step > 3
+                    ? 'done'
+                    : 'mdi-numeric-3'
+                "
+                :color="step < 3 ? 'grey-4' : ''"
+              >
+                <div class="row" v-if="step === 3">
+                  <q-btn
+                    color="primary"
+                    label="ดำเนินการต่อ"
+                    @click="verifyPin"
+                  />
+                </div>
+              </q-timeline-entry>
+            </q-timeline>
+          </q-card-section>
+        </q-card>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style lang="sass" scoped></style>
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index 6be7fd209..1ee422a83 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -19,6 +19,8 @@ import type {
 import { tabList, tabListPlacement } from "../interface/request/main/main";
 import { useroleUserDataStore } from "@/stores/roleUser";
 
+import LoginLinkage from "@/components/LoginLinkage.vue";
+
 const { setVerticalScrollPosition, getVerticalScrollPosition } = scroll;
 const store = useDataStore();
 const route = useRoute();
@@ -74,6 +76,7 @@ const options = ref<optionType[]>([
     color: "indigo",
   },
 ]);
+const modalLoginLinkage = ref<boolean>(false); //เข้าสู่ระบบ Linkage Center
 
 async function fetchmsgNoread() {
   await http
@@ -701,6 +704,16 @@ async function fetchPermissionsSys() {
                   {{ fullname }}
                 </div>
                 <div id="#logout">
+                  <q-btn
+                    color="blue"
+                    label="เข้าสู่ระบบ Linkage Center"
+                    push
+                    size="sm"
+                    v-close-popup
+                    @click="modalLoginLinkage = true"
+                  />
+                </div>
+                <div id="#logout" class="q-mt-sm">
                   <q-btn
                     color="primary"
                     label="ออกจากระบบ"
@@ -708,7 +721,7 @@ async function fetchPermissionsSys() {
                     size="sm"
                     v-close-popup
                     @click="doLogout"
-                  /><!--  -->
+                  />
                 </div>
               </div>
 
@@ -1137,6 +1150,8 @@ async function fetchPermissionsSys() {
     </q-page-container>
     <full-loader :visibility="loader" />
   </q-layout>
+
+  <LoginLinkage v-model:modal="modalLoginLinkage" />
 </template>
 
 <style>