From 736c722eb7253145687eda9d815091d05f880c6f Mon Sep 17 00:00:00 2001
From: xue jiahao <hsuehchiahao@gmail.com>
Date: Mon, 16 Dec 2024 16:09:24 +0800
Subject: [PATCH] UI fix

---
 .../src/components/ShareDomain/ShareDomainDialog.vue | 10 ++++++++++
 frontend/src/components/TableActionMenu.vue          | 12 +++++++++++-
 frontend/src/pages/TenantDomain.vue                  | 12 +++++++++---
 frontend/src/stores/useAuthStore.ts                  |  6 +++---
 4 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/ShareDomain/ShareDomainDialog.vue b/frontend/src/components/ShareDomain/ShareDomainDialog.vue
index 0cd5f55..ee59207 100644
--- a/frontend/src/components/ShareDomain/ShareDomainDialog.vue
+++ b/frontend/src/components/ShareDomain/ShareDomainDialog.vue
@@ -72,10 +72,13 @@ import { ref, watch, onMounted } from 'vue';
 import { IDomainOwnerDisplay } from '../../types/DomainTypes';
 import { IUser, IUserDisplay } from '../../types/UserTypes';
 import { api } from 'boot/axios';
+import { useAuthStore } from 'stores/useAuthStore';
 import SharingUserList from 'components/ShareDomain/SharingUserList.vue';
 import RoleLabel from 'components/ShareDomain/RoleLabel.vue';
 import { Dialog } from 'quasar'
 
