client initial commit

Services/client/src/components/Profile.vue

@@ -0,0 +1,62 @@
+<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>