Add share manage dialog

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>{{ dialogTitle }}</q-toolbar-title>
         <q-btn flat round dense icon="close" @click="close" />
       </q-toolbar>
 
@@ -23,7 +23,7 @@
           <template v-slot:selected-item="scope">
             <span v-if="canSharedUserFilter">
               {{ canSharedUserFilter.fullName }} （{{ canSharedUserFilter.email }}）
-              <q-badge v-if="isOwner(scope.opt.id)" color="purple">所有者</q-badge>
+              <role-label :domain="domain" :user="scope.opt"></role-label>
             </span>
           </template>
 
@@ -38,18 +38,17 @@
               <q-item-section>{{scope.opt.email}}</q-item-section>
               <q-item-section side>
                 <div style="width: 4em;">
-                  <q-badge v-if="isOwner(scope.opt.id)" color="purple">所有者</q-badge>
+                  <role-label :domain="domain" :user="scope.opt"></role-label>
                 </div>
               </q-item-section>
             </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="userListTitle">
           <template v-slot:body-cell-role="{ row }">
             <q-td>
-              <q-badge v-if="row.role == 2" color="purple">所有者</q-badge>
-              <!-- <q-badge v-else-if="row.id === domain.owner.id" color="primary">管理者</q-badge> -->
+              <role-label :domain="domain" :user="row"></role-label>
             </q-td>
           </template>
 
@@ -74,16 +73,22 @@ import { IDomainOwnerDisplay } from '../../types/DomainTypes';
 import { IUser, IUserDisplay } from '../../types/UserTypes';
 import { api } from 'boot/axios';
 import SharingUserList from 'components/ShareDomain/SharingUserList.vue';
+import RoleLabel from 'components/ShareDomain/RoleLabel.vue';
 import { Dialog } from 'quasar'
 
 interface Props {
   modelValue: boolean;
   domain: IDomainOwnerDisplay;
+  dialogTitle: string;
+  userListTitle: string;
+  shareApi: (user: IUserDisplay, domain: IDomainOwnerDisplay) => Promise<any>;
+  removeSharedApi: (user: IUserDisplay, domain: IDomainOwnerDisplay) => Promise<any>;
+  getSharedApi: (domain: IDomainOwnerDisplay) => Promise<any>;
 }
 
 interface IUserDisplayWithShareRole extends IUserDisplay {
   isRemoving: boolean;
-  role: number; // 2: 所有者，1: 管理者， 0: 利用者
+  role: number;
 }
 
 const props = defineProps<Props>();
@@ -126,6 +131,9 @@ watch(
     loading.value = false;
     addLoading.value = false;
     if (newValue) {
+      if (Object.keys(allUsers.value).length == 0) {
+        await getUsers();
+      }
       await loadShared();
     }
   }
@@ -167,10 +175,7 @@ const close = () => {
 const shareTo = async (user: IUserDisplayWithShareRole) => {
   addLoading.value = true;
   loading.value = true;
-  await api.post(`api/userdomain`, {
-    'userid': user.id,
-    'domainid': props.domain.id
-  })
+  await props.shareApi(user, props.domain);
   await loadShared();
   canSharedUserFilter.value = undefined;
   loading.value = false;
@@ -180,7 +185,7 @@ const shareTo = async (user: IUserDisplayWithShareRole) => {
 const removeShareTo = async (user: IUserDisplayWithShareRole) => {
   loading.value = true;
   user.isRemoving = true;
-  await api.delete(`api/domain/${props.domain.id}/${user.id}`)
+  await props.removeSharedApi(user, props.domain);
   await loadShared();
   loading.value = false;
 };
@@ -189,10 +194,18 @@ const loadShared = async () => {
   loading.value = true;
   sharedUsersIdSet.clear();
 
-  const { data } = await api.get(`/api/domainshareduser/${props.domain.id}`);
+  const { data } = await props.getSharedApi(props.domain);
   sharedUsers.value = data.data.map((item: IUser) => {
     const val = itemToDisplay(item);
     sharedUsersIdSet.add(val.id);
+    // for sort
+    if (isOwner(item.id)) {
+      val.role = 2;
+    } else if (isManager(item.id)) {
+      val.role = 1;
+    } else {
+      val.role = 0;
+    }
     return val;
   }).reverse().sort((a: IUserDisplayWithShareRole, b: IUserDisplayWithShareRole) => b.role - a.role);
 
@@ -202,24 +215,21 @@ const loadShared = async () => {
   loading.value = false;
 }
 
-onMounted(async () => {
-  await getUsers();
-})
+function isOwner(userId: number) {
+  return userId === props.domain?.owner?.id
+}
+
+function isManager(userId: number) {
+  return false // TODO
+}
 
 const getUsers = async () => {
-  if (Object.keys(allUsers.value).length > 0) {
-    return;
-  }
   loading.value = true;
   const result = await api.get(`api/v1/users`);
   allUsers.value = result.data.data.map(itemToDisplay);
   loading.value = false;
 }
 
-function isOwner(userId: number) {
-  return userId === props.domain.owner.id
-}
-
 const itemToDisplay = (item: IUser) => {
   return {
     id: item.id,
@@ -230,9 +240,10 @@ const itemToDisplay = (item: IUser) => {
     email: item.email,
     isSuperuser: item.is_superuser,
     isActive: item.is_active,
-    role: isOwner(item.id) ? 2 : 0, // TODO
+    role: 0,
   } as IUserDisplayWithShareRole
 }
+
 </script>
 
 <style lang="scss">