2022-02-27 10:14:08 +01:00
|
|
|
<template>
|
|
|
|
<q-page>
|
|
|
|
<q-table
|
|
|
|
:title="$t('firefly.budgets')"
|
|
|
|
:rows="rows"
|
|
|
|
:columns="columns"
|
|
|
|
row-key="id"
|
|
|
|
@request="onRequest"
|
|
|
|
v-model:pagination="pagination"
|
|
|
|
:loading="loading"
|
|
|
|
class="q-ma-md"
|
|
|
|
>
|
|
|
|
<template v-slot:header="props">
|
|
|
|
<q-tr :props="props">
|
|
|
|
<q-th
|
|
|
|
v-for="col in props.cols"
|
|
|
|
:key="col.name"
|
|
|
|
:props="props"
|
|
|
|
>
|
|
|
|
{{ col.label }}
|
|
|
|
</q-th>
|
|
|
|
</q-tr>
|
|
|
|
</template>
|
|
|
|
<template v-slot:body="props">
|
|
|
|
<q-tr :props="props">
|
|
|
|
<q-td key="name" :props="props">
|
|
|
|
<router-link :to="{ name: 'budgets.show', params: {id: props.row.id} }" class="text-primary">
|
|
|
|
{{ props.row.name }}
|
|
|
|
</router-link>
|
|
|
|
</q-td>
|
|
|
|
<q-td key="menu" :props="props">
|
|
|
|
<q-btn-dropdown color="primary" label="Actions" size="sm">
|
|
|
|
<q-list>
|
|
|
|
<q-item clickable v-close-popup :to="{name: 'budgets.edit', params: {id: props.row.id}}">
|
|
|
|
<q-item-section>
|
|
|
|
<q-item-label>Edit</q-item-label>
|
|
|
|
</q-item-section>
|
|
|
|
</q-item>
|
|
|
|
<q-item clickable v-close-popup @click="deleteBudget(props.row.id, props.row.name)">
|
|
|
|
<q-item-section>
|
|
|
|
<q-item-label>Delete</q-item-label>
|
|
|
|
</q-item-section>
|
|
|
|
</q-item>
|
|
|
|
</q-list>
|
|
|
|
</q-btn-dropdown>
|
|
|
|
</q-td>
|
|
|
|
</q-tr>
|
|
|
|
</template>
|
|
|
|
</q-table>
|
|
|
|
<p>
|
|
|
|
<q-btn :to="{name: 'budgets.show', params: {id: 0}}">Transactions without a budget</q-btn>
|
|
|
|
</p>
|
|
|
|
<q-page-sticky position="bottom-right" :offset="[18, 18]">
|
|
|
|
<q-fab
|
|
|
|
label="Actions"
|
|
|
|
square
|
|
|
|
vertical-actions-align="right"
|
|
|
|
label-position="left"
|
|
|
|
color="green"
|
|
|
|
icon="fas fa-chevron-up"
|
|
|
|
direction="up"
|
|
|
|
>
|
|
|
|
<q-fab-action color="primary" square :to="{ name: 'budgets.create'}" icon="fas fa-exchange-alt" label="New budget"/>
|
|
|
|
</q-fab>
|
|
|
|
</q-page-sticky>
|
|
|
|
</q-page>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import {mapGetters, useStore} from "vuex";
|
2022-02-28 17:06:01 +01:00
|
|
|
import Destroy from "../../api/generic/destroy";
|
2022-02-27 10:14:08 +01:00
|
|
|
import List from "../../api/budgets/list";
|
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'Index',
|
|
|
|
watch: {
|
|
|
|
$route(to) {
|
|
|
|
// react to route changes...
|
|
|
|
if ('budgets.index' === to.name) {
|
|
|
|
this.page = 1;
|
|
|
|
this.updateBreadcrumbs();
|
|
|
|
this.triggerUpdate();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
rows: [],
|
|
|
|
pagination: {
|
|
|
|
sortBy: 'desc',
|
|
|
|
descending: false,
|
|
|
|
page: 1,
|
|
|
|
rowsPerPage: 5,
|
|
|
|
rowsNumber: 100
|
|
|
|
},
|
|
|
|
loading: false,
|
|
|
|
columns: [
|
|
|
|
{name: 'name', label: 'Name', field: 'name', align: 'left'},
|
|
|
|
{name: 'menu', label: ' ', field: 'menu', align: 'right'},
|
|
|
|
],
|
|
|
|
}
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
...mapGetters('fireflyiii', ['getRange', 'getCacheKey', 'getListPageSize']),
|
|
|
|
},
|
|
|
|
created() {
|
|
|
|
this.pagination.rowsPerPage = this.getListPageSize;
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
this.type = this.$route.params.type;
|
|
|
|
if (null === this.getRange.start || null === this.getRange.end) {
|
|
|
|
// subscribe, then update:
|
|
|
|
const $store = useStore();
|
|
|
|
$store.subscribe((mutation, state) => {
|
|
|
|
if ('fireflyiii/setRange' === mutation.type) {
|
|
|
|
this.range = {start: mutation.payload.start, end: mutation.payload.end};
|
|
|
|
this.triggerUpdate();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
if (null !== this.getRange.start && null !== this.getRange.end) {
|
|
|
|
this.range = {start: this.getRange.start, end: this.getRange.end};
|
|
|
|
this.triggerUpdate();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
deleteBudget: function (id, name) {
|
|
|
|
this.$q.dialog({
|
|
|
|
title: 'Confirm',
|
|
|
|
message: 'Do you want to delete budget "' + name + '"? Any and all transactions linked to this budget will be spared.',
|
|
|
|
cancel: true,
|
|
|
|
persistent: true
|
|
|
|
}).onOk(() => {
|
|
|
|
this.destroyBudget(id);
|
|
|
|
});
|
|
|
|
},
|
|
|
|
destroyBudget: function (id) {
|
2022-02-28 17:06:01 +01:00
|
|
|
(new Destroy('budgets')).destroy(id).then(() => {
|
2022-02-27 10:14:08 +01:00
|
|
|
this.$store.dispatch('fireflyiii/refreshCacheKey');
|
|
|
|
this.triggerUpdate();
|
|
|
|
});
|
|
|
|
},
|
|
|
|
updateBreadcrumbs: function () {
|
|
|
|
this.$route.meta.pageTitle = 'firefly.budgets';
|
|
|
|
this.$route.meta.breadcrumbs = [{title: 'budgets'}];
|
|
|
|
|
|
|
|
},
|
|
|
|
onRequest: function (props) {
|
|
|
|
this.page = props.pagination.page;
|
|
|
|
this.triggerUpdate();
|
|
|
|
},
|
|
|
|
triggerUpdate: function () {
|
|
|
|
if (this.loading) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
if (null === this.range.start || null === this.range.end) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
this.loading = true;
|
|
|
|
const list = new List();
|
|
|
|
this.rows = [];
|
|
|
|
list.list(this.page, this.getCacheKey).then(
|
|
|
|
(response) => {
|
|
|
|
this.pagination.rowsPerPage = response.data.meta.pagination.per_page;
|
|
|
|
this.pagination.rowsNumber = response.data.meta.pagination.total;
|
|
|
|
this.pagination.page = this.page;
|
|
|
|
|
|
|
|
for (let i in response.data.data) {
|
|
|
|
if (response.data.data.hasOwnProperty(i)) {
|
|
|
|
let current = response.data.data[i];
|
|
|
|
let account = {
|
|
|
|
id: current.id,
|
|
|
|
name: current.attributes.name,
|
|
|
|
};
|
|
|
|
this.rows.push(account);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
this.loading = false;
|
|
|
|
}
|
|
|
|
)
|
|
|
|
;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|