From 3556fb3caeecaa4c87a51b3a18734c3b9875d642 Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Fri, 6 Sep 2024 16:42:40 +0700
Subject: [PATCH] =?UTF-8?q?UI=20=E0=B8=AB=E0=B8=99=E0=B9=89=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=84?=
 =?UTF-8?q?=E0=B8=B3=E0=B8=AA=E0=B8=B1=E0=B9=88=E0=B8=87=E0=B9=81=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B0=20Template?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../05_command/components/ListOrder.vue       | 205 ++++++++
 .../05_command/interface/index/Main.ts        |  18 +-
 src/modules/05_command/stores/main.ts         |   6 +-
 src/modules/05_command/views/lists.vue        | 460 +++++++++++++++++-
 4 files changed, 684 insertions(+), 5 deletions(-)
 create mode 100644 src/modules/05_command/components/ListOrder.vue

diff --git a/src/modules/05_command/components/ListOrder.vue b/src/modules/05_command/components/ListOrder.vue
new file mode 100644
index 00000000..56158286
--- /dev/null
+++ b/src/modules/05_command/components/ListOrder.vue
@@ -0,0 +1,205 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { VuePDF, usePDF } from "@tato30/vue-pdf";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  dialogConfirm,
+  success,
+  showLoader,
+  hideLoader,
+  dialogRemove,
+  messageError,
+} = mixin;
+
+const idOrder = defineModel<string>("idOrder", { required: true }); // แยก tab
+const type = defineModel<string>("type", { required: true }); // แยก tab
+
+const documentFile = ref<File | null>(null); // file
+
+/** download file */
+function downloadFile() {}
+
+/** uplaod file */
+function clickUpload(file: File | null) {
+  const dataFile = file;
+}
+
+/** page PDF */
+const pdfSrc = ref<any>();
+const page = ref<number>(1);
+const numOfPages = ref<number>(0);
+const splitterModel = ref(14);
+
+function nextPage() {
+  if (page.value < numOfPages.value) {
+    page.value++;
+  }
+}
+function backPage() {
+  if (page.value !== 1) {
+    page.value--;
+  }
+}
+
+const showDocument = (url: any) => {
+  const pdfData = usePDF(url);
+  console.log("🚀 ~ showDocument ~ pdfData:", pdfData);
+  setTimeout(() => {
+    pdfSrc.value = pdfData.pdf.value;
+    numOfPages.value = pdfData.pages.value;
+  }, 1000);
+};
+
+watch(
+  () => idOrder.value,
+  (newValue, oldValue) => {
+    if (newValue && newValue !== oldValue) {
+      showLoader();
+      setTimeout(() => {
+        const url =
+          "https://s3cluster.frappet.com/bma-ehr-fpt/b1638139-0753-45c7-adc4-c9824290a031?AWSAccessKeyId=frappet&Expires=1725631100&Signature=j5k81k0ofHDidwsSfiGz%2BpL3igA%3D";
+        showDocument(url);
+        hideLoader();
+      }, 1000);
+    }
+  },
+  { immediate: true }
+);
+</script>
+<template>
+  <div class="row items-center q-col-gutter-sm">
+    <div class="col-12 col-md-8 col-lg-6">
+      <q-file
+        for="inputFiles"
+        outlined
+        dense
+        v-model="documentFile"
+        label="ไฟล์เอกสารหลักฐาน"
+        hide-bottom-space
+        :accept="type == 'order' ? '.docx' : '.pdf'"
+        clearable
+      >
+        <template v-slot:prepend>
+          <q-icon name="attach_file" color="primary" />
+        </template>
+        <template v-slot:after>
+          <q-btn
+            size="14px"
+            v-if="documentFile"
+            flat
+            round
+            dense
+            color="blue"
+            icon="mdi-upload"
+            @click="clickUpload(documentFile)"
+            ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+          >
+          <q-btn
+            flat
+            round
+            dense
+            color="primary"
+            icon="mdi-download"
+            @click="downloadFile()"
+          >
+            <q-tooltip>ดาวน์โหลด Template คำสั่ง</q-tooltip>
+          </q-btn>
+        </template>
+      </q-file>
+    </div>
+    <div class="col-12">
+      <q-splitter
+        v-model="splitterModel"
+        horizontal
+        style="
+          height: 70vh;
+          border: 1px solid rgb(210, 210, 210);
+          border-radius: 5px;
+        "
+        before-class="overflow-hidden disable"
+        separator-class="bg-white disabled"
+      >
+        <template v-slot:before>
+          <div class="q-px-sm">
+            <div class="row items-start items-center">
+              <div class="col">
+                <q-btn
+                  padding="xs"
+                  icon="mdi-chevron-left"
+                  color="grey-2"
+                  text-color="grey-5"
+                  size="md"
+                  class="my-auto"
+                  @click="backPage"
+                  :disable="page == 1"
+                />
+              </div>
+              <div class="col-12 col-md-auto">
+                <div class="q-pa-md flex">
+                  หน้าที่ {{ page }} จาก {{ numOfPages }}
+                </div>
+              </div>
+              <div class="col text-right">
+                <q-btn
+                  padding="xs"
+                  icon="mdi-chevron-right"
+                  color="grey-2"
+                  text-color="grey-5"
+                  size="md"
+                  @click="nextPage"
+                  :disable="page === numOfPages"
+                />
+              </div>
+            </div>
+          </div>
+        </template>
+        <template v-slot:after>
+          <div class="q-pa-md">
+            <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
+          </div>
+        </template>
+        <template v-slot:default>
+          <div class="q-pa-md">
+            <div class="row items-start items-center">
+              <div class="col">
+                <q-btn
+                  padding="xs"
+                  icon="mdi-chevron-left"
+                  color="grey-2"
+                  text-color="grey-5"
+                  size="md"
+                  class="my-auto"
+                  @click="backPage"
+                  :disable="page == 1"
+                />
+              </div>
+              <div class="col-12 col-md-auto">
+                <div class="q-pa-md flex">
+                  หน้าที่ {{ page }} จาก {{ numOfPages }}
+                </div>
+              </div>
+              <div class="col text-right">
+                <q-btn
+                  padding="xs"
+                  icon="mdi-chevron-right"
+                  color="grey-2"
+                  text-color="grey-5"
+                  size="md"
+                  @click="nextPage"
+                  :disable="page === numOfPages"
+                />
+              </div>
+            </div>
+          </div>
+        </template>
+      </q-splitter>
+    </div>
+  </div>
+</template>
diff --git a/src/modules/05_command/interface/index/Main.ts b/src/modules/05_command/interface/index/Main.ts
index 1aeb5a4b..7743b509 100644
--- a/src/modules/05_command/interface/index/Main.ts
+++ b/src/modules/05_command/interface/index/Main.ts
@@ -2,4 +2,20 @@ interface Pagination {
   rowsPerPage: number;
 }
 
