From 8a3aaec8d549d727c6d18633fae0bcc09d07b44e Mon Sep 17 00:00:00 2001
From: xue jiahao <hsuehchiahao@gmail.com>
Date: Thu, 28 Nov 2024 00:45:23 +0800
Subject: [PATCH 1/4] [UI] update card

---
 frontend/src/components/ShowDialog.vue       |   2 +-
 frontend/src/components/main/domainTable.vue |  33 +++
 frontend/src/pages/UserDomain.vue            | 204 ++++++++-----------
 3 files changed, 114 insertions(+), 125 deletions(-)
 create mode 100644 frontend/src/components/main/domainTable.vue

diff --git a/frontend/src/components/ShowDialog.vue b/frontend/src/components/ShowDialog.vue
index 50641db..5f6098e 100644
--- a/frontend/src/components/ShowDialog.vue
+++ b/frontend/src/components/ShowDialog.vue
@@ -13,7 +13,7 @@
         </q-card-section>
         <q-card-actions v-if="!disableBtn" align="right" class="text-primary">
           <q-btn flat label="確定" :loading="okBtnLoading" :v-close-popup="okBtnAutoClose" @click="CloseDialogue('OK')" />
-          <q-btn flat label="キャンセル" v-close-popup @click="CloseDialogue('Cancel')" />
+          <q-btn flat label="キャンセル" :disable="okBtnLoading" v-close-popup @click="CloseDialogue('Cancel')" />
         </q-card-actions>
       </q-card>
     </q-dialog>
diff --git a/frontend/src/components/main/domainTable.vue b/frontend/src/components/main/domainTable.vue
new file mode 100644
index 0000000..23bf91d
--- /dev/null
+++ b/frontend/src/components/main/domainTable.vue
@@ -0,0 +1,33 @@
+<template>
+  <q-table :rows="rows" :columns="columns" row-key="id" :filter="filter" :loading="loading" :pagination="pagination">
+
+    <template v-slot:top>
+      <q-btn color="primary" :disable="loading" label="新規" @click="addRow" />
+      <q-space />
+      <q-input borderless dense filled debounce="300" v-model="filter" placeholder="検索">
+        <template v-slot:append>
+          <q-icon name="search" />
+        </template>
+      </q-input>
+    </template>
+
+    <template v-slot:body-cell-name="p">
+      <q-td class="flex justify-between items-center" :props="p">
+        {{ p.row.name }}
+        <q-badge v-if="!p.row.domainActive" color="grey">未启用</q-badge>
+        <q-badge v-if="p.row.id == currendDomainId" color="primary">現在</q-badge>
+      </q-td>
+    </template>
+
+    <template v-slot:body-cell-actions="p">
+      <q-td :props="p">
+        <q-btn-group flat>
+          <q-btn flat color="primary" padding="xs" size="1em" icon="edit_note" @click="editRow(p.row)" />
+          <q-btn flat color="negative" padding="xs" size="1em" icon="delete_outline" @click="removeRow(p.row)" />
+        </q-btn-group>
+      </q-td>
+    </template>
+
+  </q-table>
+</template>
+
diff --git a/frontend/src/pages/UserDomain.vue b/frontend/src/pages/UserDomain.vue
index 08942f3..e4ba99c 100644
--- a/frontend/src/pages/UserDomain.vue
+++ b/frontend/src/pages/UserDomain.vue
@@ -6,23 +6,14 @@
       <q-breadcrumbs-el icon="assignment_ind" label="ドメイン適用" />
     </q-breadcrumbs>
   </div>
-    <q-table :loading="loading" grid grid-header title="Domain" selection="single" :rows="rows" :columns="columns" row-key="name"
+
+    <q-table :loading="initLoading" 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>
-
         <q-btn class="q-mx-none" color="primary" label="追加" @click="clickAddDomain()" />
-
         <q-space />
         <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" />
@@ -38,69 +29,47 @@
 
       <template v-slot:item="props">
         <div class="q-pa-sm">
-          <q-card>
+          <q-card :class="['domain-card', isNotOwner(props.row.id) ? 'bg-grey-2': '']">
             <q-card-section>
-              <div class="q-table__grid-item-row">
-                <div class="q-table__grid-item-title">Domain</div>
-                <div class="q-table__grid-item-value">{{ props.row.name }}</div>
+              <div class="row items-center no-wrap">
+                <div class="col">
+                  <div class="text-h6">{{ props.row.name }}</div>
+                  <div class="text-subtitle2">{{ props.row.url }}</div>
+                </div>
+                <div v-if="isNotOwner(props.row.id)" class="col-auto">
+                  <q-icon name="account_circle" color="teal" size="2em" ></q-icon>
+                </div>
               </div>
-              <div class="q-table__grid-item-row">
-                <div class="q-table__grid-item-title">URL</div>
-                <div class="q-table__grid-item-value" style="width: 22rem;">{{ props.row.url }}</div>
-              </div>
-              <div class="q-table__grid-item-row">
-                <div class="q-table__grid-item-title">Account</div>
-                <div class="q-table__grid-item-value">{{ props.row.kintoneuser }}</div>
+            </q-card-section>
+            <q-card-section>
+              <div class="row items-center no-wrap">
+                <div class="col">
+                  <div class="text-grey-7 text-caption text-weight-medium">アカウント</div>
+                  <div class="smaller-font-size">{{ props.row.kintoneuser }}</div>
+                </div>
+                <div v-if="isNotOwner(props.row.id)" class="col-auto">
+                  <div class="text-grey-7 text-caption text-weight-medium">所有者</div>
+                  <div class="smaller-font-size">{{ props.row.owner }}</div>
+                </div>
               </div>
             </q-card-section>
             <q-separator />
             <q-card-actions align="right">
-              <div style="width: 98%;">
-                <div class="row items-center justify-between">
-                  <div class="q-table__grid-item-value"
-                    :class="isActive(props.row.id) ? 'text-positive' : 'text-negative'">{{
-                      isActive(props.row.id)?'既定':'' }}</div>
-                  <div class="col-auto">
-                    <q-btn v-if="!isActive(props.row.id)" flat
-                      @click="activeDomain(props.row)">既定にする</q-btn>
-                    <q-btn flat @click="clickDeleteConfirm(props.row)">削除</q-btn>
-                  </div>
-                </div>
-              </div>
+              <q-chip v-if="isActive(props.row.id)" outline color="teal" text-color="white" icon="done">
+                既定
+              </q-chip>
+              <q-btn flat v-else :loading="activeDomainLoadingId === props.row.id" :disable="deleteDomainLoadingId === props.row.id" @click="activeDomain(props.row)">既定にする</q-btn>
+              <q-btn flat :disable="isNotOwner(props.row.id) || activeDomainLoadingId === props.row.id" :text-color="isNotOwner(props.row.id)?'grey':''" :loading="deleteDomainLoadingId === props.row.id" @click="clickDeleteConfirm(props.row)">削除</q-btn>
             </q-card-actions>
           </q-card>
         </div>
       </template>
     </q-table>
 
-    <show-dialog v-model:visible="showAddDomainDg" name="ドメイン" @close="addUserDomainFinished">
+    <show-dialog v-model:visible="showAddDomainDg" name="ドメイン" @close="addUserDomainFinished" :ok-btn-loading="addUserDomainLoading" :ok-btn-auto-close="false">
       <domain-select ref="addDomainRef" name="ドメイン" type="single" :filterInitRowsFunc="filterAddDgInitRows"></domain-select>
     </show-dialog>
 
-    <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">
@@ -123,32 +92,27 @@
 import { ref, onMounted, computed } from 'vue'
 import { api } from 'boot/axios';
 import { useAuthStore } from 'stores/useAuthStore';
-import { useDomainStore } from 'stores/useDomainStore';
 
 import ShowDialog from 'components/ShowDialog.vue';
 import DomainSelect from 'components/DomainSelect.vue';
-import UserList from 'components/UserList.vue';
 
 const authStore = useAuthStore();
-const domainStore = useDomainStore();
 const pagination = ref({ sortBy: 'id', rowsPerPage: 0 });
 const rows = ref([] as any[]);
 const rowIds = new Set<string>();
-const loading = ref(true);
+const initLoading = ref(true);
+const addUserDomainLoading = ref(false);
+const activeDomainLoadingId = ref<number|undefined>(undefined);
+const deleteDomainLoadingId = ref<number|undefined>(undefined);
 
 const columns = [
   { name: 'id' },
   { name: 'name', required: true, label: 'Name', align: 'left', field: 'name', sortable: true },
   { name: 'url', align: 'center', label: 'Domain', field: 'url', sortable: true },
   { name: 'kintoneuser', label: 'User', field: 'kintoneuser', sortable: true },
-  { name: 'kintonepwd' },
 ];
 const userDomainTableFilter = ref();
 
-const currentUserName = ref('');
-const useOtherUser = ref(false);
-const otherUserId = ref('');
-
 let editId = ref(0);
 
 const showAddDomainDg = ref(false);
