jws-frontend/src/layouts/MainLayout.vue

<script setup lang="ts">
import { ref } from 'vue';
import { storeToRefs } from 'pinia';
import { useQuasar } from 'quasar';
import { getName, getRole, logout } from 'src/services/keycloak';

import useLoader from 'stores/loader';
import DrawerComponent from 'components/DrawerComponent.vue';

interface NotificationButton {
  item: string;
  color: string;
  active: boolean;
}

interface Notification {
  id: string;
  title: string;
  content: string;
  read: boolean;
}

const $q = useQuasar();
const loaderStore = useLoader();

const { visible } = storeToRefs(loaderStore);

const leftDrawerOpen = ref($q.screen.gt.sm);
const filterUnread = ref(false);
const unread = ref<number>(1);
const notiOpen = ref(false);
const notiMenu = ref<NotificationButton[]>([
  {
    item: 'ทั้งหมด',
    color: 'noti-switch-on',
    active: true,
  },
  {
    item: 'ยังไม่ได้อ่าน',
    color: 'noti-switch-off',
    active: false,
  },
]);
const notification = ref<Notification[]>([
  {
    id: '1',
    title: 'test',
    content: 'test',
    read: false,
  },
  {
    id: '2',
    title: 'test',
    content: 'test',
    read: false,
  },
]);

function setActive(button: NotificationButton) {
  notiMenu.value = notiMenu.value.map((current) => ({
    item: current.item,
    color: current.item !== button.item ? 'noti-switch-off' : 'noti-switch-on',
    active: current.item === button.item,
  }));
  if (button.item === 'ยังไม่ได้อ่าน') {
    // noti.value?.result &&
    filterUnread.value = true;
  }
  if (button.item === 'ทั้งหมด') {
    filterUnread.value = false;
  }
}

function doLogout() {
  logout();
}
</script>

