kenmirrors/firefly-iii
1
0
Fork 0
mirror of https://github.com/firefly-iii/firefly-iii.git synced 2025-10-18 10:16:49 +00:00
Code Issues Projects Releases Wiki Activity

Clean up transactions, first attempt at navigation.

Browse Source
This commit is contained in:
James Cole
2024-04-21 06:26:17 +02:00
parent dcea6b757b
commit 2317037655
4 changed files with 79 additions and 285 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
resources/assets/v2/src/pages/transactions/edit.js
View File

@@ -72,13 +72,15 @@ let transactions = function () {
resetButton: true, resetButton: true,
rulesButton: true, rulesButton: true,
webhooksButton: true, webhooksButton: true,
categorySelectVisible: false,
}, },
// form behaviour during transaction // form behaviour during transaction
formBehaviour: { formBehaviour: {
formType: 'edit', formType: 'edit',
foreignCurrencyEnabled: true, foreignCurrencyEnabled: true,
categorySelectVisible: false,
}, },
// form data (except transactions) is stored in formData // form data (except transactions) is stored in formData
@@ -113,11 +115,11 @@ let transactions = function () {
}, },
keyUpFromCategory(e) { keyUpFromCategory(e) {
if (e.key === 'Enter' && false === this.formStates.categorySelectVisible) { if (e.key === 'Enter' && false === this.formBehaviour.categorySelectVisible) {
this.submitTransaction(); this.submitTransaction();
return; return;
} }
this.formStates.categorySelectVisible = document.querySelector('input.ac-category').nextSibling.classList.contains('show'); this.formBehaviour.categorySelectVisible = document.querySelector('input.ac-category').nextSibling.classList.contains('show');
}, },
// submit the transaction form. // submit the transaction form.

275
resources/assets/v2/src/pages/transactions/index.js
View File

