jws-frontend/src/layouts/MainLayout.vue

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

import useLoader from 'stores/loader';
import DrawerComponent from 'components/DrawerComponent.vue';
import useUserStore from 'src/stores/user';
import { Option } from 'src/stores/user/types';
import { dialog } from 'src/stores/utils';

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 { locale } = useI18n({ useScope: 'global' });
const userStore = useUserStore();

const leftDrawerOpen = ref(false);
const filterUnread = ref(false);
const unread = ref<number>(1);
const filterRole = ref<string[]>();
const userImage = ref<string>();

const currentLanguage = ref<string>('ไทย');
const language: {
  value: string;
  label: string;
  icon: string;
}[] = [
  { value: 'th-th', label: 'ไทย', icon: 'circle-flags:th' },
  { value: 'en-US', label: 'English', icon: 'circle-flags:us' },
];

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: 'Unread',
    content: 'Unread',
    read: false,
  },
  {
    id: '2',
    title: 'test',
    content: 'test',
    read: false,
  },
  {
    id: '3',
    title: 'Read',
    content: 'Already read',
    read: true,
  },
]);
const options = ref([
  {
    icon: 'mdi-lock-outline',
    label: 'เปลี่ยนรหัสผ่าน',
    value: 'op1',
    color: 'primary',
  },
]);

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() {
  dialog({
    icon: 'mdi-logout-variant',
    title: 'ยืนยันการออกจากระบบ',
    persistent: true,
    message: 'คุณต้องการออกจากระบบ ใช่หรือไม่',
    action: async () => {
      logout();
    },
  });
}

function getRoleName(roleOptions: Option[], userRoleValue?: string[]) {
  if (!userRoleValue || !roleOptions) return;

  const matchingRole: string | undefined = roleOptions.find(
    (role) => role.value === userRoleValue[0],
  )?.label;

  return matchingRole ? matchingRole : '';
}

onMounted(async () => {
  const user = getUsername();
  const uid = getUserId();

  const userRoles = getRole();
  if (userRoles) {
    filterRole.value = userRoles.filter(
      (role) =>
        role !== 'default-roles-dev' &&
        role !== 'offline_access' &&
        role !== 'uma_authorization',
    );
  }

  if (user === 'admin') return;
  if (uid) {
    const res = await userStore.fetchById(uid);

    if (res && res.profileImageUrl) userImage.value = res.profileImageUrl;
  }
});
</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)"
            @click="notiOpen = !notiOpen"
          >
            <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 !filterUnread
                      ? notification
                      : notification.filter((v) => !v.read)"
                    :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
            content-style="border: 1px solid var(--border-color)"
            :menu-offset="[30, 10]"
            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">
                    <img :src="userImage" v-if="userImage" />
                  </q-avatar>
                </q-item-section>
                <q-item-section
                  class="text-left 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(--surface)">
                      {{
                        getRoleName(userStore.userOption.roleOpts, filterRole)
                      }}
                    </div>
                  </q-item-label>
                </q-item-section>
              </q-item>
            </template>

            <div no-padding class="row justify-center" style="width: 273.797px">
              <div class="column col-12 items-center">
                <div
                  class="full-width row justify-center"
                  style="position: relative"
                >
                  <div
                    class="full-width account-cover"
                    :class="{ dark: $q.dark.isActive }"
                  ></div>
                  <div class="avartar-border">
                    <q-avatar size="72px" class="bg-primary">
                      <img :src="userImage" v-if="userImage" />
                    </q-avatar>
                  </div>
                </div>

                <div
                  class="text-subtitle2 q-mb-xs text-center"
                  style="margin-top: 58px"
                >
                  {{ getName() }}
                </div>
                <div
                  class="badge q-px-sm q-mb-md text-caption"
                  :class="{ dark: $q.dark.isActive }"
                >
                  {{ getRoleName(userStore.userOption.roleOpts, filterRole) }}
                </div>
              </div>

              <div class="column col-12">
                <q-separator />
                <div class="column justify-center">
                  <q-list dense v-for="op in options" :key="op.label">
                    <q-item clickable>
                      <q-item-section avatar>
                        <q-icon :name="op.icon" :color="op.color" size="20px" />
                      </q-item-section>
                      <q-item-section class="q-py-sm">
                        {{ op.label }}
                      </q-item-section>
                    </q-item>
                  </q-list>
                </div>
                <q-btn
                  dense
                  flat
                  class="q-ma-sm logout-btn"
                  :class="{ dark: $q.dark.isActive }"
                  label="ออกจากระบบ"
                  @click="doLogout()"
                />
              </div>
            </div>
          </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()"
          />
          <!-- เปลี่นรภาษา -->
          <q-btn
            flat
            color="grey"
            v-model="currentLanguage"
            :label="currentLanguage"
            class="no-uppercase"
          >
            <q-menu fit anchor="bottom left" self="top left" auto-close>
              <q-list
                v-for="v in language"
                :key="v.value"
                style="min-width: 50px"
              >
                <q-item
                  v-if="!v.label.includes(currentLanguage)"
                  clickable
                  @click="
                    locale = v.value;
                    currentLanguage = v.label;
                  "
                >
                  <q-item-section>
                    {{ v.label }}
                  </q-item-section>
                </q-item>
              </q-list>
            </q-menu>
          </q-btn>
        </div>
      </div>
    </q-header>

    <q-page-container style="background-color: transparent">
      <q-page class="q-px-lg q-pb-lg">
        <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 {
  --_color: var(--blue-6-hsl);
  background-color: hsla(var(--_color) / 0.1) !important;
  color: hsl(var(--_color));
}

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

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

.badge {
  display: inline-block;
  border-radius: var(--radius-6);
  background-color: var(--indigo-0);
  text-wrap: nowrap;

  &.dark {
    background-color: var(--surface-3);
  }
}

.account-cover {
  height: 65px;
  background-color: var(--indigo-0);

  &.dark {
    background-color: var(--surface-3);
  }
}

.avartar-border {
  margin-top: 24px;
  border: 5px solid var(--surface-1);
  border-radius: 50%;
  position: absolute;
}

.logout-btn {
  color: hsl(var(--negative-bg));
  background-color: hsl(var(--stone-3-hsl));

  &.dark {
    background-color: transparent;
    border: 1px solid hsl(var(--negative-bg));
  }
}
</style>