jws-frontend/src/components/ProfileMenu.vue

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
// import useOption from 'src/stores/option';

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

const userImage = ref<string>('');
const filterRole = ref<string[]>();
const inputFile = document.createElement('input');
inputFile.type = 'file';
inputFile.accept = 'image/*';
// const profileFile = ref<File | undefined>(undefined);
const options = ref([
  {
    icon: 'mdi-account',
    label: 'editPersonalInfo',
    value: 'op1',
    color: 'grey',
  },
  {
    icon: 'mdi-signature-freehand',
    label: 'signature',
    value: 'op2',
    color: 'grey',
  },
]);

// 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()) ?? '';
// });

onMounted(async () => {
  //   if (isLoggedIn()) {
  //     userImage.value = (await storageStore.getProfile()) ?? '';
  //   }

  const userRoles = getRole();
  if (userRoles) {
    filterRole.value = userRoles
      .filter(
        (role) =>
          role !== 'default-roles-' + getRealm() &&
          role !== 'offline_access' &&
          role !== 'uma_authorization',
      )
      .map((role) =>
        role.replace(/_/g, ' ').replace(/^./, (match) => match.toUpperCase()),
      );
  }
});
</script>
<template>
  <div>
    <q-btn-dropdown
      rounded
      dense
      flat
      no-caps
      content-style="border: 1px solid var(--border-color)"
      :menu-offset="[0, 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="surface-1 bordered">
              <img :src="userImage" v-if="userImage" />
              <q-icon name="mdi-account" v-else size="sm" />
            </q-avatar>
          </q-item-section>
          <q-item-section
            v-if="$q.screen.gt.xs"
            class="text-left q-pa-none q-px-md"
          >
            <q-item-label class="text-caption column">
              <span
                v-if="isLoggedIn()"
                class="text-weight-bold q-pb-xs 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; color: var(--surface)">
                {{ filterRole?.join(' | ') }}
              </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
                id="changeAvatar"
                size="72px"
                class="surface-1 bordered"
                :class="{ 'hover-profile': isLoggedIn() }"
                @click="
                  () => {
                    isLoggedIn() ? inputFile.click() : '';
                  }
                "
              >
                <img :src="userImage" v-if="userImage" />
                <q-icon name="mdi-account" v-else />
              </q-avatar>
            </div>
          </div>

          <div
            class="text-subtitle2 q-mb-xs text-center"
            style="margin-top: 58px"
          >
            <span v-if="isLoggedIn()">
              {{ getName() }}
            </span>
            <span v-else>{{ 'Guest' }}</span>
          </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-mb-md">
            <div v-for="op in options" :key="op.label">
              <q-list :dense="true">
                <q-separator v-if="op.label === 'option'" />
                <q-item
                  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-list>
            </div>
          </div>

          <q-btn
            v-if="isLoggedIn()"
            no-caps
            dense
            color="negative"
            unelevated
            class="q-ma-sm app-text-negative"
            :class="{ dark: $q.dark.isActive }"
            :label="$t('logout')"
            @click="$emit('logout')"
            id="btn-logout"
            v-close-popup
          />
          <q-btn
            v-else
            no-caps
            dense
            color="primary"
            unelevated
            class="q-ma-sm app-text-negative"
            :label="$t('login')"
            @click="$emit('login')"
            id="btn-login"
            v-close-popup
          />
        </div>
      </div>
    </q-btn-dropdown>
  </div>
</template>
<style scoped>
.account-menu-down {
  & ::before {
    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>