@@ -23,217 +23,12 @@ import dates from "../shared/dates.js";
import i18next from "i18next"; import i18next from "i18next";
import {format} from "date-fns"; import {format} from "date-fns";
import formatMoney from "../../util/format-money.js"; import formatMoney from "../../util/format-money.js";
import Put from "../../api/v2/model/transaction/put.js";
import {createGrid, ModuleRegistry} from "@ag-grid-community/core";
import '@ag-grid-community/styles/ag-grid.css'; import '@ag-grid-community/styles/ag-grid.css';
import '@ag-grid-community/styles/ag-theme-alpine.css'; import '@ag-grid-community/styles/ag-theme-alpine.css';
import '../../css/grid-ff3-theme.css'; import '../../css/grid-ff3-theme.css';
import Get from "../../api/v2/model/transaction/get.js";
import AmountEditor from "../../support/ag-grid/AmountEditor.js";
import TransactionDataSource from "../../support/ag-grid/TransactionDataSource.js";
import {InfiniteRowModelModule} from '@ag-grid-community/infinite-row-model';
import DateTimeEditor from "../../support/ag-grid/DateTimeEditor.js";
const ds = new TransactionDataSource();
// set type from URL
const urlParts = window.location.href.split('/');
const type = urlParts[urlParts.length - 1];
ds.setType(type);
let dataTable;
const editableFields = ['description', 'amount', 'date'];
const onCellEditRequestMethod = (event) => {
console.log('onCellEditRequestMethod');
const data = event.data;
const field = event.colDef.field;
let newValue = event.newValue;
if (!editableFields.includes(field)) {
console.log('Field ' + field + ' is not editable.');
return;
}
// this needs to be better
if ('amount' === field) {
newValue = event.newValue.amount;
console.log('New value is now' + newValue);
}
console.log('New value for field "' + field + '" in transaction journal #' + data.transaction_journal_id + ' of group #' + data.id + ' is "' + newValue + '"');
data[field] = newValue;
let rowNode = dataTable.getRowNode(String(event.rowIndex));
rowNode.updateData(data);
// then push update to Firefly III over API:
let submission = {
transactions: [
{
transaction_journal_id: data.transaction_journal_id,
}
]
};
submission.transactions[0][field] = newValue;
let putter = new Put();
putter.put(submission, {id: data.id});
};
const gridOptions = {
rowModelType: 'infinite',
datasource: ds,
cacheOverflowSize: 1,
cacheBlockSize: 20,
onCellEditRequest: onCellEditRequestMethod,
readOnlyEdit: true,
getRowId: function (params) {
console.log('getRowId', params.data.id);
return params.data.id;
},
// Row Data: The data to be displayed.
// rowData: [
// { description: "Tesla", model: "Model Y", price: 64950, electric: true },
// { description: "Ford", model: "F-Series", price: 33850, electric: false },
// { description: "Toyota", model: "Corolla", price: 29600, electric: false },
// ],
// Column Definitions: Defines & controls grid columns.
columnDefs: [
{
field: "icon",
editable: false,
headerName: '',
sortable: false,
width: 40,
cellRenderer: function (params) {
if (params.getValue()) {
return '<a href="./transactions/show/' + parseInt(params.value.id) + '"><em class="' + params.value.classes + '"></em></a>';
}
return '';
}
},
{
field: "description",
cellDataType: 'text',
editable: true,
// cellRenderer: function (params) {
// if (params.getValue()) {
// return '<a href="#">' + params.getValue() + '</a>';
// }
// return '';
// }
},
{
field: "amount",
editable: function (params) {
// only when NO foreign amount.
return null === params.data.amount.foreign_amount && null === params.data.amount.foreign_currency_code;
},
cellEditor: AmountEditor,
cellRenderer(params) {
if (params.getValue()) {
let returnString = '';
let amount = parseFloat(params.getValue().amount);
let obj = params.getValue();
let stringClass = 'text-danger';
if (obj.type === 'withdrawal') {
amount = amount * -1;
}
if (obj.type === 'deposit') {
stringClass = 'text-success';
}
if (obj.type === 'transfer') {
stringClass = 'text-info';
}
returnString += '<span class="' + stringClass + '">' + formatMoney(amount, params.getValue().currency_code) + '</span>';
// foreign amount:
if (obj.foreign_amount) {
let foreignAmount = parseFloat(params.getValue().foreign_amount);
if (obj.type === 'withdrawal') {
foreignAmount = foreignAmount * -1;
}
returnString += ' (<span class="' + stringClass + '">' + formatMoney(foreignAmount, obj.foreign_currency_code) + '</span>)';
}
return returnString;
}
return '';
}
},
{
field: "date",
editable: true,
cellDataType: 'date',
cellEditor: DateTimeEditor,
cellEditorPopup: true,
cellEditorPopupPosition: 'under',
cellRenderer(params) {
if (params.getValue()) {
return format(params.getValue(), i18next.t('config.date_time_fns_short'));
}
return '';
}
},
{
field: "from",
cellDataType: 'text',
cellRenderer: function (params) {
if (params.getValue()) {
let obj = params.getValue();
return '<a href="./accounts/show/' + obj.id + '">' + obj.name + '</a>';
}
return '';
}
},
{
field: "to",
cellDataType: 'text',
cellRenderer: function (params) {
if (params.getValue()) {
let obj = params.getValue();
return '<a href="./accounts/show/' + obj.id + '">' + obj.name + '</a>';
}
return '';
}
},
{
field: "category",
cellDataType: 'text',
cellRenderer: function (params) {
if (params.getValue()) {
let obj = params.getValue();
if (null !== obj.id) {
return '<a href="./categories/show/' + obj.id + '">' + obj.name + '</a>';
}
}
return '';
}
},
{
field: "budget",
cellDataType: 'text',
cellRenderer: function (params) {
if (params.getValue()) {
let obj = params.getValue();
if (null !== obj.id) {
return '<a href="./budgets/show/' + obj.id + '">' + obj.name + '</a>';
}
}
return '';
}
},
]
};
ModuleRegistry.registerModules([InfiniteRowModelModule]);
let index = function () { let index = function () {
return { return {
// notifications // notifications
@@ -276,36 +71,56 @@ let index = function () {
return format(date, i18next.t('config.date_time_fns')); return format(date, i18next.t('config.date_time_fns'));
}, },
init() { init() {
this.notifications.wait.show = true;
this.notifications.wait.text = i18next.t('firefly.wait_loading_data')
// TODO need date range. // TODO need date range.
// TODO handle page number // TODO handle page number
//this.getTransactions(this.page); this.getTransactions(this.page);``
// Your Javascript code to create the grid // Your Javascript code to create the grid
dataTable = createGrid(document.querySelector('#grid'), gridOptions); // dataTable = createGrid(document.querySelector('#grid'), gridOptions);
}, },
// getTransactions(page) { getTransactions(page) {
// const urlParts = window.location.href.split('/'); this.notifications.wait.show = true;
// const type = urlParts[urlParts.length - 1]; this.notifications.wait.text = i18next.t('firefly.wait_loading_data')
// let getter = new Get(); this.transactions = [];
// const urlParts = window.location.href.split('/');
// getter.list({page: page, type: type}).then(response => { const type = urlParts[urlParts.length - 1];
// this.parseTransactions(response.data.data) let getter = new Get();
//
// // set meta data getter.list({page: page, type: type}).then(response => {
// this.totalPages = response.data.meta.pagination.total_pages; this.parseTransactions(response.data.data)
// this.perPage = response.data.meta.pagination.per_page;
// this.page = response.data.meta.pagination.current_page; // set meta data
// }).catch(error => { this.totalPages = response.data.meta.pagination.total_pages;
// // to do this is auto generated this.perPage = response.data.meta.pagination.per_page;
// this.notifications.wait.show = false; this.page = response.data.meta.pagination.current_page;
// this.notifications.error.show = true; }).catch(error => {
// this.notifications.error.text = error.response.data.message; // to do this is auto generated
// }); this.notifications.wait.show = false;
// }, this.notifications.error.show = true;
this.notifications.error.text = error.response.data.message;
});
},
previousPage() {
if(this.page > 1) {
this.page--;
}
this.getTransactions(this.page);
},
nextPage() {
if(this.page < this.totalPages) {
this.page++;
}
this.getTransactions(this.page);
},
gotoPage(i) {
if(i > 0 && i <= this.totalPages) {
this.page = i;
}
this.getTransactions(this.page);
},
parseTransactions(data) { parseTransactions(data) {
// no parse, just save // no parse, just save
for (let i in data) { for (let i in data) {
@@ -321,7 +136,7 @@ let index = function () {
transaction.split = isSplit; transaction.split = isSplit;
tranaction.icon = 'fa fa-solid fa-arrow-left'; transaction.icon = 'fa fa-solid fa-arrow-left';
transaction.firstSplit = firstSplit; transaction.firstSplit = firstSplit;
transaction.group_title = current.attributes.group_title; transaction.group_title = current.attributes.group_title;
transaction.id = current.id; transaction.id = current.id;

5
resources/views/v2/transactions/edit.blade.php
View File

@@ -18,11 +18,6 @@
:optionalDateFields="$optionalDateFields"></x-transaction-split> :optionalDateFields="$optionalDateFields"></x-transaction-split>
</template> </template>
</div> </div>
<div class="row">
<div class="col text-end">
<button class="btn btn-success" :disabled="formStates.isSubmitting" @click="submitTransaction()">Update</button>
</div>
</div>
</div> </div>
</div> </div>

76
resources/views/v2/transactions/index.blade.php
View File

@@ -40,60 +40,38 @@
</div> </div>
<div class="row mb-3"> <div class="row mb-3">
<div class="col"> <div class="col">
Nav
</div> </div>
</div> </div>
<div class="row mb-3"> <div class="row mb-3">
<div class="col-xl-10 col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div class="col-xl-10 col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="card mb-3"> <template x-if="!notifications.wait.show">
<div class="card-header"> <nav aria-label="TODO Page navigation">
<div class="row"> <ul class="pagination">
<div class="col"> <template x-if="page > 1">
<h3 class="card-title">Transactions</h3> <li class="page-item"><a class="page-link" @click.prevent="previousPage">Previous</a></li>
</div> </template>
<div class="col text-end"> <template x-for="i in totalPages">
</div> <li :class="{'page-item': true, 'active': i === page}">
</div> <a class="page-link" href="#" x-text="i" @click.prevent="gotoPage(i)"></a>
</div> </li>
<div class="card-body p-0"> </template>
<div id="grid" class="ag-theme-alpine-auto-dark ag-theme-firefly-iii" style="height: 500px"> <template x-if="page < totalPages">
<li class="page-item"><a class="page-link" @click.prevent="nextPage" href="#">Next</a></li>
</div> </template>
</div> </ul>
</div> </nav>
</template>
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
<div class="row"> <div class="row">
<div class="col"> <h3 class="card-title">Transactions</h3>
<h3 class="card-title">Transactions</h3>
</div>
<div class="col text-end">
<div class="btn-group">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Options
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">
<em class="text-danger fa-regular fa-circle-xmark"></em>
Category</a></li>
<li><a class="dropdown-item" href="#">
<em class="text-success fa-regular fa-circle-check"></em>
Budget</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>
</div> </div>
</div> </div>
<div class="card-body p-0"> <div class="card-body p-0">
<table class="table table-hover table-striped"> <table class="table table-hover table-striped">
<thead> <thead>
<tr> <tr>
@@ -145,7 +123,8 @@
<template x-if="transaction.split && transaction.firstSplit"> <template x-if="transaction.split && transaction.firstSplit">
<span>I AM FIRST SPLIT</span> <span>I AM FIRST SPLIT</span>
</template> </template>
<a :href="'./transactions/show/' + transaction.id" x-text="transaction.description"></a> <a :href="'./transactions/show/' + transaction.id"
x-text="transaction.description"></a>
</td> </td>
</template> </template>
<template x-if="tableColumns.source.enabled"> <template x-if="tableColumns.source.enabled">
@@ -164,16 +143,19 @@
<td> <td>
<template x-if="'withdrawal' === transaction.type"> <template x-if="'withdrawal' === transaction.type">
<span class="text-danger" x-text="formatMoney(transaction.amount*-1, transaction.currency_code)"></span> <span class="text-danger"
x-text="formatMoney(transaction.amount*-1, transaction.currency_code)"></span>
</template> </template>
<template x-if="'deposit' === transaction.type"> <template x-if="'deposit' === transaction.type">
<span class="text-success" x-text="formatMoney(transaction.amount, transaction.currency_code)"></span> <span class="text-success"
x-text="formatMoney(transaction.amount, transaction.currency_code)"></span>
</template> </template>
<template x-if="'transfer' === transaction.type"> <template x-if="'transfer' === transaction.type">
<span class="text-info" x-text="formatMoney(transaction.amount, transaction.currency_code)"></span> <span class="text-info"
x-text="formatMoney(transaction.amount, transaction.currency_code)"></span>
</template> </template>
<template <template
x-if="'transfer' !== transaction.type && 'deposit' !== transaction.type && 'withdrawal' !== transaction.type"> x-if="'transfer' !== transaction.type && 'deposit' !== transaction.type && 'withdrawal' !== transaction.type">