Fix text

frontend/src/components/ShareDomain/ShareDomainDialog.vue

@@ -2,7 +2,7 @@
   <q-dialog :auto-close="false" :model-value="visible" persistent bordered>
     <q-card class="dialog-content" >
       <q-toolbar class="bg-grey-4">
-        <q-toolbar-title>「{{domain.name}}」のドメインを共有する</q-toolbar-title>
+        <q-toolbar-title>「{{domain.name}}」のドメイン利用権限設定</q-toolbar-title>
         <q-btn flat round dense icon="close" @click="close" />
       </q-toolbar>
 
@@ -17,12 +17,12 @@
           input-debounce="0"
           :options="canSharedUserFilteredOptions"
           clearable
-          :placeholder="canSharedUserFilter ? '' : domain.domainActive ? '共有するユーザーを選択' : 'ドメインが有効でないため、共有ができない。'"
+          :placeholder="canSharedUserFilter ? '' : domain.domainActive ? '権限を付与するユーザーを選択' : 'ドメインが無効なため、権限を付与できません'"
           @filter="filterFn"
           :display-value="canSharedUserFilter?`${canSharedUserFilter.fullName} （${canSharedUserFilter.email}）`:''">
 
           <template v-slot:after>
-            <q-btn :disable="!canSharedUserFilter" :loading="addLoading" label="共有する" color="primary" @click="shareTo(canSharedUserFilter as IUserDisplay)" />
+            <q-btn :disable="!canSharedUserFilter" :loading="addLoading" label="付与" color="primary" @click="shareTo(canSharedUserFilter as IUserDisplay)" />
           </template>
 
           <template v-slot:option="scope">
@@ -33,9 +33,9 @@
             </q-item>
           </template>
         </q-select>
-        <sharing-user-list class="q-mt-md" style="height: 330px" :users="sharedUsers" :loading="loading" title="現在の共有ユーザー">
+        <sharing-user-list class="q-mt-md" style="height: 330px" :users="sharedUsers" :loading="loading" title="ドメイン利用権限を持つユーザー">
           <template v-slot:actions="{ row }">
-            <q-btn flat color="primary" padding="xs" size="1em" :loading="row.id == removingUser?.id" icon="person_off" @click="removeShareTo(row)" />
+            <q-btn title="解除" flat color="primary" padding="xs" size="1em" :loading="row.id == removingUser?.id" icon="person_off" @click="removeShareTo(row)" />
           </template>
         </sharing-user-list>
       </q-card-section>

frontend/src/components/TableActionMenu.vue

@@ -0,0 +1,56 @@
+<template>
+  <q-btn flat padding="xs" round size="1em" icon="more_vert">
+    <q-menu>
+      <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-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-item>
+          <q-separator v-else />
+        </template>
+      </q-list>
+    </q-menu>
+  </q-btn>
+</template>
+
+<script lang="ts">
+import { PropType } from 'vue';
+import { IDomainOwnerDisplay } from '../types/DomainTypes';
+
+interface Action {
+  label: string;
+  icon?: string;
+  action: (row: any) => void|Promise<void>;
+  class?: string;
+}
+interface Separator {
+  separator: boolean;
+}
+type MenuItem = Action | Separator;
+
+export default {
+  name: 'TableActionMenu',
+  props: {
+    row: {
+      type: Object as PropType<IDomainOwnerDisplay>,
+      required: true
+    },
+    minWidth: {
+      type: String,
+      default: '100px'
+    },
+    actions: {
+      type: Array as PropType<MenuItem[]>,
+      required: true
+    }
+  },
+  methods: {
+    isAction(item: MenuItem): item is Action {
+      return !('separator' in item);
+    }
+  }
+};
+</script>

frontend/src/layouts/MainLayout.vue

