kenmirrors/firefly-iii
1
0
Fork 0
mirror of https://github.com/firefly-iii/firefly-iii.git synced 2025-10-26 13:36:15 +00:00
Code Issues Projects Releases Wiki Activity

Inline edit for v2

Browse Source
This commit is contained in:
James Cole
2024-02-10 08:28:59 +01:00
parent d0844356cb
commit 723aa65e7a
14 changed files with 517 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
resources/assets/v2/api/v2/model/transaction/get.js
View File

@@ -31,6 +31,9 @@ export default class Get {
list(params) {
return api.get('/api/v2/transactions', {params: params});
}
listByCount(params) {
return api.get('/api/v2/transactions-inf', {params: params});
}
show(id, params){
return api.get('/api/v2/transactions/' + id, {params: params});
}

24
resources/assets/v2/css/grid-ff3-theme.css Normal file
View File

@@ -0,0 +1,24 @@
/*
* grid-ff3-theme.css
* Copyright (c) 2024 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/.
*/
/* ag-theme-acmecorp.css */
.ag-theme-firefly-iii {
/* --ag-odd-row-background-color: #f00; */
}

119
resources/assets/v2/pages/transactions/index.js
View File

@@ -24,8 +24,110 @@ import i18next from "i18next";
import {format} from "date-fns";
import formatMoney from "../../util/format-money.js";
import Get from "../../api/v2/model/transaction/get.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-theme-alpine.css';
import '../../css/grid-ff3-theme.css';
import TransactionDataSource from "../../support/ag-grid/TransactionDataSource.js";
import {InfiniteRowModelModule} from '@ag-grid-community/infinite-row-model';
const ds = new TransactionDataSource();
ds.setType('withdrawal');
document.addEventListener('cellEditRequest', () => {
console.log('Loaded through event listener.');
//loadPage();
});
let rowImmutableStore = [];
let dataTable;
const editableFields = ['description'];
const onCellEditRequestMethod = (event) => {
const data = event.data;
console.log(event);
const field = event.colDef.field;
const newValue = event.newValue;
if(!editableFields.includes(field)) {
console.log('Field ' + field + ' is not editable.');
return;
}
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,
onCellEditRequest: onCellEditRequestMethod,
readOnlyEdit: true,
// 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) {
return '<a href="#"><em class="' + params.value + '"></em></a>';
}
},
{
field: "description",
cellDataType: 'text',
editable: true,
cellRenderer: function (params) {
if (params.getValue()) {
return '<a href="#">' + params.getValue() + '</a>';
}
return '';
}
},
{field: "amount"},
{
field: "date",
cellDataType: 'date',
},
{field: "from"},
{field: "to"},
{field: "category"},
{field: "budget"},
]
};
ModuleRegistry.registerModules([InfiniteRowModelModule]);
let index = function () {
return {
// notifications
@@ -59,6 +161,8 @@ let index = function () {
},
},
table: null,
formatMoney(amount, currencyCode) {
return formatMoney(amount, currencyCode);
},
@@ -70,7 +174,12 @@ let index = function () {
this.notifications.wait.text = i18next.t('firefly.wait_loading_data')
// TODO need date range.
// TODO handle page number
this.getTransactions(this.page);
//this.getTransactions(this.page);
// Your Javascript code to create the grid
dataTable = createGrid(document.querySelector('#grid'), gridOptions);
},
getTransactions(page) {
const urlParts = window.location.href.split('/');
@@ -103,7 +212,10 @@ let index = function () {
for (let ii in current.attributes.transactions) {
if (current.attributes.transactions.hasOwnProperty(ii)) {
let transaction = current.attributes.transactions[ii];
transaction.split = isSplit;
tranaction.icon = 'fa fa-solid fa-arrow-left';
transaction.firstSplit = firstSplit;
transaction.group_title = current.attributes.group_title;
transaction.id = current.id;
@@ -114,14 +226,17 @@ let index = function () {
// set firstSplit = false for next run if applicable.
firstSplit = false;
console.log(transaction);
//console.log(transaction);
this.transactions.push(transaction);
//this.gridOptions.rowData.push(transaction);
}
}
}
}
// only now, disable wait thing.
this.notifications.wait.show = false;
console.log('refresh!');
//this.table.refreshCells();
},
}

100
resources/assets/v2/support/ag-grid/TransactionDataSource.js Normal file
View File

@@ -0,0 +1,100 @@
/*
* TransactionDataSource.js
* Copyright (c) 2024 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/.
*/
import Get from "../../api/v2/model/transaction/get.js";
export default class TransactionDataSource {
constructor() {
this.type = 'all';
this.rowCount = null;
}
rowCount() {
return this.rowCount;
}
getRows(params) {
let getter = new Get();
getter.listByCount({start_row: params.startRow, end_row: params.endRow, type: this.type}).then(response => {
this.parseTransactions(response.data.data, params.successCallback);
// set meta data
this.rowCount = response.data.meta.pagination.total;
}).catch(error => {
// todo this is auto generated
//this.notifications.wait.show = false;
//this.notifications.error.show = true;
//this.notifications.error.text = error.response.data.message;
console.log(error);
});
}
parseTransactions(data, callback) {
let transactions = [];
// no parse, just save
for (let i in data) {
if (data.hasOwnProperty(i)) {
let current = data[i];
let isSplit = current.attributes.transactions.length > 1;
let firstSplit = true;
// foreach on transactions, no matter how many.
for (let ii in current.attributes.transactions) {
if (current.attributes.transactions.hasOwnProperty(ii)) {
let transaction = current.attributes.transactions[ii];
let entry = {};
// split info
entry.split = isSplit;
entry.firstSplit = firstSplit;
// group attributes
entry.group_title = current.attributes.group_title;
entry.created_at = current.attributes.created_at;
entry.updated_at = current.attributes.updated_at;
entry.user = current.attributes.user;
entry.user_group = current.attributes.user_group;
// create actual transaction:
entry.id = parseInt(current.id);
entry.transaction_journal_id = parseInt(transaction.transaction_journal_id);
entry.icon = 'fa fa-solid fa-arrow-left';
entry.date = new Date(transaction.date);
entry.description = transaction.description;
// set firstSplit = false for next run if applicable.
firstSplit = false;
transactions.push(entry);
}
}
}
}
callback(transactions, false)
return transactions;
}
setType(type) {
this.type = type;
}
}