[UI] some fix

frontend/src/components/ShareDomain/ShareDomainDialog.vue

@@ -22,7 +22,8 @@
           :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-select class="q-mr-sm" v-model="canSharedRole" :options="roleOptions"  /> -->
+            <q-btn :disable="!canSharedUserFilter" :loading="addLoading" label="付与" color="primary" @click="shareTo(canSharedUserFilter as IUserDisplayWithShareRole)" />
           </template>
 
           <template v-slot:option="scope">
@@ -35,7 +36,13 @@
         </q-select>
         <sharing-user-list class="q-mt-md" style="height: 330px" :users="sharedUsers" :loading="loading" title="ドメイン利用権限を持つユーザー">
           <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)" />
+            <div class="row no-wrap justify-end  items-center">
+            <!-- <q-select class="col-auto" :options="roleOptions" emit-value map-options v-model="row.role" borderless dense options-dense hide-bottom-space
+              @update:model-value="updateSharedRole(row, $event)"/> -->
+              <div class="col-auto">
+                <q-btn round title="解除" flat color="primary" padding="xs" size="1em" :loading="row.id == removingUser?.id" icon="person_off" @click="removeShareTo(row)" />
+              </div>
+            </div>
           </template>
         </sharing-user-list>
       </q-card-section>
@@ -61,6 +68,10 @@ interface Props {
   domain: IDomainOwnerDisplay;
 }
 
+interface IUserDisplayWithShareRole extends IUserDisplay {
+  role: number;
+}
+
 const props = defineProps<Props>();
 
 const emit = defineEmits<{
@@ -69,17 +80,22 @@ const emit = defineEmits<{
 }>();
 
 const addLoading = ref(false);
-const removingUser = ref<IUserDisplay>();
+const removingUser = ref<IUserDisplayWithShareRole>();
 const loading = ref(true);
 const visible = ref(props.modelValue);
 
-const allUsers = ref<IUserDisplay[]>([]);
-const sharedUsers = ref<IUserDisplay[]>([]);
+const allUsers = ref<IUserDisplayWithShareRole[]>([]);
+const sharedUsers = ref<IUserDisplayWithShareRole[]>([]);
 const sharedUsersIdSet = new Set<number>();
 
-const canSharedUsers = ref<IUserDisplay[]>([]);
-const canSharedUserFilter = ref<IUserDisplay>();
-const canSharedUserFilteredOptions = ref<IUserDisplay[]>([]);
+const canSharedUsers = ref<IUserDisplayWithShareRole[]>([]);
+const canSharedUserFilter = ref<IUserDisplayWithShareRole>();
+const canSharedUserFilteredOptions = ref<IUserDisplayWithShareRole[]>([]);
+const roleOptions = [
+  { value: 0, label: '利用者' },
+  { value: 1, label: '管理者' },
+]
+const canSharedRole = ref<{value: number, label: string}>(roleOptions[0]);
 
 const filterFn = (val:string, update: (cb: () => void) => void) => {
   update(() => {
@@ -99,6 +115,9 @@ watch(
     visible.value = newValue;
     sharedUsers.value = [];
     canSharedUserFilter.value = undefined
+    canSharedRole.value = roleOptions[0];
+    loading.value = false;
+    addLoading.value = false;
     if (newValue) {
       await loadShared();
     }
@@ -130,7 +149,7 @@ const checkClose = () => {
   }).onCancel(() => {
     close();
   }).onOk(() => {
-    shareTo(canSharedUserFilter.value as IUserDisplay);
+    shareTo(canSharedUserFilter.value as IUserDisplayWithShareRole);
   });
 };
 
@@ -138,17 +157,21 @@ const close = () => {
   emit('close');
 };
 
-const shareTo = async (user: IUserDisplay) => {
+const shareTo = async (user: IUserDisplayWithShareRole) => {
   addLoading.value = true;
   loading.value = true;
-  await api.post(`api/domain/${user.id}?domainid=${props.domain.id}`)
+  await api.post(`api/userdomain`, {
+    'userid': user.id,
+    'domainid': props.domain.id
+  })
   await loadShared();
   canSharedUserFilter.value = undefined;
+  canSharedRole.value = roleOptions[0];
   loading.value = false;
   addLoading.value = false;
 }
 
-const removeShareTo = async (user: IUserDisplay) => {
+const removeShareTo = async (user: IUserDisplayWithShareRole) => {
   removingUser.value = user;
   loading.value = true;
   await api.delete(`api/domain/${props.domain.id}/${user.id}`)
@@ -157,6 +180,25 @@ const removeShareTo = async (user: IUserDisplay) => {
   removingUser.value = undefined;
 };
 
+const updateSharedRole = async (user: IUserDisplayWithShareRole, role: number) => {
+  Dialog.create({
+    message: roleOptions[role].label + 'に切り替えますか？',
+    persistent: true,
+    ok: {
+      color: 'primary',
+      label: 'はい'
+    },
+    cancel: 'いいえ',
+  }).onCancel(() => {
+    user.role = role == 0 ? 1 : 0;
+  }).onOk(async () => {
+    loading.value = true;
+    // TODO
+    // await
+    loading.value = false;
+  });
+};
+
 const loadShared = async () => {
   loading.value = true;
   sharedUsersIdSet.clear();
@@ -198,7 +240,8 @@ const itemToDisplay = (item: IUser) => {
     email: item.email,
     isSuperuser: item.is_superuser,
     isActive: item.is_active,
-  } as IUserDisplay
+    role: 0, // TODO
+  } as IUserDisplayWithShareRole
 }
 </script>
 

frontend/src/components/ShareDomain/SharingUserList.vue

@@ -11,7 +11,7 @@
     </template>
 
     <template v-slot:body-cell-actions="props">
-      <q-td :props="props">
+      <q-td auto-width :props="props">
         <slot name="actions" :row="props.row"></slot>
       </q-td>
     </template>