Rebuild new frontend.

frontend/src/components/accounts/Index.vue

@@ -102,7 +102,7 @@ export default {
       accounts: []
     }
   },
-  mounted() {
+  created() {
     console.log('mounted account list.');
     axios.get('./api/v1/accounts?type=' + this.$props.accountTypes)
         .then(response => {

frontend/src/components/dashboard/BudgetLimitRow.vue

@@ -93,6 +93,14 @@
 <script>
 export default {
   name: "BudgetLimitRow",
+  mounted() {
+    this.locale = localStorage.locale ?? 'en-US';
+  },
+  data() {
+    return {
+      locale: 'en-US',
+    }
+  },
   props: {
     budgetLimit: {
       type: Object,

frontend/src/components/dashboard/BudgetListGroup.vue

@@ -26,8 +26,8 @@
     <div class="card-body table-responsive p-0">
       <table class="table table-sm">
         <tbody>
-          <BudgetLimitRow v-bind:key="budgetLimit.id" v-for="budgetLimit in budgetLimits" :budgetLimit="budgetLimit" />
-          <BudgetRow v-bind:key="budget.id" v-for="budget in budgets" :budget="budget" />
+          <BudgetLimitRow v-bind:key="key" v-for="(budgetLimit, key) in budgetLimits" :budgetLimit="budgetLimit" />
+          <BudgetRow v-bind:key="key" v-for="(budget, key) in budgets" :budget="budget" />
         </tbody>
       </table>
     </div>

frontend/src/components/dashboard/BudgetRow.vue

@@ -34,6 +34,14 @@
 <script>
 export default {
   name: "BudgetRow",
+  mounted() {
+    this.locale = localStorage.locale ?? 'en-US';
+  },
+  data() {
+    return {
+      locale: 'en-US',
+    }
+  },
   props: {
     budget: {
       type: Object,

frontend/src/components/dashboard/Dashboard.vue

@@ -21,6 +21,9 @@
 <template>
   <div>
 
+
+
+
     <top-boxes/>
     <div class="row">
       <div class="col">
@@ -35,12 +38,11 @@
       </div>
     </div>
 
-
-    <!--
-      <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
-          <main-category />
+    <div class="row">
+      <div class="col">
+        <main-category-list />
       </div>
-      -->
+    </div>
 
     <!--
     <div class="row">
@@ -67,7 +69,7 @@
 <script>
 export default {
   name: "Dashboard",
-  mounted() {
+  created() {
     if (!localStorage.currencyPreference) {
       this.getCurrencyPreference();
     }

frontend/src/components/dashboard/MainAccount.vue

@@ -19,40 +19,40 @@
   -->
 
 <template>
-    <div class="card">
-        <div class="card-header">
-          <h3 class="card-title">{{ $t('firefly.yourAccounts') }}</h3>
-        </div>
-        <div class="card-body">
-            <div>
-                <canvas id="mainAccountsChart" style="min-height: 400px; height: 400px; max-height: 400px; max-width: 100%;"></canvas>
-            </div>
-        </div>
-        <div class="card-footer">
-            <a href="./accounts/asset" class="btn btn-default button-sm"><i class="far fa-money-bill-alt"></i> {{ $t('firefly.go_to_asset_accounts') }}</a>
-        </div>
+  <div class="card">
+    <div class="card-header">
+      <h3 class="card-title">{{ $t('firefly.yourAccounts') }}</h3>
     </div>
+    <div class="card-body">
+      <div>
+        <canvas id="mainAccountsChart" style="min-height: 400px; height: 400px; max-height: 400px; max-width: 100%;"></canvas>
+      </div>
+    </div>
+    <div class="card-footer">
+      <a href="./accounts/asset" class="btn btn-default button-sm"><i class="far fa-money-bill-alt"></i> {{ $t('firefly.go_to_asset_accounts') }}</a>
+    </div>
+  </div>
 </template>
 
 <script>
-    import DataConverter from "../charts/DataConverter";
-    import DefaultLineOptions from "../charts/DefaultLineOptions";
+import DataConverter from "../charts/DataConverter";
+import DefaultLineOptions from "../charts/DefaultLineOptions";
 
-    export default {
-        name: "MainAccount",
-        mounted() {
-            axios.get('./api/v1/chart/account/overview?start=' + window.sessionStart + '&end=' + window.sessionEnd)
-                .then(response => {
+export default {
+  name: "MainAccount",
+  created() {
+    axios.get('./api/v1/chart/account/overview?start=' + window.sessionStart + '&end=' + window.sessionEnd)
+        .then(response => {
 
-                    let chartData = DataConverter.methods.convertChart(response.data);
-                    chartData = DataConverter.methods.colorizeLineData(chartData);
-                    let lineChartCanvas = $('#mainAccountsChart').get(0).getContext('2d');
-                    new Chart(lineChartCanvas, {
-                        type: 'line',
-                        data: chartData,
-                        options: DefaultLineOptions.methods.getDefaultOptions()
-                    });
-                });
-        },
-    }
+          let chartData = DataConverter.methods.convertChart(response.data);
+          chartData = DataConverter.methods.colorizeLineData(chartData);
+          let lineChartCanvas = $('#mainAccountsChart').get(0).getContext('2d');
+          new Chart(lineChartCanvas, {
+            type: 'line',
+            data: chartData,
+            options: DefaultLineOptions.methods.getDefaultOptions()
+          });
+        });
+  },
+}
 </script>

frontend/src/components/dashboard/MainAccountList.vue

@@ -44,7 +44,7 @@ export default {
       accounts: [],
     }
   },
-  mounted() {
+  created() {
     axios.get('./api/v1/preferences/frontpageAccounts')
         .then(response => {
                 this.loadAccounts(response);

frontend/src/components/dashboard/MainBillsList.vue

@@ -57,7 +57,7 @@
 
     export default {
         name: "MainBillsList",
-        mounted() {
+      created() {
             axios.get('./api/v1/bills?start=' + window.sessionStart + '&end=' + window.sessionEnd)
                 .then(response => {
                           this.loadBills(response.data.data);

frontend/src/components/dashboard/MainBudget.vue

@@ -39,7 +39,7 @@
     import DataConverter from "../charts/DataConverter";
     export default {
         name: "MainBudget",
-        mounted() {
+      created() {
             axios.get('./api/v1/chart/budget/overview?start=' + window.sessionStart + '&end=' + window.sessionEnd)
                 .then(response => {
                     let chartData = DataConverter.methods.convertChart(response.data);

frontend/src/components/dashboard/MainBudgetList.vue

@@ -78,28 +78,23 @@ export default {
       locale: 'en-US',
     }
   },
-  mounted() {
+  created() {
     this.locale = localStorage.locale ?? 'en-US';
-    console.log('Mounted.')
     this.collectData();
   },
   methods:
       {
         collectData() {
-          console.log('collectData');
           this.getBudgets();
         },
         getBudgets() {
-          console.log('getBudgets()');
           axios.get('./api/v1/budgets?start=' + window.sessionStart + '&end=' + window.sessionEnd)
               .then(response => {
-                      console.log('Go to parseBudgets');
                       this.parseBudgets(response.data);
                     }
               );
         },
         parseBudgets(data) {
-          console.log('in parseBudgets');
           for (let key in data.data) {
             if (data.data.hasOwnProperty(key) && /^0$|^[1-9]\d*$/.test(key) && key <= 4294967294) {
               let current = data.data[key];
@@ -120,23 +115,18 @@ export default {
 
             }
           }
-          console.log('Found ' + this.rawBudgets.length + ' budgets + expense info.');
           this.getBudgetLimits();
         },
 
 
         getBudgetLimits() {
-          console.log('getBudgetLimits');
           axios.get('./api/v1/budgets/limits?start=' + window.sessionStart + '&end=' + window.sessionEnd)
               .then(response => {
-                      console.log('Go to parse budget limits.');
                       this.parseBudgetLimits(response.data);
                     }
               );
         },
         parseBudgetLimits(data) {
-          console.log('parsebudgetlimits');
-
           for (let key in data.included) {
             if (data.included.hasOwnProperty(key) && /^0$|^[1-9]\d*$/.test(key) && key <= 4294967294) {
               this.budgets[data.included[key].id] =
@@ -225,7 +215,6 @@ export default {
           //     };
           //
           //
-          //     console.log(data.data[key]);
           //
           //     let period = data.data[key].attributes.period ?? 'other';
           //     this.budgetLimits[period].push(obj);
@@ -234,19 +223,14 @@ export default {
 
         },
         filterBudgets(budgetId, currencyId) {
-          //console.log('filterBudgets(' + budgetId + ',' + currencyId + ')');
           for (let key in this.rawBudgets) {
             if (this.rawBudgets.hasOwnProperty(key) && /^0$|^[1-9]\d*$/.test(key) && key <= 4294967294) {
               if (this.rawBudgets[key].currency_id === currencyId && this.rawBudgets[key].id === budgetId) {
-                //console.log('found! (' + budgetId + ',' + currencyId + ')');
                 this.rawBudgets.splice(key, 1);
               }
             }
           }
-          console.log('Budgets to display left: ' + this.rawBudgets.length);
-
         }
-
       }
 }
 </script>

frontend/src/components/dashboard/MainCategory.vue

@@ -39,7 +39,7 @@
     import DataConverter from "../charts/DataConverter";
     export default {
         name: "MainCategory",
-        mounted() {
+      created() {
             axios.get('./api/v1/chart/category/overview?start=' + window.sessionStart + '&end=' + window.sessionEnd)
                 .then(response => {
                     let chartData = DataConverter.methods.convertChart(response.data);

frontend/src/components/dashboard/MainCategoryList.vue

@@ -0,0 +1,174 @@
+<!--
+  - MainCategoryList.vue
+  - 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/>.
+  -->
+
+<template>
+  <div class="card">
+    <div class="card-header">
+      <h3 class="card-title">{{ $t('firefly.categories') }}</h3>
+    </div>
+    <div class="card-body table-responsive p-0">
+      <table class="table table-sm">
+        <tbody>
+        <tr v-for="category in sortedList">
+          <td style="width:20%;">
+            <a :href="'./categories/show/' + category.id">{{ category.name }}</a>
+            <!--<p>Spent: {{ category.spentPct }}</p>
+            <p>earned: {{ category.earnedPct }}</p>
+            -->
+          </td>
+          <td class="align-middle">
+            <!-- SPENT -->
+            <div class="progress" v-if="category.spentPct > 0">
+              <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" :aria-valuenow="category.spentPct"
+                   :style="{ width: category.spentPct  + '%'}" aria-valuemin="0"
+                   aria-valuemax="100">
+                <span v-if="category.spentPct > 20">
+                  {{ Intl.NumberFormat(locale, {style: 'currency', currency: category.currency_code}).format(category.spent) }}
+                </span>
+              </div>
+              <span v-if="category.spentPct <= 20">&nbsp;
+              {{ Intl.NumberFormat(locale, {style: 'currency', currency: category.currency_code}).format(category.spent) }}
+              </span>
+            </div>
+
+            <!-- EARNED -->
+            <div class="progress justify-content-end" v-if="category.earnedPct > 0" title="hello2">
+              <span v-if="category.earnedPct <= 20">
+                {{ Intl.NumberFormat(locale, {style: 'currency', currency: category.currency_code}).format(category.earned) }}
+                &nbsp;</span>
+              <div class="progress-bar progress-bar-striped bg-success" role="progressbar" :aria-valuenow="category.earnedPct" :style="{ width: category.earnedPct  + '%'}" aria-valuemin="0"
+                   aria-valuemax="100" title="hello">
+                <span v-if="category.earnedPct > 20">
+                  {{ Intl.NumberFormat(locale, {style: 'currency', currency: category.currency_code}).format(category.earned) }}
+                </span>
+              </div>
+            </div>
+
+          </td>
+        </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "MainCategoryList",
+
+  mounted() {
+    this.locale = localStorage.locale ?? 'en-US';
+    this.getCategories();
+  },
+  data() {
+    return {
+      locale: 'en-US',
+      categories: [],
+      sortedList: [],
+      spent: 0,
+      earned: 0
+    }
+  },
+  methods:
+      {
+        getCategories() {
+          axios.get('./api/v1/categories?start=' + window.sessionStart + '&end=' + window.sessionEnd)
+              .then(response => {
+                      this.parseCategories(response.data);
+                    }
+              );
+        },
+        parseCategories(data) {
+          for (let key in data.data) {
+            if (data.data.hasOwnProperty(key) && /^0$|^[1-9]\d*$/.test(key) && key <= 4294967294) {
+              let current = data.data[key];
+              let entryKey = null;
+              let categoryId = parseInt(current.id);
+
+              // loop spent info:
+              for (let subKey in current.attributes.spent) {
+                if (current.attributes.spent.hasOwnProperty(subKey) && /^0$|^[1-9]\d*$/.test(subKey) && subKey <= 4294967294) {
+                  let spentData = current.attributes.spent[subKey];
+                  entryKey = spentData.currency_id.toString() + '-' + current.id.toString();
+
+                  // does the categories list thing have this combo? if not, create it.
+                  this.categories[entryKey] = this.categories[entryKey] ??
+                      {
+                        id: categoryId,
+                        name: current.attributes.name,
+                        currency_code: spentData.currency_code,
+                        currency_symbol: spentData.currency_symbol,
+                        spent: 0,
+                        earned: 0,
+                        spentPct: 0,
+                        earnedPct: 0,
+                      };
+                  this.categories[entryKey].spent = parseFloat(spentData.sum);
+                  this.spent = parseFloat(spentData.sum) < this.spent ? parseFloat(spentData.sum) : this.spent;
+                }
+              }
+
+              // loop earned info
+              for (let subKey in current.attributes.earned) {
+                if (current.attributes.earned.hasOwnProperty(subKey) && /^0$|^[1-9]\d*$/.test(subKey) && subKey <= 4294967294) {
+                  let earnedData = current.attributes.earned[subKey];
+                  entryKey = earnedData.currency_id.toString() + '-' + current.id.toString();
+
+                  // does the categories list thing have this combo? if not, create it.
+                  this.categories[entryKey] = this.categories[entryKey] ??
+                      {
+                        id: categoryId,
+                        name: current.attributes.name,
+                        currency_code: earnedData.currency_code,
+                        currency_symbol: earnedData.currency_symbol,
+                        spent: 0,
+                        earned: 0,
+                        spentPct: 0,
+                        earnedPct: 0,
+                      };
+                  this.categories[entryKey].earned = parseFloat(earnedData.sum);
+                  this.earned = parseFloat(earnedData.sum) > this.earned ? parseFloat(earnedData.sum) : this.earned;
+                }
+              }
+            }
+          }
+          this.sortCategories();
+        },
+        sortCategories() {
+
+          this.categories.sort(function (one, two) {
+            return (one.spent + one.earned) - (two.spent + two.earned);
+          });
+          for (let cat in this.categories) {
+            if (this.categories.hasOwnProperty(cat)) {
+              let current = this.categories[cat];
+              current.spentPct = (current.spent / this.spent) * 100;
+              current.earnedPct = (current.earned / this.earned) * 100;
+              this.sortedList.push(current);
+            }
+          }
+        }
+      }
+}
+</script>
+
+<style scoped>
+
+</style>

frontend/src/components/dashboard/MainCredit.vue

@@ -42,7 +42,7 @@
                 transactions: []
             }
         },
-        mounted() {
+      created() {
             axios.get('./api/v1/transactions?type=deposit&limit=10&start=' + window.sessionStart + '&end=' + window.sessionEnd)
                 .then(response => {
                           this.transactions = response.data.data;

frontend/src/components/dashboard/MainDebit.vue

@@ -41,7 +41,7 @@
 
     export default {
         name: "MainDebit",
-        mounted() {
+      created() {
             axios.get('./api/v1/chart/account/expense?start=' + window.sessionStart + '&end=' + window.sessionEnd)
                 .then(response => {
                     let chartData = DataConverter.methods.convertChart(response.data);

frontend/src/components/dashboard/MainPiggyList.vue

@@ -66,7 +66,7 @@
 <script>
     export default {
         name: "MainPiggyList",
-        mounted() {
+      created() {
             axios.get('./api/v1/piggy_banks')
                 .then(response => {
                           this.loadPiggyBanks(response.data.data);

frontend/src/components/dashboard/TopBoxes.vue

@@ -168,7 +168,7 @@ export default {
       return this.filterOnNotCurrency(this.netWorth);
     },
   },
-  mounted() {
+  created() {
     this.prepareComponent();
     this.currencyPreference = localStorage.currencyPreference ? JSON.parse(localStorage.currencyPreference) : {};
   },