On edit_structured view, fix inputs reverting on button use.

diff --git a/templates/edit_structured.tmpl b/templates/edit_structured.tmpl
index 9d6273aeb041ecdb5469f7830a5411b61b7437d7..46ef79df351baf9f9cfb04c2528a387261a3b74b 100644 (file)
--- a/templates/edit_structured.tmpl
+++ b/templates/edit_structured.tmpl
@@ -17,15 +17,50 @@ var dat_lines = {{dat_lines|tojson|safe}};
 {{ macros.taint_js() }}
 
 function update_form() {
 {{ macros.taint_js() }}
 
 function update_form() {

+  // catch and empty table

   const table = document.getElementById("dat_lines");
   table.innerHTML = "";
   const table = document.getElementById("dat_lines");
   table.innerHTML = "";

-  function add_button(td, text, disable, f) {
+
+  // basic helpers
+  function add_button(parent_td, label, disabled, onclick) {
+    // add button to td to run onclick (after updating dat_lines from inputs,
+    // and followed by calling taint and update_form

     const btn = document.createElement("button");
     const btn = document.createElement("button");

-    td.appendChild(btn);
-    btn.textContent = text;
+    parent_td.appendChild(btn);
+    btn.textContent = label;

     btn.type = "button";  // otherwise will act as form submit
     btn.type = "button";  // otherwise will act as form submit

-    btn.disabled = disable;
-    btn.onclick = function() {f(); update_form(); taint(); };
+    btn.disabled = disabled;
+    btn.onclick = function() {
+      let n_lines_jumped = 0;
+      for (let i = 0; i < table.rows.length; i++) {
+        const row = table.rows[i];
+        if (row.classList.contains('warning')) {
+          n_lines_jumped++;
+          continue;
+        };
+        for (const input of table.rows[i].querySelectorAll('td input')) {
+          const line_to_update = dat_lines[i - n_lines_jumped];
+          if (input.name.endsWith('comment')) {
+            line_to_update.comment = input.value;
+          } else if (input.name.endsWith('error')) {
+            line_to_update.code = input.value;
+          } else if (input.name.endsWith('date')) {
+            line_to_update.booking_line.date = input.value;
+          } else if (input.name.endsWith('target')) {
+            line_to_update.booking_line.target = input.value;
+          } else if (input.name.endsWith('account')) {
+            line_to_update.booking_line.account = input.value;
+          } else if (input.name.endsWith('amount')) {
+            line_to_update.booking_line.amount = input.value;
+          } else if (input.name.endsWith('currency')) {
+            line_to_update.booking_line.currency = input.value;
+          }
+        }
+      }
+      onclick();
+      taint();
+      update_form();
+    };

   }
   function add_td(tr, colspan=1) {
     const td = document.createElement("td");
   }
   function add_td(tr, colspan=1) {
     const td = document.createElement("td");


@@ -33,10 +68,13 @@ function update_form() {
     td.colSpan = colspan;
     return td;
   }
     td.colSpan = colspan;
     return td;
   }

+

   for (let i = 0; i < dat_lines.length; i++) {
     const dat_line = dat_lines[i];
     const tr = document.createElement("tr");
     table.appendChild(tr);
   for (let i = 0; i < dat_lines.length; i++) {
     const dat_line = dat_lines[i];
     const tr = document.createElement("tr");
     table.appendChild(tr);

+
+    // add line inputs

     function setup_input_td(tr, colspan) {
       const td = add_td(tr, colspan);
       if (dat_line.error) { td.classList.add("invalid"); };
     function setup_input_td(tr, colspan) {
       const td = add_td(tr, colspan);
       if (dat_line.error) { td.classList.add("invalid"); };


@@ -45,7 +83,7 @@ function update_form() {
     function add_input(td, name, value, size) {
       const input = document.createElement("input");
       td.appendChild(input);
     function add_input(td, name, value, size) {
       const input = document.createElement("input");
       td.appendChild(input);

-      input.name = `line_${i}_${name}`
+      input.name = `line_${i}_${name}`;

       input.value = value.trim();
       input.size = size;
       input.oninput = taint;
       input.value = value.trim();
       input.size = size;
       input.oninput = taint;


@@ -76,6 +114,7 @@ function update_form() {
       add_td_input('error', dat_line.code, 20, 3)
     }
     add_td_input('comment', dat_line.comment, 40);
       add_td_input('error', dat_line.code, 20, 3)
     }
     add_td_input('comment', dat_line.comment, 40);

+

     // add action buttons, with "delete" after some safety distance
     const td_btns = add_td(tr);
     add_button(td_btns, '^', i > 1 ? false : true, function() {
     // add action buttons, with "delete" after some safety distance
     const td_btns = add_td(tr);
     add_button(td_btns, '^', i > 1 ? false : true, function() {


@@ -90,6 +129,7 @@ function update_form() {
     });
     td_btns.appendChild(document.createTextNode(' · · · '))
     add_button(td_btns, 'delete', false, function() { dat_lines.splice(i, 1); });
     });
     td_btns.appendChild(document.createTextNode(' · · · '))
     add_button(td_btns, 'delete', false, function() { dat_lines.splice(i, 1); });

+

     // add error explanation row if necessary
     if (dat_line.error) {
       const tr = document.createElement("tr");
     // add error explanation row if necessary
     if (dat_line.error) {
       const tr = document.createElement("tr");


@@ -100,6 +140,7 @@ function update_form() {
       tr.classList.add("warning");
     }
   }
       tr.classList.add("warning");
     }
   }

+

   // add "add line" row
   const tr = document.createElement("tr");
   table.appendChild(tr);
   // add "add line" row
   const tr = document.createElement("tr");
   table.appendChild(tr);


@@ -108,6 +149,7 @@ function update_form() {
    new_line = {error: '', comment: '', booking_line: {account: '', amount: '', currency: ''}};
    dat_lines.push(new_line);
   });
    new_line = {error: '', comment: '', booking_line: {account: '', amount: '', currency: ''}};
    dat_lines.push(new_line);
   });

+

   // make all rows alternate background color for better readability
   Array.from(table.rows).forEach((tr) => {
       tr.classList.add('alternating');
   // make all rows alternate background color for better readability
   Array.from(table.rows).forEach((tr) => {
       tr.classList.add('alternating');