@@ -163,21 +127,23 @@ const clickAddDomain = () => {
   showAddDomainDg.value = true;
 };
 
-const addUserDomainFinished = (val: string) => {
+const addUserDomainFinished = async (val: string) => {
+  showAddDomainDg.value = true;
+  addUserDomainLoading.value = true;
   const selected = addDomainRef.value.selected;
   if (val == 'OK' && selected.length > 0) {
-    api.post(`api/domain/${useOtherUser.value ? otherUserId.value : authStore.userId}?domainid=${selected[0].id}`)
-      .then(async ({ data }) => {
-        if (rows.value.length === 0 && data.data) {
-          const domain = data.data;
-          await authStore.setCurrentDomain({
-            id: domain.id,
-            kintoneUrl: domain.url,
-            domainName: domain.name
-          });
-        }
-        getDomain(useOtherUser.value ? otherUserId.value : undefined);
+    const { data } = await api.post(`api/domain/${authStore.userId}?domainid=${selected[0].id}`)
+    if (rows.value.length === 0 && data.data) {
+      const domain = data.data;
+      await authStore.setCurrentDomain({
+        id: domain.id,
+        kintoneUrl: domain.url,
+        domainName: domain.name
       });
+    }
+    await getDomain();
+    addUserDomainLoading.value = false;
+    showAddDomainDg.value = false;
   }
 };
 
@@ -189,26 +155,25 @@ const clickDeleteConfirm = (row: any) => {
 };
 
 const deleteDomainFinished = async () => {
-  await api.delete(`api/domain/${editId.value}/${useOtherUser.value ? otherUserId.value : authStore.userId}`).then(({ data }) => {
-    if (data.msg == 'OK' && authStore.currentDomain.id === editId.value) {
-      authStore.setCurrentDomain();
-    }
-    getDomain(useOtherUser.value ? otherUserId.value : undefined);
-  })
+  deleteDomainLoadingId.value = editId.value;
+  const { data } = await api.delete(`api/domain/${editId.value}/${authStore.userId}`)
+  if (data.msg == 'OK' && authStore.currentDomain.id === editId.value) {
+    authStore.setCurrentDomain();
+  }
   editId.value = 0;
+  await getDomain();
+  deleteDomainLoadingId.value = undefined;
 };
 
 const activeDomain = async (domain: any) => {
-  if (useOtherUser.value) {
-    // TODO
-    return;
-  }
+  activeDomainLoadingId.value = domain.id;
   await authStore.setCurrentDomain({
     id: domain.id,
     kintoneUrl: domain.url,
     domainName: domain.name
   });
-  getDomain();
+  await getDomain();
+  activeDomainLoadingId.value = undefined;
 };
 
 let activeDomainId = ref(0);
@@ -217,52 +182,43 @@ const isActive = computed(() => (id: number) => {
   return id == activeDomainId.value;
 });
 
-
-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 isNotOwner = computed(() => (ownerId: string) => {
+  return ownerId == authStore.userId;
+});
 
 const getDomain = async (userId? : string) => {
-  loading.value = true;
   rowIds.clear();
-  if (useOtherUser.value) {
-    // TODO
-    return;
-  }
   const resp = await api.get(`api/defaultdomain`);
   activeDomainId.value = resp?.data?.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) => {
     rowIds.add(item.id);
-    return { id: item.id, name: item.name, url: item.url, kintoneuser: item.kintoneuser, kintonepwd: item.kintonepwd }
+    return {
+      id: item.id,
+      name: item.name,
+      url: item.url,
+      kintoneuser: item.kintoneuser,
+      ownerEmail: item.owner.email,
+      owner: item.owner.first_name + ' ' + item.owner.last_name,
+    }
   });
-  loading.value = false;
 }
 
 onMounted(async () => {
-  currentUserName.value = authStore.userInfo.email
+  initLoading.value = true;
   await getDomain();
+  initLoading.value = false;
 })
 
 </script>
+<style lang="scss" scoped>
+.domain-card {
+  width: 22rem;
+  word-break: break-word;
+
+  .smaller-font-size {
+    font-size: 13px;
+  }
+}
+</style>
\ No newline at end of file

From 660ffe36c21519d06b00e11c8d2c984b49752109 Mon Sep 17 00:00:00 2001
From: xue jiahao <hsuehchiahao@gmail.com>
Date: Mon, 2 Dec 2024 16:21:23 +0800
Subject: [PATCH 2/4] Add shared dialog

---
 .../components/Domain/ShareDomainDialog.vue   | 186 ++++++++++++++++
 .../ShareDomain/ShareDomainDialog.vue         | 202 ++++++++++++++++++
 .../ShareDomain/SharingUserList.vue           |  41 ++++
 .../src/components/UserDomain/DomainCard.vue  |  56 +++++
 frontend/src/pages/TenantDomain.vue           |  28 ++-
 frontend/src/pages/UserDomain.vue             |  39 +---
 frontend/src/types/UserTypes.ts               |  15 +-
 7 files changed, 532 insertions(+), 35 deletions(-)
 create mode 100644 frontend/src/components/Domain/ShareDomainDialog.vue
 create mode 100644 frontend/src/components/ShareDomain/ShareDomainDialog.vue
 create mode 100644 frontend/src/components/ShareDomain/SharingUserList.vue
 create mode 100644 frontend/src/components/UserDomain/DomainCard.vue

diff --git a/frontend/src/components/Domain/ShareDomainDialog.vue b/frontend/src/components/Domain/ShareDomainDialog.vue
new file mode 100644
index 0000000..0b3aa49
--- /dev/null
+++ b/frontend/src/components/Domain/ShareDomainDialog.vue
@@ -0,0 +1,186 @@
+<template>
+  <q-dialog :auto-close="false" :model-value="visible" persistent bordered>
+    <q-card style="min-width: 40vw; max-width: 80vw; max-height: 95vh;" >
+      <q-toolbar class="bg-grey-4">
+        <q-toolbar-title>「{{domain.name}}」のドメインを共有する</q-toolbar-title>
+        <q-space></q-space>
+        <slot name="toolbar"></slot>
+        <q-btn flat round dense icon="close" @click="close" />
+      </q-toolbar>
+      
+      <q-card-section>
+        {{ props.domain.url }}
+        <!-- <q-input value="props.domain.url" label="共有リンク" readonly outlined dense>
+        </q-input> -->
+      </q-card-section>
+      <q-card-section>
+        <!-- <q-select
+          filled
+          v-model="filterInput"
+          use-input
+          use-chips
+          multiple
+          input-debounce="0"
+          :options="filterUsers"
+          @filter="filterFn"
+        /> -->
+        
+        <q-table :rows="canSharedUsers" :filter="filterUnshared" :columns="columns" row-key="id" :loading="loading" :pagination="paginationUnshared">
+          <template v-slot:body-cell-actions="p">
+            <q-td :props="p">
+              <q-btn-group flat>
+                <q-btn flat color="primary" padding="xs" size="1em" icon="add" @click="shareTo(p.row)" />
+              </q-btn-group>
+            </q-td>
+          </template>
+          <template v-slot:top-right>
+            <q-input borderless dense filled debounce="300" v-model="filterUnshared" placeholder="検索">
+              <template v-slot:append>  
+                <q-icon name="search" />
+              </template>
+            </q-input>
+          </template>
+        </q-table>
+
+        <!-- <q-btn flat label="共有する" @click="shareTo" /> -->
+        <q-table :rows="sharedUsers" :filter="filterShared" :columns="columns" row-key="id" :loading="loading" :pagination="paginationShared" >
+          <template v-slot:body-cell-actions="p">
+            <q-td :props="p">
+              <q-btn-group flat>
+                <q-btn flat color="primary" padding="xs" size="1em" icon="person_off" @click="removeShareTo(p.row)" />
+              </q-btn-group>
+            </q-td>
+          </template>
+          <template v-slot:top-right>
+            <q-input borderless dense filled debounce="300" v-model="filterShared" placeholder="検索">
+              <template v-slot:append>  
+                <q-icon name="search" />
+              </template>
+            </q-input>
+          </template>
+        </q-table>
+      </q-card-section>
+      <q-card-actions align="right" class="text-primary">
+        <q-btn flat label="確定" @click="close" />
+        <q-btn flat label="キャンセル" @click="close" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted } from 'vue';
+import { IDomainDisplay } from '../../types/DomainTypes';
+import { IUser, IUserDisplay } from '../../types/UserTypes';
+import { api } from 'boot/axios';
+
+interface Props {
+  modelValue: boolean;
+  domain: IDomainDisplay;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void;
+  (e: 'close'): void;
+}>();
+
+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 },
+];
+const paginationUnshared = ref({ sortBy: 'id', descending: true, rowsPerPage: 10 });
+const filterUnshared = ref('');
+const paginationShared = ref({ sortBy: 'id', descending: true, rowsPerPage: 10 });
+const filterShared = ref('');
+
+const loading = ref(true);
+const visible = ref(props.modelValue);
+
+const allUsers = ref<IUserDisplay[]>([]);
+const sharedUsers = ref<IUserDisplay[]>([]);
+const sharedUsersIdSet = new Set<number>();
+const canSharedUsers = ref<IUserDisplay[]>([]);
+
+watch(
+  () => props.modelValue,
+  async (newValue) => {
+    visible.value = newValue;
+    if (newValue) {
+      await loadShared();
+    }
+  }
+);
+
+watch(
+  () => visible.value,
+  (newValue) => {
+    emit('update:modelValue', newValue);
+  }
+);
+
+const close = () => {
+  emit('close');
+};
+
+const shareTo = async (user: IUserDisplay) => {
+  loading.value = true;
+  await api.post(`api/domain/${user.id}?domainid=${props.domain.id}`)
+  await loadShared();
+  loading.value = false;
+}
+
+const removeShareTo = async (user: IUserDisplay) => {
+  loading.value = true;
+  await api.delete(`api/domain/${props.domain.id}/${user.id}`)
+  await loadShared();
+  loading.value = false;
+};
+
+const loadShared = async () => {
+  loading.value = true;
+  sharedUsersIdSet.clear();
+
+  const { data } = await api.get(`/api/domainshareduser/${props.domain.id}`);
+  sharedUsers.value = data.data.map((item: IUser) => {
+    const val = itemToDisplay(item);
+    sharedUsersIdSet.add(val.id);
+    return val;
+  });
+  canSharedUsers.value = allUsers.value.filter((item) => !sharedUsersIdSet.has(item.id));
+
+  loading.value = false;
+}
+
+onMounted(async () => {
+  await getUsers();
+})
+
+const getUsers = async () => {
+  if (Object.keys(allUsers.value).length > 0) {
+    return;
+  }
+  loading.value = true;
+  const result = await api.get(`api/v1/users`);
+  allUsers.value = result.data.map(itemToDisplay);
+  loading.value = false;
+}
+
+const itemToDisplay = (item: IUser) => {
+  return {
+    id: item.id,
+    firstName: item.first_name,
+    lastName: item.last_name,
+    fullNameSearch: (item.last_name + item.first_name).toLowerCase(),
+    fullName: item.last_name + ' ' + item.first_name,
+    email: item.email,
+    isSuperuser: item.is_superuser,
+    roles: item.roles,
+    isActive: item.is_active,
+  } as IUserDisplay
+}
+</script>
+
+<style lang="scss"></style>
diff --git a/frontend/src/components/ShareDomain/ShareDomainDialog.vue b/frontend/src/components/ShareDomain/ShareDomainDialog.vue
new file mode 100644
index 0000000..8d2738c
--- /dev/null
+++ b/frontend/src/components/ShareDomain/ShareDomainDialog.vue
@@ -0,0 +1,202 @@
+<template>
+  <q-dialog :auto-close="false" :model-value="visible" persistent bordered>
+    <q-card class="dialog-content" >
+      <q-toolbar class="bg-grey-4">
+        <q-toolbar-title>「{{domain.name}}」のドメインを共有する</q-toolbar-title>
+        <q-space></q-space>
+        <slot name="toolbar"></slot>
+        <q-btn flat round dense icon="close" @click="close" />
+      </q-toolbar>
+
+      <q-card-section class="q-ma-md" >
+        
+        {{ props.domain.url }}
+        <!-- <q-input value="props.domain.url" label="共有リンク" readonly outlined dense>
+        </q-input> -->
+
+        <q-select
+          :disable="loading"
+          filled
+          dense
+          v-model="canSharedUserFilter"
+          use-input
+          input-debounce="0"
+          :options="canSharedUserFilteredOptions"
+          clearable
+          @filter="filterFn"
+          :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)" />
+          </template>
+
+          <template v-slot:option="scope">
+            <q-item v-bind="scope.itemProps">
+              <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>
+          </template>
+        </q-select>
+        <!-- <sharing-user-list :users="canSharedUsers" :loading="loading" title="Treats" >
+          <template v-slot:actions="{ row }">
+            <q-btn flat color="primary" padding="xs" size="1em" icon="add" @click="shareTo(row)" />
+          </template>
+        </sharing-user-list> -->
+        <!-- <q-btn label="共有する" color="primary" @click="shareTo" /> -->
+        <sharing-user-list class="q-mt-md" style="height: 330px" :users="sharedUsers" :loading="loading" title="現在の共有ユーザー">
+          <template v-slot:actions="{ row }">
+            <q-btn flat color="primary" padding="xs" size="1em" :loading="row.id == removingUser?.id" icon="person_off" @click="removeShareTo(row)" />
+          </template>
+        </sharing-user-list>
+      </q-card-section>
+
+      <q-card-actions align="right" class="text-primary">
+        <q-btn flat label="確定" @click="close" />
+        <q-btn flat label="キャンセル" @click="close" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted } from 'vue';
+import { IDomainDisplay } from '../../types/DomainTypes';
+import { IUser, IUserDisplay } from '../../types/UserTypes';
+import { api } from 'boot/axios';
+import SharingUserList from 'components/ShareDomain/SharingUserList.vue';
+
+interface Props {
+  modelValue: boolean;
+  domain: IDomainDisplay;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void;
+  (e: 'close'): void;
+}>();
+
+const addLoading = ref(false);
+const removingUser = ref<IUserDisplay>();
+const loading = ref(true);
+const visible = ref(props.modelValue);
+
+const allUsers = ref<IUserDisplay[]>([]);
+const sharedUsers = ref<IUserDisplay[]>([]);
+const sharedUsersIdSet = new Set<number>();
+
+const canSharedUsers = ref<IUserDisplay[]>([]);
+const canSharedUserFilter = ref<IUserDisplay>();
+const canSharedUserFilteredOptions = ref<IUserDisplay[]>([]);
+
+const filterFn = (val:string, update: (cb: () => void) => void) => {
+  update(() => {
+    if (val === '') {
+      canSharedUserFilteredOptions.value = canSharedUsers.value;
+      return;
+    }
+    const needle = val.toLowerCase();
+    canSharedUserFilteredOptions.value = canSharedUsers.value.filter(v =>
+      v.email.toLowerCase().indexOf(needle) > -1 || v.fullNameSearch.toLowerCase().indexOf(needle) > -1);
+  })
+}
+
+watch(
+  () => props.modelValue,
+  async (newValue) => {
+    visible.value = newValue;
+    sharedUsers.value = [];
+    if (newValue) {
+      await loadShared();
+    }
+  }
+);
+
+watch(
+  () => visible.value,
+  (newValue) => {
+    emit('update:modelValue', newValue);
+  }
+);
+
+const close = () => {
+  emit('close');
+};
+
+const shareTo = async (user: IUserDisplay) => {
+  addLoading.value = true;
+  loading.value = true;
+  await api.post(`api/domain/${user.id}?domainid=${props.domain.id}`)
+  await loadShared();
+  canSharedUserFilter.value = undefined;
+  loading.value = false;
+  addLoading.value = false;
+}
+
+const removeShareTo = async (user: IUserDisplay) => {
+  removingUser.value = user;
+  loading.value = true;
+  await api.delete(`api/domain/${props.domain.id}/${user.id}`)
+  await loadShared();
+  loading.value = false;
+  removingUser.value = undefined;
+};
+
+const loadShared = async () => {
+  loading.value = true;
+  sharedUsersIdSet.clear();
+
+  const { data } = await api.get(`/api/domainshareduser/${props.domain.id}`);
+  sharedUsers.value = data.data.map((item: IUser) => {
+    const val = itemToDisplay(item);
+    sharedUsersIdSet.add(val.id);
+    return val;
+  });
+
+  canSharedUsers.value = allUsers.value.filter((item) => !sharedUsersIdSet.has(item.id));
+  canSharedUserFilteredOptions.value = canSharedUsers.value;
+
+  loading.value = false;
+}
+
+onMounted(async () => {
+  await getUsers();
+})
+
+const getUsers = async () => {
+  if (Object.keys(allUsers.value).length > 0) {
+    return;
+  }
+  loading.value = true;
+  const result = await api.get(`api/v1/users`);
+  allUsers.value = result.data.map(itemToDisplay);
+  loading.value = false;
+}
+
+const itemToDisplay = (item: IUser) => {
+  return {
+    id: item.id,
+    firstName: item.first_name,
+    lastName: item.last_name,
+    fullNameSearch: (item.last_name + item.first_name).toLowerCase(),
+    fullName: item.last_name + ' ' + item.first_name,
+    email: item.email,
+    isSuperuser: item.is_superuser,
+    roles: item.roles,
+    isActive: item.is_active,
+  } as IUserDisplay
+}
+</script>
+
+<style lang="scss">
+.dialog-content {
+  width: 60vw; 
+  max-height: 80vh;
+  .q-select {
+    min-width: 0 !important;
+  }
+}
+
+</style>
diff --git a/frontend/src/components/ShareDomain/SharingUserList.vue b/frontend/src/components/ShareDomain/SharingUserList.vue
new file mode 100644
index 0000000..ed85c32
--- /dev/null
+++ b/frontend/src/components/ShareDomain/SharingUserList.vue
@@ -0,0 +1,41 @@
+<template>
+  <q-table :rows="users" :filter="filter" :columns="columns" row-key="id" :loading="loading" :pagination="pagination">
+    <template v-slot:top-right>
+      <q-input borderless dense filled debounce="300" v-model="filter" placeholder="検索">
+          <template v-slot:append>  
+          <q-icon name="search" />
+          </template>
+      </q-input>
+    </template>
+    <template v-slot:body-cell-actions="props">
+      <q-td :props="props">
+        <slot name="actions" :row="props.row"></slot>
+      </q-td>
+    </template>
+  </q-table>
+</template>
+<script setup lang="ts">
+import { ref, PropType } from 'vue';
+import { IUserDisplay } from '../../types/UserTypes';
+
+const props = defineProps({
+  users: {
+    type: Array as PropType<IUserDisplay[]>,
+    required: true,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+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: 'actions', label: '', field: 'actions', sortable: false },
+];
+
+const filter = ref('');
+const pagination = ref({ sortBy: 'id', descending: true, rowsPerPage: 10 });
+</script>
\ No newline at end of file
diff --git a/frontend/src/components/UserDomain/DomainCard.vue b/frontend/src/components/UserDomain/DomainCard.vue
new file mode 100644
index 0000000..144d7ff
--- /dev/null
+++ b/frontend/src/components/UserDomain/DomainCard.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="q-pa-sm">
+    <q-card class='domain-card'>
+      <q-card-section>
+        <div class="row items-center no-wrap">
+          <div class="col">
+            <div class="text-h6">{{ item.name }} <q-icon v-if="isNotOwnerFunc(item.id)" name="account_circle" color="teal" class="q-mb-xs"></q-icon> </div>
+            <div class="text-subtitle2">{{ item.url }}</div>
+          </div>
+          <!-- <div v-if="isNotOwnerFunc(item.id)" class="col-auto">
+            <q-icon name="account_circle" color="teal" size="2em"></q-icon>
+          </div> -->
+        </div>
+      </q-card-section>
+      <q-card-section>
+        <div class="row items-center no-wrap">
+          <div class="col">
+            <div class="text-grey-7 text-caption text-weight-medium">
+              アカウント
+            </div>
+            <div class="smaller-font-size">{{ item.kintoneuser }}</div>
+          </div>
+          <div v-if="isNotOwnerFunc(item.id)" class="col-auto">
+            <div class="text-grey-7 text-caption text-weight-medium">
+              所有者
+            </div>
+            <div class="smaller-font-size">{{ item.owner }}</div>
+          </div>
+        </div>
+      </q-card-section>
+      <q-separator />
+      <slot name="actions" :item="item"></slot>
+    </q-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps } from 'vue';
+import { IDomain } from 'src/types/DomainTypes';
+
+const props = defineProps<{
+  item: IDomain;
+  isNotOwnerFunc: (ownerId: any) => boolean;
+}>();
+</script>
+
+<style lang="scss" scoped>
+.domain-card {
+  width: 22rem;
+  word-break: break-word;
+
+  .smaller-font-size {
+    font-size: 13px;
+  }
+}
+</style>
diff --git a/frontend/src/pages/TenantDomain.vue b/frontend/src/pages/TenantDomain.vue
index 3564ff5..8e041a0 100644
--- a/frontend/src/pages/TenantDomain.vue
+++ b/frontend/src/pages/TenantDomain.vue
@@ -19,7 +19,10 @@
 
       <template v-slot:body-cell-name="p">
         <q-td class="flex justify-between items-center" :props="p">
