Rebuild front with some vuex storage.

frontend/src/components/dashboard/BudgetLimitRow.vue

@@ -104,11 +104,15 @@ export default {
   props: {
     budgetLimit: {
       type: Object,
-      default: {}
+      default: function () {
+        return {};
+      }
     },
     budget: {
       type: Object,
-      default: {}
+      default: function () {
+        return {};
+      }
     }
   }
 }

frontend/src/components/dashboard/Calendar.vue

@@ -35,36 +35,41 @@
         is-range
     >
       <template v-slot="{ inputValue, inputEvents, isDragging, togglePopover }">
-        <div class="btn-group btn-group-sm btn-group-justified">
-          <button
-              class="btn btn-secondary btn-sm"
-              @click="togglePopover({ placement: 'auto-start', positionFixed:true })"
-          ><i class="fas fa-calendar-alt"></i></button>
-          <button
-              class="btn btn-secondary"
-          ><i class="fas fa-history"></i></button>
+        <div class="row">
+          <div class="col">
+            <div class="btn-group btn-group-sm d-flex">
+              <button
+                  class="btn btn-secondary btn-sm"
+                  @click="togglePopover({ placement: 'auto-start', positionFixed:true })"
+              ><i class="fas fa-calendar-alt"></i></button>
+              <button
+                  class="btn btn-secondary"
+              ><i class="fas fa-history"></i></button>
 
 
-          <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" 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 class="dropdown-item" href="#">(next period)</a>
-            <a class="dropdown-item" href="#">(this week?)</a>
+              <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"
+                      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 class="dropdown-item" href="#">(next period)</a>
+                <a class="dropdown-item" href="#">(this week?)</a>
+              </div>
+
+            </div>
+            <input type="hidden"
+                   :class="isDragging ? 'text-gray-600' : 'text-gray-900'"
+                   :value="inputValue.start"
+                   v-on="inputEvents.start"
+            />
+            <input type="hidden"
+                   :class="isDragging ? 'text-gray-600' : 'text-gray-900'"
+                   :value="inputValue.end"
+                   v-on="inputEvents.end"
+            />
           </div>
-
         </div>
-        <input type="hidden"
-               :class="isDragging ? 'text-gray-600' : 'text-gray-900'"
-               :value="inputValue.start"
-               v-on="inputEvents.start"
-        />
-        <input type="hidden"
-               :class="isDragging ? 'text-gray-600' : 'text-gray-900'"
-               :value="inputValue.end"
-               v-on="inputEvents.end"
-        />
       </template>
     </date-picker>
   </div>
