hrms-checkin/src/views/MainView.vue

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { useQuasar } from 'quasar'
import { useRouter } from 'vue-router'

import http from '@/plugins/http'
import config from '@/app.config'
import avatar from '@/assets/avatar_user.jpg'
import { logout, tokenParsed } from '@/plugins/auth'
import { useCounterMixin } from '@/stores/mixin'

import type { notiType } from '@/interface/index/Main'
import type { Noti } from '@/interface/response/Main'

const mixin = useCounterMixin()
const { date2Thai, hideLoader, messageError, dialogRemove, success } = mixin
const router = useRouter()
const $q = useQuasar()

// landing page config url
const configParam = {
  landingPageUrl: import.meta.env.VITE_URL_SSO,
}

const fullName = ref<string>('') //ชื่อผู้ใช้งาน
const notiTrigger = ref<boolean>(false) // เปิด,ปิดรายการ
const notiList = ref<notiType[]>([]) // รายการแจ้งเตือน
const totalNotiList = ref<number>(0) //จำนวนการรายการแจ้งเตือน
const totalNoti = ref<number>(0) //จำนวนการแจ้งเตือน
const statusLoad = ref<boolean>(false) // สถานะการโหลด
//รูปแบบการแสดงผลของวันที่และเวลา
const thaiOptions: Intl.DateTimeFormatOptions = {
  hour: '2-digit',
  minute: '2-digit',
}

/**
 *  ฟังก์ชั่นดึงข้อมูลจำนวนการแจ้งเตือน
 */
async function fetchTotolNotificate() {
  await http
    .get(config.API.msgNotificateTotal)
    .then(async (res) => {
      totalNoti.value = await res.data.result
    })
    .catch((err) => {
      messageError($q, err)
    })
}

/**
 * ฟังก์ชั่นดึงข้อมูลรายการแจ้งเตือน
 * @param index page ที่ต้องการโหลดข้อมูล
 * @param type DEL คือโหลดหลังลบข้อความ, NOMAL คือกรณีโหลดข้อมูลปกติ
 */
async function fetchNotifications(index: number, type: string) {
  await http
    .get(config.API.msgNotificate + `?page=${index}&pageSize=${20}`)
    .then((res) => {
      const response = res.data.result.data
      totalNotiList.value = res.data.result.total
      const list: notiType[] = []
      if (type === 'DEL') {
        notiList.value = []
      }
      response.map((e: Noti) => {
        list.push({
          id: e.id,
          sender:
            e.createdFullName == '' || e.createdFullName == null
              ? 'เจ้าหน้าที่'[0]
              : e.createdFullName[0],
          body: e.body ?? '',
          timereceive: e.receiveDate,
          isOpen: e.isOpen,
        })
      })
      notiList.value.push(...list)
      statusLoad.value = totalNotiList.value === 0 ? true : false
    })
    .catch((err) => {
      messageError($q, err)
    })
}

/**
 * function ลบรายการแจ้งเตือน
 * @param id noti
 */
async function onClickDelete(id: string, index: number) {
  dialogRemove($q, async () => {
    await http
      .delete(config.API.msgId(id))
      .then(async () => {
        notiList.value.splice(index, 1)
        totalNotiList.value--
        notiList.value.length === 14 && (await fetchNotifications(1, 'DEL'))
        success($q, 'ลบข้อมูลสำเร็จ')
      })
      .catch((e) => {
        messageError($q, e)
      })
      .finally(async () => {
        hideLoader()
      })
  })
}

/**
 * function logout
 */
function onClickLogout() {
  $q.dialog({
    title: 'ยืนยันการออกจากระบบ',
    message: `ต้องการออกจากระบบใช่หรือไม่?`,
    cancel: 'ยกเลิก',
    ok: 'ยืนยัน',
    persistent: true,
  }).onOk(async () => {
    await http.post(config.API.keycloakLogSSO, { text: 'ออกจากระบบ' })
    await logout()
  })
}

const page = ref<number>(0)

/**
 * โหลดรายการแจ้งเตือนเพิ่มเมื่อ scroll
 * @param index
 * @param done
 */
function onLoad(index: number, done: Function) {
  if (
    notiList.value.length < totalNotiList.value ||
    (notiList.value.length == 0 && totalNotiList.value === 0)
  ) {
    page.value++
    setTimeout(async () => {
      await fetchNotifications(page.value, 'NOMAL')
      await done()
    }, 1500)
  }
}

