mirror of
https://github.com/firefly-iii/firefly-iii.git
synced 2025-02-25 18:45:27 -06:00
372 lines
13 KiB
JavaScript
372 lines
13 KiB
JavaScript
/*
|
|
* show.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 '../../boot/bootstrap.js';
|
|
import dates from "../shared/dates.js";
|
|
import i18next from "i18next";
|
|
import {format} from "date-fns";
|
|
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-theme-alpine.css';
|
|
import '../../css/grid-ff3-theme.css';
|
|
|
|
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 () {
|
|
return {
|
|
// notifications
|
|
notifications: {
|
|
error: {
|
|
show: false, text: '', url: '',
|
|
}, success: {
|
|
show: false, text: '', url: '',
|
|
}, wait: {
|
|
show: false, text: '',
|
|
|
|
}
|
|
},
|
|
transactions: [],
|
|
totalPages: 1,
|
|
perPage: 50,
|
|
page: 1,
|
|
// available columns:
|
|
tableColumns: {
|
|
description: {
|
|
enabled: true
|
|
},
|
|
source: {
|
|
enabled: true
|
|
},
|
|
destination: {
|
|
enabled: true
|
|
},
|
|
amount: {
|
|
enabled: true
|
|
},
|
|
},
|
|
|
|
table: null,
|
|
|
|
formatMoney(amount, currencyCode) {
|
|
return formatMoney(amount, currencyCode);
|
|
},
|
|
format(date) {
|
|
return format(date, i18next.t('config.date_time_fns'));
|
|
},
|
|
init() {
|
|
this.notifications.wait.show = true;
|
|
this.notifications.wait.text = i18next.t('firefly.wait_loading_data')
|
|
// TODO need date range.
|
|
// TODO handle page number
|
|
//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('/');
|
|
// const type = urlParts[urlParts.length - 1];
|
|
// let getter = new Get();
|
|
//
|
|
// getter.list({page: page, type: type}).then(response => {
|
|
// this.parseTransactions(response.data.data)
|
|
//
|
|
// // set meta data
|
|
// this.totalPages = response.data.meta.pagination.total_pages;
|
|
// this.perPage = response.data.meta.pagination.per_page;
|
|
// this.page = response.data.meta.pagination.current_page;
|
|
// }).catch(error => {
|
|
// // to do this is auto generated
|
|
// this.notifications.wait.show = false;
|
|
// this.notifications.error.show = true;
|
|
// this.notifications.error.text = error.response.data.message;
|
|
// });
|
|
// },
|
|
parseTransactions(data) {
|
|
// 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];
|
|
|
|
|
|
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;
|
|
transaction.created_at = current.attributes.created_at;
|
|
transaction.updated_at = current.attributes.updated_at;
|
|
transaction.user = current.attributes.user;
|
|
transaction.user_group = current.attributes.user_group;
|
|
|
|
// set firstSplit = false for next run if applicable.
|
|
firstSplit = false;
|
|
//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();
|
|
|
|
},
|
|
}
|
|
}
|
|
|
|
let comps = {index, dates};
|
|
|
|
function loadPage() {
|
|
Object.keys(comps).forEach(comp => {
|
|
console.log(`Loading page component "${comp}"`);
|
|
let data = comps[comp]();
|
|
Alpine.data(comp, () => data);
|
|
});
|
|
Alpine.start();
|
|
}
|
|
|
|
// wait for load until bootstrapped event is received.
|
|
document.addEventListener('firefly-iii-bootstrapped', () => {
|
|
console.log('Loaded through event listener.');
|
|
loadPage();
|
|
});
|
|
// or is bootstrapped before event is triggered.
|
|
if (window.bootstrapped) {
|
|
console.log('Loaded through window variable.');
|
|
loadPage();
|
|
}
|