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";
import PopupReplyInbox from "@/components/PopupReplyInbox.vue";

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: "/evaluate",
    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;
      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}`);
};

// Dialog Reply
const modalReply = ref<boolean>(false);
const contactNo = ref<string>();
function dialogRepleOpen(id: string) {
  contactNo.value = id;
  modalReply.value = true;
}

function modalReplyClose() {
  contactNo.value = "";
  modalReply.value = false;
}
</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 > 0">
          <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-section side top>
                <q-btn
                  flat
                  round
                  dense
                  icon="mdi-reply"
                  size="10px"
                  color="grey-7"
                  @click="dialogRepleOpen(contact.no)"
                >
                  <q-tooltip>ตอบกลับข้อความ</q-tooltip>
                </q-btn>
              </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>
  <PopupReplyInbox
    :modal="modalReply"
    :idInbox="contactNo"
    :click-close="modalReplyClose"
  />
</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>