-export type { Pagination };
+interface ActiveOptions {
+  value: string;
+  label: string;
+}
+
+interface ListOrder {
+  id: string;
+  code: string;
+  name: string;
+  status: boolean;
+}
+
+interface Tabs {
+  value: string;
+  label: string;
+}
+export type { Pagination, ActiveOptions, ListOrder, Tabs };
diff --git a/src/modules/05_command/stores/main.ts b/src/modules/05_command/stores/main.ts
index 4d14ff9e..6cfa100a 100644
--- a/src/modules/05_command/stores/main.ts
+++ b/src/modules/05_command/stores/main.ts
@@ -1,5 +1,9 @@
 import { defineStore } from "pinia";
+import { ref } from "vue";
 
 export const useDataStore = defineStore("commandStore", () => {
-  return {};
+  const currentTab = ref<string>("order");
+  return {
+    currentTab
+  };
 });
diff --git a/src/modules/05_command/views/lists.vue b/src/modules/05_command/views/lists.vue
index 91af707c..cca9461c 100644
--- a/src/modules/05_command/views/lists.vue
+++ b/src/modules/05_command/views/lists.vue
@@ -1,5 +1,459 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref, onMounted, reactive } from "vue";
+import { useQuasar } from "quasar";
 
-<template>รายการคำสั่งและ Template</template>
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/modules/05_command/stores/main";
 