// landing page redirect
const landingPageUrl = ref<string>(getLandingUrl())
function getLandingUrl() {
  if (window.location.hostname === 'bmasso.bma.go.th') {
    return `${configParam.landingPageUrl}/landing?mode=dev`
  } else if (window.location.hostname === 'bma-ehr.frappet.com') {
    return `${configParam.landingPageUrl}/landing?mode=prod`
  } else {
    return `${configParam.landingPageUrl}/landing?mode=dev`
  }
}

/** ฟังก์ชันเรียกข้อมูลผู้ใช่งาน*/
async function fetchKeycloakPosition() {
  await http
    .get(config.API.keycloakPosition())
    .then(async (res) => {
      const data = await res.data.result
      //เช็คว่ามีรูปไหม ถ้ามีรูปเรียกข้อมูลรูป
      if (data.avatarName) {
        await getImg(data.profileId, data.avatarName)
      } else {
        profileImg.value = avatar
      }
    })
    .catch((err) => {
      messageError($q, err)
    })
}

const profileImg = ref<string>('')
async function getImg(id: string, pathName: string) {
  await http
    .get(config.API.fileByFile('ทะเบียนประวัติ', 'โปรไฟล์', id, pathName))
    .then((res) => {
      profileImg.value = res.data.downloadUrl
    })
}

watch(
  () => notiTrigger.value,
  () => {
    if (!notiTrigger.value) {
      const updatedNotifications = notiList.value.map((item) => ({
        ...item,
        isOpen: true,
      }))
      notiList.value = updatedNotifications
      fetchTotolNotificate()
    }
  }
)

onMounted(async () => {
  fetchTotolNotificate()
  fetchKeycloakPosition()
  const checkTokenParsed = await tokenParsed()
  if (checkTokenParsed != null) {
    fullName.value = checkTokenParsed.name
  }
})
</script>