-          {{ p.row.name }}
+          <div>
+            {{ p.row.name }}
+            <!-- <q-icon class="q-ml-xs" title="共有中です" name="people" :color="p.row.domainActive ? 'grey-8' : 'grey-4'" /> -->
+          </div>
           <q-badge v-if="!p.row.domainActive" color="grey">未启用</q-badge>
           <q-badge v-if="p.row.id == currentDomainId" color="primary">現在</q-badge>
         </q-td>
@@ -29,6 +32,7 @@
         <q-td :props="p">
           <q-btn-group flat>
             <q-btn flat color="primary" padding="xs" size="1em" icon="edit_note" @click="editRow(p.row)" />
+            <q-btn flat color="primary" :disable="!p.row.domainActive" padding="xs" size="1em" icon="person_add_alt" @click="openShareDg(p.row)" />
             <q-btn flat color="negative" padding="xs" size="1em" icon="delete_outline" @click="removeRow(p.row)" />
           </q-btn-group>
         </q-td>
@@ -121,6 +125,8 @@
       </q-card>
     </q-dialog>
 
+    <share-domain-dialog v-model="shareDg" :domain="shareDomain" @close="closeShareDg()" />
+
   </div>
 </template>
 
@@ -129,6 +135,7 @@ import { ref, onMounted, computed } from 'vue';
 import { api } from 'boot/axios';
 import { useAuthStore } from 'stores/useAuthStore';
 import { useDomainStore } from 'stores/useDomainStore';
