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] 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>