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>