Fix text

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">
-            <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>
+            <table-action-menu :row="p.row" :actions="actionList" />
         </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) => {
-  switch (selected) {
-    case '启用':
+const activeOptions = [
+  { value: 0, label: '全状態' },
+  { 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;
 }