jws-frontend/src/layouts/MainLayout.vue

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

import useLoader from 'stores/loader';
import DrawerComponent from 'components/DrawerComponent.vue';
import CanvasComponent from 'components/CanvasComponent.vue';
import ProfileMenu from 'components/ProfileMenu.vue';
import useUserStore from 'src/stores/user';
import FormDialog from 'components/FormDialog.vue';
import useOptionStore from 'src/stores/options';
import { dialog } from 'src/stores/utils';
import { setLocale } from 'src/utils/datetime';
import useUtilsStore from 'src/stores/utils';
import useMyBranchStore from 'src/stores/my-branch';

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

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 utilsStore = useUtilsStore();
const optionStore = useOptionStore();

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

const rawOption = ref();
const canvasModal = ref(false);

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

const filterUnread = ref(false);
const unread = ref<number>(1);
// const filterRole = ref<string[]>();
const userImage = ref<string>();
const canvasRef = ref();
const currentLanguage = ref<string>('ไทย');
const language: {
  value: string;
  label: string;
  icon: string;
  date: string;
}[] = [
  { value: 'th-th', label: 'ไทย', icon: 'th', date: 'th' },
  { value: 'en-US', label: 'English', icon: 'us', date: 'en-gb' },
];

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,
  },
]);

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: t('confirmLogoutTitle'),
    persistent: true,
    color: 'negative',
    message: t('confirmLogoutMessage'),
    action: async () => {
      logout();
    },
    cancel: () => {},
  });
}

watch(
  () => currentLanguage.value,
  () => {
    localStorage.setItem('currentLanguage', currentLanguage.value);
    if (rawOption.value) {
      if (locale.value === 'en-US')
        optionStore.globalOption = rawOption.value.eng;
      if (locale.value === 'th-th')
        optionStore.globalOption = rawOption.value.tha;
    }
  },
);

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

  const getCurLang = localStorage.getItem('currentLanguage');
  if (getCurLang) currentLanguage.value = getCurLang;
  if (currentLanguage.value === 'English') {
    locale.value = 'en-US';
    setLocale('en-gb');
  }
  if (currentLanguage.value === 'ไทย') {
    locale.value = 'th-th';
    setLocale('th');
  }

  const resultOption = await fetch('/option/option.json');
  rawOption.value = await resultOption.json();
  if (locale.value === 'en-US') optionStore.globalOption = rawOption.value.eng;
  if (locale.value === 'th-th') optionStore.globalOption = rawOption.value.tha;

  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.profileImageUrl) userImage.value = res.profileImageUrl;
  }
});
</script>

<template>
  <q-layout view="lHh Lpr lFf">
    <drawer-component
      :mini="leftDrawerMini"
      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
        class="surface-0 scroll column"
        style="height: 100vh; flex-wrap: nowrap; padding-bottom: var(--size-4)"
      >
        <!-- header -->
        <div
          class="q-px-lg surface-0 row items-center justify-start q-pb-md q-pt-lg"
          style="position: sticky; top: 0; z-index: 8"
        >
          <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">
            <span
              class="title-gradient text-weight-bold"
              :class="{ 'text-h6': $q.screen.gt.xs }"
              :style="{
                filter: `brightness(${$q.dark.isActive ? '2' : '1'})`,
              }"
            >
              {{
                utilsStore.currentTitle?.title
                  ? $t(utilsStore.currentTitle?.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 utilsStore.currentTitle.path"
                :key="i"
              >
                <span
                  class="text-caption cursor-pointer"
                  @click="item.handler?.()"
                  :class="{
                    'text-info': i !== utilsStore.currentTitle.path.length - 1,
                    'hover-item': i !== utilsStore.currentTitle.path.length - 1,
                  }"
                >
                  {{
                    item.text
                      ? $t(item.text, {
                          ...(item.argsi18n || {}),
                        })
                      : ''
                  }}
                </span>
                <q-icon
                  :class="{
                    'text-info': i !== utilsStore.currentTitle.path.length - 1,
                  }"
                  name="mdi-chevron-right"
                  v-if="i + 1 !== utilsStore.currentTitle.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="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"
                @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>

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

              <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
                    v-if="!v.label.includes(currentLanguage)"
                    clickable
                    @click="
                      locale = v.value;
                      currentLanguage = v.label;
                      setLocale(v.date);
                    "
                  >
                    <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
              @logout="doLogout"
              @edit-personal-info="console.log('edit')"
              @signature="
                () => {
                  canvasModal = true;
                }
              "
            />
          </div>
        </div>

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

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

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

.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>