[UI] some fix

2024-12-15 22:21:00 +08:00
parent 1135361b00
commit 6b94af76c1
3 changed files with 72 additions and 22 deletions
--- a/frontend/src/components/ShareDomain/ShareDomainDialog.vue
+++ b/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>

--- a/frontend/src/components/ShareDomain/SharingUserList.vue
+++ b/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>
--- a/frontend/src/pages/TenantDomain.vue
+++ b/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">
-          <q-icon name="warning" color="warning" size="2em" />
-          <span class="q-ml-sm">削除してもよろしいですか？</span>
-        </q-card-section>
-        <q-card-section v-else class="row items-center">
+        <!-- > 0 can't delete -->
+        <q-card-section v-else-if="deleteLoadingState > 0" 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) {