fix(Admin): better loading management and fetchOne system for OrganizationsList

src/components/Preview.vue

@@ -6,7 +6,13 @@
     transition="dialog-bottom-transition"
     scrollable
   >
-    <v-card tile>
+    <div
+      v-if="loading"
+      style="background: rgba(0, 0, 0, 0.8)"
+      class="d-flex py-8 justify-center align-center white--text">
+      <v-progress-circular class="my-8 py-8" indeterminate />
+    </div>
+    <v-card tile v-else>
       <v-toolbar
         :prominent="false"
         flat
@@ -62,6 +68,11 @@ export default {
       type: String,
       required: true
     },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     slug: {
       type: String,
       required: true

src/views/Admin/OrganizationList.vue

@@ -4,7 +4,7 @@
       <v-data-table
         :headers="headers"
         :items="organizations"
-        :loading="isLoading"
+        :loading="tableLoading"
         :options.sync="options"
         :server-items-length="totalCount"
         sort-by="validationState"
@@ -186,7 +186,7 @@
               <v-btn small icon color="success">
                 <v-icon
                   small
-                  @click="openApproveModal(item)"
+                  @click="openApproveModal(item._id)"
                   v-bind="attrs"
                   v-on="on"
                 >
@@ -221,11 +221,19 @@
       v-model="detailsModal"
       max-width="600px"
       :fullscreen="$vuetify.breakpoint.mobile">
-      <v-card>
+      <div
+        v-if="fetchOneLoading"
+        style="background: rgba(0, 0, 0, 0.8); height: 100%"
+        class="d-flex py-8 justify-center align-center white--text">
+        <v-progress-circular class="my-8 py-8" indeterminate />
+      </div>
+      <v-card class="limit-radius" v-if="toSeeItem != null && !fetchOneLoading">
         <v-card-title>
-          Détails et actions sur l'association {{ toSeeItem.adminName }}
+          Détails sur "{{ toSeeItem.adminName }}"
         </v-card-title>
-        <v-card-text :class="$vuetify.breakpoint.mobile ? 'mx-0' : ''">
+        <v-card-text
+          :class="$vuetify.breakpoint.mobile ? 'mx-0' : ''"
+          class="dense-modal-text">
           <!-- show dates, status, current and published version page link, token -->
           <!-- action: reset token, send email -->
           <v-list two-line>
@@ -246,6 +254,7 @@
               </v-list-item-action>
             </v-list-item>
 
+            <template v-if="$store.state.debugMode">
               <v-divider  />
               <v-list-item>
                 <v-list-item-icon>
@@ -256,6 +265,7 @@
                   <v-list-item-subtitle>Identifiant base de donnée</v-list-item-subtitle>
                 </v-list-item-content>
               </v-list-item>
+            </template>
 
             <v-divider />
             <v-list-item>
@@ -330,6 +340,7 @@
       :id="toApproveItem._id"
       :slug="toApproveItem.slugs[0]"
       :dialogTitle="approveModalTitle"
+      :loading="fetchOneLoading"
       @close="approveModal = false"
     >
       <v-btn outlined text dark class="warning" @click="openDiffModal()">
@@ -347,7 +358,7 @@
     </Preview>
     <div class="diff-dialog">
       <v-dialog max-width="900px" v-model="diffModal">
-        <v-card>
+        <v-card class="limit-radius">
           <v-card-title>Comparaison des deux versions</v-card-title>
           <v-card-text class="diff-content">
             <div
@@ -370,7 +381,7 @@
     <v-dialog max-width="500px" v-model="rejectionModal">
       <v-card>
         <v-card-title>Indiquez la raison de ce refus</v-card-title>
-        <v-card-text>
+        <v-card-text class="dense-modal-text">
           <v-textarea
             :disabled="approved"
             label="Description"
@@ -475,7 +486,8 @@ export default {
       diffText: '',
       options: null,
       totalCount: 0,
-      isLoading: false
+      tableLoading: false,
+      fetchOneLoading: false
     }
   },
 
@@ -504,29 +516,39 @@ export default {
     this.$store.commit('SET_TITLE', 'Gestion des associations')
 
     if (this.$route.query.approval !== undefined) {
-      this.fetchOne(this.$route.query.approval).then((data) => {
-        if (data != null) {
       this.$router.push({ query: {} })
-          this.openApproveModal(data)
+      this.openApproveModal(this.$route.query.approval)
-        }
+      // this.fetchOne(this.$route.query.approval).then((data) => {
-      })
+      //   if (data != null) {
+      //     this.$router.push({ query: {} })
+      //     this.openApproveModal(data)
+      //   }
+      // })
     }
   },
 
   methods: {
 
     fetchOne (id) {
+      let charged = false
+      setTimeout(() => {
+        if (!charged) {
+          this.fetchOneLoading = true
+        }
+      }, 300)
       return new Promise(resolve => {
         this.$apitator.get('/admin/organizations/' + id, {
           withAuth: true
         }).then(res => {
+          charged = true
+          this.fetchOneLoading = false
           resolve(res.data.data)
         })
       })
     },
 
     fetchData () {
-      this.isLoading = true
+      this.tableLoading = true
       let params = {}
       if (this.options != null) {
         params = {
@@ -542,7 +564,7 @@ export default {
       }).then(res => {
         this.organizations = res.data.data.docs
         this.totalCount = res.data.data.totalDocs
-        this.isLoading = false
+        this.tableLoading = false
       })
     },
 
@@ -572,8 +594,11 @@ export default {
     },
 
     openDetailsModal (item) {
-      this.toSeeItem = item
       this.detailsModal = true
+      this.toSeeItem = null
+      this.fetchOne(item._id).then(data => {
+        this.toSeeItem = data
+      })
     },
 
     close () {
@@ -671,15 +696,20 @@ export default {
     },
 
     openPanel (item) {
-      const routeData = this.$router.resolve({ name: 'DelegateMain', query: { delegateToken: item.token } })
+      const routeData = this.$router.resolve({
+        name: 'DelegateMain',
+        query: { delegateToken: item.token }
+      })
       window.open(routeData.href, '_blank').focus()
     },
 
-    openApproveModal (item) {
+    openApproveModal (itemId) {
-      this.$refs.preview.reload()
       this.approveModal = true
-      this.toApproveItem = item
+      this.fetchOne(itemId).then((data) => {
+        this.$refs.preview.reload()
+        this.toApproveItem = data
         this.approved = false
+      })
     },
 
     approve () {
@@ -843,6 +873,11 @@ export default {
 
 <style>
 
+.limit-radius {
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+
 .diff-dialog .v-dialog {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
@@ -861,5 +896,7 @@ export default {
 .diff .remove {
   background-color: #ffeef0;
 }
-
+.dense-modal-text {
+  padding-bottom: 0 !important;
+}
 </style>