From 1a1ff2dc44bcf8a8d6e13dc9d480e260e48a3a05 Mon Sep 17 00:00:00 2001
From: James Cole <james@firefly-iii.org>
Date: Sat, 2 Oct 2021 14:57:20 +0200
Subject: [PATCH] Partial impl for #5142

---
 frontend/src/components/bills/Index.vue | 90 ++++++++++++++++---------
 frontend/src/pages/accounts/index.js    | 58 ++++++++--------
 frontend/src/pages/bills/index.js       | 48 ++++++-------
 3 files changed, 112 insertions(+), 84 deletions(-)

diff --git a/frontend/src/components/bills/Index.vue b/frontend/src/components/bills/Index.vue
index 0cf3718df5..887029d870 100644
--- a/frontend/src/components/bills/Index.vue
+++ b/frontend/src/components/bills/Index.vue
@@ -22,7 +22,8 @@
   <div>
     <div class="row">
       <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
-        <a href="./subscriptions/create" class="btn btn-sm mb-2 float-right btn-success"><span class="fas fa-plus"></span> {{ $t('firefly.create_new_bill')
+        <a href="./subscriptions/create" class="btn btn-sm mb-2 float-right btn-success"><span class="fas fa-plus"></span> {{
+            $t('firefly.create_new_bill')
           }}</a>
         <button @click="newCacheKey" class="btn btn-sm mb-2 mr-2 float-right btn-info"><span class="fas fa-sync"></span></button>
       </div>
@@ -49,7 +50,7 @@
                 <small v-if="true === data.item.active && 0 === data.item.skip">{{ $t('firefly.bill_repeats_' + data.item.repeat_freq) }}</small>
                 <small v-if="true === data.item.active && 1 === data.item.skip">{{ $t('firefly.bill_repeats_' + data.item.repeat_freq + '_other') }}</small>
                 <small v-if="true === data.item.active && data.item.skip > 1">{{
-                  $t('firefly.bill_repeats_' + data.item.repeat_freq + '_skip', {skip: data.item.skip + 1})
+                    $t('firefly.bill_repeats_' + data.item.repeat_freq + '_skip', {skip: data.item.skip + 1})
                   }}</small>
                 <small v-if="false === data.item.active">{{ $t('firefly.inactive') }}</small>
                 <!-- (rules, recurring) -->
@@ -114,11 +115,13 @@
                 <span v-if="null !== data.item.extension_date"><br/>
                     <small>
                     {{
-                        $t('firefly.extension_date_is', {date: new Intl.DateTimeFormat(locale, {
+                        $t('firefly.extension_date_is', {
+                          date: new Intl.DateTimeFormat(locale, {
                             year: 'numeric',
                             month: 'long',
                             day: 'numeric'
-                          }).format(new Date(data.item.extension_date.substring(0, 10)))})
+                          }).format(new Date(data.item.extension_date.substring(0, 10)))
+                        })
                       }}
                       </small>
                   </span>
@@ -126,8 +129,8 @@
               </template>
               <template #cell(amount)="data">
                 ~ <span class="text-info">{{
-                    Intl.NumberFormat(locale, {style: 'currency', currency: data.item.currency_code}).format((data.item.amount_min + data.item.amount_max) / 2)
-                  }}
+                  Intl.NumberFormat(locale, {style: 'currency', currency: data.item.currency_code}).format((data.item.amount_min + data.item.amount_max) / 2)
+                }}
                   </span>
               </template>
               <template #cell(payment_info)="data">
@@ -166,10 +169,10 @@
                     </button>
                     <div class="dropdown-menu" :aria-labelledby="'dropdownMenuButton' + data.item.id">
                       <a class="dropdown-item" :href="'./subscriptions/edit/' + data.item.id"><span class="fa fas fa-pencil-alt"></span> {{
-                        $t('firefly.edit')
+                          $t('firefly.edit')
                         }}</a>
                       <a class="dropdown-item" :href="'./subscriptions/delete/' + data.item.id"><span class="fa far fa-trash"></span> {{
-                        $t('firefly.delete')
+                          $t('firefly.delete')
                         }}</a>
                     </div>
                   </div>
@@ -182,7 +185,8 @@
     </div>
     <div class="row">
       <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
