new: add loader to transaction list (fixes: #174)

Lokavaluto · Apr 21, 2022 · 35760f8 · 35760f8
1 parent 47f5b91
commit 35760f8
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 5 deletions.
diff --git a/src/assets/main.scss b/src/assets/main.scss
@@ -288,7 +288,15 @@ span.custom-card-destinataire {
   text-overflow: ellipsis;
   padding-left: 10px;
 }
-
+.transactions-loader-container {
+    position: relative;
+    height: 40px;
+    width: 40px;
+    margin: auto;
+}
+.custom-modal-card-foot {
+    padding: 5px !important;
+}
 
 // card-opération-anchor-fin
 
@@ -406,8 +414,12 @@ span.custom-card-destinataire {
   padding-right: 1px;
   padding: 5px;
 }
-.custom-card-transactions{
+.custom-card-transactions {
   overflow-y: hidden !important;
+  max-height: calc(70vh - 60px) !important;
+}
+.custom-modal-container {
+  max-height: calc(70vh - 65px) !important;
 }
 
 .modal-card-head {
@@ -745,4 +757,4 @@ input {
     .inactive .account.card {
         opacity: 0.6;
     }
-}
+}
diff --git a/src/components/core/RightCol.vue b/src/components/core/RightCol.vue
@@ -18,15 +18,22 @@
                             showCreditRefreshNotification = false"></button>
           </header>
           <section class="modal-card-body custom-card-transactions">
-            <div class="modal-container" ref="transactionsContainer" @scroll="handleScroll"> 
+            <div class="modal-container custom-modal-container"  ref="transactionsContainer" @scroll="handleScroll"> 
               <div
                 class=" custom-card is-flex-direction-column is-align-items-center is-justify-content-space-between mb-4"
               >
                 <AllTrs />
               </div>
             </div>
           </section>
-          <footer class="modal-card-foot">
+          <footer class="modal-card-foot custom-modal-card-foot">
+	     <div class="transactions-loader-container">
+               <loading v-model:active="isLoadingTransactionsBatch"
+                           :can-cancel="false" 
+                           :is-full-page= "false"
+                           :width= "30"
+                           :height= "30"/>
+                </div>
           </footer>
         </div>
       </div>
@@ -47,12 +54,14 @@
   import { Options, Vue } from 'vue-class-component';
   import ThisWeek from "../rightCol/ThisWeek.vue";
   import AllTrs from "../rightCol/AllTrs.vue";
+  import Loading from 'vue-loading-overlay';
 
   @Options({
     name: "RightCol",
     components: {
       ThisWeek,
       AllTrs,
+      Loading
     },
 
     data() {
@@ -66,6 +75,9 @@
       },
       isLoadingTransactions(): boolean {
         return this.$store.state.lokapi.transactionsLoading
+      },
+      isLoadingTransactionsBatch(): boolean {
+        return this.$store.state.lokapi.transactionsBatchLoading
       }
     },
     watch: {

diff --git a/src/store/lokapi.ts b/src/store/lokapi.ts
@@ -31,6 +31,7 @@ export function lokapiStoreFactory(lokApiService: any) {
       accountsLoadingError: false,
       transactionsLoading: true,
       transactionsLoadingError: false,
+      transactionsBatchLoading: false,
     },
     actions: {
       async login({ commit, dispatch }: any, credentials: { login: string, password: string }) {
@@ -98,12 +99,14 @@ export function lokapiStoreFactory(lokApiService: any) {
       async fetchTransactionsBatch({commit, dispatch, state}:any) {
         let transactions = state.transactions.length > 0 ? state.transactions.slice(0) : [],
             transactionsIndex = 0
+        commit("setTransactionsBatchLoading",true)
         let next = await transactionsGen.next()
         while (!next.done && transactionsIndex < transactionsBatchLength) {
           transactionsIndex++
           transactions.push(<any>next.value)
           next = await transactionsGen.next()
         }
+        commit("setTransactionsBatchLoading",false)
         commit("setTransactions", transactions)
       },
       async genPaymentLink({commit}:any,amount:number) {
@@ -264,6 +267,9 @@ export function lokapiStoreFactory(lokApiService: any) {
       setTransactionsLoadingError(state: any, hasError: boolean) {
         state.transactionsLoadingError = hasError
       },
+      setTransactionsBatchLoading(state: any, isLoading: boolean) {
+        state.transactionsBatchLoading = isLoading
+      }
     },
     getters: {
       getCurr: (state: any) => {