Update frontend v2

frontend/src/components/accounts/Index.vue

@@ -19,15 +19,119 @@
   -->
 
 <template>
-    <div>
-        <router-view></router-view>
+  <div class="row">
+    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
+      <div class="card">
+        <div class="card-header">
+          <h3 class="card-title">Title thing</h3>
+          <div class="card-tools">
+            <div class="input-group input-group-sm" style="width: 150px;">
+              <input type="text" name="table_search" class="form-control float-right" placeholder="Search">
+
+              <div class="input-group-append">
+                <button type="submit" class="btn btn-default">
+                  <i class="fas fa-search"></i>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="card-body p-0">
+          <table class="table table-sm table-striped">
+            <caption style="display:none;">{{ $t('list.name') }}</caption>
+            <thead>
+            <tr>
+              <th scope="col">&nbsp;</th>
+              <th scope="col">{{ $t('list.name') }}</th>
+              <th scope="col" v-if="'asset' === $props.accountTypes">{{ $t('list.role') }}</th>
+              <th scope="col">{{ $t('list.iban') }}</th>
+              <th scope="col" style="text-align: right;">{{ $t('list.currentBalance') }}</th>
+              <th scope="col">{{ $t('list.balanceDiff') }}</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr v-for="account in accounts">
+              <td>
+                <div class="btn-group btn-group-xs">
+                  <a :href="'./accounts/edit/' + account.id" class="btn btn-xs btn-default"><i class="fa fas fa-pencil-alt"></i></a>
+                  <a :href="'./accounts/delete/' + account.id" class="btn btn-xs btn-danger"><i class="fa far fa-trash"></i></a>
+                </div>
+              </td>
+              <td>{{ account.attributes.name }}
+                <!--
+                <router-link :to="{ name: 'accounts.show', params: { id: account.id }}"
+                             :title="account.attributes.name">{{ account.attributes.name }}
+                </router-link>
+                -->
+              </td>
+              <td v-if="'asset' === $props.accountTypes">
+                {{ account.attributes.account_role }}
+              </td>
+              <td>
+                {{ account.attributes.iban }}
+              </td>
+              <td style="text-align: right;">
+                {{
+                  Intl.NumberFormat('en-US', {
+                    style: 'currency', currency:
+                    account.attributes.currency_code
+                  }).format(account.attributes.current_balance)
+                }}
+              </td>
+              <td>diff</td>
+            </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="card-footer">
+          Footer stuff.
+        </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
-    export default {
-        name: "Index"
+export default {
+  name: "Index",
+  props: {
+    accountTypes: String
+  },
+  data() {
+    return {
+      accounts: []
     }
+  },
+  mounted() {
+    console.log('mounted account list.');
+    axios.get('./api/v1/accounts?type=' + this.$props.accountTypes)
+        .then(response => {
+                this.loadAccounts(response.data.data);
+              }
+        );
+  },
+  methods: {
+    loadAccounts(data) {
+      for (let key in data) {
+        if (data.hasOwnProperty(key) && /^0$|^[1-9]\d*$/.test(key) && key <= 4294967294) {
+          let acct = data[key];
+
+          // some conversions here.
+          if ('asset' === acct.attributes.type && null !== acct.attributes.account_role) {
+            acct.attributes.account_role = this.$t('firefly.account_role_' + acct.attributes.account_role);
+          }
+          if ('asset' === acct.attributes.type && null === acct.attributes.account_role) {
+            acct.attributes.account_role = this.$t('firefly.Default asset account');
+          }
+          if (null === acct.attributes.iban) {
+            acct.attributes.iban = acct.attributes.account_number;
+          }
+          this.accounts.push(acct);
+        }
+      }
+    },
+  }
+}
 </script>
 
 <style scoped>

frontend/src/components/dashboard/TopBoxes.vue

@@ -26,7 +26,7 @@
 
                 <div class="info-box-content">
                     <span class="info-box-text">{{ $t("firefly.balance") }}</span>
-                    <!-- dont take the first, take default currency OR first -->
+                    <!-- TODO dont take the first, take default currency OR first -->
                     <span class="info-box-number" v-if="balances.length > 0">{{ balances[0].value_parsed }}</span>
 
                     <div class="progress bg-info">
@@ -45,14 +45,14 @@
 
                 <div class="info-box-content">
                     <span class="info-box-text"><span>{{ $t('firefly.bills_to_pay') }}</span></span>
-                    <!-- dont take the first, take default currency OR first -->
+                    <!-- TODO dont take the first, take default currency OR first -->
                     <span class="info-box-number" v-if="1 === billsUnpaid.length && billsPaid.length > 0">{{ billsUnpaid[0].value_parsed }}</span>
 
                     <div class="progress bg-teal">
                         <div class="progress-bar" style="width: 0"></div>
                     </div>
                     <span class="progress-description">
-                        <!-- dont take the first, take default currency OR first -->
+                        <!-- TODO dont take the first, take default currency OR first -->
                         <span v-if="1 === billsUnpaid.length && 1 === billsPaid.length">{{ $t('firefly.paid') }}: {{ billsPaid[0].value_parsed }}</span>
                         <span v-if="billsUnpaid.length > 1">
                             <span v-for="(bill, index) in billsUnpaid" :key="bill.key">
@@ -76,15 +76,15 @@
 
                 <div class="info-box-content">
                     <span class="info-box-text"><span>{{ $t('firefly.left_to_spend') }}</span></span>
-                    <!-- dont take the first, take default currency OR first -->
-                    <!-- change color if negative -->
+                    <!-- TODO dont take the first, take default currency OR first -->
+                    <!-- TODO change color if negative -->
                     <span class="info-box-number" v-if="leftToSpend.length > 0">{{ leftToSpend[0].value_parsed }}</span>
 
                     <div class="progress bg-success">
                         <div class="progress-bar" style="width: 0"></div>
                     </div>
                     <span class="progress-description">
-                        <!-- list all EXCEPT default currency -->
+                        <!-- TODO list all EXCEPT default currency -->
                            <span v-for="(spent, index) in leftToSpend" :key="spent.key">
                                 {{ spent.value_parsed }}<span v-if="index+1 !== leftToSpend.length">, </span>
                             </span>
@@ -100,16 +100,16 @@
 
                 <div class="info-box-content">
                     <span class="info-box-text"><span>{{ $t('firefly.net_worth') }}</span></span>
-                    <!-- dont take the first, take default currency OR first -->
+                    <!-- TODO dont take the first, take default currency OR first -->
                     <span class="info-box-number" v-if="netWorth.length > 0">{{ netWorth[0].value_parsed }}</span>
 
                     <div class="progress bg-success">
                         <div class="progress-bar" style="width: 0"></div>
                     </div>
                     <span class="progress-description">
-                        <!-- list all EXCEPT default currency -->
+                        <!-- TODO list all EXCEPT default currency -->
                            <span v-for="(net, index) in netWorth" :key="net.key">
-                                {{ net.value_parsed }}<span v-if="index+1 !== net.length">, </span>
+                                {{ net.value_parsed }}<span v-if="index+1 !== netWorth.length">, </span>
                             </span>
                     </span>
                 </div>

frontend/src/components/new-user/Index.vue

@@ -0,0 +1,113 @@
+<!--
+  - Index.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="row">
+    <div class="col">
+          <div id="accordion">
+            <!-- we are adding the .class so bootstrap.js collapse plugin detects it -->
+            <div class="card card-primary">
+              <div class="card-header">
+                <h4 class="card-title">
+                  <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
+                    Create new accounts
+                  </a>
+                </h4>
+              </div>
+              <div id="collapseOne" class="panel-collapse collapse show">
+                <div class="card-body">
+                  <div class="row">
+                    <div class="col">
+                      <p>Explain</p>
+                    </div>
+                  </div>
+                  <div class="row">
+                    <div class="col-lg-4">
+                      A
+                    </div>
+                    <div class="col-lg-8">
+                      B
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="card card-secondary">
+              <div class="card-header">
+                <h4 class="card-title">
+                  <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
+                    Collapsible Group Danger
+                  </a>
+                </h4>
+              </div>
+              <div id="collapseTwo" class="panel-collapse collapse">
+                <div class="card-body">
+                  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
+                  3
+                  wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt
+                  laborum
+                  eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee
+                  nulla
+                  assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
+                  nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
+                  beer
+                  farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
+                  labore sustainable VHS.
+                </div>
+              </div>
+            </div>
+            <div class="card card-secondary">
+              <div class="card-header">
+                <h4 class="card-title">
+                  <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
+                    Collapsible Group Success
+                  </a>
+                </h4>
+              </div>
+              <div id="collapseThree" class="panel-collapse collapse">
+                <div class="card-body">
+                  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
+                  3
+                  wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt
+                  laborum
+                  eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee
+                  nulla
+                  assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
+                  nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
+                  beer
+                  farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
+                  labore sustainable VHS.
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+</template>
+
+<script>
+export default {
+  name: "Index"
+}
+</script>
+
+<style scoped>
+
+</style>

frontend/src/pages/accounts/index.js

@@ -20,36 +20,13 @@
 
 require('../../bootstrap');
 
-import VueRouter from 'vue-router';
 import Index from "../../components/accounts/Index";
 
-const routes = [
-    {path: '/', component: Index},
-    // maybe "create" and "edit" in component.
-]
-
-// 3. Create the router instance and pass the `routes` option
-// You can pass in additional options here, but let's
-// keep it simple for now.
-const router = new VueRouter({
-                                 mode: 'history',
-                                 routes // short for `routes: routes`
-                             })
-
 // i18n
 let i18n = require('../../i18n');
 
 let props = {};
-// new Vue({router,
-//             i18n,
-//             el: "#accounts",
-//             render: (createElement) => {
-//                 return createElement(List, { props: props });
-//             },
-//         });
-Vue.use(VueRouter);          // <== very important
 new Vue({
-            router,
             i18n,
             render(createElement) {
                 return createElement(Index, {props: props});

frontend/src/pages/accounts/show.js

@@ -0,0 +1,40 @@
+/*
+ * 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/>.
+ */
+
+
+require('../../bootstrap');
+
+import Show from "../../components/accounts/Show";
+
+// i18n
+let i18n = require('../../i18n');
+
+// get page name?
+
+
+let props = {
+
+};
+new Vue({
+            i18n,
+            render(createElement) {
+                return createElement(Show, {props: props});
+            }
+        }).$mount('#accounts_show');

frontend/src/pages/new-user/index.js

@@ -0,0 +1,34 @@
+/*
+ * 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/>.
+ */
+
+require('../../bootstrap');
+
+import Index from "../../components/new-user/Index";
+
+// i18n
+let i18n = require('../../i18n');
+
+let props = {};
+new Vue({
+            i18n,
+            render(createElement) {
+                return createElement(Index, {props: props});
+            }
+        }).$mount('#newuser');