Expand code.

frontend/src/api/v2/accounts/get.js

@@ -0,0 +1,47 @@
+/*
+ * get.js
+ * Copyright (c) 2022 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 Api from "src/api/v2/root/api";
+
+export default class Get extends Api {
+  constructor() {
+    super('accounts'); // call the super class constructor and pass in the name parameter
+  }
+
+  /**
+   *
+   * @param identifier
+   * @param date
+   * @returns {Promise<AxiosResponse<any>>}
+   */
+  get(identifier, date) {
+    let params = {date: date};
+    if(!date) {
+      return this.apiGet(identifier);
+    }
+    return this.apiGet(identifier, params);
+  }
+  transactions(identifier, params) {
+    if(!params) {
+      return this.apiGetTransactions(identifier);
+    }
+    return this.apiGetTransactions(identifier, params);
+  }
+}

frontend/src/api/v2/root/api.js

@@ -0,0 +1,68 @@
+/*
+ * api.js
+ * Copyright (c) 2022 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 {api} from "boot/axios";
+
+/**
+ *
+ */
+export default class Api {
+  root = '/api/v2/';
+  path = '';
+
+  constructor(path) {
+    this.path = path;
+  }
+
+  apiPath() {
+    return this.root + this.path;
+  }
+
+  apiPathWithObject(object) {
+    return this.root + this.path + '/' + object;
+  }
+
+  /**
+   *
+   * @param object
+   * @param params
+   * @returns {Promise<AxiosResponse<any>>}
+   */
+  apiGet(object, params) {
+    let url = this.apiPathWithObject(object);
+    if (params) {
+      return api.get(url, {params: params});
+    }
+    return api.get(url);
+  }
+  /**
+   *
+   * @param object
+   * @param params
+   * @returns {Promise<AxiosResponse<any>>}
+   */
+  apiGetTransactions(object, params) {
+    let url = this.apiPathWithObject(object) + '/transactions';
+    if (params) {
+      return api.get(url, {params: params});
+    }
+    return api.get(url);
+  }
+}

frontend/src/components/dashboard/TransactionList.vue

@@ -0,0 +1,105 @@
+<!--
+  - TransactionList.vue
+  - Copyright (c) 2022 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>
+    <q-card bordered>
+      <q-item>
+        <q-item-section>
+          <q-item-label><strong>{{ accountName }}</strong></q-item-label>
+        </q-item-section>
+      </q-item>
+      <q-separator/>
+      <q-item>
+        <q-card-section horizontal>
+          Content
+        </q-card-section>
+      </q-item>
+
+
+      <!-- X:  {{ accountId }} -->
+    </q-card>
+  </div>
+</template>
+
+<script>
+import Get from "../../api/v2/accounts/get";
+import {useFireflyIIIStore} from "../../stores/fireflyiii";
+import {format} from "date-fns";
+
+export default {
+  name: "TransactionList",
+  props: {
+    accountId: 0,
+  },
+  data() {
+    return {
+      store: null,
+      accountName: ''
+    }
+  },
+  mounted() {
+    this.store = useFireflyIIIStore();
+    if (0 !== this.accountId) {
+      this.getAccount();
+      // TODO this code snippet is recycled a lot.
+      // subscribe, then update:
+      this.store.$onAction(
+        ({name, $store, args, after, onError,}) => {
+          after((result) => {
+            if (name === 'setRange') {
+              this.getTransactions();
+            }
+          })
+        }
+      )
+      this.getTransactions();
+    }
+  },
+  methods: {
+    getAccount: function () {
+      (new Get).get(this.accountId).then((response) => this.parseAccount(response.data));
+    },
+    parseAccount: function (data) {
+      this.accountName = data.data.attributes.name;
+    },
+    getTransactions: function () {
+      if (null !== this.store.getRange.start && null !== this.store.getRange.end) {
+        const start = new Date(this.store.getRange.start);
+        const end = new Date(this.store.getRange.end);
+        let startStr = format(start, 'y-MM-dd');
+        let endStr = format(end, 'y-MM-dd');
+        (new Get).transactions(this.accountId, {
+          start: startStr,
+          end: endStr
+        }).then((response) => this.parseTransactions(response.data));
+      }
+    },
+    parseTransactions: function () {
+
+    }
+  },
+
+}
+</script>
+
+<style scoped>
+
+</style>

frontend/src/components/dashboard/TransactionLists.vue

@@ -19,15 +19,42 @@
   -->
 
 <template>
-
+  <div class="row">
+    <div class="col q-mr-sm" v-for="(account, index) in accounts">
+      <TransactionList :account-id="account" />
+    </div>
+  </div>
 </template>
 
 <script>
+import Preferences from "../../api/v2/preferences";
+import {defineAsyncComponent} from "vue";
+
 export default {
-  name: "TransactionLists"
+  name: "TransactionLists",
+  components: {
+    TransactionList: defineAsyncComponent(() => import('./TransactionList.vue')),
+  },
+  data() {
+    return {
+      accounts: [],
+    }
+  },
+  mounted() {
+    this.getAccounts();
+  },
+  methods: {
+    getAccounts: function() {
+      (new Preferences).get('frontpageAccounts').then((response) => this.parseAccounts(response.data));
+    },
+    parseAccounts: function(data) {
+      const content = data.data.attributes.data;
+      for(let i in content) {
+        if(content.hasOwnProperty(i)) {
+          this.accounts.push(content[i]);
+        }
+      }
+    }
+  },
 }
 </script>
-
-<style scoped>
-
-</style>

frontend/src/pages/dashboard/Dashboard.vue

@@ -89,12 +89,11 @@
 
 <script>
 import {defineAsyncComponent} from "vue";
-import TransactionLists from "../../components/dashboard/TransactionLists";
 
 export default {
   name: "Dashboard",
   components: {
-    TransactionLists,
+    TransactionLists: defineAsyncComponent(() => import("../../components/dashboard/TransactionLists.vue")),
     AccountChart: defineAsyncComponent(() => import('../../components/dashboard/AccountChart.vue')),
     NetWorthInsightBox: defineAsyncComponent(() => import('../../components/dashboard/NetWorthInsightBox.vue')),
     BillInsightBox: defineAsyncComponent(() => import('../../components/dashboard/BillInsightBox.vue')),