Partial impl for #5142

This commit is contained in:
James Cole 2021-10-02 14:57:20 +02:00
parent eaeb1f99c6
commit 1a1ff2dc44
No known key found for this signature in database
GPG Key ID: BDE6667570EADBD5
3 changed files with 112 additions and 84 deletions

View File

@ -22,7 +22,8 @@
<div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<a href="./subscriptions/create" class="btn btn-sm mb-2 float-right btn-success"><span class="fas fa-plus"></span> {{ $t('firefly.create_new_bill')
<a href="./subscriptions/create" class="btn btn-sm mb-2 float-right btn-success"><span class="fas fa-plus"></span> {{
$t('firefly.create_new_bill')
}}</a>
<button @click="newCacheKey" class="btn btn-sm mb-2 mr-2 float-right btn-info"><span class="fas fa-sync"></span></button>
</div>
@ -49,7 +50,7 @@
<small v-if="true === data.item.active && 0 === data.item.skip">{{ $t('firefly.bill_repeats_' + data.item.repeat_freq) }}</small>
<small v-if="true === data.item.active && 1 === data.item.skip">{{ $t('firefly.bill_repeats_' + data.item.repeat_freq + '_other') }}</small>
<small v-if="true === data.item.active && data.item.skip > 1">{{
$t('firefly.bill_repeats_' + data.item.repeat_freq + '_skip', {skip: data.item.skip + 1})
$t('firefly.bill_repeats_' + data.item.repeat_freq + '_skip', {skip: data.item.skip + 1})
}}</small>
<small v-if="false === data.item.active">{{ $t('firefly.inactive') }}</small>
<!-- (rules, recurring) -->
@ -114,11 +115,13 @@
<span v-if="null !== data.item.extension_date"><br/>
<small>
{{
$t('firefly.extension_date_is', {date: new Intl.DateTimeFormat(locale, {
$t('firefly.extension_date_is', {
date: new Intl.DateTimeFormat(locale, {
year: 'numeric',
month: 'long',
day: 'numeric'
}).format(new Date(data.item.extension_date.substring(0, 10)))})
}).format(new Date(data.item.extension_date.substring(0, 10)))
})
}}
</small>
</span>
@ -126,8 +129,8 @@
</template>
<template #cell(amount)="data">
~ <span class="text-info">{{
Intl.NumberFormat(locale, {style: 'currency', currency: data.item.currency_code}).format((data.item.amount_min + data.item.amount_max) / 2)
}}
Intl.NumberFormat(locale, {style: 'currency', currency: data.item.currency_code}).format((data.item.amount_min + data.item.amount_max) / 2)
}}
</span>
</template>
<template #cell(payment_info)="data">
@ -166,10 +169,10 @@
</button>
<div class="dropdown-menu" :aria-labelledby="'dropdownMenuButton' + data.item.id">
<a class="dropdown-item" :href="'./subscriptions/edit/' + data.item.id"><span class="fa fas fa-pencil-alt"></span> {{
$t('firefly.edit')
$t('firefly.edit')
}}</a>
<a class="dropdown-item" :href="'./subscriptions/delete/' + data.item.id"><span class="fa far fa-trash"></span> {{
$t('firefly.delete')
$t('firefly.delete')
}}</a>
</div>
</div>
@ -182,7 +185,8 @@
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<a href="./subscriptions/create" class="btn btn-sm mt-2 float-right btn-success"><span class="fas fa-plus"></span> {{ $t('firefly.create_new_bill')
<a href="./subscriptions/create" class="btn btn-sm mt-2 float-right btn-success"><span class="fas fa-plus"></span> {{
$t('firefly.create_new_bill')
}}</a>
<button @click="newCacheKey" class="btn btn-sm mt-2 mr-2 float-right btn-info"><span class="fas fa-sync"></span></button>
</div>
@ -206,18 +210,29 @@ export default {
locale: 'en-US',
sortedGroups: [],
fields: [],
fnsLocale: null
fnsLocale: null,
ready: false
}
},
watch: {
start: function () {
this.downloadBills(1);
},
end: function () {
this.downloadBills(1);
},
},
computed: {
...mapGetters('root', ['cacheKey']),
...mapGetters('root', ['listPageSize', 'cacheKey']),
...mapGetters('dashboard/index', ['start', 'end',]),
'indexReady': function () {
return null !== this.start && null !== this.end && null !== this.listPageSize && this.ready;
},
},
created() {
this.locale = localStorage.locale ?? 'en-US';
console.log(this.locale);
this.updateFieldList();
this.downloadBills(1);
this.ready = true;
},
methods: {
...mapMutations('root', ['refreshCacheKey',]),
@ -254,25 +269,37 @@ export default {
};
},
downloadBills: function (page) {
console.log('downloadBills');
console.log(this.indexReady);
console.log(this.loading);
console.log(this.downloaded);
this.resetGroups();
configureAxios().then(async (api) => {
api.get('./api/v1/bills?page=' + page + '&key=' + this.cacheKey + '&start=2021-07-01&end=2021-07-31')
.then(response => {
// pages
let currentPage = parseInt(response.data.meta.pagination.current_page);
let totalPage = parseInt(response.data.meta.pagination.total_pages);
this.parseBills(response.data.data);
if (currentPage < totalPage) {
let nextPage = currentPage + 1;
this.downloadBills(nextPage);
// console.log('getAccountList()');
if (this.indexReady && !this.loading && !this.downloaded) {
this.loading = true;
configureAxios().then(async (api) => {
// get date from session.
let startStr = format(this.start, 'y-MM-dd');
let endStr = format(this.end, 'y-MM-dd');
api.get('./api/v1/bills?page=' + page + '&key=' + this.cacheKey + '&start='+startStr+'&end=' + endStr)
.then(response => {
// pages
let currentPage = parseInt(response.data.meta.pagination.current_page);
let totalPage = parseInt(response.data.meta.pagination.total_pages);
this.parseBills(response.data.data);
if (currentPage < totalPage) {
let nextPage = currentPage + 1;
this.downloadBills(nextPage);
}
if (currentPage >= totalPage) {
this.downloaded = true;
}
this.sortGroups();
}
if (currentPage >= totalPage) {
this.downloaded = true;
}
this.sortGroups();
}
);
});
);
});
}
},
sortGroups: function () {
const sortable = Object.entries(this.groups);
@ -282,6 +309,7 @@ export default {
return a.order - b.order;
});
this.sortedGroups = sortable;
this.loading = false;
//console.log(this.sortedGroups);
},
parseBills: function (data) {

View File

@ -38,41 +38,41 @@ Vue.component('b-pagination', BPagination);
//Vue.use(Vuex);
const app = new Vue({
i18n,
store,
el: "#accounts",
render: (createElement) => {
return createElement(Index, {props: props});
},
beforeCreate() {
i18n,
store,
el: "#accounts",
render: (createElement) => {
return createElement(Index, {props: props});
},
beforeCreate() {
// See reference nr. 10
this.$store.commit('initialiseStore');
this.$store.dispatch('updateCurrencyPreference');
this.$store.commit('initialiseStore');
this.$store.dispatch('updateCurrencyPreference');
// init the new root store (dont care about results)
this.$store.dispatch('root/initialiseStore');
// init the new root store (dont care about results)
this.$store.dispatch('root/initialiseStore');
// also init the dashboard store.
this.$store.dispatch('dashboard/index/initialiseStore');
},
});
// also init the dashboard store.
this.$store.dispatch('dashboard/index/initialiseStore');
},
});
const calendar = new Vue({
i18n,
store,
el: "#calendar",
render: (createElement) => {
return createElement(Calendar, {props: props});
},
i18n,
store,
el: "#calendar",
render: (createElement) => {
return createElement(Calendar, {props: props});
},
// See reference nr. 11
});
});
const opt = new Vue({
i18n,
store,
el: "#indexOptions",
render: (createElement) => {
return createElement(IndexOptions, {props: props});
},
i18n,
store,
el: "#indexOptions",
render: (createElement) => {
return createElement(IndexOptions, {props: props});
},
// See reference nr. 12
});
});

