Add role label when sharing

frontend/src/components/ShareDomain/ShareDomainDialog.vue

@@ -18,11 +18,17 @@
           :options="canSharedUserFilteredOptions"
           clearable
           :placeholder="canSharedUserFilter ? '' : domain.domainActive ? '権限を付与するユーザーを選択' : 'ドメインが無効なため、権限を付与できません'"
-          @filter="filterFn"
-          :display-value="canSharedUserFilter?`${canSharedUserFilter.fullName} （${canSharedUserFilter.email}）`:''">
+          @filter="filterFn">
+
+          <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>
+            </span>
+          </template>
 
           <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 IUserDisplayWithShareRole)" />
           </template>
 
           <template v-slot:option="scope">
@@ -30,14 +36,28 @@
               <q-item-section avatar>{{scope.opt.id}}</q-item-section>
               <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;">
+                  <q-badge v-if="isOwner(scope.opt.id)" color="purple">所有者</q-badge>
+                </div>
+              </q-item-section>
             </q-item>
           </template>
         </q-select>
+
         <sharing-user-list class="q-mt-md" style="height: 330px" :users="sharedUsers" :loading="loading" title="ドメイン利用権限を持つユーザー">
+          <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> -->
+            </q-td>
+          </template>
+
           <template v-slot:actions="{ row }">
-            <q-btn title="解除" flat color="primary" padding="xs" size="1em" :loading="row.id == removingUser?.id" icon="person_off" @click="removeShareTo(row)" />
+            <q-btn round title="解除" flat color="primary" padding="xs" size="1em" :loading="row.isRemoving" icon="person_off" @click="removeShareTo(row)" />
           </template>
         </sharing-user-list>
+
       </q-card-section>
 
       <q-card-actions align="right" class="text-primary">
@@ -62,7 +82,8 @@ interface Props {
 }
 
 interface IUserDisplayWithShareRole extends IUserDisplay {
-  role: number;
+  isRemoving: boolean;
+  role: number; // 2: 所有者，1: 管理者， 0: 利用者
 }
 
 const props = defineProps<Props>();
@@ -73,7 +94,6 @@ const emit = defineEmits<{
 }>();
 
 const addLoading = ref(false);
-const removingUser = ref<IUserDisplayWithShareRole>();
 const loading = ref(true);
 const visible = ref(props.modelValue);
 
@@ -158,12 +178,11 @@ const shareTo = async (user: IUserDisplayWithShareRole) => {
 }
 
 const removeShareTo = async (user: IUserDisplayWithShareRole) => {
-  removingUser.value = user;
   loading.value = true;
+  user.isRemoving = true;
   await api.delete(`api/domain/${props.domain.id}/${user.id}`)
   await loadShared();
   loading.value = false;
-  removingUser.value = undefined;
 };
 
 const loadShared = async () => {
@@ -175,7 +194,7 @@ const loadShared = async () => {
     const val = itemToDisplay(item);
     sharedUsersIdSet.add(val.id);
     return val;
-  });
+  }).reverse().sort((a: IUserDisplayWithShareRole, b: IUserDisplayWithShareRole) => b.role - a.role);
 
   canSharedUsers.value = allUsers.value.filter((item) => !sharedUsersIdSet.has(item.id));
   canSharedUserFilteredOptions.value = canSharedUsers.value;
@@ -197,6 +216,10 @@ const getUsers = async () => {
   loading.value = false;
 }
 
+function isOwner(userId: number) {
+  return userId === props.domain.owner.id
+}
+
 const itemToDisplay = (item: IUser) => {
   return {
     id: item.id,
@@ -207,7 +230,7 @@ const itemToDisplay = (item: IUser) => {
     email: item.email,
     isSuperuser: item.is_superuser,
     isActive: item.is_active,
-    role: 0, // TODO
+    role: isOwner(item.id) ? 2 : 0, // TODO
   } as IUserDisplayWithShareRole
 }
 </script>

frontend/src/components/ShareDomain/SharingUserList.vue

@@ -10,10 +10,17 @@
       </q-input>
     </template>
 
-    <template v-slot:body-cell-actions="props">
-      <q-td auto-width :props="props">
-        <slot name="actions" :row="props.row"></slot>
-      </q-td>
+    <template v-for="col in columns" :key="col.name" v-slot:[`body-cell-${col.name}`]="props">
+      <slot :name="`body-cell-${col.name}`" :row="props.row" :column="props.col">
+        <!-- 默认内容 -->
+        <q-td v-if="col.name !== 'actions'" :props="props" >
+          <span>{{ props.row[col.name] }}</span>
+        </q-td>
+        <!-- actions -->
+        <q-td v-else auto-width :props="props">
+          <slot name="actions" :row="props.row"></slot>
+        </q-td>
+      </slot>
     </template>
   </q-table>
 </template>
@@ -37,9 +44,10 @@ const columns = [
   { name: 'id', label: 'ID', field: 'id', align: 'left', sortable: true },
   { name: 'fullName', label: '名前', field: 'fullName', align: 'left', sortable: true },
   { name: 'email', label: '電子メール', field: 'email', align: 'left', sortable: true },
+  { name: 'role', label: '権限', field: 'role', align: 'left', sortable: true },
   { name: 'actions', label: '', field: 'actions', sortable: false },
 ];
 
 const filter = ref('');
-const pagination = ref({ sortBy: 'id', descending: true, rowsPerPage: 10 });
+const pagination = ref({ rowsPerPage: 10 });
 </script>