Partial impl for #5142

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>
@@ -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>
@@ -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,9 +269,20 @@ export default {
           };
     },
     downloadBills: function (page) {
+      console.log('downloadBills');
+      console.log(this.indexReady);
+      console.log(this.loading);
+      console.log(this.downloaded);
       this.resetGroups();
+      // console.log('getAccountList()');
+      if (this.indexReady && !this.loading && !this.downloaded) {
+        this.loading = true;
         configureAxios().then(async (api) => {
-        api.get('./api/v1/bills?page=' + page + '&key=' + this.cacheKey + '&start=2021-07-01&end=2021-07-31')
+          // 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);
@@ -273,6 +299,7 @@ export default {
                     }
               );
         });
+      }
     },
     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) {

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
@@ -53,19 +53,19 @@ const app = new Vue({
                             this.$store.dispatch('root/initialiseStore');
 
                             // also init the dashboard store.
-                //this.$store.dispatch('dashboard/index/initialiseStore');
+                            this.$store.dispatch('dashboard/index/initialiseStore');
                         },
                     });
 
-// new Vue({
+new Vue({
-//             i18n,
+            i18n,
-//             store,
+            store,
-//             el: "#calendar",
+            el: "#calendar",
-//             render: (createElement) => {
+            render: (createElement) => {
-//                 return createElement(Calendar, {props: props});
+                return createElement(Calendar, {props: props});
-//             },
+            },
-// // See reference nr. 11
+// See reference nr. 11
-//         });
+        });
 
 // new Vue({
 //             i18n,