<template>
  <q-layout view="hHh LpR fFr">
    <!-- header -->
    <q-header flat class="text-dark col-12 bg-top header-br" height-hint="7">
      <q-toolbar
        class="q-my-xs items-center"
        :style="$q.screen.gt.xs ? 'padding: 1% 2%;' : 'padding: 1% 4%;'"
      >
        <div class="row items-center">
          <q-avatar style="background: linear-gradient(#4ce2d3, #02a998)">
            <q-img
              src="@/assets/logo1.png"
              spinner-color="white"
              style="height: 35px; width: 35px"
            />
          </q-avatar>
          <div class="row q-ml-md text-left items-center gt-xs">
            <div
              style="color: #ffffff; line-height: 10px"
              class="text-body2 text-weight-bolder col-12"
            >
              ระบบ<span class="text-primary">ทรัพยากรบุคคล</span>
            </div>
            <div class="text-caption text-white">กรุงเทพมหานคร</div>
          </div>
        </div>
        <q-space />
        <q-btn
          icon="history"
          unelevated
          rounded
          dense
          flat
          color="white"
          @click="router.push('/history')"
        />
        <q-btn round dense flat size="13px" class="q-mx-md">
          <q-icon name="notifications" size="24px" color="white" />

          <q-badge
            rounded
            v-show="totalNoti !== 0"
            color="negative"
            text-color="white"
            floating
            >{{ totalNoti }}</q-badge
          >

          <q-menu
            v-model="notiTrigger"
            anchor="bottom middle"
            self="top middle"
            class="q-mx-lg q-mt-xl"
            style="width: 480px"
          >
            <div class="q-px-md q-py-sm row col-12 items-center">
              <div class="text-subtitle1 text-weight-medium">การแจ้งเตือน</div>
              <q-space />
              <div class="text-grey-5" style="font-size: 12px">
                ทั้งหมด {{ totalNotiList }} ข้อความ
              </div>
            </div>
            <q-infinite-scroll @load="onLoad" v-if="statusLoad === false">
              <div
                v-for="(item, index) in notiList"
                :key="index"
                class="caption"
              >
                <q-item v-ripple class="mytry q-py-sm" dense>
                  <q-item-section avatar top style="min-width: 10px">
                    <q-avatar
                      rounded
                      color="primary"
                      size="25px"
                      text-color="white"
                    >
                      <span class="text-weight-medium text-uppercase">{{
                        item.body[0]
                      }}</span>
                    </q-avatar>
                  </q-item-section>
                  <q-item-section>
                    <q-item-label
                      caption
                      :class="
                        item.isOpen
                          ? 'text-grey-7'
                          : 'text-black text-weight-medium'
                      "
                      >{{ item.body }}</q-item-label
                    >
                    <q-item-label caption class="text-weight-light">
                      {{ date2Thai(item.timereceive) }}
                      {{
                        new Date(item.timereceive).toLocaleTimeString(
                          'th-TH',
                          thaiOptions
                        )
                      }}
                      น. <q-space />
                    </q-item-label>
                  </q-item-section>
                  <div>
                    <q-btn
                      size="sm"
                      unelevated
                      dense
                      icon="mdi-close"
                      class="mybtn q-mx-xs"
                      @click="onClickDelete(item.id, index)"
                    ></q-btn>
                  </div>
                </q-item>
              </div>

              <template
                v-slot:loading
                v-if="
                  notiList.length < totalNotiList ||
                  (notiList.length === 0, totalNotiList === 0)
                "
              >
                <div class="row justify-center q-my-md">
                  <q-spinner-dots color="primary" size="40px" />
                </div>
              </template>
            </q-infinite-scroll>
            <div class="q-pa-md" v-else>
              <q-banner rounded class="bg-amber-1 text-center">
                <div class="text-yellow-10">
                  <q-icon
                    name="mdi-alert-box"
                    class="q-mx-xs"
                    size="sm"
                    color="yellow-10"
                  />
                  ไม่มีข้อมูล
                </div>
              </q-banner>
            </div>
          </q-menu>
        </q-btn>

        <q-btn round dense color="white" flat style="font-size: 16px">
          <q-avatar size="30px">
            <q-img :src="profileImg" spinner-color="white" />
          </q-avatar>
          <q-menu style="width: 250px">
            <div class="column items-center col-12 q-py-md" color="grey-3">
              <q-avatar size="72px" color="grey-4">
                <!-- <q-icon color="primary" name="account_circle" size="32px" /> -->
                <q-img :src="profileImg" spinner-color="black" />
                <!-- <img :src="require('@/assets/logo.png')" /> -->
              </q-avatar>
              <div class="text-subtitle2 q-mt-md q-mb-xs text-center">
                {{ fullName }}
              </div>
            </div>
            <!-- <q-list>
                <q-item>
                  <q-item-section avatar>
                    <q-icon color="primary" name="account_circle" />
                  </q-item-section>

                  <q-item-section>{{ fullName }}</q-item-section>
                </q-item>
              </q-list> -->

            <q-separator />
            <q-list dense class="q-py-sm">
              <q-item clickable :href="landingPageUrl">
                <q-item-section avatar>
                  <q-avatar
                    color="blue"
                    text-color="white"
                    icon="home"
                    size="24px"
                    font-size="14px"
                  />
                </q-item-section>
                <q-item-section class="q-py-sm"> Landing Page </q-item-section>
              </q-item>

              <q-item clickable @click="onClickLogout">
                <q-item-section avatar>
                  <q-avatar
                    color="red"
                    text-color="white"
                    icon="logout"
                    size="24px"
                    font-size="14px"
                  />
                </q-item-section>
                <q-item-section class="q-py-sm"> ออกจากระบบ </q-item-section>
              </q-item>
            </q-list>
          </q-menu>
        </q-btn>
      </q-toolbar>
    </q-header>
    <div
      class="bg-top"
      :style="$q.screen.gt.xs ? 'height: 200px;' : 'height: 200px;'"
    />
    <q-page-container class="bg-grey-2 q-pb-md">
      <q-page
        :style="
          $q.screen.gt.xs
            ? 'padding: 1.8% 2%; margin-top: -200px;'
            : 'padding: 5% 4%; margin-top: -200px;'
        "
      >
        <router-view :key="$route.fullPath" />
      </q-page>
    </q-page-container>
  </q-layout>
</template>

<style>
.bg-drawer {
  background: #242a3d;
}

.menu {
  padding-bottom: 5px;
  padding-top: 5px;
}

.tabsHome .q-tab__icon {
  font-size: 18px;
}

.border-100 {
  border-radius: 100px;
}

.bg-top {
  background: #273238 !important;
}

.header-br {
  border-bottom: 1px solid #fdfdfd31;
}

.menuActive {
  background: #1e2234;
  border-radius: 0 100px 100px 0;
  margin-right: 4%;
}

.q-card {
  box-shadow: 3px 3px 20px -10px rgba(151, 150, 150, 0.261) !important;
  /* border: 1px solid #eeeded; */
  border-radius: 8px;
}

.q-menu {
  box-shadow: 3px 3px 10px 1px rgba(95, 95, 95, 0.15) !important;
}

.toptitle {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 1.2%;
}

.q-field--outlined .q-field__control {
  border-radius: 5px;
}

.q-field--outlined .q-field__control:before {
  border-color: #c8d3db;
}

/* .q-field--outlined .q-icon {
  color: #7474747f;
} */

.shadow-0 {
  box-shadow: none !important;
}

.btnBlue {
  background-color: #016987;
  color: #fff;
}
</style>