Rebuild frontend for dynamic title update

public/build/manifest.json

@@ -161,7 +161,7 @@
     "css": [
       "assets/show-8b1429e5.css"
     ],
-    "file": "assets/show-fafa65e9.js",
+    "file": "assets/show-a7701e0f.js",
     "imports": [
       "_format-money-bcfc2969.js",
       "_vendor-5cffaf70.js",
@@ -171,7 +171,7 @@
     ],
     "isEntry": true,
     "src": "resources/assets/v2/pages/transactions/show.js",
-    "integrity": "sha384-9Vjq9YDNZYx+fA5fCF9NYnLmQeWTDSe7XGaGqVcGjWPxnj+kKrTVKSB16+V7yKZa"
+    "integrity": "sha384-LjiN/inhix9rgHRGunls24YAjjfltDbPVqNVCe6llpK9n06X4WjY6slGC/gv7pKw"
   },
   "resources/assets/v2/sass/app.scss": {
     "file": "assets/app-fb7b26ec.css",

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

@@ -25,7 +25,6 @@ import Get from "../../api/v2/model/transaction/get.js";
 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";
 
 
@@ -50,7 +49,7 @@ let show = function () {
             date: new Date,
         },
         dateFields: ["book_date", "due_date", "interest_date", "invoice_date", "payment_date", "process_date"],
-        metaFields: ['external_id','internal_reference','sepa_batch_id','sepa_ct_id','sepa_ct_op','sepa_db','sepa_country','sepa_cc','sepa_ep','sepa_ci','external_url'],
+        metaFields: ['external_id', 'internal_reference', 'sepa_batch_id', 'sepa_ct_id', 'sepa_ct_op', 'sepa_db', 'sepa_country', 'sepa_cc', 'sepa_ep', 'sepa_ci', 'external_url'],
 
         // parse amounts per currency
         amounts: {},
@@ -60,7 +59,7 @@ let show = function () {
         pageProperties: {},
         formatMoney(amount, currencyCode) {
             console.log('formatting', amount, currencyCode);
-            if('' === currencyCode) {
+            if ('' === currencyCode) {
                 currencyCode = 'EUR';
             }
             return formatMoney(amount, currencyCode);
@@ -97,18 +96,30 @@ let show = function () {
                             this.amounts[foreignCurrencyCode] = 0;
                             this.amounts[foreignCurrencyCode] += parseFloat(this.entries[i].foreign_amount);
                         }
-                        if(0 === parseInt(i)) {
+                        if (0 === parseInt(i)) {
                             this.groupProperties.date = this.entries[i].date;
                         }
                     }
                 }
 
                 // at this point do the inline change fields
-                //inlineEdit('journal_description')
                 const descriptions = document.querySelectorAll('.journal_description');
-                for(const i in descriptions) {
+                for (const i in descriptions) {
-                    if(descriptions.hasOwnProperty(i)) {
+                    if (descriptions.hasOwnProperty(i)) {
-                        const current=  descriptions[i];
+                        const current = descriptions[i];
+                        // this is all manual work for now.
+                        current.addEventListener('save', function (e) {
+                            const journalId = parseInt(e.currentTarget.dataset.id);
+                            const groupId = parseInt(e.currentTarget.dataset.group);
+                            const length = parseInt(e.currentTarget.dataset.length); // TODO not happy with this.
+                            const newDescription = e.currentTarget.textContent;
+                            console.log(length);
+                            if (1 === length) {
+                                // update "group" transaction title because it's equal to this journal's description.
+                                document.querySelector('.group_title[data-group="' + groupId + '"]').textContent = newDescription;
+                                document.querySelector('.group_title_title[data-group="' + groupId + '"]').textContent = newDescription;
+                            }
+                        })
                         inlineJournalDescription(current);
                     }
                 }

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

@@ -23,7 +23,6 @@ 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',
@@ -32,7 +31,6 @@ function inlineJournalDescription(element) {
         journalId: journalId,
         method: 'PUT',
     };
-    console.log(opts);
     new DarkEditable(element,
         opts
     );

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

@@ -36,7 +36,7 @@
                                             <span>TODO missing ICON</span>
                                         </template>
                                     </th>
-                                    <td><span x-text="groupProperties.title"></span></td>
+                                    <td><span class="group_title" :data-group="groupProperties.id" x-text="groupProperties.title"></span></td>
                                 </tr>
                                 <tr>
                                     <th><em class="fa-solid fa-calendar-alt" title="{{ __('list.date') }}"/></th>
@@ -143,6 +143,7 @@
                                         class="journal_description"
                                           data-type="text"
                                           data-pk="0"
+                                        :data-length="entries.length"
                                         :data-id="entry.transaction_journal_id"
                                         :data-group="entry.transaction_group_id"
                                           data-title="{{ __('firefly.description') }}"