Merge branch 'dev3' of https://dev.azure.com/alicorn-dev/KintoneAppBuilder/_git/KintoneAppBuilder into dev3

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;
   }

frontend/src/components/ShareDomain/RoleLabel.vue

@@ -1,11 +1,15 @@
 <template>
-  <q-badge v-if="isOwner" color="purple">所有者</q-badge>
+  <q-badge class="q-mr-xs" v-if="isOwner" color="secondary">所有者</q-badge>
-  <q-badge v-else-if="isManager" color="primary">管理者</q-badge>
+  <!-- <q-badge v-else-if="isManager" color="primary">管理者</q-badge> -->
+  <q-badge v-if="isSelf" color="purple">自分</q-badge>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
 import { IDomainOwnerDisplay } from '../../types/DomainTypes';
+import { useAuthStore } from 'stores/useAuthStore';
+
+const authStore = useAuthStore();
 
 interface Props {
   user: { id: number };
@@ -14,6 +18,7 @@ interface Props {
 
 const props = defineProps<Props>();
 
+const isSelf = computed(() => props.user.id === (Number)(authStore.userId));
 const isOwner = computed(() => props.user.id === props.domain.owner.id);
 const isManager = computed(() => props.user.id === props.domain.owner.id); // TODO
 </script>

frontend/src/components/ShareDomain/ShareDomainDialog.vue

@@ -37,7 +37,7 @@
               <q-item-section>{{scope.opt.fullName}}</q-item-section>
               <q-item-section>{{scope.opt.email}}</q-item-section>
               <q-item-section side>
-                <div style="width: 4em;">
+                <div style="width: 6.5em;">
                   <role-label :domain="domain" :user="scope.opt"></role-label>
                 </div>
               </q-item-section>
@@ -47,7 +47,7 @@
 
         <sharing-user-list class="q-mt-md" style="height: 330px" :users="sharedUsers" :loading="loading" :title="userListTitle">
           <template v-slot:body-cell-role="{ row }">
-            <q-td>
+            <q-td auto-width>
               <role-label :domain="domain" :user="row"></role-label>
             </q-td>
           </template>
@@ -72,15 +72,19 @@ 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;
   dialogTitle: string;
   userListTitle: string;
+  hideSelf: boolean;
   shareApi: (user: IUserDisplay, domain: IDomainOwnerDisplay) => Promise<any>;
   removeSharedApi: (user: IUserDisplay, domain: IDomainOwnerDisplay) => Promise<any>;
   getSharedApi: (domain: IDomainOwnerDisplay) => Promise<any>;
@@ -186,28 +190,43 @@ 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();
 
+  if(props.hideSelf) {
+    sharedUsersIdSet.add((Number)(authStore.userId));
+  }
+
   const { data } = await props.getSharedApi(props.domain);
-  sharedUsers.value = data.data.map((item: IUser) => {
+
+  sharedUsers.value = data.data.reduce((arr: IUserDisplayWithShareRole[], item: IUser) => {
     const val = itemToDisplay(item);
-    sharedUsersIdSet.add(val.id);
+    if(!sharedUsersIdSet.has(val.id)) {
-    // for sort
+      sharedUsersIdSet.add(val.id);
-    if (isOwner(item.id)) {
+      // for sort
-      val.role = 2;
+      if (isOwner(val.id)) {
-    } else if (isManager(item.id)) {
+        val.role = 2;
-      val.role = 1;
+      } else if (isManager(val.id)) {
-    } else {
+        val.role = 1;
-      val.role = 0;
+      } else {
+        val.role = 0;
+      }
+      arr.push(val);
     }
-    return val;
+    return arr;
-  }).reverse().sort((a: IUserDisplayWithShareRole, b: IUserDisplayWithShareRole) => b.role - a.role);
+  }, []).sort((a: IUserDisplayWithShareRole, b: IUserDisplayWithShareRole) => b.role - a.role);
 
   canSharedUsers.value = allUsers.value.filter((item) => !sharedUsersIdSet.has(item.id));
   canSharedUserFilteredOptions.value = canSharedUsers.value;

frontend/src/components/ShareDomain/ShareManageDialog.vue

@@ -7,6 +7,7 @@
     :remove-shared-api="removeSharedApi"
     :get-shared-api="getSharedApi"
     :model-value="modelValue"
+    hide-self
     @update:modelValue="updateModelValue"
     @close="close"
   />

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';
     }
   }
 };

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>

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';
 

frontend/src/pages/AppVersionManagement.vue

@@ -47,8 +47,7 @@
       </template>
       <template v-slot:body-cell-actions="p">
         <q-td :props="p">
-          <span v-if="p.row.id === app.version"></span>
+          <table-action-menu :row="p.row" minWidth="140px" :actions="actionList" />
-          <table-action-menu v-else :row="p.row" minWidth="140px" :actions="actionList" />
         </q-td>
       </template>
     </q-table>
@@ -119,7 +118,7 @@ const confirmDialog = ref(false);
 const deleteUserLoading = ref(false);
 
 const actionList =  ref([
-  { label: 'プル', icon: 'flag', action: changeVersion },
+  { label: '回復する', icon: 'flag', action: changeVersion },
   // { label: 'プレビュー', icon: 'visibility', action: toVersionHistoryPage },
   // { separator: true },
   // { label: '削除', icon: 'delete_outline', class: 'text-red', action: removeRow },

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" />
@@ -115,7 +122,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 +138,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>
@@ -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 }
 ];
 
@@ -228,11 +235,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`);

frontend/src/pages/UserDomain.vue

@@ -36,7 +36,9 @@
                   既定
                 </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-btn>
+                <q-btn flat :disable="activeDomainLoadingId === props.row.id" :loading="deleteDomainLoadingId === props.row.id" @click="clickDeleteConfirm(props.row)">
+                  削除
+                </q-btn>
               </q-card-actions>
             </template>
           </domain-card>
@@ -165,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`);

frontend/src/stores/useAuthStore.ts

@@ -8,6 +8,7 @@ import { useAppStore } from './useAppStore';
 interface UserInfo {
   firstName: string;
   lastName: string;
+  fullName: string;
   email: string;
 }
 
@@ -60,7 +61,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 +70,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,
@@ -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,
       }
     },