Enable inline edit.

app/Support/Validation/ValidatesAmountsTrait.php

@@ -25,7 +25,7 @@ namespace FireflyIII\Support\Validation;
 
 trait ValidatesAmountsTrait
 {
-    // 19-09-2020: my wedding day lol
+    // 19-09-2020: my wedding day
     protected const string BIG_AMOUNT = '10019092020';
 
     final protected function emptyString(string $value): bool

public/build/assets/parse-downloaded-splits-5812a096.js

@@ -0,0 +1 @@
+import{c as o}from"./create-empty-split-c3730b85.js";import{f as _}from"./vendor-5cffaf70.js";function l(a,r){let n=[];for(let i in a)if(a.hasOwnProperty(i)){let e=a[i],t=o();t.transaction_journal_id=e.transaction_journal_id,t.transaction_group_id=r,t.bill_id=e.bill_id,t.bill_name=e.bill_name,t.budget_id=e.budget_id,t.budget_name=e.budget_name,t.category_name=e.category_name,t.category_id=e.category_id,t.piggy_bank_id=e.piggy_bank_id,t.piggy_bank_name=e.piggy_bank_name,t.book_date=e.book_date,t.due_date=e.due_date,t.interest_date=e.interest_date,t.invoice_date=e.invoice_date,t.payment_date=e.payment_date,t.process_date=e.process_date,t.external_url=e.external_url,t.internal_reference=e.internal_reference,t.notes=e.notes,t.tags=e.tags,t.amount=parseFloat(e.amount).toFixed(e.currency_decimal_places),t.currency_code=e.currency_code,e.foreign_amount!==null&&(t.forein_currency_code=e.foreign_currency_code,t.foreign_amount=parseFloat(e.foreign_amount).toFixed(e.foreign_currency_decimal_places)),t.date=_(new Date(e.date),"yyyy-MM-dd HH:mm"),t.description=e.description,t.destination_account={id:e.destination_id,name:e.destination_name,type:e.destination_type,alpine_name:e.destination_name},t.source_account={id:e.source_id,name:e.source_name,type:e.source_type,alpine_name:e.source_name},e.latitude!==null&&(t.hasLocation=!0,t.latitude=e.latitude,t.longitude=e.longitude,t.zoomLevel=e.zoom_level),n.push(t)}return n}export{l as p};

public/build/assets/parse-downloaded-splits-d8bf7632.js

@@ -1 +0,0 @@
-import{c as r}from"./create-empty-split-c3730b85.js";import{f as o}from"./vendor-5cffaf70.js";function c(a){let n=[];for(let i in a)if(a.hasOwnProperty(i)){let e=a[i],t=r();t.bill_id=e.bill_id,t.bill_name=e.bill_name,t.budget_id=e.budget_id,t.budget_name=e.budget_name,t.category_name=e.category_name,t.category_id=e.category_id,t.piggy_bank_id=e.piggy_bank_id,t.piggy_bank_name=e.piggy_bank_name,t.book_date=e.book_date,t.due_date=e.due_date,t.interest_date=e.interest_date,t.invoice_date=e.invoice_date,t.payment_date=e.payment_date,t.process_date=e.process_date,t.external_url=e.external_url,t.internal_reference=e.internal_reference,t.notes=e.notes,t.tags=e.tags,t.amount=parseFloat(e.amount).toFixed(e.currency_decimal_places),t.currency_code=e.currency_code,e.foreign_amount!==null&&(t.forein_currency_code=e.foreign_currency_code,t.foreign_amount=parseFloat(e.foreign_amount).toFixed(e.foreign_currency_decimal_places)),t.date=o(new Date(e.date),"yyyy-MM-dd HH:mm"),t.description=e.description,t.destination_account={id:e.destination_id,name:e.destination_name,type:e.destination_type,alpine_name:e.destination_name},t.source_account={id:e.source_id,name:e.source_name,type:e.source_type,alpine_name:e.source_name},e.latitude!==null&&(t.hasLocation=!0,t.latitude=e.latitude,t.longitude=e.longitude,t.zoomLevel=e.zoom_level),n.push(t)}return n}export{c as p};

public/build/manifest.json

@@ -27,13 +27,13 @@
     ],
     "integrity": "sha384-RcC4qxcJgrERr1ZEEadEOSkDok1d0+Fje5/VzoT0LH0pAW2UZtvFCFOghjBzYEes"
   },
