From 776a1b838583e39f14b8df5269a7910048507c2b Mon Sep 17 00:00:00 2001
From: Tanyalak <tanyalak@frappet.com>
Date: Thu, 26 Oct 2023 17:35:21 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=20ui=20=E0=B8=A3=E0=B8=B0=E0=B8=9A=E0=B8=9A=E0=B8=A5=E0=B8=B2?=
 =?UTF-8?q?=20>=20=E0=B8=A3=E0=B8=AD=E0=B8=9A=E0=B8=81=E0=B8=B2=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=9B=E0=B8=8F=E0=B8=B4=E0=B8=9A=E0=B8=B1=E0=B8=95=E0=B8=B4?=
 =?UTF-8?q?=E0=B8=87=E0=B8=B2=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/interface/request/main/main.ts            |  10 +-
 .../09_leave/interface/response/round.ts      |  11 +
 src/modules/09_leave/router.ts                |  11 +
 src/modules/09_leave/stores/RoundStores.ts    | 111 +++++++++
 src/modules/09_leave/views/RoundMain.vue      | 216 ++++++++++++++++++
 5 files changed, 357 insertions(+), 2 deletions(-)
 create mode 100644 src/modules/09_leave/interface/response/round.ts
 create mode 100644 src/modules/09_leave/stores/RoundStores.ts
 create mode 100644 src/modules/09_leave/views/RoundMain.vue

diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index a0b52f8d0..a3533531f 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -378,18 +378,24 @@ const menuList = readonly<any[]>([
     children: [
       {
         key: 9.1,
+        label: "รอบการปฏิบัติงาน",
+        path: "/round-time",
+        role: "leave",
+      },
+      {
+        key: 9.2,
         label: "รายการลงเวลาปฏิบัติงาน",
         path: "/work-list",
         role: "leave",
       },
       {
-        key: 9.2,
+        key: 9.3,
         label: "รายการลา",
         path: "/leave-list",
         role: "leave",
       },
       {
-        key: 9.3,
+        key: 9.4,
         label: "รายงานสถิติ",
         path: "/statistics-report",
         role: "leave",
diff --git a/src/modules/09_leave/interface/response/round.ts b/src/modules/09_leave/interface/response/round.ts
new file mode 100644
index 000000000..795f587be
--- /dev/null
+++ b/src/modules/09_leave/interface/response/round.ts
@@ -0,0 +1,11 @@
+interface RoundRows {
+    name: string;
+    position: string;
+    responsibilities: string;
+    email: string;
+    phone: string;
+}
+
+export type {
+    RoundRows
+};
\ No newline at end of file
diff --git a/src/modules/09_leave/router.ts b/src/modules/09_leave/router.ts
index 936a99a6a..36c344e81 100644
--- a/src/modules/09_leave/router.ts
+++ b/src/modules/09_leave/router.ts
@@ -3,8 +3,19 @@ const workMain = () => import("@/modules/09_leave/views/WorkingMain.vue")
 const leaveMain = () => import("@/modules/09_leave/views/LeaveListMain.vue");
 const reportMain = () => import("@/modules/09_leave/views/ReportMain.vue")
 const leaveDetail = () => import("@/modules//09_leave/components/2_Leave/DetailLeave.vue")
+const RoundMain = () => import("@/modules/09_leave/views/RoundMain.vue")
 
 export default [
+    {
+        path: "/round-time",
+        name: "/round-time",
+        component: RoundMain,
+        meta: {
+            Auth: true,
+            Key: [9],
+            Role: "coin",
+        },
+    },
     {
         path: "/work-list",
         name: "/work-list",
diff --git a/src/modules/09_leave/stores/RoundStores.ts b/src/modules/09_leave/stores/RoundStores.ts
new file mode 100644
index 000000000..5eb6cb029
--- /dev/null
+++ b/src/modules/09_leave/stores/RoundStores.ts
@@ -0,0 +1,111 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import type { RoundRows } from "@/modules/09_leave/interface/response/round.ts";
+import type { QTableProps } from "quasar";
+
+// store ลา >> รอบการปฏิบัติงาน
+export const useRoundDataStore = defineStore(
+  "disciplineDirector",
+  () => {
+    //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+    const visibleColumns = ref<string[]>([
+      "no",
+      "round",
+      "am",
+      "amOut",
+      "pm",
+      "pmOut",
+      "note",
+      "status"
+    ]);
+
+    // หัวตาราง
+    const columns = ref<QTableProps["columns"]>([
+      {
+        name: "no",
+        align: "left",
+        label: "ลำดับ",
+        sortable: false,
+        field: "no",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+      {
+        name: "round",
+        align: "left",
+        label: "รอบ",
+        sortable: true,
+        field: "round",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+      {
+        name: "am",
+        align: "left",
+        label: "ช่วงเช้า",
+        sortable: true,
+        field: "am",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+      {
+        name: "amOut",
+        align: "left",
+        label: "ออก",
+        sortable: true,
+        field: "amOut",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+      {
+        name: "pm",
+        align: "left",
+        label: "ช่วงบ่าย",
+        sortable: true,
+        field: "pm",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+      {
+        name: "pmOut",
+        align: "left",
+        label: "ออก",
+        sortable: true,
+        field: "pmOut",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+      {
+        name: "note",
+        align: "left",
+        label: "คำอธิบาย",
+        sortable: true,
+        field: "note",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+      {
+        name: "status",
+        align: "left",
+        label: "สถานะการใช้งาน",
+        sortable: true,
+        field: "status",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+    ]);
+
+    // ข้อมูลในตาราง
+    const rows = ref<RoundRows[]>([]);
+    function fetchData(data: RoundRows[]) {
+      rows.value = data
+    }
+
+    return {
+      visibleColumns,
+      columns,
+      rows,
+      fetchData
+    };
+  }
+);
diff --git a/src/modules/09_leave/views/RoundMain.vue b/src/modules/09_leave/views/RoundMain.vue
new file mode 100644
index 000000000..2cdf60e3d
--- /dev/null
+++ b/src/modules/09_leave/views/RoundMain.vue
@@ -0,0 +1,216 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import { useRoundDataStore } from '@/modules/09_leave/stores/RoundStores.ts'
+import DialogHeader from "@/components/information/DialogHeader.vue";
+
+const $q = useQuasar();
+const dataStore = useRoundDataStore()
+const mixin = useCounterMixin();
+const {
+  dialogRemove,
+} = mixin;
+
+onMounted(() => {
+  // get ข้อมูลแล้วโยนใส่ store
+  dataStore.fetchData([
+    {
+      round: "07:30 - 15:30",
+      am: "07:30",
+      amOut: "12:00",
+      pm: "13:00",
+      pmOut: "15:30",
+      note: "-",
+      status: true,
+    },
+    {
+      round: "08:30 - 16:30",
+      am: "08:30",
+      amOut: "12:00",
+      pm: "13:00",
+      pmOut: "16:30",
+      note: "-",
+      status: false,
+    },
+    {
+      round: "09:00 - 17:00",
+      am: "09:00",
+      amOut: "12:00",
+      pm: "13:00",
+      pmOut: "17:00",
+      note: "-",
+      status: false,
+    },
+  ])
+});
+
+// ค้นหาในตาราง
+const filterKeyword = ref<string>("");
+const filterRef = ref<HTMLInputElement | null>(null);
+function resetFilter() {
+  filterKeyword.value = "";
+  if (filterRef.value) {
+    filterRef.value.focus();
+  }
+};
+
+// กำหนด pagination
+const pagination = ref({
+  // sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 25,
+});
+
+const mode = ref("add");
+const modal = ref(false);
+const roundTime = ref<string>("");
+const am = ref("");
+const amOut = ref("");
+const pm = ref("");
+const pmOut = ref("");
+const note = ref("");
+const status = ref(false);
+
+function clickAdd() {
+  mode.value = "add";
+  modal.value = true;
+};
+
+const clickEdit = async (val: string) => {
+  mode.value = "edit"; 
+  modal.value = true;
+  roundTime.value = val;
+};
+
+/**
+ * กดปิด dialog
+ */
+ const clickClose = async () => {
+  modal.value = false
+};
+</script>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายการรอบการปฏิบัติงาน
+  </div>
+  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
+      <div class="row col-12 q-col-gutter-sm  q-mb-sm">
+        <div>
+          <q-btn @click="clickAdd" size="12px" flat round color="add" icon="mdi-plus">
+            <q-tooltip>เพิ่มรอบการปฏิบัติงาน</q-tooltip>
+          </q-btn>
+        </div>
+        <q-space />
+
+        <q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" outlined
+          debounce="300" placeholder="ค้นหา">
+          <template v-slot:append>
+            <q-icon v-if="filterKeyword == ''" name="search" />
+            <q-icon v-if="filterKeyword !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
+          </template>
+        </q-input>
+
+        <q-select v-model="dataStore.visibleColumns" multiple outlined dense options-dense
+          :display-value="$q.lang.table.columns" emit-value map-options :options="dataStore.columns" option-value="name"
+          options-cover style="min-width: 150px" class="col-xs-12 col-sm-3 col-md-2" />
+      </div>
+
+      <div class="col-12">
+        <d-table 
+          :columns="dataStore.columns" 
+          :rows="dataStore.rows" 
+          :filter="filterKeyword" 
+          row-key="tb-list" 
+          flat
+          bordered 
+          :paging="true" 
+          dense 
+          v-model:pagination="pagination" 
+          :visible-columns="dataStore.visibleColumns">
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td v-for="col in props.cols" :key="col.name" :props="props" @click="clickEdit(props.row.round)">
+                <div v-if="col.name == 'no'">
+                  {{ props.rowIndex + 1 }}
+                </div>
+                <div v-if="col.name == 'status'" class="">
+                  <q-icon
+                    v-if="col.value == false"
+                    name="mdi-close"
+                    color="grey-6"
+                    class="text-h5"
+                  />
+                  <q-icon
+                    v-else
+                    name="mdi-check"
+                    color="positive"
+                    class="text-h5"
+                  />
+                </div>
+                <div v-else>
+                  {{ col.value }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </div>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 30%">
+      <q-form ref="myForm">
+        <DialogHeader
+          :tittle="
+            mode == 'add'
+              ? 'เพิ่มรอบการปฏิบัติงาน'
+              : 'แก้ไขรอบการ '+ `${roundTime}`
+          "
+          :close="clickClose" />
+        <q-separator />
+        <div class="q-pa-sm row">
+          <q-card bordered class="row col-12 q-pa-sm q-mb-sm">
+            <div class="col-12 text-primary text-weight-medium q-pb-sm">ครึ่งเช้า</div>
+            <div class="col-12 row q-col-gutter-sm">
+              <q-input dense outlined :readonly="mode != 'add'" class="col-xs-12 col-sm-6" v-model="am"  type="time" label="เวลาเข้างาน" />
+              <q-input dense outlined :readonly="mode != 'add'" class="col-xs-12 col-sm-6" v-model="amOut"  type="time" label="เวลาออกงาน" />
+            </div>
+          </q-card>
+          <q-card bordered class="row col-12 q-pa-sm q-mb-sm">
+            <div class="col-12 text-primary text-weight-medium q-pb-sm">ครึ่งบ่าย</div>
+            <div class="col-12 row q-col-gutter-sm">
+              <q-input dense outlined :readonly="mode != 'add'" class="col-xs-12 col-sm-6" v-model="pm"  type="time" label="เวลาเข้างาน" />
+              <q-input dense outlined :readonly="mode != 'add'" class="col-xs-12 col-sm-6" v-model="pmOut"  type="time" label="เวลาออกงาน" />
+            </div>
+          </q-card>
+          <div class="col-12 q-mb-sm">
+            <q-input class="bg-white" dense outlined v-model="note" type="textarea" label="คำอธิบาย" />
+          </div>
+          <q-card bordered class="row col-12 q-pa-sm items-center">
+            <div class="text-weight-medium text-dark text-subtitle2 text-primary">สถานะการใช้งาน</div>
+            <q-space/>
+            <q-toggle
+              v-model="status"
+              color="primary"
+              left-label
+            />
+          </q-card>
+        </div>
+        <q-separator />
+        <div class="q-pa-sm row col-12">
+          <q-space/>
+          <q-btn dense class="q-px-md" unelevated color="public" label="บันทึก" />
+        </div>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
\ No newline at end of file