+import ShareDomainDialog from 'components/ShareDomain/ShareDomainDialog.vue';
 import { IDomain, IDomainDisplay, IDomainSubmit } from '../types/DomainTypes';
 
 const authStore = useAuthStore();
@@ -150,7 +157,7 @@ const columns = [
   { name: 'url', label: 'URL', field: 'url', align: 'left', sortable: true, classes: inactiveRowClass },
   // { name: 'owner', label: '所有者', field: 'owner', align: 'left', classes: inactiveRowClass },
   { name: 'user', label: 'ログイン名', field: 'user', align: 'left', classes: inactiveRowClass },
-  { name: 'actions', label: '操作', field: 'actions' }
+  { name: 'actions', label: '操作', field: 'actions', classes: inactiveRowClass }
 ];
 
 const pagination = ref({ sortBy: 'id', descending: true, rowsPerPage: 20 });
@@ -174,6 +181,8 @@ const domainActive = ref(true);
 const isCreate = ref(true);
 let editId = ref(0);
 let ownerid = ref('');
+const shareDg = ref(false);
+const shareDomain = ref<IDomainDisplay|object>({});
 
 const getDomain = async () => {
   loading.value = true;
@@ -209,7 +218,10 @@ const removeRow = (row: IDomainDisplay) => {
 }
 
 const deleteDomain = () => {
-  api.delete(`api/domain/${editId.value}`).then(() => {
+  api.delete(`api/domain/${editId.value}`).then(({ data }) => {
+    if (!data.data) {
+      // TODO dialog
+    }
     getDomain();
     // authStore.setCurrentDomain();
   })
@@ -266,6 +278,15 @@ const onSubmit = () => {
     })
 }
 
+const openShareDg = (row: IDomainDisplay) => {
+  shareDomain.value = row;
+  shareDg.value = true;
+};
+
+const closeShareDg = () => {
+  shareDg.value = false;
+}
+
 const onReset = () => {
   name.value = '';
   url.value = '';
@@ -283,5 +304,6 @@ const onReset = () => {
 <style lang="scss">
 .q-table td.inactive-row {
   color: #aaa;
+  background-color: #fafafa;
 }
 </style>
\ No newline at end of file
diff --git a/frontend/src/pages/UserDomain.vue b/frontend/src/pages/UserDomain.vue
index e4ba99c..4d0edb5 100644
--- a/frontend/src/pages/UserDomain.vue
+++ b/frontend/src/pages/UserDomain.vue
@@ -28,32 +28,8 @@
       </template>
 
       <template v-slot:item="props">
-        <div class="q-pa-sm">
-          <q-card :class="['domain-card', isNotOwner(props.row.id) ? 'bg-grey-2': '']">
-            <q-card-section>
-              <div class="row items-center no-wrap">
-                <div class="col">
-                  <div class="text-h6">{{ props.row.name }}</div>
-                  <div class="text-subtitle2">{{ props.row.url }}</div>
-                </div>
-                <div v-if="isNotOwner(props.row.id)" class="col-auto">
-                  <q-icon name="account_circle" color="teal" size="2em" ></q-icon>
-                </div>
-              </div>
-            </q-card-section>
-            <q-card-section>
-              <div class="row items-center no-wrap">
-                <div class="col">
-                  <div class="text-grey-7 text-caption text-weight-medium">アカウント</div>
-                  <div class="smaller-font-size">{{ props.row.kintoneuser }}</div>
-                </div>
-                <div v-if="isNotOwner(props.row.id)" class="col-auto">
-                  <div class="text-grey-7 text-caption text-weight-medium">所有者</div>
-                  <div class="smaller-font-size">{{ props.row.owner }}</div>
-                </div>
-              </div>
-            </q-card-section>
-            <q-separator />
+        <domain-card :item="props.row" :isNotOwnerFunc="isNotOwner">
+          <template v-slot:actions>
             <q-card-actions align="right">
               <q-chip v-if="isActive(props.row.id)" outline color="teal" text-color="white" icon="done">
                 既定
@@ -61,8 +37,8 @@
               <q-btn flat v-else :loading="activeDomainLoadingId === props.row.id" :disable="deleteDomainLoadingId === props.row.id" @click="activeDomain(props.row)">既定にする</q-btn>
               <q-btn flat :disable="isNotOwner(props.row.id) || activeDomainLoadingId === props.row.id" :text-color="isNotOwner(props.row.id)?'grey':''" :loading="deleteDomainLoadingId === props.row.id" @click="clickDeleteConfirm(props.row)">削除</q-btn>
             </q-card-actions>
-          </q-card>
-        </div>
+          </template>
+        </domain-card>
       </template>
     </q-table>
 
@@ -94,6 +70,7 @@ import { api } from 'boot/axios';
 import { useAuthStore } from 'stores/useAuthStore';
 
 import ShowDialog from 'components/ShowDialog.vue';
+import DomainCard from 'components/UserDomain/DomainCard.vue';
 import DomainSelect from 'components/DomainSelect.vue';
 
 const authStore = useAuthStore();
@@ -129,9 +106,9 @@ const clickAddDomain = () => {
 
 const addUserDomainFinished = async (val: string) => {
   showAddDomainDg.value = true;
-  addUserDomainLoading.value = true;
   const selected = addDomainRef.value.selected;
   if (val == 'OK' && selected.length > 0) {
+    addUserDomainLoading.value = true;
     const { data } = await api.post(`api/domain/${authStore.userId}?domainid=${selected[0].id}`)
     if (rows.value.length === 0 && data.data) {
       const domain = data.data;
@@ -142,9 +119,9 @@ const addUserDomainFinished = async (val: string) => {
       });
     }
     await getDomain();
-    addUserDomainLoading.value = false;
-    showAddDomainDg.value = false;
   }
+  addUserDomainLoading.value = false;
+  showAddDomainDg.value = false;
 };
 
 const showDeleteConfirm = ref(false);
diff --git a/frontend/src/types/UserTypes.ts b/frontend/src/types/UserTypes.ts
index 54250b2..cf7b275 100644
--- a/frontend/src/types/UserTypes.ts
+++ b/frontend/src/types/UserTypes.ts
@@ -1,8 +1,21 @@
 export interface IUser {
+  id: number;
   first_name: string;
   last_name: string;
   email: string;
   is_active: boolean,
   is_superuser: boolean,
-  roles: string[]
+  roles: object[]
 }
+
+export interface IUserDisplay {
+  id: number;
+  firstName: string;
+  lastName: string;
+  fullName: string;
+  fullNameSearch: string;
+  email: string;
+  isActive: boolean,
+  isSuperuser: boolean,
+  roles: object[]
+}
\ No newline at end of file

From dcfe0d44fdf2dac7c6b9dca93fdfe3cdcc107333 Mon Sep 17 00:00:00 2001
From: xue jiahao <hsuehchiahao@gmail.com>
Date: Tue, 3 Dec 2024 08:31:00 +0800
Subject: [PATCH 3/4] add delete hint

---
 .../components/Domain/ShareDomainDialog.vue   |  6 --
 .../ShareDomain/ShareDomainDialog.vue         | 20 ++----
 .../ShareDomain/SharingUserList.vue           | 12 ++--
 .../src/components/UserDomain/DomainCard.vue  | 72 ++++++++++---------
 frontend/src/pages/TenantDomain.vue           | 29 ++++++--
 frontend/src/pages/UserDomain.vue             | 24 ++++---
 6 files changed, 90 insertions(+), 73 deletions(-)

diff --git a/frontend/src/components/Domain/ShareDomainDialog.vue b/frontend/src/components/Domain/ShareDomainDialog.vue
index 0b3aa49..30dfe15 100644
--- a/frontend/src/components/Domain/ShareDomainDialog.vue
+++ b/frontend/src/components/Domain/ShareDomainDialog.vue
@@ -7,12 +7,6 @@
         <slot name="toolbar"></slot>
         <q-btn flat round dense icon="close" @click="close" />
       </q-toolbar>
-      
-      <q-card-section>
-        {{ props.domain.url }}
-        <!-- <q-input value="props.domain.url" label="共有リンク" readonly outlined dense>
-        </q-input> -->
-      </q-card-section>
       <q-card-section>
         <!-- <q-select
           filled
diff --git a/frontend/src/components/ShareDomain/ShareDomainDialog.vue b/frontend/src/components/ShareDomain/ShareDomainDialog.vue
index 8d2738c..ebc8d5b 100644
--- a/frontend/src/components/ShareDomain/ShareDomainDialog.vue
+++ b/frontend/src/components/ShareDomain/ShareDomainDialog.vue
@@ -3,18 +3,12 @@
     <q-card class="dialog-content" >
       <q-toolbar class="bg-grey-4">
         <q-toolbar-title>「{{domain.name}}」のドメインを共有する</q-toolbar-title>
-        <q-space></q-space>
-        <slot name="toolbar"></slot>
         <q-btn flat round dense icon="close" @click="close" />
       </q-toolbar>
 
-      <q-card-section class="q-ma-md" >
-        
-        {{ props.domain.url }}
-        <!-- <q-input value="props.domain.url" label="共有リンク" readonly outlined dense>
-        </q-input> -->
-
+      <q-card-section class="q-mx-md " >
         <q-select
+          class="q-mt-md"
           :disable="loading"
           filled
           dense
@@ -23,6 +17,7 @@
           input-debounce="0"
           :options="canSharedUserFilteredOptions"
           clearable
+          :placeholder="canSharedUserFilter ? '' : '共有するユーザーを選択'"
           @filter="filterFn"
           :display-value="canSharedUserFilter?`${canSharedUserFilter.fullName} （${canSharedUserFilter.email}）`:''">
 
@@ -38,12 +33,6 @@
             </q-item>
           </template>
         </q-select>
-        <!-- <sharing-user-list :users="canSharedUsers" :loading="loading" title="Treats" >
-          <template v-slot:actions="{ row }">
-            <q-btn flat color="primary" padding="xs" size="1em" icon="add" @click="shareTo(row)" />
-          </template>
-        </sharing-user-list> -->
-        <!-- <q-btn label="共有する" color="primary" @click="shareTo" /> -->
         <sharing-user-list class="q-mt-md" style="height: 330px" :users="sharedUsers" :loading="loading" title="現在の共有ユーザー">
           <template v-slot:actions="{ row }">
             <q-btn flat color="primary" padding="xs" size="1em" :loading="row.id == removingUser?.id" icon="person_off" @click="removeShareTo(row)" />
@@ -108,6 +97,7 @@ watch(
   async (newValue) => {
     visible.value = newValue;
     sharedUsers.value = [];
+    canSharedUserFilter.value = undefined
     if (newValue) {
       await loadShared();
     }
@@ -192,7 +182,7 @@ const itemToDisplay = (item: IUser) => {
 
 <style lang="scss">
 .dialog-content {
-  width: 60vw; 
+  width: 60vw;
   max-height: 80vh;
   .q-select {
     min-width: 0 !important;
diff --git a/frontend/src/components/ShareDomain/SharingUserList.vue b/frontend/src/components/ShareDomain/SharingUserList.vue
index ed85c32..8c244a5 100644
--- a/frontend/src/components/ShareDomain/SharingUserList.vue
+++ b/frontend/src/components/ShareDomain/SharingUserList.vue
@@ -1,12 +1,15 @@
 <template>
-  <q-table :rows="users" :filter="filter" :columns="columns" row-key="id" :loading="loading" :pagination="pagination">
-    <template v-slot:top-right>
+  <q-table :rows="users" :filter="filter" dense :columns="columns" row-key="id" :loading="loading" :pagination="pagination">
+    <template v-slot:top>
+      <div class="h6 text-weight-bold">{{props.title}}</div>
+      <q-space />
       <q-input borderless dense filled debounce="300" v-model="filter" placeholder="検索">
-          <template v-slot:append>  
+        <template v-slot:append>
           <q-icon name="search" />
-          </template>
+        </template>
       </q-input>
     </template>
+
     <template v-slot:body-cell-actions="props">
       <q-td :props="props">
         <slot name="actions" :row="props.row"></slot>
@@ -27,6 +30,7 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  title: String
 });
 
 const columns = [
diff --git a/frontend/src/components/UserDomain/DomainCard.vue b/frontend/src/components/UserDomain/DomainCard.vue
index 144d7ff..d43a9f1 100644
--- a/frontend/src/components/UserDomain/DomainCard.vue
+++ b/frontend/src/components/UserDomain/DomainCard.vue
@@ -1,50 +1,58 @@
 <template>
-  <div class="q-pa-sm">
-    <q-card class='domain-card'>
-      <q-card-section>
-        <div class="row items-center no-wrap">
-          <div class="col">
-            <div class="text-h6">{{ item.name }} <q-icon v-if="isNotOwnerFunc(item.id)" name="account_circle" color="teal" class="q-mb-xs"></q-icon> </div>
-            <div class="text-subtitle2">{{ item.url }}</div>
-          </div>
-          <!-- <div v-if="isNotOwnerFunc(item.id)" class="col-auto">
-            <q-icon name="account_circle" color="teal" size="2em"></q-icon>
-          </div> -->
+  <q-card :class="['domain-card', small ? 'small' : '']">
+    <q-card-section :class="[small ? 'q-py-sm' : '']">
+      <div class="row items-center no-wrap">
+        <div class="col">
+          <div :class="[small ? 'text-subtitle2' : 'text-h6']">{{ item.name }} <q-icon v-if="isNotOwnerFunc(item.id)" name="account_circle" color="teal" class="q-mb-xs"></q-icon> </div>
+          <div :class="[small ? 'text-caption' : 'text-subtitle2']">{{ item.url }}</div>
         </div>
-      </q-card-section>
-      <q-card-section>
-        <div class="row items-center no-wrap">
-          <div class="col">
-            <div class="text-grey-7 text-caption text-weight-medium">
-              アカウント
-            </div>
-            <div class="smaller-font-size">{{ item.kintoneuser }}</div>
-          </div>
-          <div v-if="isNotOwnerFunc(item.id)" class="col-auto">
-            <div class="text-grey-7 text-caption text-weight-medium">
-              所有者
-            </div>
-            <div class="smaller-font-size">{{ item.owner }}</div>
+        <!-- <div v-if="isNotOwnerFunc(item.id)" class="col-auto">
+          <q-icon name="account_circle" color="teal" size="2em"></q-icon>
+        </div> -->
+      </div>
+    </q-card-section>
+    <q-card-section>
+      <div class="row items-center no-wrap">
+        <div class="col">
+          <div class="text-grey-7 text-caption text-weight-medium">
+            アカウント
           </div>
+          <div class="smaller-font-size">{{ item.kintoneuser }}</div>
         </div>
-      </q-card-section>
-      <q-separator />
-      <slot name="actions" :item="item"></slot>
-    </q-card>
-  </div>
+        <div v-if="isNotOwnerFunc(item.id)" class="col-auto">
+          <div class="text-grey-7 text-caption text-weight-medium">
+            所有者
+          </div>
+          <div class="smaller-font-size">{{ item.owner }}</div>
+        </div>
+      </div>
+    </q-card-section>
+    <q-separator v-if="$slots.actions" />
+    <slot name="actions" :item="item"></slot>
+  </q-card>
 </template>
 
 <script setup lang="ts">
-import { defineProps } from 'vue';
+import { defineProps, computed } from 'vue';
 import { IDomain } from 'src/types/DomainTypes';
+import { useAuthStore } from 'stores/useAuthStore';
 
 const props = defineProps<{
   item: IDomain;
-  isNotOwnerFunc: (ownerId: any) => boolean;
+  small: boolean;
 }>();
+
+const authStore = useAuthStore();
+const isNotOwnerFunc = computed(() => (ownerId: string) => {
+  return ownerId == authStore.userId;
+});
+
 </script>
 
 <style lang="scss" scoped>
+.domain-card.small {
+  width: 18rem;
+}
 .domain-card {
   width: 22rem;
   word-break: break-word;
diff --git a/frontend/src/pages/TenantDomain.vue b/frontend/src/pages/TenantDomain.vue
index 8e041a0..a1feab5 100644
--- a/frontend/src/pages/TenantDomain.vue
+++ b/frontend/src/pages/TenantDomain.vue
@@ -113,14 +113,23 @@
 
     <q-dialog v-model="confirm" persistent>
       <q-card>
-        <q-card-section class="row items-center">
+        <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">
+          <q-icon name="error" color="negative" size="2em" />
+          <span class="q-ml-sm">共有ユーザーが存在し、キャンセルする必要がある</span>
+        </q-card-section>
 
         <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 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()" />
         </q-card-actions>
       </q-card>
     </q-dialog>
@@ -163,6 +172,8 @@ 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 filter = ref('');
 const rows = ref<IDomainDisplay[]>([]);
 const show = ref(false);
@@ -212,9 +223,13 @@ const addRow = () => {
   show.value = true;
 }
 
-const removeRow = (row: IDomainDisplay) => {
+const removeRow = async (row: IDomainDisplay) => {
   confirm.value = true;
+  deleteLoadingState.value = -1;
   editId.value = row.id;
+
+  const { data } = await api.get(`/api/domainshareduser/${row.id}`);
+  deleteLoadingState.value = data.data.length;
 }
 
 const deleteDomain = () => {
@@ -226,6 +241,7 @@ const deleteDomain = () => {
     // authStore.setCurrentDomain();
   })
   editId.value = 0; // set in removeRow()
+  deleteLoadingState.value = -1;
 };
 
 const editRow = (row) => {
@@ -278,8 +294,11 @@ const onSubmit = () => {
     })
 }
 
-const openShareDg = (row: IDomainDisplay) => {
-  shareDomain.value = row;
+const openShareDg = (row: IDomainDisplay|number) => {
+  if (typeof row === 'number') {
+    row = rows.value.find(item => item.id === row) as IDomainDisplay;
+  }
+  shareDomain.value = row ;
   shareDg.value = true;
 };
 
diff --git a/frontend/src/pages/UserDomain.vue b/frontend/src/pages/UserDomain.vue
index 4d0edb5..a56fbea 100644
--- a/frontend/src/pages/UserDomain.vue
+++ b/frontend/src/pages/UserDomain.vue
@@ -28,17 +28,19 @@
       </template>
 
       <template v-slot:item="props">
-        <domain-card :item="props.row" :isNotOwnerFunc="isNotOwner">
-          <template v-slot:actions>
-            <q-card-actions align="right">
-              <q-chip v-if="isActive(props.row.id)" outline color="teal" text-color="white" icon="done">
-                既定
-              </q-chip>
-              <q-btn flat v-else :loading="activeDomainLoadingId === props.row.id" :disable="deleteDomainLoadingId === props.row.id" @click="activeDomain(props.row)">既定にする</q-btn>
-              <q-btn flat :disable="isNotOwner(props.row.id) || activeDomainLoadingId === props.row.id" :text-color="isNotOwner(props.row.id)?'grey':''" :loading="deleteDomainLoadingId === props.row.id" @click="clickDeleteConfirm(props.row)">削除</q-btn>
-            </q-card-actions>
-          </template>
-        </domain-card>
+        <div class="q-pa-sm">
+          <domain-card :item="props.row">
+            <template v-slot:actions>
+              <q-card-actions align="right">
+                <q-chip v-if="isActive(props.row.id)" outline color="teal" text-color="white" icon="done">
+                  既定
+                </q-chip>
+                <q-btn flat v-else :loading="activeDomainLoadingId === props.row.id" :disable="deleteDomainLoadingId === props.row.id" @click="activeDomain(props.row)">既定にする</q-btn>
+                <q-btn flat :disable="isNotOwner(props.row.id) || activeDomainLoadingId === props.row.id" :text-color="isNotOwner(props.row.id)?'grey':''" :loading="deleteDomainLoadingId === props.row.id" @click="clickDeleteConfirm(props.row)">削除</q-btn>
+              </q-card-actions>
+            </template>
+          </domain-card>
+        </div>
       </template>
     </q-table>
 

From 2a76f5a4c7a9527faf18bc2350a96954aa6429f1 Mon Sep 17 00:00:00 2001
From: xue jiahao <hsuehchiahao@gmail.com>
Date: Tue, 3 Dec 2024 12:23:20 +0800
Subject: [PATCH 4/4] add owner column

---
 .../components/Domain/ShareDomainDialog.vue   | 180 ------------------
 frontend/src/components/DomainSelect.vue      |  18 +-
 .../ShareDomain/ShareDomainDialog.vue         |   5 +-
 frontend/src/components/UserList.vue          |   4 +-
 frontend/src/pages/TenantDomain.vue           |  30 +--
 frontend/src/pages/UserManagement.vue         |   8 +-
 frontend/src/types/DomainTypes.ts             |   7 +-
 frontend/src/types/UserTypes.ts               |   3 +
 8 files changed, 49 insertions(+), 206 deletions(-)
 delete mode 100644 frontend/src/components/Domain/ShareDomainDialog.vue

diff --git a/frontend/src/components/Domain/ShareDomainDialog.vue b/frontend/src/components/Domain/ShareDomainDialog.vue
deleted file mode 100644
index 30dfe15..0000000
--- a/frontend/src/components/Domain/ShareDomainDialog.vue
+++ /dev/null
@@ -1,180 +0,0 @@
-<template>
-  <q-dialog :auto-close="false" :model-value="visible" persistent bordered>
-    <q-card style="min-width: 40vw; max-width: 80vw; max-height: 95vh;" >
-      <q-toolbar class="bg-grey-4">
-        <q-toolbar-title>「{{domain.name}}」のドメインを共有する</q-toolbar-title>
-        <q-space></q-space>
-        <slot name="toolbar"></slot>
-        <q-btn flat round dense icon="close" @click="close" />
-      </q-toolbar>
-      <q-card-section>
-        <!-- <q-select
-          filled
-          v-model="filterInput"
-          use-input
-          use-chips
-          multiple
-          input-debounce="0"
-          :options="filterUsers"
-          @filter="filterFn"
-        /> -->
-        
-        <q-table :rows="canSharedUsers" :filter="filterUnshared" :columns="columns" row-key="id" :loading="loading" :pagination="paginationUnshared">
-          <template v-slot:body-cell-actions="p">
-            <q-td :props="p">
-              <q-btn-group flat>
-                <q-btn flat color="primary" padding="xs" size="1em" icon="add" @click="shareTo(p.row)" />
-              </q-btn-group>
-            </q-td>
-          </template>
-          <template v-slot:top-right>
-            <q-input borderless dense filled debounce="300" v-model="filterUnshared" placeholder="検索">
-              <template v-slot:append>  
-                <q-icon name="search" />
-              </template>
-            </q-input>
-          </template>
-        </q-table>
-
-        <!-- <q-btn flat label="共有する" @click="shareTo" /> -->
-        <q-table :rows="sharedUsers" :filter="filterShared" :columns="columns" row-key="id" :loading="loading" :pagination="paginationShared" >
-          <template v-slot:body-cell-actions="p">
-            <q-td :props="p">
-              <q-btn-group flat>
-                <q-btn flat color="primary" padding="xs" size="1em" icon="person_off" @click="removeShareTo(p.row)" />
-              </q-btn-group>
-            </q-td>
-          </template>
-          <template v-slot:top-right>
-            <q-input borderless dense filled debounce="300" v-model="filterShared" placeholder="検索">
-              <template v-slot:append>  
-                <q-icon name="search" />
-              </template>
-            </q-input>
-          </template>
-        </q-table>
-      </q-card-section>
-      <q-card-actions align="right" class="text-primary">
-        <q-btn flat label="確定" @click="close" />
-        <q-btn flat label="キャンセル" @click="close" />
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
-</template>
-
-<script setup lang="ts">
-import { ref, watch, onMounted } from 'vue';
-import { IDomainDisplay } from '../../types/DomainTypes';
-import { IUser, IUserDisplay } from '../../types/UserTypes';
-import { api } from 'boot/axios';
-
-interface Props {
-  modelValue: boolean;
-  domain: IDomainDisplay;
-}
-
-const props = defineProps<Props>();
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: boolean): void;
-  (e: 'close'): void;
-}>();
-
-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 },
-];
-const paginationUnshared = ref({ sortBy: 'id', descending: true, rowsPerPage: 10 });
-const filterUnshared = ref('');
-const paginationShared = ref({ sortBy: 'id', descending: true, rowsPerPage: 10 });
-const filterShared = ref('');
-
-const loading = ref(true);
-const visible = ref(props.modelValue);
-
-const allUsers = ref<IUserDisplay[]>([]);
-const sharedUsers = ref<IUserDisplay[]>([]);
-const sharedUsersIdSet = new Set<number>();
-const canSharedUsers = ref<IUserDisplay[]>([]);
-
-watch(
-  () => props.modelValue,
-  async (newValue) => {
-    visible.value = newValue;
-    if (newValue) {
-      await loadShared();
-    }
-  }
-);
-
-watch(
-  () => visible.value,
-  (newValue) => {
-    emit('update:modelValue', newValue);
-  }
-);
-
-const close = () => {
-  emit('close');
-};
-
-const shareTo = async (user: IUserDisplay) => {
-  loading.value = true;
-  await api.post(`api/domain/${user.id}?domainid=${props.domain.id}`)
-  await loadShared();
-  loading.value = false;
-}
-
-const removeShareTo = async (user: IUserDisplay) => {
-  loading.value = true;
-  await api.delete(`api/domain/${props.domain.id}/${user.id}`)
-  await loadShared();
-  loading.value = false;
-};
-
-const loadShared = async () => {
-  loading.value = true;
-  sharedUsersIdSet.clear();
-
-  const { data } = await api.get(`/api/domainshareduser/${props.domain.id}`);
-  sharedUsers.value = data.data.map((item: IUser) => {
-    const val = itemToDisplay(item);
-    sharedUsersIdSet.add(val.id);
-    return val;
-  });
-  canSharedUsers.value = allUsers.value.filter((item) => !sharedUsersIdSet.has(item.id));
-
-  loading.value = false;
-}
-
-onMounted(async () => {
-  await getUsers();
-})
-
-const getUsers = async () => {
-  if (Object.keys(allUsers.value).length > 0) {
-    return;
-  }
-  loading.value = true;
-  const result = await api.get(`api/v1/users`);
-  allUsers.value = result.data.map(itemToDisplay);
-  loading.value = false;
-}
-
-const itemToDisplay = (item: IUser) => {
-  return {
-    id: item.id,
-    firstName: item.first_name,
-    lastName: item.last_name,
-    fullNameSearch: (item.last_name + item.first_name).toLowerCase(),
-    fullName: item.last_name + ' ' + item.first_name,
-    email: item.email,
-    isSuperuser: item.is_superuser,
-    roles: item.roles,
-    isActive: item.is_active,
-  } as IUserDisplay
-}
-</script>
-
-<style lang="scss"></style>
diff --git a/frontend/src/components/DomainSelect.vue b/frontend/src/components/DomainSelect.vue
index e598f57..35cae98 100644
--- a/frontend/src/components/DomainSelect.vue
+++ b/frontend/src/components/DomainSelect.vue
@@ -33,10 +33,10 @@ export default {
 
     const columns = [
       { name: 'id', label: 'ID', field: 'id', align: 'left', sortable: true, classes: inactiveRowClass },
-      { name: 'tenantid', required: true,label: 'テナント',align: 'left',field: 'tenantid',sortable: true, classes: inactiveRowClass},
-      { name: 'name', align: 'center', label: 'ドメイン', field: 'name', sortable: true, classes: inactiveRowClass },
-      { name: 'url', label: 'URL', field: 'url', sortable: true, classes: inactiveRowClass },
-      { name: 'user', label: 'アカウント', field: 'user', classes: inactiveRowClass }
+      { name: 'name', align: 'left', label: 'ドメイン', field: 'name', sortable: true, classes: inactiveRowClass },
+      { name: 'url', label: 'URL', field: 'url',align: 'left', sortable: true, classes: inactiveRowClass },
+      { name: 'user', label: 'アカウント', field: 'user',align: 'left', classes: inactiveRowClass },
+      { name: 'owner', label: '所有者', field: row => row.owner.fullName, align: 'left', classes: inactiveRowClass },
     ]
     const rows = reactive([]);
 
@@ -51,6 +51,16 @@ export default {
             name: data.name,
             url: data.url,
             user: data.kintoneuser,
+            owner: {
+              id: data.owner.id,
+              firstName: data.owner.first_name,
+              lastName: data.owner.last_name,
+              fullNameSearch: (data.owner.last_name + data.owner.first_name).toLowerCase(),
+              fullName: data.owner.last_name + ' ' + data.owner.first_name,
+              email: data.owner.email,
+              isActive: data.owner.is_active,
+              isSuperuser: data.owner.is_superuser,
+            }
           }
           if (props.filterInitRowsFunc && !props.filterInitRowsFunc(item)) {
             return;
diff --git a/frontend/src/components/ShareDomain/ShareDomainDialog.vue b/frontend/src/components/ShareDomain/ShareDomainDialog.vue
index ebc8d5b..09e2eff 100644
--- a/frontend/src/components/ShareDomain/ShareDomainDialog.vue
+++ b/frontend/src/components/ShareDomain/ShareDomainDialog.vue
@@ -50,14 +50,14 @@
 
 <script setup lang="ts">
 import { ref, watch, onMounted } from 'vue';
-import { IDomainDisplay } from '../../types/DomainTypes';
+import { IDomainOwnerDisplay } from '../../types/DomainTypes';
 import { IUser, IUserDisplay } from '../../types/UserTypes';
 import { api } from 'boot/axios';
 import SharingUserList from 'components/ShareDomain/SharingUserList.vue';
 
 interface Props {
   modelValue: boolean;
-  domain: IDomainDisplay;
+  domain: IDomainOwnerDisplay;
 }
 
 const props = defineProps<Props>();
@@ -174,7 +174,6 @@ const itemToDisplay = (item: IUser) => {
     fullName: item.last_name + ' ' + item.first_name,
     email: item.email,
     isSuperuser: item.is_superuser,
-    roles: item.roles,
     isActive: item.is_active,
   } as IUserDisplay
 }
diff --git a/frontend/src/components/UserList.vue b/frontend/src/components/UserList.vue
index 64b3b35..2cca424 100644
--- a/frontend/src/components/UserList.vue
+++ b/frontend/src/components/UserList.vue
@@ -9,8 +9,8 @@ import { api } from 'boot/axios';
 const props = defineProps<{filter:string}>()
 const columns = [
   { name: 'id', label: 'ID', field: 'id', align: 'left', sortable: true },
-  { name: 'firstName', label: '氏名', field: 'firstName', align: 'left', sortable: true },
-  { name: 'lastName', label: '苗字', field: 'lastName', align: 'left', sortable: true },
+  { name: 'lastName', label: '氏名', field: 'lastName', align: 'left', sortable: true },
+  { name: 'firstName', label: '苗字', field: 'firstName', align: 'left', sortable: true },
   { name: 'email', label: '電子メール', field: 'email', align: 'left', sortable: true },
 ];
 
diff --git a/frontend/src/pages/TenantDomain.vue b/frontend/src/pages/TenantDomain.vue
index a1feab5..a0ac958 100644
--- a/frontend/src/pages/TenantDomain.vue
+++ b/frontend/src/pages/TenantDomain.vue
@@ -54,7 +54,7 @@
                 :rules="[val => val && val.length > 0 || 'kintoneの環境名を入力してください。']" />
 
               <q-input filled type="url" v-model.trim="url" label="Kintone url" hint="KintoneのURLを入力してください" lazy-rules
-                :rules="[val => val && val.length > 0, isDomain || 'KintoneのURLを入力してください']" />
+                :rules="[val => val && val.length > 0 || 'KintoneのURLを入力してください']" />
 
               <q-input filled v-model="kintoneuser" label="ログイン名 *" hint="Kintoneのログイン名を入力してください" lazy-rules
                 :rules="[val => val && val.length > 0 || 'Kintoneのログイン名を入力してください']" autocomplete="new-password" />
@@ -145,11 +145,11 @@ import { api } from 'boot/axios';
 import { useAuthStore } from 'stores/useAuthStore';
 import { useDomainStore } from 'stores/useDomainStore';
 import ShareDomainDialog from 'components/ShareDomain/ShareDomainDialog.vue';
-import { IDomain, IDomainDisplay, IDomainSubmit } from '../types/DomainTypes';
+import { IDomain, IDomainOwnerDisplay, IDomainSubmit } from '../types/DomainTypes';
 
 const authStore = useAuthStore();
 const domainStore = useDomainStore();
-const inactiveRowClass = (row: IDomainDisplay) => row.domainActive ? '' : 'inactive-row';
+const inactiveRowClass = (row: IDomainOwnerDisplay) => row.domainActive ? '' : 'inactive-row';
 
 const columns = [
   { name: 'id', label: 'ID', field: 'id', align: 'left', sortable: true, classes: inactiveRowClass },
@@ -164,8 +164,8 @@ const columns = [
   // },
   { name: 'name', label: '環境名', field: 'name', align: 'left', sortable: true, classes: inactiveRowClass },
   { name: 'url', label: 'URL', field: 'url', align: 'left', sortable: true, classes: inactiveRowClass },
-  // { name: 'owner', label: '所有者', field: 'owner', align: 'left', classes: inactiveRowClass },
   { name: 'user', label: 'ログイン名', field: 'user', align: 'left', classes: inactiveRowClass },
+  { name: 'owner', label: '所有者', field: row => row.owner.fullName, align: 'left', classes: inactiveRowClass },
   { name: 'actions', label: '操作', field: 'actions', classes: inactiveRowClass }
 ];
 
@@ -175,7 +175,7 @@ const addEditLoading = ref(false);
 const deleteLoadingState = ref<number>(-1); // -1: loading, 0: allow, > 0: user count
 
 const filter = ref('');
-const rows = ref<IDomainDisplay[]>([]);
+const rows = ref<IDomainOwnerDisplay[]>([]);
 const show = ref(false);
 const confirm = ref(false);
 const resetPsw = ref(false);
@@ -191,9 +191,8 @@ const kintonepwdBK = ref('');
 const domainActive = ref(true);
 const isCreate = ref(true);
 let editId = ref(0);
-let ownerid = ref('');
 const shareDg = ref(false);
-const shareDomain = ref<IDomainDisplay|object>({});
+const shareDomain = ref<IDomainOwnerDisplay>();
 
 const getDomain = async () => {
   loading.value = true;
@@ -207,6 +206,16 @@ const getDomain = async () => {
       url: item.url,
       user: item.kintoneuser,
       password: item.kintonepwd,
+      owner: {
+        id: item.owner.id,
+        firstName: item.owner.first_name,
+        lastName: item.owner.last_name,
+        fullNameSearch: (item.owner.last_name + item.owner.first_name).toLowerCase(),
+        fullName: item.owner.last_name + ' ' + item.owner.first_name,
+        email: item.owner.email,
+        isActive: item.owner.is_active,
+        isSuperuser: item.owner.is_superuser,
+      }
     }
   });
   loading.value = false;
@@ -223,7 +232,7 @@ const addRow = () => {
   show.value = true;
 }
 
-const removeRow = async (row: IDomainDisplay) => {
+const removeRow = async (row: IDomainOwnerDisplay) => {
   confirm.value = true;
   deleteLoadingState.value = -1;
   editId.value = row.id;
@@ -294,9 +303,9 @@ const onSubmit = () => {
     })
 }
 
-const openShareDg = (row: IDomainDisplay|number) => {
+const openShareDg = (row: IDomainOwnerDisplay|number) => {
   if (typeof row === 'number') {
-    row = rows.value.find(item => item.id === row) as IDomainDisplay;
+    row = rows.value.find(item => item.id === row) as IDomainOwnerDisplay;
   }
   shareDomain.value = row ;
   shareDg.value = true;
@@ -313,7 +322,6 @@ const onReset = () => {
   kintonepwd.value = '';
   isPwd.value = true;
   editId.value = 0;
-  ownerid.value = '';
   isCreate.value = true;
   domainActive.value = true;
   resetPsw.value = false
diff --git a/frontend/src/pages/UserManagement.vue b/frontend/src/pages/UserManagement.vue
index 0b06b69..777ecd2 100644
--- a/frontend/src/pages/UserManagement.vue
+++ b/frontend/src/pages/UserManagement.vue
@@ -65,10 +65,10 @@
           <q-card-section class="q-pt-none q-mt-none">
             <div class="q-gutter-lg">
 
-              <q-input filled v-model="firstName" label="氏名 *" hint="ユーザーの氏名を入力してください" lazy-rules
+              <q-input filled v-model="lastName" label="氏名 *" hint="ユーザーの氏名を入力してください" lazy-rules
                 :rules="[val => val && val.length > 0 || 'ユーザーの氏名を入力してください。']" />
 
-              <q-input filled v-model="lastName" label="苗字 *" hint="ユーザーの苗字を入力してください" lazy-rules
+              <q-input filled v-model="firstName" label="苗字 *" hint="ユーザーの苗字を入力してください" lazy-rules
                 :rules="[val => val && val.length > 0 || 'ユーザーの苗字を入力してください']" />
 
               <q-input filled type="email" v-model="email" label="電子メール *" hint="電子メール、ログインとしても使用" lazy-rules
@@ -158,8 +158,8 @@ import { api } from 'boot/axios';
 
 const columns = [
   { name: 'id', label: 'ID', field: 'id', align: 'left', sortable: true },
-  { name: 'firstName', label: '氏名', field: 'firstName', align: 'left', sortable: true },
-  { name: 'lastName', label: '苗字', field: 'lastName', align: 'left', sortable: true },
+  { name: 'lastName', label: '氏名', field: 'lastName', align: 'left', sortable: true },
+  { name: 'firstName', label: '苗字', field: 'firstName', align: 'left', sortable: true },
   { name: 'email', label: '電子メール', field: 'email', align: 'left', sortable: true },
   { name: 'status', label: '状況', field: 'status', align: 'left' },
   { name: 'actions', label: '操作', field: 'actions' }
diff --git a/frontend/src/types/DomainTypes.ts b/frontend/src/types/DomainTypes.ts
index 2594450..3f7eafb 100644
--- a/frontend/src/types/DomainTypes.ts
+++ b/frontend/src/types/DomainTypes.ts
@@ -1,5 +1,4 @@
-import { IDomain } from './ActionTypes';
-import { IUser } from './UserTypes';
+import { IUser, IUserDisplay } from './UserTypes';
 
 export interface IDomainInfo {
   id: number;
@@ -32,4 +31,8 @@ export interface IDomainDisplay {
   user: string;
   password?: string;
   domainActive: boolean;
+}
+
+export interface IDomainOwnerDisplay extends IDomainDisplay {
+  owner: IUserDisplay
 }
\ No newline at end of file
diff --git a/frontend/src/types/UserTypes.ts b/frontend/src/types/UserTypes.ts
index cf7b275..41ade9b 100644
--- a/frontend/src/types/UserTypes.ts
+++ b/frontend/src/types/UserTypes.ts
@@ -17,5 +17,8 @@ export interface IUserDisplay {
   email: string;
   isActive: boolean,
   isSuperuser: boolean,
+}
+
+export interface IUserRolesDisplay extends IUserDisplay {
   roles: object[]
 }
\ No newline at end of file