-<style lang="scss" scoped></style>
+import type {
+  ActiveOptions,
+  ListOrder,
+  Tabs,
+} from "@/modules/05_command/interface/index/Main";
+
+import Header from "@/components/DialogHeader.vue";
+import PageOrder from "@/modules/05_command/components/ListOrder.vue";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const store = useDataStore();
+const {
+  dialogConfirm,
+  success,
+  showLoader,
+  hideLoader,
+  dialogRemove,
+  messageError,
+} = mixin;
+
+const inActive = ref<string>(""); //Select Active/InActive
+const activeOptions = ref<ActiveOptions[]>([
+  {
+    value: "Active",
+    label: "Active",
+  },
+  {
+    value: "InActive",
+    label: "InActive",
+  },
+]);
+
+const tabs = ref<Tabs[]>([
+  {
+    value: "order",
+    label: "คำสั่ง",
+  },
+  {
+    value: "account",
+    label: "บัญชีแนบท้าย",
+  },
+]);
+
+const idOrder = ref<string>("");
+const activeOrderId = ref<string>("");
+const name = ref<string>(""); // ชื่อคำสั่ง
+const listOrder = ref<ListOrder[]>([]); // list คำสั่ง
+const status = ref<boolean>(false); // สถานะ
+const isEdit = ref<boolean>(false); //เก็บ true/false เช็คแก้ไข
+const modelDialogActive = ref<boolean>(false); // model คำสั่ง
+
+/** search Active / InActive */
+function searchActive(val: string) {
+  console.log(val);
+}
+
+/** เปิด dialog */
+function onDialogAdd() {
+  isEdit.value = false;
+  modelDialogActive.value = true;
+}
+/**
+ * เปิด dialog Edit
+ * @param data ข้อมูลคำสั่ง
+ */
+function onDialogEdit(data: ListOrder) {
+  idOrder.value = data.id;
+  name.value = data.name;
+  status.value = data.status;
+
+  isEdit.value = true;
+  modelDialogActive.value = true;
+}
+
+/**
+ * ลบ คำสั่ง
+ * @param id id คำสั่ง
+ */
+function onDelete(id: string) {
+  dialogRemove($q, () => {
+    // http
+    //   .delete(config.API.)
+    //   .then((res) => {})
+    //   .catch((e) => {
+    //     messageError($q, e);
+    //   })
+    //   .finally(() => {});
+  });
+}
+
+/** ปิด dialog */
+function closeDialog() {
+  idOrder.value = "";
+  isEdit.value = false;
+  modelDialogActive.value = false;
+  name.value = "";
+  status.value = false;
+}
+
+/** บันทึกข้อมูล dialog */
+function onSubmit() {
+  dialogConfirm($q, () => {});
+}
+
+/** เก็บ id list คำสั่งที่เลือก เพื่อใช้ class */
+function selectInbox(data: ListOrder) {
+  activeOrderId.value = data.id;
+}
+
+/** เริ่มเมื่อโหลดหน้านี้*/
+onMounted(() => {
+  const dataTest = [
+    {
+      id: "031952c2-a0d5-4a17-925c-d97993879621",
+      code: "C-PM-01",
+      name: "Test1",
+      status: true,
+    },
+    {
+      id: "031952c2-a0d5-4a17-925c-d97993879622",
+      code: "C-PM-01",
+      name: "Test2",
+      status: true,
+    },
+    {
+      id: "031952c2-a0d5-4a17-925c-d97993879623",
+      code: "C-PM-01",
+      name: "Test3",
+      status: false,
+    },
+  ];
+  listOrder.value = dataTest;
+});
+</script>
+
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายการคำสั่งและ Template
+  </div>
+  <div class="row q-col-gutter-sm">
+    <div class="col-4">
+      <q-card bordered style="height: 100%">
+        <div class="row items-center q-pa-sm">
+          <div class="col-2">
+            <q-btn
+              flat
+              dense
+              round
+              icon="add"
+              color="primary"
+              @click="onDialogAdd()"
+            >
+              <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+            </q-btn>
+          </div>
+          <q-space />
+          <div class="col-12 col-md-6">
+            <q-select
+              outlined
+              dense
+              v-model="inActive"
+              class="inputgreen"
+              label="status"
+              :options="activeOptions"
+              option-label="label"
+              option-value="value"
+              emit-value
+              @update:model-value="searchActive"
+            ></q-select>
+          </div>
+        </div>
+        <q-separator />
+        <q-card-section class="q-pa-sm">
+          <q-scroll-area style="height: 70vh" class="scrollStyle">
+            <q-list
+              v-for="(item, index) in listOrder"
+              :key="item.id"
+              class="q-pr-sm"
+            >
+              <q-item
+                clickable
+                v-ripple
+                class="my-link q-my-xs"
+                :active="activeOrderId === item.id"
+                active-class="my-menu_link"
+                @click="selectInbox(item)"
+              >
+                <q-item-section>
+                  <q-item-label class="text-weight-medium" caption lines="2">
+                    {{ `- ${item.name}` }}
+                  </q-item-label>
+                </q-item-section>
+                <q-item-section side center>
+                  <q-icon
+                    name="mdi-dots-horizontal"
+                    color="secondary"
+                    flat
+                    round
+                    dense
+                  >
+                    <q-menu
+                      transition-show="jump-down"
+                      transition-hide="jump-up"
+                    >
+                      <q-list dense style="min-width: 160px">
+                        <q-item
+                          clickable
+                          v-close-popup
+                          @click="onDialogEdit(item)"
+                        >
+                          <q-item-section
+                            style="min-width: 0px"
+                            avatar
+                            class="q-py-sm"
+                          >
+                            <q-icon color="edit" size="xs" name="mdi-pencil" />
+                          </q-item-section>
+                          <q-item-section>แก้ไข</q-item-section>
+                        </q-item>
+                        <q-separator />
+                        <q-item
+                          clickable
+                          v-close-popup
+                          @click="onDelete(item.id)"
+                        >
+                          <q-item-section
+                            style="min-width: 0px"
+                            avatar
+                            class="q-py-sm"
+                          >
+                            <q-icon color="red" size="xs" name="mdi-delete" />
+                          </q-item-section>
+                          <q-item-section>ลบ</q-item-section>
+                        </q-item>
+
+                        <q-separator />
+                      </q-list> </q-menu
+                  ></q-icon>
+                </q-item-section>
+              </q-item>
+              <q-separator v-if="listOrder.length !== index + 1" />
+            </q-list>
+          </q-scroll-area>
+        </q-card-section>
+      </q-card>
+    </div>
+    <div class="col-8">
+      <q-card bordered style="height: 100%">
+        <div v-if="activeOrderId !== ''">
+          <q-tabs
+            dense
+            v-model="store.currentTab"
+            align="left"
+            indicator-color="primary"
+            active-color="primary bg-teal-1"
+            inline-label
+            class="text-body2 text-grey-7"
+          >
+            <q-tab
+              v-for="tab in tabs"
+              :key="tab.value"
+              v-on:click="store.currentTab = tab.value"
+              :label="tab.label"
+              :name="tab.value"
+              class="q-py-xs"
+            />
+          </q-tabs>
+          <q-separator />
+          <q-tab-panels v-model="store.currentTab" animated>
+            <q-tab-panel name="order">
+              <PageOrder
+                v-model:type="store.currentTab"
+                :id-order="activeOrderId"
+              />
+            </q-tab-panel>
+            <q-tab-panel name="account">
+              <PageOrder
+                v-model:type="store.currentTab"
+                :id-order="activeOrderId"
+              />
+            </q-tab-panel>
+          </q-tab-panels>
+        </div>
+        <div v-else style="height: auto; max-width: 100%; max-height: 90vh">
+          <div
+            class="absolute-center text-center text-grey-9"
+            style="width: 100%"
+          >
+            <div class="column items-center">
+              <q-icon
+                name="mdi-hand-pointing-left"
+                size="lg"
+                color="primary"
+              ></q-icon>
+              <span>กรุณาเลือกรายการคำสั่ง</span>
+            </div>
+          </div>
+        </div>
+      </q-card>
+    </div>
+  </div>
+
+  <q-dialog v-model="modelDialogActive" persistent>
+    <q-card class="col-12" style="min-width: 30%">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <Header
+          :tittle="isEdit ? 'แก้ไขข้อมูลคำสั่ง' : 'เพิ่มข้อมูลคำสั่ง'"
+          :close="closeDialog"
+        />
+        <q-separator />
+
+        <q-card-section>
+          <div class="row q-col-gutter-sm">
+            <div class="col-12">
+              <q-input
+                outlined
+                dense
+                v-model="name"
+                label="ชื่อคำสั่ง"
+                class="inputgreen"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อคำสั่ง'}`,]"
+                hide-bottom-space
+              ></q-input>
+            </div>
+            <div class="col-12">
+              <div class="row items-center justify-between border_custom">
+                <p class="q-ma-none">สถานะการใช้งาน</p>
+                <label :class="`toggle-control`">
+                  <input type="checkbox" v-model="status" />
+                  <span class="control"></span>
+                </label>
+              </div>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-actions align="right">
+          <q-btn label="บันทึก" color="secondary" type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped lang="scss">
+:deep(.scrollStyle .q-scrollarea__bar) {
+  background-color: #909090;
+  border-radius: 10px;
+  width: 5px;
+  opacity: 0.1;
+  right: 0px;
+}
+:deep(.scrollStyle .q-scrollarea__thumb) {
+  background-color: #909090;
+  border-radius: 10px;
+  width: 5px;
+  opacity: 0.5;
+  right: 0px;
+}
+.my-menu_link {
+  background: #ebf9f7 !important;
+  border-radius: 5px;
+  color: #1bb19ab8 !important;
+}
+
+.my-menu-link .q-hoverable {
+  border-radius: 5px;
+}
+
+.my-link {
+  font-size: 0.75rem;
+  padding: 2px;
+  min-height: 10px !important;
+}
+
+.my-link:hover {
+  border-radius: 5px;
+}
+
+.border_custom {
+  border-radius: 5px !important;
+  border: 1px solid #c8d3db;
+  height: 40px;
+  padding: 0 12px;
+}
+$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;
+$toggle-radius: calc($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>