From 1c5a865d937911efcdb6509394a216e78890d591 Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Mon, 18 Dec 2023 16:26:56 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20ui=20?=
 =?UTF-8?q?=E0=B8=AA=E0=B8=96=E0=B8=B4=E0=B8=95=E0=B8=B4=E0=B8=81=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=A5=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/05_leave/interface/index/main.ts |  11 +-
 src/modules/05_leave/views/Main.vue          | 193 +++++++++----------
 2 files changed, 100 insertions(+), 104 deletions(-)

diff --git a/src/modules/05_leave/interface/index/main.ts b/src/modules/05_leave/interface/index/main.ts
index 04fb9eb..be276d1 100644
--- a/src/modules/05_leave/interface/index/main.ts
+++ b/src/modules/05_leave/interface/index/main.ts
@@ -38,4 +38,13 @@ interface TypeLeave {
 	name: string
 }
 
-export type { OptionData, FormLeavetMainData, formListLeaveData, TypeLeave }
+interface LeaveItem {
+	text: string
+	color: string
+	value: number
+	all: number
+	use: number
+	remain: number
+}
+
+export type { OptionData, FormLeavetMainData, formListLeaveData, TypeLeave, LeaveItem }
diff --git a/src/modules/05_leave/views/Main.vue b/src/modules/05_leave/views/Main.vue
index edbc5b5..8c17626 100644
--- a/src/modules/05_leave/views/Main.vue
+++ b/src/modules/05_leave/views/Main.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue"
+import { ref, onMounted, computed } from "vue"
 import { useQuasar } from "quasar"
 import { useRouter } from "vue-router"
 import http from "@/plugins/http"
 import config from "@/app.config"
-
+import type { LeaveItem } from "@/modules/05_leave/interface/index/main"
 import type { QTableProps } from "quasar"
 
 import CalendarView from "@/modules/05_leave/components/Calendar.vue"
@@ -22,7 +22,7 @@ const $q = useQuasar()
 
 const filterLeaveType = ref(["ลาป่วย", "ลากิจส่วนตัว", "ลาพักผ่อน"])
 
-const itemPie = ref<any>([])
+const itemPie = ref<LeaveItem[]>([])
 const knob = ref(80)
 const columns = ref<QTableProps["columns"]>([
 	{
@@ -124,6 +124,7 @@ async function fetchStatsTable() {
 					}))
 			})
 			stat.forEach(item => itemPie.value.push(...item))
