Enable inline edit.

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>