63 lines
1.5 KiB
Vue
63 lines
1.5 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { ref } from 'vue'
|
||
|
|
import KeyCloakService from '@/services/KeyCloakService'
|
||
|
|
const dropdownOpen = ref<boolean>(false)
|
||
|
|
const accountName = ref<string>()
|
||
|
|
|
||
|
|
accountName.value = KeyCloakService.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="
|
||
|
|
() => {
|
||
|
|
KeyCloakService.CallLogOut()
|
||
|
|
}
|
||
|
|
"
|
||
|
|
>
|
||
|
|
<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-separator inset spaced></q-separator>
|
||
|
|
</q-list>
|
||
|
|
</q-btn-dropdown>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.cursor {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
</style>
|