Initial set of pages.

frontend/src/pages/reports/Default.vue

@@ -0,0 +1,15 @@
+<template>
+<q-page>
+  Here be default report.
+</q-page>
+</template>
+
+<script>
+export default {
+  name: "Default"
+}
+</script>
+
+<style scoped>
+
+</style>

frontend/src/pages/reports/Index.vue

@@ -0,0 +1,136 @@
+<template>
+  <q-page>
+    <div class="row q-mx-md">
+      <div class="col-4">
+        <q-card bordered>
+          <q-card-section>
+            <div class="text-h6">Reports</div>
+          </q-card-section>
+          <q-card-section>
+            <q-select
+              bottom-slots
+              outlined
+              v-model="type"
+              emit-value class="q-pr-xs"
+              map-options :options="types" label="Report type"/>
+
+            <q-select
+              bottom-slots
+              outlined
+              :disable="loading"
+              v-model="selectedAccounts"
+              class="q-pr-xs"
+              multiple
+              emit-value
+              use-chips
+              map-options :options="accounts" label="Included accounts"/>
+            <q-input
+              bottom-slots
+              type="date" v-model="start_date" :label="$t('form.start_date')"
+              hint="Start date"
+              outlined/>
+            <q-input
+              bottom-slots
+              type="date" v-model="end_date" :label="$t('form.start_date')"
+              hint="Start date"
+              outlined/>
+          </q-card-section>
+          <q-card-actions>
+            <q-btn :disable="loading || selectedAccounts.length < 1" @click="submit" color="primary" label="View report"/>
+          </q-card-actions>
+        </q-card>
+      </div>
+    </div>
+  </q-page>
+</template>
+
+<script>
+import List from "../../api/accounts/list";
+import {startOfMonth} from "date-fns";
+import {format} from "date-fns";
+import {endOfMonth} from "date-fns";
+export default {
+  name: 'Index',
+  created() {
+    this.getAccounts();
+    this.start_date = format(startOfMonth(new Date), 'yyyy-MM-dd');
+    this.end_date = format(endOfMonth(new Date), 'yyyy-MM-dd');
+  },
+  data() {
+    return {
+      // is loading:
+      loading: false,
+
+      // report settings
+      type: 'default',
+      selectedAccounts: [],
+      accounts: [],
+      start_date: '',
+      end_date: '',
+
+      types: [
+        {value: 'default', label: 'Default financial report'},
+        // value="audit">Transaction history overview (audit)
+        // value="budget">Budget report</option>
+        // value="category">Category report</option>
+        // value="tag">Tag report</option>
+        // value="double">Expense/revenue account report</option> // to be dropped
+      ],
+    }
+  },
+  methods: {
+    submit: function() {
+      let start = this.start_date.replace('-','');
+      let end = this.end_date.replace('-','');
+      let accounts = this.selectedAccounts.join(',');
+      if('default' === this.type) {
+        this.$router.push(
+          {name: 'reports.default',
+            params:
+              {
+                accounts: accounts,
+                start: start,
+                end: end
+              }
+          }
+          );
+      }
+    },
+    // duplicate function
+    getAccounts: function () {
+      this.loading = true;
+      this.getPage(1);
+    },
+    // duplicate function
+    getPage: function (page) {
+      (new List).list('all', page, this.getCacheKey).then((response) => {
+        let totalPages = parseInt(response.data.meta.pagination.total_pages);
+
+        // parse these accounts:
+        for (let i in response.data.data) {
+          if (response.data.data.hasOwnProperty(i)) {
+            let account = response.data.data[i];
+            if ('liabilities' === account.attributes.type || 'asset' === account.attributes.type) {
+              this.accounts.push(
+                {
+                  value: parseInt(account.id),
+                  label: account.attributes.type + ': ' + account.attributes.name,
+                  decimal_places: parseInt(account.attributes.currency_decimal_places)
+                }
+              );
+            }
+          }
+        }
+
+        if (page < totalPages) {
+          this.getPage(page + 1);
+        }
+        if (page === totalPages) {
+          this.loading = false;
+          this.accounts.sort((a, b) => (a.label > b.label) ? 1 : ((b.label > a.label) ? -1 : 0))
+        }
+      });
+    },
+  }
+}
+</script>