From 75c677f58c886ca3683fe19bc013ac8dae0eeff1 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 13 Dec 2023 15:34:28 +0700
Subject: [PATCH] no message

---
 src/modules/01_dashboard/views/Dashboard.vue | 427 +++++++++++--------
 1 file changed, 242 insertions(+), 185 deletions(-)

diff --git a/src/modules/01_dashboard/views/Dashboard.vue b/src/modules/01_dashboard/views/Dashboard.vue
index d67d776..1bd3a57 100644
--- a/src/modules/01_dashboard/views/Dashboard.vue
+++ b/src/modules/01_dashboard/views/Dashboard.vue
@@ -1,216 +1,273 @@
 <script setup lang="ts">
-import { ref, onMounted, Static } from "vue"
-const link = ref<number>(1)
-import { useQuasar } from "quasar"
-import router from "@/router"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useCounterMixin } from "@/stores/mixin"
+import { ref, onMounted, Static } from "vue";
+const link = ref<number>(1);
+import { useQuasar } from "quasar";
+import router from "@/router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 
-const $q = useQuasar()
-const mixin = useCounterMixin()
-const { showLoader, hideLoader, date2Thai } = mixin
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, date2Thai } = mixin;
 
-const fullname = ref<string>("ธัญลักษณ์")
+const fullname = ref<string>("ธัญลักษณ์");
 const inboxList = ref<any>([
-	//   {
-	//     no: 1,
-	//     sender: "เจ้าหน้าที่ทะเบียนประวัติ",
-	//     subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
-	//     timereceive: "13/12/2565",
-	//     body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
-	//     ratingModel: 0,
-	//   },
-])
+  //   {
+  //     no: 1,
+  //     sender: "เจ้าหน้าที่ทะเบียนประวัติ",
+  //     subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
+  //     timereceive: "13/12/2565",
+  //     body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
+  //     ratingModel: 0,
+  //   },
+]);
 const items = ref<any>([
-	{
-		icon: "mdi-account-group-outline",
-		title: "แผนผังองค์กร",
-		sub: "ดูแผนผังองค์กร",
-		color: "blue-3",
-		path: "",
-		active: false,
-	},
-	{
-		icon: "mdi-clipboard-account-outline",
-		title: "ประเมินผล",
-		sub: "ข้อมูลการประเมินผลการปฏิบัติราชการ",
-		color: "lime-4",
-		path: "",
-		active: false,
-	},
-	{
-		icon: "mdi-calendar-account-outline",
-		title: "การลา",
-		sub: "ดู/ลงเวลา ทำเรื่องลา",
-		color: "cyan-3",
-		path: "/leave",
-		active: false,
-	},
-	{
-		icon: "mdi-folder-account-outline",
-		title: "ผลงาน",
-		sub: "ดูผลงาน",
-		color: "light-green-3",
-		path: "",
-		active: false,
-	},
-	{
-		icon: "mdi-account-arrow-right-outline",
-		title: "ขอโอน",
-		sub: "ทำเรื่องขอโอนย้าย",
-		color: "deep-purple-3",
-		path: "/transfer",
-		active: false,
-	},
-	{
-		icon: "mdi-account-remove-outline",
-		title: "ลาออก",
-		sub: "ทำเรื่องลาออก",
-		color: "orange-3",
-		path: "/retire",
-		active: false,
-	},
-	{
-		icon: "mdi-scale-balance",
-		title: "อุทธรณ์ร้องทุกข์",
-		sub: "ทำเรื่องขออุทธรณ์ หรือร้องทุกข์",
-		color: "green-3",
-		path: "/appeal-complain",
-		active: false,
-	},	
-])
+  {
+    icon: "mdi-account-group-outline",
+    title: "แผนผังองค์กร",
+    sub: "ดูแผนผังองค์กร",
+    color: "blue-3",
+    path: "",
+    active: false,
+  },
+  {
+    icon: "mdi-clipboard-account-outline",
+    title: "ประเมินผล",
+    sub: "ข้อมูลการประเมินผลการปฏิบัติราชการ",
+    color: "lime-4",
+    path: "/assess",
+    active: false,
+  },
+  {
+    icon: "mdi-calendar-account-outline",
+    title: "การลา",
+    sub: "ดู/ลงเวลา ทำเรื่องลา",
+    color: "cyan-3",
+    path: "/leave",
+    active: false,
+  },
+  {
+    icon: "mdi-folder-account-outline",
+    title: "ผลงาน",
+    sub: "ดูผลงาน",
+    color: "light-green-3",
+    path: "",
+    active: false,
+  },
+  {
+    icon: "mdi-account-arrow-right-outline",
+    title: "ขอโอน",
+    sub: "ทำเรื่องขอโอนย้าย",
+    color: "deep-purple-3",
+    path: "/transfer",
+    active: false,
+  },
+  {
+    icon: "mdi-account-remove-outline",
+    title: "ลาออก",
+    sub: "ทำเรื่องลาออก",
+    color: "orange-3",
+    path: "/retire",
+    active: false,
+  },
+  {
+    icon: "mdi-scale-balance",
+    title: "อุทธรณ์ร้องทุกข์",
+    sub: "ทำเรื่องขออุทธรณ์ หรือร้องทุกข์",
+    color: "green-3",
+    path: "/appeal-complain",
+    active: false,
+  },
+]);
 onMounted(async () => {
-	await fetchlistInbox()
-})
+  await fetchlistInbox();
+});
 const fetchlistInbox = async () => {
-	showLoader()
-	await http
-		.get(config.API.msgInbox)
-		.then(res => {
-			let data = res.data.result
-			console.log(data)
-			let listItem: any = []
-			data.map((e: any) => {
-				listItem.push({
-					no: e.id ?? "",
-					sender: e.createdFullName == "" || e.createdFullName == null ? "เจ้าหน้าที่" : e.createdFullName,
-					subject: e.subject ?? "",
-					timereceive: date2Thai(e.createdAt),
-					body: e.body ?? "",
-					ratingModel: 0,
-				})
-			})
-			inboxList.value = listItem
-		})
-		.catch(err => {
-			console.log(err)
-		})
-		.finally(() => {
-			hideLoader()
-		})
-}
+  showLoader();
+  await http
+    .get(config.API.msgInbox)
+    .then((res) => {
+      let data = res.data.result;
+      console.log(data);
+      let listItem: any = [];
+      data.map((e: any) => {
+        listItem.push({
+          no: e.id ?? "",
+          sender:
+            e.createdFullName == "" || e.createdFullName == null
+              ? "เจ้าหน้าที่"
+              : e.createdFullName,
+          subject: e.subject ?? "",
+          timereceive: date2Thai(e.createdAt),
+          body: e.body ?? "",
+          ratingModel: 0,
+        });
+      });
+      inboxList.value = listItem;
+    })
+    .catch((err) => {
+      console.log(err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
 
 const transferToPage = (path?: string) => {
-	router.push(`${path}`)
-}
+  router.push(`${path}`);
+};
 </script>
 <template>
-	<div class="col-12 row q-col-gutter-md" style="padding-top: 1.8%">
-		<div class="col-12 row" v-if="!$q.screen.gt.xs">
-			<div class="text-white text-weight-light text-18px">สวัสดี, {{ fullname }}</div>
-			<div style="color: #ffffff" class="text-18px text-weight-medium col-12">ระบบทรัพยากรบุคคล</div>
-		</div>
-		<div class="col-xs-12 col-sm-12 col-md-9">
-			<div class="row justify-start q-col-gutter-md">
-				<div class="col-xs-6 col-sm-4 col-md-4 col-lg-3 col-xl-2 row" v-for="(item, j) in items" :key="j">
-					<q-card bordered @click="transferToPage(item.path)" class="noactive col-12">
-						<div class="col-12">
-							<q-avatar :color="item.color" text-color="white" :size="$q.screen.gt.xs ? '55px' : '40px'">
-								<q-icon :name="item.icon" :size="$q.screen.gt.xs ? '28px' : '20px'" color="black" />
-							</q-avatar>
-						</div>
-						<div class="q-pt-md col-12 text-left text-18px">
-							{{ item.title }}
-						</div>
-						<div class="col-12 text-left text-grey text-weight-regular gt-xs" style="font-size: 14px">
-							{{ item.sub }}
-						</div>
-					</q-card>
-				</div>
-			</div>
-		</div>
-		<div class="col-xs-12 col-sm-12 col-md-3 row">
-			<q-card flat bordered :style="$q.screen.gt.xs ? 'max-height: 74vh' : 'height: auto;'" class="q-pb-md col-12">
-				<div class="col-12 row q-pa-md">
-					<div class="text-subtitle1 text-weight-bold text-dark">กล่องข้อความ</div>
-					<q-space />
-					<q-btn dense icon="mdi-dots-vertical" color="grey-6" size="11px" flat />
-				</div>
-				<q-scroll-area style="height: 64vh" v-if="inboxList.length > 1">
-					<q-list v-for="(contact, index) in inboxList" :key="index" class="q-px-md">
-						<q-item clickable v-ripple class="q-py-md q-mb-sm my-menu" :active="link === contact.no" @click="link = contact.no" active-class="my-menu-link">
-							<q-item-section>
-								<q-item-label>{{ contact.sender }}</q-item-label>
-								<q-item-label caption class="text-grey-6" lines="2">{{ contact.subject }}</q-item-label>
-							</q-item-section>
+  <div class="col-12 row q-col-gutter-md" style="padding-top: 1.8%">
+    <div class="col-12 row" v-if="!$q.screen.gt.xs">
+      <div class="text-white text-weight-light text-18px">
+        สวัสดี, {{ fullname }}
+      </div>
+      <div style="color: #ffffff" class="text-18px text-weight-medium col-12">
+        ระบบทรัพยากรบุคคล
+      </div>
+    </div>
+    <div class="col-xs-12 col-sm-12 col-md-9">
+      <div class="row justify-start q-col-gutter-md">
+        <div
+          class="col-xs-6 col-sm-4 col-md-4 col-lg-3 col-xl-2 row"
+          v-for="(item, j) in items"
+          :key="j"
+        >
+          <q-card
+            bordered
+            @click="transferToPage(item.path)"
+            class="noactive col-12"
+          >
+            <div class="col-12">
+              <q-avatar
+                :color="item.color"
+                text-color="white"
+                :size="$q.screen.gt.xs ? '55px' : '40px'"
+              >
+                <q-icon
+                  :name="item.icon"
+                  :size="$q.screen.gt.xs ? '28px' : '20px'"
+                  color="black"
+                />
+              </q-avatar>
+            </div>
+            <div class="q-pt-md col-12 text-left text-18px">
+              {{ item.title }}
+            </div>
+            <div
+              class="col-12 text-left text-grey text-weight-regular gt-xs"
+              style="font-size: 14px"
+            >
+              {{ item.sub }}
+            </div>
+          </q-card>
+        </div>
+      </div>
+    </div>
+    <div class="col-xs-12 col-sm-12 col-md-3 row">
+      <q-card
+        flat
+        bordered
+        :style="$q.screen.gt.xs ? 'max-height: 74vh' : 'height: auto;'"
+        class="q-pb-md col-12"
+      >
+        <div class="col-12 row q-pa-md">
+          <div class="text-subtitle1 text-weight-bold text-dark">
+            กล่องข้อความ
+          </div>
+          <q-space />
+          <q-btn
+            dense
+            icon="mdi-dots-vertical"
+            color="grey-6"
+            size="11px"
+            flat
+          />
+        </div>
+        <q-scroll-area style="height: 64vh" v-if="inboxList.length > 1">
+          <q-list
+            v-for="(contact, index) in inboxList"
+            :key="index"
+            class="q-px-md"
+          >
+            <q-item
+              clickable
+              v-ripple
+              class="q-py-md q-mb-sm my-menu"
+              :active="link === contact.no"
+              @click="link = contact.no"
+              active-class="my-menu-link"
+            >
+              <q-item-section>
+                <q-item-label>{{ contact.sender }}</q-item-label>
+                <q-item-label caption class="text-grey-6" lines="2">{{
+                  contact.subject
+                }}</q-item-label>
+              </q-item-section>
 
-							<q-item-section side top>
-								<q-item-label caption>{{ contact.timereceive }}</q-item-label>
-							</q-item-section>
-						</q-item>
-					</q-list>
-				</q-scroll-area>
-				<q-banner rounded class="bg-amber-1 text-center q-mx-sm" v-else>
-					<div class="text-yellow-10">
-						<q-icon name="mdi-alert-box" class="q-mx-xs" size="sm" color="yellow-10" />
-						ไม่พบข้อความ
-					</div>
-				</q-banner>
-			</q-card>
-		</div>
-	</div>
+              <q-item-section side top>
+                <q-item-label caption>{{ contact.timereceive }}</q-item-label>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-scroll-area>
+        <q-banner rounded class="bg-amber-1 text-center q-mx-sm" v-else>
+          <div class="text-yellow-10">
+            <q-icon
+              name="mdi-alert-box"
+              class="q-mx-xs"
+              size="sm"
+              color="yellow-10"
+            />
+            ไม่พบข้อความ
+          </div>
+        </q-banner>
+      </q-card>
+    </div>
+  </div>
 </template>
 <style>
 .my-menu-link {
-	color: #1bb19b;
-	background: #ebf9f7 !important;
-	font-weight: 600;
-	border-radius: 10px;
+  color: #1bb19b;
+  background: #ebf9f7 !important;
+  font-weight: 600;
+  border-radius: 10px;
 }
 .my-menu-link .q-hoverable {
-	border-radius: 10px;
+  border-radius: 10px;
 }
 .my-menu {
-	background: #f1f0f04a;
-	border-radius: 10px;
+  background: #f1f0f04a;
+  border-radius: 10px;
 }
 .q-card {
-	border-radius: 12px;
+  border-radius: 12px;
 }
 .text-18px {
-	font-size: 1.25em;
+  font-size: 1.25em;
 }
 .noactive {
-	color: #35473c;
-	border-radius: 12px;
-	padding: 10%;
-	transition: 0.1s ease;
-	opacity: 1;
-	cursor: pointer;
+  color: #35473c;
+  border-radius: 12px;
+  padding: 10%;
+  transition: 0.1s ease;
+  opacity: 1;
+  cursor: pointer;
 }
 .noactive:hover {
-	background: #ebf9f7;
-	color: #1bb19b !important;
-	font-weight: 600;
-	border: 1px solid #6dbdb142;
+  background: #ebf9f7;
+  color: #1bb19b !important;
+  font-weight: 600;
+  border: 1px solid #6dbdb142;
 }
 .disabledcard {
-	color: rgba(209, 209, 209, 0.733) !important;
-	border-color: rgba(207, 207, 207, 0.322) !important;
-	box-shadow: none !important;
-	border-radius: 12px;
-	cursor: no-drop !important;
-	padding: 10%;
+  color: rgba(209, 209, 209, 0.733) !important;
+  border-color: rgba(207, 207, 207, 0.322) !important;
+  box-shadow: none !important;
+  border-radius: 12px;
+  cursor: no-drop !important;
+  padding: 10%;
 }
 </style>