+
 			row.value = data.map((e: any) => ({
 				leaveTypeName: e.leaveTypeName,
 				leaveLimit: e.leaveTypeName === "ลาพักผ่อน" ? e.leaveLimit : e.leaveTypeName === "ลากิจส่วนตัว" ? "-" : "-",
@@ -153,6 +154,18 @@ async function addAbsence() {
 	router.push(`/leave/add`)
 }
 
+/**
+ * find ข้อมูลจาก api
+ */
+const filteredItems = computed(() => {
+	return itemPie.value.filter(item => item.text === "ลาพักผ่อน")
+})
+const filteredSick = computed(() => {
+	return itemPie.value.filter(item => item.text === "ลาป่วย")
+})
+const filteredBusi = computed(() => {
+	return itemPie.value.filter(item => item.text === "ลากิจส่วนตัว")
+})
 onMounted(async () => {
 	await fetchStatsTable()
 })
@@ -167,106 +180,80 @@ onMounted(async () => {
 			</div>
 		</div>
 
-    <div class="col-xs-12 col-sm-12 col-md-11 row">
-      <!-- สถิติการลา -->
-      <div class="col-12 row q-pb-sm">
-        <q-card bordered class="col-12 row caedNone">
-          <div class="row col-12 items-center q-px-md q-py-sm">
-            <div class="text-weight-bold">สถิติการลา</div>
-            <q-space />
-            <q-btn
-              dense
-              flat
-              class="text-blue"
-              icon="mdi-chart-line-variant"
-              @click="onClickOpenStat"
-              label="ตารางสถิติการลา"
-            />
-          </div>
-          <div bordered class="col-12 row justify-center q-px-md q-pb-md q-col-gutter-sm">
-            <div class="col-xs-12 col-sm-6"  >
-              <q-card
-                bordered
-                flat
-                class="col-12 row shadow-0 no-wrap">
-                <div class="col-xs-12 col-sm-8 row justify-center q-py-md" >
-                  <div class="col-12 row items-center justify-center q-pb-sm">
-                    <q-knob
-                      readonly
-                      v-model="knob"
-                      show-value
-                      size="60px"
-                      :thickness="0.15"
-                      track-color="grey-3"
-                      class="text-indigo"
-                    >
-                      <span class="text-subtitle2 text-weight-bold"
-                        >50 %</span
-                      >
-                    </q-knob>
-                  </div>
-                  <div class="col-12 text-center text-weight-medium">
-                    ลาพักผ่อน
-                  </div>
-                </div>
-                <div class="row gt-xs"><q-separator vertical /></div>
-                <div class="col-xs-12 col-sm-4 gt-xs row">
-                  <div
-                    class="col-12 row text-dark text-body2 items-center"
-                  >
-                    <div class="col-12 row q-pa-xs q-px-md row">
-                      <span class="text-grey-7 col-6">ได้รับ</span>
-                      <span class="text-weight-bold">10</span>
-                      
-                    </div>
-                    <div class="col-12"><q-separator /></div>
-                    <div class="col-12 row q-pa-xs  q-px-md">
-                      <span class="text-grey-7 col-6">ใช้ไป</span>
-                      <span class="text-weight-bold">5</span>
-                      
-                    </div>
-                    <div class="col-12"><q-separator /></div>
-                    <div class="col-12 row q-pa-xs  q-px-md">
-                      <span class="text-grey-7 col-6">คงเหลือ</span>
-                      <span class="text-weight-bold">5</span>
-                    </div>
-                  </div>
-                </div>
-              </q-card>
-            </div>
-            <div class="col-xs-12 col-sm-6 row  q-col-gutter-sm" >
-              <div class="col-12 row">
-                <q-card
-                  bordered
-                  flat
-                  class="shadow-0  col-12 fit row items-center q-px-lg"
-                  >
-                  <div class="text-subtitle2 col-4">ลาป่วย</div>
-                  <div class="text-subtitle2 col-8">
-                    <span class="text-grey-7 q-pr-md">ใช้ไป</span> 
-                    <span class="text-weight-bold">5</span>
-                    <span class="text-grey-7 q-pl-md">ลา</span> 
-                  </div>
-                </q-card>
-              </div>
-              <div class="col-12 row">
-                <q-card
-                  bordered
-                  flat
-                  class="shadow-0 col-12 fit row items-center q-px-lg"
-                  >
-                  <div class="text-subtitle2 col-4">ลากิจส่วนตัว</div>
-                  <div class="text-subtitle2 col-8">
-                    <span class="text-grey-7 q-pr-md">ใช้ไป</span> 
-                    <span class="text-weight-bold">5</span>
-                    <span class="text-grey-7 q-pl-md">ลา</span> 
-                  </div>
-                </q-card>  
-              </div>
-            </div>
-          </div>
-        </q-card>
-      </div>
+		<div class="col-xs-12 col-sm-12 col-md-11 row">
+			<!-- สถิติการลา -->
+			<div class="col-12 row q-pb-sm">
+				<q-card bordered class="col-12 row caedNone">
+					<div class="row col-12 items-center q-px-md q-py-sm">
+						<div class="text-weight-bold">สถิติการลา</div>
+						<q-space />
+						<q-btn dense flat class="text-blue" icon="mdi-chart-line-variant" @click="onClickOpenStat" label="ตารางสถิติการลา" />
+					</div>
+					<div bordered class="col-6 row justify-center q-px-md q-pb-md q-col-gutter-sm" v-for="item in filteredItems" :key="item.text">
+						<div class="col-xs-12 col-sm-12">
+							<q-card bordered flat class="col-12 row shadow-0 no-wrap" v-if="item.text === 'ลาพักผ่อน'">
+								<div class="col-xs-12 col-sm-8 row justify-center q-py-md">
+									<div class="col-12 row items-center justify-center q-pb-sm">
+										<q-knob readonly v-model="knob" show-value size="60px" :thickness="0.15" track-color="grey-3" class="text-indigo">
+											<span class="text-subtitle2 text-weight-bold">{{ item.value }}</span>
+										</q-knob>
+									</div>
+									<div class="col-12 text-center text-weight-medium">ลาพักผ่อน</div>
+								</div>
+								<div class="row gt-xs"><q-separator vertical /></div>
+								<div class="col-xs-12 col-sm-4 gt-xs row">
+									<div class="col-12 row text-dark text-body2 items-center">
+										<div class="col-12 row q-pa-xs q-px-md row">
+											<span class="text-grey-7 col-6">ได้รับ</span>
+											<span class="text-weight-bold">{{ item.all }}</span>
+										</div>
+										<div class="col-12"><q-separator /></div>
+										<div class="col-12 row q-pa-xs q-px-md">
+											<span class="text-grey-7 col-6">ใช้ไป</span>
+											<span class="text-weight-bold">{{ item.use }}</span>
+										</div>
+										<div class="col-12"><q-separator /></div>
+										<div class="col-12 row q-pa-xs q-px-md">
+											<span class="text-grey-7 col-6">คงเหลือ</span>
+											<span class="text-weight-bold">{{ item.remain }}</span>
+										</div>
+									</div>
+								</div>
+							</q-card>
+						</div>
+					</div>
+					<div class="col-6 row">
+						<div bordered class="col-12 row justify-center q-px-md q-pb-md q-col-gutter-sm" v-for="item in filteredSick" :key="item.text">
+							<div class="col-xs-12 col-sm-12 row q-col-gutter-sm">
+								<div class="col-12 row" v-if="item.text === 'ลาป่วย'">
+									<q-card bordered flat class="shadow-0 col-12 fit row items-center q-px-lg">
+										<div class="text-subtitle2 col-4">ลาป่วย</div>
+										<div class="text-subtitle2 col-8">
+											<span class="text-grey-7 q-pr-md">ใช้ไป</span>
+											<span class="text-weight-bold">{{ item.use }}</span>
+											<span class="text-grey-7 q-pl-md">ลา</span>
+										</div>
+									</q-card>
+								</div>
+							</div>
+						</div>
+						<div bordered class="col-12 row justify-center q-px-md q-pb-md q-col-gutter-sm" v-for="item in filteredBusi" :key="item.text">
+							<div class="col-xs-12 col-sm-12 row q-col-gutter-sm">
+								<div class="col-12 row" v-if="item.text === 'ลากิจส่วนตัว'">
+									<q-card bordered flat class="shadow-0 col-12 fit row items-center q-px-lg">
+										<div class="text-subtitle2 col-4">ลากิจส่วนตัว</div>
+										<div class="text-subtitle2 col-8">
+											<span class="text-grey-7 q-pr-md">ใช้ไป</span>
+											<span class="text-weight-bold">{{ item.use }}</span>
+											<span class="text-grey-7 q-pl-md">ลา</span>
+										</div>
+									</q-card>
+								</div>
+							</div>
+						</div>
+					</div>
+				</q-card>
+			</div>
 
 			<div class="row col-12">
 				<!-- แสดงปฏิทิน -->