[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 allUsers = ref<IUserDisplayWithShareRole[]>([]);
-const sharedUsers = ref<IUserDisplay[]>([]);
+const sharedUsers = ref<IUserDisplayWithShareRole[]>([]);
 const sharedUsersIdSet = new Set<number>();
 
-const canSharedUsers = ref<IUserDisplay[]>([]);
+const canSharedUsers = ref<IUserDisplayWithShareRole[]>([]);
-const canSharedUserFilter = ref<IUserDisplay>();
+const canSharedUserFilter = ref<IUserDisplayWithShareRole>();
-const canSharedUserFilteredOptions = ref<IUserDisplay[]>([]);
+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>

frontend/src/pages/TenantDomain.vue

@@ -112,23 +112,28 @@
 
     <q-dialog v-model="confirm" persistent>
       <q-card>
+        <!-- -1 loading -->
         <q-card-section v-if="deleteLoadingState == -1" class="row items-center">
           <q-spinner color="primary" size="2em"/>
           <span class="q-ml-sm">ドメイン利用権限を確認中</span>
         </q-card-section>
-        <q-card-section v-else-if="deleteLoadingState == 0" class="row items-center">
+        <!-- > 0 can't delete -->
-          <q-icon name="warning" color="warning" size="2em" />
+        <q-card-section v-else-if="deleteLoadingState > 0" class="row items-center">
-          <span class="q-ml-sm">削除してもよろしいですか？</span>
-        </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>
         </q-card-section>
+        <!-- 0/-2 can delete -->
+        <q-card-section v-else class="row items-center">
+          <q-icon name="warning" color="warning" size="2em" />
+          <span class="q-ml-sm">削除してもよろしいですか？</span>
+        </q-card-section>
 
         <q-card-actions align="right">
           <q-btn flat label="キャンセル" color="primary" v-close-popup />
+          <!-- > 0 can't delete -->
           <q-btn v-if="deleteLoadingState > 0" label="実行" color="primary" v-close-popup @click="openShareDg(editId)" />
-          <q-btn flat v-else label="OK" :disabled="deleteLoadingState" color="primary" v-close-popup @click="deleteDomain()" />
+          <!-- 0/-2 can delete -->
+          <q-btn flat v-else label="OK" :disabled="deleteLoadingState == -1" :loading="deleteLoadingState == -2" color="primary" @click="deleteDomain()" />
         </q-card-actions>
       </q-card>
     </q-dialog>
@@ -171,7 +176,7 @@ const columns = [
 const pagination = ref({ sortBy: 'id', descending: true, rowsPerPage: 20 });
 const loading = ref(false);
 const addEditLoading = ref(false);
-const deleteLoadingState = ref<number>(-1); // -1: loading, 0: allow, > 0: user count
+const deleteLoadingState = ref<number>(-1); // -2: deleteLoading, -1: loading, 0: allow, > 0: user count
 
 const filter = ref('');
 const rows = ref<IDomainOwnerDisplay[]>([]);
@@ -269,15 +274,17 @@ async function removeRow(row: IDomainOwnerDisplay) {
 }
 
 const deleteDomain = () => {
+  deleteLoadingState.value = -2;
   api.delete(`api/domain/${editId.value}`).then(({ data }) => {
     if (!data.data) {
       // TODO dialog
     }
+    confirm.value = false;
+    deleteLoadingState.value = -1;
     getDomain();
     // authStore.setCurrentDomain();
   })
   editId.value = 0; // set in removeRow()
-  deleteLoadingState.value = -1;
 };
 
 function editRow(row) {