-        <a href="./subscriptions/create" class="btn btn-sm mt-2 float-right btn-success"><span class="fas fa-plus"></span> {{ $t('firefly.create_new_bill')
+        <a href="./subscriptions/create" class="btn btn-sm mt-2 float-right btn-success"><span class="fas fa-plus"></span> {{
+            $t('firefly.create_new_bill')
           }}</a>
         <button @click="newCacheKey" class="btn btn-sm mt-2 mr-2 float-right btn-info"><span class="fas fa-sync"></span></button>
       </div>
@@ -206,18 +210,29 @@ export default {
       locale: 'en-US',
       sortedGroups: [],
       fields: [],
-      fnsLocale: null
+      fnsLocale: null,
+      ready: false
     }
   },
+  watch: {
+    start: function () {
+      this.downloadBills(1);
+    },
+    end: function () {
+      this.downloadBills(1);
+    },
+  },
   computed: {
-    ...mapGetters('root', ['cacheKey']),
+    ...mapGetters('root', ['listPageSize', 'cacheKey']),
+    ...mapGetters('dashboard/index', ['start', 'end',]),
+    'indexReady': function () {
+      return null !== this.start && null !== this.end && null !== this.listPageSize && this.ready;
+    },
   },
   created() {
     this.locale = localStorage.locale ?? 'en-US';
-    console.log(this.locale);
-
     this.updateFieldList();
-    this.downloadBills(1);
+    this.ready = true;
   },
   methods: {
     ...mapMutations('root', ['refreshCacheKey',]),
@@ -254,25 +269,37 @@ export default {
           };
     },
     downloadBills: function (page) {
+      console.log('downloadBills');
+      console.log(this.indexReady);
+      console.log(this.loading);
+      console.log(this.downloaded);
       this.resetGroups();
-      configureAxios().then(async (api) => {
-        api.get('./api/v1/bills?page=' + page + '&key=' + this.cacheKey + '&start=2021-07-01&end=2021-07-31')
-            .then(response => {
-                    // pages
-                    let currentPage = parseInt(response.data.meta.pagination.current_page);
-                    let totalPage = parseInt(response.data.meta.pagination.total_pages);
-                    this.parseBills(response.data.data);
-                    if (currentPage < totalPage) {
-                      let nextPage = currentPage + 1;
-                      this.downloadBills(nextPage);
+      // console.log('getAccountList()');
+      if (this.indexReady && !this.loading && !this.downloaded) {
+        this.loading = true;
+        configureAxios().then(async (api) => {
+          // get date from session.
+          let startStr = format(this.start, 'y-MM-dd');
+          let endStr = format(this.end, 'y-MM-dd');
+
+          api.get('./api/v1/bills?page=' + page + '&key=' + this.cacheKey + '&start='+startStr+'&end=' + endStr)
+              .then(response => {
+                      // pages
+                      let currentPage = parseInt(response.data.meta.pagination.current_page);
+                      let totalPage = parseInt(response.data.meta.pagination.total_pages);
+                      this.parseBills(response.data.data);
+                      if (currentPage < totalPage) {
+                        let nextPage = currentPage + 1;
+                        this.downloadBills(nextPage);
+                      }
+                      if (currentPage >= totalPage) {
+                        this.downloaded = true;
+                      }
+                      this.sortGroups();
                     }
-                    if (currentPage >= totalPage) {
-                      this.downloaded = true;
-                    }
-                    this.sortGroups();
-                  }
-            );
-      });
+              );
+        });
+      }
     },
     sortGroups: function () {
       const sortable = Object.entries(this.groups);
@@ -282,6 +309,7 @@ export default {
         return a.order - b.order;
       });
       this.sortedGroups = sortable;
+      this.loading = false;
       //console.log(this.sortedGroups);
     },
     parseBills: function (data) {
diff --git a/frontend/src/pages/accounts/index.js b/frontend/src/pages/accounts/index.js
index ccdc5423cf..563e6fcca1 100644
--- a/frontend/src/pages/accounts/index.js
+++ b/frontend/src/pages/accounts/index.js
@@ -38,41 +38,41 @@ Vue.component('b-pagination', BPagination);
 //Vue.use(Vuex);
 
 const app = new Vue({
-            i18n,
-            store,
-            el: "#accounts",
-            render: (createElement) => {
-                return createElement(Index, {props: props});
-            },
-            beforeCreate() {
+                        i18n,
+                        store,
+                        el: "#accounts",
+                        render: (createElement) => {
+                            return createElement(Index, {props: props});
+                        },
+                        beforeCreate() {
 // See reference nr. 10
-                this.$store.commit('initialiseStore');
-                this.$store.dispatch('updateCurrencyPreference');
+                            this.$store.commit('initialiseStore');
+                            this.$store.dispatch('updateCurrencyPreference');
 
-                // init the new root store (dont care about results)
-                this.$store.dispatch('root/initialiseStore');
+                            // init the new root store (dont care about results)
+                            this.$store.dispatch('root/initialiseStore');
 
-                // also init the dashboard store.
-                this.$store.dispatch('dashboard/index/initialiseStore');
-            },
-        });
+                            // also init the dashboard store.
+                            this.$store.dispatch('dashboard/index/initialiseStore');
+                        },
+                    });
 
 const calendar = new Vue({
-            i18n,
-            store,
-            el: "#calendar",
-            render: (createElement) => {
-                return createElement(Calendar, {props: props});
-            },
+                             i18n,
+                             store,
+                             el: "#calendar",
+                             render: (createElement) => {
+                                 return createElement(Calendar, {props: props});
+                             },
 // See reference nr. 11
-        });
+                         });
 
 const opt = new Vue({
-            i18n,
-            store,
-            el: "#indexOptions",
-            render: (createElement) => {
-                return createElement(IndexOptions, {props: props});
-            },
+                        i18n,
+                        store,
+                        el: "#indexOptions",
+                        render: (createElement) => {
+                            return createElement(IndexOptions, {props: props});
+                        },
 // See reference nr. 12
-        });
\ No newline at end of file
+                    });
\ No newline at end of file
diff --git a/frontend/src/pages/bills/index.js b/frontend/src/pages/bills/index.js
index 0a32c1b9ae..3820fb4c19 100644
--- a/frontend/src/pages/bills/index.js
+++ b/frontend/src/pages/bills/index.js
@@ -23,7 +23,7 @@ import Vue from "vue";
 import Index from "../../components/bills/Index";
 import store from "../../components/store";
 import {BPagination, BTable} from 'bootstrap-vue';
