jws-frontend/src/layouts/MainLayout.vue

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

import useLoader from 'stores/loader';
import ProfileMenu from './ProfileMenu.vue';
import DrawerComponent from './DrawerComponent.vue';
import useUserStore from 'stores/user';
import { CanvasComponent, DialogForm } from 'components/index';
import { dialog } from 'stores/utils';
import useMyBranchStore from 'stores/my-branch';
import { useConfigStore } from 'src/stores/config';
import { useNavigator } from 'src/stores/navigator';
import { initLang, initTheme, Lang, setLang } from 'src/utils/ui';
import { baseUrl } from 'stores/utils';
import { useNotification } from 'src/stores/notification';
import NotiDialog from 'src/pages/00_notification/NotiDialog.vue';

const useMyBranch = useMyBranchStore();
const { fetchListMyBranch } = useMyBranch;

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

const $q = useQuasar();
const loaderStore = useLoader();
const navigatorStore = useNavigator();
const notificationStore = useNotification();
const configStore = useConfigStore();

const { data: notificationData } = storeToRefs(notificationStore);

const { visible } = storeToRefs(loaderStore);
const { t } = useI18n({ useScope: 'global' });
const userStore = useUserStore();

const canvasModal = ref(false);

const leftDrawerOpen = ref<boolean>(false);
const leftDrawerMini = ref(false);

const unread = computed<number>(
  () => notificationData.value.filter((v) => !v.read).length || 0,
);
const userImage = ref<string>();
const userGender = ref('');
const canvasRef = ref();

const language: {
  value: Lang;
  label: string;
  icon: string;
  date: string;
}[] = [
  { value: Lang.Thai, label: 'ไทย', icon: 'th', date: 'th' },
  { value: Lang.English, label: 'English', icon: 'us', date: 'en-gb' },
];