@@ -73,8 +78,12 @@
 <script>
 export default {
   name: "Calendar",
-  mounted() {
-    this.locale = localStorage.locale ?? 'en-US';
+  created() {
+    // this.locale = localStorage.locale ?? 'en-US';
+    // this.$store.commit('increment');
+    // console.log(this.$store.state.count);
+    // get dates for current period (history button):
+    // get dates for optional periods (dropdown) + descriptions.
   },
   data() {
     return {
@@ -83,12 +92,21 @@ export default {
         start: new Date(window.sessionStart),
         end: new Date(window.sessionEnd),
       },
+      defaultRange: {
+        start: new Date(window.sessionStart),
+        end: new Date(window.sessionEnd),
+      },
     };
   },
 }
 </script>
 
 <style scoped>
-.dropdown-item {color:#212529;}
-.dropdown-item:hover {color:#212529;}
+.dropdown-item {
+  color: #212529;
+}
+
+.dropdown-item:hover {
+  color: #212529;
+}
 </style>

frontend/src/components/dashboard/Dashboard.vue

@@ -20,10 +20,6 @@
 
 <template>
   <div>
-
-
-
-
     <top-boxes/>
     <div class="row">
       <div class="col">
@@ -40,15 +36,15 @@
 
     <div class="row">
       <div class="col">
-        <main-category-list />
+        <main-category-list/>
       </div>
     </div>
     <div class="row">
       <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
-        <main-debit-list />
+        <main-debit-list/>
       </div>
       <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
-        <main-credit-list />
+        <main-credit-list/>
       </div>
     </div>
 
@@ -70,34 +66,8 @@
 <script>
 export default {
   name: "Dashboard",
-  created() {
-    if (!localStorage.currencyPreference) {
-      this.getCurrencyPreference();
-    }
-  },
-  methods: {
-    getCurrencyPreference: function () {
-      axios.get('./api/v1/currencies/default')
-          .then(response => {
-            localStorage.currencyPreference = JSON.stringify({
-              id: parseInt(response.data.data.id),
-              name: response.data.data.attributes.name,
-              symbol: response.data.data.attributes.symbol,
-              code: response.data.data.attributes.code,
-              decimal_places: parseInt(response.data.data.attributes.decimal_places),
-            });
-          }).catch(err => {
-        console.log('Got error response.');
-        console.error(err);
-        localStorage.currencyPreference = JSON.stringify({
-          id: 1,
-          name: 'Euro',
-          symbol: '€',
-          code: 'EUR',
-          decimal_places: 2
-        });
-      });
-    }
-  }
+  created() {},
+  computed: {},
+  methods: {}
 }
 </script>

frontend/src/components/dashboard/TopBoxes.vue

@@ -27,7 +27,7 @@
         <div class="info-box-content">
           <span class="info-box-text">{{ $t("firefly.balance") }}</span>
           <!-- balance in preferred currency -->
-          <span class="info-box-number" v-for="balance in prefCurrencyBalances" :title="balance.sub_title">{{ balance.value_parsed }}</span>
+          <span class="info-box-number" v-for="balance in prefCurrencyBalances" :title="balance.sub_title">(x) {{ balance.value_parsed }}</span>
 
           <div class="progress bg-info">
             <div class="progress-bar" style="width: 0"></div>
@@ -35,6 +35,7 @@
           <!-- balance in not preferred currency -->
           <span class="progress-description">
                         <span v-for="(balance, index) in notPrefCurrencyBalances" :title="balance.sub_title">
+                          (y)
                           {{ balance.value_parsed }}<span v-if="index+1 !== notPrefCurrencyBalances.length">, </span>
                         </span>
                       <span v-if="0===notPrefCurrencyBalances.length">&nbsp;</span>
@@ -122,7 +123,6 @@ export default {
   props: {},
   data() {
     return {
-      currencyPreference: {},
       summary: [],
       balances: [],
       billsPaid: [],
@@ -164,17 +164,23 @@ export default {
     notPrefNetWorth: function () {
       return this.filterOnNotCurrency(this.netWorth);
     },
+    currencyCode() {
+      return this.$store.getters.currencyCode;
+    },
+    currencyId() {
+      return this.$store.getters.currencyId;
+    }
   },
   created() {
     this.prepareComponent();
-    this.currencyPreference = localStorage.currencyPreference ? JSON.parse(localStorage.currencyPreference) : {};
   },
   methods: {
     filterOnCurrency(array) {
       let ret = [];
       for (const key in array) {
         if (array.hasOwnProperty(key)) {
-          if (array[key].currency_id === this.currencyPreference.id) {
+          console.log('Currency ID seems to be ' + this.currencyId);
+          if (array[key].currency_id === this.currencyId) {
             ret.push(array[key]);
           }
         }
@@ -189,7 +195,7 @@ export default {
       let ret = [];
       for (const key in array) {
         if (array.hasOwnProperty(key)) {
-          if (array[key].currency_id !== this.currencyPreference.id) {
+          if (array[key].currency_id !== this.currencyId) {
             ret.push(array[key]);
           }
         }
@@ -216,7 +222,7 @@ export default {
     hasCurrency: function (array) {
       for (const key in array) {
         if (array.hasOwnProperty(key)) {
-          if (array[key].currency_id === this.currencyPreference.id) {
+          if (array[key].currency_id === this.currencyId) {
             return true;
           }
         }

frontend/src/components/store/index.js

@@ -0,0 +1,77 @@
+/*
+ * index.js
+ * Copyright (c) 2020 james@firefly-iii.org
+ *
+ * This file is part of Firefly III (https://github.com/firefly-iii).
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store(
+    {
+        modules: [],
+        strict: true,
+        plugins: [],
+        state: {
+            currencyPreference: {},
+            locale: 'en-US'
+        },
+        mutations: {
+            setCurrencyPreference(state, object) {
+                state.currencyPreference = object;
+            },
+            initialiseStore(state) {
+                console.log('initialiseStore');
+            }
+        },
+        getters: {
+            currencyCode: state => {
+                return state.currencyPreference.code;
+            },
+            currencyId: state => {
+                return state.currencyPreference.id;
+            }
+        },
+        actions: {
+            updateCurrencyPreference(context) {
+                axios.get('./api/v1/currencies/default')
+                    .then(response => {
+                        context.commit('setCurrencyPreference', {
+                            id: parseInt(response.data.data.id),
+                            name: response.data.data.attributes.name,
+                            symbol: response.data.data.attributes.symbol,
+                            code: response.data.data.attributes.code,
+                            decimal_places: parseInt(response.data.data.attributes.decimal_places),
+                        });
+                    }).catch(err => {
+                    console.log('Got error response.');
+                    console.error(err);
+                    context.commit('setCurrencyPreference', {
+                        id: 1,
+                        name: 'Euro',
+                        symbol: '€',
+                        code: 'EUR',
+                        decimal_places: 2
+                    });
+                });
+
+            }
+        }
+    }
+);