jws-frontend/src/layouts/ProfileMenu.vue

<script lang="ts" setup>
import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
import { useQuasar } from 'quasar';
// import useOption from 'stores/option';

// const optionStore = useOption();
import { getName, getRealm, getRole, isLoggedIn } from 'src/services/keycloak';

const $q = useQuasar();

const filterRole = ref<string[]>();

defineProps<{
  userImage?: string;
  gender?: string;
}>();

const inputFile = document.createElement('input');
inputFile.type = 'file';
inputFile.accept = 'image/*';
// const profileFile = ref<File | undefined>(undefined);

const currentTheme = ref();
const options = ref([
  {
    icon: 'mdi-account',
    label: 'menu.profile.editPersonalInfo',
    value: 'op1',
    color: 'grey',
  },
  {
    icon: 'mdi-signature-freehand',
    label: 'menu.profile.signature',
    value: 'op2',
    color: 'grey',
  },
  {
    icon: 'mdi-brightness-6',
    label: 'menu.profile.mode',
    value: 'op3',
    color: 'grey',
  },
]);

const themeMode = ref([
  {
    label: 'light',
    value: 'light',
    isActive: false,
  },
  {
    label: 'dark',
    value: 'dark',
    isActive: false,
  },
  {
    label: 'baseOnDevice',
    value: 'baseOnDevice',
    isActive: false,
  },
]);

// inputFile.addEventListener('change', async (e) => {
//   profileFile.value = await (e.currentTarget as HTMLInputElement).files?.[0];
//   if (profileFile.value) {
//     await storageStore.uploadProfile(profileFile.value);
//   }
//   userImage.value = (await storageStore.getProfile()) ?? '';
// });

function changeMode(mode: string) {
  if (mode === 'light') {
    localStorage.setItem('currentTheme', 'light');
    themeMode.value[0].isActive = true;
    themeMode.value[1].isActive = false;
    themeMode.value[2].isActive = false;
    currentTheme.value = 'light';
    $q.dark.set(false);
    return;
  }

  if (mode === 'dark') {
    localStorage.setItem('currentTheme', 'dark');
    themeMode.value[0].isActive = false;
    themeMode.value[1].isActive = true;
    themeMode.value[2].isActive = false;
    currentTheme.value = 'dark';
    $q.dark.set(true);
    return;
  }

  if (mode === 'baseOnDevice') {
    localStorage.setItem('currentTheme', 'baseOnDevice');
    themeMode.value[0].isActive = false;
    themeMode.value[1].isActive = false;
    themeMode.value[2].isActive = true;
    currentTheme.value = 'baseOnDevice';

    if (
      window.matchMedia &&
      window.matchMedia('(prefers-color-scheme: dark)').matches
    ) {
      $q.dark.set(true);
    } else {
      $q.dark.set(false);
    }
    return;
  }
}

function themeChange() {
  if (themeMode.value[2].isActive) changeMode('baseOnDevice');
}

onUnmounted(() => {
  window
    .matchMedia('(prefers-color-scheme: dark)')
    .removeEventListener('change', themeChange);
});