@@ -128,7 +128,7 @@ const version = process.env.version;
 const productName = process.env.productName;
 
 onMounted(() => {
-  authStore.toggleLeftMenu();
+  authStore.setLeftMenu(true);
 });
 
 function toggleLeftDrawer() {

frontend/src/pages/AppManagement.vue

@@ -30,31 +30,7 @@
       </template>
       <template v-slot:body-cell-actions="p">
         <q-td :props="p">
-          <q-btn flat padding="xs" round size="1em" icon="more_vert">
+          <table-action-menu :row="p.row" :actions="actionList" />
-            <q-menu >
-              <q-list dense style="min-width: 100px">
-                <q-item clickable v-close-popup @click="toEditFlowPage(p.row)">
-                  <q-item-section>
-                    <q-icon size="1.2em" name="account_tree" />
-                  </q-item-section>
-                  <q-item-section>設定</q-item-section>
-                </q-item>
-                <q-item clickable v-close-popup @click="showHistory(p.row)">
-                  <q-item-section>
-                    <q-icon size="1.2em" name="history" />
-                  </q-item-section>
-                  <q-item-section>履歴</q-item-section>
-                </q-item>
-                <q-separator />
-                <q-item class="text-red" clickable v-close-popup  @click="removeRow(p.row)">
-                  <q-item-section>
-                    <q-icon size="1.2em" name="delete_outline" />
-                  </q-item-section>
-                  <q-item-section>削除</q-item-section>
-                </q-item>
-              </q-list>
-            </q-menu>
-          </q-btn>
         </q-td>
       </template>
     </q-table>
@@ -83,6 +59,7 @@ import { date } from 'quasar'
 import { IManagedApp } from 'src/types/AppTypes';
 import ShowDialog from 'src/components/ShowDialog.vue';
 import AppSelectBox from 'src/components/AppSelectBox.vue';
+import TableActionMenu from 'components/TableActionMenu.vue';
 
 interface IAppDisplay{
   id:string;
@@ -119,6 +96,13 @@ const appDialog = ref();
 const showSelectApp=ref(false);
 const isAdding = ref(false);
 
+const actionList =  [
+  { label: '設定', icon: 'account_tree', action: toEditFlowPage },
+  { label: '履歴', icon: 'history', action: showHistory },
+  { separator: true },
+  { label: '削除', icon: 'delete_outline', class: 'text-red', action: removeRow },
+];
+
 const getApps = async () => {
   loading.value = true;
   rowIds.clear();
@@ -140,7 +124,6 @@ const getApps = async () => {
 }
 
 onMounted(async () => {
-  authStore.setLeftMenu(false);
   await getApps();
 });
 
@@ -166,11 +149,11 @@ const closeSelectAppDialog = async (val: 'OK'|'Cancel') => {
   isAdding.value = false;
 }
 
-const removeRow = (app:IAppDisplay) => {
+function removeRow(app:IAppDisplay) {
   return
 }
 
-const showHistory = (app:IAppDisplay) => {
+function showHistory(app:IAppDisplay) {
   return
 }
 
@@ -186,7 +169,7 @@ const appToAppDisplay = (app: IManagedApp) => {
   }
 }
 
-const toEditFlowPage = (app:IAppDisplay) => {
+function toEditFlowPage(app:IAppDisplay) {
   store.setApp({
     appId: app.id,
     name: app.name

frontend/src/pages/TenantDomain.vue

@@ -33,31 +33,7 @@
 
       <template v-slot:body-cell-actions="p">
         <q-td :props="p">
-          <q-btn flat padding="xs" round size="1em" icon="more_vert">
+            <table-action-menu :row="p.row" :actions="actionList" />
-            <q-menu >
-              <q-list dense style="min-width: 100px">
-                <q-item clickable v-close-popup @click="editRow(p.row)">
-                  <q-item-section>
-                    <q-icon size="1.2em" name="edit_note" />
-                  </q-item-section>
-                  <q-item-section>編集</q-item-section>
-                </q-item>
-                <q-item clickable v-close-popup @click="openShareDg(p.row)">
-                  <q-item-section>
-                    <q-icon size="1.2em" name="person_add_alt" />
-                  </q-item-section>
-                  <q-item-section>ドメイン利用権限付与／解除</q-item-section>
-                </q-item>
-                <q-separator />
-                <q-item class="text-red" clickable v-close-popup  @click="removeRow(p.row)">
-                  <q-item-section>
-                    <q-icon size="1.2em" name="delete_outline" />
-                  </q-item-section>
-                  <q-item-section>削除</q-item-section>
-                </q-item>
-              </q-list>
-            </q-menu>
-          </q-btn>
         </q-td>
       </template>
 
@@ -138,7 +114,7 @@
       <q-card>
         <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>
         <q-card-section v-else-if="deleteLoadingState == 0" class="row items-center">
           <q-icon name="warning" color="warning" size="2em" />
@@ -146,7 +122,7 @@
         </q-card-section>
         <q-card-section v-else class="row items-center">
           <q-icon name="error" color="negative" size="2em" />
-          <span class="q-ml-sm">共有ユーザーが存在し、キャンセルする必要がある</span>
+          <span class="q-ml-sm">ドメイン利用権限が存在し、キャンセルする必要がある</span>
         </q-card-section>
 
         <q-card-actions align="right">
@@ -168,6 +144,7 @@ import { api } from 'boot/axios';
 import { useAuthStore } from 'stores/useAuthStore';
 import { useDomainStore } from 'stores/useDomainStore';
 import ShareDomainDialog from 'components/ShareDomain/ShareDomainDialog.vue';
+import TableActionMenu from 'components/TableActionMenu.vue';
 import { IDomain, IDomainOwnerDisplay, IDomainSubmit } from '../types/DomainTypes';
 
 const authStore = useAuthStore();
@@ -204,10 +181,6 @@ const show = ref(false);
 const confirm = ref(false);
 const resetPsw = ref(false);
 
-const activeOptions = ['全データ', '启用', '未启用']
-const activeFilter = ref('全データ');
-
-
 const currentDomainId = computed(() => authStore.currentDomain.id);
 // const tenantid = ref(authStore.currentDomain.id);
 const name = ref('');
@@ -220,14 +193,21 @@ const domainActive = ref(true);
 const isCreate = ref(true);
 let editId = ref(0);
 const shareDg = ref(false);
-const shareDomain = ref<IDomainOwnerDisplay>();
+const shareDomain = ref<IDomainOwnerDisplay>({} as IDomainOwnerDisplay);
 
-const activeFilterUpdate = (selected) => {
+const activeOptions = [
-  switch (selected) {
+  { value: 0, label: '全状態' },
-    case '启用':
+  { value: 1, label: '使用' },
+  { value: 2, label: '未使用'}
+]
+const activeFilter = ref(activeOptions[0]);
+
+const activeFilterUpdate = (option: {value: number}) => {
+  switch (option.value) {
+    case 1:
       getDomain((row) => row.domainActive)
       break;
-    case '未启用':
+    case 2:
       getDomain((row) => !row.domainActive)
       break;
     default:
@@ -236,7 +216,14 @@ const activeFilterUpdate = (selected) => {
   }
 }
 
-const getDomain = async (filter = () => true) => {
+const actionList =  [
+  { label: '編集', icon: 'edit_note', action: editRow },
+  { label: '利用権限設定', icon: 'person_add_alt', action: openShareDg },
+  { separator: true },
+  { label: '削除', icon: 'delete_outline', class: 'text-red', action: removeRow },
+];
+
+const getDomain = async (filter?: (row: IDomainOwnerDisplay) => boolean) => {
   loading.value = true;
   const { data } = await api.get<{data:IDomain[]}>(`api/domains`);
   rows.value = data.data.map((item) => {
@@ -259,7 +246,7 @@ const getDomain = async (filter = () => true) => {
         isSuperuser: item.owner.is_superuser,
       }
     }
-  }).filter(filter);
+  }).filter(filter || (() => true));
   loading.value = false;
 }
 
@@ -274,7 +261,7 @@ const addRow = () => {
   show.value = true;
 }
 
-const removeRow = async (row: IDomainOwnerDisplay) => {
+async function removeRow(row: IDomainOwnerDisplay) {
   confirm.value = true;
   deleteLoadingState.value = -1;
   editId.value = row.id;
@@ -295,7 +282,7 @@ const deleteDomain = () => {
   deleteLoadingState.value = -1;
 };
 
-const editRow = (row) => {
+function editRow(row) {
   isCreate.value = false
   editId.value = row.id;
   // tenantid.value = row.tenantid;
@@ -349,7 +336,7 @@ const onSubmit = () => {
     })
 }
 
-const openShareDg = (row: IDomainOwnerDisplay|number) => {
+function openShareDg(row: IDomainOwnerDisplay|number) {
   if (typeof row === 'number') {
     row = rows.value.find(item => item.id === row) as IDomainOwnerDisplay;
   }
@@ -357,7 +344,7 @@ const openShareDg = (row: IDomainOwnerDisplay|number) => {
   shareDg.value = true;
 };
 
-const closeShareDg = () => {
+function closeShareDg() {
   shareDg.value = false;
 }