From e7f4078ca3d8fc62cbfffe380351076d9b864b76 Mon Sep 17 00:00:00 2001
From: xue jiahao <hsuehchiahao@gmail.com>
Date: Mon, 16 Dec 2024 23:12:21 +0800
Subject: [PATCH] Fix UI

---
 frontend/src/components/DomainSelector.vue |  4 +++-
 frontend/src/components/UserInfoButton.vue | 27 ++++++++++++++++++++++
 frontend/src/layouts/MainLayout.vue        |  3 ++-
 frontend/src/pages/TenantDomain.vue        |  9 +++++++-
 frontend/src/pages/UserDomain.vue          |  7 +-----
 frontend/src/stores/useAuthStore.ts        |  2 ++
 6 files changed, 43 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/components/UserInfoButton.vue

diff --git a/frontend/src/components/DomainSelector.vue b/frontend/src/components/DomainSelector.vue
index c0ea828..e2cb112 100644
--- a/frontend/src/components/DomainSelector.vue
+++ b/frontend/src/components/DomainSelector.vue
@@ -22,7 +22,9 @@ const userStore = useAuthStore();
 .q-btn.disabled.customized-disabled-btn {
   opacity: 1 !important;
   cursor: default !important;
-
+  .q-icon.q-btn-dropdown__arrow {
+    display: none;
+  }
   * {
     cursor: default !important;
   }
diff --git a/frontend/src/components/UserInfoButton.vue b/frontend/src/components/UserInfoButton.vue
new file mode 100644
index 0000000..ac98544
--- /dev/null
+++ b/frontend/src/components/UserInfoButton.vue
@@ -0,0 +1,27 @@
+<template>
+  <q-btn flat no-caps dense icon="account_circle" :label="userInfo.fullName">
+    <q-menu max-width="225px">
+      <div class="row no-wrap q-px-md q-pt-sm ">
+        <div class="column items-center justify-center">
+          <q-icon name="account_circle" color="grey" size="3em" />
+        </div>
+        <div class="column q-ml-sm overflow-hidden">
+          <div class="text-subtitle1 ellipsis full-width">{{ userInfo.fullName }}</div>
+          <div class="text-grey-7 ellipsis text-caption q-mb-sm full-width">{{ userInfo.email }}</div>
+        </div>
+      </div>
+      <div class="row q-pb-sm q-px-md">
+        <q-btn outline color="negative" icon="logout" label="Logout" @click="authStore.logout()" class="full-width"  size="sm" v-close-popup />
+      </div>
+    </q-menu>
+  </q-btn>
+</template>
+<script setup lang="ts">
+import { useAuthStore } from 'stores/useAuthStore';
+import { computed } from 'vue';
+
+const authStore = useAuthStore();
+
+const userInfo = computed(() => authStore.userInfo);
+
+</script>
diff --git a/frontend/src/layouts/MainLayout.vue b/frontend/src/layouts/MainLayout.vue
index 9ad772c..925bcd7 100644
--- a/frontend/src/layouts/MainLayout.vue
+++ b/frontend/src/layouts/MainLayout.vue
@@ -8,7 +8,7 @@
           <q-badge align="top" outline>V{{ version }}</q-badge>
         </q-toolbar-title>
         <domain-selector></domain-selector>
-        <q-btn flat round dense icon="logout" @click="authStore.logout()" />
+        <user-info-button />
       </q-toolbar>
     </q-header>
 
@@ -37,6 +37,7 @@
 import { computed, onMounted, reactive } from 'vue';
 import EssentialLink, { EssentialLinkProps } from 'components/EssentialLink.vue';
 import DomainSelector from 'components/DomainSelector.vue';
+import UserInfoButton from 'components/UserInfoButton.vue';
 import { useAuthStore } from 'stores/useAuthStore';
 import { useRoute } from 'vue-router';
 
diff --git a/frontend/src/pages/TenantDomain.vue b/frontend/src/pages/TenantDomain.vue
index 39ce625..04d2be8 100644
--- a/frontend/src/pages/TenantDomain.vue
+++ b/frontend/src/pages/TenantDomain.vue
@@ -31,6 +31,13 @@
         </q-td>
       </template>
 
+      <template v-slot:body-cell-owner="p">
+        <q-td auto-width :props="p">
+          <q-badge v-if="isOwner(p.row)" color="purple">自分</q-badge>
+          <span v-else>{{ p.row.owner.fullName }}</span>
+        </q-td>
+      </template>
+
       <template v-slot:body-cell-actions="p">
         <q-td :props="p">
             <table-action-menu :row="p.row" :actions="actionList" />
@@ -171,7 +178,7 @@ const columns = [
   { name: 'active', label: '', align: 'left', field: 'domainActive', classes: inactiveRowClass },
   { name: 'url', label: 'URL', field: 'url', align: 'left', sortable: true, classes: inactiveRowClass },
   { name: 'user', label: 'ログイン名', field: 'user', align: 'left', classes: inactiveRowClass },
-  { name: 'owner', label: '所有者', field: (row: IDomainOwnerDisplay) => row.owner.fullName, align: 'left', classes: inactiveRowClass },
+  { name: 'owner', label: '所有者', field: '', align: 'left', classes: inactiveRowClass },
   { name: 'actions', label: '', field: 'actions', classes: inactiveRowClass }
 ];
 
diff --git a/frontend/src/pages/UserDomain.vue b/frontend/src/pages/UserDomain.vue
index 6890950..481a3d2 100644
--- a/frontend/src/pages/UserDomain.vue
+++ b/frontend/src/pages/UserDomain.vue
@@ -36,8 +36,7 @@
                   既定
                 </q-chip>
                 <q-btn flat v-else :loading="activeDomainLoadingId === props.row.id" :disable="deleteDomainLoadingId === props.row.id" @click="activeDomain(props.row)">既定にする</q-btn>
-                <q-btn flat :disable="isNotOwner(props.row.owner.id) || activeDomainLoadingId === props.row.id" :text-color="isNotOwner(props.row.owner.id)?'grey':''" :loading="deleteDomainLoadingId === props.row.id" @click="clickDeleteConfirm(props.row)">
-                  <q-tooltip v-if="isNotOwner(props.row.owner.id) || activeDomainLoadingId === props.row.id" :delay="500" self="center middle">ドメイン所有者でないため、操作できません</q-tooltip>
+                <q-btn flat :disable="activeDomainLoadingId === props.row.id" :loading="deleteDomainLoadingId === props.row.id" @click="clickDeleteConfirm(props.row)">
                   削除
                 </q-btn>
               </q-card-actions>
@@ -168,10 +167,6 @@ const isActive = computed(() => (id: number) => {
   return id == activeDomainId.value;
 });
 
-const isNotOwner = computed(() => (ownerId: string) => {
-  return ownerId !== authStore.userId;
-});
-
 const getDomain = async (userId? : string) => {
   rowIds.clear();
   const resp = await api.get(`api/defaultdomain`);
diff --git a/frontend/src/stores/useAuthStore.ts b/frontend/src/stores/useAuthStore.ts
index bff56c5..f45296c 100644
--- a/frontend/src/stores/useAuthStore.ts
+++ b/frontend/src/stores/useAuthStore.ts
@@ -8,6 +8,7 @@ import { useAppStore } from './useAppStore';
 interface UserInfo {
   firstName: string;
   lastName: string;
+  fullName: string;
   email: string;
 }
 
@@ -83,6 +84,7 @@ export const useAuthStore = defineStore('auth', {
       return {
         firstName: resp.first_name,
         lastName: resp.last_name,
+        fullName: resp.last_name + ' ' + resp.first_name,
         email: resp.email,
       }
     },