onMounted(async () => {
  window
    .matchMedia('(prefers-color-scheme: dark)')
    .addEventListener('change', themeChange);
  //   if (isLoggedIn()) {
  //     userImage.value = (await storageStore.getProfile()) ?? '';
  //   }
  currentTheme.value = localStorage.getItem('currentTheme');
  if (
    currentTheme.value === 'light' ||
    currentTheme.value === 'dark' ||
    currentTheme.value === 'baseOnDevice'
  ) {
    changeMode(currentTheme.value);
  } else {
    changeMode('light');
  }

  const userRoles = getRole();
  if (userRoles) {
    filterRole.value = userRoles
      .filter(
        (role) =>
          !role.includes('default-roles') &&
          role !== 'offline_access' &&
          role !== 'uma_authorization',
      )
      .map((role) =>
        role
          .replace(/_/g, ' ')
          .toLowerCase()
          .split(' ')
          .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
          .join(' '),
      );
  }
});
</script>
<template>
  <div>
    <q-btn
      rounded
      dense
      flat
      no-caps
      color="dark"
      class="q-pa-none account-menu-down dropdown-menu"
    >
      <div class="row items-center">
        <div class="q-pa-none">
          <q-avatar
            class="surface-1 bordered"
            :size="$q.screen.lt.sm ? '30px' : '40px'"
          >
            <q-img
              :ratio="1"
              class="text-center"
              :src="userImage"
              v-if="userImage"
            >
              <template #error>
                <div
                  class="no-padding full-width full-height flex items-center justify-center"
                  style="
                    background: linear-gradient(
                      135deg,
                      rgba(43, 137, 223, 1) 0%,
                      rgba(230, 51, 81, 1) 100%
                    );
                  "
                >
                  <q-img
                    v-if="gender"
                    :ratio="1"
                    :src="`/no-img-${gender === 'female' ? 'female' : 'man'}.png`"
                  ></q-img>
                  <q-icon
                    v-else
                    name="mdi-account-outline"
                    color="white"
                    :size="$q.screen.lt.sm ? 'xs' : 'sm'"
                  />
                </div>
              </template>
            </q-img>
            <q-icon
              v-else
              name="mdi-account-outline"
              :size="$q.screen.lt.sm ? 'xs' : 'sm'"
            />
          </q-avatar>
        </div>

        <div
          class="text-left q-px-md"
          v-if="$q.screen.gt.sm"
          style="color: var(--foreground)"
        >
          <div class="text-caption column">
            <span
              v-if="isLoggedIn()"
              class="text-weight-bold ellipsis"
              style="max-width: 9vw"
            >
              {{ getName() }}
              <q-tooltip>
                {{ getName() }}
              </q-tooltip>
            </span>
            <span
              v-else
              class="text-weight-bold q-pb-xs ellipsis"
              style="max-width: 9vw"
            >
              {{ 'Guest' }}
              <q-tooltip>
                {{ 'Guest' }}
              </q-tooltip>
            </span>

            <div style="font-size: 11px">
              {{ filterRole?.join(' | ') }}
            </div>
          </div>
        </div>

        <div v-if="$q.screen.gt.sm" class="text-right">
          <q-icon name="mdi-chevron-down" />
        </div>
      </div>

      <q-menu :offset="[5, 10]" max-width="300px">
        <div
          no-padding
          class="row justify-center bordered rounded"
          style="overflow: hidden"
        >
          <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
                  id="changeAvatar"
                  size="72px"
                  class="surface-1 bordered"
                  :class="{ 'hover-profile': isLoggedIn() }"
                  @click="
                    () => {
                      isLoggedIn() ? inputFile.click() : '';
                    }
                  "
                >
                  <q-img
                    :ratio="1"
                    class="text-center"
                    :src="userImage"
                    v-if="userImage"
                  >
                    <template #error>
                      <div
                        class="no-padding full-width full-height flex items-center justify-center"
                        style="
                          background: linear-gradient(
                            135deg,
                            rgba(43, 137, 223, 1) 0%,
                            rgba(230, 51, 81, 1) 100%
                          );
                        "
                      >
                        <q-img
                          v-if="gender"
                          :ratio="1"
                          :src="`/no-img-${gender === 'female' ? 'female' : 'man'}.png`"
                        ></q-img>
                        <q-icon
                          v-else
                          name="mdi-account-outline"
                          color="white"
                        />
                      </div>
                    </template>
                  </q-img>
                  <q-icon name="mdi-account-outline" v-else />
                </q-avatar>
              </div>
            </div>

            <div
              class="text-subtitle2 q-mb-xs text-center full-width ellipsis q-px-md"
              style="margin-top: 58px"
            >
              <span v-if="isLoggedIn()">
                {{ getName() }}
              </span>
              <span v-else>{{ 'Guest' }}</span>
              <q-tooltip>
                <span v-if="isLoggedIn()">
                  {{ getName() }}
                </span>
                <span v-else>{{ 'Guest' }}</span>
              </q-tooltip>
            </div>
            <div
              class="badge q-px-sm q-mb-md text-caption"
              :class="{ dark: $q.dark.isActive }"
            >
              {{ filterRole?.join(' | ') }}
            </div>
          </div>

          <div class="column col-12">
            <q-separator />
            <div class="column justify-center">
              <q-list
                :dense="true"
                v-for="op in options"
                :key="op.label"
                :id="op.label"
              >
                <q-item
                  v-if="op.label !== 'menu.profile.mode'"
                  clickable
                  :id="`btn-${op.label}`"
                  @click="$emit(op.label)"
                >
                  <q-item-section avatar>
                    <q-icon :name="op.icon" :color="op.color" size="20px" />
                  </q-item-section>
                  <q-item-section class="q-py-sm">
                    {{ $t(op.label) }}
                  </q-item-section>
                </q-item>

                <q-separator v-if="op.label === 'menu.profile.mode'" />
                <q-item
                  v-if="op.label === 'menu.profile.mode'"
                  clickable
                  :id="`btn-${op.label}`"
                  @click="$emit(op.label)"
                >
                  <q-item-section avatar>
                    <q-icon :name="op.icon" :color="op.color" size="20px" />
                  </q-item-section>
                  <q-item-section class="q-py-sm">
                    <div class="row justify-between">
                      <span>
                        {{ $t(op.label) }}
                      </span>
                      <span class="app-text-muted-2">
                        {{ $t(`general.${currentTheme}`) }}
                        <q-icon name="mdi-chevron-right" />
                      </span>
                    </div>
                  </q-item-section>

                  <q-menu
                    class="bordered rounded"
                    anchor="top right"
                    self="top left"
                    max-width="200"
                    :offset="[10, 0]"
                    style="width: 160px"
                  >
                    <div v-for="(mode, index) in themeMode" :key="index">
                      <q-item
                        clickable
                        @click="
                          () => {
                            changeMode(mode.value);
                          }
                        "
                      >
                        <q-item-section>
                          <div class="row justify-between">
                            <span>
                              {{ $t(`general.${mode.label}`) }}
                            </span>
                            <q-icon v-if="mode.isActive" name="mdi-check" />
                          </div>
                        </q-item-section>
                      </q-item>
                    </div>
                  </q-menu>
                </q-item>
              </q-list>
            </div>
            <q-separator />
            <q-btn
              v-if="isLoggedIn()"
              no-caps
              dense
              unelevated
              class="q-ma-md app-text-negative"
              :class="{ dark: $q.dark.isActive }"
              :label="$t('general.logout')"
              @click="$emit('logout')"
              id="btn-logout"
              style="background-color: hsla(var(--negative-bg) / 0.1)"
              v-close-popup
            />
            <q-btn
              v-else
              no-caps
              dense
              color="primary"
              unelevated
              class="q-ma-md app-text-negative"
              :label="$t('general.login')"
              @click="$emit('login')"
              id="btn-login"
              v-close-popup
            />
          </div>
        </div>
      </q-menu>
    </q-btn>
  </div>
</template>
<style scoped lang="scss">
.account-menu-down {
  & ::before:not(.q-icon) {
    color: var(--foreground);
  }
}

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

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

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

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

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

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

.hover-profile:hover {
  opacity: 0.7;
  cursor: pointer;
}
</style>