ユーザードメインページを調整し、ユーザーがシステム管理者の場合、他のユーザーのユーザードメインを管理できるようにしました。

2024-08-19 21:44:53 +09:00
parent acf8f0489d
commit b5fa5cdf57
1 changed files with 132 additions and 68 deletions
--- a/frontend/src/pages/UserDomain.vue
+++ b/frontend/src/pages/UserDomain.vue
@@ -1,17 +1,28 @@
 <template>
  <div class="q-pa-lg">
-    <q-table grid grid-header title="Domain" selection="single" :rows="rows" :columns="columns"
-      v-model:selected="selected" row-key="name" :filter="filter" virtual-scroll v-model:pagination="pagination">
+    <q-table grid grid-header title="Domain" selection="single" :rows="rows" :columns="columns" row-key="name"
+      :filter="userDomainTableFilter" virtual-scroll v-model:pagination="pagination">
      <template v-slot:top>
-        <div class="q-gutter-sm">
-          <q-btn class="q-mx-none" color="primary" label="追加" @click="newDomain()" />
-        </div>
+
+        <q-btn class="q-mx-none" color="primary" label="追加" @click="clickAddDomain()" />
+
        <q-space />
-        <q-input borderless dense filled debounce="300" v-model="filter" placeholder="Search">
-          <template v-slot:append>
-            <q-icon name="search" />
-          </template>
-        </q-input>
+        <div class="row q-gutter-md">
+          <q-item v-if="authStore.permissions === 'admin'" tag="label" dense @click="clickSwitchUser()">
+            <q-item-section>
+              <q-item-label>オブジェクトユーザ : </q-item-label>
+            </q-item-section>
+            <q-item-section avatar>
+              {{ currentUserName }}
+            </q-item-section>
+          </q-item>
+
+          <q-input borderless dense filled debounce="300" v-model="userDomainTableFilter" placeholder="Search">
+            <template v-slot:append>
+              <q-icon name="search" />
+            </template>
+          </q-input>
+        </div>
      </template>

      <template v-slot:header>
@@ -46,7 +57,7 @@
                  <div class="col-auto">
                    <q-btn v-if="isActive(props.row.id) !== 'Active'" flat
                      @click="activeDomain(props.row.id)">有効</q-btn>
-                    <q-btn flat @click="deleteConfirm(props.row)">削除</q-btn>
+                    <q-btn flat @click="clickDeleteConfirm(props.row)">削除</q-btn>
                  </div>
                </div>
              </div>
@@ -56,11 +67,35 @@
      </template>
    </q-table>

-    <show-dialog v-model:visible="show" name="ドメイン" @close="closeDg">
-      <domain-select ref="domainDg" name="ドメイン" type="multiple"></domain-select>
+    <show-dialog v-model:visible="showAddDomainDg" name="ドメイン" @close="addUserDomainFinished">
+      <domain-select ref="addDomainRef" name="ドメイン" type="multiple"></domain-select>
    </show-dialog>

-    <q-dialog v-model="confirm" persistent>
+    <show-dialog v-model:visible="showSwitchUserDd" name="ドメイン" minWidth="35vw" @close="switchUserFinished">
+      <template v-slot:toolbar>
+        <q-input dense placeholder="検索" v-model="switchUserFilter">
+          <template v-slot:append>
+            <q-icon name="search" />
+          </template>
+        </q-input>
+      </template>
+      <div class="q-gutter-md">
+        <q-item tag="label" class="q-pl-sm q-pr-none q-py-xs">
+          <q-item-section>
+            <q-item-label>他のユーザーを選択する</q-item-label>
+          </q-item-section>
+          <q-item-section avatar>
+            <q-toggle v-model="useOtherUser" />
+          </q-item-section>
+        </q-item>
+        <div v-if="useOtherUser">
+          <user-list ref="switchUserRef" name="ドメイン" :filter="switchUserFilter" />
+        </div>
+      </div>
+
+    </show-dialog>
+
+    <q-dialog v-model="showDeleteConfirm" persistent>
      <q-card>
        <q-card-section class="row items-center">
          <div class="q-ma-sm q-mt-md">
@@ -71,7 +106,7 @@

        <q-card-actions align="right">
          <q-btn flat label="Cancel" color="primary" v-close-popup />
-          <q-btn flat label="OK" color="primary" v-close-popup @click="deleteDomain()" />
+          <q-btn flat label="OK" color="primary" v-close-popup @click="deleteDomainFinished()" />
        </q-card-actions>
      </q-card>
    </q-dialog>
@@ -79,24 +114,17 @@
 </template>

 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import ShowDialog from 'components/ShowDialog.vue';
-import DomainSelect from 'components/DomainSelect.vue';
+import { ref, onMounted, computed } from 'vue'
+import { api } from 'boot/axios';
 import { useAuthStore } from 'stores/useAuthStore';

+import ShowDialog from 'components/ShowDialog.vue';
+import DomainSelect from 'components/DomainSelect.vue';
+import UserList from 'components/UserList.vue';
+
 const authStore = useAuthStore();
