50 lines
1.3 KiB
Vue
50 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import { getUsername, logout } from '@/services/KeyCloakService'
|
|
import { ref } from 'vue'
|
|
const dropdownOpen = ref<boolean>(false)
|
|
const accountName = ref<string>(getUsername())
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
@click="() => (dropdownOpen = !dropdownOpen)"
|
|
class="row q-px-md cursor"
|
|
id="app-toolbar-title"
|
|
>
|
|
<div class="col">
|
|
<q-avatar>
|
|
<img :src="`https://cdn.quasar.dev/img/avatar1.jpg`" />
|
|
</q-avatar>
|
|
</div>
|
|
|
|
<div class="cow">
|
|
<div class="row q-pl-sm">
|
|
<span class="text-body1">
|
|
{{ accountName }}
|
|
</span>
|
|
</div>
|
|
<div class="row q-pl-sm">
|
|
<span class="text-caption text-grey"> เจ้าหน้าที่ </span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<q-btn-dropdown stretch flat v-model="dropdownOpen">
|
|
<q-list>
|
|
<q-item clickable v-close-popup tabindex="0" @click="() => logout()">
|
|
<q-item-section avatar>
|
|
<q-avatar icon="logout" color="primary" text-color="white" caption>
|
|
</q-avatar>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-item-label>Logout</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-btn-dropdown>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.cursor {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|