<template>
  <q-layout view="lHh Lpr lFf">
    <q-header style="background-color: var(--background)">
      <div class="row items-center justify-between q-py-md q-px-lg">
        <q-btn
          round
          unelevated
          id="drawer-toggler"
          :icon="leftDrawerOpen ? 'mdi-backburger' : 'mdi-forwardburger'"
          :class="{ bordered: $q.dark.isActive }"
          class="surface-2"
          style="color: var(--gray-6)"
          @click="leftDrawerOpen = !leftDrawerOpen"
        />

        <!-- notification -->
        <div class="q-gutter-x-md row items-end">
          <q-btn
            round
            dense
            flat
            class="noti-circle"
            :class="{ bordered: $q.dark.isActive, dark: $q.dark.isActive }"
            style="color: var(--surface-1)"
          >
            <q-icon name="mdi-bell" size="20px" />
            <q-badge v-if="unread !== 0" rounded floating color="negative">
              {{ unread }}
            </q-badge>

            <q-menu
              :offset="[0, 10]"
              anchor="bottom middle"
              self="top middle"
              style="width: 300px"
              @before-hide="notiOpen = false"
            >
              <div class="q-px-md q-py-sm row col-12 items-center">
                <div class="text-subtitle1 text-weight-bold">แจ้งเตือน</div>
                <q-space />
              </div>
              <div class="q-px-md q-pb-md q-gutter-x-md">
                <q-btn
                  rounded
                  padding="0px 10px"
                  class="text-weight-medium"
                  v-for="(btn, index) in notiMenu"
                  :flat="!btn.active"
                  :unelevated="btn.active"
                  :key="index"
                  :label="btn.item"
                  :class="btn.color"
                  @click="setActive(btn)"
                />
              </div>
              <q-infinite-scroll :offset="250">
                <div class="caption cursor-pointer">
                  <q-item
                    dense
                    clickable
                    class="q-py-sm"
                    v-ripple
                    v-for="item in notification"
                    :key="item.id"
                  >
                    <q-avatar
                      color="positive"
                      style="height: 30px; width: 30px"
                    >
                      <q-icon color="white" name="mdi-check" />
                    </q-avatar>

                    <div class="col-6 column text-caption q-pl-md ellipsis">
                      <span class="block ellipsis full-width text-weight-bold">
                        {{ item.title }}
                      </span>
                      <span class="block ellipsis full-width text-stone">
                        {{ item.content }}
                      </span>
                    </div>
                    <span align="right" class="col text-caption text-stone">
                      <!-- {{ moment(item.createdAt).fromNow() }} -->
                      5 s
                    </span>
                    <q-tooltip
                      anchor="top middle"
                      self="bottom middle"
                      :delay="1000"
                      :offset="[10, 10]"
                    >
                      {{ item.content }}
                    </q-tooltip>
                  </q-item>
                </div>
                <!-- <template v-slot:loading>
                  <div
                    class="text-center q-my-md"
                    v-if="noti && noti?.result.length < noti?.total"
                  >
                    <q-spinner-dots color="primary" size="40px" />
                  </div>
                </template> -->
              </q-infinite-scroll>
            </q-menu>
          </q-btn>

          <!-- User -->
          <q-btn-dropdown
            rounded
            dense
            flat
            no-caps
            color="dark"
            class="q-pa-none account-menu-down dropdown-menu"
          >
            <template v-slot:label>
              <q-item dense class="q-pa-none">
                <q-item-section
                  avatar
                  class="q-pa-none"
                  style="min-width: 30px"
                >
                  <q-avatar class="bg-primary" />
                </q-item-section>
                <q-item-section
                  class="text-left text-dark q-pa-none q-px-md"
                  v-if="$q.screen.gt.xs"
                >
                  <q-item-label class="text-caption column">
                    <span class="text-weight-bold q-pb-xs text-primary">
                      {{ getName() }}
                    </span>
                    <div style="font-size: 11px; color: var(--foreground)">
                      {{ getRole()?.includes('admin') ? 'Admin' : 'User' }}
                    </div>
                  </q-item-label>
                </q-item-section>
              </q-item>
            </template>

            <q-list class="dropdown-menu">
              <q-item clickable>
                <q-item-section avatar style="min-width: 30px">
                  <q-icon
                    color="secondary"
                    size="18px"
                    name="mdi-lock-outline"
                  />
                </q-item-section>
                <q-item-section>
                  <q-item-label>เปลี่ยนรหัสผ่าน</q-item-label>
                </q-item-section>
              </q-item>
              <q-item clickable v-close-popup @click="doLogout()">
                <q-item-section avatar style="min-width: 30px">
                  <q-icon
                    color="primary"
                    size="18px"
                    name="mdi-logout-variant"
                  />
                </q-item-section>
                <q-item-section>
                  <q-item-label>ออกจากระบบ</q-item-label>
                </q-item-section>
              </q-item>
            </q-list>
          </q-btn-dropdown>

          <!-- theme -->
          <q-btn
            round
            unelevated
            id="drawer-toggler"
            icon="mdi-switch"
            :class="{ bordered: $q.dark.isActive }"
            class="surface-2"
            style="color: var(--gray-6)"
            @click="$q.dark.toggle()"
          />
        </div>
      </div>
    </q-header>

    <q-page-container style="background-color: transparent">
      <q-page class="q-px-lg q-pa-md">
        <router-view />
      </q-page>
    </q-page-container>

    <drawer-component v-model:leftDrawerOpen="leftDrawerOpen" />

    <global-loading :visibility="visible" />
  </q-layout>
</template>

<style scoped>
.text-stone {
  --_color: var(--stone-5);
  color: var(--_color);
}

.noti-circle {
  --_color: var(--stone-5);
  background-color: var(--_color);

  &.dark {
    --_color: var(--stone-9);
  }
}

.noti-switch-on {
  --_bg-color: var(--blue-0);
  --_color: var(--blue-6);
  background-color: var(--_bg-color);
  color: var(--_color);
}

.noti-switch-off {
  --_color: var(--stone-6);
  color: var(--_color);
}

.account-menu-down {
  & ::before {
    color: var(--foreground);
  }
}
</style>