+const authStore = useAuthStore();
+
 interface Props {
   modelValue: boolean;
   domain: IDomainOwnerDisplay;
@@ -186,10 +189,17 @@ const removeShareTo = async (user: IUserDisplayWithShareRole) => {
   loading.value = true;
   user.isRemoving = true;
   await props.removeSharedApi(user, props.domain);
+  if (isCurrentDomain()) {
+    await authStore.loadCurrentDomain();
+  }
   await loadShared();
   loading.value = false;
 };
 
+const isCurrentDomain = () => {
+  return props.domain.id === authStore.currentDomain.id;
+}
+
 const loadShared = async () => {
   loading.value = true;
   sharedUsersIdSet.clear();
diff --git a/frontend/src/components/TableActionMenu.vue b/frontend/src/components/TableActionMenu.vue
index 9e40f53..5d7a6ce 100644
--- a/frontend/src/components/TableActionMenu.vue
+++ b/frontend/src/components/TableActionMenu.vue
@@ -3,11 +3,15 @@
     <q-menu :max-width="maxWidth">
       <q-list dense :style="{ 'min-width': minWidth }">
         <template v-for="(item, index) in actions" :key="index" >
-          <q-item v-if="isAction(item)" :class="item.class" clickable v-close-popup @click="item.action(row)">
+          <q-item v-if="isAction(item)" :disable="isFunction(item.disable) ? item.disable(row) : item.disable"
+            :class="item.class" clickable v-close-popup @click="item.action(row)">
             <q-item-section side style="color: inherit;">
               <q-icon size="1.2em" :name="item.icon" />
             </q-item-section>
             <q-item-section>{{ item.label }}</q-item-section>
+            <q-tooltip v-if="item.tooltip && !isFunction(item.tooltip) || (isFunction(item.tooltip) && item.tooltip(row))" :delay="500" self="center middle">
+              {{ isFunction(item.tooltip) ? item.tooltip(row) : item.tooltip }}
+            </q-tooltip>
           </q-item>
           <q-separator v-else />
         </template>
@@ -23,6 +27,8 @@ import { IDomainOwnerDisplay } from '../types/DomainTypes';
 interface Action {
   label: string;
   icon?: string;
+  tooltip?: string|((row: IDomainOwnerDisplay) => string);
+  disable?: boolean|((row: IDomainOwnerDisplay) => boolean);
   action: (row: any) => void|Promise<void>;
   class?: string;
 }
@@ -54,6 +60,10 @@ export default {
   methods: {
     isAction(item: MenuItem): item is Action {
       return !('separator' in item);
+    },
+
+    isFunction(item: any): item is ((row: IDomainOwnerDisplay) => boolean|string) {
+      return typeof item === 'function';
     }
   }
 };
diff --git a/frontend/src/pages/TenantDomain.vue b/frontend/src/pages/TenantDomain.vue
index 80a235e..39ce625 100644
--- a/frontend/src/pages/TenantDomain.vue
+++ b/frontend/src/pages/TenantDomain.vue
@@ -115,7 +115,7 @@
         <!-- -1 loading -->
         <q-card-section v-if="deleteLoadingState == -1" class="row items-center">
           <q-spinner color="primary" size="2em"/>
-          <span class="q-ml-sm">ドメイン利用/管理権限を確認中</span>
+          <span class="q-ml-sm">ドメイン利用権限を確認中</span>
         </q-card-section>
         <!-- > 0 can't delete -->
         <q-card-section v-else-if="deleteLoadingState > 0" class="row items-center">
@@ -131,7 +131,7 @@
         <q-card-actions align="right">
           <q-btn flat label="キャンセル" color="primary" v-close-popup />
           <!-- > 0 can't delete -->
-          <q-btn v-if="deleteLoadingState > 0" label="実行" color="primary" v-close-popup @click="openShareDg(SHARE_MANAGE, editId)" />
+          <q-btn v-if="deleteLoadingState > 0" label="実行" color="primary" v-close-popup @click="openShareDg(SHARE_USE, editId)" />
           <!-- 0/-2 can delete -->
           <q-btn flat v-else label="OK" :disabled="deleteLoadingState == -1" :loading="deleteLoadingState == -2" color="primary" @click="deleteDomain()" />
         </q-card-actions>
@@ -228,11 +228,17 @@ const SHARE_MANAGE = 'manage';
 const actionList =  [
   { label: '編集', icon: 'edit_note', action: editRow },
   { label: '利用権限設定', icon: 'person_add_alt', action: (row: IDomainOwnerDisplay) => {openShareDg(SHARE_USE, row)} },
-  { label: '管理権限設定', icon: 'add_moderator', action: (row: IDomainOwnerDisplay) => {openShareDg(SHARE_MANAGE, row)} },
+  { label: '管理権限設定', icon: 'add_moderator',
+    disable: (row: IDomainOwnerDisplay) => !isOwner(row),
+    tooltip: (row: IDomainOwnerDisplay) => isOwner(row) ? '' : 'ドメイン所有者でないため、操作できません',
+    action: (row: IDomainOwnerDisplay) => {openShareDg(SHARE_MANAGE, row)}
+  },
   { separator: true },
   { label: '削除', icon: 'delete_outline', class: 'text-red', action: removeRow },
 ];
 
+const isOwner = (row: IDomainOwnerDisplay) => row.owner.id === Number(authStore.userId);
+
 const getDomain = async (filter?: (row: IDomainOwnerDisplay) => boolean) => {
   loading.value = true;
   const { data } = await api.get<{data:IDomain[]}>(`api/domains`);
diff --git a/frontend/src/stores/useAuthStore.ts b/frontend/src/stores/useAuthStore.ts
index 6187b7d..bff56c5 100644
--- a/frontend/src/stores/useAuthStore.ts
+++ b/frontend/src/stores/useAuthStore.ts
@@ -60,7 +60,7 @@ export const useAuthStore = defineStore('auth', {
         this.userId = tokenJson.sub;
         this.permissions = (tokenJson as any).permissions==='ALL' ? 'admin': 'user';
         api.defaults.headers['Authorization'] = 'Bearer ' + this.token;
-        this.currentDomain = await this.getCurrentDomain();
+        await this.loadCurrentDomain();
         this.userInfo = await this.getUserInfo();
         router.push(this.returnUrl || '/');
         return true;
@@ -69,10 +69,10 @@ export const useAuthStore = defineStore('auth', {
         return false;
       }
     },
-    async getCurrentDomain(): Promise<IDomainInfo> {
+    async loadCurrentDomain() {
       const resp = await api.get(`api/defaultdomain`);
       const activedomain = resp?.data?.data;
-      return {
+      this.currentDomain = {
         id: activedomain?.id,
         domainName: activedomain?.name,
         kintoneUrl: activedomain?.url,