-import { api } from 'boot/axios';
-const domainDg = ref();
-const selected = ref([])
-
-const show = ref(false);
-const confirm = ref(false)
-const filter = ref()
-
-let editId = ref(0);
-let activedomainid = ref(0);
-
-const pagination = ref({ rowsPerPage: 0 });
+const pagination = ref({ sortBy: 'id', rowsPerPage: 0 });
+const rows = ref([] as any[]);

 const columns = [
  { name: 'id' },
@@ -106,63 +134,99 @@ const columns = [
  { name: 'kintonepwd' },
  { name: 'active', field: 'active' }
 ]
+const userDomainTableFilter = ref()

-const rows = ref([] as any[]);
+const currentUserName = ref('')
+const useOtherUser = ref(false);
+const otherUserId = ref('')

-const isActive = (id: number) => {
-  if (id == activedomainid.value)
-    return "Active";
-  else
-    return "Inactive";
-}
+let editId = ref(0);

-const newDomain = () => {
+const showAddDomainDg = ref(false);
+const addDomainRef = ref();
+
+const clickAddDomain = () => {
  editId.value = 0;
-  show.value = true;
+  showAddDomainDg.value = true;
 };

-
-const activeDomain = (id: number) => {
-  api.put(`api/activedomain/` + id).then(() => {
-    getDomain();
-  })
-};
-
-const deleteConfirm = (row: object) => {
-  confirm.value = true;
-  editId.value = row.id;
-};
-
-const deleteDomain = () => {
-  console.log(authStore.getCurrentDomain);
-
-  api.delete(`api/domain/${editId.value}/${authStore.userId}`).then(() => {
-    getDomain();
-  })
-  editId.value = 0;
-};
-
-const closeDg = (val: string) => {
+const addUserDomainFinished = (val: string) => {
  if (val == 'OK') {
    let dodmainids = [];
-    let domains = JSON.parse(JSON.stringify(domainDg.value.selected));
+    let domains = JSON.parse(JSON.stringify(addDomainRef.value.selected));
    for (var key in domains) {
      dodmainids.push(domains[key].id);
    }
-    api.post(`api/domain/${authStore.userId}`, dodmainids).then(() => { getDomain(); });
+    api.post(`api/domain/${useOtherUser.value ? otherUserId.value : authStore.userId}`, dodmainids)
+      .then(() => { getDomain(useOtherUser.value ? otherUserId.value : undefined); });
  }
-
 };
-const getDomain = async () => {
-  const resp = await api.get(`api/activedomain`);
-  activedomainid.value = resp.data.id;
-  const domainResult = await api.get(`api/domain`);
+
+const showDeleteConfirm = ref(false)
+
+const clickDeleteConfirm = (row: any) => {
+  showDeleteConfirm.value = true;
+  editId.value = row.id;
+};
+
+const deleteDomainFinished = () => {
+  api.delete(`api/domain/${editId.value}/${useOtherUser.value ? otherUserId.value : authStore.userId}`).then(() => {
+    getDomain(useOtherUser.value ? otherUserId.value : undefined);
+  })
+  editId.value = 0;
+};
+
+const activeDomain = (id: number) => {
+  api.put(`api/activedomain/${id}${useOtherUser.value ? `?userId=${otherUserId.value}` : ''}`)
+    .then(() => { getDomain(useOtherUser.value ? otherUserId.value : undefined); })
+};
+
+let activeDomainId = ref(0);
+
+const isActive = computed(() => (id: number) => {
+  if (id == activeDomainId.value)
+    return "Active";
+  else
+    return "Inactive";
+})
+
+
+const showSwitchUserDd = ref(false);
+const switchUserRef = ref();
+const switchUserFilter = ref('')
+
+const clickSwitchUser = () => {
+  showSwitchUserDd.value = true;
+  useOtherUser.value = false;
+};
+
+const switchUserFinished = async (val: string) => {
+  if (val == 'OK') {
+    if (useOtherUser.value) {
+      const user = switchUserRef.value.selected[0]
+      currentUserName.value = user.email;
+      otherUserId.value = user.id
+      await getDomain(user.id)
+    } else {
+      currentUserName.value = authStore.userInfo.email
+      await getDomain();
+    }
+
+  }
+};
+
+const getDomain = async (userId? : string) => {
+  const resp = await api.get(`api/activedomain${useOtherUser.value ? `?userId=${otherUserId.value}` : ''}`);
+  activeDomainId.value = resp?.data?.id;
+  const domainResult = userId ? await api.get(`api/domain?userId=${userId}`) : await api.get(`api/domain`);
  const domains = domainResult.data as any[];
  rows.value = domains.map((item) => {
    return { id: item.id, name: item.name, url: item.url, kintoneuser: item.kintoneuser, kintonepwd: item.kintonepwd }
  });
 }
+
 onMounted(async () => {
+  currentUserName.value = authStore.userInfo.email
  await getDomain();
 })