Rebuild frontend.

frontend/src/components/dashboard/Calendar.vue

@@ -42,21 +42,17 @@
                   class="btn btn-secondary btn-sm" :title="$t('firefly.custom_period')"
                   @click="togglePopover({ placement: 'auto-start', positionFixed: true })"
               ><i class="fas fa-calendar-alt"></i></button>
-              <button
+              <button @click="resetDate"
                       class="btn btn-secondary"
                       :title="$t('firefly.reset_to_current')"
               ><i class="fas fa-history"></i></button>
-
-
               <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"
                       :title="$t('firefly.select_period')"
                       aria-expanded="false">
                 <i class="fas fa-list"></i>
               </button>
               <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                <a class="dropdown-item" href="#">(prev period)</a>
+                <a v-for="period in periods" class="dropdown-item" href="#" @click="customDate(period.start, period.end)">{{ period.title }}</a>
-                <a class="dropdown-item" href="#">(next period)</a>
-                <a class="dropdown-item" href="#">(this week?)</a>
               </div>
 
             </div>
@@ -89,6 +85,21 @@ export default {
     this.ready = true;
     this.locale = localStorage.locale ?? 'en-US';
   },
+  data() {
+    return {
+      locale: 'en-US',
+      ready: false,
+      range: {
+        start: null,
+        end: null,
+      },
+      defaultRange: {
+        start: null,
+        end: null,
+      },
+      periods: []
+    };
+  },
   methods: {
     ...mapMutations(
         [
@@ -96,40 +107,76 @@ export default {
           'setStart',
         ],
     ),
+    resetDate: function () {
+      //console.log('Reset date to');
+      //console.log(this.defaultStart);
+      //console.log(this.defaultEnd);
+      this.range.start = this.defaultStart;
+      this.range.end = this.defaultEnd;
+      this.setStart(this.defaultStart);
+      this.setEnd(this.defaultEnd);
+    },
+    customDate: function (startStr, endStr) {
+      let start = new Date(startStr);
+      let end = new Date(endStr);
+      this.setStart(start);
+      this.setEnd(end);
+      this.range.start = start;
+      this.range.end = end;
+      return false;
+    }
   },
   computed: {
     ...mapGetters([
                     'viewRange',
                     'start',
-                    'end'
+                    'end',
+                    'defaultStart',
+                    'defaultEnd'
                   ]),
     'datesReady': function () {
       return null !== this.start && null !== this.end && this.ready;
-    }
+    },
   },
   watch: {
     datesReady: function (value) {
-      if (true === value) {
+      if (false === value) {
+        return;
+      }
       this.range.start = new Date(this.start);
       this.range.end = new Date(this.end);
+      this.periods = [];
+      // create periods.
+      // last 7 days
+      let today = new Date;
+      let end = new Date;
+      end.setDate(end.getDate() - 7);
+      this.periods.push(
+          {
+            start: end.toDateString(),
+            end: today.toDateString(),
+            title: this.$t('firefly.last_seven_days')
           }
+      );
+
+      // last 30 days:
+      end.setDate(end.getDate() - 23);
+      this.periods.push(
+          {
+            start: end.toDateString(),
+            end: today.toDateString(),
+            title: this.$t('firefly.last_thirty_days')
+          }
+      );
+      // last 30 days
+      // everything
     },
     range: function (value) {
-      console.log('User updated range');
+      //console.log('User updated range');
       this.setStart(value.start);
       this.setEnd(value.end);
     }
-  },
-  data() {
-    return {
-      locale: 'en-US',
-      ready: false,
-      range: {
-        start: new Date,
-        end: new Date,
   }
-    };
-  },
 }
 </script>
 

frontend/src/components/dashboard/MainAccount.vue