const state = reactive({
  filterUnread: false,
  notiOpen: false,
  notiDialog: false,
  notiId: '',
});
const notiMenu = ref<NotificationButton[]>([
  {
    item: 'all',
    color: 'noti-switch-on',
    active: true,
  },
  {
    item: 'unread',
    color: 'noti-switch-off',
    active: 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 === 'unread') {
    // noti.value?.result &&
    state.filterUnread = true;
  }
  if (button.item === 'all') {
    state.filterUnread = false;
  }
}

function doLogout() {
  dialog({
    icon: 'mdi-logout-variant',
    title: t('dialog.title.confirmLogout'),
    persistent: true,
    color: 'negative',
    message: t('dialog.message.confirmLogout'),
    actionText: t('general.logout'),
    action: async () => {
      logout();
    },
    cancel: () => {},
  });
}

function readNoti(id: string) {
  const notification = notificationData.value.find((n) => n.id === id);

  state.notiDialog = true;
  state.notiId = id;
  if (notification) {
    notification.read = true;
  }
}

function signatureSubmit() {
  const signature = canvasRef.value.setCanvas();
  userStore.setSignature(signature);
  canvasModal.value = false;
}

async function signatureFetch() {
  const ret = await userStore.getSignature();
  if (ret) canvasRef.value.getCanvas(ret);
}

onMounted(async () => {
  initTheme();
  initLang();

  await configStore.getConfig();

  {
    const noti = await notificationStore.getNotificationList();

    if (noti) {
      notificationData.value = noti.result;
    }
  }

  await fetchListMyBranch(getUserId() ?? '');
  leftDrawerOpen.value = $q.screen.gt.xs ? true : false;

  const user = getUsername();
  const uid = getUserId();

  userStore.userOption.roleOpts.length === 0
    ? await userStore.fetchRoleOption()
    : '';

  if (user === 'admin') return;
  if (uid) {
    const res = await userStore.fetchById(uid);
    if (res && res.gender) {
      userGender.value = res.gender;
      userImage.value = `${baseUrl}/user/${uid}/profile-image/${res.selectedImage}`;
    }
  }
});
</script>

<template>
  <q-layout
    view="lHh Lpr lFf"
    class="bg"
    :class="{ dark: $q.dark.isActive }"
    :style="`background-size: ${$q.screen.gt.sm ? '100% 100%' : 'cover'}`"
  >
    <drawer-component
      :mini="leftDrawerMini || $q.screen.lt.sm"
      v-model:left-drawer-open="leftDrawerOpen"
    />

    <q-page-container>
      <!-- drawer control -->
      <div style="position: relative; z-index: 1000" :hidden="$q.screen.lt.sm">
        <div
          size="36px"
          style="
            position: absolute;
            border-radius: 50%;
            top: 28px;
            left: -22px;
            background-color: var(--surface-1);
            border: 4px solid var(--surface-1);
          "
          class="flex items-center justify-center"
        >
          <q-btn
            flat
            dense
            round
            size="12px"
            aria-label="Menu"
            id="btn-open-drawer"
            style="
              background-color: hsl(var(--negative-bg) / 0.1);
              overflow: hidden;
            "
            @click="leftDrawerMini = !leftDrawerMini"
          >
            <q-icon
              :name="!leftDrawerMini ? 'mdi-backburger' : 'mdi-forwardburger'"
              size="16px"
              style="color: hsl(var(--negative-bg))"
            />
          </q-btn>
        </div>
      </div>

      <div
        id="app-content"
        class="scroll column"
        style="height: 100vh; flex-wrap: nowrap; padding-bottom: var(--size-4)"
      >
        <!-- header -->
        <div
          class="q-px-lg row items-center justify-start q-pb-md q-pt-lg"
          style="position: sticky; top: 0; z-index: 8"
          :style="`
            background: ${$q.screen.lt.md ? ($q.dark.isActive ? '#1c1d21' : '#ecedef') : 'transparent'};
          `"
        >
          <q-btn
            v-if="$q.screen.lt.sm"
            icon="mdi-menu"
            flat
            dense
            rounded
            class="q-mr-md"
            @click="
              () => {
                leftDrawerMini = false;
                leftDrawerOpen = !leftDrawerOpen;
              }
            "
          />
          <div class="column col">
            <span
              class="title-gradient text-weight-bold"
              :class="{ 'text-h6': $q.screen.gt.xs }"
              :style="{
                filter: `brightness(${$q.dark.isActive ? '2' : '1'})`,
              }"
            >
              {{
                navigatorStore.current?.title
                  ? $t(navigatorStore.current?.title)
                  : $q.screen.gt.xs
                    ? 'Welcome to Jobs Worker Service'
                    : 'Jobs Worker Service'
              }}
            </span>
            <div class="flex items-center" style="gap: var(--size-1)">
              <template
                v-for="(item, i) in navigatorStore.current.path"
                :key="i"
              >
                <span
                  class="text-caption cursor-pointer"
                  @click="item.handler?.()"
                  :class="{
                    'text-info': i !== navigatorStore.current.path.length - 1,
                    'hover-item': i !== navigatorStore.current.path.length - 1,
                  }"
                >
                  {{
                    item.text
                      ? item.i18n
                        ? $t(item.text, {
                            ...(item.argsi18n || {}),
                          })
                        : item.text
                      : ''
                  }}
                </span>
                <q-icon
                  :class="{
                    'text-info': i !== navigatorStore.current.path.length - 1,
                  }"
                  name="mdi-chevron-right"
                  v-if="i + 1 !== navigatorStore.current.path.length"
                />
              </template>
            </div>
          </div>

          <div class="row q-gutter-x-md items-center" style="margin-left: auto">
            <!-- notification -->
            <q-btn
              round
              dense
              flat
              class="noti-circle"
              :size="$q.screen.lt.sm ? 'sm' : ''"
              :class="{ bordered: $q.dark.isActive, dark: $q.dark.isActive }"
              style="color: var(--surface-1)"
              @click="state.notiOpen = !state.notiOpen"
            >
              <q-icon name="mdi-bell" />
              <q-badge v-if="unread !== 0" rounded floating color="negative">
                {{ unread }}
              </q-badge>

              <q-menu
                :offset="[0, 10]"
                anchor="bottom middle"
                self="top middle"
                @before-hide="
                  () => {
                    state.notiOpen = false;
                  }
                "
              >
                <div class="q-pa-sm row col-12 items-center">
                  <div class="text-subtitle1 text-weight-bold">
                    {{ $t('noti.title') }}
                  </div>
                  <q-space />
                </div>
                <div class="q-px-sm q-pb-md">
                  <q-btn
                    rounded
                    padding="0px 10px"
                    class="text-weight-medium text-capitalize"
                    v-for="(btn, index) in notiMenu"
                    :flat="!btn.active"
                    :unelevated="btn.active"
                    :key="index"
                    :label="$t('noti.' + btn.item)"
                    :class="btn.color"
                    @click="setActive(btn)"
                  />
                </div>
                <section
                  v-if="
                    state.filterUnread
                      ? notificationData.filter((v) => !v.read).length
                      : notificationData.length
                  "
                  class="caption cursor-pointer scroll"
                  style="max-height: 30vh; width: 300px"
                >
                  <q-item
                    v-for="(item, i) in state.filterUnread
                      ? notificationData.filter((v) => !v.read)
                      : notificationData"
                    dense
                    clickable
                    class="items-center q-py-xs q-px-sm"
                    v-ripple
                    @click="readNoti(item.id)"
                    :key="i"
                  >
                    <div
                      class="rounded q-mr-sm"
                      :style="`background: hsl(var(--info-bg)/${item.read ? 0 : 1}); width: 6px; height: 6px`"
                    />
                    <q-avatar
                      v-if="$q.screen.gt.xs"
                      color="positive"
                      style="height: 36px; width: 36px"
                    >
                      <q-icon color="white" name="mdi-check" />
                    </q-avatar>

                    <div class="col column text-caption q-pl-md ellipsis">
                      <span class="block ellipsis full-width text-weight-bold">
                        {{ item.title }}
                        <q-tooltip
                          anchor="top middle"
                          self="bottom middle"
                          :delay="300"
                          :offset="[10, 10]"
                        >
                          {{ item.title }}
                        </q-tooltip>
                      </span>
                      <span
                        class="block ellipsis full-width text-stone"
                        :class="{ 'text-weight-medium': !item.read }"
                      >
                        {{ item.detail }}
                        <q-tooltip
                          anchor="top middle"
                          self="bottom middle"
                          :delay="300"
                          :offset="[10, 10]"
                        >
                          {{ item.detail }}
                        </q-tooltip>
                      </span>
                    </div>
                    <span
                      align="right"
                      class="text-caption text-stone q-pl-md"
                      :class="{ 'text-weight-bold': !item.read }"
                    >
                      {{ moment(item.createdAt).fromNow() }}
                    </span>
                  </q-item>
                </section>
                <section
                  v-else
                  class="text-center q-py-sm"
                  style="max-height: 30vh; width: 300px"
                >
                  <span class="app-text-muted">
                    {{ $t('general.noData') }}
                  </span>
                </section>
                <div class="col bordered-t">
                  <q-btn
                    flat
                    dense
                    color="info"
                    class="full-width text-capitalize"
                    @click="() => $router.push('/notification')"
                  >
                    {{ $t('noti.viewAll') }}
                  </q-btn>
                </div>
              </q-menu>
            </q-btn>

            <!-- เปลี่นนภาษา -->
            <q-btn
              id="btn-change-language"
              round
              unelevated
              :size="$q.screen.lt.sm ? 'sm' : ''"
              v-model="$i18n.locale"
              class="no-uppercase"
            >
              <Icon
                v-if="$i18n.locale === Lang.English"
                icon="circle-flags:us"
                :width="$q.screen.lt.sm ? '24px' : '33.6px'"
              />
              <Icon
                v-else
                icon="circle-flags:th"
                :width="$q.screen.lt.sm ? '24px' : '33.6px'"
              />

              <q-menu
                :offset="[0, 10]"
                fit
                anchor="bottom left"
                self="top left"
                auto-close
              >
                <q-list v-for="v in language" :key="v.value">
                  <q-item
                    :id="`btn-change-language-${v.value}`"
                    v-if="$i18n.locale !== v.value"
                    clickable
                    @click="() => setLang(v.value)"
                  >
                    <q-item-section>
                      <div class="row items-center">
                        <Icon
                          :icon="`circle-flags:${v.icon}`"
                          class="q-mr-md"
                        />
                        {{ v.label }}
                      </div>
                    </q-item-section>
                  </q-item>
                </q-list>
              </q-menu>
            </q-btn>

            <!-- User -->
            <ProfileMenu
              id="btn-profile-menu"
              @logout="doLogout"
              @edit-personal-info="console.log('edit')"
              @signature="
                () => {
                  canvasModal = true;
                }
              "
              :user-image="
                getRole()?.includes('system') ? '/img-admin.png' : userImage
              "
              :gender="userGender"
            />
          </div>
        </div>

        <q-page class="col q-px-lg">
          <router-view />
        </q-page>
      </div>
    </q-page-container>

    <DialogForm
      width="800px"
      height="550px"
      v-model:modal="canvasModal"
      no-app-box
      :title="$t('menu.profile.addSignature')"
      :close="() => (canvasModal = false)"
      :submit="signatureSubmit"
      :show="signatureFetch"
    >
      <CanvasComponent ref="canvasRef" v-model:modal="canvasModal" />
      <template #footer>
        <q-btn
          flat
          dense
          :label="$t('general.clear')"
          @click="
            () => {
              canvasRef.clearCanvas(), canvasRef.clearUpload();
            }
          "
          style="color: hsl(var(--text-mute))"
        />
      </template>
    </DialogForm>

    <NotiDialog v-model="state.notiDialog" v-model:id="state.notiId" />

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

<style scoped>
.bg {
  background-image: url('/bg-l.png');
  background-repeat: no-repeat;

  &.dark {
    background-image: url('/bg-d.png');
  }
}

.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);
  }
}

.avatar-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));
  }
}

.title-gradient {
  background: linear-gradient(to right, var(--brand-1), var(--brand-2));
  background-clip: text; /* Standard property */
  -webkit-background-clip: text; /* WebKit fallback */
  -webkit-text-fill-color: transparent; /* WebKit fallback */
  color: transparent; /* Fallback for browsers not supporting text-clip */
}

:deep(main.q-page) {
  min-height: 0 !important;
}

.hover-item:hover {
  text-decoration: underline;
}
</style>