-//import Calendar from "../../components/dashboard/Calendar";
+import Calendar from "../../components/dashboard/Calendar";
 //import IndexOptions from "../../components/accounts/IndexOptions";
 
 // i18n
@@ -38,35 +38,35 @@ Vue.component('b-pagination', BPagination);
 //Vue.use(Vuex);
 
 const app = new Vue({
+                        i18n,
+                        store,
+                        el: "#bills",
+                        render: (createElement) => {
+                            return createElement(Index, {props: props});
+                        },
+                        beforeCreate() {
+                            // See reference nr. 10
+                            this.$store.commit('initialiseStore');
+                            this.$store.dispatch('updateCurrencyPreference');
+
+                            // init the new root store (dont care about results)
+                            this.$store.dispatch('root/initialiseStore');
+
+                            // also init the dashboard store.
+                            this.$store.dispatch('dashboard/index/initialiseStore');
+                        },
+                    });
+
+new Vue({
             i18n,
             store,
-            el: "#bills",
+            el: "#calendar",
             render: (createElement) => {
-                return createElement(Index, {props: props});
-            },
-            beforeCreate() {
-                // See reference nr. 10
-                this.$store.commit('initialiseStore');
-                this.$store.dispatch('updateCurrencyPreference');
-
-                // init the new root store (dont care about results)
-                this.$store.dispatch('root/initialiseStore');
-
-                // also init the dashboard store.
-                //this.$store.dispatch('dashboard/index/initialiseStore');
+                return createElement(Calendar, {props: props});
             },
+// See reference nr. 11
         });
 
-// new Vue({
-//             i18n,
-//             store,
-//             el: "#calendar",
-//             render: (createElement) => {
-//                 return createElement(Calendar, {props: props});
-//             },
-// // See reference nr. 11
-//         });
-
 // new Vue({
 //             i18n,
 //             store,