-  "_parse-downloaded-splits-d8bf7632.js": {
-    "file": "assets/parse-downloaded-splits-d8bf7632.js",
+  "_parse-downloaded-splits-5812a096.js": {
+    "file": "assets/parse-downloaded-splits-5812a096.js",
     "imports": [
       "_create-empty-split-c3730b85.js",
       "_vendor-5cffaf70.js"
     ],
-    "integrity": "sha384-wNGsGr9RAQ9aZNE6OVBMivKqjZ9FqKSIo5RCR5TQMoitKAlswFJXqpy4w8INcKdD"
+    "integrity": "sha384-XDKqia/7MLcqgFGULE1pZ7RN0HxeT/cZpBIdKAWKKIfTWnm0gnZxTuD9B5fSJA0h"
   },
   "_splice-errors-into-transactions-66181f21.js": {
     "file": "assets/splice-errors-into-transactions-66181f21.js",
@@ -127,11 +127,11 @@
     "integrity": "sha384-ClkQpKJ81+fT7zrt6rCxOCR0hBr/aDJCIMS4tmuBEl/xruP9IJSokuNX4I7mSy0Z"
   },
   "resources/assets/v2/pages/transactions/edit.js": {
-    "file": "assets/edit-070e8524.js",
+    "file": "assets/edit-8ec3918a.js",
     "imports": [
       "_format-money-bcfc2969.js",
       "_get-32a7112a.js",
-      "_parse-downloaded-splits-d8bf7632.js",
+      "_parse-downloaded-splits-5812a096.js",
       "_splice-errors-into-transactions-66181f21.js",
       "_vendor-5cffaf70.js",
       "_create-empty-split-c3730b85.js",
@@ -139,7 +139,7 @@
     ],
     "isEntry": true,
     "src": "resources/assets/v2/pages/transactions/edit.js",
-    "integrity": "sha384-1p26d3/cG4QvjOFq8h4wbhG5NIk9DR5lftz/vGW08h6Wn5P5BCBDiOpMQ5YKGrkG"
+    "integrity": "sha384-UnOsqjwxCPNFw4V68IhR/UYtE/a8UY9dJaRxTOszXNTIA8L0N6vnTfFueFvQg/N0"
   },
   "resources/assets/v2/pages/transactions/index.js": {
     "file": "assets/index-e87148c5.js",
@@ -161,17 +161,17 @@
     "css": [
       "assets/show-8b1429e5.css"
     ],
-    "file": "assets/show-ddb72bf9.js",
+    "file": "assets/show-fafa65e9.js",
     "imports": [
       "_format-money-bcfc2969.js",
       "_vendor-5cffaf70.js",
       "_get-32a7112a.js",
-      "_parse-downloaded-splits-d8bf7632.js",
+      "_parse-downloaded-splits-5812a096.js",
       "_create-empty-split-c3730b85.js"
     ],
     "isEntry": true,
     "src": "resources/assets/v2/pages/transactions/show.js",
-    "integrity": "sha384-xtfPbtKPTnEqws536WTYd9sSwhclkigL6ERXaWGn/rLQo2kzD2cXBg2McCQjueMZ"
+    "integrity": "sha384-9Vjq9YDNZYx+fA5fCF9NYnLmQeWTDSe7XGaGqVcGjWPxnj+kKrTVKSB16+V7yKZa"
   },
   "resources/assets/v2/sass/app.scss": {
     "file": "assets/app-fb7b26ec.css",

resources/assets/v2/libraries/dark-editable/Types/BaseType.js

@@ -182,14 +182,45 @@ export default class BaseType {
 
     ajax(new_value) {
         let url = this.context.url;
-        const form = new FormData;
-        form.append("pk", this.context.pk);
-        form.append("name", this.context.name);
-        form.append("value", new_value);
-        const option = {};
+        //const form = new FormData;
+        let message;
+        let submit = false;
+
+        console.log(this.context);
+        // replace form with custom sets. Not sure yet of the format, this will have to grow in time.
+        if ('journal_description' === this.context.options.formType) {
+            submit = true;
+            message = {
+                transactions: [
+                    {
+                        transaction_journal_id: this.context.options.journalId,
+                        description: new_value,
+                    }
+                ]
+            };
+        }
+
+        if(false === submit) {
+            console.error('Cannot deal with form type "'+this.context.formType+'"');
+        }
+
+        // form.append("pk", this.context.pk);
+        // form.append("name", this.context.name);
+        // form.append("value", new_value);
+
+        const option = {
+            headers: {
+                'Content-Type': 'application/json',
+                'X-CSRF-TOKEN': document.head.querySelector('meta[name="csrf-token"]').content
+            }
+        };
         option.method = this.context.ajaxOptions.method;
-        if (option.method === "POST") {
-            option.body = form;
+
+        if(this.context.options.method) {
+            option.method = this.context.options.method;
+        }
+        if ('POST' === option.method || 'PUT' === this.context.options.method) {
+            option.body = JSON.stringify(message);
         } else {
             url += "?" + new URLSearchParams(form).toString();
         }

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

@@ -267,7 +267,7 @@ let transactions = function () {
                 this.groupProperties.id = parseInt(data.id);
                 this.groupProperties.transactionType = data.attributes.transactions[0].type.toLowerCase();
                 this.groupProperties.title = data.attributes.title ?? data.attributes.transactions[0].description;
-                this.entries = parseDownloadedSplits(data.attributes.transactions);
+                this.entries = parseDownloadedSplits(data.attributes.transactions, parseInt(data.id));
 
                 // remove waiting thing.
                 this.notifications.wait.show = false;

resources/assets/v2/pages/transactions/shared/parse-downloaded-splits.js

@@ -22,7 +22,7 @@ import {createEmptySplit} from "./create-empty-split.js";
 import {format} from "date-fns";
 import formatMoney from "../../../util/format-money.js";
 
-export function parseDownloadedSplits(downloads) {
+export function parseDownloadedSplits(downloads, groupId) {
     let returnArray = [];
     for (let i in downloads) {
         if (downloads.hasOwnProperty(i)) {
@@ -31,6 +31,8 @@ export function parseDownloadedSplits(downloads) {
             let current = createEmptySplit();
 
             // meta data
+            current.transaction_journal_id = download.transaction_journal_id;
+            current.transaction_group_id = groupId;
             current.bill_id = download.bill_id;
             current.bill_name = download.bill_name;
             current.budget_id = download.budget_id;

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

@@ -26,6 +26,7 @@ import {parseDownloadedSplits} from "./shared/parse-downloaded-splits.js";
 import {format} from "date-fns";
 import formatMoney from "../../util/format-money.js";
 import DarkEditable from "../../libraries/dark-editable/dark-editable.js";
+import {inlineJournalDescription} from "../../support/inline-edit.js";
 
 
 let show = function () {
@@ -79,7 +80,7 @@ let show = function () {
                 this.groupProperties.transactionType = data.attributes.transactions[0].type;
                 this.groupProperties.transactionTypeTranslated = i18next.t('firefly.' + data.attributes.transactions[0].type);
                 this.groupProperties.title = data.attributes.title ?? data.attributes.transactions[0].description;
-                this.entries = parseDownloadedSplits(data.attributes.transactions);
+                this.entries = parseDownloadedSplits(data.attributes.transactions, parseInt(data.id));
                 // remove waiting thing.
                 this.notifications.wait.show = false;
             }).then(() => {
@@ -104,8 +105,13 @@ let show = function () {
 
                 // at this point do the inline change fields
                 //inlineEdit('journal_description')
-                const usernameEl = document.getElementById('journal_description');
-                const popover = new DarkEditable(usernameEl, {mode: 'inline', url: '/something-else'});
+                const descriptions = document.querySelectorAll('.journal_description');
+                for(const i in descriptions) {
+                    if(descriptions.hasOwnProperty(i)) {
+                        const current=  descriptions[i];
+                        inlineJournalDescription(current);
+                    }
+                }
 
             }).catch((error) => {
                 // todo auto generated.

resources/assets/v2/support/inline-edit.js

@@ -0,0 +1,41 @@
+/*
+ * inline-edit.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 DarkEditable from "../libraries/dark-editable/dark-editable.js";
+
+function inlineJournalDescription(element) {
+    const journalId = parseInt(element.dataset.id);
+    const groupId = parseInt(element.dataset.group);
+    console.log(element);
+    const opts = {
+        pk: groupId,
+        mode: 'inline',
+        url: './api/v2/transactions/' + groupId,
+        formType: 'journal_description',
+        journalId: journalId,
+        method: 'PUT',
+    };
+    console.log(opts);
+    new DarkEditable(element,
+        opts
+    );
+}
+
+export {inlineJournalDescription};

resources/views/v2/transactions/show.blade.php

@@ -140,10 +140,13 @@
                             <div class="card-header">
                                 <h3 class="card-title">
                                     <span
-                                        id="journal_description"
+                                        class="journal_description"
                                           data-type="text"
-                                          data-pk="12"
-                                          data-title="{{ __('firefly.description') }}" x-text="entry.description"></span>
+                                          data-pk="0"
+                                        :data-id="entry.transaction_journal_id"
+                                        :data-group="entry.transaction_group_id"
+                                          data-title="{{ __('firefly.description') }}"
+                                        x-text="entry.description"></span>
                                     <template x-if="entries.length > 1">
                                     <span class="badge bg-secondary">
                                         <span x-text="index + 1"></span> / <span x-text="entries.length"></span>