hrms-user/src/modules/01_dashboard/views/Dashboard.vue

<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"

const $q = useQuasar()
const mixin = useCounterMixin()
const { showLoader, hideLoader, date2Thai } = mixin

const fullname = ref<string>("ธัญลักษณ์")
const inboxList = ref<any>([
	//   {
	//     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,
	},	
])
onMounted(async () => {
	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()
		})
}

const transferToPage = (path?: string) => {
	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>

							<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;
}
.my-menu-link .q-hoverable {
	border-radius: 10px;
}
.my-menu {
	background: #f1f0f04a;
	border-radius: 10px;
}
.q-card {
	border-radius: 12px;
}
.text-18px {
	font-size: 1.25em;
}
.noactive {
	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;
}
.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%;
}
</style>