@@ -92,6 +92,7 @@ export default {
   methods: {
     initialiseChart: function () {
       this.loading = true;
+      this.error = false;
       let startStr = this.start.toISOString().split('T')[0];
       let endStr = this.end.toISOString().split('T')[0];
       let url = './api/v1/chart/account/overview?start=' + startStr + '&end=' + endStr;

frontend/src/components/dashboard/MainAccountList.vue

@@ -107,10 +107,22 @@ export default {
       if (true === value) {
         this.initialiseList();
       }
+    },
+    start: function () {
+      if (false === this.loading) {
+        this.initialiseList();
       }
     },
+    end: function () {
+      if (false === this.loading) {
+        this.initialiseList();
+      }
+    },
+  },
   methods: {
     initialiseList: function () {
+      this.loading = true;
+      this.accounts = [];
       axios.get('./api/v1/preferences/frontpageAccounts')
           .then(response => {
                   this.loadAccounts(response);

frontend/src/components/dashboard/MainBillsList.vue

@@ -103,8 +103,18 @@ export default {
       if (true === value) {
         this.initialiseBills();
       }
+    },
+    start: function () {
+      if (false === this.loading) {
+        this.initialiseBills();
       }
     },
+    end: function () {
+      if (false === this.loading) {
+        this.initialiseBills();
+      }
+    },
+  },
   created() {
     this.ready = true;
     this.locale = localStorage.locale ?? 'en-US';
@@ -112,6 +122,8 @@ export default {
   components: {},
   methods: {
     initialiseBills: function () {
+      this.loading = true;
+      this.bills = [];
       let startStr = this.start.toISOString().split('T')[0];
       let endStr = this.end.toISOString().split('T')[0];
 

frontend/src/components/dashboard/MainBudgetList.vue

@@ -101,10 +101,20 @@ export default {
   watch: {
     datesReady: function (value) {
       if (true === value) {
-        this.collectData();
+        this.getBudgets();
       }
+    },
+    start: function () {
+      if (false === this.loading) {
+        this.getBudgets();
       }
     },
+    end: function () {
+      if (false === this.loading) {
+        this.getBudgets();
+      }
+    },
+  },
   computed: {
     ...mapGetters([
                     'start',
@@ -116,16 +126,24 @@ export default {
   },
   methods:
       {
-        collectData() {
-          this.getBudgets();
-        },
         getBudgets() {
+          this.budgets = {};
+          this.rawBudgets = [];
+          this.budgetLimits = {
+            daily: [],
+            weekly: [],
+            monthly: [],
+            quarterly: [],
+            half_year: [],
+            yearly: [],
+            other: [],
+          };
+          this.loading = true;
           let startStr = this.start.toISOString().split('T')[0];
           let endStr = this.end.toISOString().split('T')[0];
           axios.get('./api/v1/budgets?start=' + startStr + '&end=' + endStr)
               .then(response => {
                       this.parseBudgets(response.data);
-                      this.loading = false;
                     }
               );
         },
@@ -152,14 +170,13 @@ export default {
           }
           this.getBudgetLimits();
         },
-
-
         getBudgetLimits() {
           let startStr = this.start.toISOString().split('T')[0];
           let endStr = this.end.toISOString().split('T')[0];
           axios.get('./api/v1/budgets/limits?start=' + startStr + '&end=' + endStr)
               .then(response => {
                       this.parseBudgetLimits(response.data);
+                      this.loading = false;
                     }
               );
         },

frontend/src/components/dashboard/MainCategoryList.vue

@@ -117,11 +117,26 @@ export default {
       if (true === value) {
         this.getCategories();
       }
+    },
+    start: function () {
+      if (false === this.loading) {
+        this.getCategories();
       }
     },
+    end: function () {
+      if (false === this.loading) {
+        this.getCategories();
+      }
+    },
+  },
   methods:
       {
         getCategories() {
+          this.categories = [];
+          this.sortedList = [];
+          this.spent = 0;
+          this.earned = 0;
+          this.loading = true;
           let startStr = this.start.toISOString().split('T')[0];
           let endStr = this.end.toISOString().split('T')[0];
           axios.get('./api/v1/categories?start=' + startStr + '&end=' + endStr)

frontend/src/components/dashboard/MainCreditList.vue

@@ -101,10 +101,23 @@ export default {
       if (true === value) {
         this.getIncome();
       }
+    },
+    start: function () {
+      if (false === this.loading) {
+        this.getIncome();
       }
     },
+    end: function () {
+      if (false === this.loading) {
+        this.getIncome();
+      }
+    },
+  },
   methods: {
     getIncome() {
+      this.loading = true;
+      this.income = [];
+      this.error=false;
       let startStr = this.start.toISOString().split('T')[0];
       let endStr = this.end.toISOString().split('T')[0];
       axios.get('./api/v1/insight/income/date/basic?start=' + startStr + '&end=' + endStr)

frontend/src/components/dashboard/MainDebitList.vue

@@ -101,10 +101,23 @@ export default {
       if (true === value) {
         this.getExpenses();
       }
+    },
+    start: function () {
+      if (false === this.loading) {
+        this.getExpenses();
       }
     },
+    end: function () {
+      if (false === this.loading) {
+        this.getExpenses();
+      }
+    },
+  },
   methods: {
     getExpenses() {
+      this.loading = true;
+      this.error=false;
+      this.expenses = [];
       let startStr = this.start.toISOString().split('T')[0];
       let endStr = this.end.toISOString().split('T')[0];
       axios.get('./api/v1/insight/expense/date/basic?start=' + startStr + '&end=' + endStr)

frontend/src/components/dashboard/TopBoxes.vue

@@ -194,8 +194,18 @@ export default {
       if (true === value) {
         this.prepareComponent();
       }
+    },
+    start: function () {
+      if (false === this.loading) {
+        this.prepareComponent();
       }
     },
+    end: function () {
+      if (false === this.loading) {
+        this.prepareComponent();
+      }
+    },
+  },
   created() {
     this.ready = true;
   },
@@ -231,6 +241,14 @@ export default {
      * Prepare the component.
      */
     prepareComponent() {
+      this.error=false;
+      this.loading = true;
+      this.summary = [];
+      this.balances = [];
+      this.billsPaid = [];
+      this.billsUnpaid = [];
+      this.leftToSpend = [];
+      this.netWorth = [];
       let startStr = this.start.toISOString().split('T')[0];
       let endStr = this.end.toISOString().split('T')[0];
       axios.get('./api/v1/summary/basic?start=' + startStr + '&end=' + endStr)

frontend/src/components/store/modules/dashboard/index.js

@@ -21,9 +21,12 @@
 // initial state
 const state = () => (
     {
+        viewRange: 'default',
         start: null,
         end: null,
-        viewRange: 'default'
+        // default range:
+        defaultStart: null,
+        defaultEnd: null,
     }
 )
 
@@ -36,6 +39,12 @@ const getters = {
     end: state => {
         return state.end;
     },
+    defaultStart: state => {
+        return state.defaultStart;
+    },
+    defaultEnd: state => {
+        return state.defaultEnd;
+    },
     viewRange: state => {
         return state.viewRange;
     }
@@ -64,13 +73,25 @@ const actions = {
         // console.log('Must set dates from viewRange "' + context.state.viewRange + '"');
         // check local storage first?
         if (localStorage.viewRangeStart) {
-            // console.log('view range set from local storage.');
+            // console.log('view range start set from local storage.');
             context.commit('setStart', new Date(localStorage.viewRangeStart));
         }
         if (localStorage.viewRangeEnd) {
-            // console.log('view range set from local storage.');
+            // console.log('view range end set from local storage.');
             context.commit('setEnd', new Date(localStorage.viewRangeEnd));
         }
+        // also set default:
+        if(localStorage.viewRangeDefaultStart) {
+            // console.log('view range default start set from local storage.');
+            // console.log(localStorage.viewRangeDefaultStart);
+            context.commit('setDefaultStart', new Date(localStorage.viewRangeDefaultStart));
+        }
+        if(localStorage.viewRangeDefaultEnd) {
+            // console.log('view range default end set from local storage.');
+            // console.log(localStorage.viewRangeDefaultEnd);
+            context.commit('setDefaultEnd', new Date(localStorage.viewRangeDefaultEnd));
+        }
+
         if (null !== context.getters.end && null !== context.getters.start) {
             return;
         }
@@ -160,6 +181,8 @@ const actions = {
         // console.log('End is   ' + end);
         context.commit('setStart', start);
         context.commit('setEnd', end);
+        context.commit('setDefaultStart', start);
+        context.commit('setDefaultEnd', end);
     }
 }
 
@@ -173,6 +196,14 @@ const mutations = {
         state.end = value;
         window.localStorage.setItem('viewRangeEnd', value);
     },
+    setDefaultStart(state, value) {
+        state.defaultStart = value;
+        window.localStorage.setItem('viewRangeDefaultStart', value);
+    },
+    setDefaultEnd(state, value) {
+        state.defaultEnd = value;
+        window.localStorage.setItem('viewRangeDefaultEnd', value);
+    },
     setViewRange(state, range) {
         state.viewRange = range;
     }