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

<script setup lang="ts">
import { ref, Static } from "vue";
const link = ref<number>(1);
import { useQuasar } from "quasar";
import router from "@/router";

const $q = useQuasar();
const fullname = ref<string>("ธัญลักษณ์");
const inboxList = ref<any>([
  {
    no: 1,
    sender: "เจ้าหน้าที่ทะเบียนประวัติ",
    subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
    timereceive: "13/12/2565",
    body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
    ratingModel: 0,
  },
  {
    no: 2,
    sender: "เจ้าหน้าที่ทะเบียนประวัติ",
    subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
    timereceive: "13/12/2565",
    body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
    ratingModel: 1,
  },
  {
    no: 3,
    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: "",
        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: "",
        active: false,
    }
]);

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: 80vh' : '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-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-banner rounded class="bg-amber-1 text-center q-mx-sm" v-if="inboxList.length < 1">
                        <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>