diff --git a/frontend/src/components/accounts/Show.vue b/frontend/src/components/accounts/Show.vue index 9ff81bcd45..9830b58266 100644 --- a/frontend/src/components/accounts/Show.vue +++ b/frontend/src/components/accounts/Show.vue @@ -53,22 +53,17 @@ -
-
-
-
-

- Title -

-
-
- - -
-
-
-
+ +
@@ -105,6 +100,9 @@ export default { accountId: 0, transactions: [], ready: false, + loading: true, + total: 0, + sortDesc: false, currentPage: 1, perPage: 51, locale: 'en-US' diff --git a/frontend/src/components/transactions/Index.vue b/frontend/src/components/transactions/Index.vue index 79c730c7d6..6746611b7f 100644 --- a/frontend/src/components/transactions/Index.vue +++ b/frontend/src/components/transactions/Index.vue @@ -36,123 +36,14 @@
-
-
- -
-
- -
-
-
-
-
-
- - - - - - - - - - - -
-
- {{ $t('firefly.create_new_transaction') }} -
-
-
-
-
-
- -
-
- -
-
+
@@ -176,9 +67,11 @@ import sub from "date-fns/sub"; import startOfMonth from "date-fns/startOfMonth"; import endOfMonth from "date-fns/endOfMonth"; import {configureAxios} from "../../shared/forageStore"; +import TransactionListLarge from "./TransactionListLarge"; export default { name: "Index", + components: {TransactionListLarge}, data() { return { transactions: [], @@ -187,7 +80,6 @@ export default { downloaded: false, loading: false, ready: false, - fields: [], currentPage: 1, perPage: 5, total: 1, @@ -244,7 +136,6 @@ export default { let params = new URLSearchParams(window.location.search); this.currentPage = params.get('page') ? parseInt(params.get('page')) : 1; - this.updateFieldList(); this.ready = true; // make object thing: @@ -268,18 +159,6 @@ export default { }, methods: { ...mapMutations('root', ['refreshCacheKey',]), - updateFieldList: function () { - this.fields = [ - {key: 'type', label: ' ', sortable: false}, - {key: 'description', label: this.$t('list.description'), sortable: true}, - {key: 'amount', label: this.$t('list.amount'), sortable: true}, - {key: 'date', label: this.$t('list.date'), sortable: true}, - {key: 'source_account', label: this.$t('list.source_account'), sortable: true}, - {key: 'destination_account', label: this.$t('list.destination_account'), sortable: true}, - {key: 'category_name', label: this.$t('list.category'), sortable: true}, - {key: 'menu', label: ' ', sortable: false}, - ]; - }, newCacheKey: function () { this.refreshCacheKey(); this.downloaded = false; @@ -323,14 +202,13 @@ export default { let endStr = format(this.end, 'y-MM-dd'); // console.log(this.urlEnd); // console.log(this.urlStart); - if(null !== this.urlEnd && null !== this.urlStart) { + if (null !== this.urlEnd && null !== this.urlStart) { startStr = format(this.urlStart, 'y-MM-dd'); endStr = format(this.urlEnd, 'y-MM-dd'); } api.get('./api/v1/transactions?type=' + this.type + '&page=' + page + "&start=" + startStr + "&end=" + endStr + '&cache=' + this.cacheKey) .then(response => { - //let currentPage = parseInt(response.data.meta.pagination.current_page); //let totalPages = parseInt(response.data.meta.pagination.total_pages); this.total = parseInt(response.data.meta.pagination.total); @@ -417,51 +295,7 @@ export default { } this.createTransactionRows(); }, - tableSortCompare: function (aRow, bRow, key, sortDesc, formatter, compareOptions, compareLocale) { - let a = aRow[key] - let b = bRow[key] - if (aRow.id === bRow.id) { - // Order split transactions normally when compared to each other, except always put the header first - if (aRow.split_parent === null) { - return sortDesc ? 1 : -1; - } else if (bRow.split_parent === null) { - return sortDesc ? -1 : 1; - } - } else { - // Sort split transactions based on their parent when compared to other transactions - if (aRow.split && aRow.split_parent !== null) { - a = aRow.split_parent[key] - } - if (bRow.split && bRow.split_parent !== null) { - b = bRow.split_parent[key] - } - } - - if ( - (typeof a === 'number' && typeof b === 'number') || - (a instanceof Date && b instanceof Date) - ) { - // If both compared fields are native numbers or both are native dates - return a < b ? -1 : a > b ? 1 : 0 - } else { - // Otherwise stringify the field data and use String.prototype.localeCompare - return toString(a).localeCompare(toString(b), compareLocale, compareOptions) - } - - function toString(value) { - if (value === null || typeof value === 'undefined') { - return '' - } else if (value instanceof Object) { - return Object.keys(value) - .sort() - .map(key => toString(value[key])) - .join(' ') - } else { - return String(value) - } - } - }, }, } \ No newline at end of file diff --git a/frontend/src/components/transactions/TransactionListLarge.vue b/frontend/src/components/transactions/TransactionListLarge.vue index 8d169c6bf4..5162aecff4 100644 --- a/frontend/src/components/transactions/TransactionListLarge.vue +++ b/frontend/src/components/transactions/TransactionListLarge.vue @@ -19,84 +19,366 @@ --> - diff --git a/frontend/src/components/transactions/TransactionListSmall.vue b/frontend/src/components/transactions/TransactionListSmall.vue deleted file mode 100644 index 74df4e7a4a..0000000000 --- a/frontend/src/components/transactions/TransactionListSmall.vue +++ /dev/null @@ -1,88 +0,0 @@ - - - - - - diff --git a/frontend/src/pages/transactions/index.js b/frontend/src/pages/transactions/index.js index c0d840c60e..a8aad16e9b 100644 --- a/frontend/src/pages/transactions/index.js +++ b/frontend/src/pages/transactions/index.js @@ -23,16 +23,12 @@ require('../../bootstrap'); import Vue from "vue"; import store from "../../components/store"; import Index from "../../components/transactions/Index"; -import {BPagination, BTable} from 'bootstrap-vue'; import Calendar from "../../components/dashboard/Calendar"; // i18n let i18n = require('../../i18n'); let props = {}; -Vue.component('b-table', BTable); -Vue.component('b-pagination', BPagination); - const app = new Vue({ i18n, store,