View File

@ -23,7 +23,7 @@ import Vue from "vue";
import Index from "../../components/bills/Index";
import store from "../../components/store";
import {BPagination, BTable} from 'bootstrap-vue';
//import Calendar from "../../components/dashboard/Calendar";
import Calendar from "../../components/dashboard/Calendar";
//import IndexOptions from "../../components/accounts/IndexOptions";
// i18n
@ -38,35 +38,35 @@ Vue.component('b-pagination', BPagination);
//Vue.use(Vuex);
const app = new Vue({
i18n,
store,
el: "#bills",
render: (createElement) => {
return createElement(Index, {props: props});
},
beforeCreate() {
// See reference nr. 10
this.$store.commit('initialiseStore');
this.$store.dispatch('updateCurrencyPreference');
// init the new root store (dont care about results)
this.$store.dispatch('root/initialiseStore');
// also init the dashboard store.
this.$store.dispatch('dashboard/index/initialiseStore');
},
});
new Vue({
i18n,
store,
el: "#bills",
el: "#calendar",
render: (createElement) => {
return createElement(Index, {props: props});
},
beforeCreate() {
// See reference nr. 10
this.$store.commit('initialiseStore');
this.$store.dispatch('updateCurrencyPreference');
// init the new root store (dont care about results)
this.$store.dispatch('root/initialiseStore');
// also init the dashboard store.
//this.$store.dispatch('dashboard/index/initialiseStore');
return createElement(Calendar, {props: props});
},
// See reference nr. 11
});
// new Vue({
// i18n,
// store,
// el: "#calendar",
// render: (createElement) => {
// return createElement(Calendar, {props: props});
// },
// // See reference nr. 11
// });
// new Vue({
// i18n,
// store,