mirror of
https://github.com/firefly-iii/firefly-iii.git
synced 2025-09-22 12:04:00 +00:00
Initial set of pages.
This commit is contained in:
James Cole
31
frontend/src/pages/Error404.vue
Normal file
31
frontend/src/pages/Error404.vue
Normal file
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<div class="fullscreen bg-blue text-white text-center q-pa-md flex flex-center">
|
||||
<div>
|
||||
<div style="font-size: 30vh">
|
||||
404
|
||||
</div>
|
||||
|
||||
<div class="text-h2" style="opacity:.4">
|
||||
Oops. Nothing here...
|
||||
</div>
|
||||
|
||||
<q-btn
|
||||
class="q-mt-xl"
|
||||
color="white"
|
||||
text-color="blue"
|
||||
unelevated
|
||||
to="/"
|
||||
label="Go Home"
|
||||
no-caps
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Error404'
|
||||
})
|
||||
</script>
|
||||
131
frontend/src/pages/Index.vue
Normal file
131
frontend/src/pages/Index.vue
Normal file
@@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<div class="q-ma-md" v-if="0 === assetCount">
|
||||
<NewUser
|
||||
v-on:created-accounts="refreshThenCount"
|
||||
></NewUser>
|
||||
</div>
|
||||
<div class="q-ma-md" v-if="assetCount > 0">
|
||||
<Boxes></Boxes>
|
||||
</div>
|
||||
<div class="row q-ma-md" v-if="assetCount > 0">
|
||||
<div class="col-12">
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">Firefly III</div>
|
||||
<div class="text-subtitle2">What's playing?</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<HomeChart></HomeChart>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--
|
||||
<div class="row q-ma-md">
|
||||
<div class="col-6 q-pr-sm">
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">Budgets</div>
|
||||
<div class="text-subtitle2">Subheader</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
Content
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="col-6 q-pl-sm">
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">Categories</div>
|
||||
<div class="text-subtitle2">Subheader</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
Content
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6">Expenses</div>
|
||||
<div class="col-6">Income</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-4">Account X</div>
|
||||
<div class="col-4">Account X</div>
|
||||
<div class="col-4">Account X</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6">Piggies</div>
|
||||
<div class="col-6">Bills</div>
|
||||
</div>
|
||||
-->
|
||||
<q-page-sticky position="bottom-right" :offset="[18, 18]" v-if="assetCount > 0">
|
||||
<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 icon="fas fa-bullseye" label="New piggy bank"/> -->
|
||||
<q-fab-action color="primary" square icon="fas fa-chart-pie" label="New budget"
|
||||
:to="{ name: 'budgets.create' }"/>
|
||||
<!-- <q-fab-action color="primary" square icon="fas fa-home" label="New liability"/> -->
|
||||
<q-fab-action color="primary" square icon="far fa-money-bill-alt" label="New asset account"
|
||||
:to="{ name: 'accounts.create', params: {type: 'asset'} }"/>
|
||||
<q-fab-action color="primary" square icon="fas fa-exchange-alt" label="New transfer"
|
||||
:to="{ name: 'transactions.create', params: {type: 'transfer'} }"/>
|
||||
<q-fab-action color="primary" square icon="fas fa-long-arrow-alt-right" label="New deposit"
|
||||
:to="{ name: 'transactions.create', params: {type: 'deposit'} }"/>
|
||||
<q-fab-action color="primary" square icon="fas fa-long-arrow-alt-left" label="New withdrawal"
|
||||
:to="{ name: 'transactions.create', params: {type: 'withdrawal'} }"/>
|
||||
|
||||
</q-fab>
|
||||
</q-page-sticky>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {defineAsyncComponent, defineComponent} from "vue";
|
||||
import List from "../api/accounts/list";
|
||||
import {mapGetters} from "vuex";
|
||||
|
||||
export default defineComponent(
|
||||
{
|
||||
name: 'PageIndex',
|
||||
components: {
|
||||
Boxes: defineAsyncComponent(() => import('./dashboard/Boxes.vue')),
|
||||
HomeChart: defineAsyncComponent(() => import('./dashboard/HomeChart')),
|
||||
NewUser: defineAsyncComponent(() => import('../components/dashboard/NewUser')),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
assetCount: 1
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('fireflyiii', ['getCacheKey']),
|
||||
},
|
||||
mounted() {
|
||||
this.countAssetAccounts();
|
||||
},
|
||||
methods: {
|
||||
refreshThenCount: function() {
|
||||
this.$store.dispatch('fireflyiii/refreshCacheKey');
|
||||
this.countAssetAccounts();
|
||||
},
|
||||
countAssetAccounts: function () {
|
||||
let list = new List;
|
||||
list.list('asset',1, this.getCacheKey).then((response) => {
|
||||
this.assetCount = parseInt(response.data.meta.pagination.total);
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
217
frontend/src/pages/accounts/Create.vue
Normal file
217
frontend/src/pages/accounts/Create.vue
Normal file
@@ -0,0 +1,217 @@
|
||||
<!--
|
||||
- Create.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>
|
||||
<q-page>
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<q-banner inline-actions rounded class="bg-orange text-white" v-if="'' !== errorMessage">
|
||||
{{ errorMessage }}
|
||||
<template v-slot:action>
|
||||
<q-btn flat @click="dismissBanner" label="Dismiss"/>
|
||||
</template>
|
||||
</q-banner>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-mx-md q-mt-md">
|
||||
<div class="col-12">
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">Info for {{ $route.params.type }} {{ index }}</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
<q-input
|
||||
:error-message="submissionErrors.name"
|
||||
:error="hasSubmissionErrors.name"
|
||||
bottom-slots
|
||||
:disable="disabledInput"
|
||||
type="text" clearable v-model="name" :label="$t('form.name')"
|
||||
outlined/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
<q-input
|
||||
:error-message="submissionErrors.iban"
|
||||
:error="hasSubmissionErrors.iban"
|
||||
mask="AA## XXXX XXXX XXXX XXXX XXXX XXXX XXXX XX"
|
||||
bottom-slots :disable="disabledInput" type="text" clearable v-model="iban" :label="$t('form.iban')"
|
||||
outlined/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<q-card class="q-mt-xs">
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 text-right">
|
||||
<q-btn :disable="disabledInput" color="primary" label="Submit" @click="submitAccount"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 text-right">
|
||||
<q-checkbox :disable="disabledInput" v-model="doReturnHere" left-label label="Return here to create another one"/>
|
||||
<br/>
|
||||
<q-checkbox v-model="doResetForm" left-label :disable="!doReturnHere || disabledInput" label="Reset form after submission"/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Post from "../../api/accounts/post";
|
||||
|
||||
export default {
|
||||
name: "Create",
|
||||
data() {
|
||||
return {
|
||||
submissionErrors: {},
|
||||
hasSubmissionErrors: {},
|
||||
submitting: false,
|
||||
doReturnHere: false,
|
||||
doResetForm: false,
|
||||
errorMessage: '',
|
||||
type: '',
|
||||
// account fields:
|
||||
name: '',
|
||||
iban: '',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
disabledInput: function () {
|
||||
return this.submitting;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.resetForm();
|
||||
this.type = this.$route.params.type;
|
||||
},
|
||||
methods: {
|
||||
resetForm: function () {
|
||||
this.name = '';
|
||||
this.iban = '';
|
||||
this.resetErrors();
|
||||
|
||||
},
|
||||
resetErrors: function () {
|
||||
this.submissionErrors =
|
||||
{
|
||||
name: '',
|
||||
iban: '',
|
||||
};
|
||||
this.hasSubmissionErrors = {
|
||||
name: false,
|
||||
iban: false,
|
||||
};
|
||||
},
|
||||
submitAccount: function () {
|
||||
this.submitting = true;
|
||||
this.errorMessage = '';
|
||||
|
||||
// reset errors:
|
||||
this.resetErrors();
|
||||
|
||||
// build account array
|
||||
const submission = this.buildAccount();
|
||||
|
||||
let accounts = new Post();
|
||||
accounts
|
||||
.post(submission)
|
||||
.catch(this.processErrors)
|
||||
.then(this.processSuccess);
|
||||
},
|
||||
buildAccount: function () {
|
||||
let act = {
|
||||
name: this.name,
|
||||
iban: this.iban,
|
||||
type: this.type,
|
||||
};
|
||||
if ('asset' === this.type) {
|
||||
act.account_role = 'defaultAsset';
|
||||
}
|
||||
return act;
|
||||
},
|
||||
dismissBanner: function () {
|
||||
this.errorMessage = '';
|
||||
},
|
||||
processSuccess: function (response) {
|
||||
if (!response) {
|
||||
return;
|
||||
}
|
||||
this.submitting = false;
|
||||
let message = {
|
||||
level: 'success',
|
||||
text: 'I am new account lol',
|
||||
show: true,
|
||||
action: {
|
||||
show: true,
|
||||
text: 'Go to account',
|
||||
link: {name: 'accounts.show', params: {id: parseInt(response.data.data.id)}}
|
||||
}
|
||||
};
|
||||
// store flash
|
||||
this.$q.localStorage.set('flash', message);
|
||||
if (this.doReturnHere) {
|
||||
window.dispatchEvent(new CustomEvent('flash', {
|
||||
detail: {
|
||||
flash: this.$q.localStorage.getItem('flash')
|
||||
}
|
||||
}));
|
||||
}
|
||||
if (!this.doReturnHere) {
|
||||
// return to previous page.
|
||||
this.$router.go(-1);
|
||||
}
|
||||
|
||||
},
|
||||
processErrors: function (error) {
|
||||
if (error.response) {
|
||||
let errors = error.response.data; // => the response payload
|
||||
this.errorMessage = errors.message;
|
||||
console.log(errors);
|
||||
for (let i in errors.errors) {
|
||||
if (errors.errors.hasOwnProperty(i)) {
|
||||
this.submissionErrors[i] = errors.errors[i][0];
|
||||
this.hasSubmissionErrors[i] = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
this.submitting = false;
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
215
frontend/src/pages/accounts/Edit.vue
Normal file
215
frontend/src/pages/accounts/Edit.vue
Normal file
@@ -0,0 +1,215 @@
|
||||
<!--
|
||||
- Create.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>
|
||||
<q-page>
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<q-banner inline-actions rounded class="bg-orange text-white" v-if="'' !== errorMessage">
|
||||
{{ errorMessage }}
|
||||
<template v-slot:action>
|
||||
<q-btn flat @click="dismissBanner" label="Dismiss"/>
|
||||
</template>
|
||||
</q-banner>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-mx-md q-mt-md">
|
||||
<div class="col-12">
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">Edit account</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
<q-input
|
||||
:error-message="submissionErrors.name"
|
||||
:error="hasSubmissionErrors.name"
|
||||
bottom-slots :disable="disabledInput" type="text" clearable v-model="name" :label="$t('form.name')"
|
||||
outlined/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
<q-input
|
||||
:error-message="submissionErrors.iban"
|
||||
:error="hasSubmissionErrors.iban"
|
||||
mask="AA## XXXX XXXX XXXX XXXX XXXX XXXX XXXX XX"
|
||||
bottom-slots :disable="disabledInput" type="text" clearable v-model="iban" :label="$t('form.iban')"
|
||||
outlined/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<q-card class="q-mt-xs">
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 text-right">
|
||||
<q-btn :disable="disabledInput" color="primary" label="Update" @click="submitAccount"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 text-right">
|
||||
<q-checkbox :disable="disabledInput" v-model="doReturnHere" left-label label="Return here"/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Get from '../../api/accounts/get';
|
||||
import Put from '../../api/accounts/put';
|
||||
|
||||
export default {
|
||||
name: "Edit",
|
||||
data() {
|
||||
return {
|
||||
tab: 'split-0',
|
||||
submissionErrors: {},
|
||||
hasSubmissionErrors: {},
|
||||
submitting: false,
|
||||
doReturnHere: false,
|
||||
doResetForm: false,
|
||||
errorMessage: '',
|
||||
type: '',
|
||||
// account fields:
|
||||
id: 0,
|
||||
name: '',
|
||||
iban: '',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
disabledInput: function () {
|
||||
return this.submitting;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.id = parseInt(this.$route.params.id);
|
||||
this.collectAccount();
|
||||
},
|
||||
methods: {
|
||||
collectAccount: function() {
|
||||
let get = new Get;
|
||||
get.get(this.id).then((response) => this.parseAccount(response));
|
||||
},
|
||||
parseAccount: function(response) {
|
||||
this.name = response.data.data.attributes.name;
|
||||
this.iban = response.data.data.attributes.iban;
|
||||
},
|
||||
resetErrors: function () {
|
||||
this.submissionErrors =
|
||||
{
|
||||
name: '',
|
||||
iban: '',
|
||||
};
|
||||
this.hasSubmissionErrors = {
|
||||
name: false,
|
||||
iban: false,
|
||||
};
|
||||
},
|
||||
submitAccount: function () {
|
||||
this.submitting = true;
|
||||
this.errorMessage = '';
|
||||
|
||||
// reset errors:
|
||||
this.resetErrors();
|
||||
|
||||
// build account array
|
||||
const submission = this.buildAccount();
|
||||
|
||||
let accounts = new Put();
|
||||
accounts
|
||||
.post(this.id, submission)
|
||||
.catch(this.processErrors)
|
||||
.then(this.processSuccess);
|
||||
},
|
||||
buildAccount: function () {
|
||||
let act = {
|
||||
name: this.name,
|
||||
iban: this.iban,
|
||||
};
|
||||
return act;
|
||||
},
|
||||
dismissBanner: function () {
|
||||
this.errorMessage = '';
|
||||
},
|
||||
processSuccess: function (response) {
|
||||
this.$store.dispatch('fireflyiii/refreshCacheKey');
|
||||
if (!response) {
|
||||
return;
|
||||
}
|
||||
this.submitting = false;
|
||||
let message = {
|
||||
level: 'success',
|
||||
text: 'TODO I am updated lol',
|
||||
show: true,
|
||||
action: {
|
||||
show: true,
|
||||
text: 'Go to account',
|
||||
link: {name: 'accounts.show', params: {id: parseInt(response.data.data.id)}}
|
||||
}
|
||||
};
|
||||
// store flash
|
||||
this.$q.localStorage.set('flash', message);
|
||||
if (this.doReturnHere) {
|
||||
window.dispatchEvent(new CustomEvent('flash', {
|
||||
detail: {
|
||||
flash: this.$q.localStorage.getItem('flash')
|
||||
}
|
||||
}));
|
||||
}
|
||||
if (!this.doReturnHere) {
|
||||
// return to previous page.
|
||||
this.$router.go(-1);
|
||||
}
|
||||
|
||||
},
|
||||
processErrors: function (error) {
|
||||
if (error.response) {
|
||||
let errors = error.response.data; // => the response payload
|
||||
this.errorMessage = errors.message;
|
||||
console.log(errors);
|
||||
for (let i in errors.errors) {
|
||||
if (errors.errors.hasOwnProperty(i)) {
|
||||
this.submissionErrors[i] = errors.errors[i][0];
|
||||
this.hasSubmissionErrors[i] = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
this.submitting = false;
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
206
frontend/src/pages/accounts/Index.vue
Normal file
206
frontend/src/pages/accounts/Index.vue
Normal file
@@ -0,0 +1,206 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<q-table
|
||||
:title="$t('firefly.' + this.type + '_accounts')"
|
||||
: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: 'accounts.show', params: {id: props.row.id} }" class="text-primary">
|
||||
{{ props.row.name }}
|
||||
</router-link>
|
||||
</q-td>
|
||||
<q-td key="iban" :props="props">
|
||||
{{ formatIban(props.row.iban) }}
|
||||
</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: 'accounts.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 :to="{name: 'accounts.reconcile', params: {id: props.row.id}}" v-if="'asset' === props.row.type">
|
||||
<q-item-section>
|
||||
<q-item-label>Reconcile</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable v-close-popup @click="deleteAccount(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>
|
||||
<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: 'accounts.create', params: {type: 'liability'} }" icon="fas fa-long-arrow-alt-right" label="New liability"/>-->
|
||||
<q-fab-action color="primary" square :to="{ name: 'accounts.create', params: {type: 'asset'} }" icon="fas fa-exchange-alt" label="New asset account"/>
|
||||
</q-fab>
|
||||
</q-page-sticky>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapGetters, useStore} from "vuex";
|
||||
import List from "../../api/accounts/list";
|
||||
import Destroy from "../../api/accounts/destroy";
|
||||
|
||||
export default {
|
||||
name: 'Index',
|
||||
watch: {
|
||||
$route(to) {
|
||||
// react to route changes...
|
||||
if ('accounts.index' === to.name) {
|
||||
this.type = to.params.type;
|
||||
this.page = 1;
|
||||
this.updateBreadcrumbs();
|
||||
this.triggerUpdate();
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
rows: [],
|
||||
type: 'asset',
|
||||
pagination: {
|
||||
sortBy: 'desc',
|
||||
descending: false,
|
||||
page: 1,
|
||||
rowsPerPage: 5,
|
||||
rowsNumber: 100
|
||||
},
|
||||
loading: false,
|
||||
columns: [
|
||||
{name: 'name', label: 'Name', field: 'name', align: 'left'},
|
||||
{name: 'iban', label: 'IBAN', field: 'iban', 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: {
|
||||
deleteAccount: function (id, name) {
|
||||
this.$q.dialog({
|
||||
title: 'Confirm',
|
||||
message: 'Do you want to delete account "' + name + '"? Any and all transactions linked to this account will ALSO be deleted.',
|
||||
cancel: true,
|
||||
persistent: true
|
||||
}).onOk(() => {
|
||||
this.destroyAccount(id);
|
||||
});
|
||||
},
|
||||
destroyAccount: function (id) {
|
||||
let destr = new Destroy;
|
||||
destr.destroy(id).then(() => {
|
||||
this.$store.dispatch('fireflyiii/refreshCacheKey');
|
||||
this.triggerUpdate();
|
||||
});
|
||||
},
|
||||
updateBreadcrumbs: function () {
|
||||
this.$route.meta.pageTitle = 'firefly.' + this.type + '_accounts';
|
||||
this.$route.meta.breadcrumbs = [{title: this.type + '_accounts'}];
|
||||
|
||||
},
|
||||
onRequest: function (props) {
|
||||
this.page = props.pagination.page;
|
||||
this.triggerUpdate();
|
||||
},
|
||||
formatIban: function (string) {
|
||||
if (null === string) {
|
||||
return '';
|
||||
}
|
||||
// https://github.com/arhs/iban.js/blob/master/iban.js
|
||||
let NON_ALPHANUM = /[^a-zA-Z0-9]/g,
|
||||
EVERY_FOUR_CHARS = /(.{4})(?!$)/g;
|
||||
return string.replace(NON_ALPHANUM, '').toUpperCase().replace(EVERY_FOUR_CHARS, "$1 ");
|
||||
},
|
||||
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.type, 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,
|
||||
iban: current.attributes.iban,
|
||||
type: current.attributes.type,
|
||||
};
|
||||
this.rows.push(account);
|
||||
}
|
||||
}
|
||||
this.loading = false;
|
||||
}
|
||||
)
|
||||
;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
228
frontend/src/pages/accounts/Reconcile.vue
Normal file
228
frontend/src/pages/accounts/Reconcile.vue
Normal file
@@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<div class="row q-mx-md" v-if="!canReconcile">
|
||||
<div class="col-12">
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
This account cannot be reconciled :(
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-9 q-pr-xs">
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">Reconcilliation range</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-3 q-pr-xs">
|
||||
<q-input outlined v-model="startDate" hint="Start date" type="date" dense>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="far fa-calendar"/>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
<div class="col-3 q-px-xs">
|
||||
<q-input outlined v-model="startBalance" hint="Start balance" step="0.00" type="number" dense>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="fas fa-coins"/>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<q-input outlined v-model="endDate" hint="End date" type="date" dense>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="far fa-calendar"/>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
<div class="col-3 q-px-xs">
|
||||
<q-input outlined v-model="endBalance" hint="End Balance" step="0.00" type="number" dense>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="fas fa-coins"/>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-9 q-px-xs">
|
||||
Match the amounts and dates above to your bank statement, and press "Start reconciling"
|
||||
</div>
|
||||
<div class="col-3 q-px-xs">
|
||||
<q-btn @click="initReconciliation">Start reconciling</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-3 q-pl-xs">
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">Options</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
EUR {{ balanceDiff }}
|
||||
</q-card-section>
|
||||
<q-card-actions>
|
||||
Actions
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-ma-md">
|
||||
<div class="col">
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">
|
||||
First verify the date-range and balances. Then press "Start reconciling"
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<q-page-scroller position="bottom-right" :offset="[16,16]" scroll-offset="120" v-if="canReconcile">
|
||||
<div class="bg-primary text-white q-px-xl q-pa-md rounded-borders">EUR {{ balanceDiff }}</div>
|
||||
</q-page-scroller>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import startOfMonth from "date-fns/startOfMonth";
|
||||
import endOfMonth from "date-fns/endOfMonth";
|
||||
import subDays from 'date-fns/subDays';
|
||||
import format from "date-fns/format";
|
||||
import Get from "../../api/accounts/get";
|
||||
|
||||
export default {
|
||||
name: "Reconcile",
|
||||
data() {
|
||||
return {
|
||||
startDate: '',
|
||||
startBalance: '0',
|
||||
endDate: '',
|
||||
endBalance: '0',
|
||||
id: 0,
|
||||
canReconcile: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
balanceDiff: function () {
|
||||
return parseFloat(this.startBalance) - parseFloat(this.endBalance);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.id = parseInt(this.$route.params.id);
|
||||
},
|
||||
mounted() {
|
||||
this.setDates();
|
||||
this.collectBalances();
|
||||
},
|
||||
methods: {
|
||||
initReconciliation: function() {
|
||||
this.$q.dialog({
|
||||
title: 'Todo',
|
||||
message: 'This function does not work yet.',
|
||||
cancel: false,
|
||||
persistent: true
|
||||
});
|
||||
},
|
||||
setDates: function () {
|
||||
let today = new Date;
|
||||
// TODO depends on view range.
|
||||
let start = subDays(startOfMonth(today), 1);
|
||||
let end = endOfMonth(today);
|
||||
this.startDate = format(start, 'yyyy-MM-dd');
|
||||
this.endDate = format(end, 'yyyy-MM-dd');
|
||||
},
|
||||
collectBalances: function () {
|
||||
let getter = new Get;
|
||||
getter.get(this.id, this.startDate).then((response) => {
|
||||
if ('asset' !== response.data.data.attributes.type) {
|
||||
this.canReconcile = false;
|
||||
}
|
||||
this.startBalance = response.data.data.attributes.current_balance;
|
||||
});
|
||||
|
||||
getter.get(this.id, this.endDate).then((response) => {
|
||||
this.endBalance = response.data.data.attributes.current_balance;
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
121
frontend/src/pages/accounts/Show.vue
Normal file
121
frontend/src/pages/accounts/Show.vue
Normal file
@@ -0,0 +1,121 @@
|
||||
<!--
|
||||
- Show.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>
|
||||
<q-page>
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<!-- Balance chart -->
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">{{ account.name }}</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
Name: {{ account.name }}<br>
|
||||
IBAN: {{ account.iban }}<br>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-mt-sm">
|
||||
<div class="col-12">
|
||||
<LargeTable ref="table"
|
||||
title="Transactions"
|
||||
:rows="rows"
|
||||
:loading="loading"
|
||||
v-on:on-request="onRequest"
|
||||
:rows-number="rowsNumber"
|
||||
:rows-per-page="rowsPerPage"
|
||||
:page="page"
|
||||
>
|
||||
</LargeTable>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Get from "../../api/accounts/get";
|
||||
import LargeTable from "../../components/transactions/LargeTable";
|
||||
import Parser from "../../api/transactions/parser";
|
||||
|
||||
export default {
|
||||
name: "Show",
|
||||
data() {
|
||||
return {
|
||||
account: {},
|
||||
rows: [],
|
||||
rowsNumber: 1,
|
||||
rowsPerPage: 10,
|
||||
page: 1
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.id = parseInt(this.$route.params.id);
|
||||
this.getAccount();
|
||||
},
|
||||
mounted() {
|
||||
//this.getAccount();
|
||||
},
|
||||
components: {LargeTable},
|
||||
methods: {
|
||||
onRequest: function (payload) {
|
||||
this.page = payload.page;
|
||||
this.getAccount();
|
||||
},
|
||||
getAccount: function () {
|
||||
let get = new Get;
|
||||
get.get(this.id).then((response) => this.parseAccount(response));
|
||||
|
||||
this.loading = true;
|
||||
const parser = new Parser;
|
||||
this.rows = [];
|
||||
|
||||
get.transactions(this.id, this.page, this.getCacheKey).then(
|
||||
(response) => {
|
||||
let resp = parser.parseResponse(response);
|
||||
|
||||
this.rowsPerPage = resp.rowsPerPage;
|
||||
this.rowsNumber = resp.rowsNumber;
|
||||
this.rows = resp.rows;
|
||||
this.loading = false;
|
||||
}
|
||||
);
|
||||
},
|
||||
parseAccount: function (response) {
|
||||
this.account = {
|
||||
name: response.data.data.attributes.name,
|
||||
iban: response.data.data.attributes.iban
|
||||
};
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
191
frontend/src/pages/admin/Index.vue
Normal file
191
frontend/src/pages/admin/Index.vue
Normal file
@@ -0,0 +1,191 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<q-card bordered class="q-mx-sm">
|
||||
<q-card-section>
|
||||
<div class="text-h6">Firefly III administration</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<!-- TODO cloned from Preferences -->
|
||||
configuration.permission_update_check
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<q-card bordered class="q-mx-sm">
|
||||
<q-card-section>
|
||||
<div class="text-h6">Firefly III information</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
Firefly III: {{ version }}<br>
|
||||
API: {{ api }}<br>
|
||||
OS: {{ os }}
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-xl-4 col-lg-6 col-md-12 q-pa-xs">
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">Is demo site?
|
||||
<span class="text-secondary" v-if="true === isOk.is_demo_site"><span
|
||||
class="far fa-check-circle"></span></span>
|
||||
<span class="text-blue" v-if="true === isLoading.is_demo_site"><span
|
||||
class="fas fa-spinner fa-spin"></span></span>
|
||||
<span class="text-red" v-if="true === isFailure.is_demo_site"><span
|
||||
class="fas fa-skull-crossbones"></span> <small>Please refresh the page...</small></span>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<q-checkbox v-model="isDemoSite" label="Is Demo Site?"/>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-4 col-lg-6 col-md-12 q-pa-xs">
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">Single user mode?
|
||||
<span class="text-secondary" v-if="true === isOk.single_user_mode"><span
|
||||
class="far fa-check-circle"></span></span>
|
||||
<span class="text-blue" v-if="true === isLoading.single_user_mode"><span
|
||||
class="fas fa-spinner fa-spin"></span></span>
|
||||
<span class="text-red" v-if="true === isFailure.single_user_mode"><span
|
||||
class="fas fa-skull-crossbones"></span> <small>Please refresh the page...</small></span>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<q-checkbox v-model="singleUserMode" label="Single user mode?"/>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-4 col-lg-6 col-md-12 q-pa-xs">
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">Check for updates?
|
||||
<span class="text-secondary" v-if="true === isOk.update_check"><span
|
||||
class="far fa-check-circle"></span></span>
|
||||
<span class="text-blue" v-if="true === isLoading.update_check"><span
|
||||
class="fas fa-spinner fa-spin"></span></span>
|
||||
<span class="text-red" v-if="true === isFailure.update_check"><span
|
||||
class="fas fa-skull-crossbones"></span> <small>Please refresh the page...</small></span>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<q-select
|
||||
bottom-slots
|
||||
outlined
|
||||
v-model="permissionUpdateCheck" emit-value
|
||||
map-options :options="permissions" label="Check for updates"/>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import About from "../../api/system/about";
|
||||
import Configuration from "../../api/system/configuration";
|
||||
|
||||
export default {
|
||||
name: 'Index',
|
||||
created() {
|
||||
this.getInfo();
|
||||
},
|
||||
mounted() {
|
||||
this.isOk = {
|
||||
is_demo_site: true,
|
||||
single_user_mode: true,
|
||||
update_check: true,
|
||||
};
|
||||
this.isLoading = {
|
||||
is_demo_site: false,
|
||||
single_user_mode: false,
|
||||
update_check: false,
|
||||
};
|
||||
this.isFailure = {
|
||||
is_demo_site: false,
|
||||
single_user_mode: false,
|
||||
update_check: false,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
// todo these methods PUT on the first load, but shouldn't.
|
||||
isDemoSite: function (newValue, oldValue) {
|
||||
if (oldValue !== newValue) {
|
||||
let value = newValue;
|
||||
(new Configuration()).put('configuration.is_demo_site', {value});
|
||||
}
|
||||
},
|
||||
singleUserMode: function (newValue, oldValue) {
|
||||
if (oldValue !== newValue) {
|
||||
let value = newValue;
|
||||
(new Configuration()).put('configuration.single_user_mode', {value});
|
||||
}
|
||||
},
|
||||
permissionUpdateCheck: function (newValue, oldValue) {
|
||||
if (oldValue !== newValue) {
|
||||
let value = newValue;
|
||||
(new Configuration()).put('configuration.permission_update_check', {value});
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
version: '',
|
||||
api: '',
|
||||
os: '',
|
||||
|
||||
// settings
|
||||
isDemoSite: false,
|
||||
singleUserMode: true,
|
||||
permissionUpdateCheck: -1,
|
||||
|
||||
// options
|
||||
permissions: [
|
||||
{value: -1, label: 'Ask me later'},
|
||||
{value: 0, label: 'Lol no'},
|
||||
{value: 1, label: 'Yes plz'},
|
||||
],
|
||||
|
||||
// info for live update:
|
||||
isOk: {},
|
||||
isLoading: {},
|
||||
isFailure: {},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getInfo: function () {
|
||||
(new About).list().then((response) => {
|
||||
this.version = response.data.data.version;
|
||||
this.api = response.data.data.api_version;
|
||||
this.os = response.data.data.os + ' with php ' + response.data.data.php_version;
|
||||
});
|
||||
(new Configuration).get('configuration.is_demo_site').then((response) => {
|
||||
this.isDemoSite = response.data.data.value;
|
||||
});
|
||||
(new Configuration).get('configuration.single_user_mode').then((response) => {
|
||||
this.singleUserMode = response.data.data.value;
|
||||
});
|
||||
(new Configuration).get('configuration.permission_update_check').then((response) => {
|
||||
this.permissionUpdateCheck = response.data.data.value;
|
||||
});
|
||||
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
170
frontend/src/pages/budgets/Create.vue
Normal file
170
frontend/src/pages/budgets/Create.vue
Normal file
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<q-banner inline-actions rounded class="bg-orange text-white" v-if="'' !== errorMessage">
|
||||
{{ errorMessage }}
|
||||
<template v-slot:action>
|
||||
<q-btn flat @click="dismissBanner" label="Dismiss"/>
|
||||
</template>
|
||||
</q-banner>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-mx-md q-mt-md">
|
||||
<div class="col-12">
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">Info for new budget</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
<q-input
|
||||
:error-message="submissionErrors.name"
|
||||
:error="hasSubmissionErrors.name"
|
||||
bottom-slots :disable="disabledInput" type="text" clearable v-model="name" :label="$t('form.name')"
|
||||
outlined/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<q-card class="q-mt-xs">
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 text-right">
|
||||
<q-btn :disable="disabledInput" color="primary" label="Submit" @click="submitBudget"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 text-right">
|
||||
<q-checkbox :disable="disabledInput" v-model="doReturnHere" left-label label="Return here to create another one"/>
|
||||
<br/>
|
||||
<q-checkbox v-model="doResetForm" left-label :disable="!doReturnHere || disabledInput" label="Reset form after submission"/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Post from "../../api/budgets/post";
|
||||
|
||||
export default {
|
||||
name: 'Create',
|
||||
data() {
|
||||
return {
|
||||
submissionErrors: {},
|
||||
hasSubmissionErrors: {},
|
||||
submitting: false,
|
||||
doReturnHere: false,
|
||||
doResetForm: false,
|
||||
errorMessage: '',
|
||||
type: '',
|
||||
// budget fields:
|
||||
name: '',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
disabledInput: function () {
|
||||
return this.submitting;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.resetForm();
|
||||
this.type = this.$route.params.type;
|
||||
},
|
||||
methods: {
|
||||
resetForm: function () {
|
||||
this.name = '';
|
||||
this.resetErrors();
|
||||
|
||||
},
|
||||
resetErrors: function () {
|
||||
this.submissionErrors =
|
||||
{
|
||||
name: '',
|
||||
};
|
||||
this.hasSubmissionErrors = {
|
||||
name: false,
|
||||
};
|
||||
},
|
||||
submitBudget: function () {
|
||||
this.submitting = true;
|
||||
this.errorMessage = '';
|
||||
|
||||
// reset errors:
|
||||
this.resetErrors();
|
||||
|
||||
// build budget array
|
||||
const submission = this.buildBudget();
|
||||
|
||||
let budgets = new Post();
|
||||
budgets
|
||||
.post(submission)
|
||||
.catch(this.processErrors)
|
||||
.then(this.processSuccess);
|
||||
},
|
||||
buildBudget: function () {
|
||||
return {
|
||||
name: this.name,
|
||||
};
|
||||
},
|
||||
dismissBanner: function () {
|
||||
this.errorMessage = '';
|
||||
},
|
||||
processSuccess: function (response) {
|
||||
if (!response) {
|
||||
return;
|
||||
}
|
||||
this.submitting = false;
|
||||
let message = {
|
||||
level: 'success',
|
||||
text: 'I am new budget',
|
||||
show: true,
|
||||
action: {
|
||||
show: true,
|
||||
text: 'Go to budget',
|
||||
link: {name: 'budgets.show', params: {id: parseInt(response.data.data.id)}}
|
||||
}
|
||||
};
|
||||
// store flash
|
||||
this.$q.localStorage.set('flash', message);
|
||||
if (this.doReturnHere) {
|
||||
window.dispatchEvent(new CustomEvent('flash', {
|
||||
detail: {
|
||||
flash: this.$q.localStorage.getItem('flash')
|
||||
}
|
||||
}));
|
||||
}
|
||||
if (!this.doReturnHere) {
|
||||
// return to previous page.
|
||||
this.$router.go(-1);
|
||||
}
|
||||
|
||||
},
|
||||
processErrors: function (error) {
|
||||
if (error.response) {
|
||||
let errors = error.response.data; // => the response payload
|
||||
this.errorMessage = errors.message;
|
||||
console.log(errors);
|
||||
for (let i in errors.errors) {
|
||||
if (errors.errors.hasOwnProperty(i)) {
|
||||
this.submissionErrors[i] = errors.errors[i][0];
|
||||
this.hasSubmissionErrors[i] = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
this.submitting = false;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
177
frontend/src/pages/budgets/Edit.vue
Normal file
177
frontend/src/pages/budgets/Edit.vue
Normal file
@@ -0,0 +1,177 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<q-banner inline-actions rounded class="bg-orange text-white" v-if="'' !== errorMessage">
|
||||
{{ errorMessage }}
|
||||
<template v-slot:action>
|
||||
<q-btn flat @click="dismissBanner" label="Dismiss"/>
|
||||
</template>
|
||||
</q-banner>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-mx-md q-mt-md">
|
||||
<div class="col-12">
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">Edit budget</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
<q-input
|
||||
:error-message="submissionErrors.name"
|
||||
:error="hasSubmissionErrors.name"
|
||||
bottom-slots :disable="disabledInput" type="text" clearable v-model="name" :label="$t('form.name')"
|
||||
outlined/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<q-card class="q-mt-xs">
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 text-right">
|
||||
<q-btn :disable="disabledInput" color="primary" label="Update" @click="submitBudget"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 text-right">
|
||||
<q-checkbox :disable="disabledInput" v-model="doReturnHere" left-label label="Return here"/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Get from "../../api/budgets/get";
|
||||
import Put from "../../api/budgets/put";
|
||||
|
||||
export default {
|
||||
name: "Edit",
|
||||
data() {
|
||||
return {
|
||||
submissionErrors: {},
|
||||
hasSubmissionErrors: {},
|
||||
submitting: false,
|
||||
doReturnHere: false,
|
||||
doResetForm: false,
|
||||
errorMessage: '',
|
||||
type: '',
|
||||
// budget fields:
|
||||
id: 0,
|
||||
name: '',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
disabledInput: function () {
|
||||
return this.submitting;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.id = parseInt(this.$route.params.id);
|
||||
this.collectBudget();
|
||||
},
|
||||
methods: {
|
||||
collectBudget: function() {
|
||||
let get = new Get;
|
||||
get.get(this.id).then((response) => this.parseBudget(response));
|
||||
},
|
||||
parseBudget: function(response) {
|
||||
this.name = response.data.data.attributes.name;
|
||||
},
|
||||
resetErrors: function () {
|
||||
this.submissionErrors =
|
||||
{
|
||||
name: '',
|
||||
};
|
||||
this.hasSubmissionErrors = {
|
||||
name: false,
|
||||
};
|
||||
},
|
||||
submitBudget: function () {
|
||||
this.submitting = true;
|
||||
this.errorMessage = '';
|
||||
|
||||
// reset errors:
|
||||
this.resetErrors();
|
||||
|
||||
// build account array
|
||||
const submission = this.buildBudget();
|
||||
|
||||
let budgets = new Put();
|
||||
budgets
|
||||
.post(this.id, submission)
|
||||
.catch(this.processErrors)
|
||||
.then(this.processSuccess);
|
||||
},
|
||||
buildBudget: function () {
|
||||
return {
|
||||
name: this.name,
|
||||
};
|
||||
},
|
||||
dismissBanner: function () {
|
||||
this.errorMessage = '';
|
||||
},
|
||||
processSuccess: function (response) {
|
||||
this.$store.dispatch('fireflyiii/refreshCacheKey');
|
||||
if (!response) {
|
||||
return;
|
||||
}
|
||||
this.submitting = false;
|
||||
let message = {
|
||||
level: 'success',
|
||||
text: 'Budget is updated',
|
||||
show: true,
|
||||
action: {
|
||||
show: true,
|
||||
text: 'Go to budget',
|
||||
link: {name: 'budgets.show', params: {id: parseInt(response.data.data.id)}}
|
||||
}
|
||||
};
|
||||
// store flash
|
||||
this.$q.localStorage.set('flash', message);
|
||||
if (this.doReturnHere) {
|
||||
window.dispatchEvent(new CustomEvent('flash', {
|
||||
detail: {
|
||||
flash: this.$q.localStorage.getItem('flash')
|
||||
}
|
||||
}));
|
||||
}
|
||||
if (!this.doReturnHere) {
|
||||
// return to previous page.
|
||||
this.$router.go(-1);
|
||||
}
|
||||
|
||||
},
|
||||
processErrors: function (error) {
|
||||
if (error.response) {
|
||||
let errors = error.response.data; // => the response payload
|
||||
this.errorMessage = errors.message;
|
||||
console.log(errors);
|
||||
for (let i in errors.errors) {
|
||||
if (errors.errors.hasOwnProperty(i)) {
|
||||
this.submissionErrors[i] = errors.errors[i][0];
|
||||
this.hasSubmissionErrors[i] = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
this.submitting = false;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
186
frontend/src/pages/budgets/Index.vue
Normal file
186
frontend/src/pages/budgets/Index.vue
Normal file
@@ -0,0 +1,186 @@
|
||||
<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";
|
||||
import Destroy from "../../api/budgets/destroy";
|
||||
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) {
|
||||
let destr = new Destroy;
|
||||
destr.destroy(id).then(() => {
|
||||
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>
|
||||
121
frontend/src/pages/budgets/Show.vue
Normal file
121
frontend/src/pages/budgets/Show.vue
Normal file
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<!-- Balance chart -->
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">{{ budget.name }}</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
Name: {{ budget.name }}<br>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-mt-sm">
|
||||
<div class="col-12">
|
||||
<LargeTable ref="table"
|
||||
title="Transactions"
|
||||
:rows="rows"
|
||||
:loading="loading"
|
||||
v-on:on-request="onRequest"
|
||||
:rows-number="rowsNumber"
|
||||
:rows-per-page="rowsPerPage"
|
||||
:page="page"
|
||||
>
|
||||
</LargeTable>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LargeTable from "../../components/transactions/LargeTable";
|
||||
import Get from "../../api/budgets/get";
|
||||
import Parser from "../../api/transactions/parser";
|
||||
|
||||
export default {
|
||||
name: "Show",
|
||||
data() {
|
||||
return {
|
||||
budget: {},
|
||||
rows: [],
|
||||
rowsNumber: 1,
|
||||
rowsPerPage: 10,
|
||||
page: 1
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if ('no-budget' === this.$route.params.id) {
|
||||
this.id = 0;
|
||||
this.getWithoutBudget();
|
||||
}
|
||||
if ('no-budget' !== this.$route.params.id) {
|
||||
this.id = parseInt(this.$route.params.id);
|
||||
this.getBudget();
|
||||
}
|
||||
},
|
||||
components: {LargeTable},
|
||||
methods: {
|
||||
onRequest: function (payload) {
|
||||
this.page = payload.page;
|
||||
this.getBudget();
|
||||
},
|
||||
getWithoutBudget: function () {
|
||||
this.budget = {name: '(without budget)'};
|
||||
|
||||
this.loading = true;
|
||||
const parser = new Parser;
|
||||
this.rows = [];
|
||||
let get = new Get;
|
||||
get.transactionsWithoutBudget(this.page, this.getCacheKey).then(
|
||||
(response) => {
|
||||
let resp = parser.parseResponse(response);
|
||||
|
||||
this.rowsPerPage = resp.rowsPerPage;
|
||||
this.rowsNumber = resp.rowsNumber;
|
||||
this.rows = resp.rows;
|
||||
this.loading = false;
|
||||
}
|
||||
);
|
||||
|
||||
},
|
||||
getBudget: function () {
|
||||
let get = new Get;
|
||||
get.get(this.id).then((response) => this.parseBudget(response));
|
||||
|
||||
this.loading = true;
|
||||
const parser = new Parser;
|
||||
this.rows = [];
|
||||
|
||||
get.transactions(this.id, this.page, this.getCacheKey).then(
|
||||
(response) => {
|
||||
let resp = parser.parseResponse(response);
|
||||
|
||||
this.rowsPerPage = resp.rowsPerPage;
|
||||
this.rowsNumber = resp.rowsNumber;
|
||||
this.rows = resp.rows;
|
||||
this.loading = false;
|
||||
}
|
||||
);
|
||||
},
|
||||
parseBudget: function (response) {
|
||||
this.budget = {
|
||||
name: response.data.data.attributes.name,
|
||||
};
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
170
frontend/src/pages/categories/Create.vue
Normal file
170
frontend/src/pages/categories/Create.vue
Normal file
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<q-banner inline-actions rounded class="bg-orange text-white" v-if="'' !== errorMessage">
|
||||
{{ errorMessage }}
|
||||
<template v-slot:action>
|
||||
<q-btn flat @click="dismissBanner" label="Dismiss"/>
|
||||
</template>
|
||||
</q-banner>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-mx-md q-mt-md">
|
||||
<div class="col-12">
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">Info for new category</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
<q-input
|
||||
:error-message="submissionErrors.name"
|
||||
:error="hasSubmissionErrors.name"
|
||||
bottom-slots :disable="disabledInput" type="text" clearable v-model="name" :label="$t('form.name')"
|
||||
outlined/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<q-card class="q-mt-xs">
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 text-right">
|
||||
<q-btn :disable="disabledInput" color="primary" label="Submit" @click="submitCategory"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 text-right">
|
||||
<q-checkbox :disable="disabledInput" v-model="doReturnHere" left-label label="Return here to create another one"/>
|
||||
<br/>
|
||||
<q-checkbox v-model="doResetForm" left-label :disable="!doReturnHere || disabledInput" label="Reset form after submission"/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Post from "../../api/categories/post";
|
||||
|
||||
export default {
|
||||
name: 'Create',
|
||||
data() {
|
||||
return {
|
||||
submissionErrors: {},
|
||||
hasSubmissionErrors: {},
|
||||
submitting: false,
|
||||
doReturnHere: false,
|
||||
doResetForm: false,
|
||||
errorMessage: '',
|
||||
type: '',
|
||||
// category fields:
|
||||
name: '',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
disabledInput: function () {
|
||||
return this.submitting;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.resetForm();
|
||||
this.type = this.$route.params.type;
|
||||
},
|
||||
methods: {
|
||||
resetForm: function () {
|
||||
this.name = '';
|
||||
this.resetErrors();
|
||||
|
||||
},
|
||||
resetErrors: function () {
|
||||
this.submissionErrors =
|
||||
{
|
||||
name: '',
|
||||
};
|
||||
this.hasSubmissionErrors = {
|
||||
name: false,
|
||||
};
|
||||
},
|
||||
submitCategory: function () {
|
||||
this.submitting = true;
|
||||
this.errorMessage = '';
|
||||
|
||||
// reset errors:
|
||||
this.resetErrors();
|
||||
|
||||
// build category array
|
||||
const submission = this.buildCategory();
|
||||
|
||||
let categories = new Post();
|
||||
categories
|
||||
.post(submission)
|
||||
.catch(this.processErrors)
|
||||
.then(this.processSuccess);
|
||||
},
|
||||
buildCategory: function () {
|
||||
return {
|
||||
name: this.name,
|
||||
};
|
||||
},
|
||||
dismissBanner: function () {
|
||||
this.errorMessage = '';
|
||||
},
|
||||
processSuccess: function (response) {
|
||||
if (!response) {
|
||||
return;
|
||||
}
|
||||
this.submitting = false;
|
||||
let message = {
|
||||
level: 'success',
|
||||
text: 'I am new category',
|
||||
show: true,
|
||||
action: {
|
||||
show: true,
|
||||
text: 'Go to category',
|
||||
link: {name: 'categories.show', params: {id: parseInt(response.data.data.id)}}
|
||||
}
|
||||
};
|
||||
// store flash
|
||||
this.$q.localStorage.set('flash', message);
|
||||
if (this.doReturnHere) {
|
||||
window.dispatchEvent(new CustomEvent('flash', {
|
||||
detail: {
|
||||
flash: this.$q.localStorage.getItem('flash')
|
||||
}
|
||||
}));
|
||||
}
|
||||
if (!this.doReturnHere) {
|
||||
// return to previous page.
|
||||
this.$router.go(-1);
|
||||
}
|
||||
|
||||
},
|
||||
processErrors: function (error) {
|
||||
if (error.response) {
|
||||
let errors = error.response.data; // => the response payload
|
||||
this.errorMessage = errors.message;
|
||||
console.log(errors);
|
||||
for (let i in errors.errors) {
|
||||
if (errors.errors.hasOwnProperty(i)) {
|
||||
this.submissionErrors[i] = errors.errors[i][0];
|
||||
this.hasSubmissionErrors[i] = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
this.submitting = false;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
177
frontend/src/pages/categories/Edit.vue
Normal file
177
frontend/src/pages/categories/Edit.vue
Normal file
@@ -0,0 +1,177 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<q-banner inline-actions rounded class="bg-orange text-white" v-if="'' !== errorMessage">
|
||||
{{ errorMessage }}
|
||||
<template v-slot:action>
|
||||
<q-btn flat @click="dismissBanner" label="Dismiss"/>
|
||||
</template>
|
||||
</q-banner>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-mx-md q-mt-md">
|
||||
<div class="col-12">
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">Edit category</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
<q-input
|
||||
:error-message="submissionErrors.name"
|
||||
:error="hasSubmissionErrors.name"
|
||||
bottom-slots :disable="disabledInput" type="text" clearable v-model="name" :label="$t('form.name')"
|
||||
outlined/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<q-card class="q-mt-xs">
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 text-right">
|
||||
<q-btn :disable="disabledInput" color="primary" label="Update" @click="submitCategory"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 text-right">
|
||||
<q-checkbox :disable="disabledInput" v-model="doReturnHere" left-label label="Return here"/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Get from "../../api/categories/get";
|
||||
import Put from "../../api/categories/put";
|
||||
|
||||
export default {
|
||||
name: "Edit",
|
||||
data() {
|
||||
return {
|
||||
submissionErrors: {},
|
||||
hasSubmissionErrors: {},
|
||||
submitting: false,
|
||||
doReturnHere: false,
|
||||
doResetForm: false,
|
||||
errorMessage: '',
|
||||
type: '',
|
||||
// category fields:
|
||||
id: 0,
|
||||
name: '',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
disabledInput: function () {
|
||||
return this.submitting;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.id = parseInt(this.$route.params.id);
|
||||
this.collectCategory();
|
||||
},
|
||||
methods: {
|
||||
collectCategory: function() {
|
||||
let get = new Get;
|
||||
get.get(this.id).then((response) => this.parseCategory(response));
|
||||
},
|
||||
parseCategory: function(response) {
|
||||
this.name = response.data.data.attributes.name;
|
||||
},
|
||||
resetErrors: function () {
|
||||
this.submissionErrors =
|
||||
{
|
||||
name: '',
|
||||
};
|
||||
this.hasSubmissionErrors = {
|
||||
name: false,
|
||||
};
|
||||
},
|
||||
submitCategory: function () {
|
||||
this.submitting = true;
|
||||
this.errorMessage = '';
|
||||
|
||||
// reset errors:
|
||||
this.resetErrors();
|
||||
|
||||
// build account array
|
||||
const submission = this.buildCategory();
|
||||
|
||||
let categories = new Put();
|
||||
categories
|
||||
.post(this.id, submission)
|
||||
.catch(this.processErrors)
|
||||
.then(this.processSuccess);
|
||||
},
|
||||
buildCategory: function () {
|
||||
return {
|
||||
name: this.name,
|
||||
};
|
||||
},
|
||||
dismissBanner: function () {
|
||||
this.errorMessage = '';
|
||||
},
|
||||
processSuccess: function (response) {
|
||||
this.$store.dispatch('fireflyiii/refreshCacheKey');
|
||||
if (!response) {
|
||||
return;
|
||||
}
|
||||
this.submitting = false;
|
||||
let message = {
|
||||
level: 'success',
|
||||
text: 'Category is updated',
|
||||
show: true,
|
||||
action: {
|
||||
show: true,
|
||||
text: 'Go to category',
|
||||
link: {name: 'categories.show', params: {id: parseInt(response.data.data.id)}}
|
||||
}
|
||||
};
|
||||
// store flash
|
||||
this.$q.localStorage.set('flash', message);
|
||||
if (this.doReturnHere) {
|
||||
window.dispatchEvent(new CustomEvent('flash', {
|
||||
detail: {
|
||||
flash: this.$q.localStorage.getItem('flash')
|
||||
}
|
||||
}));
|
||||
}
|
||||
if (!this.doReturnHere) {
|
||||
// return to previous page.
|
||||
this.$router.go(-1);
|
||||
}
|
||||
|
||||
},
|
||||
processErrors: function (error) {
|
||||
if (error.response) {
|
||||
let errors = error.response.data; // => the response payload
|
||||
this.errorMessage = errors.message;
|
||||
console.log(errors);
|
||||
for (let i in errors.errors) {
|
||||
if (errors.errors.hasOwnProperty(i)) {
|
||||
this.submissionErrors[i] = errors.errors[i][0];
|
||||
this.hasSubmissionErrors[i] = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
this.submitting = false;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
186
frontend/src/pages/categories/Index.vue
Normal file
186
frontend/src/pages/categories/Index.vue
Normal file
@@ -0,0 +1,186 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<q-table
|
||||
:title="$t('firefly.categories')"
|
||||
: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: 'categories.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: 'categories.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="deleteCategory(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: 'categories.show', params: {id: 0}}">Transactions without a category</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: 'categories.create'}" icon="fas fa-exchange-alt" label="New category"/>
|
||||
</q-fab>
|
||||
</q-page-sticky>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapGetters, useStore} from "vuex";
|
||||
import Destroy from "../../api/categories/destroy";
|
||||
import List from "../../api/categories/list";
|
||||
|
||||
export default {
|
||||
name: 'Index',
|
||||
watch: {
|
||||
$route(to) {
|
||||
// react to route changes...
|
||||
if ('categories.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: {
|
||||
deleteCategory: function (id, name) {
|
||||
this.$q.dialog({
|
||||
title: 'Confirm',
|
||||
message: 'Do you want to delete category "' + name + '"? Any and all transactions linked to this category will be spared.',
|
||||
cancel: true,
|
||||
persistent: true
|
||||
}).onOk(() => {
|
||||
this.destroyCategory(id);
|
||||
});
|
||||
},
|
||||
destroyCategory: function (id) {
|
||||
let destr = new Destroy;
|
||||
destr.destroy(id).then(() => {
|
||||
this.$store.dispatch('fireflyiii/refreshCacheKey');
|
||||
this.triggerUpdate();
|
||||
});
|
||||
},
|
||||
updateBreadcrumbs: function () {
|
||||
this.$route.meta.pageTitle = 'firefly.categories';
|
||||
this.$route.meta.breadcrumbs = [{title: 'categories'}];
|
||||
|
||||
},
|
||||
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>
|
||||
122
frontend/src/pages/categories/Show.vue
Normal file
122
frontend/src/pages/categories/Show.vue
Normal file
@@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<!-- Balance chart -->
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">{{ category.name }}</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
Name: {{ category.name }}<br>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-mt-sm">
|
||||
<div class="col-12">
|
||||
<LargeTable ref="table"
|
||||
title="Transactions"
|
||||
:rows="rows"
|
||||
:loading="loading"
|
||||
v-on:on-request="onRequest"
|
||||
:rows-number="rowsNumber"
|
||||
:rows-per-page="rowsPerPage"
|
||||
:page="page"
|
||||
>
|
||||
</LargeTable>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LargeTable from "../../components/transactions/LargeTable";
|
||||
import Get from "../../api/categories/get";
|
||||
import Parser from "../../api/transactions/parser";
|
||||
|
||||
export default {
|
||||
name: "Show",
|
||||
data() {
|
||||
return {
|
||||
category: {},
|
||||
rows: [],
|
||||
rowsNumber: 1,
|
||||
rowsPerPage: 10,
|
||||
page: 1,
|
||||
id: 0
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if ('no-category' === this.$route.params.id) {
|
||||
this.id = 0;
|
||||
this.getWithoutCategory();
|
||||
}
|
||||
if ('no-category' !== this.$route.params.id) {
|
||||
this.id = parseInt(this.$route.params.id);
|
||||
this.getCategory();
|
||||
}
|
||||
},
|
||||
components: {LargeTable},
|
||||
methods: {
|
||||
onRequest: function (payload) {
|
||||
this.page = payload.page;
|
||||
this.getCategory();
|
||||
},
|
||||
getWithoutCategory: function () {
|
||||
this.category = {name: '(without category)'};
|
||||
|
||||
this.loading = true;
|
||||
const parser = new Parser;
|
||||
this.rows = [];
|
||||
let get = new Get;
|
||||
get.transactionsWithoutCategory(this.page, this.getCacheKey).then(
|
||||
(response) => {
|
||||
let resp = parser.parseResponse(response);
|
||||
|
||||
this.rowsPerPage = resp.rowsPerPage;
|
||||
this.rowsNumber = resp.rowsNumber;
|
||||
this.rows = resp.rows;
|
||||
this.loading = false;
|
||||
}
|
||||
);
|
||||
|
||||
},
|
||||
getCategory: function () {
|
||||
let get = new Get;
|
||||
get.get(this.id).then((response) => this.parseCategory(response));
|
||||
|
||||
this.loading = true;
|
||||
const parser = new Parser;
|
||||
this.rows = [];
|
||||
|
||||
get.transactions(this.id, this.page, this.getCacheKey).then(
|
||||
(response) => {
|
||||
let resp = parser.parseResponse(response);
|
||||
|
||||
this.rowsPerPage = resp.rowsPerPage;
|
||||
this.rowsNumber = resp.rowsNumber;
|
||||
this.rows = resp.rows;
|
||||
this.loading = false;
|
||||
}
|
||||
);
|
||||
},
|
||||
parseCategory: function (response) {
|
||||
this.category = {
|
||||
name: response.data.data.attributes.name,
|
||||
};
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
201
frontend/src/pages/currencies/Create.vue
Normal file
201
frontend/src/pages/currencies/Create.vue
Normal file
@@ -0,0 +1,201 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<q-banner inline-actions rounded class="bg-orange text-white" v-if="'' !== errorMessage">
|
||||
{{ errorMessage }}
|
||||
<template v-slot:action>
|
||||
<q-btn flat @click="dismissBanner" label="Dismiss"/>
|
||||
</template>
|
||||
</q-banner>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-mx-md q-mt-md">
|
||||
<div class="col-12">
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">Info for new currency</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
<q-input
|
||||
:error-message="submissionErrors.name"
|
||||
:error="hasSubmissionErrors.name"
|
||||
bottom-slots :disable="disabledInput" type="text" clearable v-model="name" :label="$t('form.name')"
|
||||
outlined/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
<q-input
|
||||
:error-message="submissionErrors.code"
|
||||
:error="hasSubmissionErrors.code"
|
||||
bottom-slots :disable="disabledInput" type="text" clearable v-model="code" :label="$t('form.code')"
|
||||
outlined/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
<q-input
|
||||
:error-message="submissionErrors.symbol"
|
||||
:error="hasSubmissionErrors.symbol"
|
||||
bottom-slots :disable="disabledInput" type="text" clearable v-model="symbol" :label="$t('form.symbol')"
|
||||
outlined/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<q-card class="q-mt-xs">
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 text-right">
|
||||
<q-btn :disable="disabledInput" color="primary" label="Submit" @click="submitCurrency"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 text-right">
|
||||
<q-checkbox :disable="disabledInput" v-model="doReturnHere" left-label label="Return here to create another one"/>
|
||||
<br/>
|
||||
<q-checkbox v-model="doResetForm" left-label :disable="!doReturnHere || disabledInput" label="Reset form after submission"/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Post from "../../api/currencies/post";
|
||||
|
||||
export default {
|
||||
name: 'Create',
|
||||
data() {
|
||||
return {
|
||||
submissionErrors: {},
|
||||
hasSubmissionErrors: {},
|
||||
submitting: false,
|
||||
doReturnHere: false,
|
||||
doResetForm: false,
|
||||
errorMessage: '',
|
||||
type: '',
|
||||
// currency fields:
|
||||
name: '',
|
||||
code: '',
|
||||
symbol: '',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
disabledInput: function () {
|
||||
return this.submitting;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.resetForm();
|
||||
this.type = this.$route.params.type;
|
||||
},
|
||||
methods: {
|
||||
resetForm: function () {
|
||||
this.name = '';
|
||||
this.code = '';
|
||||
this.symbol = '';
|
||||
this.resetErrors();
|
||||
|
||||
},
|
||||
resetErrors: function () {
|
||||
this.submissionErrors =
|
||||
{
|
||||
name: '',
|
||||
code: '',
|
||||
symbol: '',
|
||||
};
|
||||
this.hasSubmissionErrors = {
|
||||
name: false,
|
||||
code: false,
|
||||
symbol: false
|
||||
};
|
||||
},
|
||||
submitCurrency: function () {
|
||||
this.submitting = true;
|
||||
this.errorMessage = '';
|
||||
|
||||
// reset errors:
|
||||
this.resetErrors();
|
||||
|
||||
// build currency array
|
||||
const submission = this.buildCurrency();
|
||||
|
||||
let currencies = new Post();
|
||||
currencies
|
||||
.post(submission)
|
||||
.catch(this.processErrors)
|
||||
.then(this.processSuccess);
|
||||
},
|
||||
buildCurrency: function () {
|
||||
return {
|
||||
name: this.name,
|
||||
code: this.code,
|
||||
symbol: this.symbol,
|
||||
};
|
||||
},
|
||||
dismissBanner: function () {
|
||||
this.errorMessage = '';
|
||||
},
|
||||
processSuccess: function (response) {
|
||||
if (!response) {
|
||||
return;
|
||||
}
|
||||
this.$store.dispatch('fireflyiii/refreshCacheKey');
|
||||
this.submitting = false;
|
||||
let message = {
|
||||
level: 'success',
|
||||
text: 'I am new currency',
|
||||
show: true,
|
||||
action: {
|
||||
show: true,
|
||||
text: 'Go to currency',
|
||||
link: {name: 'currencies.show', params: {code: parseInt(response.data.data.attributes.code)}}
|
||||
}
|
||||
};
|
||||
// store flash
|
||||
this.$q.localStorage.set('flash', message);
|
||||
if (this.doReturnHere) {
|
||||
window.dispatchEvent(new CustomEvent('flash', {
|
||||
detail: {
|
||||
flash: this.$q.localStorage.getItem('flash')
|
||||
}
|
||||
}));
|
||||
}
|
||||
if (!this.doReturnHere) {
|
||||
// return to previous page.
|
||||
this.$router.go(-1);
|
||||
}
|
||||
|
||||
},
|
||||
processErrors: function (error) {
|
||||
if (error.response) {
|
||||
let errors = error.response.data; // => the response payload
|
||||
this.errorMessage = errors.message;
|
||||
console.log(errors);
|
||||
for (let i in errors.errors) {
|
||||
if (errors.errors.hasOwnProperty(i)) {
|
||||
this.submissionErrors[i] = errors.errors[i][0];
|
||||
this.hasSubmissionErrors[i] = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
this.submitting = false;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
205
frontend/src/pages/currencies/Edit.vue
Normal file
205
frontend/src/pages/currencies/Edit.vue
Normal file
@@ -0,0 +1,205 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<q-banner inline-actions rounded class="bg-orange text-white" v-if="'' !== errorMessage">
|
||||
{{ errorMessage }}
|
||||
<template v-slot:action>
|
||||
<q-btn flat @click="dismissBanner" label="Dismiss"/>
|
||||
</template>
|
||||
</q-banner>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-mx-md q-mt-md">
|
||||
<div class="col-12">
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">Edit currency</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
<q-input
|
||||
:error-message="submissionErrors.name"
|
||||
:error="hasSubmissionErrors.name"
|
||||
bottom-slots :disable="disabledInput" type="text" clearable v-model="name" :label="$t('form.name')"
|
||||
outlined/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
<q-input
|
||||
:error-message="submissionErrors.code"
|
||||
:error="hasSubmissionErrors.code"
|
||||
bottom-slots :disable="disabledInput" type="text" clearable v-model="code" :label="$t('form.code')"
|
||||
outlined/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
<q-input
|
||||
:error-message="submissionErrors.symbol"
|
||||
:error="hasSubmissionErrors.symbol"
|
||||
bottom-slots :disable="disabledInput" type="text" clearable v-model="symbol" :label="$t('form.symbol')"
|
||||
outlined/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<q-card class="q-mt-xs">
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 text-right">
|
||||
<q-btn :disable="disabledInput" color="primary" label="Update" @click="submitCurrency"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 text-right">
|
||||
<q-checkbox :disable="disabledInput" v-model="doReturnHere" left-label label="Return here"/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Get from "../../api/currencies/get";
|
||||
import Put from "../../api/currencies/put";
|
||||
|
||||
export default {
|
||||
name: "Edit",
|
||||
data() {
|
||||
return {
|
||||
submissionErrors: {},
|
||||
hasSubmissionErrors: {},
|
||||
submitting: false,
|
||||
doReturnHere: false,
|
||||
doResetForm: false,
|
||||
errorMessage: '',
|
||||
type: '',
|
||||
// currency fields:
|
||||
code: '',
|
||||
name: '',
|
||||
symbol: '',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
disabledInput: function () {
|
||||
return this.submitting;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.code = this.$route.params.code;
|
||||
this.collectCurrency();
|
||||
},
|
||||
methods: {
|
||||
collectCurrency: function() {
|
||||
let get = new Get;
|
||||
get.get(this.code).then((response) => this.parseCurrency(response));
|
||||
},
|
||||
parseCurrency: function(response) {
|
||||
this.name = response.data.data.attributes.name;
|
||||
this.symbol = response.data.data.attributes.symbol;
|
||||
},
|
||||
resetErrors: function () {
|
||||
this.submissionErrors =
|
||||
{
|
||||
name: '',
|
||||
code: '',
|
||||
symbol: '',
|
||||
};
|
||||
this.hasSubmissionErrors = {
|
||||
name: false,
|
||||
code: false,
|
||||
symbol: false,
|
||||
};
|
||||
},
|
||||
submitCurrency: function () {
|
||||
this.submitting = true;
|
||||
this.errorMessage = '';
|
||||
|
||||
// reset errors:
|
||||
this.resetErrors();
|
||||
|
||||
// build account array
|
||||
const submission = this.buildCurrency();
|
||||
|
||||
let currencies = new Put();
|
||||
currencies
|
||||
.post(this.code, submission)
|
||||
.catch(this.processErrors)
|
||||
.then(this.processSuccess);
|
||||
},
|
||||
buildCurrency: function () {
|
||||
return {
|
||||
name: this.name,
|
||||
code: this.code,
|
||||
symbol: this.symbol
|
||||
};
|
||||
},
|
||||
dismissBanner: function () {
|
||||
this.errorMessage = '';
|
||||
},
|
||||
processSuccess: function (response) {
|
||||
this.$store.dispatch('fireflyiii/refreshCacheKey');
|
||||
if (!response) {
|
||||
return;
|
||||
}
|
||||
this.submitting = false;
|
||||
let message = {
|
||||
level: 'success',
|
||||
text: 'Currency is updated',
|
||||
show: true,
|
||||
action: {
|
||||
show: true,
|
||||
text: 'Go to currency',
|
||||
link: {name: 'currencies.show', params: {code: response.data.data.code}}
|
||||
}
|
||||
};
|
||||
// store flash
|
||||
this.$q.localStorage.set('flash', message);
|
||||
if (this.doReturnHere) {
|
||||
window.dispatchEvent(new CustomEvent('flash', {
|
||||
detail: {
|
||||
flash: this.$q.localStorage.getItem('flash')
|
||||
}
|
||||
}));
|
||||
}
|
||||
if (!this.doReturnHere) {
|
||||
// return to previous page.
|
||||
this.$router.go(-1);
|
||||
}
|
||||
|
||||
},
|
||||
processErrors: function (error) {
|
||||
if (error.response) {
|
||||
let errors = error.response.data; // => the response payload
|
||||
this.errorMessage = errors.message;
|
||||
console.log(errors);
|
||||
for (let i in errors.errors) {
|
||||
if (errors.errors.hasOwnProperty(i)) {
|
||||
this.submissionErrors[i] = errors.errors[i][0];
|
||||
this.hasSubmissionErrors[i] = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
this.submitting = false;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
189
frontend/src/pages/currencies/Index.vue
Normal file
189
frontend/src/pages/currencies/Index.vue
Normal file
@@ -0,0 +1,189 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<q-table
|
||||
:title="$t('firefly.currencies')"
|
||||
: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: 'currencies.show', params: {code: props.row.code} }" class="text-primary">
|
||||
{{ props.row.name }}
|
||||
</router-link>
|
||||
</q-td>
|
||||
<q-td key="name" :props="props">
|
||||
{{ props.row.code }}
|
||||
</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: 'currencies.edit', params: {code: props.row.code}}">
|
||||
<q-item-section>
|
||||
<q-item-label>Edit</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable v-close-popup @click="deleteCurrency(props.row.code, 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>
|
||||
<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: 'currencies.create'}" icon="fas fa-exchange-alt" label="New currency"/>
|
||||
</q-fab>
|
||||
</q-page-sticky>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapGetters, useStore} from "vuex";
|
||||
import Destroy from "../../api/currencies/destroy";
|
||||
import List from "../../api/currencies/list";
|
||||
|
||||
export default {
|
||||
name: 'Index',
|
||||
watch: {
|
||||
$route(to) {
|
||||
// react to route changes...
|
||||
if ('currencies.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: 'name', label: 'Code', field: 'code', 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: {
|
||||
deleteCurrency: function (code, name) {
|
||||
this.$q.dialog({
|
||||
title: 'Confirm',
|
||||
message: 'Do you want to delete currency "' + name + '"? Any and all transactions linked to this currency will be deleted as well.',
|
||||
cancel: true,
|
||||
persistent: true
|
||||
}).onOk(() => {
|
||||
this.destroyCurrency(code);
|
||||
// TODO needs error catch.
|
||||
});
|
||||
},
|
||||
destroyCurrency: function (code) {
|
||||
let destr = new Destroy;
|
||||
destr.destroy(code).then(() => {
|
||||
this.$store.dispatch('fireflyiii/refreshCacheKey');
|
||||
this.triggerUpdate();
|
||||
});
|
||||
},
|
||||
updateBreadcrumbs: function () {
|
||||
this.$route.meta.pageTitle = 'firefly.currencies';
|
||||
this.$route.meta.breadcrumbs = [{title: 'currencies'}];
|
||||
|
||||
},
|
||||
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,
|
||||
code: current.attributes.code,
|
||||
};
|
||||
this.rows.push(account);
|
||||
}
|
||||
}
|
||||
this.loading = false;
|
||||
}
|
||||
)
|
||||
;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
99
frontend/src/pages/currencies/Show.vue
Normal file
99
frontend/src/pages/currencies/Show.vue
Normal file
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<!-- Balance chart -->
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">{{ currency.name }}</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
Name: {{ currency.name }}<br>
|
||||
Code: {{ currency.code }}<br>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-mt-sm">
|
||||
<div class="col-12">
|
||||
<LargeTable ref="table"
|
||||
title="Transactions"
|
||||
:rows="rows"
|
||||
:loading="loading"
|
||||
v-on:on-request="onRequest"
|
||||
:rows-number="rowsNumber"
|
||||
:rows-per-page="rowsPerPage"
|
||||
:page="page"
|
||||
>
|
||||
</LargeTable>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LargeTable from "../../components/transactions/LargeTable";
|
||||
import Get from "../../api/currencies/get";
|
||||
import Parser from "../../api/transactions/parser";
|
||||
|
||||
export default {
|
||||
name: "Show",
|
||||
data() {
|
||||
return {
|
||||
currency: {},
|
||||
rows: [],
|
||||
rowsNumber: 1,
|
||||
rowsPerPage: 10,
|
||||
page: 1,
|
||||
code: '',
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.code = this.$route.params.code;
|
||||
this.getCurrency();
|
||||
},
|
||||
components: {LargeTable},
|
||||
methods: {
|
||||
onRequest: function (payload) {
|
||||
this.page = payload.page;
|
||||
this.getCurrency();
|
||||
},
|
||||
getCurrency: function () {
|
||||
let get = new Get;
|
||||
get.get(this.code).then((response) => this.parseCurrency(response));
|
||||
|
||||
this.loading = true;
|
||||
const parser = new Parser;
|
||||
this.rows = [];
|
||||
|
||||
get.transactions(this.code, this.page, this.getCacheKey).then(
|
||||
(response) => {
|
||||
let resp = parser.parseResponse(response);
|
||||
|
||||
this.rowsPerPage = resp.rowsPerPage;
|
||||
this.rowsNumber = resp.rowsNumber;
|
||||
this.rows = resp.rows;
|
||||
this.loading = false;
|
||||
}
|
||||
);
|
||||
},
|
||||
parseCurrency: function (response) {
|
||||
this.currency = {
|
||||
name: response.data.data.attributes.name,
|
||||
code: response.data.data.attributes.code,
|
||||
};
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
202
frontend/src/pages/dashboard/Boxes.vue
Normal file
202
frontend/src/pages/dashboard/Boxes.vue
Normal file
@@ -0,0 +1,202 @@
|
||||
<!--
|
||||
- Boxes.vue
|
||||
- Copyright (c) 2021 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 class="row">
|
||||
<div class="col-4 q-pr-sm q-pr-sm">
|
||||
<q-card bordered>
|
||||
<q-card-section class="q-pt-xs">
|
||||
<div class="text-overline">
|
||||
{{ $t('firefly.bills_to_pay') }}
|
||||
<span class="float-right">
|
||||
<span class="text-grey-4 fas fa-redo-alt" style="cursor: pointer;" @click="triggerForcedUpgrade"></span>
|
||||
</span>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-section class="q-pt-xs">
|
||||
<span v-for="balance in prefBillsUnpaid">{{ balance.value_parsed }}</span>
|
||||
<span v-for="(bill, index) in notPrefBillsUnpaid">
|
||||
{{ bill.value_parsed }}<span v-if="index+1 !== notPrefBillsUnpaid.length">, </span>
|
||||
</span>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-4 q-pr-sm q-pl-sm">
|
||||
|
||||
<q-card bordered>
|
||||
<q-card-section class="q-pt-xs">
|
||||
<div class="text-overline">
|
||||
{{ $t('firefly.left_to_spend') }}
|
||||
<span class="float-right">
|
||||
<span class="text-grey-4 fas fa-redo-alt" style="cursor: pointer;" @click="triggerForcedUpgrade"></span>
|
||||
</span>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-section class="q-pt-xs">
|
||||
<!-- left to spend in preferred currency -->
|
||||
<span v-for="left in prefLeftToSpend" :title="left.sub_title">{{ left.value_parsed }}</span>
|
||||
<span v-for="(left, index) in notPrefLeftToSpend">
|
||||
{{ left.value_parsed }}<span v-if="index+1 !== notPrefLeftToSpend.length">, </span>
|
||||
</span>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-4 q-pl-sm">
|
||||
<q-card bordered>
|
||||
<q-card-section class="q-pt-xs">
|
||||
<div class="text-overline">
|
||||
{{ $t('firefly.net_worth') }}
|
||||
<span class="float-right">
|
||||
<span class="text-grey-4 fas fa-redo-alt" style="cursor: pointer;" @click="triggerForcedUpgrade"></span>
|
||||
</span>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-section class="q-pt-xs">
|
||||
<span v-for="nw in prefNetWorth" :title="nw.sub_title">{{ nw.value_parsed }}</span>
|
||||
<span v-for="(nw, index) in notPrefNetWorth">
|
||||
{{ nw.value_parsed }}<span v-if="index+1 !== notPrefNetWorth.length">, </span>
|
||||
</span>
|
||||
<span v-if="0===notPrefNetWorth.length"> </span>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Basic from "src/api/summary/basic";
|
||||
import {mapGetters, useStore} from "vuex";
|
||||
|
||||
export default {
|
||||
name: 'Boxes',
|
||||
computed: {
|
||||
...mapGetters('fireflyiii', ['getCurrencyCode', 'getCurrencyId', 'getRange','getCacheKey']),
|
||||
prefBillsUnpaid: function () {
|
||||
return this.filterOnCurrency(this.billsUnpaid);
|
||||
},
|
||||
notPrefBillsUnpaid: function () {
|
||||
return this.filterOnNotCurrency(this.billsUnpaid);
|
||||
},
|
||||
prefLeftToSpend: function () {
|
||||
return this.filterOnCurrency(this.leftToSpend);
|
||||
},
|
||||
notPrefLeftToSpend: function () {
|
||||
return this.filterOnNotCurrency(this.leftToSpend);
|
||||
},
|
||||
prefNetWorth: function () {
|
||||
return this.filterOnCurrency(this.netWorth);
|
||||
},
|
||||
notPrefNetWorth: function () {
|
||||
return this.filterOnNotCurrency(this.netWorth);
|
||||
},
|
||||
},
|
||||
created() {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
summary: [],
|
||||
billsPaid: [],
|
||||
billsUnpaid: [],
|
||||
leftToSpend: [],
|
||||
netWorth: [],
|
||||
range: {
|
||||
start: null,
|
||||
end: null,
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
if (null === this.range.start || null === this.range.end) {
|
||||
// subscribe, then update:
|
||||
const $store = useStore();
|
||||
$store.subscribe((mutation) => {
|
||||
if ('fireflyiii/setRange' === mutation.type) {
|
||||
this.range = mutation.payload;
|
||||
this.triggerUpdate();
|
||||
}
|
||||
});
|
||||
}
|
||||
if (null !== this.getRange.start && null !== this.getRange.end) {
|
||||
this.start = this.getRange.start;
|
||||
this.end = this.getRange.end;
|
||||
this.triggerUpdate();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
triggerForcedUpgrade: function() {
|
||||
this.$store.dispatch('fireflyiii/refreshCacheKey');
|
||||
this.triggerUpdate();
|
||||
},
|
||||
triggerUpdate: function () {
|
||||
if (null !== this.getRange.start && null !== this.getRange.end) {
|
||||
const basic = new Basic;
|
||||
basic.list({start: this.getRange.start, end: this.getRange.end}, this.getCacheKey).then(data => {
|
||||
this.netWorth = this.getKeyedEntries(data.data, 'net-worth-in-');
|
||||
this.leftToSpend = this.getKeyedEntries(data.data, 'left-to-spend-in-');
|
||||
this.billsPaid = this.getKeyedEntries(data.data, 'bills-paid-in-');
|
||||
this.billsUnpaid = this.getKeyedEntries(data.data, 'bills-unpaid-in-');
|
||||
});
|
||||
}
|
||||
},
|
||||
getKeyedEntries(array, expected) {
|
||||
let result = [];
|
||||
for (const key in array) {
|
||||
if (array.hasOwnProperty(key)) {
|
||||
if (expected === key.substr(0, expected.length)) {
|
||||
result.push(array[key]);
|
||||
}
|
||||
}
|
||||
}
|
||||
return result;
|
||||
},
|
||||
filterOnCurrency(array) {
|
||||
let ret = [];
|
||||
for (const key in array) {
|
||||
if (array.hasOwnProperty(key)) {
|
||||
if (array[key].currency_id === this.getCurrencyId) {
|
||||
ret.push(array[key]);
|
||||
}
|
||||
}
|
||||
}
|
||||
// or just the first one:
|
||||
if (0 === ret.length && array.hasOwnProperty(0)) {
|
||||
ret.push(array[0]);
|
||||
}
|
||||
return ret;
|
||||
},
|
||||
filterOnNotCurrency(array) {
|
||||
let ret = [];
|
||||
for (const key in array) {
|
||||
if (array.hasOwnProperty(key)) {
|
||||
if (array[key].currency_id !== this.getCurrencyId) {
|
||||
ret.push(array[key]);
|
||||
}
|
||||
}
|
||||
}
|
||||
return ret;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
169
frontend/src/pages/dashboard/HomeChart.vue
Normal file
169
frontend/src/pages/dashboard/HomeChart.vue
Normal file
@@ -0,0 +1,169 @@
|
||||
<!--
|
||||
- HomeChart.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>
|
||||
<ApexChart width="100%" ref="chart" height="350" type="line" :options="options" :series="series"></ApexChart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import {defineAsyncComponent} from "vue";
|
||||
import Overview from '../../api/chart/account/overview';
|
||||
import {mapGetters, useStore} from "vuex";
|
||||
import format from "date-fns/format";
|
||||
import {useQuasar} from "quasar";
|
||||
|
||||
export default {
|
||||
name: "HomeChart",
|
||||
computed: {
|
||||
...mapGetters('fireflyiii', ['getRange', 'getCacheKey']),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
range: {
|
||||
start: null,
|
||||
end: null
|
||||
},
|
||||
loading: false,
|
||||
currencies: [],
|
||||
options: {
|
||||
theme: {
|
||||
mode: 'dark'
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
noData: {
|
||||
text: 'Loading...'
|
||||
},
|
||||
chart: {
|
||||
id: 'vuechart-home',
|
||||
toolbar: {
|
||||
show: true,
|
||||
tools: {
|
||||
download: false,
|
||||
selection: false,
|
||||
pan: false
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
formatter: this.numberFormatter
|
||||
}
|
||||
},
|
||||
labels: [],
|
||||
xaxis: {
|
||||
categories: [],
|
||||
},
|
||||
},
|
||||
series: [],
|
||||
locale: 'en-US',
|
||||
dateFormat: 'MMMM d, y',
|
||||
}
|
||||
},
|
||||
created() {
|
||||
const $q = useQuasar();
|
||||
this.locale = $q.lang.getLocale();
|
||||
this.dateFormat = this.$t('config.month_and_day_fns');
|
||||
},
|
||||
mounted() {
|
||||
const $q = useQuasar();
|
||||
this.options.theme.mode = $q.dark.isActive ? 'dark' : 'light';
|
||||
if (null === this.range.start || null === this.range.end) {
|
||||
// subscribe, then update:
|
||||
const $store = useStore();
|
||||
$store.subscribe((mutation, state) => {
|
||||
if ('fireflyiii/setRange' === mutation.type) {
|
||||
this.range = mutation.payload;
|
||||
this.buildChart();
|
||||
}
|
||||
});
|
||||
}
|
||||
if (null !== this.getRange.start && null !== this.getRange.end) {
|
||||
this.buildChart();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
numberFormatter: function (value, index) {
|
||||
let currencyCode = this.currencies[index] ?? 'EUR';
|
||||
return Intl.NumberFormat(this.locale, {style: 'currency', currency: currencyCode}).format(value);
|
||||
},
|
||||
buildChart: function () {
|
||||
if (null !== this.getRange.start && null !== this.getRange.end) {
|
||||
let start = this.getRange.start;
|
||||
let end = this.getRange.end;
|
||||
if (false === this.loading) {
|
||||
this.loading = true;
|
||||
const overview = new Overview();
|
||||
// generate labels:
|
||||
this.generateStaticLabels({start: start, end: end});
|
||||
overview.overview({start: start, end: end}, this.getCacheKey).then(data => {
|
||||
this.generateSeries(data.data)
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
generateSeries: function (data) {
|
||||
this.series = [];
|
||||
let series;
|
||||
for (let i in data) {
|
||||
if (data.hasOwnProperty(i)) {
|
||||
series = {};
|
||||
series.name = data[i].label;
|
||||
series.data = [];
|
||||
this.currencies.push(data[i].currency_code);
|
||||
for (let ii in data[i].entries) {
|
||||
series.data.push(data[i].entries[ii]);
|
||||
}
|
||||
this.series.push(series);
|
||||
}
|
||||
}
|
||||
this.loading = false;
|
||||
},
|
||||
generateStaticLabels: function (range) {
|
||||
let loop = new Date(range.start);
|
||||
let newDate;
|
||||
let labels = [];
|
||||
while (loop <= range.end) {
|
||||
labels.push(format(loop, this.dateFormat));
|
||||
newDate = loop.setDate(loop.getDate() + 1);
|
||||
loop = new Date(newDate);
|
||||
}
|
||||
this.options = {
|
||||
...this.options,
|
||||
...{
|
||||
labels: labels
|
||||
},
|
||||
};
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
ApexChart: defineAsyncComponent(() => import('vue3-apexcharts')),
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
79
frontend/src/pages/development/Index.vue
Normal file
79
frontend/src/pages/development/Index.vue
Normal file
@@ -0,0 +1,79 @@
|
||||
<!--
|
||||
- Index.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>
|
||||
<q-page>
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-7">
|
||||
<p>
|
||||
Hi! With your active support and feedback I'm capable of building this fancy new layout. So thank you for testing and playing around.
|
||||
I'm grateful for your help.
|
||||
</p>
|
||||
<p>
|
||||
The <strong>v2</strong> layout was built to be perfect for each page. This new <strong>v3</strong> layout has a different approach. I'm
|
||||
building a "minimum viable product", where each page has <em>minimal</em> functionality. But any functionality that's there should work. It
|
||||
may not do everything you need and stuff may be missing. The things that you see are things that work.
|
||||
</p>
|
||||
<p>
|
||||
If you spot problems, feel free to report them. Here are some known issues.
|
||||
</p>
|
||||
<ul>
|
||||
<li class="text-negative">You will lose data when you edit certain objects;</li>
|
||||
<li>Caching is fairly aggressive and a page refresh may be necessary to get new information. This is especially obvious when you make new transactions
|
||||
or accounts;
|
||||
</li>
|
||||
<li>Not all menu's are (un)folded correctly for all pages;</li>
|
||||
<li>Breadcrumbs are missing or incorrect;</li>
|
||||
<li>You can't make transaction splits;</li>
|
||||
<li>Accounts, budgets, transactions, etc. have only limited fields available in the edit, create and view screens;</li>
|
||||
<li>Occasionally, you may spot a "TODO". I've limited their presence, but sometimes I just need a placeholder;</li>
|
||||
<li>Missing translations, <code>firefly.abc</code> references, or transactions formatted in another locale;</li>
|
||||
</ul>
|
||||
<p>
|
||||
If you need to visit a <strong>v1</strong> alternative for the page you are seeing, please change the URL to
|
||||
<code>*/profile</code> (where <code>*</code> is your Firefly III URL). From there, you can navigate to any <strong>v1</strong> page.
|
||||
You may not be able to visit the v1 dashboard.
|
||||
</p>
|
||||
<p>
|
||||
Tickets on GitHub that concern v3 will be <em class="text-negative">closed</em>. This rule may change in the future. Until then, please leave your feedback here:
|
||||
</p>
|
||||
<ul>
|
||||
<li><a href="https://github.com/firefly-iii/firefly-iii/discussions/5589">GitHub discussion</a></li>
|
||||
<li><a href="https://gitter.im/firefly-iii/firefly-iii">Gitter.im chat</a></li>
|
||||
<li><a href="mailto:james@firefly-iii.org">james@firefly-iii.org</a></li>
|
||||
</ul>
|
||||
<p>
|
||||
Thanks again,<br>
|
||||
James
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Index"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
54
frontend/src/pages/export/Index.vue
Normal file
54
frontend/src/pages/export/Index.vue
Normal file
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">Export page</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<p>
|
||||
Just to see if this works. Button defaults to this year.
|
||||
</p>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<p>
|
||||
<q-btn @click="downloadTransactions">Download transactions</q-btn>
|
||||
</p>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Export from "../../api/data/export";
|
||||
import startOfYear from "date-fns/startOfYear";
|
||||
import endOfYear from "date-fns/endOfYear";
|
||||
import format from "date-fns/format";
|
||||
|
||||
export default {
|
||||
name: "Index",
|
||||
methods: {
|
||||
downloadTransactions: function () {
|
||||
let exp = new Export;
|
||||
let start = format(startOfYear(new Date), 'yyyy-MM-dd');
|
||||
let end = format(endOfYear(new Date), 'yyyy-MM-dd');
|
||||
exp.transactions(start, end).then((response) => {
|
||||
let label = 'export-transactions.csv';
|
||||
const blob = new Blob([response.data], {type: 'application/octet-stream'})
|
||||
const link = document.createElement('a')
|
||||
link.href = URL.createObjectURL(blob)
|
||||
link.download = label;
|
||||
link.click()
|
||||
URL.revokeObjectURL(link.href)
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
177
frontend/src/pages/groups/Edit.vue
Normal file
177
frontend/src/pages/groups/Edit.vue
Normal file
@@ -0,0 +1,177 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<q-banner inline-actions rounded class="bg-orange text-white" v-if="'' !== errorMessage">
|
||||
{{ errorMessage }}
|
||||
<template v-slot:action>
|
||||
<q-btn flat @click="dismissBanner" label="Dismiss"/>
|
||||
</template>
|
||||
</q-banner>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-mx-md q-mt-md">
|
||||
<div class="col-12">
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">Edit group</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
<q-input
|
||||
:error-message="submissionErrors.title"
|
||||
:error="hasSubmissionErrors.title"
|
||||
bottom-slots :disable="disabledInput" type="text" clearable v-model="title" :label="$t('form.title')"
|
||||
outlined/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<q-card class="q-mt-xs">
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 text-right">
|
||||
<q-btn :disable="disabledInput" color="primary" label="Update" @click="submitGroup"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 text-right">
|
||||
<q-checkbox :disable="disabledInput" v-model="doReturnHere" left-label label="Return here"/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Get from "../../api/groups/get";
|
||||
import Put from "../../api/groups/put";
|
||||
|
||||
export default {
|
||||
name: "Edit",
|
||||
data() {
|
||||
return {
|
||||
submissionErrors: {},
|
||||
hasSubmissionErrors: {},
|
||||
submitting: false,
|
||||
doReturnHere: false,
|
||||
doResetForm: false,
|
||||
errorMessage: '',
|
||||
type: '',
|
||||
// group fields:
|
||||
id: 0,
|
||||
title: '',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
disabledInput: function () {
|
||||
return this.submitting;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.id = parseInt(this.$route.params.id);
|
||||
this.collectGroup();
|
||||
},
|
||||
methods: {
|
||||
collectGroup: function() {
|
||||
let get = new Get;
|
||||
get.get(this.id).then((response) => this.parseGroup(response));
|
||||
},
|
||||
parseGroup: function(response) {
|
||||
this.title = response.data.data.attributes.title;
|
||||
},
|
||||
resetErrors: function () {
|
||||
this.submissionErrors =
|
||||
{
|
||||
title: '',
|
||||
};
|
||||
this.hasSubmissionErrors = {
|
||||
title: false,
|
||||
};
|
||||
},
|
||||
submitGroup: function () {
|
||||
this.submitting = true;
|
||||
this.errorMessage = '';
|
||||
|
||||
// reset errors:
|
||||
this.resetErrors();
|
||||
|
||||
// build account array
|
||||
const submission = this.buildGroup();
|
||||
|
||||
let groups = new Put();
|
||||
groups
|
||||
.post(this.id, submission)
|
||||
.catch(this.processErrors)
|
||||
.then(this.processSuccess);
|
||||
},
|
||||
buildGroup: function () {
|
||||
return {
|
||||
title: this.title,
|
||||
};
|
||||
},
|
||||
dismissBanner: function () {
|
||||
this.errorMessage = '';
|
||||
},
|
||||
processSuccess: function (response) {
|
||||
this.$store.dispatch('fireflyiii/refreshCacheKey');
|
||||
if (!response) {
|
||||
return;
|
||||
}
|
||||
this.submitting = false;
|
||||
let message = {
|
||||
level: 'success',
|
||||
text: 'Group is updated',
|
||||
show: true,
|
||||
action: {
|
||||
show: true,
|
||||
text: 'Go to group',
|
||||
link: {name: 'groups.show', params: {id: parseInt(response.data.data.id)}}
|
||||
}
|
||||
};
|
||||
// store flash
|
||||
this.$q.localStorage.set('flash', message);
|
||||
if (this.doReturnHere) {
|
||||
window.dispatchEvent(new CustomEvent('flash', {
|
||||
detail: {
|
||||
flash: this.$q.localStorage.getItem('flash')
|
||||
}
|
||||
}));
|
||||
}
|
||||
if (!this.doReturnHere) {
|
||||
// return to previous page.
|
||||
this.$router.go(-1);
|
||||
}
|
||||
|
||||
},
|
||||
processErrors: function (error) {
|
||||
if (error.response) {
|
||||
let errors = error.response.data; // => the response payload
|
||||
this.errorMessage = errors.message;
|
||||
console.log(errors);
|
||||
for (let i in errors.errors) {
|
||||
if (errors.errors.hasOwnProperty(i)) {
|
||||
this.submissionErrors[i] = errors.errors[i][0];
|
||||
this.hasSubmissionErrors[i] = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
this.submitting = false;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
171
frontend/src/pages/groups/Index.vue
Normal file
171
frontend/src/pages/groups/Index.vue
Normal file
@@ -0,0 +1,171 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<q-table
|
||||
:title="$t('firefly.object_groups')"
|
||||
: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="title" :props="props">
|
||||
<router-link :to="{ name: 'groups.show', params: {id: props.row.id} }" class="text-primary">
|
||||
{{ props.row.title }}
|
||||
</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: 'groups.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="deleteGroup(props.row.id, props.row.title)">
|
||||
<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>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapGetters, useStore} from "vuex";
|
||||
import Destroy from "../../api/groups/destroy";
|
||||
import List from "../../api/groups/list";
|
||||
|
||||
export default {
|
||||
name: 'Index',
|
||||
watch: {
|
||||
$route(to) {
|
||||
// react to route changes...
|
||||
if ('groups.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: 'title', label: 'Title', field: 'title', 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: {
|
||||
deleteGroup: function (code, title) {
|
||||
this.$q.dialog({
|
||||
title: 'Confirm',
|
||||
message: 'Do you want to delete group "' + title + '"? Any resources in this group will be saved.',
|
||||
cancel: true,
|
||||
persistent: true
|
||||
}).onOk(() => {
|
||||
this.destroyGroup(code);
|
||||
// TODO needs error catch.
|
||||
});
|
||||
},
|
||||
destroyGroup: function (code) {
|
||||
let destr = new Destroy;
|
||||
destr.destroy(code).then(() => {
|
||||
this.$store.dispatch('fireflyiii/refreshCacheKey');
|
||||
this.triggerUpdate();
|
||||
});
|
||||
},
|
||||
updateBreadcrumbs: function () {
|
||||
this.$route.meta.pageTitle = 'firefly.groups';
|
||||
this.$route.meta.breadcrumbs = [{title: 'groups'}];
|
||||
|
||||
},
|
||||
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 group = {
|
||||
id: current.id,
|
||||
title: current.attributes.title,
|
||||
};
|
||||
this.rows.push(group);
|
||||
}
|
||||
}
|
||||
this.loading = false;
|
||||
}
|
||||
)
|
||||
;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
58
frontend/src/pages/groups/Show.vue
Normal file
58
frontend/src/pages/groups/Show.vue
Normal file
@@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">{{ group.title }}</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
Title: {{ group.title }}<br>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Get from "../../api/groups/get";
|
||||
|
||||
export default {
|
||||
name: "Show",
|
||||
data() {
|
||||
return {
|
||||
group: {},
|
||||
id: 0
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.id = parseInt(this.$route.params.id);
|
||||
this.getGroup();
|
||||
},
|
||||
components: {},
|
||||
methods: {
|
||||
onRequest: function (payload) {
|
||||
this.page = payload.page;
|
||||
this.getGroup();
|
||||
},
|
||||
getGroup: function () {
|
||||
let get = new Get;
|
||||
get.get(this.id).then((response) => this.parseGroup(response));
|
||||
},
|
||||
parseGroup: function (response) {
|
||||
this.group = {
|
||||
title: response.data.data.attributes.title,
|
||||
};
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
252
frontend/src/pages/piggy-banks/Create.vue
Normal file
252
frontend/src/pages/piggy-banks/Create.vue
Normal file
@@ -0,0 +1,252 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<q-banner inline-actions rounded class="bg-orange text-white" v-if="'' !== errorMessage">
|
||||
{{ errorMessage }}
|
||||
<template v-slot:action>
|
||||
<q-btn flat @click="dismissBanner" label="Dismiss"/>
|
||||
</template>
|
||||
</q-banner>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-mx-md q-mt-md">
|
||||
<div class="col-12">
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">Info for new piggy bank</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
<q-input
|
||||
:error-message="submissionErrors.name"
|
||||
:error="hasSubmissionErrors.name"
|
||||
bottom-slots :disable="disabledInput" type="text" clearable v-model="name" :label="$t('form.name')"
|
||||
outlined/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
<q-select
|
||||
:error-message="submissionErrors.account_id"
|
||||
:error="hasSubmissionErrors.account_id"
|
||||
bottom-slots
|
||||
:disable="disabledInput"
|
||||
outlined
|
||||
v-model="account_id"
|
||||
emit-value class="q-pr-xs"
|
||||
map-options :options="accounts" label="Asset account"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
<q-input
|
||||
:error-message="submissionErrors.target_amount"
|
||||
:error="hasSubmissionErrors.target_amount"
|
||||
bottom-slots :disable="disabledInput" clearable :mask="balance_input_mask" reverse-fill-mask
|
||||
hint="Expects #.##" fill-mask="0"
|
||||
v-model="target_amount"
|
||||
:label="$t('firefly.target_amount')" outlined/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<q-card class="q-mt-xs">
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 text-right">
|
||||
<q-btn :disable="disabledInput" color="primary" label="Submit" @click="submitPiggyBank"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 text-right">
|
||||
<q-checkbox :disable="disabledInput" v-model="doReturnHere" left-label
|
||||
label="Return here to create another one"/>
|
||||
<br/>
|
||||
<q-checkbox v-model="doResetForm" left-label :disable="!doReturnHere || disabledInput"
|
||||
label="Reset form after submission"/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Post from "../../api/piggy-banks/post";
|
||||
import List from "../../api/accounts/list";
|
||||
import {mapGetters} from "vuex";
|
||||
import {getCacheKey} from "../../store/fireflyiii/getters";
|
||||
|
||||
export default {
|
||||
name: 'Create',
|
||||
data() {
|
||||
return {
|
||||
submissionErrors: {},
|
||||
hasSubmissionErrors: {},
|
||||
submitting: false,
|
||||
doReturnHere: false,
|
||||
doResetForm: false,
|
||||
errorMessage: '',
|
||||
balance_input_mask: '#.##',
|
||||
|
||||
// accounts
|
||||
accounts: [],
|
||||
|
||||
// piggy bank fields:
|
||||
name: '',
|
||||
account_id: null,
|
||||
target_amount: '',
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
account_id: function (value) {
|
||||
for (let key in this.accounts) {
|
||||
if (this.accounts.hasOwnProperty(key)) {
|
||||
let account = this.accounts[key];
|
||||
if (account.value === value) {
|
||||
let hash = '#';
|
||||
this.balance_input_mask = '#.' + hash.repeat(account.decimal_places);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('fireflyiii', ['getCacheKey']),
|
||||
disabledInput: function () {
|
||||
return this.submitting;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.resetForm();
|
||||
this.getAccounts();
|
||||
},
|
||||
methods: {
|
||||
resetForm: function () {
|
||||
this.name = '';
|
||||
this.account_id = '';
|
||||
this.target_amount = '';
|
||||
this.resetErrors();
|
||||
|
||||
},
|
||||
getAccounts: function () {
|
||||
this.getAccountPage(1);
|
||||
},
|
||||
getAccountPage: function (page) {
|
||||
|
||||
(new List).list('asset', page, this.getCacheKey).then((response) => {
|
||||
let totalPages = parseInt(response.data.meta.pagination.total_pages);
|
||||
// get next page:
|
||||
if (page < totalPages) {
|
||||
this.getAccountPage(page + 1);
|
||||
}
|
||||
// parse these accounts:
|
||||
for (let i in response.data.data) {
|
||||
if (response.data.data.hasOwnProperty(i)) {
|
||||
let account = response.data.data[i];
|
||||
this.accounts.push(
|
||||
{
|
||||
value: parseInt(account.id),
|
||||
label: account.attributes.name,
|
||||
decimal_places: parseInt(account.attributes.currency_decimal_places)
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
resetErrors: function () {
|
||||
this.submissionErrors =
|
||||
{
|
||||
name: '',
|
||||
account_id: '',
|
||||
target_amount: '',
|
||||
};
|
||||
this.hasSubmissionErrors = {
|
||||
name: false,
|
||||
account_id: false,
|
||||
target_amount: false,
|
||||
};
|
||||
},
|
||||
submitPiggyBank: function () {
|
||||
this.submitting = true;
|
||||
this.errorMessage = '';
|
||||
|
||||
// reset errors:
|
||||
this.resetErrors();
|
||||
|
||||
// build category array
|
||||
const submission = this.buildPiggyBank();
|
||||
|
||||
(new Post())
|
||||
.post(submission)
|
||||
.catch(this.processErrors)
|
||||
.then(this.processSuccess);
|
||||
},
|
||||
buildPiggyBank: function () {
|
||||
return {
|
||||
name: this.name,
|
||||
account_id: this.account_id,
|
||||
target_amount: this.target_amount
|
||||
};
|
||||
},
|
||||
dismissBanner: function () {
|
||||
this.errorMessage = '';
|
||||
},
|
||||
processSuccess: function (response) {
|
||||
if (!response) {
|
||||
return;
|
||||
}
|
||||
this.submitting = false;
|
||||
let message = {
|
||||
level: 'success',
|
||||
text: 'I am new piggy',
|
||||
show: true,
|
||||
action: {
|
||||
show: true,
|
||||
text: 'Go to piggy',
|
||||
link: {name: 'piggy-banks.show', params: {id: parseInt(response.data.data.id)}}
|
||||
}
|
||||
};
|
||||
// store flash
|
||||
this.$q.localStorage.set('flash', message);
|
||||
if (this.doReturnHere) {
|
||||
window.dispatchEvent(new CustomEvent('flash', {
|
||||
detail: {
|
||||
flash: this.$q.localStorage.getItem('flash')
|
||||
}
|
||||
}));
|
||||
}
|
||||
if (!this.doReturnHere) {
|
||||
// return to previous page.
|
||||
this.$router.go(-1);
|
||||
}
|
||||
|
||||
},
|
||||
processErrors: function (error) {
|
||||
if (error.response) {
|
||||
let errors = error.response.data; // => the response payload
|
||||
this.errorMessage = errors.message;
|
||||
console.log(errors);
|
||||
for (let i in errors.errors) {
|
||||
if (errors.errors.hasOwnProperty(i)) {
|
||||
this.submissionErrors[i] = errors.errors[i][0];
|
||||
this.hasSubmissionErrors[i] = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
this.submitting = false;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
176
frontend/src/pages/piggy-banks/Edit.vue
Normal file
176
frontend/src/pages/piggy-banks/Edit.vue
Normal file
@@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<q-banner inline-actions rounded class="bg-orange text-white" v-if="'' !== errorMessage">
|
||||
{{ errorMessage }}
|
||||
<template v-slot:action>
|
||||
<q-btn flat @click="dismissBanner" label="Dismiss"/>
|
||||
</template>
|
||||
</q-banner>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-mx-md q-mt-md">
|
||||
<div class="col-12">
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">Edit piggy bank</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
<q-input
|
||||
:error-message="submissionErrors.name"
|
||||
:error="hasSubmissionErrors.name"
|
||||
bottom-slots :disable="disabledInput" type="text" clearable v-model="name" :label="$t('form.name')"
|
||||
outlined/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<q-card class="q-mt-xs">
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 text-right">
|
||||
<q-btn :disable="disabledInput" color="primary" label="Update" @click="submitPiggyBank"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 text-right">
|
||||
<q-checkbox :disable="disabledInput" v-model="doReturnHere" left-label label="Return here"/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Get from "../../api/piggy-banks/get";
|
||||
import Put from "../../api/piggy-banks/put";
|
||||
|
||||
export default {
|
||||
name: "Edit",
|
||||
data() {
|
||||
return {
|
||||
submissionErrors: {},
|
||||
hasSubmissionErrors: {},
|
||||
submitting: false,
|
||||
doReturnHere: false,
|
||||
doResetForm: false,
|
||||
errorMessage: '',
|
||||
|
||||
// piggy bank fields:
|
||||
id: 0,
|
||||
name: '',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
disabledInput: function () {
|
||||
return this.submitting;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.id = parseInt(this.$route.params.id);
|
||||
this.collectPiggyBank();
|
||||
},
|
||||
methods: {
|
||||
collectPiggyBank: function() {
|
||||
let get = new Get;
|
||||
get.get(this.id).then((response) => this.parsePiggyBank(response));
|
||||
},
|
||||
parsePiggyBank: function(response) {
|
||||
this.name = response.data.data.attributes.name;
|
||||
},
|
||||
resetErrors: function () {
|
||||
this.submissionErrors =
|
||||
{
|
||||
name: '',
|
||||
};
|
||||
this.hasSubmissionErrors = {
|
||||
name: false,
|
||||
};
|
||||
},
|
||||
submitPiggyBank: function () {
|
||||
this.submitting = true;
|
||||
this.errorMessage = '';
|
||||
|
||||
// reset errors:
|
||||
this.resetErrors();
|
||||
|
||||
// build account array
|
||||
const submission = this.buildPiggyBank();
|
||||
|
||||
(new Put())
|
||||
.post(this.id, submission)
|
||||
.catch(this.processErrors)
|
||||
.then(this.processSuccess);
|
||||
},
|
||||
buildPiggyBank: function () {
|
||||
return {
|
||||
name: this.name,
|
||||
};
|
||||
},
|
||||
dismissBanner: function () {
|
||||
this.errorMessage = '';
|
||||
},
|
||||
processSuccess: function (response) {
|
||||
this.$store.dispatch('fireflyiii/refreshCacheKey');
|
||||
if (!response) {
|
||||
return;
|
||||
}
|
||||
this.submitting = false;
|
||||
let message = {
|
||||
level: 'success',
|
||||
text: 'Piggy is updated',
|
||||
show: true,
|
||||
action: {
|
||||
show: true,
|
||||
text: 'Go to piggy',
|
||||
link: {name: 'piggy-banks.show', params: {id: parseInt(response.data.data.id)}}
|
||||
}
|
||||
};
|
||||
// store flash
|
||||
this.$q.localStorage.set('flash', message);
|
||||
if (this.doReturnHere) {
|
||||
window.dispatchEvent(new CustomEvent('flash', {
|
||||
detail: {
|
||||
flash: this.$q.localStorage.getItem('flash')
|
||||
}
|
||||
}));
|
||||
}
|
||||
if (!this.doReturnHere) {
|
||||
// return to previous page.
|
||||
this.$router.go(-1);
|
||||
}
|
||||
|
||||
},
|
||||
processErrors: function (error) {
|
||||
if (error.response) {
|
||||
let errors = error.response.data; // => the response payload
|
||||
this.errorMessage = errors.message;
|
||||
console.log(errors);
|
||||
for (let i in errors.errors) {
|
||||
if (errors.errors.hasOwnProperty(i)) {
|
||||
this.submissionErrors[i] = errors.errors[i][0];
|
||||
this.hasSubmissionErrors[i] = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
this.submitting = false;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
182
frontend/src/pages/piggy-banks/Index.vue
Normal file
182
frontend/src/pages/piggy-banks/Index.vue
Normal file
@@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<q-table
|
||||
:title="$t('firefly.piggy-banks')"
|
||||
: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: 'piggy-banks.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: 'piggy-banks.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="deletePiggyBank(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>
|
||||
<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: 'piggy-banks.create'}" icon="fas fa-exchange-alt" label="New piggy bank"/>
|
||||
</q-fab>
|
||||
</q-page-sticky>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapGetters, useStore} from "vuex";
|
||||
import Destroy from "../../api/piggy-banks/destroy";
|
||||
import List from "../../api/piggy-banks/list";
|
||||
|
||||
export default {
|
||||
name: 'Index',
|
||||
watch: {
|
||||
$route(to) {
|
||||
// react to route changes...
|
||||
if ('piggy-banks.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() {
|
||||
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: {
|
||||
deletePiggyBank: function (id, name) {
|
||||
this.$q.dialog({
|
||||
title: 'Confirm',
|
||||
message: 'Do you want to delete piggy bank "' + name + '"?',
|
||||
cancel: true,
|
||||
persistent: true
|
||||
}).onOk(() => {
|
||||
this.destroyPiggyBank(id);
|
||||
});
|
||||
},
|
||||
destroyPiggyBank: function (id) {
|
||||
let destr = new Destroy;
|
||||
destr.destroy(id).then(() => {
|
||||
this.$store.dispatch('fireflyiii/refreshCacheKey');
|
||||
this.triggerUpdate();
|
||||
});
|
||||
},
|
||||
updateBreadcrumbs: function () {
|
||||
this.$route.meta.pageTitle = 'firefly.piggy-banks';
|
||||
this.$route.meta.breadcrumbs = [{title: 'piggy-banks'}];
|
||||
|
||||
},
|
||||
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>
|
||||
57
frontend/src/pages/piggy-banks/Show.vue
Normal file
57
frontend/src/pages/piggy-banks/Show.vue
Normal file
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<!-- Balance chart -->
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">{{ piggyBank.name }}</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
Name: {{ piggyBank.name }}<br>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Get from "../../api/piggy-banks/get";
|
||||
|
||||
export default {
|
||||
name: "Show",
|
||||
data() {
|
||||
return {
|
||||
piggyBank: {},
|
||||
id: 0
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.id = parseInt(this.$route.params.id);
|
||||
this.getPiggyBank();
|
||||
},
|
||||
methods: {
|
||||
onRequest: function (payload) {
|
||||
this.page = payload.page;
|
||||
this.getPiggyBank();
|
||||
},
|
||||
getPiggyBank: function () {
|
||||
(new Get).get(this.id).then((response) => this.parsePiggyBank(response));
|
||||
},
|
||||
parsePiggyBank: function (response) {
|
||||
this.piggyBank = {
|
||||
name: response.data.data.attributes.name,
|
||||
};
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
390
frontend/src/pages/preferences/Index.vue
Normal file
390
frontend/src/pages/preferences/Index.vue
Normal file
@@ -0,0 +1,390 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-xl-4 col-lg-6 col-md-12 q-pa-xs">
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">Language and locale
|
||||
<span class="text-secondary" v-if="true === isOk.language"><span
|
||||
class="far fa-check-circle"></span></span>
|
||||
<span class="text-blue" v-if="true === isLoading.language"><span
|
||||
class="fas fa-spinner fa-spin"></span></span>
|
||||
<span class="text-red" v-if="true === isFailure.language"><span
|
||||
class="fas fa-skull-crossbones"></span> <small>Please refresh the page...</small></span>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
|
||||
<q-select
|
||||
bottom-slots
|
||||
outlined
|
||||
v-model="language" emit-value
|
||||
map-options :options="languages" label="I prefer the following language"/>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12 q-pa-xs">
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">Accounts on the home screen
|
||||
|
||||
<span class="text-secondary" v-if="true === isOk.accounts"><span
|
||||
class="far fa-check-circle"></span></span>
|
||||
<span class="text-blue" v-if="true === isLoading.accounts"><span
|
||||
class="fas fa-spinner fa-spin"></span></span>
|
||||
<span class="text-red" v-if="true === isFailure.accounts"><span
|
||||
class="fas fa-skull-crossbones"></span> <small>Please refresh the page...</small></span>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<q-select
|
||||
bottom-slots
|
||||
outlined
|
||||
multiple
|
||||
use-chips
|
||||
v-model="accounts" emit-value
|
||||
map-options :options="allAccounts" label="I want to see these accounts on the dashboard"/>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12 q-pa-xs">
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">View range and list size
|
||||
|
||||
<span class="text-secondary" v-if="true === isOk.pageSize"><span
|
||||
class="far fa-check-circle"></span></span>
|
||||
<span class="text-blue" v-if="true === isLoading.pageSize"><span
|
||||
class="fas fa-spinner fa-spin"></span></span>
|
||||
<span class="text-red" v-if="true === isFailure.pageSize"><span
|
||||
class="fas fa-skull-crossbones"></span> <small>Please refresh the page...</small></span>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<q-input outlined v-model="pageSize" type="number" step="1" label="Page size"/>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<q-select
|
||||
bottom-slots
|
||||
outlined
|
||||
v-model="viewRange"
|
||||
emit-value
|
||||
map-options :options="viewRanges" label="Default period and view range"/>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12 q-pa-xs">
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">Optional transaction fields
|
||||
|
||||
<span class="text-secondary" v-if="true === isOk.transactionFields"><span
|
||||
class="far fa-check-circle"></span></span>
|
||||
<span class="text-blue" v-if="true === isLoading.transactionFields"><span
|
||||
class="fas fa-spinner fa-spin"></span></span>
|
||||
<span class="text-red" v-if="true === isFailure.transactionFields"><span
|
||||
class="fas fa-skull-crossbones"></span> <small>Please refresh the page...</small></span>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-tabs
|
||||
v-model="tab" dense
|
||||
>
|
||||
<q-tab name="date" label="Date fields"/>
|
||||
<q-tab name="meta" label="Meta data fields"/>
|
||||
<q-tab name="ref" label="Reference fields"/>
|
||||
</q-tabs>
|
||||
<q-tab-panels v-model="tab" animated swipeable>
|
||||
<q-tab-panel name="date">
|
||||
<q-option-group
|
||||
:options="allTransactionFields.date"
|
||||
type="checkbox"
|
||||
v-model="transactionFields.date"
|
||||
/>
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="meta">
|
||||
<q-option-group
|
||||
:options="allTransactionFields.meta"
|
||||
type="checkbox"
|
||||
v-model="transactionFields.meta"
|
||||
/>
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="ref">
|
||||
<q-option-group
|
||||
:options="allTransactionFields.ref"
|
||||
type="checkbox"
|
||||
v-model="transactionFields.ref"
|
||||
/>
|
||||
</q-tab-panel>
|
||||
</q-tab-panels>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Configuration from "../../api/system/configuration";
|
||||
import Put from "../../api/preferences/put";
|
||||
import Preferences from "../../api/preferences";
|
||||
import List from "../../api/accounts/list";
|
||||
import {mapGetters} from "vuex";
|
||||
|
||||
export default {
|
||||
name: 'Index',
|
||||
mounted() {
|
||||
this.isOk = {
|
||||
language: true,
|
||||
accounts: true,
|
||||
pageSize: true,
|
||||
transactionFields: true,
|
||||
};
|
||||
this.isLoading = {
|
||||
language: false,
|
||||
accounts: false,
|
||||
pageSize: false,
|
||||
transactionFields: false,
|
||||
};
|
||||
this.isFailure = {
|
||||
language: false,
|
||||
accounts: false,
|
||||
pageSize: false,
|
||||
transactionFields: false,
|
||||
};
|
||||
// get select lists for certain preferences
|
||||
this.getLanguages();
|
||||
this.getLanguage();
|
||||
this.getAssetAccounts().then(() => {
|
||||
this.getPreferredAccounts()
|
||||
});
|
||||
this.getViewRanges().then(() => {
|
||||
this.getPreferredViewRange()
|
||||
});
|
||||
this.getPageSize();
|
||||
this.getOptionalFields();
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// data for select lists
|
||||
languages: [],
|
||||
allAccounts: [],
|
||||
tab: 'date',
|
||||
allTransactionFields: {
|
||||
date: [
|
||||
{label: 'Interest date', value: 'interest_date'},
|
||||
{label: 'Book date', value: 'book_date'},
|
||||
{label: 'Processing date', value: 'process_date'},
|
||||
{label: 'Due date', value: 'due_date'},
|
||||
{label: 'Payment date', value: 'payment_date'},
|
||||
{label: 'Invoice date', value: 'invoice_date'},
|
||||
],
|
||||
meta: [
|
||||
{label: 'Notes', value: 'notes'},
|
||||
{label: 'Location', value: 'location'},
|
||||
{label: 'Attachments', value: 'attachments'},
|
||||
],
|
||||
ref: [
|
||||
{label: 'Internal reference', value: 'internal_reference'},
|
||||
{label: 'Transaction links', value: 'links'},
|
||||
{label: 'External URL', value: 'external_url'},
|
||||
{label: 'External ID', value: 'external_id'},
|
||||
]
|
||||
},
|
||||
viewRanges: [],
|
||||
|
||||
// is loading:
|
||||
isOk: {},
|
||||
isLoading: {},
|
||||
isFailure: {},
|
||||
|
||||
// preferences:
|
||||
language: 'en_US',
|
||||
viewRange: '1M',
|
||||
pageSize: 50,
|
||||
accounts: [],
|
||||
transactionFields: {
|
||||
date: [],
|
||||
meta: [],
|
||||
ref: []
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
pageSize: function (value) {
|
||||
this.isOk.language = false;
|
||||
this.isLoading.language = true;
|
||||
(new Put).put('listPageSize', value).then(() => {
|
||||
this.$store.dispatch('fireflyiii/refreshCacheKey');
|
||||
this.isOk.pageSize = true;
|
||||
this.isLoading.pageSize = false;
|
||||
this.isFailure.pageSize = false;
|
||||
}).catch(() => {
|
||||
this.isOk.pageSize = false;
|
||||
this.isLoading.pageSize = false;
|
||||
this.isFailure.pageSize = true;
|
||||
});
|
||||
},
|
||||
'transactionFields.date': function () {
|
||||
this.submitTransactionFields();
|
||||
},
|
||||
'transactionFields.meta': function () {
|
||||
this.submitTransactionFields();
|
||||
},
|
||||
'transactionFields.ref': function () {
|
||||
this.submitTransactionFields();
|
||||
},
|
||||
language: function (value) {
|
||||
this.isOk.language = false;
|
||||
this.isLoading.language = true;
|
||||
(new Put).put('language', value).then(() => {
|
||||
this.$store.dispatch('fireflyiii/refreshCacheKey');
|
||||
this.isOk.language = true;
|
||||
this.isLoading.language = false;
|
||||
this.isFailure.language = false;
|
||||
}).catch(() => {
|
||||
this.isOk.language = false;
|
||||
this.isLoading.language = false;
|
||||
this.isFailure.language = true;
|
||||
});
|
||||
},
|
||||
accounts: function (value) {
|
||||
(new Put).put('frontpageAccounts', value).then(() => {
|
||||
this.$store.dispatch('fireflyiii/refreshCacheKey');
|
||||
this.isOk.accounts = true;
|
||||
this.isLoading.accounts = false;
|
||||
this.isFailure.accounts = false;
|
||||
}).catch(() => {
|
||||
this.isOk.accounts = false;
|
||||
this.isLoading.accounts = false;
|
||||
this.isFailure.accounts = true;
|
||||
});
|
||||
},
|
||||
viewRange: function (value) {
|
||||
(new Put).put('viewRange', value).then(() => {
|
||||
this.$store.dispatch('fireflyiii/refreshCacheKey');
|
||||
this.isOk.pageSize = true;
|
||||
this.isLoading.pageSize = false;
|
||||
this.isFailure.pageSize = false;
|
||||
}).catch(() => {
|
||||
this.isOk.pageSize = false;
|
||||
this.isLoading.pageSize = false;
|
||||
this.isFailure.pageSize = true;
|
||||
});
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('fireflyiii', ['getCacheKey']),
|
||||
},
|
||||
methods: {
|
||||
getAssetAccounts: function () {
|
||||
return this.getAssetAccountPage(1);
|
||||
},
|
||||
getAssetAccountPage: function (page) {
|
||||
return (new List).list('asset', page, this.getCacheKey).then((response) => {
|
||||
let totalPages = parseInt(response.data.meta.pagination.total_pages);
|
||||
|
||||
// parse accounts:
|
||||
for (let i in response.data.data) {
|
||||
if (response.data.data.hasOwnProperty(i)) {
|
||||
let current = response.data.data[i];
|
||||
this.allAccounts.push({value: parseInt(current.id), label: current.attributes.name});
|
||||
}
|
||||
}
|
||||
if (totalPages > page) {
|
||||
this.getAssetAccountPage(page + 1);
|
||||
}
|
||||
});
|
||||
},
|
||||
submitTransactionFields: function() {
|
||||
let submission = {};
|
||||
for(let i in this.transactionFields) {
|
||||
if(this.transactionFields.hasOwnProperty(i)) {
|
||||
let set = this.transactionFields[i];
|
||||
for(let ii in set) {
|
||||
if(set.hasOwnProperty(ii)) {
|
||||
let value = set[ii];
|
||||
submission[value] = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
(new Put).put('transaction_journal_optional_fields', submission).then(() => {
|
||||
this.$store.dispatch('fireflyiii/refreshCacheKey');
|
||||
this.isOk.transactionFields = true;
|
||||
this.isLoading.transactionFields = false;
|
||||
this.isFailure.transactionFields = false;
|
||||
}).catch(() => {
|
||||
this.isOk.transactionFields = false;
|
||||
this.isLoading.transactionFields = false;
|
||||
this.isFailure.transactionFields = true;
|
||||
});
|
||||
},
|
||||
getOptionalFields: function () {
|
||||
(new Preferences).getByName('transaction_journal_optional_fields').then((response) => {
|
||||
let preferences = response.data.data.attributes.data;
|
||||
for (let i in preferences) {
|
||||
// loop over allTransactionFields
|
||||
for (let ii in this.allTransactionFields) {
|
||||
if (this.allTransactionFields.hasOwnProperty(ii)) {
|
||||
let set = this.allTransactionFields[ii];
|
||||
for (let iii in set) {
|
||||
if (set.hasOwnProperty(iii)) {
|
||||
let field = set[iii];
|
||||
if (i === field.value && true === preferences[i]) {
|
||||
this.transactionFields[ii].push(i);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
getLanguage: function () {
|
||||
(new Preferences).getByName('language').then((response) => {
|
||||
this.language = response.data.data.attributes.data;
|
||||
})
|
||||
},
|
||||
getPageSize: function () {
|
||||
(new Preferences).getByName('listPageSize').then((response) => {
|
||||
this.pageSize = response.data.data.attributes.data;
|
||||
})
|
||||
},
|
||||
getPreferredAccounts: function () {
|
||||
(new Preferences).getByName('frontpageAccounts').then((response) => {
|
||||
this.accounts = response.data.data.attributes.data;
|
||||
})
|
||||
},
|
||||
getPreferredViewRange: function () {
|
||||
(new Preferences).getByName('viewRange').then((response) => {
|
||||
this.viewRange = response.data.data.attributes.data;
|
||||
})
|
||||
},
|
||||
getLanguages: function () {
|
||||
// get languages
|
||||
let config = new Configuration();
|
||||
config.get('firefly.languages').then((response) => {
|
||||
let obj = response.data.data.value;
|
||||
for (let key in obj) {
|
||||
if (obj.hasOwnProperty(key)) {
|
||||
let lang = obj[key];
|
||||
this.languages.push({value: key, label: lang.name_locale + ' (' + lang.name_english + ')'});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
getViewRanges: function () {
|
||||
// get languages
|
||||
let config = new Configuration();
|
||||
return config.get('firefly.valid_view_ranges').then((response) => {
|
||||
let obj = response.data.data.value;
|
||||
for (let key in obj) {
|
||||
if (obj.hasOwnProperty(key)) {
|
||||
let lang = obj[key];
|
||||
this.viewRanges.push({value: lang, label: this.$t('firefly.pref_' + lang)});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
26
frontend/src/pages/profile/Data.vue
Normal file
26
frontend/src/pages/profile/Data.vue
Normal file
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<!-- TODO Authentication different page -->
|
||||
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-xl-4 col-lg-6 col-md-12 q-pa-xs">
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
Empty / TODO
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'Data',
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
148
frontend/src/pages/profile/Index.vue
Normal file
148
frontend/src/pages/profile/Index.vue
Normal file
@@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<!-- TODO Authentication different page -->
|
||||
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-xl-4 col-lg-6 col-md-12 q-pa-xs">
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">Email address</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<q-input outlined type="email" required v-model="emailAddress" label="Email address">
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="fas fa-envelope"/>
|
||||
</template>
|
||||
</q-input>
|
||||
<p class="text-primary">
|
||||
If you change your email address you will be logged out. You must confirm your address change before you can login again.
|
||||
</p>
|
||||
</q-card-section>
|
||||
<q-card-actions v-if="emailTouched">
|
||||
<q-btn flat @click="confirmAddressChange">Change address</q-btn>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</div>
|
||||
<!--
|
||||
<div class="col-xl-4 col-lg-6 col-md-12 q-pa-xs">
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">Password</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<p>
|
||||
(input) (input)
|
||||
</p>
|
||||
<p class="text-primary">
|
||||
Change password instructions here. Also needs logout. Button does not work.
|
||||
</p>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<!--
|
||||
<div class="col-xl-4 col-lg-6 col-md-12 q-pa-xs">
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">2FA</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<p class="text-primary">
|
||||
Here
|
||||
</p>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<!--
|
||||
<div class="col-xl-4 col-lg-6 col-md-12 q-pa-xs">
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">Session management</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<p class="text-primary">
|
||||
Explanation here
|
||||
</p>
|
||||
</q-card-section>
|
||||
<q-card-actions>
|
||||
Logout one / Logout all
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</div>
|
||||
-->
|
||||
</div>
|
||||
|
||||
<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: 'profile.data' }" icon="fas fa-database" label="Manage data"/>
|
||||
</q-fab>
|
||||
</q-page-sticky>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AboutUser from "../../api/system/user";
|
||||
|
||||
export default {
|
||||
name: 'Index',
|
||||
data() {
|
||||
return {
|
||||
tab: 'mails',
|
||||
id: 0,
|
||||
emailAddress: '',
|
||||
emailOriginal: '',
|
||||
emailTouched: false,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
emailAddress: function (value) {
|
||||
this.emailTouched = false;
|
||||
if (this.emailOriginal !== value) {
|
||||
this.emailTouched = true;
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getUserInfo();
|
||||
},
|
||||
methods: {
|
||||
getUserInfo: function () {
|
||||
(new AboutUser).get().then((response) => {
|
||||
this.emailAddress = response.data.data.attributes.email;
|
||||
this.emailOriginal = response.data.data.attributes.email;
|
||||
this.id = parseInt(response.data.data.id);
|
||||
});
|
||||
},
|
||||
confirmAddressChange: function () {
|
||||
this.$q.dialog({
|
||||
title: 'Confirm',
|
||||
message: 'Are you sure?',
|
||||
cancel: true,
|
||||
persistent: false
|
||||
}).onOk(() => {
|
||||
this.submitAddressChange();
|
||||
}).onCancel(() => {
|
||||
// console.log('>>>> Cancel')
|
||||
}).onDismiss(() => {
|
||||
// console.log('I am triggered on both OK and Cancel')
|
||||
})
|
||||
},
|
||||
submitAddressChange: function () {
|
||||
(new AboutUser).put(this.id, {email: this.emailAddress})
|
||||
.then((response) => {
|
||||
(new AboutUser).logout();
|
||||
});
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
570
frontend/src/pages/recurring/Create.vue
Normal file
570
frontend/src/pages/recurring/Create.vue
Normal file
@@ -0,0 +1,570 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<q-banner inline-actions rounded class="bg-orange text-white" v-if="'' !== errorMessage">
|
||||
{{ errorMessage }}
|
||||
<template v-slot:action>
|
||||
<q-btn flat @click="dismissBanner" label="Dismiss"/>
|
||||
</template>
|
||||
</q-banner>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-mx-md q-mt-md">
|
||||
<div class="col-xl-4 col-lg-6 col-md-12 col-xs-12 q-px-xs">
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">Basic options for recurring transaction</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
<q-input
|
||||
:error-message="submissionErrors.title"
|
||||
:error="hasSubmissionErrors.title"
|
||||
bottom-slots :disable="disabledInput" type="text" clearable v-model="title" :label="$t('form.title')"
|
||||
outlined/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
<q-select
|
||||
:error-message="submissionErrors.type"
|
||||
:error="hasSubmissionErrors.type"
|
||||
bottom-slots
|
||||
:disable="disabledInput"
|
||||
outlined
|
||||
v-model="type"
|
||||
emit-value class="q-pr-xs"
|
||||
map-options :options="types" label="Transaction type"/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12 col-xs-12 q-px-xs">
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">Repeat info</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
<q-input
|
||||
:error-message="submissionErrors.first_date"
|
||||
:error="hasSubmissionErrors.first_date"
|
||||
clearable
|
||||
bottom-slots :disable="disabledInput" type="date" v-model="first_date" :label="$t('form.first_date')"
|
||||
hint="The first date you want the recurrence"
|
||||
outlined/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
<q-input
|
||||
:error-message="submissionErrors.nr_of_repetitions"
|
||||
:error="hasSubmissionErrors.nr_of_repetitions"
|
||||
clearable
|
||||
bottom-slots :disable="disabledInput" type="number" step="1" v-model="nr_of_repetitions"
|
||||
:label="$t('form.repetitions')"
|
||||
hint="nr_of_repetitions"
|
||||
outlined/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
<q-input
|
||||
:error-message="submissionErrors.repeat_until"
|
||||
:error="hasSubmissionErrors.repeat_until"
|
||||
bottom-slots :disable="disabledInput" type="date" v-model="repeat_until"
|
||||
hint="repeat_until"
|
||||
clearable
|
||||
outlined/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-mx-md q-mt-md">
|
||||
<div class="col-xl-4 col-lg-6 col-md-12 col-xs-12 q-px-xs">
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">Single transaction</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
|
||||
<q-input
|
||||
:error-message="submissionErrors.transactions[index].description"
|
||||
:error="hasSubmissionErrors.transactions[index].description"
|
||||
bottom-slots :disable="disabledInput" type="text" clearable v-model="transactions[index].description"
|
||||
:label="$t('form.description')"
|
||||
outlined/>
|
||||
|
||||
<q-input
|
||||
:error-message="submissionErrors.transactions[index].amount"
|
||||
:error="hasSubmissionErrors.transactions[index].amount"
|
||||
bottom-slots :disable="disabledInput" clearable :mask="balance_input_mask" reverse-fill-mask
|
||||
hint="Expects #.##" fill-mask="0"
|
||||
v-model="transactions[index].amount"
|
||||
:label="$t('firefly.amount')" outlined/>
|
||||
|
||||
|
||||
<q-select
|
||||
:error-message="submissionErrors.transactions[index].source_id"
|
||||
:error="hasSubmissionErrors.transactions[index].source_id"
|
||||
v-model="transactions[index].source_id"
|
||||
bottom-slots
|
||||
:disable="loading"
|
||||
outlined
|
||||
emit-value class="q-pr-xs"
|
||||
map-options :options="accounts" label="Source account"/>
|
||||
|
||||
<q-select
|
||||
:error-message="submissionErrors.transactions[index].destination_id"
|
||||
:error="hasSubmissionErrors.transactions[index].destination_id"
|
||||
v-model="transactions[index].destination_id"
|
||||
bottom-slots
|
||||
:disable="disabledInput"
|
||||
outlined
|
||||
emit-value class="q-pr-xs"
|
||||
map-options :options="accounts" label="Destination account"/>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12 col-xs-12 q-px-xs">
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">Single repetition</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<q-select
|
||||
:error-message="submissionErrors.repetitions[index].type"
|
||||
:error="hasSubmissionErrors.repetitions[index].type"
|
||||
bottom-slots
|
||||
emit-value
|
||||
outlined
|
||||
v-model="repetitions[index].type"
|
||||
map-options :options="repetition_types" label="Type of repetition"/>
|
||||
|
||||
<q-input
|
||||
:error-message="submissionErrors.repetitions[index].skip"
|
||||
:error="hasSubmissionErrors.repetitions[index].skip"
|
||||
bottom-slots :disable="disabledInput" clearable
|
||||
v-model="repetitions[index].skip"
|
||||
type="number"
|
||||
min="0" max="31"
|
||||
:label="$t('firefly.skip')" outlined
|
||||
/>
|
||||
|
||||
<q-select
|
||||
:error-message="submissionErrors.repetitions[index].weekend"
|
||||
:error="hasSubmissionErrors.repetitions[index].weekend"
|
||||
v-model="repetitions[index].weekend"
|
||||
bottom-slots
|
||||
:disable="disabledInput"
|
||||
outlined
|
||||
emit-value class="q-pr-xs"
|
||||
map-options :options="weekends" label="Weekend?"/>
|
||||
|
||||
</q-card-section>
|
||||
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12 q-pa-xs">
|
||||
<q-card class="q-mt-xs">
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 text-right">
|
||||
<q-btn :disable="disabledInput" color="primary" label="Submit" @click="submitRecurrence"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 text-right">
|
||||
<q-checkbox :disable="disabledInput" v-model="doReturnHere" left-label
|
||||
label="Return here to create another one"/>
|
||||
<br/>
|
||||
<q-checkbox v-model="doResetForm" left-label :disable="!doReturnHere || disabledInput"
|
||||
label="Reset form after submission"/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Post from "../../api/recurring/post";
|
||||
import {mapGetters} from "vuex";
|
||||
import {getCacheKey} from "../../store/fireflyiii/getters";
|
||||
import format from "date-fns/format";
|
||||
import List from "../../api/accounts/list";
|
||||
import {parseISO} from "date-fns";
|
||||
|
||||
export default {
|
||||
name: 'Create',
|
||||
data() {
|
||||
return {
|
||||
index: 0,
|
||||
loading: true,
|
||||
submissionErrors: {},
|
||||
hasSubmissionErrors: {},
|
||||
submitting: false,
|
||||
doReturnHere: false,
|
||||
doResetForm: false,
|
||||
errorMessage: '',
|
||||
balance_input_mask: '#.##',
|
||||
types: [
|
||||
{value: 'withdrawal', label: 'Withdrawal'},
|
||||
{value: 'deposit', label: 'Deposit'},
|
||||
{value: 'transfer', label: 'Transfer'},
|
||||
],
|
||||
weekends: [
|
||||
{value: 1, label: 'dont care'},
|
||||
{value: 2, label: 'skip creation'},
|
||||
{value: 3, label: 'jump to previous friday'},
|
||||
{value: 4, label: 'jump to next monday'},
|
||||
],
|
||||
repetition_types: [],
|
||||
|
||||
// info
|
||||
accounts: [],
|
||||
|
||||
// recurrence fields:
|
||||
title: '',
|
||||
type: 'withdrawal',
|
||||
first_date: '',
|
||||
nr_of_repetitions: null,
|
||||
repeat_until: null,
|
||||
repetitions: {},
|
||||
transactions: {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'first_date': function () {
|
||||
// update actual single repetition value
|
||||
this.recalculateRepetitions();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('fireflyiii', ['getCacheKey']),
|
||||
disabledInput: function () {
|
||||
return this.submitting;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.resetForm();
|
||||
this.getAccounts();
|
||||
this.recalculateRepetitions();
|
||||
},
|
||||
methods: {
|
||||
// shared with Edit
|
||||
recalculateRepetitions: function () {
|
||||
console.log('recalculateRepetitions');
|
||||
let date = parseISO(this.first_date + 'T00:00:00');
|
||||
let xthDay = this.getXth(date);
|
||||
this.repetition_types = [
|
||||
{
|
||||
value: 'daily',
|
||||
label: 'Every day',
|
||||
},
|
||||
{
|
||||
value: 'monthly',
|
||||
label: 'Every month on the ' + format(date, 'do') + ' day',
|
||||
},
|
||||
{
|
||||
value: 'ndom',
|
||||
label: 'Every month on the ' + xthDay + '-th ' + format(date, 'EEEE'),
|
||||
},
|
||||
{
|
||||
value: 'yearly',
|
||||
label: 'Every year on ' + format(date, 'd MMMM'),
|
||||
}
|
||||
];
|
||||
},
|
||||
getXth: function (date) {
|
||||
let expectedDay = format(date, 'EEEE');
|
||||
let start = new Date(date);
|
||||
let count = 0;
|
||||
start.setDate(1);
|
||||
const length = new Date(start.getFullYear(), start.getMonth() + 1, 0).getDate();
|
||||
let loop = 1;
|
||||
while ((start.getDate() <= length && date.getMonth() === start.getMonth()) || loop <= 32) {
|
||||
loop++;
|
||||
if (expectedDay === format(start, 'EEEE')) {
|
||||
count++;
|
||||
}
|
||||
if (start.getDate() === date.getDate()) {
|
||||
return count;
|
||||
}
|
||||
start.setDate(start.getDate() + 1);
|
||||
}
|
||||
return count;
|
||||
},
|
||||
|
||||
resetForm: function () {
|
||||
// default fields:
|
||||
this.title = '';
|
||||
this.type = 'withdrawal';
|
||||
this.nr_of_repetitions = null;
|
||||
this.repeat_until = null;
|
||||
|
||||
// first date field
|
||||
let date = new Date;
|
||||
date.setDate(date.getDate() + 1);
|
||||
this.first_date = format(date, 'y-MM-dd');
|
||||
|
||||
// default repetition:
|
||||
this.repetitions = [
|
||||
{
|
||||
type: 'daily',
|
||||
moment: '',
|
||||
skip: null,
|
||||
weekend: 1,
|
||||
}
|
||||
];
|
||||
|
||||
// default transaction:
|
||||
this.transactions = [
|
||||
{
|
||||
description: null,
|
||||
amount: null,
|
||||
foreign_amount: null,
|
||||
currency_id: null, // TODO get default currency
|
||||
currency_code: null,
|
||||
foreign_currency_id: null,
|
||||
foreign_currency_code: null,
|
||||
budget_id: null,
|
||||
category_id: null,
|
||||
source_id: null,
|
||||
destination_id: null,
|
||||
tags: null,
|
||||
piggy_bank_id: null,
|
||||
}
|
||||
];
|
||||
this.resetErrors();
|
||||
},
|
||||
// same function as Edit
|
||||
resetErrors: function () {
|
||||
this.submissionErrors =
|
||||
{
|
||||
title: '',
|
||||
type: '',
|
||||
first_date: '',
|
||||
nr_of_repetitions: '',
|
||||
repeat_until: '',
|
||||
transactions: [
|
||||
{
|
||||
description: '',
|
||||
amount: '',
|
||||
foreign_amount: '',
|
||||
currency_id: '',
|
||||
currency_code: '',
|
||||
foreign_currency_id: '',
|
||||
foreign_currency_code: '',
|
||||
budget_id: '',
|
||||
category_id: '',
|
||||
source_id: '',
|
||||
destination_id: '',
|
||||
tags: '',
|
||||
piggy_bank_id: '',
|
||||
}
|
||||
],
|
||||
repetitions: [
|
||||
{
|
||||
type: '',
|
||||
moment: '',
|
||||
skip: '',
|
||||
weekend: '',
|
||||
}
|
||||
],
|
||||
};
|
||||
this.hasSubmissionErrors = {
|
||||
title: false,
|
||||
type: false,
|
||||
first_date: false,
|
||||
nr_of_repetitions: false,
|
||||
repeat_until: false,
|
||||
transactions: [
|
||||
{
|
||||
description: false,
|
||||
amount: false,
|
||||
foreign_amount: false,
|
||||
currency_id: false,
|
||||
currency_code: false,
|
||||
foreign_currency_id: false,
|
||||
foreign_currency_code: false,
|
||||
budget_id: false,
|
||||
category_id: false,
|
||||
source_id: false,
|
||||
destination_id: false,
|
||||
tags: false,
|
||||
piggy_bank_id: false,
|
||||
}
|
||||
],
|
||||
repetitions: [
|
||||
{
|
||||
type: false,
|
||||
moment: false,
|
||||
skip: false,
|
||||
weekend: false,
|
||||
}
|
||||
],
|
||||
};
|
||||
},
|
||||
submitRecurrence: function () {
|
||||
this.submitting = true;
|
||||
this.errorMessage = '';
|
||||
|
||||
// reset errors:
|
||||
this.resetErrors();
|
||||
|
||||
// build category array
|
||||
const submission = this.buildRecurrence();
|
||||
(new Post())
|
||||
.post(submission)
|
||||
.catch(this.processErrors)
|
||||
.then(this.processSuccess);
|
||||
},
|
||||
buildRecurrence: function () {
|
||||
let result = {
|
||||
title: this.title,
|
||||
type: this.type,
|
||||
first_date: this.first_date,
|
||||
nr_of_repetitions: this.nr_of_repetitions,
|
||||
repeat_until: this.repeat_until,
|
||||
transactions: this.transactions,
|
||||
repetitions: [],
|
||||
};
|
||||
// repetitions: this.repetitions,
|
||||
for (let i in this.repetitions) {
|
||||
if (this.repetitions.hasOwnProperty(i)) {
|
||||
|
||||
let moment = '';
|
||||
let date = parseISO(this.first_date + 'T00:00:00');
|
||||
// calculate moment for this type:
|
||||
if ('monthly' === this.repetitions[i].type) {
|
||||
moment = date.getDate().toString();
|
||||
}
|
||||
if ('ndom' === this.repetitions[i].type) {
|
||||
let xthDay = this.getXth(date);
|
||||
moment = xthDay + ',' + format(date, 'i');
|
||||
}
|
||||
if ('yearly' === this.repetitions[i].type) {
|
||||
moment = format(date, 'yyyy-MM-dd');
|
||||
}
|
||||
|
||||
|
||||
result.repetitions.push(
|
||||
{
|
||||
type: this.repetitions[i].type,
|
||||
moment: moment,
|
||||
skip: this.repetitions[i].skip,
|
||||
weekend: this.repetitions[i].weekend,
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
return result;
|
||||
},
|
||||
dismissBanner: function () {
|
||||
this.errorMessage = '';
|
||||
},
|
||||
processSuccess: function (response) {
|
||||
if (!response) {
|
||||
return;
|
||||
}
|
||||
this.submitting = false;
|
||||
let message = {
|
||||
level: 'success',
|
||||
text: 'I am new recurrence',
|
||||
show: true,
|
||||
action: {
|
||||
show: true,
|
||||
text: 'Go to recurrence',
|
||||
link: {name: 'recurring.show', params: {id: parseInt(response.data.data.id)}}
|
||||
}
|
||||
};
|
||||
// store flash
|
||||
this.$q.localStorage.set('flash', message);
|
||||
if (this.doReturnHere) {
|
||||
window.dispatchEvent(new CustomEvent('flash', {
|
||||
detail: {
|
||||
flash: this.$q.localStorage.getItem('flash')
|
||||
}
|
||||
}));
|
||||
}
|
||||
if (!this.doReturnHere) {
|
||||
// return to previous page.
|
||||
this.$router.go(-1);
|
||||
}
|
||||
|
||||
},
|
||||
// todo this method is everywhere
|
||||
processErrors: function (error) {
|
||||
if (error.response) {
|
||||
let errors = error.response.data; // => the response payload
|
||||
this.errorMessage = errors.message;
|
||||
for (let i in errors.errors) {
|
||||
if (errors.errors.hasOwnProperty(i)) {
|
||||
let errorKey = i;
|
||||
if (errorKey.includes('.')) {
|
||||
// it's a split
|
||||
let parts = errorKey.split('.');
|
||||
let series = parts[0];
|
||||
let errorIndex = parseInt(parts[1]);
|
||||
let errorField = parts[2];
|
||||
this.submissionErrors[series][errorIndex][errorField] = errors.errors[i][0]
|
||||
this.hasSubmissionErrors[series][errorIndex][errorField] = true;
|
||||
}
|
||||
if (!errorKey.includes('.')) {
|
||||
this.submissionErrors[i] = errors.errors[i][0];
|
||||
this.hasSubmissionErrors[i] = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
this.submitting = false;
|
||||
},
|
||||
getAccounts: function () {
|
||||
this.getPage(1);
|
||||
},
|
||||
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];
|
||||
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>
|
||||
583
frontend/src/pages/recurring/Edit.vue
Normal file
583
frontend/src/pages/recurring/Edit.vue
Normal file
@@ -0,0 +1,583 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<q-banner inline-actions rounded class="bg-orange text-white" v-if="'' !== errorMessage">
|
||||
{{ errorMessage }}
|
||||
<template v-slot:action>
|
||||
<q-btn flat @click="dismissBanner" label="Dismiss"/>
|
||||
</template>
|
||||
</q-banner>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-mx-md q-mt-md">
|
||||
<div class="col-xl-4 col-lg-6 col-md-12 col-xs-12 q-px-xs">
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">Basic options for recurring transaction</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
<q-input
|
||||
:error-message="submissionErrors.title"
|
||||
:error="hasSubmissionErrors.title"
|
||||
bottom-slots :disable="disabledInput" type="text" clearable v-model="title" :label="$t('form.title')"
|
||||
outlined/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
<q-select
|
||||
:error-message="submissionErrors.type"
|
||||
:error="hasSubmissionErrors.type"
|
||||
bottom-slots
|
||||
:disable="disabledInput"
|
||||
outlined
|
||||
v-model="type"
|
||||
emit-value class="q-pr-xs"
|
||||
map-options :options="types" label="Transaction type"/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12 col-xs-12 q-px-xs">
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">Repeat info</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
<q-input
|
||||
:error-message="submissionErrors.first_date"
|
||||
:error="hasSubmissionErrors.first_date"
|
||||
clearable
|
||||
bottom-slots :disable="disabledInput" type="date" v-model="first_date" :label="$t('form.first_date')"
|
||||
hint="The first date you want the recurrence"
|
||||
outlined/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
<q-input
|
||||
:error-message="submissionErrors.nr_of_repetitions"
|
||||
:error="hasSubmissionErrors.nr_of_repetitions"
|
||||
clearable
|
||||
bottom-slots :disable="disabledInput" type="number" step="1" v-model="nr_of_repetitions"
|
||||
:label="$t('form.repetitions')"
|
||||
hint="nr_of_repetitions"
|
||||
outlined/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
<q-input
|
||||
:error-message="submissionErrors.repeat_until"
|
||||
:error="hasSubmissionErrors.repeat_until"
|
||||
bottom-slots :disable="disabledInput" type="date" v-model="repeat_until"
|
||||
hint="repeat_until"
|
||||
clearable
|
||||
outlined/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-mx-md q-mt-md">
|
||||
<div class="col-xl-4 col-lg-6 col-md-12 col-xs-12 q-px-xs">
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">Single transaction</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
|
||||
<q-input
|
||||
:error-message="submissionErrors.transactions[index].description"
|
||||
:error="hasSubmissionErrors.transactions[index].description"
|
||||
bottom-slots :disable="disabledInput" type="text" clearable v-model="transactions[index].description"
|
||||
:label="$t('form.description')"
|
||||
outlined/>
|
||||
|
||||
<q-input
|
||||
:error-message="submissionErrors.transactions[index].amount"
|
||||
:error="hasSubmissionErrors.transactions[index].amount"
|
||||
bottom-slots :disable="disabledInput" clearable :mask="balance_input_mask" reverse-fill-mask
|
||||
hint="Expects #.##" fill-mask="0"
|
||||
v-model="transactions[index].amount"
|
||||
:label="$t('firefly.amount')" outlined/>
|
||||
|
||||
|
||||
<q-select
|
||||
:error-message="submissionErrors.transactions[index].source_id"
|
||||
:error="hasSubmissionErrors.transactions[index].source_id"
|
||||
v-model="transactions[index].source_id"
|
||||
bottom-slots
|
||||
:disable="disabledInput"
|
||||
outlined
|
||||
emit-value class="q-pr-xs"
|
||||
map-options :options="accounts" label="Source account"/>
|
||||
|
||||
<q-select
|
||||
:error-message="submissionErrors.transactions[index].destination_id"
|
||||
:error="hasSubmissionErrors.transactions[index].destination_id"
|
||||
v-model="transactions[index].destination_id"
|
||||
bottom-slots
|
||||
:disable="disabledInput"
|
||||
outlined
|
||||
emit-value class="q-pr-xs"
|
||||
map-options :options="accounts" label="Destination account"/>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-6 col-md-12 col-xs-12 q-px-xs">
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">Single repetition</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<q-select
|
||||
:error-message="submissionErrors.repetitions[index].type"
|
||||
:error="hasSubmissionErrors.repetitions[index].type"
|
||||
bottom-slots
|
||||
emit-value
|
||||
:disable="disabledInput"
|
||||
outlined
|
||||
v-model="repetitions[index].type"
|
||||
map-options :options="repetition_types" label="Type of repetition"/>
|
||||
|
||||
<q-input
|
||||
:error-message="submissionErrors.repetitions[index].skip"
|
||||
:error="hasSubmissionErrors.repetitions[index].skip"
|
||||
bottom-slots :disable="disabledInput" clearable
|
||||
v-model="repetitions[index].skip"
|
||||
type="number"
|
||||
min="0" max="31"
|
||||
:label="$t('form.skip')" outlined
|
||||
/>
|
||||
|
||||
<q-select
|
||||
:error-message="submissionErrors.repetitions[index].weekend"
|
||||
:error="hasSubmissionErrors.repetitions[index].weekend"
|
||||
v-model="repetitions[index].weekend"
|
||||
bottom-slots
|
||||
:disable="disabledInput"
|
||||
outlined
|
||||
emit-value class="q-pr-xs"
|
||||
map-options :options="weekends" label="Weekend?"/>
|
||||
|
||||
</q-card-section>
|
||||
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12 q-pa-xs">
|
||||
<q-card class="q-mt-xs">
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 text-right">
|
||||
<q-btn :disable="disabledInput" color="primary" label="Submit" @click="submitRecurringTransaction"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 text-right">
|
||||
<q-checkbox :disable="disabledInput" v-model="doReturnHere" left-label
|
||||
label="Return here to create another one"/>
|
||||
<br/>
|
||||
<q-checkbox v-model="doResetForm" left-label :disable="!doReturnHere || disabledInput"
|
||||
label="Reset form after submission"/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Get from "../../api/recurring/get";
|
||||
import Put from "../../api/recurring/put";
|
||||
import {parseISO} from "date-fns";
|
||||
import format from "date-fns/format";
|
||||
import List from "../../api/accounts/list";
|
||||
|
||||
export default {
|
||||
name: "Edit",
|
||||
data() {
|
||||
return {
|
||||
submissionErrors: {},
|
||||
hasSubmissionErrors: {},
|
||||
submitting: false,
|
||||
loading: false,
|
||||
doReturnHere: false,
|
||||
doResetForm: false,
|
||||
errorMessage: '',
|
||||
index: 0,
|
||||
accounts: [],
|
||||
balance_input_mask: '#.##', // shared with lots of methods.
|
||||
|
||||
// shared with Create
|
||||
types: [
|
||||
{value: 'withdrawal', label: 'Withdrawal'},
|
||||
{value: 'deposit', label: 'Deposit'},
|
||||
{value: 'transfer', label: 'Transfer'},
|
||||
],
|
||||
weekends: [
|
||||
{value: 1, label: 'dont care'},
|
||||
{value: 2, label: 'skip creation'},
|
||||
{value: 3, label: 'jump to previous friday'},
|
||||
{value: 4, label: 'jump to next monday'},
|
||||
],
|
||||
repetition_types: [],
|
||||
|
||||
|
||||
// recurring transaction fields:
|
||||
id: 0,
|
||||
type: '',
|
||||
title: '',
|
||||
first_date: null,
|
||||
nr_of_repetitions: 0,
|
||||
repeat_until: '',
|
||||
repetitions: {},
|
||||
transactions: {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'first_date': function () {
|
||||
// update actual single repetition value
|
||||
this.recalculateRepetitions();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
disabledInput: function () {
|
||||
return this.submitting || this.loading;
|
||||
}
|
||||
},
|
||||
// TODO some forms use 'loading' others use 'submitting' or 'disabledInput', needs to be the same.
|
||||
created() {
|
||||
this.loading = true;
|
||||
this.resetErrors();
|
||||
this.resetForm();
|
||||
this.getAccounts().then(() => {
|
||||
this.collectRecurringTransaction().then(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
})
|
||||
this.id = parseInt(this.$route.params.id);
|
||||
},
|
||||
methods: {
|
||||
resetForm: function () {
|
||||
// default transaction:
|
||||
this.transactions = [
|
||||
{
|
||||
description: null,
|
||||
amount: null,
|
||||
foreign_amount: null,
|
||||
currency_id: null, // TODO get default currency
|
||||
currency_code: null,
|
||||
foreign_currency_id: null,
|
||||
foreign_currency_code: null,
|
||||
budget_id: null,
|
||||
category_id: null,
|
||||
source_id: null,
|
||||
destination_id: null,
|
||||
tags: null,
|
||||
piggy_bank_id: null,
|
||||
}
|
||||
];
|
||||
// default repetition:
|
||||
this.repetitions = [
|
||||
{
|
||||
type: 'daily',
|
||||
moment: '',
|
||||
skip: null,
|
||||
weekend: 1,
|
||||
}
|
||||
];
|
||||
},
|
||||
recalculateRepetitions: function () {
|
||||
let date = parseISO(this.first_date + 'T00:00:00');
|
||||
let xthDay = this.getXth(date);
|
||||
this.repetition_types = [
|
||||
{
|
||||
value: 'daily',
|
||||
label: 'Every day',
|
||||
},
|
||||
{
|
||||
value: 'monthly',
|
||||
label: 'Every month on the ' + format(date, 'do') + ' day',
|
||||
},
|
||||
{
|
||||
value: 'ndom',
|
||||
label: 'Every month on the ' + xthDay + '-th ' + format(date, 'EEEE'),
|
||||
},
|
||||
{
|
||||
value: 'yearly',
|
||||
label: 'Every year on ' + format(date, 'd MMMM'),
|
||||
}
|
||||
];
|
||||
},
|
||||
getXth: function (date) {
|
||||
let expectedDay = format(date, 'EEEE');
|
||||
let start = new Date(date);
|
||||
let count = 0;
|
||||
start.setDate(1);
|
||||
const length = new Date(start.getFullYear(), start.getMonth() + 1, 0).getDate();
|
||||
let loop = 1;
|
||||
while ((start.getDate() <= length && date.getMonth() === start.getMonth()) || loop <= 32) {
|
||||
loop++;
|
||||
if (expectedDay === format(start, 'EEEE')) {
|
||||
count++;
|
||||
}
|
||||
if (start.getDate() === date.getDate()) {
|
||||
return count;
|
||||
}
|
||||
start.setDate(start.getDate() + 1);
|
||||
}
|
||||
return count;
|
||||
},
|
||||
collectRecurringTransaction: function () {
|
||||
let get = new Get;
|
||||
return get.get(this.id).then((response) => this.parseRecurringTransaction(response));
|
||||
},
|
||||
parseRecurringTransaction: function (response) {
|
||||
//this.name = response.data.data.attributes.name;
|
||||
let info = response.data.data;
|
||||
let attributes = info.attributes;
|
||||
this.id = parseInt(info.id);
|
||||
this.title = attributes.title;
|
||||
this.type = attributes.type;
|
||||
this.first_date = attributes.first_date.substr(0, 10);
|
||||
this.nr_of_repetitions = attributes.nr_of_repetitions;
|
||||
this.repeat_until = attributes.repeat_until ? attributes.repeat_until.substr(0, 10) : null;
|
||||
|
||||
// for the time being, only parse first transaction.
|
||||
let ft = attributes.transactions[0];
|
||||
this.transactions[0].description = ft.description;
|
||||
this.transactions[0].amount = ft.amount;
|
||||
this.transactions[0].source_id = parseInt(ft.source_id);
|
||||
this.transactions[0].destination_id = parseInt(ft.destination_id);
|
||||
|
||||
// for the time being, only parse first repetition
|
||||
let fr = attributes.repetitions[0];
|
||||
this.repetitions[0].type = fr.type;
|
||||
this.repetitions[0].weekend = fr.weekend;
|
||||
this.repetitions[0].skip = fr.skip;
|
||||
},
|
||||
// same function as Create
|
||||
resetErrors: function () {
|
||||
this.submissionErrors =
|
||||
{
|
||||
title: '',
|
||||
type: '',
|
||||
first_date: '',
|
||||
nr_of_repetitions: '',
|
||||
repeat_until: '',
|
||||
transactions: [
|
||||
{
|
||||
description: '',
|
||||
amount: '',
|
||||
foreign_amount: '',
|
||||
currency_id: '',
|
||||
currency_code: '',
|
||||
foreign_currency_id: '',
|
||||
foreign_currency_code: '',
|
||||
budget_id: '',
|
||||
category_id: '',
|
||||
source_id: '',
|
||||
destination_id: '',
|
||||
tags: '',
|
||||
piggy_bank_id: '',
|
||||
}
|
||||
],
|
||||
repetitions: [
|
||||
{
|
||||
type: '',
|
||||
moment: '',
|
||||
skip: '',
|
||||
weekend: '',
|
||||
}
|
||||
],
|
||||
};
|
||||
this.hasSubmissionErrors = {
|
||||
title: false,
|
||||
type: false,
|
||||
first_date: false,
|
||||
nr_of_repetitions: false,
|
||||
repeat_until: false,
|
||||
transactions: [
|
||||
{
|
||||
description: false,
|
||||
amount: false,
|
||||
foreign_amount: false,
|
||||
currency_id: false,
|
||||
currency_code: false,
|
||||
foreign_currency_id: false,
|
||||
foreign_currency_code: false,
|
||||
budget_id: false,
|
||||
category_id: false,
|
||||
source_id: false,
|
||||
destination_id: false,
|
||||
tags: false,
|
||||
piggy_bank_id: false,
|
||||
}
|
||||
],
|
||||
repetitions: [
|
||||
{
|
||||
type: false,
|
||||
moment: false,
|
||||
skip: false,
|
||||
weekend: false,
|
||||
}
|
||||
],
|
||||
};
|
||||
},
|
||||
submitRecurringTransaction: function () {
|
||||
this.submitting = true;
|
||||
this.errorMessage = '';
|
||||
|
||||
// reset errors:
|
||||
this.resetErrors();
|
||||
|
||||
// build account array
|
||||
const submission = this.buildRecurringTransaction();
|
||||
|
||||
(new Put())
|
||||
.post(this.id, submission)
|
||||
.catch(this.processErrors)
|
||||
.then(this.processSuccess);
|
||||
},
|
||||
buildRecurringTransaction: function () {
|
||||
let result = {
|
||||
title: this.title,
|
||||
type: this.type,
|
||||
first_date: this.first_date,
|
||||
nr_of_repetitions: this.nr_of_repetitions,
|
||||
repeat_until: this.repeat_until,
|
||||
transactions: this.transactions,
|
||||
repetitions: [],
|
||||
};
|
||||
// repetitions: this.repetitions,
|
||||
for (let i in this.repetitions) {
|
||||
if (this.repetitions.hasOwnProperty(i)) {
|
||||
|
||||
let moment = '';
|
||||
let date = parseISO(this.first_date + 'T00:00:00');
|
||||
// calculate moment for this type:
|
||||
if ('monthly' === this.repetitions[i].type) {
|
||||
moment = date.getDate().toString();
|
||||
}
|
||||
if ('ndom' === this.repetitions[i].type) {
|
||||
let xthDay = this.getXth(date);
|
||||
moment = xthDay + ',' + format(date, 'i');
|
||||
}
|
||||
if ('yearly' === this.repetitions[i].type) {
|
||||
moment = format(date, 'yyyy-MM-dd');
|
||||
}
|
||||
|
||||
|
||||
result.repetitions.push(
|
||||
{
|
||||
type: this.repetitions[i].type,
|
||||
moment: moment,
|
||||
skip: this.repetitions[i].skip,
|
||||
weekend: this.repetitions[i].weekend,
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
return result;
|
||||
},
|
||||
dismissBanner: function () {
|
||||
this.errorMessage = '';
|
||||
},
|
||||
processSuccess: function (response) {
|
||||
this.$store.dispatch('fireflyiii/refreshCacheKey');
|
||||
if (!response) {
|
||||
return;
|
||||
}
|
||||
this.submitting = false;
|
||||
let message = {
|
||||
level: 'success',
|
||||
text: 'Recurrence is updated',
|
||||
show: true,
|
||||
action: {
|
||||
show: true,
|
||||
text: 'Go to recurrence',
|
||||
link: {name: 'recurring.show', params: {id: parseInt(response.data.data.id)}}
|
||||
}
|
||||
};
|
||||
// store flash
|
||||
this.$q.localStorage.set('flash', message);
|
||||
if (this.doReturnHere) {
|
||||
window.dispatchEvent(new CustomEvent('flash', {
|
||||
detail: {
|
||||
flash: this.$q.localStorage.getItem('flash')
|
||||
}
|
||||
}));
|
||||
}
|
||||
if (!this.doReturnHere) {
|
||||
// return to previous page.
|
||||
this.$router.go(-1);
|
||||
}
|
||||
|
||||
},
|
||||
processErrors: function (error) {
|
||||
if (error.response) {
|
||||
let errors = error.response.data; // => the response payload
|
||||
this.errorMessage = errors.message;
|
||||
for (let i in errors.errors) {
|
||||
if (errors.errors.hasOwnProperty(i)) {
|
||||
this.submissionErrors[i] = errors.errors[i][0];
|
||||
this.hasSubmissionErrors[i] = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
this.submitting = false;
|
||||
},
|
||||
// same as Create
|
||||
getAccounts: function () {
|
||||
return this.getPage(1);
|
||||
},
|
||||
getPage: function (page) {
|
||||
return (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];
|
||||
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) {
|
||||
return 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>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
183
frontend/src/pages/recurring/Index.vue
Normal file
183
frontend/src/pages/recurring/Index.vue
Normal file
@@ -0,0 +1,183 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<q-table
|
||||
:title="$t('firefly.recurring')"
|
||||
: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: 'recurring.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: 'recurring.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="deleteRecurring(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>
|
||||
<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: 'recurring.create'}" icon="fas fa-exchange-alt" label="New recurring transaction"/>
|
||||
</q-fab>
|
||||
</q-page-sticky>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapGetters, useStore} from "vuex";
|
||||
import Destroy from "../../api/recurring/destroy";
|
||||
import List from "../../api/recurring/list";
|
||||
|
||||
export default {
|
||||
name: 'Index',
|
||||
watch: {
|
||||
$route(to) {
|
||||
// react to route changes...
|
||||
if ('recurring.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: {
|
||||
deleteRecurring: function (id, name) {
|
||||
this.$q.dialog({
|
||||
title: 'Confirm',
|
||||
message: 'Do you want to delete recurring transaction "' + name + '"?',
|
||||
cancel: true,
|
||||
persistent: true
|
||||
}).onOk(() => {
|
||||
this.destroyRecurring(id);
|
||||
});
|
||||
},
|
||||
destroyRecurring: function (id) {
|
||||
let destr = new Destroy;
|
||||
destr.destroy(id).then(() => {
|
||||
this.$store.dispatch('fireflyiii/refreshCacheKey');
|
||||
this.triggerUpdate();
|
||||
});
|
||||
},
|
||||
updateBreadcrumbs: function () {
|
||||
this.$route.meta.pageTitle = 'firefly.Recurring';
|
||||
this.$route.meta.breadcrumbs = [{title: 'Recurring'}];
|
||||
|
||||
},
|
||||
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.title,
|
||||
};
|
||||
this.rows.push(account);
|
||||
}
|
||||
}
|
||||
this.loading = false;
|
||||
}
|
||||
)
|
||||
;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
57
frontend/src/pages/recurring/Show.vue
Normal file
57
frontend/src/pages/recurring/Show.vue
Normal file
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<!-- Balance chart -->
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">{{ recurrence.title }}</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
Title: {{ recurrence.title }}<br>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Get from "../../api/recurring/get";
|
||||
|
||||
export default {
|
||||
name: "Show",
|
||||
data() {
|
||||
return {
|
||||
recurrence: {},
|
||||
id: 0
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.id = parseInt(this.$route.params.id);
|
||||
this.getRecurring();
|
||||
},
|
||||
methods: {
|
||||
onRequest: function (payload) {
|
||||
this.page = payload.page;
|
||||
this.getRecurring();
|
||||
},
|
||||
getRecurring: function () {
|
||||
(new Get).get(this.id).then((response) => this.parseRecurring(response));
|
||||
},
|
||||
parseRecurring: function (response) {
|
||||
this.recurrence = {
|
||||
title: response.data.data.attributes.title,
|
||||
};
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
15
frontend/src/pages/reports/Default.vue
Normal file
15
frontend/src/pages/reports/Default.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<q-page>
|
||||
Here be default report.
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Default"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
136
frontend/src/pages/reports/Index.vue
Normal file
136
frontend/src/pages/reports/Index.vue
Normal file
@@ -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>
|
||||
169
frontend/src/pages/rule-groups/Create.vue
Normal file
169
frontend/src/pages/rule-groups/Create.vue
Normal file
@@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<q-banner inline-actions rounded class="bg-orange text-white" v-if="'' !== errorMessage">
|
||||
{{ errorMessage }}
|
||||
<template v-slot:action>
|
||||
<q-btn flat @click="dismissBanner" label="Dismiss"/>
|
||||
</template>
|
||||
</q-banner>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-mx-md q-mt-md">
|
||||
<div class="col-12">
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">Info for new rule group</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<q-input
|
||||
:error-message="submissionErrors.title"
|
||||
:error="hasSubmissionErrors.title"
|
||||
bottom-slots :disable="disabledInput" type="text" clearable v-model="title" :label="$t('form.title')"
|
||||
outlined/>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<q-card class="q-mt-xs">
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 text-right">
|
||||
<q-btn :disable="disabledInput" color="primary" label="Submit" @click="submitRuleGroup"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 text-right">
|
||||
<q-checkbox :disable="disabledInput" v-model="doReturnHere" left-label
|
||||
label="Return here to create another one"/>
|
||||
<br/>
|
||||
<q-checkbox v-model="doResetForm" left-label :disable="!doReturnHere || disabledInput"
|
||||
label="Reset form after submission"/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Post from "../../api/rule-groups/post";
|
||||
import {mapGetters} from "vuex";
|
||||
import {getCacheKey} from "../../store/fireflyiii/getters";
|
||||
|
||||
export default {
|
||||
name: 'Create',
|
||||
data() {
|
||||
return {
|
||||
submissionErrors: {},
|
||||
hasSubmissionErrors: {},
|
||||
submitting: false,
|
||||
doReturnHere: false,
|
||||
doResetForm: false,
|
||||
errorMessage: '',
|
||||
|
||||
// rule group fields:
|
||||
title: '',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('fireflyiii', ['getCacheKey']),
|
||||
disabledInput: function () {
|
||||
return this.submitting;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.resetForm();
|
||||
},
|
||||
methods: {
|
||||
resetForm: function () {
|
||||
this.title = '';
|
||||
this.resetErrors();
|
||||
|
||||
},
|
||||
resetErrors: function () {
|
||||
this.submissionErrors =
|
||||
{
|
||||
title: '',
|
||||
};
|
||||
this.hasSubmissionErrors = {
|
||||
title: false,
|
||||
};
|
||||
},
|
||||
submitRuleGroup: function () {
|
||||
this.submitting = true;
|
||||
this.errorMessage = '';
|
||||
|
||||
// reset errors:
|
||||
this.resetErrors();
|
||||
|
||||
// build category array
|
||||
const submission = this.buildRuleGroup();
|
||||
|
||||
(new Post())
|
||||
.post(submission)
|
||||
.catch(this.processErrors)
|
||||
.then(this.processSuccess);
|
||||
},
|
||||
buildRuleGroup: function () {
|
||||
return {
|
||||
title: this.title,
|
||||
};
|
||||
},
|
||||
dismissBanner: function () {
|
||||
this.errorMessage = '';
|
||||
},
|
||||
processSuccess: function (response) {
|
||||
if (!response) {
|
||||
return;
|
||||
}
|
||||
this.submitting = false;
|
||||
let message = {
|
||||
level: 'success',
|
||||
text: 'I am new rule group',
|
||||
show: true,
|
||||
action: {
|
||||
show: true,
|
||||
text: 'Go to piggy',
|
||||
link: {name: 'rule-groups.show', params: {id: parseInt(response.data.data.id)}}
|
||||
}
|
||||
};
|
||||
// store flash
|
||||
this.$q.localStorage.set('flash', message);
|
||||
if (this.doReturnHere) {
|
||||
window.dispatchEvent(new CustomEvent('flash', {
|
||||
detail: {
|
||||
flash: this.$q.localStorage.getItem('flash')
|
||||
}
|
||||
}));
|
||||
}
|
||||
if (!this.doReturnHere) {
|
||||
// return to previous page.
|
||||
this.$router.go(-1);
|
||||
}
|
||||
|
||||
},
|
||||
processErrors: function (error) {
|
||||
if (error.response) {
|
||||
let errors = error.response.data; // => the response payload
|
||||
this.errorMessage = errors.message;
|
||||
console.log(errors);
|
||||
for (let i in errors.errors) {
|
||||
if (errors.errors.hasOwnProperty(i)) {
|
||||
this.submissionErrors[i] = errors.errors[i][0];
|
||||
this.hasSubmissionErrors[i] = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
this.submitting = false;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
176
frontend/src/pages/rule-groups/Edit.vue
Normal file
176
frontend/src/pages/rule-groups/Edit.vue
Normal file
@@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<q-banner inline-actions rounded class="bg-orange text-white" v-if="'' !== errorMessage">
|
||||
{{ errorMessage }}
|
||||
<template v-slot:action>
|
||||
<q-btn flat @click="dismissBanner" label="Dismiss"/>
|
||||
</template>
|
||||
</q-banner>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-mx-md q-mt-md">
|
||||
<div class="col-12">
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">Edit rule group</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
<q-input
|
||||
:error-message="submissionErrors.title"
|
||||
:error="hasSubmissionErrors.title"
|
||||
bottom-slots :disable="disabledInput" type="text" clearable v-model="title" :label="$t('form.title')"
|
||||
outlined/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<q-card class="q-mt-xs">
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 text-right">
|
||||
<q-btn :disable="disabledInput" color="primary" label="Update" @click="submitRuleGroup"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 text-right">
|
||||
<q-checkbox :disable="disabledInput" v-model="doReturnHere" left-label label="Return here"/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Get from "../../api/rule-groups/get";
|
||||
import Put from "../../api/rule-groups/put";
|
||||
|
||||
export default {
|
||||
name: "Edit",
|
||||
data() {
|
||||
return {
|
||||
submissionErrors: {},
|
||||
hasSubmissionErrors: {},
|
||||
submitting: false,
|
||||
doReturnHere: false,
|
||||
doResetForm: false,
|
||||
errorMessage: '',
|
||||
|
||||
// rule group fields:
|
||||
id: 0,
|
||||
title: '',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
disabledInput: function () {
|
||||
return this.submitting;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.id = parseInt(this.$route.params.id);
|
||||
this.collectRuleGroup();
|
||||
},
|
||||
methods: {
|
||||
collectRuleGroup: function() {
|
||||
let get = new Get;
|
||||
get.get(this.id).then((response) => this.parseRuleGroup(response));
|
||||
},
|
||||
parseRuleGroup: function(response) {
|
||||
this.title = response.data.data.attributes.title;
|
||||
},
|
||||
resetErrors: function () {
|
||||
this.submissionErrors =
|
||||
{
|
||||
title: '',
|
||||
};
|
||||
this.hasSubmissionErrors = {
|
||||
title: false,
|
||||
};
|
||||
},
|
||||
submitRuleGroup: function () {
|
||||
this.submitting = true;
|
||||
this.errorMessage = '';
|
||||
|
||||
// reset errors:
|
||||
this.resetErrors();
|
||||
|
||||
// build account array
|
||||
const submission = this.buildRuleGroup();
|
||||
|
||||
(new Put())
|
||||
.post(this.id, submission)
|
||||
.catch(this.processErrors)
|
||||
.then(this.processSuccess);
|
||||
},
|
||||
buildRuleGroup: function () {
|
||||
return {
|
||||
title: this.title,
|
||||
};
|
||||
},
|
||||
dismissBanner: function () {
|
||||
this.errorMessage = '';
|
||||
},
|
||||
processSuccess: function (response) {
|
||||
this.$store.dispatch('fireflyiii/refreshCacheKey');
|
||||
if (!response) {
|
||||
return;
|
||||
}
|
||||
this.submitting = false;
|
||||
let message = {
|
||||
level: 'success',
|
||||
text: 'Rule group is is updated',
|
||||
show: true,
|
||||
action: {
|
||||
show: true,
|
||||
text: 'Go to rule group', // todo
|
||||
link: {name: 'rule.index'}
|
||||
}
|
||||
};
|
||||
// store flash
|
||||
this.$q.localStorage.set('flash', message);
|
||||
if (this.doReturnHere) {
|
||||
window.dispatchEvent(new CustomEvent('flash', {
|
||||
detail: {
|
||||
flash: this.$q.localStorage.getItem('flash')
|
||||
}
|
||||
}));
|
||||
}
|
||||
if (!this.doReturnHere) {
|
||||
// return to previous page.
|
||||
this.$router.go(-1);
|
||||
}
|
||||
|
||||
},
|
||||
processErrors: function (error) {
|
||||
if (error.response) {
|
||||
let errors = error.response.data; // => the response payload
|
||||
this.errorMessage = errors.message;
|
||||
console.log(errors);
|
||||
for (let i in errors.errors) {
|
||||
if (errors.errors.hasOwnProperty(i)) {
|
||||
this.submissionErrors[i] = errors.errors[i][0];
|
||||
this.hasSubmissionErrors[i] = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
this.submitting = false;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
573
frontend/src/pages/rules/Create.vue
Normal file
573
frontend/src/pages/rules/Create.vue
Normal file
@@ -0,0 +1,573 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<q-banner inline-actions rounded class="bg-orange text-white" v-if="'' !== errorMessage">
|
||||
{{ errorMessage }}
|
||||
<template v-slot:action>
|
||||
<q-btn flat @click="dismissBanner" label="Dismiss"/>
|
||||
</template>
|
||||
</q-banner>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-mx-md q-mt-md">
|
||||
<div class="col-12">
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">Info for new rule</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<q-input
|
||||
:error-message="submissionErrors.title"
|
||||
:error="hasSubmissionErrors.title"
|
||||
bottom-slots :disable="disabledInput" type="text" clearable v-model="title" :label="$t('form.title')"
|
||||
outlined/>
|
||||
|
||||
<q-select
|
||||
:error-message="submissionErrors.rule_group_id"
|
||||
:error="hasSubmissionErrors.rule_group_id"
|
||||
bottom-slots
|
||||
:disable="disabledInput"
|
||||
outlined
|
||||
dense
|
||||
v-model="rule_group_id"
|
||||
class="q-pr-xs"
|
||||
map-options :options="ruleGroups" label="Rule group"/>
|
||||
|
||||
<q-select
|
||||
:error-message="submissionErrors.trigger"
|
||||
:error="hasSubmissionErrors.trigger"
|
||||
bottom-slots
|
||||
:disable="disabledInput"
|
||||
outlined
|
||||
dense
|
||||
emit-value
|
||||
v-model="trigger"
|
||||
class="q-pr-xs"
|
||||
map-options :options="initialTriggers" label="What fires a rule?"/>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-mx-md q-mt-md">
|
||||
<div class="col-12">
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">Triggers</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<strong>Trigger</strong>
|
||||
</div>
|
||||
<div class="col">
|
||||
<strong>Trigger on value</strong>
|
||||
</div>
|
||||
<div class="col">
|
||||
<strong>Active?</strong>
|
||||
</div>
|
||||
<div class="col">
|
||||
<strong>Stop processing after a hit</strong>
|
||||
</div>
|
||||
<div class="col">
|
||||
del
|
||||
</div>
|
||||
</div>
|
||||
<div v-for="(trigger, index) in triggers" class="row" :key="index">
|
||||
<div class="col">
|
||||
<q-select
|
||||
:error-message="submissionErrors.triggers[index].type"
|
||||
:error="hasSubmissionErrors.triggers[index].type"
|
||||
bottom-slots
|
||||
:disable="disabledInput"
|
||||
outlined
|
||||
dense
|
||||
v-model="trigger.type"
|
||||
class="q-pr-xs"
|
||||
map-options :options="availableTriggers" label="Trigger type"/>
|
||||
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-input
|
||||
:error-message="submissionErrors.triggers[index].value"
|
||||
:error="hasSubmissionErrors.triggers[index].value"
|
||||
bottom-slots
|
||||
dense
|
||||
:disable="disabledInput"
|
||||
v-if="trigger.type.needs_context"
|
||||
type="text" clearable v-model="trigger.value" label="Trigger value"
|
||||
outlined/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-checkbox v-model="trigger.active"/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-checkbox v-model="trigger.stop_processing"/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-btn color="secondary" @click="removeTrigger(index)">Del</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-actions>
|
||||
<q-btn color="primary" @click="addTrigger">Add trigger</q-btn>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-mx-md q-mt-md">
|
||||
<div class="col-12">
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">Actions</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<strong>Action</strong>
|
||||
</div>
|
||||
<div class="col">
|
||||
<strong>Value</strong>
|
||||
</div>
|
||||
<div class="col">
|
||||
<strong>Active?</strong>
|
||||
</div>
|
||||
<div class="col">
|
||||
<strong>Stop processing other actions</strong>
|
||||
</div>
|
||||
<div class="col">
|
||||
del
|
||||
</div>
|
||||
</div>
|
||||
<div v-for="(action, index) in actions" class="row" :key="index">
|
||||
<div class="col">
|
||||
<q-select
|
||||
:error-message="submissionErrors.actions[index].type"
|
||||
:error="hasSubmissionErrors.actions[index].type"
|
||||
bottom-slots
|
||||
:disable="disabledInput"
|
||||
outlined
|
||||
dense
|
||||
v-model="action.type"
|
||||
class="q-pr-xs"
|
||||
map-options :options="availableActions" label="Action type"/>
|
||||
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-input
|
||||
:error-message="submissionErrors.actions[index].value"
|
||||
:error="hasSubmissionErrors.actions[index].value"
|
||||
bottom-slots
|
||||
dense
|
||||
:disable="disabledInput"
|
||||
v-if="action.type.needs_context"
|
||||
type="text" clearable v-model="action.value" label="Action value"
|
||||
outlined/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-checkbox v-model="action.active"/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-checkbox v-model="action.stop_processing"/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-btn color="secondary" @click="removeAction(index)">Del</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-actions>
|
||||
<q-btn color="primary" @click="addAction">Add action</q-btn>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<q-card class="q-mt-xs">
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 text-right">
|
||||
<q-btn :disable="disabledInput" color="primary" label="Submit" @click="submitRule"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 text-right">
|
||||
<q-checkbox :disable="disabledInput" v-model="doReturnHere" left-label
|
||||
label="Return here to create another one"/>
|
||||
<br/>
|
||||
<q-checkbox v-model="doResetForm" left-label :disable="!doReturnHere || disabledInput"
|
||||
label="Reset form after submission"/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Post from "../../api/rules/post";
|
||||
import {mapGetters} from "vuex";
|
||||
import {getCacheKey} from "../../store/fireflyiii/getters";
|
||||
import Configuration from "../../api/system/configuration";
|
||||
import List from "../../api/rule-groups/list";
|
||||
|
||||
export default {
|
||||
name: 'Create',
|
||||
data() {
|
||||
return {
|
||||
submissionErrors: {
|
||||
triggers: [],
|
||||
actions: [],
|
||||
},
|
||||
hasSubmissionErrors: {
|
||||
triggers: [],
|
||||
actions: []
|
||||
},
|
||||
submitting: false,
|
||||
doReturnHere: false,
|
||||
doResetForm: false,
|
||||
errorMessage: '',
|
||||
|
||||
// rule settings things:
|
||||
ruleGroups: [],
|
||||
availableTriggers: [],
|
||||
availableActions: [],
|
||||
initialTriggers: [],
|
||||
|
||||
// rule group fields:
|
||||
title: '',
|
||||
rule_group_id: null,
|
||||
trigger: 'store-journal',
|
||||
|
||||
triggers: [],
|
||||
actions: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('fireflyiii', ['getCacheKey']),
|
||||
disabledInput: function () {
|
||||
return this.submitting;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.resetForm();
|
||||
this.getRuleGroups();
|
||||
this.getRuleTriggers();
|
||||
this.getRuleActions();
|
||||
},
|
||||
methods: {
|
||||
addTrigger: function () {
|
||||
this.triggers.push(
|
||||
this.getDefaultTrigger()
|
||||
);
|
||||
this.submissionErrors.triggers.push(
|
||||
this.getDefaultTriggerError()
|
||||
);
|
||||
this.hasSubmissionErrors.triggers.push(
|
||||
this.getDefaultHasTriggerError()
|
||||
);
|
||||
},
|
||||
addAction: function () {
|
||||
this.actions.push(
|
||||
this.getDefaultAction()
|
||||
);
|
||||
this.submissionErrors.actions.push(
|
||||
this.getDefaultActionError()
|
||||
);
|
||||
this.hasSubmissionErrors.actions.push(
|
||||
this.getDefaultHasActionError()
|
||||
);
|
||||
},
|
||||
getDefaultTriggerError: function () {
|
||||
return {
|
||||
type: '',
|
||||
value: '',
|
||||
stop_processing: '',
|
||||
active: '',
|
||||
};
|
||||
},
|
||||
getDefaultActionError: function () {
|
||||
return {
|
||||
type: '',
|
||||
value: '',
|
||||
stop_processing: '',
|
||||
active: '',
|
||||
};
|
||||
},
|
||||
getDefaultHasTriggerError: function () {
|
||||
return {
|
||||
type: false,
|
||||
value: false,
|
||||
stop_processing: false,
|
||||
active: false,
|
||||
};
|
||||
},
|
||||
getDefaultHasActionError: function () {
|
||||
return {
|
||||
type: false,
|
||||
value: false,
|
||||
stop_processing: false,
|
||||
active: false,
|
||||
};
|
||||
},
|
||||
|
||||
removeTrigger: function (index) {
|
||||
this.triggers.splice(index, 1);
|
||||
this.submissionErrors.triggers.splice(index, 1);
|
||||
this.hasSubmissionErrors.triggers.splice(index, 1);
|
||||
},
|
||||
removeAction: function (index) {
|
||||
this.actions.splice(index, 1);
|
||||
this.submissionErrors.actions.splice(index, 1);
|
||||
this.hasSubmissionErrors.actions.splice(index, 1);
|
||||
},
|
||||
getDefaultTrigger: function () {
|
||||
return {
|
||||
type: {
|
||||
value: 'description_is',
|
||||
needs_context: true,
|
||||
label: this.$t('firefly.rule_trigger_description_is_choice')
|
||||
},
|
||||
value: '',
|
||||
stop_processing: false,
|
||||
active: true
|
||||
};
|
||||
},
|
||||
getDefaultAction: function () {
|
||||
return {
|
||||
type: {
|
||||
value: 'add_tag',
|
||||
needs_context: true,
|
||||
label: this.$t('firefly.rule_action_add_tag_choice')
|
||||
},
|
||||
value: '',
|
||||
stop_processing: false,
|
||||
active: true
|
||||
};
|
||||
},
|
||||
getRuleTriggers: function () {
|
||||
let config = new Configuration;
|
||||
config.get('firefly.search.operators').then((response) => {
|
||||
for (let i in response.data.data.value) {
|
||||
if (response.data.data.value.hasOwnProperty(i)) {
|
||||
let trigger = response.data.data.value[i];
|
||||
if (false === trigger.alias && i !== 'user_action') {
|
||||
this.availableTriggers.push(
|
||||
{
|
||||
value: i,
|
||||
needs_context: trigger.needs_context,
|
||||
label: this.$t('firefly.rule_trigger_' + i + '_choice')
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
getRuleActions: function () {
|
||||
let config = new Configuration;
|
||||
config.get('firefly.rule-actions').then((response) => {
|
||||
for (let i in response.data.data.value) {
|
||||
if (response.data.data.value.hasOwnProperty(i)) {
|
||||
this.availableActions.push(
|
||||
{
|
||||
value: i,
|
||||
needs_context: false,
|
||||
label: this.$t('firefly.rule_action_' + i + '_choice')
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
}).then(() => {
|
||||
// get actions that require context:
|
||||
config.get('firefly.context-rule-actions').then((response) => {
|
||||
let contextActions = response.data.data.value;
|
||||
for (let i in contextActions) {
|
||||
let current = contextActions[i];
|
||||
// find it in availableActions and set to true:
|
||||
for (let ii in this.availableActions) {
|
||||
let action = this.availableActions[ii];
|
||||
if (action.value === current) {
|
||||
this.availableActions[ii].needs_context = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
resetForm: function () {
|
||||
|
||||
this.initialTriggers = [
|
||||
{
|
||||
value: 'store-journal',
|
||||
label: 'When a transaction is stored'
|
||||
},
|
||||
{
|
||||
value: 'update-journal',
|
||||
label: 'When a transaction is updated'
|
||||
},
|
||||
]
|
||||
|
||||
this.title = '';
|
||||
this.rule_group_id = null;
|
||||
this.trigger = 'store-journal';
|
||||
// add new (single) trigger:
|
||||
this.triggers.push(this.getDefaultTrigger());
|
||||
this.actions.push(this.getDefaultAction());
|
||||
|
||||
this.resetErrors();
|
||||
|
||||
},
|
||||
getRuleGroups: function () {
|
||||
this.getGroupPage(1);
|
||||
},
|
||||
getGroupPage: function (page) {
|
||||
let list = new List();
|
||||
list.list(page, this.getCacheKey).then((response) => {
|
||||
if (page < parseInt(response.data.meta.pagination.total_pages)) {
|
||||
this.getGroupPage(page + 1);
|
||||
}
|
||||
let groups = response.data.data;
|
||||
for (let i in groups) {
|
||||
if (groups.hasOwnProperty(i)) {
|
||||
let group = groups[i];
|
||||
this.ruleGroups.push(
|
||||
{
|
||||
value: parseInt(group.id),
|
||||
label: group.attributes.title,
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
resetErrors: function () {
|
||||
this.submissionErrors =
|
||||
{
|
||||
title: '',
|
||||
rule_group_id: '',
|
||||
triggers: [this.getDefaultTriggerError()],
|
||||
actions: [this.getDefaultActionError()],
|
||||
};
|
||||
this.hasSubmissionErrors = {
|
||||
title: false,
|
||||
rule_group_id: false,
|
||||
triggers: [this.getDefaultHasTriggerError()],
|
||||
actions: [this.getDefaultHasActionError()],
|
||||
};
|
||||
},
|
||||
submitRule: function () {
|
||||
this.submitting = true;
|
||||
this.errorMessage = '';
|
||||
|
||||
// reset errors:
|
||||
this.resetErrors();
|
||||
|
||||
// build category array
|
||||
const submission = this.buildRule();
|
||||
|
||||
(new Post())
|
||||
.post(submission)
|
||||
.catch(this.processErrors)
|
||||
.then(this.processSuccess);
|
||||
},
|
||||
buildRule: function () {
|
||||
let rule = {
|
||||
title: this.title,
|
||||
rule_group_id: this.rule_group_id,
|
||||
trigger: this.trigger,
|
||||
triggers: [],
|
||||
actions: [],
|
||||
};
|
||||
for (let i in this.triggers) {
|
||||
// todo leaves room for filtering.
|
||||
rule.triggers.push(
|
||||
{
|
||||
type: this.triggers[i].type.value,
|
||||
value: this.triggers[i].value,
|
||||
stop_processing: this.triggers[i].stop_processing,
|
||||
active: this.triggers[i].active,
|
||||
}
|
||||
);
|
||||
}
|
||||
for (let i in this.actions) {
|
||||
let action = this.actions[i];
|
||||
console.log(action);
|
||||
rule.actions.push(
|
||||
{
|
||||
type: this.actions[i].type.value,
|
||||
value: this.actions[i].value,
|
||||
stop_processing: this.actions[i].stop_processing,
|
||||
active: this.actions[i].active,
|
||||
}
|
||||
);
|
||||
}
|
||||
return rule;
|
||||
},
|
||||
dismissBanner: function () {
|
||||
this.errorMessage = '';
|
||||
},
|
||||
processSuccess: function (response) {
|
||||
if (!response) {
|
||||
return;
|
||||
}
|
||||
this.submitting = false;
|
||||
let message = {
|
||||
level: 'success',
|
||||
text: 'I am new rule',
|
||||
show: true,
|
||||
action: {
|
||||
show: true,
|
||||
text: 'Go to piggy',
|
||||
link: {name: 'rules.show', params: {id: parseInt(response.data.data.id)}}
|
||||
}
|
||||
};
|
||||
// store flash
|
||||
this.$q.localStorage.set('flash', message);
|
||||
if (this.doReturnHere) {
|
||||
window.dispatchEvent(new CustomEvent('flash', {
|
||||
detail: {
|
||||
flash: this.$q.localStorage.getItem('flash')
|
||||
}
|
||||
}));
|
||||
}
|
||||
if (!this.doReturnHere) {
|
||||
// return to previous page.
|
||||
this.$router.go(-1);
|
||||
}
|
||||
|
||||
},
|
||||
processErrors: function (error) {
|
||||
if (error.response) {
|
||||
let errors = error.response.data; // => the response payload
|
||||
this.errorMessage = errors.message;
|
||||
for (let i in errors.errors) {
|
||||
if (errors.errors.hasOwnProperty(i)) {
|
||||
let errorKey = i;
|
||||
if (errorKey.includes('.')) {
|
||||
// it's a split
|
||||
let parts = errorKey.split('.');
|
||||
let series = parts[0];
|
||||
let errorIndex = parseInt(parts[1]);
|
||||
let errorField = parts[2];
|
||||
this.submissionErrors[series][errorIndex][errorField] = errors.errors[i][0]
|
||||
this.hasSubmissionErrors[series][errorIndex][errorField] = true;
|
||||
}
|
||||
if (!errorKey.includes('.')) {
|
||||
this.submissionErrors[i] = errors.errors[i][0];
|
||||
this.hasSubmissionErrors[i] = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
this.submitting = false;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
176
frontend/src/pages/rules/Edit.vue
Normal file
176
frontend/src/pages/rules/Edit.vue
Normal file
@@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<q-banner inline-actions rounded class="bg-orange text-white" v-if="'' !== errorMessage">
|
||||
{{ errorMessage }}
|
||||
<template v-slot:action>
|
||||
<q-btn flat @click="dismissBanner" label="Dismiss"/>
|
||||
</template>
|
||||
</q-banner>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-mx-md q-mt-md">
|
||||
<div class="col-12">
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">Edit rule</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
<q-input
|
||||
:error-message="submissionErrors.title"
|
||||
:error="hasSubmissionErrors.title"
|
||||
bottom-slots :disable="disabledInput" type="text" clearable v-model="title" :label="$t('form.title')"
|
||||
outlined/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<q-card class="q-mt-xs">
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 text-right">
|
||||
<q-btn :disable="disabledInput" color="primary" label="Update" @click="submitRule"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 text-right">
|
||||
<q-checkbox :disable="disabledInput" v-model="doReturnHere" left-label label="Return here"/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Get from "../../api/rules/get";
|
||||
import Put from "../../api/rules/put";
|
||||
|
||||
export default {
|
||||
name: "Edit",
|
||||
data() {
|
||||
return {
|
||||
submissionErrors: {},
|
||||
hasSubmissionErrors: {},
|
||||
submitting: false,
|
||||
doReturnHere: false,
|
||||
doResetForm: false,
|
||||
errorMessage: '',
|
||||
|
||||
// rule fields:
|
||||
id: 0,
|
||||
title: '',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
disabledInput: function () {
|
||||
return this.submitting;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.id = parseInt(this.$route.params.id);
|
||||
this.collectRule();
|
||||
},
|
||||
methods: {
|
||||
collectRule: function() {
|
||||
let get = new Get;
|
||||
get.get(this.id).then((response) => this.parseRule(response));
|
||||
},
|
||||
parseRule: function(response) {
|
||||
this.title = response.data.data.attributes.title;
|
||||
},
|
||||
resetErrors: function () {
|
||||
this.submissionErrors =
|
||||
{
|
||||
title: '',
|
||||
};
|
||||
this.hasSubmissionErrors = {
|
||||
title: false,
|
||||
};
|
||||
},
|
||||
submitRule: function () {
|
||||
this.submitting = true;
|
||||
this.errorMessage = '';
|
||||
|
||||
// reset errors:
|
||||
this.resetErrors();
|
||||
|
||||
// build account array
|
||||
const submission = this.buildRule();
|
||||
|
||||
(new Put())
|
||||
.post(this.id, submission)
|
||||
.catch(this.processErrors)
|
||||
.then(this.processSuccess);
|
||||
},
|
||||
buildRule: function () {
|
||||
return {
|
||||
title: this.title,
|
||||
};
|
||||
},
|
||||
dismissBanner: function () {
|
||||
this.errorMessage = '';
|
||||
},
|
||||
processSuccess: function (response) {
|
||||
this.$store.dispatch('fireflyiii/refreshCacheKey');
|
||||
if (!response) {
|
||||
return;
|
||||
}
|
||||
this.submitting = false;
|
||||
let message = {
|
||||
level: 'success',
|
||||
text: 'Rule is updated',
|
||||
show: true,
|
||||
action: {
|
||||
show: true,
|
||||
text: 'Go to rule',
|
||||
link: {name: 'rules.show', params: {id: parseInt(response.data.data.id)}}
|
||||
}
|
||||
};
|
||||
// store flash
|
||||
this.$q.localStorage.set('flash', message);
|
||||
if (this.doReturnHere) {
|
||||
window.dispatchEvent(new CustomEvent('flash', {
|
||||
detail: {
|
||||
flash: this.$q.localStorage.getItem('flash')
|
||||
}
|
||||
}));
|
||||
}
|
||||
if (!this.doReturnHere) {
|
||||
// return to previous page.
|
||||
this.$router.go(-1);
|
||||
}
|
||||
|
||||
},
|
||||
processErrors: function (error) {
|
||||
if (error.response) {
|
||||
let errors = error.response.data; // => the response payload
|
||||
this.errorMessage = errors.message;
|
||||
console.log(errors);
|
||||
for (let i in errors.errors) {
|
||||
if (errors.errors.hasOwnProperty(i)) {
|
||||
this.submissionErrors[i] = errors.errors[i][0];
|
||||
this.hasSubmissionErrors[i] = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
this.submitting = false;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
212
frontend/src/pages/rules/Index.vue
Normal file
212
frontend/src/pages/rules/Index.vue
Normal file
@@ -0,0 +1,212 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<q-card v-for="ruleGroup in ruleGroups" class="q-ma-md">
|
||||
<q-table
|
||||
:title="ruleGroup.title"
|
||||
:rows="ruleGroup.rules"
|
||||
:columns="columns"
|
||||
row-key="id"
|
||||
:pagination="pagination"
|
||||
:dense="$q.screen.lt.md"
|
||||
:loading="ruleGroup.loading"
|
||||
|
||||
>
|
||||
<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: 'rules.show', params: {id: props.row.id} }" class="text-primary">
|
||||
{{ props.row.title }}
|
||||
</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: 'rules.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="deleteRule(props.row.id, props.row.title)">
|
||||
<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>
|
||||
<q-card-actions>
|
||||
<q-btn-group>
|
||||
<q-btn size="sm" :to="{name: 'rule-groups.edit', params: {id: ruleGroup.id}}" color="primary">Edit group
|
||||
</q-btn>
|
||||
<q-btn size="sm" color="primary" @click="deleteRuleGroup(ruleGroup.id, ruleGroup.title)">Delete group
|
||||
</q-btn>
|
||||
</q-btn-group>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
|
||||
<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: 'rule-groups.create'}" icon="fas fa-exchange-alt"
|
||||
label="New rule group"/>
|
||||
<q-fab-action color="primary" square :to="{ name: 'rules.create'}" icon="fas fa-exchange-alt" label="New rule"/>
|
||||
</q-fab>
|
||||
</q-page-sticky>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapGetters} from "vuex";
|
||||
import List from "../../api/rule-groups/list";
|
||||
import Get from "../../api/rule-groups/get";
|
||||
import Destroy from "../../api/rule-groups/destroy";
|
||||
import DestroyRule from "../../api/rules/destroy";
|
||||
|
||||
export default {
|
||||
name: 'Index',
|
||||
watch: {
|
||||
$route(to) {
|
||||
// react to route changes...
|
||||
if ('rules.index' === to.name) {
|
||||
this.triggerUpdate();
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.triggerUpdate();
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pagination: {
|
||||
page: 1,
|
||||
rowsPerPage: 0
|
||||
},
|
||||
columns: [
|
||||
{name: 'name', label: 'Name', field: 'name', align: 'left'},
|
||||
{name: 'menu', label: ' ', field: 'menu', align: 'right'},
|
||||
],
|
||||
ruleGroups: {},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('fireflyiii', ['getRange', 'getCacheKey']),
|
||||
},
|
||||
methods: {
|
||||
triggerUpdate: function () {
|
||||
if (this.loading) {
|
||||
return;
|
||||
}
|
||||
this.loading = true;
|
||||
this.ruleGroups = {};
|
||||
this.getPage(1);
|
||||
},
|
||||
deleteRule: function (id, title) {
|
||||
this.$q.dialog({
|
||||
title: 'Confirm',
|
||||
message: 'Do you want to delete rule "' + title + '"?',
|
||||
cancel: true,
|
||||
persistent: true
|
||||
}).onOk(() => {
|
||||
this.destroyRule(id);
|
||||
});
|
||||
},
|
||||
deleteRuleGroup: function (id, title) {
|
||||
this.$q.dialog({
|
||||
title: 'Confirm',
|
||||
message: 'Do you want to delete rule group "' + title + '"?',
|
||||
cancel: true,
|
||||
persistent: true
|
||||
}).onOk(() => {
|
||||
this.destroyRuleGroup(id);
|
||||
});
|
||||
},
|
||||
destroyRuleGroup: function (id) {
|
||||
let destr = new Destroy;
|
||||
destr.destroy(id).then(() => {
|
||||
this.$store.dispatch('fireflyiii/refreshCacheKey');
|
||||
this.triggerUpdate();
|
||||
});
|
||||
},
|
||||
destroyRule: function (id) {
|
||||
let destr = new DestroyRule;
|
||||
destr.destroy(id).then(() => {
|
||||
this.$store.dispatch('fireflyiii/refreshCacheKey');
|
||||
this.triggerUpdate();
|
||||
});
|
||||
},
|
||||
getPage: function (page) {
|
||||
const list = new List();
|
||||
this.rows = [];
|
||||
list.list(page, this.getCacheKey).then(
|
||||
(response) => {
|
||||
if (page < parseInt(response.data.meta.pagination.total_pages)) {
|
||||
this.getPage(page + 1);
|
||||
}
|
||||
for (let i in response.data.data) {
|
||||
if (response.data.data.hasOwnProperty(i)) {
|
||||
let current = response.data.data[i];
|
||||
let identifier = parseInt(current.id);
|
||||
this.ruleGroups[identifier] = {
|
||||
id: identifier,
|
||||
title: current.attributes.title,
|
||||
rules: [],
|
||||
loading: true
|
||||
};
|
||||
this.getRules(identifier, 1);
|
||||
}
|
||||
}
|
||||
if (page === parseInt(response.data.meta.pagination.total_pages)) {
|
||||
this.loading = false;
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
getRules: function (identifier, page) {
|
||||
const get = new Get;
|
||||
this.rows = [];
|
||||
get.rules(identifier, page, this.getCacheKey).then(
|
||||
(response) => {
|
||||
if (page < parseInt(response.data.meta.pagination.total_pages)) {
|
||||
this.getRules(identifier, page + 1);
|
||||
}
|
||||
for (let i in response.data.data) {
|
||||
if (response.data.data.hasOwnProperty(i)) {
|
||||
let current = response.data.data[i];
|
||||
let ruleId = parseInt(current.id);
|
||||
let rule = {
|
||||
id: ruleId,
|
||||
title: current.attributes.title,
|
||||
};
|
||||
this.ruleGroups[identifier].rules.push(rule);
|
||||
}
|
||||
}
|
||||
if (page === parseInt(response.data.meta.pagination.total_pages)) {
|
||||
this.ruleGroups[identifier].loading = false;
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
57
frontend/src/pages/rules/Show.vue
Normal file
57
frontend/src/pages/rules/Show.vue
Normal file
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<!-- Balance chart -->
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">{{ rule.title }}</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
Rule: {{ rule.title }}<br>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Get from "../../api/rules/get";
|
||||
|
||||
export default {
|
||||
name: "Show",
|
||||
data() {
|
||||
return {
|
||||
rule: {},
|
||||
id: 0
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.id = parseInt(this.$route.params.id);
|
||||
this.getRule();
|
||||
},
|
||||
methods: {
|
||||
onRequest: function (payload) {
|
||||
this.page = payload.page;
|
||||
this.getRule();
|
||||
},
|
||||
getRule: function () {
|
||||
(new Get).get(this.id).then((response) => this.parseRule(response));
|
||||
},
|
||||
parseRule: function (response) {
|
||||
this.rule = {
|
||||
title: response.data.data.attributes.title,
|
||||
};
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
276
frontend/src/pages/subscriptions/Create.vue
Normal file
276
frontend/src/pages/subscriptions/Create.vue
Normal file
@@ -0,0 +1,276 @@
|
||||
<!--
|
||||
- Create.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>
|
||||
<q-page>
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<q-banner inline-actions rounded class="bg-orange text-white" v-if="'' !== errorMessage">
|
||||
{{ errorMessage }}
|
||||
<template v-slot:action>
|
||||
<q-btn flat @click="dismissBanner" label="Dismiss"/>
|
||||
</template>
|
||||
</q-banner>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-mx-md q-mt-md">
|
||||
<div class="col-12">
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">Info for new subscription</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
<q-input
|
||||
:error-message="submissionErrors.name"
|
||||
:error="hasSubmissionErrors.name"
|
||||
bottom-slots :disable="disabledInput" type="text" clearable v-model="name" :label="$t('form.name')"
|
||||
outlined/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
<q-input
|
||||
:error-message="submissionErrors.date"
|
||||
:error="hasSubmissionErrors.date"
|
||||
bottom-slots :disable="disabledInput" type="date" v-model="date" :label="$t('form.date')"
|
||||
hint="The next date you expect the subscription to hit"
|
||||
outlined/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6 q-mb-xs q-pr-xs">
|
||||
<q-input
|
||||
:error-message="submissionErrors.amount_min"
|
||||
:error="hasSubmissionErrors.amount_min"
|
||||
bottom-slots :disable="disabledInput" type="number" v-model="amount_min" :label="$t('form.amount_min')"
|
||||
outlined/>
|
||||
</div>
|
||||
<div class="col-6 q-mb-xs q-pl-xs">
|
||||
<q-input
|
||||
:error-message="submissionErrors.amount_max"
|
||||
:error="hasSubmissionErrors.amount_max"
|
||||
:rules="[ val => parseFloat(val) >= parseFloat(amount_min) || 'Must be more than minimum amount']"
|
||||
bottom-slots :disable="disabledInput" type="number" v-model="amount_max" :label="$t('form.amount_max')"
|
||||
outlined/>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
<q-select
|
||||
:error-message="submissionErrors.repeat_freq"
|
||||
:error="hasSubmissionErrors.repeat_freq"
|
||||
outlined v-model="repeat_freq" :options="repeatFrequencies" label="Outlined"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<q-card class="q-mt-xs">
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 text-right">
|
||||
<q-btn :disable="disabledInput" color="primary" label="Submit" @click="submitSubscription"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 text-right">
|
||||
<q-checkbox :disable="disabledInput" v-model="doReturnHere" left-label label="Return here to create another one"/>
|
||||
<br/>
|
||||
<q-checkbox v-model="doResetForm" left-label :disable="!doReturnHere || disabledInput" label="Reset form after submission"/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Post from "../../api/subscriptions/post";
|
||||
import format from 'date-fns/format';
|
||||
|
||||
export default {
|
||||
name: "Create",
|
||||
data() {
|
||||
return {
|
||||
submissionErrors: {},
|
||||
hasSubmissionErrors: {},
|
||||
submitting: false,
|
||||
doReturnHere: false,
|
||||
doResetForm: false,
|
||||
errorMessage: '',
|
||||
repeatFrequencies: [],
|
||||
// subscription fields:
|
||||
name: '',
|
||||
date: '',
|
||||
repeat_freq: 'monthly',
|
||||
amount_min: '',
|
||||
amount_max: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
disabledInput: function () {
|
||||
return this.submitting;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.date = format(new Date, 'y-MM-dd');
|
||||
this.repeatFrequencies = [
|
||||
{
|
||||
label: this.$t('firefly.repeat_freq_weekly'),
|
||||
value: 'weekly',
|
||||
},
|
||||
{
|
||||
label: this.$t('firefly.repeat_freq_monthly'),
|
||||
value: 'monthly',
|
||||
},
|
||||
{
|
||||
label: this.$t('firefly.repeat_freq_quarterly'),
|
||||
value: 'quarterly',
|
||||
},
|
||||
{
|
||||
label: this.$t('firefly.repeat_freq_half-year'),
|
||||
value: 'half-year',
|
||||
},
|
||||
{
|
||||
label: this.$t('firefly.repeat_freq_yearly'),
|
||||
value: 'yearly',
|
||||
},
|
||||
|
||||
];
|
||||
|
||||
this.resetForm();
|
||||
},
|
||||
methods: {
|
||||
resetForm: function () {
|
||||
this.name = '';
|
||||
this.date = format(new Date, 'y-MM-dd');
|
||||
this.repeat_freq = 'monthly';
|
||||
this.amount_min = '';
|
||||
this.amount_max = '';
|
||||
this.resetErrors();
|
||||
|
||||
},
|
||||
resetErrors: function () {
|
||||
this.submissionErrors =
|
||||
{
|
||||
name: '',
|
||||
date: '',
|
||||
repeat_freq: '',
|
||||
amount_min: '',
|
||||
amount_max: '',
|
||||
};
|
||||
this.hasSubmissionErrors = {
|
||||
name: false,
|
||||
date: false,
|
||||
repeat_freq: false,
|
||||
amount_min: false,
|
||||
amount_max: false,
|
||||
};
|
||||
},
|
||||
submitSubscription: function () {
|
||||
this.submitting = true;
|
||||
this.errorMessage = '';
|
||||
|
||||
// reset errors:
|
||||
this.resetErrors();
|
||||
|
||||
// build account array
|
||||
const submission = this.buildSubscription();
|
||||
|
||||
let subscriptions = new Post();
|
||||
subscriptions
|
||||
.post(submission)
|
||||
.catch(this.processErrors)
|
||||
.then(this.processSuccess);
|
||||
},
|
||||
buildSubscription: function () {
|
||||
let subscription = {
|
||||
name: this.name,
|
||||
date: this.date,
|
||||
repeat_freq: this.repeat_freq,
|
||||
amount_min: this.amount_min,
|
||||
amount_max: this.amount_max,
|
||||
};
|
||||
return subscription;
|
||||
},
|
||||
dismissBanner: function () {
|
||||
this.errorMessage = '';
|
||||
},
|
||||
processSuccess: function (response) {
|
||||
if (!response) {
|
||||
return;
|
||||
}
|
||||
this.submitting = false;
|
||||
let message = {
|
||||
level: 'success',
|
||||
text: 'I am new subscription lol',
|
||||
show: true,
|
||||
action: {
|
||||
show: true,
|
||||
text: 'Go to account',
|
||||
link: {name: 'subscriptions.show', params: {id: parseInt(response.data.data.id)}}
|
||||
}
|
||||
};
|
||||
// store flash
|
||||
this.$q.localStorage.set('flash', message);
|
||||
if (this.doReturnHere) {
|
||||
window.dispatchEvent(new CustomEvent('flash', {
|
||||
detail: {
|
||||
flash: this.$q.localStorage.getItem('flash')
|
||||
}
|
||||
}));
|
||||
}
|
||||
if (!this.doReturnHere) {
|
||||
// return to previous page.
|
||||
this.$router.go(-1);
|
||||
}
|
||||
|
||||
},
|
||||
processErrors: function (error) {
|
||||
if (error.response) {
|
||||
let errors = error.response.data; // => the response payload
|
||||
this.errorMessage = errors.message;
|
||||
console.log(errors);
|
||||
for (let i in errors.errors) {
|
||||
if (errors.errors.hasOwnProperty(i)) {
|
||||
this.submissionErrors[i] = errors.errors[i][0];
|
||||
this.hasSubmissionErrors[i] = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
this.submitting = false;
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
281
frontend/src/pages/subscriptions/Edit.vue
Normal file
281
frontend/src/pages/subscriptions/Edit.vue
Normal file
@@ -0,0 +1,281 @@
|
||||
<!--
|
||||
- Create.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>
|
||||
<q-page>
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<q-banner inline-actions rounded class="bg-orange text-white" v-if="'' !== errorMessage">
|
||||
{{ errorMessage }}
|
||||
<template v-slot:action>
|
||||
<q-btn flat @click="dismissBanner" label="Dismiss"/>
|
||||
</template>
|
||||
</q-banner>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-mx-md q-mt-md">
|
||||
<div class="col-12">
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">Edit subscription {{ name }}</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
<q-input
|
||||
:error-message="submissionErrors.name"
|
||||
:error="hasSubmissionErrors.name"
|
||||
bottom-slots :disable="disabledInput" type="text" clearable v-model="name" :label="$t('form.name')"
|
||||
outlined/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
<q-input
|
||||
:error-message="submissionErrors.date"
|
||||
:error="hasSubmissionErrors.date"
|
||||
bottom-slots :disable="disabledInput" type="date" v-model="date" :label="$t('form.date')"
|
||||
hint="The next date you expect the subscription to hit"
|
||||
outlined/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6 q-mb-xs q-pr-xs">
|
||||
<q-input
|
||||
:error-message="submissionErrors.amount_min"
|
||||
:error="hasSubmissionErrors.amount_min"
|
||||
bottom-slots :disable="disabledInput" type="number" v-model="amount_min" :label="$t('form.amount_min')"
|
||||
outlined/>
|
||||
</div>
|
||||
<div class="col-6 q-mb-xs q-pl-xs">
|
||||
<q-input
|
||||
:error-message="submissionErrors.amount_max"
|
||||
:error="hasSubmissionErrors.amount_max"
|
||||
:rules="[ val => parseFloat(val) >= parseFloat(amount_min) || 'Must be more than minimum amount']"
|
||||
bottom-slots :disable="disabledInput" type="number" v-model="amount_max" :label="$t('form.amount_max')"
|
||||
outlined/>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
<q-select
|
||||
:error-message="submissionErrors.repeat_freq"
|
||||
:error="hasSubmissionErrors.repeat_freq"
|
||||
outlined v-model="repeat_freq" :options="repeatFrequencies" label="Outlined"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<q-card class="q-mt-xs">
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 text-right">
|
||||
<q-btn :disable="disabledInput" color="primary" label="Submit" @click="submitSubscription"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 text-right">
|
||||
<q-checkbox :disable="disabledInput" v-model="doReturnHere" left-label label="Return here to create another one"/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Put from "../../api/subscriptions/put";
|
||||
import format from 'date-fns/format';
|
||||
import Get from "../../api/subscriptions/get";
|
||||
|
||||
export default {
|
||||
name: "Edit",
|
||||
data() {
|
||||
return {
|
||||
tab: 'split-0',
|
||||
submissionErrors: {},
|
||||
hasSubmissionErrors: {},
|
||||
submitting: false,
|
||||
doReturnHere: false,
|
||||
doResetForm: false,
|
||||
errorMessage: '',
|
||||
repeatFrequencies: [],
|
||||
// subscription fields:
|
||||
id: 0,
|
||||
name: '',
|
||||
date: '',
|
||||
repeat_freq: 'monthly',
|
||||
amount_min: '',
|
||||
amount_max: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
disabledInput: function () {
|
||||
return this.submitting;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.date = format(new Date, 'y-MM-dd');
|
||||
this.repeatFrequencies = [
|
||||
{
|
||||
label: this.$t('firefly.repeat_freq_weekly'),
|
||||
value: 'weekly',
|
||||
},
|
||||
{
|
||||
label: this.$t('firefly.repeat_freq_monthly'),
|
||||
value: 'monthly',
|
||||
},
|
||||
{
|
||||
label: this.$t('firefly.repeat_freq_quarterly'),
|
||||
value: 'quarterly',
|
||||
},
|
||||
{
|
||||
label: this.$t('firefly.repeat_freq_half-year'),
|
||||
value: 'half-year',
|
||||
},
|
||||
{
|
||||
label: this.$t('firefly.repeat_freq_yearly'),
|
||||
value: 'yearly',
|
||||
},
|
||||
|
||||
];
|
||||
|
||||
this.id = parseInt(this.$route.params.id);
|
||||
this.collectSubscription();
|
||||
},
|
||||
methods: {
|
||||
resetErrors: function () {
|
||||
this.submissionErrors =
|
||||
{
|
||||
name: '',
|
||||
date: '',
|
||||
repeat_freq: '',
|
||||
amount_min: '',
|
||||
amount_max: '',
|
||||
};
|
||||
this.hasSubmissionErrors = {
|
||||
name: false,
|
||||
date: false,
|
||||
repeat_freq: false,
|
||||
amount_min: false,
|
||||
amount_max: false,
|
||||
};
|
||||
},
|
||||
collectSubscription: function() {
|
||||
let get = new Get;
|
||||
get.get(this.id).then((response) => this.parseSubscription(response));
|
||||
},
|
||||
submitSubscription: function () {
|
||||
this.submitting = true;
|
||||
this.errorMessage = '';
|
||||
|
||||
// reset errors:
|
||||
this.resetErrors();
|
||||
|
||||
// build subscription array
|
||||
const submission = this.buildSubscription();
|
||||
|
||||
let subscriptions = new Put();
|
||||
subscriptions
|
||||
.put(this.id, submission)
|
||||
.catch(this.processErrors)
|
||||
.then(this.processSuccess);
|
||||
},
|
||||
parseSubscription: function(response) {
|
||||
this.name = response.data.data.attributes.name;
|
||||
this.date = response.data.data.attributes.date.substr(0,10);
|
||||
console.log(this.date);
|
||||
this.repeat_freq = response.data.data.attributes.repeat_freq;
|
||||
this.amount_min = response.data.data.attributes.amount_min;
|
||||
this.amount_max = response.data.data.attributes.amount_max;
|
||||
},
|
||||
buildSubscription: function () {
|
||||
let subscription = {
|
||||
name: this.name,
|
||||
date: this.date,
|
||||
repeat_freq: this.repeat_freq,
|
||||
amount_min: this.amount_min,
|
||||
amount_max: this.amount_max,
|
||||
};
|
||||
return subscription;
|
||||
},
|
||||
dismissBanner: function () {
|
||||
this.errorMessage = '';
|
||||
},
|
||||
processSuccess: function (response) {
|
||||
if (!response) {
|
||||
return;
|
||||
}
|
||||
this.submitting = false;
|
||||
let message = {
|
||||
level: 'success',
|
||||
text: 'I am updated subscription ',
|
||||
show: true,
|
||||
action: {
|
||||
show: true,
|
||||
text: 'Go to subscription',
|
||||
link: {name: 'subscriptions.show', params: {id: parseInt(response.data.data.id)}}
|
||||
}
|
||||
};
|
||||
// store flash
|
||||
this.$q.localStorage.set('flash', message);
|
||||
if (this.doReturnHere) {
|
||||
window.dispatchEvent(new CustomEvent('flash', {
|
||||
detail: {
|
||||
flash: this.$q.localStorage.getItem('flash')
|
||||
}
|
||||
}));
|
||||
}
|
||||
if (!this.doReturnHere) {
|
||||
// return to previous page.
|
||||
this.$router.go(-1);
|
||||
}
|
||||
|
||||
},
|
||||
processErrors: function (error) {
|
||||
if (error.response) {
|
||||
let errors = error.response.data; // => the response payload
|
||||
this.errorMessage = errors.message;
|
||||
console.log(errors);
|
||||
for (let i in errors.errors) {
|
||||
if (errors.errors.hasOwnProperty(i)) {
|
||||
this.submissionErrors[i] = errors.errors[i][0];
|
||||
this.hasSubmissionErrors[i] = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
this.submitting = false;
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
170
frontend/src/pages/subscriptions/Index.vue
Normal file
170
frontend/src/pages/subscriptions/Index.vue
Normal file
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<q-table
|
||||
:title="$t('firefly.subscriptions')"
|
||||
: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: 'subscriptions.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: 'subscriptions.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="deleteSubscription(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>
|
||||
<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: 'subscriptions.create', params: {type: 'asset'} }" icon="fas fa-exchange-alt"
|
||||
label="New subscription"/>
|
||||
</q-fab>
|
||||
</q-page-sticky>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapGetters, useStore} from "vuex";
|
||||
import List from "../../api/subscriptions/list";
|
||||
import Destroy from "../../api/subscriptions/destroy";
|
||||
|
||||
export default {
|
||||
name: 'Index',
|
||||
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();
|
||||
}
|
||||
},
|
||||
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'},
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onRequest: function (props) {
|
||||
this.page = props.pagination.page;
|
||||
this.triggerUpdate();
|
||||
},
|
||||
deleteSubscription: function (id, name) {
|
||||
this.$q.dialog({
|
||||
title: 'Confirm',
|
||||
message: 'Do you want to delete subscriptions "' + name + '"? Transactions linked to this subscription will not be deleted.',
|
||||
cancel: true,
|
||||
persistent: true
|
||||
}).onOk(() => {
|
||||
this.destroySubscription(id);
|
||||
});
|
||||
},
|
||||
destroySubscription: function (id) {
|
||||
let destr = new Destroy;
|
||||
destr.destroy(id).then(() => {
|
||||
this.$store.dispatch('fireflyiii/refreshCacheKey');
|
||||
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>
|
||||
116
frontend/src/pages/subscriptions/Show.vue
Normal file
116
frontend/src/pages/subscriptions/Show.vue
Normal file
@@ -0,0 +1,116 @@
|
||||
<!--
|
||||
- Show.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>
|
||||
<q-page>
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">{{ subscription.name }}</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
Name: {{ subscription.name }}<br>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-mt-sm">
|
||||
<div class="col-12">
|
||||
<LargeTable ref="table"
|
||||
title="Transactions"
|
||||
:rows="rows"
|
||||
:loading="loading"
|
||||
v-on:on-request="onRequest"
|
||||
:rows-number="rowsNumber"
|
||||
:rows-per-page="rowsPerPage"
|
||||
:page="page"
|
||||
>
|
||||
</LargeTable>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LargeTable from "../../components/transactions/LargeTable";
|
||||
import Get from "../../api/subscriptions/get";
|
||||
import Parser from "../../api/transactions/parser";
|
||||
|
||||
export default {
|
||||
name: "Show",
|
||||
data() {
|
||||
return {
|
||||
subscription: {},
|
||||
rows: [],
|
||||
rowsNumber: 1,
|
||||
rowsPerPage: 10,
|
||||
page: 1
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.id = parseInt(this.$route.params.id);
|
||||
this.getSubscription();
|
||||
},
|
||||
components: {LargeTable},
|
||||
methods: {
|
||||
onRequest: function (payload) {
|
||||
this.page = payload.page;
|
||||
this.getSubscription();
|
||||
},
|
||||
getSubscription: function () {
|
||||
let get = new Get;
|
||||
get.get(this.id).then((response) => this.parseSubscription(response));
|
||||
|
||||
this.loading = true;
|
||||
const parser = new Parser;
|
||||
this.rows = [];
|
||||
|
||||
get.transactions(this.id, this.page, this.getCacheKey).then(
|
||||
(response) => {
|
||||
let resp = parser.parseResponse(response);
|
||||
|
||||
this.rowsPerPage = resp.rowsPerPage;
|
||||
this.rowsNumber = resp.rowsNumber;
|
||||
this.rows = resp.rows;
|
||||
this.loading = false;
|
||||
}
|
||||
);
|
||||
},
|
||||
parseSubscription: function (response) {
|
||||
this.subscription = {
|
||||
name: response.data.data.attributes.name,
|
||||
|
||||
};
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
114
frontend/src/pages/tags/Index.vue
Normal file
114
frontend/src/pages/tags/Index.vue
Normal file
@@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
<span v-for="tag in tags">
|
||||
<q-badge outline class="q-ma-xs" color="blue">
|
||||
<router-link :to="{ name: 'tags.show', params: {id: tag.id} }">
|
||||
{{ tag.attributes.tag }}
|
||||
</router-link>
|
||||
|
||||
</q-badge>
|
||||
</span>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
<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: 'tags.create'}" icon="fas fa-exchange-alt" label="New tag"/>
|
||||
</q-fab>
|
||||
</q-page-sticky>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapGetters, useStore} from "vuex";
|
||||
import List from "../../api/tags/list";
|
||||
|
||||
export default {
|
||||
name: 'Index',
|
||||
watch: {
|
||||
$route(to) {
|
||||
// react to route changes...
|
||||
if ('tags.index' === to.name) {
|
||||
this.page = 1;
|
||||
this.updateBreadcrumbs();
|
||||
this.triggerUpdate();
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tags: [],
|
||||
loading: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('fireflyiii', ['getRange', 'getCacheKey']),
|
||||
},
|
||||
created() {
|
||||
},
|
||||
mounted() {
|
||||
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: {
|
||||
updateBreadcrumbs: function () {
|
||||
this.$route.meta.pageTitle = 'firefly.tags';
|
||||
this.$route.meta.breadcrumbs = [{title: 'tags'}];
|
||||
|
||||
},
|
||||
onRequest: function (props) {
|
||||
this.page = props.pagination.page;
|
||||
this.triggerUpdate();
|
||||
},
|
||||
triggerUpdate: function () {
|
||||
if (this.loading) {
|
||||
return;
|
||||
}
|
||||
this.loading = true;
|
||||
this.getPage(1);
|
||||
},
|
||||
getPage: function (page) {
|
||||
const list = new List();
|
||||
this.rows = [];
|
||||
list.list(page, this.getCacheKey).then(
|
||||
(response) => {
|
||||
for (let i in response.data.data) {
|
||||
if (response.data.data.hasOwnProperty(i)) {
|
||||
let current = response.data.data[i];
|
||||
this.tags.push(current);
|
||||
}
|
||||
}
|
||||
// get next page:
|
||||
if (page < parseInt(response.data.meta.pagination.total_pages)) {
|
||||
this.getPage(page + 1);
|
||||
}
|
||||
if (page === parseInt(response.data.meta.pagination.total_pages)) {
|
||||
this.loading = false;
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
118
frontend/src/pages/tags/Show.vue
Normal file
118
frontend/src/pages/tags/Show.vue
Normal file
@@ -0,0 +1,118 @@
|
||||
<!--
|
||||
- Show.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>
|
||||
<q-page>
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<!-- Balance chart -->
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">{{ tag.tag }}</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
Tag: {{ tag.tag }}<br>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-mt-sm">
|
||||
<div class="col-12">
|
||||
<LargeTable ref="table"
|
||||
title="Transactions"
|
||||
:rows="rows"
|
||||
:loading="loading"
|
||||
v-on:on-request="onRequest"
|
||||
:rows-number="rowsNumber"
|
||||
:rows-per-page="rowsPerPage"
|
||||
:page="page"
|
||||
>
|
||||
</LargeTable>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Get from "../../api/tags/get";
|
||||
import LargeTable from "../../components/transactions/LargeTable";
|
||||
import Parser from "../../api/transactions/parser";
|
||||
|
||||
export default {
|
||||
name: "Show",
|
||||
data() {
|
||||
return {
|
||||
tag: {},
|
||||
rows: [],
|
||||
rowsNumber: 1,
|
||||
rowsPerPage: 10,
|
||||
page: 1
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.id = parseInt(this.$route.params.id);
|
||||
this.getTag();
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
components: {LargeTable},
|
||||
methods: {
|
||||
onRequest: function (payload) {
|
||||
this.page = payload.page;
|
||||
this.getTag();
|
||||
},
|
||||
getTag: function () {
|
||||
let get = new Get;
|
||||
get.get(this.id).then((response) => this.parseTag(response));
|
||||
|
||||
this.loading = true;
|
||||
const parser = new Parser;
|
||||
this.rows = [];
|
||||
|
||||
get.transactions(this.id, this.page, this.getCacheKey).then(
|
||||
(response) => {
|
||||
let resp = parser.parseResponse(response);
|
||||
|
||||
this.rowsPerPage = resp.rowsPerPage;
|
||||
this.rowsNumber = resp.rowsNumber;
|
||||
this.rows = resp.rows;
|
||||
this.loading = false;
|
||||
}
|
||||
);
|
||||
},
|
||||
parseTag: function (response) {
|
||||
this.tag = {
|
||||
tag: response.data.data.attributes.tag,
|
||||
};
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
512
frontend/src/pages/transactions/Create.vue
Normal file
512
frontend/src/pages/transactions/Create.vue
Normal file
@@ -0,0 +1,512 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<q-banner inline-actions rounded class="bg-orange text-white" v-if="'' !== errorMessage">
|
||||
{{ errorMessage }}
|
||||
<template v-slot:action>
|
||||
<q-btn flat @click="dismissBanner" label="Dismiss"/>
|
||||
</template>
|
||||
</q-banner>
|
||||
</div>
|
||||
</div>
|
||||
<!--
|
||||
<div class="row q-ma-md">
|
||||
<div class="col-12">
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<q-tabs
|
||||
v-model="tab"
|
||||
inline-label
|
||||
dense
|
||||
align="left"
|
||||
class="text-teal col"
|
||||
>
|
||||
<q-tab v-for="(transaction,index) in transactions" :name="'split-' + index" :label="getSplitLabel(index)"/>
|
||||
<q-btn @click="addTransaction" flat label="Add split" icon="fas fa-plus-circle" class="text-orange"></q-btn>
|
||||
</q-tabs>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<q-tab-panels v-model="tab" animated>
|
||||
<q-tab-panel v-for="(transaction,index) in transactions" :key="index" :name="'split-' + index">
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">Info for {{ $route.params.type }} {{ index }}</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
<q-input
|
||||
:error-message="submissionErrors[index].description"
|
||||
:error="hasSubmissionErrors[index].description"
|
||||
bottom-slots :disable="disabledInput" type="text" clearable v-model="transaction.description" :label="$t('firefly.description')"
|
||||
outlined/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-4 q-mb-xs q-pr-xs">
|
||||
<q-input
|
||||
:error-message="submissionErrors[index].source"
|
||||
:error="hasSubmissionErrors[index].source"
|
||||
bottom-slots :disable="disabledInput" clearable v-model="transaction.source" :label="$t('firefly.source_account')" outlined/>
|
||||
</div>
|
||||
<div class="col-4 q-px-xs">
|
||||
<q-input
|
||||
:error-message="submissionErrors[index].amount"
|
||||
:error="hasSubmissionErrors[index].amount"
|
||||
bottom-slots :disable="disabledInput" clearable mask="#.##" reverse-fill-mask hint="Expects #.##" fill-mask="0"
|
||||
v-model="transaction.amount"
|
||||
:label="$t('firefly.amount')" outlined/>
|
||||
</div>
|
||||
<div class="col-4 q-pl-xs">
|
||||
<q-input
|
||||
:error-message="submissionErrors[index].destination"
|
||||
:error="hasSubmissionErrors[index].destination"
|
||||
bottom-slots :disable="disabledInput" clearable v-model="transaction.destination" :label="$t('firefly.destination_account')"
|
||||
outlined/>
|
||||
</div>
|
||||
</div>
|
||||
<!--
|
||||
<div class="row">
|
||||
<div class="col-4 offset-4">
|
||||
Foreign
|
||||
</div>
|
||||
|
||||
</div>
|
||||
-->
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<q-input
|
||||
:error-message="submissionErrors[index].date"
|
||||
:error="hasSubmissionErrors[index].date"
|
||||
bottom-slots :disable="disabledInput" v-model="transaction.date" outlined type="date" :hint="$t('firefly.date')"/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-input bottom-slots :disable="disabledInput" v-model="transaction.time" outlined type="time" :hint="$t('firefly.time')"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--
|
||||
<div class="col-4 offset-4">
|
||||
<q-input v-model="transaction.interest_date" filled type="date" hint="Interest date"/>
|
||||
<q-input v-model="transaction.book_date" filled type="date" hint="Book date"/>
|
||||
<q-input v-model="transaction.process_date" filled type="date" hint="Processing date"/>
|
||||
<q-input v-model="transaction.due_date" filled type="date" hint="Due date"/>
|
||||
<q-input v-model="transaction.payment_date" filled type="date" hint="Payment date"/>
|
||||
<q-input v-model="transaction.invoice_date" filled type="date" hint="Invoice date"/>
|
||||
</div>
|
||||
-->
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
<!--
|
||||
<q-card bordered class="q-mt-md">
|
||||
<q-card-section>
|
||||
<div class="text-h6">Meta for {{ $route.params.type }}</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<q-select filled v-model="transaction.budget" :options="tempBudgets" label="Budget"/>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<q-input filled clearable v-model="transaction.category" :label="$t('firefly.category')" outlined/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<q-select filled v-model="transaction.subscription" :options="tempSubscriptions" label="Subscription"/>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
Tags
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
Bill
|
||||
</div>
|
||||
<div class="col-6">
|
||||
???
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
-->
|
||||
<!--
|
||||
<q-card bordered class="q-mt-md">
|
||||
<q-card-section>
|
||||
<div class="text-h6">Extr for {{ $route.params.type }}</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
Notes
|
||||
</div>
|
||||
<div class="col-6">
|
||||
attachments
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
Links
|
||||
</div>
|
||||
<div class="col-6">
|
||||
reference
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
url
|
||||
</div>
|
||||
<div class="col-6">
|
||||
location
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
-->
|
||||
</q-tab-panel>
|
||||
|
||||
<!--
|
||||
<q-tab-panel name="split-1">
|
||||
<div class="text-h6">Alarms1</div>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
||||
</q-tab-panel>
|
||||
|
||||
<q-tab-panel name="split-2">
|
||||
<div class="text-h6">Movies1</div>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
||||
</q-tab-panel>
|
||||
-->
|
||||
</q-tab-panels>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<q-card class="q-mt-xs">
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 text-right">
|
||||
<q-btn :disable="disabledInput" color="primary" label="Submit" @click="submitTransaction"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 text-right">
|
||||
<q-checkbox :disable="disabledInput" v-model="doReturnHere" left-label label="Return here to create another one"/>
|
||||
<br/>
|
||||
<q-checkbox v-model="doResetForm" left-label :disable="!doReturnHere || disabledInput" label="Reset form after submission"/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import format from 'date-fns/format';
|
||||
import formatISO from 'date-fns/formatISO';
|
||||
import Post from "../../api/transactions/post";
|
||||
import { useQuasar } from 'quasar';
|
||||
|
||||
export default {
|
||||
name: 'Create',
|
||||
data() {
|
||||
return {
|
||||
tab: 'split-0',
|
||||
transactions: [],
|
||||
submissionErrors: [],
|
||||
hasSubmissionErrors: [],
|
||||
submitting: false,
|
||||
doReturnHere: false,
|
||||
doResetForm: false,
|
||||
group_title: '',
|
||||
//tempModels: ['A', 'B', 'C'],
|
||||
//tempBudgets: [{label: 'Budget A', value: 1}, {label: 'Budget B', value: 2}, {label: 'Budget C', value: 3}],
|
||||
//tempSubscriptions: [{label: 'Sub A', value: 1}, {label: 'Sub B', value: 2}, {label: 'Sub C', value: 3}]
|
||||
|
||||
errorMessage: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
disabledInput: function () {
|
||||
return this.submitting;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.resetForm();
|
||||
},
|
||||
methods: {
|
||||
resetForm: function () {
|
||||
this.transactions = [];
|
||||
const info = this.getDefaultTransaction();
|
||||
this.transactions.push(info.transaction);
|
||||
this.submissionErrors.push(info.submissionError);
|
||||
this.hasSubmissionErrors.push(info.hasSubmissionError);
|
||||
},
|
||||
addTransaction: function () {
|
||||
const transaction = this.getDefaultTransaction();
|
||||
this.transactions.push(transaction);
|
||||
this.tab = 'split-' + (parseInt(this.transactions.length) - 1);
|
||||
},
|
||||
getSplitLabel: function (index) {
|
||||
if (this.transactions.hasOwnProperty(index) && null !== this.transactions[index].description && this.transactions[index].description.length > 0) {
|
||||
return this.transactions[index].description
|
||||
}
|
||||
return this.$t('firefly.single_split') + ' ' + (index + 1);
|
||||
},
|
||||
dismissBanner: function () {
|
||||
this.errorMessage = '';
|
||||
},
|
||||
submitTransaction: function () {
|
||||
this.submitting = true;
|
||||
this.errorMessage = '';
|
||||
|
||||
// reset errors:
|
||||
this.resetErrors();
|
||||
|
||||
// build transaction array
|
||||
const submission = this.buildTransaction();
|
||||
|
||||
let transactions = new Post();
|
||||
transactions
|
||||
.post(submission)
|
||||
.catch(this.processErrors)
|
||||
.then(this.processSuccess);
|
||||
},
|
||||
processSuccess: function (response) {
|
||||
this.submitting = false;
|
||||
let message = {
|
||||
level: 'success',
|
||||
text: 'I am text',
|
||||
show: true,
|
||||
action: {
|
||||
show: true,
|
||||
text: 'Go to transaction',
|
||||
link: { name: 'transactions.show', params: {id: parseInt(response.data.data.id)} }
|
||||
}
|
||||
};
|
||||
// store flash
|
||||
this.$q.localStorage.set('flash', message);
|
||||
if(this.doReturnHere) {
|
||||
window.dispatchEvent(new CustomEvent('flash', {
|
||||
detail: {
|
||||
flash: this.$q.localStorage.getItem('flash')
|
||||
}
|
||||
}));
|
||||
}
|
||||
if(!this.doReturnHere) {
|
||||
// return to previous page.
|
||||
this.$router.go(-1);
|
||||
}
|
||||
|
||||
},
|
||||
resetErrors: function () {
|
||||
let length = this.transactions.length;
|
||||
let transaction = this.getDefaultTransaction();
|
||||
for (let i = 0; i < length; i++) {
|
||||
this.submissionErrors[i] = transaction.submissionError;
|
||||
this.hasSubmissionErrors[i] = transaction.hasSubmissionError;
|
||||
}
|
||||
},
|
||||
processErrors: function (error) {
|
||||
if (error.response) {
|
||||
let errors = error.response.data; // => the response payload
|
||||
this.errorMessage = errors.message;
|
||||
for (let i in errors.errors) {
|
||||
if (errors.errors.hasOwnProperty(i)) {
|
||||
this.processSingleError(i, errors.errors[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
this.submitting = false;
|
||||
},
|
||||
processSingleError: function (key, errors) {
|
||||
// lol dumbest way to explode "transactions.0.something" ever.
|
||||
let index = parseInt(key.split('.')[1]);
|
||||
let fieldName = key.split('.')[2];
|
||||
switch (fieldName) {
|
||||
case 'amount':
|
||||
case 'date':
|
||||
case 'description':
|
||||
this.submissionErrors[index][fieldName] = errors[0];
|
||||
this.hasSubmissionErrors[index][fieldName] = true;
|
||||
break;
|
||||
case 'source_id':
|
||||
case 'source_name':
|
||||
this.submissionErrors[index].source = errors[0];
|
||||
this.hasSubmissionErrors[index].source = true;
|
||||
break;
|
||||
case 'destination_id':
|
||||
case 'destination_name':
|
||||
this.submissionErrors[index].source = errors[0];
|
||||
this.hasSubmissionErrors[index].source = true;
|
||||
break;
|
||||
}
|
||||
},
|
||||
buildTransaction: function () {
|
||||
const obj = {
|
||||
transactions: []
|
||||
};
|
||||
this.transactions.forEach(element => {
|
||||
let dateStr = formatISO(new Date(element.date + ' ' + element.time));
|
||||
let row = {
|
||||
type: this.$route.params.type,
|
||||
description: element.description,
|
||||
source_name: element.source,
|
||||
destination_name: element.destination,
|
||||
amount: element.amount,
|
||||
date: dateStr
|
||||
};
|
||||
obj.transactions.push(row);
|
||||
});
|
||||
return obj;
|
||||
},
|
||||
getDefaultTransaction: function () {
|
||||
let date = '';
|
||||
let time = '00:00';
|
||||
|
||||
if (0 === this.transactions.length) {
|
||||
date = format(new Date, 'yyyy-MM-dd');
|
||||
}
|
||||
|
||||
return {
|
||||
submissionError: {
|
||||
description: '',
|
||||
amount: '',
|
||||
date: '',
|
||||
source: '',
|
||||
destination: '',
|
||||
},
|
||||
hasSubmissionError: {
|
||||
description: false,
|
||||
amount: false,
|
||||
date: false,
|
||||
source: false,
|
||||
destination: false,
|
||||
},
|
||||
transaction: {
|
||||
description: '',
|
||||
date: date,
|
||||
time: time,
|
||||
amount: 0,
|
||||
|
||||
// source and destination
|
||||
source: '',
|
||||
destination: '',
|
||||
|
||||
// categorisation
|
||||
budget: '',
|
||||
category: '',
|
||||
subscription: '',
|
||||
|
||||
// custom dates
|
||||
interest_date: '',
|
||||
book_date: '',
|
||||
process_date: '',
|
||||
due_date: '',
|
||||
payment_date: '',
|
||||
invoice_date: '',
|
||||
}
|
||||
};
|
||||
// date: "",
|
||||
// amount: "",
|
||||
// category: "",
|
||||
// piggy_bank: 0,
|
||||
// errors: {
|
||||
// source_account: [],
|
||||
// destination_account: [],
|
||||
// description: [],
|
||||
// amount: [],
|
||||
// date: [],
|
||||
// budget_id: [],
|
||||
// bill_id: [],
|
||||
// foreign_amount: [],
|
||||
// category: [],
|
||||
// piggy_bank: [],
|
||||
// tags: [],
|
||||
// custom fields:
|
||||
// custom_errors: {
|
||||
// interest_date: [],
|
||||
// book_date: [],
|
||||
// process_date: [],
|
||||
// due_date: [],
|
||||
// payment_date: [],
|
||||
// invoice_date: [],
|
||||
// internal_reference: [],
|
||||
// notes: [],
|
||||
// attachments: [],
|
||||
// external_uri: [],
|
||||
// },
|
||||
// },
|
||||
// budget: 0,
|
||||
// bill: 0,
|
||||
// tags: [],
|
||||
// custom_fields: {
|
||||
// "interest_date": "",
|
||||
// "book_date": "",
|
||||
// "process_date": "",
|
||||
// "due_date": "",
|
||||
// "payment_date": "",
|
||||
// "invoice_date": "",
|
||||
// "internal_reference": "",
|
||||
// "notes": "",
|
||||
// "attachments": [],
|
||||
// "external_uri": "",
|
||||
// },
|
||||
// foreign_amount: {
|
||||
// amount: "",
|
||||
// currency_id: 0
|
||||
// },
|
||||
// source_account: {
|
||||
// id: 0,
|
||||
// name: "",
|
||||
// type: "",
|
||||
// currency_id: 0,
|
||||
// currency_name: '',
|
||||
// currency_code: '',
|
||||
// currency_decimal_places: 2,
|
||||
// allowed_types: ['Asset account', 'Revenue account', 'Loan', 'Debt', 'Mortgage'],
|
||||
// default_allowed_types: ['Asset account', 'Revenue account', 'Loan', 'Debt', 'Mortgage']
|
||||
// },
|
||||
// destination_account: {
|
||||
// id: 0,
|
||||
// name: "",
|
||||
// type: "",
|
||||
// currency_id: 0,
|
||||
// currency_name: '',
|
||||
// currency_code: '',
|
||||
// currency_decimal_places: 2,
|
||||
// allowed_types: ['Asset account', 'Expense account', 'Loan', 'Debt', 'Mortgage'],
|
||||
// default_allowed_types: ['Asset account', 'Expense account', 'Loan', 'Debt', 'Mortgage']
|
||||
// }
|
||||
// });
|
||||
// if (this.transactions.length === 1) {
|
||||
// // console.log('Length == 1, set date to today.');
|
||||
// // set first date.
|
||||
// let today = new Date();
|
||||
// this.transactions[0].date = today.getFullYear() + '-' + ("0" + (today.getMonth() + 1)).slice(-2) + '-' + ("0" + today.getDate()).slice(-2);
|
||||
// // call for extra clear thing:
|
||||
// // this.clearSource(0);
|
||||
// //this.clearDestination(0);
|
||||
// }
|
||||
// ];
|
||||
// };
|
||||
}
|
||||
},
|
||||
preFetch() {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
419
frontend/src/pages/transactions/Edit.vue
Normal file
419
frontend/src/pages/transactions/Edit.vue
Normal file
@@ -0,0 +1,419 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<q-banner inline-actions rounded class="bg-orange text-white" v-if="'' !== errorMessage">
|
||||
{{ errorMessage }}
|
||||
<template v-slot:action>
|
||||
<q-btn flat @click="dismissBanner" label="Dismiss"/>
|
||||
</template>
|
||||
</q-banner>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<q-tab-panels v-model="tab" animated>
|
||||
<q-tab-panel v-for="(transaction, index) in transactions" :key="index" :name="'split-' + index">
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">Info for {{ $route.params.type }} {{ index }}</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
<q-input
|
||||
:error-message="submissionErrors[index].description"
|
||||
:error="hasSubmissionErrors[index].description"
|
||||
bottom-slots :disable="disabledInput" type="text" clearable v-model="transaction.description" :label="$t('firefly.description')"
|
||||
outlined/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-4 q-mb-xs q-pr-xs">
|
||||
<q-input
|
||||
:error-message="submissionErrors[index].source"
|
||||
:error="hasSubmissionErrors[index].source"
|
||||
bottom-slots :disable="disabledInput" clearable v-model="transaction.source" :label="$t('firefly.source_account')" outlined/>
|
||||
</div>
|
||||
<div class="col-4 q-px-xs">
|
||||
<q-input
|
||||
:error-message="submissionErrors[index].amount"
|
||||
:error="hasSubmissionErrors[index].amount"
|
||||
bottom-slots :disable="disabledInput" clearable mask="#.##" reverse-fill-mask hint="Expects #.##" fill-mask="0"
|
||||
v-model="transaction.amount"
|
||||
:label="$t('firefly.amount')" outlined/>
|
||||
</div>
|
||||
<div class="col-4 q-pl-xs">
|
||||
<q-input
|
||||
:error-message="submissionErrors[index].destination"
|
||||
:error="hasSubmissionErrors[index].destination"
|
||||
bottom-slots :disable="disabledInput" clearable v-model="transaction.destination" :label="$t('firefly.destination_account')"
|
||||
outlined/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<q-input
|
||||
:error-message="submissionErrors[index].date"
|
||||
:error="hasSubmissionErrors[index].date"
|
||||
bottom-slots :disable="disabledInput" v-model="transaction.date" outlined type="date" :hint="$t('firefly.date')"/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-input bottom-slots :disable="disabledInput" v-model="transaction.time" outlined type="time" :hint="$t('firefly.time')"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-tab-panel>
|
||||
</q-tab-panels>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<q-card class="q-mt-xs">
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 text-right">
|
||||
<q-btn :disable="disabledInput" color="primary" label="Submit" @click="submitTransaction"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 text-right">
|
||||
<q-checkbox :disable="disabledInput" v-model="doReturnHere" left-label label="Return here"/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import format from 'date-fns/format';
|
||||
import formatISO from 'date-fns/formatISO';
|
||||
import Put from "../../api/transactions/put";
|
||||
import { useQuasar } from 'quasar';
|
||||
import Get from "../../api/transactions/get";
|
||||
|
||||
export default {
|
||||
name: 'Edit',
|
||||
data() {
|
||||
return {
|
||||
tab: 'split-0',
|
||||
transactions: [],
|
||||
submissionErrors: [],
|
||||
hasSubmissionErrors: [],
|
||||
submitting: false,
|
||||
doReturnHere: false,
|
||||
index: 0,
|
||||
doResetForm: false,
|
||||
group_title: '',
|
||||
errorMessage: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
disabledInput: function () {
|
||||
return this.submitting;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.id = parseInt(this.$route.params.id);
|
||||
this.resetForm();
|
||||
this.collectTransaction();
|
||||
},
|
||||
methods: {
|
||||
collectTransaction: function() {
|
||||
let get = new Get;
|
||||
get.get(this.id).then((response) => this.parseTransaction(response));
|
||||
},
|
||||
parseTransaction: function(response) {
|
||||
this.group_title = response.data.data.attributes.group_title;
|
||||
// parse transactions:
|
||||
let transactions = response.data.data.attributes.transactions;
|
||||
transactions.reverse();
|
||||
for(let i in transactions) {
|
||||
if(transactions.hasOwnProperty(i)) {
|
||||
let transaction = transactions[i];
|
||||
let index = parseInt(i);
|
||||
// parse first transaction only:
|
||||
if(0 === index) {
|
||||
let parts = transaction.date.split('T');
|
||||
let date = parts[0];
|
||||
let time = parts[1].substr(0,8);
|
||||
this.transactions.push(
|
||||
{
|
||||
description: transaction.description,
|
||||
type: transaction.type,
|
||||
date: date,
|
||||
time: time,
|
||||
amount: parseFloat(transaction.amount).toFixed(transaction.currency_decimal_places),
|
||||
|
||||
// source and destination
|
||||
source: transaction.source_name,
|
||||
destination: transaction.destination_name,
|
||||
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
resetForm: function () {
|
||||
this.transactions = [];
|
||||
const info = this.getDefaultTransaction();
|
||||
this.transactions = [];
|
||||
this.submissionErrors.push(info.submissionError);
|
||||
this.hasSubmissionErrors.push(info.hasSubmissionError);
|
||||
},
|
||||
dismissBanner: function () {
|
||||
this.errorMessage = '';
|
||||
},
|
||||
submitTransaction: function () {
|
||||
this.submitting = true;
|
||||
this.errorMessage = '';
|
||||
|
||||
// reset errors:
|
||||
this.resetErrors();
|
||||
|
||||
// build transaction array
|
||||
const submission = this.buildTransaction();
|
||||
|
||||
let transactions = new Put();
|
||||
transactions
|
||||
.put(this.id, submission)
|
||||
.catch(this.processErrors)
|
||||
.then(this.processSuccess);
|
||||
},
|
||||
processSuccess: function (response) {
|
||||
this.submitting = false;
|
||||
this.$store.dispatch('fireflyiii/refreshCacheKey');
|
||||
let message = {
|
||||
level: 'success',
|
||||
text: 'Updated transaction',
|
||||
show: true,
|
||||
action: {
|
||||
show: true,
|
||||
text: 'Go to transaction',
|
||||
link: { name: 'transactions.show', params: {id: parseInt(response.data.data.id)} }
|
||||
}
|
||||
};
|
||||
// store flash
|
||||
this.$q.localStorage.set('flash', message);
|
||||
if(this.doReturnHere) {
|
||||
window.dispatchEvent(new CustomEvent('flash', {
|
||||
detail: {
|
||||
flash: this.$q.localStorage.getItem('flash')
|
||||
}
|
||||
}));
|
||||
}
|
||||
if(!this.doReturnHere) {
|
||||
// return to previous page.
|
||||
this.$router.go(-1);
|
||||
}
|
||||
|
||||
},
|
||||
resetErrors: function () {
|
||||
let length = this.transactions.length;
|
||||
let transaction = this.getDefaultTransaction();
|
||||
for (let i = 0; i < length; i++) {
|
||||
this.submissionErrors[i] = transaction.submissionError;
|
||||
this.hasSubmissionErrors[i] = transaction.hasSubmissionError;
|
||||
}
|
||||
},
|
||||
processErrors: function (error) {
|
||||
if (error.response) {
|
||||
let errors = error.response.data; // => the response payload
|
||||
this.errorMessage = errors.message;
|
||||
for (let i in errors.errors) {
|
||||
// TODO rule and recurring have similar code
|
||||
if (errors.errors.hasOwnProperty(i)) {
|
||||
this.processSingleError(i, errors.errors[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
this.submitting = false;
|
||||
},
|
||||
processSingleError: function (key, errors) {
|
||||
// lol dumbest way to explode "transactions.0.something" ever.
|
||||
let index = parseInt(key.split('.')[1]);
|
||||
let fieldName = key.split('.')[2];
|
||||
switch (fieldName) {
|
||||
case 'amount':
|
||||
case 'date':
|
||||
case 'description':
|
||||
this.submissionErrors[index][fieldName] = errors[0];
|
||||
this.hasSubmissionErrors[index][fieldName] = true;
|
||||
break;
|
||||
case 'source_id':
|
||||
case 'source_name':
|
||||
this.submissionErrors[index].source = errors[0];
|
||||
this.hasSubmissionErrors[index].source = true;
|
||||
break;
|
||||
case 'destination_id':
|
||||
case 'destination_name':
|
||||
this.submissionErrors[index].source = errors[0];
|
||||
this.hasSubmissionErrors[index].source = true;
|
||||
break;
|
||||
}
|
||||
},
|
||||
buildTransaction: function () {
|
||||
const obj = {
|
||||
transactions: []
|
||||
};
|
||||
this.transactions.forEach(element => {
|
||||
let dateStr = formatISO(new Date(element.date + ' ' + element.time));
|
||||
let row = {
|
||||
type: element.type,
|
||||
description: element.description,
|
||||
source_name: element.source,
|
||||
destination_name: element.destination,
|
||||
amount: element.amount,
|
||||
date: dateStr
|
||||
};
|
||||
obj.transactions.push(row);
|
||||
});
|
||||
return obj;
|
||||
},
|
||||
getDefaultTransaction: function () {
|
||||
let date = '';
|
||||
let time = '00:00';
|
||||
|
||||
if (0 === this.transactions.length) {
|
||||
date = format(new Date, 'yyyy-MM-dd');
|
||||
}
|
||||
|
||||
return {
|
||||
submissionError: {
|
||||
description: '',
|
||||
amount: '',
|
||||
date: '',
|
||||
source: '',
|
||||
destination: '',
|
||||
},
|
||||
hasSubmissionError: {
|
||||
description: false,
|
||||
amount: false,
|
||||
date: false,
|
||||
source: false,
|
||||
destination: false,
|
||||
},
|
||||
transaction: {
|
||||
description: '',
|
||||
date: date,
|
||||
time: time,
|
||||
amount: 0,
|
||||
|
||||
// source and destination
|
||||
source: '',
|
||||
destination: '',
|
||||
|
||||
// categorisation
|
||||
budget: '',
|
||||
category: '',
|
||||
subscription: '',
|
||||
|
||||
// custom dates
|
||||
interest_date: '',
|
||||
book_date: '',
|
||||
process_date: '',
|
||||
due_date: '',
|
||||
payment_date: '',
|
||||
invoice_date: '',
|
||||
}
|
||||
};
|
||||
// date: "",
|
||||
// amount: "",
|
||||
// category: "",
|
||||
// piggy_bank: 0,
|
||||
// errors: {
|
||||
// source_account: [],
|
||||
// destination_account: [],
|
||||
// description: [],
|
||||
// amount: [],
|
||||
// date: [],
|
||||
// budget_id: [],
|
||||
// bill_id: [],
|
||||
// foreign_amount: [],
|
||||
// category: [],
|
||||
// piggy_bank: [],
|
||||
// tags: [],
|
||||
// custom fields:
|
||||
// custom_errors: {
|
||||
// interest_date: [],
|
||||
// book_date: [],
|
||||
// process_date: [],
|
||||
// due_date: [],
|
||||
// payment_date: [],
|
||||
// invoice_date: [],
|
||||
// internal_reference: [],
|
||||
// notes: [],
|
||||
// attachments: [],
|
||||
// external_uri: [],
|
||||
// },
|
||||
// },
|
||||
// budget: 0,
|
||||
// bill: 0,
|
||||
// tags: [],
|
||||
// custom_fields: {
|
||||
// "interest_date": "",
|
||||
// "book_date": "",
|
||||
// "process_date": "",
|
||||
// "due_date": "",
|
||||
// "payment_date": "",
|
||||
// "invoice_date": "",
|
||||
// "internal_reference": "",
|
||||
// "notes": "",
|
||||
// "attachments": [],
|
||||
// "external_uri": "",
|
||||
// },
|
||||
// foreign_amount: {
|
||||
// amount: "",
|
||||
// currency_id: 0
|
||||
// },
|
||||
// source_account: {
|
||||
// id: 0,
|
||||
// name: "",
|
||||
// type: "",
|
||||
// currency_id: 0,
|
||||
// currency_name: '',
|
||||
// currency_code: '',
|
||||
// currency_decimal_places: 2,
|
||||
// allowed_types: ['Asset account', 'Revenue account', 'Loan', 'Debt', 'Mortgage'],
|
||||
// default_allowed_types: ['Asset account', 'Revenue account', 'Loan', 'Debt', 'Mortgage']
|
||||
// },
|
||||
// destination_account: {
|
||||
// id: 0,
|
||||
// name: "",
|
||||
// type: "",
|
||||
// currency_id: 0,
|
||||
// currency_name: '',
|
||||
// currency_code: '',
|
||||
// currency_decimal_places: 2,
|
||||
// allowed_types: ['Asset account', 'Expense account', 'Loan', 'Debt', 'Mortgage'],
|
||||
// default_allowed_types: ['Asset account', 'Expense account', 'Loan', 'Debt', 'Mortgage']
|
||||
// }
|
||||
// });
|
||||
// if (this.transactions.length === 1) {
|
||||
// // console.log('Length == 1, set date to today.');
|
||||
// // set first date.
|
||||
// let today = new Date();
|
||||
// this.transactions[0].date = today.getFullYear() + '-' + ("0" + (today.getMonth() + 1)).slice(-2) + '-' + ("0" + today.getDate()).slice(-2);
|
||||
// // call for extra clear thing:
|
||||
// // this.clearSource(0);
|
||||
// //this.clearDestination(0);
|
||||
// }
|
||||
// ];
|
||||
// };
|
||||
}
|
||||
},
|
||||
preFetch() {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
154
frontend/src/pages/transactions/Index.vue
Normal file
154
frontend/src/pages/transactions/Index.vue
Normal file
@@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<q-page>
|
||||
|
||||
<!-- insert LargeTable -->
|
||||
<LargeTable ref="table"
|
||||
:title="$t('firefly.title_' + this.type)"
|
||||
:rows="rows"
|
||||
:loading="loading"
|
||||
v-on:on-request="onRequest"
|
||||
:rows-number="rowsNumber"
|
||||
:rows-per-page="rowsPerPage"
|
||||
:page="page"
|
||||
>
|
||||
|
||||
</LargeTable>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </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: 'transactions.create', params: {type: 'transfer'} }" icon="fas fa-exchange-alt" label="New transfer"/>
|
||||
<q-fab-action color="primary" square :to="{ name: 'transactions.create', params: {type: 'deposit'} }" icon="fas fa-long-arrow-alt-right"
|
||||
label="New deposit"/>
|
||||
<q-fab-action color="primary" square :to="{ name: 'transactions.create', params: {type: 'withdrawal'} }" icon="fas fa-long-arrow-alt-left"
|
||||
label="New withdrawal"/>
|
||||
|
||||
</q-fab>
|
||||
</q-page-sticky>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapGetters, useStore} from "vuex";
|
||||
import List from "../../api/transactions/list";
|
||||
import LargeTable from "../../components/transactions/LargeTable";
|
||||
import Parser from "../../api/transactions/parser";
|
||||
|
||||
export default {
|
||||
name: 'Index',
|
||||
components: {LargeTable},
|
||||
watch: {
|
||||
$route(to) {
|
||||
// react to route changes...
|
||||
if ('transactions.index' === to.name) {
|
||||
this.type = to.params.type;
|
||||
this.page = 1;
|
||||
|
||||
// update meta for breadcrumbs and page title:
|
||||
//this.$route.meta.pageTitle = 'firefly.title_' + this.type;
|
||||
//this.$route.meta.breadcrumbs = [{title: 'title_' + this.type}];
|
||||
|
||||
this.triggerUpdate();
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
rows: [],
|
||||
columns: [
|
||||
{name: 'type', label: ' ', field: 'type', style: 'width: 30px'},
|
||||
{name: 'description', label: 'Description', field: 'description', align: 'left'},
|
||||
{
|
||||
name: 'amount', label: 'Amount', field: 'amount'
|
||||
},
|
||||
{
|
||||
name: 'date', label: 'Date', field: 'date',
|
||||
align: 'left',
|
||||
},
|
||||
{name: 'source', label: 'Source', field: 'source', align: 'left'},
|
||||
{name: 'destination', label: 'Destination', field: 'destination', align: 'left'},
|
||||
{name: 'category', label: 'Category', field: 'category', align: 'left'},
|
||||
{name: 'budget', label: 'Budget', field: 'budget', align: 'left'},
|
||||
{name: 'menu', label: ' ', field: 'menu', align: 'left'},
|
||||
],
|
||||
type: 'withdrawal',
|
||||
page: 1,
|
||||
rowsPerPage: 50,
|
||||
rowsNumber: 100,
|
||||
range: {
|
||||
start: null,
|
||||
end: null
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('fireflyiii', ['getRange', 'getCacheKey', 'getListPageSize']),
|
||||
},
|
||||
created() {
|
||||
this.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: {
|
||||
onRequest: function (payload) {
|
||||
this.page = payload.page;
|
||||
this.triggerUpdate();
|
||||
},
|
||||
formatAmount: function (currencyCode, amount) {
|
||||
return Intl.NumberFormat('en-US', {style: 'currency', currency: currencyCode}).format(amount);
|
||||
},
|
||||
gotoTransaction: function (event, row) {
|
||||
this.$router.push({name: 'transactions.show', params: {id: 1}});
|
||||
},
|
||||
triggerUpdate: function () {
|
||||
if (this.loading) {
|
||||
return;
|
||||
}
|
||||
if (null === this.range.start || null === this.range.end) {
|
||||
return;
|
||||
}
|
||||
this.loading = true;
|
||||
const list = new List();
|
||||
const parser = new Parser;
|
||||
this.rows = [];
|
||||
|
||||
list.list(this.type, this.page, this.getCacheKey).then(
|
||||
(response) => {
|
||||
let resp = parser.parseResponse(response);
|
||||
|
||||
this.rowsPerPage = resp.rowsPerPage;
|
||||
this.rowsNumber = resp.rowsNumber;
|
||||
this.rows = resp.rows;
|
||||
this.loading = false;
|
||||
}
|
||||
);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
108
frontend/src/pages/transactions/Show.vue
Normal file
108
frontend/src/pages/transactions/Show.vue
Normal file
@@ -0,0 +1,108 @@
|
||||
<!--
|
||||
- Show.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>
|
||||
<q-page>
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<!-- Balance chart -->
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">Transaction: {{ title }}
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="row" v-for="(transaction, index) in group.transactions">
|
||||
<div class="col-12 q-mb-xs">
|
||||
<strong>index {{ index }}</strong><br>
|
||||
{{ transaction.description }}<br>
|
||||
{{ transaction.amount }}<br>
|
||||
{{ transaction.source_name }} --> {{ transaction.destination_name }}
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Get from "../../api/transactions/get";
|
||||
import LargeTable from "../../components/transactions/LargeTable";
|
||||
|
||||
export default {
|
||||
name: "Show",
|
||||
data() {
|
||||
return {
|
||||
title: '',
|
||||
group: {
|
||||
transactions: []
|
||||
},
|
||||
rows: [],
|
||||
rowsNumber: 1,
|
||||
rowsPerPage: 10,
|
||||
page: 1
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.id = parseInt(this.$route.params.id);
|
||||
this.getTransaction();
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
components: {LargeTable},
|
||||
methods: {
|
||||
onRequest: function (payload) {
|
||||
this.page = payload.page;
|
||||
this.getTag();
|
||||
},
|
||||
getTransaction: function () {
|
||||
let get = new Get;
|
||||
this.loading = true;
|
||||
get.get(this.id).then((response) => this.parseTransaction(response.data.data));
|
||||
},
|
||||
parseTransaction: function (data) {
|
||||
this.group = {
|
||||
group_title: data.attributes.group_title,
|
||||
transactions: [],
|
||||
};
|
||||
if(null !== data.attributes.group_title) {
|
||||
this.title = data.attributes.group_title;
|
||||
}
|
||||
for(let i in data.attributes.transactions) {
|
||||
if(data.attributes.transactions.hasOwnProperty(i)) {
|
||||
let transaction = data.attributes.transactions[i];
|
||||
this.group.transactions.push(transaction);
|
||||
|
||||
if(0 === parseInt(i) && null === data.attributes.group_title) {
|
||||
this.title = transaction.description;
|
||||
}
|
||||
}
|
||||
}
|
||||
this.loading = false;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
260
frontend/src/pages/webhooks/Create.vue
Normal file
260
frontend/src/pages/webhooks/Create.vue
Normal file
@@ -0,0 +1,260 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<q-banner inline-actions rounded class="bg-orange text-white" v-if="'' !== errorMessage">
|
||||
{{ errorMessage }}
|
||||
<template v-slot:action>
|
||||
<q-btn flat @click="dismissBanner" label="Dismiss"/>
|
||||
</template>
|
||||
</q-banner>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-mx-md q-mt-md">
|
||||
<div class="col-12">
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">Info for new webhook</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
<q-input
|
||||
:error-message="submissionErrors.title"
|
||||
:error="hasSubmissionErrors.title"
|
||||
bottom-slots :disable="disabledInput" type="text" clearable v-model="title" :label="$t('form.title')"
|
||||
outlined/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
<q-input
|
||||
:error-message="submissionErrors.url"
|
||||
:error="hasSubmissionErrors.url"
|
||||
bottom-slots :disable="disabledInput" type="text" clearable v-model="url" :label="$t('form.url')"
|
||||
outlined/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
<q-select
|
||||
:error-message="submissionErrors.response"
|
||||
:error="hasSubmissionErrors.response"
|
||||
bottom-slots
|
||||
:disable="disabledInput"
|
||||
outlined
|
||||
v-model="response"
|
||||
emit-value class="q-pr-xs"
|
||||
map-options :options="responses" label="Response"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
<q-select
|
||||
:error-message="submissionErrors.delivery"
|
||||
:error="hasSubmissionErrors.delivery"
|
||||
bottom-slots
|
||||
:disable="disabledInput"
|
||||
outlined
|
||||
v-model="delivery"
|
||||
emit-value class="q-pr-xs"
|
||||
map-options :options="deliveries" label="Delivery"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
<q-select
|
||||
:error-message="submissionErrors.trigger"
|
||||
:error="hasSubmissionErrors.trigger"
|
||||
bottom-slots
|
||||
:disable="disabledInput"
|
||||
outlined
|
||||
v-model="trigger"
|
||||
emit-value class="q-pr-xs"
|
||||
map-options :options="triggers" label="Triggers"/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<q-card class="q-mt-xs">
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 text-right">
|
||||
<q-btn :disable="disabledInput" color="primary" label="Submit" @click="submitWebhook"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 text-right">
|
||||
<q-checkbox :disable="disabledInput" v-model="doReturnHere" left-label
|
||||
label="Return here to create another one"/>
|
||||
<br/>
|
||||
<q-checkbox v-model="doResetForm" left-label :disable="!doReturnHere || disabledInput"
|
||||
label="Reset form after submission"/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Post from "../../api/webhooks/post";
|
||||
import {mapGetters} from "vuex";
|
||||
import {getCacheKey} from "../../store/fireflyiii/getters";
|
||||
|
||||
export default {
|
||||
name: 'Create',
|
||||
data() {
|
||||
return {
|
||||
submissionErrors: {},
|
||||
hasSubmissionErrors: {},
|
||||
submitting: false,
|
||||
doReturnHere: false,
|
||||
doResetForm: false,
|
||||
errorMessage: '',
|
||||
balance_input_mask: '#.##',
|
||||
|
||||
// values:
|
||||
triggers: [
|
||||
{value: 'TRIGGER_STORE_TRANSACTION', label: 'When transaction stored'},
|
||||
{value: 'TRIGGER_UPDATE_TRANSACTION', label: 'When transaction updated'},
|
||||
{value: 'TRIGGER_DESTROY_TRANSACTION', label: 'When transaction deleted'}
|
||||
],
|
||||
|
||||
responses: [
|
||||
{value: 'RESPONSE_TRANSACTIONS', label: 'Send transaction'},
|
||||
{value: 'RESPONSE_ACCOUNTS', label: 'Send accounts'},
|
||||
{value: 'RESPONSE_NONE', label: 'Send nothing'},
|
||||
],
|
||||
deliveries: [
|
||||
{value: 'DELIVERY_JSON', label: 'JSON'}
|
||||
],
|
||||
|
||||
|
||||
// webhook fields:
|
||||
title: '',
|
||||
url: '',
|
||||
response: 'RESPONSE_TRANSACTIONS',
|
||||
delivery: 'DELIVERY_JSON',
|
||||
trigger: 'TRIGGER_STORE_TRANSACTION',
|
||||
}
|
||||
},
|
||||
watch: {},
|
||||
computed: {
|
||||
...mapGetters('fireflyiii', ['getCacheKey']),
|
||||
disabledInput: function () {
|
||||
return this.submitting;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.resetForm();
|
||||
},
|
||||
methods: {
|
||||
resetForm: function () {
|
||||
this.title = '';
|
||||
},
|
||||
resetErrors: function () {
|
||||
this.submissionErrors =
|
||||
{
|
||||
title: '',
|
||||
url: '',
|
||||
response: '',
|
||||
delivery: '',
|
||||
trigger: '',
|
||||
};
|
||||
this.hasSubmissionErrors = {
|
||||
title: false,
|
||||
url: false,
|
||||
response: false,
|
||||
delivery: false,
|
||||
trigger: false,
|
||||
};
|
||||
},
|
||||
submitWebhook: function () {
|
||||
this.submitting = true;
|
||||
this.errorMessage = '';
|
||||
|
||||
// reset errors:
|
||||
this.resetErrors();
|
||||
|
||||
// build category array
|
||||
const submission = this.buildWebhook();
|
||||
|
||||
(new Post())
|
||||
.post(submission)
|
||||
.catch(this.processErrors)
|
||||
.then(this.processSuccess);
|
||||
},
|
||||
buildWebhook: function () {
|
||||
return {
|
||||
title: this.title,
|
||||
url: this.url,
|
||||
response: this.response,
|
||||
delivery: this.delivery,
|
||||
trigger: this.trigger,
|
||||
active: true,
|
||||
};
|
||||
},
|
||||
dismissBanner: function () {
|
||||
this.errorMessage = '';
|
||||
},
|
||||
processSuccess: function (response) {
|
||||
if (!response) {
|
||||
return;
|
||||
}
|
||||
this.submitting = false;
|
||||
let message = {
|
||||
level: 'success',
|
||||
text: 'I am new webhook',
|
||||
show: true,
|
||||
action: {
|
||||
show: true,
|
||||
text: 'Go to webhook',
|
||||
link: {name: 'webhooks.show', params: {id: parseInt(response.data.data.id)}}
|
||||
}
|
||||
};
|
||||
// store flash
|
||||
this.$q.localStorage.set('flash', message);
|
||||
if (this.doReturnHere) {
|
||||
window.dispatchEvent(new CustomEvent('flash', {
|
||||
detail: {
|
||||
flash: this.$q.localStorage.getItem('flash')
|
||||
}
|
||||
}));
|
||||
}
|
||||
if (!this.doReturnHere) {
|
||||
// return to previous page.
|
||||
this.$router.go(-1);
|
||||
}
|
||||
|
||||
},
|
||||
processErrors: function (error) {
|
||||
if (error.response) {
|
||||
let errors = error.response.data; // => the response payload
|
||||
this.errorMessage = errors.message;
|
||||
console.log(errors);
|
||||
for (let i in errors.errors) {
|
||||
if (errors.errors.hasOwnProperty(i)) {
|
||||
this.submissionErrors[i] = errors.errors[i][0];
|
||||
this.hasSubmissionErrors[i] = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
this.submitting = false;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
266
frontend/src/pages/webhooks/Edit.vue
Normal file
266
frontend/src/pages/webhooks/Edit.vue
Normal file
@@ -0,0 +1,266 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<q-banner inline-actions rounded class="bg-orange text-white" v-if="'' !== errorMessage">
|
||||
{{ errorMessage }}
|
||||
<template v-slot:action>
|
||||
<q-btn flat @click="dismissBanner" label="Dismiss"/>
|
||||
</template>
|
||||
</q-banner>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-mx-md q-mt-md">
|
||||
<div class="col-12">
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">Edit webhook</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
<q-input
|
||||
:error-message="submissionErrors.title"
|
||||
:error="hasSubmissionErrors.title"
|
||||
bottom-slots :disable="disabledInput" type="text" clearable v-model="title" :label="$t('form.title')"
|
||||
outlined/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
<q-input
|
||||
:error-message="submissionErrors.url"
|
||||
:error="hasSubmissionErrors.url"
|
||||
bottom-slots :disable="disabledInput" type="text" clearable v-model="url" :label="$t('form.url')"
|
||||
outlined/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
<q-select
|
||||
:error-message="submissionErrors.response"
|
||||
:error="hasSubmissionErrors.response"
|
||||
bottom-slots
|
||||
:disable="disabledInput"
|
||||
outlined
|
||||
v-model="response"
|
||||
emit-value class="q-pr-xs"
|
||||
map-options :options="responses" label="Response"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
<q-select
|
||||
:error-message="submissionErrors.delivery"
|
||||
:error="hasSubmissionErrors.delivery"
|
||||
bottom-slots
|
||||
:disable="disabledInput"
|
||||
outlined
|
||||
v-model="delivery"
|
||||
emit-value class="q-pr-xs"
|
||||
map-options :options="deliveries" label="Delivery"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
<q-select
|
||||
:error-message="submissionErrors.trigger"
|
||||
:error="hasSubmissionErrors.trigger"
|
||||
bottom-slots
|
||||
:disable="disabledInput"
|
||||
outlined
|
||||
v-model="trigger"
|
||||
emit-value class="q-pr-xs"
|
||||
map-options :options="triggers" label="Triggers"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<q-card class="q-mt-xs">
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 text-right">
|
||||
<q-btn :disable="disabledInput" color="primary" label="Update" @click="submitWebhook"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 text-right">
|
||||
<q-checkbox :disable="disabledInput" v-model="doReturnHere" left-label label="Return here"/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Get from "../../api/webhooks/get";
|
||||
import Put from "../../api/webhooks/put";
|
||||
|
||||
export default {
|
||||
name: "Edit",
|
||||
data() {
|
||||
return {
|
||||
submissionErrors: {},
|
||||
hasSubmissionErrors: {},
|
||||
submitting: false,
|
||||
doReturnHere: false,
|
||||
doResetForm: false,
|
||||
errorMessage: '',
|
||||
|
||||
// webhook options
|
||||
triggers: [
|
||||
{value: 'TRIGGER_STORE_TRANSACTION', label: 'When transaction stored'},
|
||||
{value: 'TRIGGER_UPDATE_TRANSACTION', label: 'When transaction updated'},
|
||||
{value: 'TRIGGER_DESTROY_TRANSACTION', label: 'When transaction deleted'}
|
||||
],
|
||||
|
||||
responses: [
|
||||
{value: 'RESPONSE_TRANSACTIONS', label: 'Send transaction'},
|
||||
{value: 'RESPONSE_ACCOUNTS', label: 'Send accounts'},
|
||||
{value: 'RESPONSE_NONE', label: 'Send nothing'},
|
||||
],
|
||||
deliveries: [
|
||||
{value: 'DELIVERY_JSON', label: 'JSON'}
|
||||
],
|
||||
|
||||
// webhook fields:
|
||||
id: 0,
|
||||
title: '',
|
||||
url: '',
|
||||
response: '',
|
||||
delivery: '',
|
||||
trigger: '',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
disabledInput: function () {
|
||||
return this.submitting;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.id = parseInt(this.$route.params.id);
|
||||
this.collectWebhook();
|
||||
},
|
||||
methods: {
|
||||
collectWebhook: function () {
|
||||
let get = new Get;
|
||||
get.get(this.id).then((response) => this.parseWebhook(response));
|
||||
},
|
||||
parseWebhook: function (response) {
|
||||
this.title = response.data.data.attributes.title;
|
||||
this.url = response.data.data.attributes.url;
|
||||
this.response = response.data.data.attributes.response;
|
||||
this.delivery = response.data.data.attributes.delivery;
|
||||
this.trigger = response.data.data.attributes.trigger;
|
||||
},
|
||||
resetErrors: function () {
|
||||
this.submissionErrors =
|
||||
{
|
||||
title: '',
|
||||
url: '',
|
||||
response: '',
|
||||
delivery: '',
|
||||
trigger: '',
|
||||
};
|
||||
this.hasSubmissionErrors = {
|
||||
title: false,
|
||||
url: false,
|
||||
response: false,
|
||||
delivery: false,
|
||||
trigger: false,
|
||||
};
|
||||
},
|
||||
submitWebhook: function () {
|
||||
this.submitting = true;
|
||||
this.errorMessage = '';
|
||||
|
||||
// reset errors:
|
||||
this.resetErrors();
|
||||
|
||||
// build account array
|
||||
const submission = this.buildWebhook();
|
||||
|
||||
(new Put())
|
||||
.put(this.id, submission)
|
||||
.catch(this.processErrors)
|
||||
.then(this.processSuccess);
|
||||
},
|
||||
buildWebhook: function () {
|
||||
return {
|
||||
title: this.title,
|
||||
url: this.url,
|
||||
response: this.response,
|
||||
delivery: this.delivery,
|
||||
trigger: this.trigger
|
||||
};
|
||||
},
|
||||
dismissBanner: function () {
|
||||
this.errorMessage = '';
|
||||
},
|
||||
processSuccess: function (response) {
|
||||
this.$store.dispatch('fireflyiii/refreshCacheKey');
|
||||
if (!response) {
|
||||
return;
|
||||
}
|
||||
this.submitting = false;
|
||||
let message = {
|
||||
level: 'success',
|
||||
text: 'Webhook is updated',
|
||||
show: true,
|
||||
action: {
|
||||
show: true,
|
||||
text: 'Go to webhook',
|
||||
link: {name: 'webhooks.show', params: {id: parseInt(response.data.data.id)}}
|
||||
}
|
||||
};
|
||||
// store flash
|
||||
this.$q.localStorage.set('flash', message);
|
||||
if (this.doReturnHere) {
|
||||
window.dispatchEvent(new CustomEvent('flash', {
|
||||
detail: {
|
||||
flash: this.$q.localStorage.getItem('flash')
|
||||
}
|
||||
}));
|
||||
}
|
||||
if (!this.doReturnHere) {
|
||||
// return to previous page.
|
||||
this.$router.go(-1);
|
||||
}
|
||||
|
||||
},
|
||||
processErrors: function (error) {
|
||||
if (error.response) {
|
||||
let errors = error.response.data; // => the response payload
|
||||
this.errorMessage = errors.message;
|
||||
console.log(errors);
|
||||
for (let i in errors.errors) {
|
||||
if (errors.errors.hasOwnProperty(i)) {
|
||||
this.submissionErrors[i] = errors.errors[i][0];
|
||||
this.hasSubmissionErrors[i] = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
this.submitting = false;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
166
frontend/src/pages/webhooks/Index.vue
Normal file
166
frontend/src/pages/webhooks/Index.vue
Normal file
@@ -0,0 +1,166 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<q-table
|
||||
:title="$t('firefly.webhooks')"
|
||||
: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="title" :props="props">
|
||||
<router-link :to="{ name: 'webhooks.show', params: {id: props.row.id} }" class="text-primary">
|
||||
{{ props.row.title }}
|
||||
</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: 'webhooks.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="deleteWebhook(props.row.id, props.row.title)">
|
||||
<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>
|
||||
<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: 'webhooks.create'}" icon="fas fa-exchange-alt"
|
||||
label="New webhook"/>
|
||||
</q-fab>
|
||||
</q-page-sticky>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapGetters} from "vuex";
|
||||
import Destroy from "../../api/webhooks/destroy";
|
||||
import List from "../../api/webhooks/list";
|
||||
|
||||
export default {
|
||||
name: 'Index',
|
||||
watch: {
|
||||
$route(to) {
|
||||
// react to route changes...
|
||||
if ('webhooks.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: 'title', label: 'Title', field: 'title', align: 'left'},
|
||||
{name: 'menu', label: ' ', field: 'menu', align: 'right'},
|
||||
],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('fireflyiii', ['getCacheKey', 'getListPageSize']),
|
||||
},
|
||||
created() {
|
||||
this.pagination.rowsPerPage = this.getListPageSize;
|
||||
},
|
||||
mounted() {
|
||||
this.triggerUpdate();
|
||||
},
|
||||
methods: {
|
||||
deleteWebhook: function (id, name) {
|
||||
this.$q.dialog({
|
||||
title: 'Confirm',
|
||||
message: 'Do you want to delete webhook "' + name + '"?',
|
||||
cancel: true,
|
||||
persistent: true
|
||||
}).onOk(() => {
|
||||
this.destroyWebhook(id);
|
||||
});
|
||||
},
|
||||
destroyWebhook: function (id) {
|
||||
let destr = new Destroy;
|
||||
destr.destroy(id).then(() => {
|
||||
this.$store.dispatch('fireflyiii/refreshCacheKey');
|
||||
this.triggerUpdate();
|
||||
});
|
||||
},
|
||||
updateBreadcrumbs: function () {
|
||||
this.$route.meta.pageTitle = 'firefly.webhooks';
|
||||
this.$route.meta.breadcrumbs = [{title: 'webhooks'}];
|
||||
},
|
||||
onRequest: function (props) {
|
||||
this.page = props.pagination.page;
|
||||
this.triggerUpdate();
|
||||
},
|
||||
triggerUpdate: function () {
|
||||
if (this.loading) {
|
||||
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,
|
||||
title: current.attributes.title,
|
||||
};
|
||||
this.rows.push(account);
|
||||
}
|
||||
}
|
||||
this.loading = false;
|
||||
}
|
||||
)
|
||||
;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
53
frontend/src/pages/webhooks/Show.vue
Normal file
53
frontend/src/pages/webhooks/Show.vue
Normal file
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<div class="row q-mx-md">
|
||||
<div class="col-12">
|
||||
<!-- Balance chart -->
|
||||
<q-card bordered>
|
||||
<q-card-section>
|
||||
<div class="text-h6">{{ webhook.title }}</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-12 q-mb-xs">
|
||||
Name: {{ webhook.title }}<br>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Get from "../../api/webhooks/get";
|
||||
|
||||
export default {
|
||||
name: "Show",
|
||||
data() {
|
||||
return {
|
||||
webhook: {},
|
||||
id: 0
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.id = parseInt(this.$route.params.id);
|
||||
this.getWebhook();
|
||||
},
|
||||
methods: {
|
||||
getWebhook: function () {
|
||||
(new Get).get(this.id).then((response) => this.parseWebhook(response));
|
||||
},
|
||||
parseWebhook: function (response) {
|
||||
this.webhook = {
|
||||
title: response.data.data.attributes.title,
|
||||
};
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user