Editable up until date.

resources/assets/v2/css/grid-ff3-theme.css

@@ -22,3 +22,11 @@
 .ag-theme-firefly-iii {
     /* --ag-odd-row-background-color: #f00; */
 }
+.ag-theme-firefly-iii .ag-root {
+    border:0;
+}
+.ag-theme-firefly-iii .ag-root-wrapper
+{
+    border:0;
+}
+

resources/assets/v2/pages/transactions/index.js

@@ -32,8 +32,11 @@ 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();
 ds.setType('withdrawal');
@@ -45,19 +48,25 @@ document.addEventListener('cellEditRequest', () => {
 let rowImmutableStore = [];
 
 let dataTable;
-const editableFields = ['description'];
+const editableFields = ['description', 'amount', 'date'];
 
 const onCellEditRequestMethod = (event) => {
+    console.log('onCellEditRequestMethod');
     const data = event.data;
-    console.log(event);
     const field = event.colDef.field;
-    const newValue = event.newValue;
-    if(!editableFields.includes(field)) {
+    let 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 + '"');
+    // 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);
@@ -78,6 +87,16 @@ const onCellEditRequestMethod = (event) => {
 
 };
 
+document.addEventListener('cellValueChanged', () => {
+    console.log('I just realized a cell value has changed.');
+});
+document.addEventListener('onCellValueChanged', () => {
+    console.log('I just realized a cell value has changed.');
+});
+
+let doOnCellValueChanged = function(e) {
+    console.log('I just realized a cell value has changed.');
+};
 
 const gridOptions = {
     rowModelType: 'infinite',
@@ -99,30 +118,124 @@ const gridOptions = {
             sortable: false,
             width: 40,
             cellRenderer: function (params) {
-                return '<a href="#"><em class="' + params.value + '"></em></a>';
+                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) {
+            // 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()) {
-                    return '<a href="#">' + params.getValue() + '</a>';
+                    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: "amount"},
         {
             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 '';
+            }
         },
-        {field: "from"},
-        {field: "to"},
-        {field: "category"},
-        {field: "budget"},
     ]
 };
 

resources/assets/v2/support/ag-grid/AmountEditor.js

@@ -0,0 +1,110 @@
+/*
+ * AmountEditor.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 Put from "../../api/v2/model/transaction/put.js";
+
+export default class AmountEditor {
+
+    init(params) {
+
+        document.addEventListener('cellValueChanged', () => {
+            console.log('I just realized a cell value has changed.');
+        });
+
+        console.log('AmountEditor.init');
+        this.params = params;
+        this.originalValue = params.value;
+        this.eGui = document.createElement('div');
+
+        this.input = document.createElement('input');
+        this.input.type = 'number';
+        this.input.min = '0';
+        this.input.step = 'any';
+        this.input.style.overflow = 'hidden';
+        this.input.style.textOverflow = 'ellipsis';
+        this.input.autofocus = true;
+        this.input.value = parseFloat(params.value.amount).toFixed(params.value.decimal_places);
+
+        //this.input.onchange = function(e) { this.onChange(e, params);}
+        //  params.onValueChange;
+        //this.input.onblur = params.onValueChange;
+
+        // this.input.onblur = function () {
+        //     params.stopEditing();
+        // };
+
+        // this.eGui.innerHTML = `<input
+        // type="number" min="0"
+        // onChange="params.onValueChange"
+        // step="any" style="overflow: hidden; text-overflow: ellipsis" value="${parseFloat(params.value.amount).toFixed(params.value.decimal_places)}" />`;
+    }
+    onChange(e) {
+        console.log('AmountEditor.onChange');
+        this.params.onValueChange(e);
+        this.params.stopEditing(e);
+    }
+
+    // focus and select can be done after the gui is attached
+    afterGuiAttached() {
+        this.input.focus();
+        this.input.select();
+    }
+
+
+    getGui() {
+        console.log('AmountEditor.getGui');
+        this.eGui.appendChild(this.input);
+        return this.eGui;
+    }
+
+    getValue() {
+        console.log('AmountEditor.getValue');
+        this.originalValue.amount = parseFloat(this.input.value);
+
+        // needs a manual submission to Firefly III here.
+        this.submitAmount(this.originalValue);
+
+
+        return this.originalValue;
+    }
+
+    submitAmount(value) {
+        console.log('AmountEditor.submitAmount');
+        console.log(value);
+        const newValue = value.amount;
+        console.log('New value for field "amount" in transaction journal #' + value.transaction_journal_id + ' of group #' + value.id + ' is "' + newValue + '"');
+
+        // push update to Firefly III over API:
+        let submission = {
+            transactions: [
+                {
+                    transaction_journal_id: value.transaction_journal_id,
+                    amount: newValue
+                }
+            ]
+        };
+
+        let putter = new Put();
+        putter.put(submission, {id: value.id});
+    }
+
+}

resources/assets/v2/support/ag-grid/DateTimeEditor.js

@@ -0,0 +1,84 @@
+/*
+ * AmountEditor.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 Put from "../../api/v2/model/transaction/put.js";
+import format from "../../util/format.js";
+
+export default class DateTimeEditor {
+
+    init(params) {
+        console.log('DateTimeEditor.init');
+        this.params = params;
+        this.originalValue = params.value;
+        this.eGui = document.createElement('div');
+
+        this.input = document.createElement('input');
+        this.input.type = 'datetime-local';
+        this.input.style.overflow = 'hidden';
+        this.input.style.textOverflow = 'ellipsis';
+        this.input.value = format(params.value, 'yyyy-MM-dd HH:mm');
+    }
+    onChange(e) {
+        console.log('DateTimeEditor.onChange');
+        this.params.onValueChange(e);
+        this.params.stopEditing(e);
+    }
+
+    // focus and select can be done after the gui is attached
+    afterGuiAttached() {
+        this.input.focus();
+    }
+
+    getGui() {
+        console.log('DateTimeEditor.getGui');
+        this.eGui.appendChild(this.input);
+        return this.eGui;
+    }
+
+    getValue() {
+        console.log('DateTimeEditor.getValue');
+        this.originalValue = this.input.value;
+
+        return this.originalValue;
+    }
+
+    submitAmount(value) {
+        console.log('AmountEditor.submitAmount');
+        console.log(value);
+        const newValue = value.amount;
+        console.log('New value for field "amount" in transaction journal #' + value.transaction_journal_id + ' of group #' + value.id + ' is "' + newValue + '"');
+
+        // push update to Firefly III over API:
+        let submission = {
+            transactions: [
+                {
+                    transaction_journal_id: value.transaction_journal_id,
+                    amount: newValue
+                }
+            ]
+        };
+
+        let putter = new Put();
+        putter.put(submission, {id: value.id});
+    }
+
+}

resources/assets/v2/support/ag-grid/TransactionDataSource.js

@@ -65,6 +65,7 @@ export default class TransactionDataSource {
 
                         let entry = {};
                         // split info
+
                         entry.split = isSplit;
                         entry.firstSplit = firstSplit;
 
@@ -78,11 +79,45 @@ export default class TransactionDataSource {
                         // 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;
+                        entry.date = new Date(transaction.date);
+
+                        // complex fields
+                        entry.from = {
+                            name: transaction.source_name,
+                            id: transaction.source_id,
+                            type: transaction.source_type,
+                        };
+                        entry.to = {
+                            name: transaction.destination_name,
+                            id: transaction.destination_id,
+                            type: transaction.destination_type,
+                        };
+                        entry.category = {
+                            name: transaction.category_name,
+                            id: transaction.category_id,
+                        };
+                        entry.budget = {
+                            name: transaction.budget_name,
+                            id: transaction.budget_id,
+                        };
+
+                        entry.amount = {
+                            id: parseInt(current.id),
+                            transaction_journal_id: parseInt(transaction.transaction_journal_id),
+                            type: transaction.type,
+                            amount: transaction.amount,
+                            currency_code: transaction.currency_code,
+                            decimal_places: transaction.currency_decimal_places,
+                            foreign_amount: transaction.foreign_amount,
+                            foreign_currency_code: transaction.foreign_currency_code,
+                            foreign_decimal_places: transaction.foreign_currency_decimal_places,
+                        };
+
+                        entry.icon = {classes: 'fa fa-solid fa-arrow-left', id: entry.id};
 
                         // set firstSplit = false for next run if applicable.
+                        //console.log(transaction);
                         firstSplit = false;
                         transactions.push(entry);
                     }