v0.5.108: фикс inline-редактирования — innerHTML вместо show/hide

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ipwhitelist",
-  "version": "0.5.107",
+  "version": "0.5.108",
   "description": "IP WhiteList microservice for cloud provider",
   "main": "server.js",
   "scripts": {

v2/src/config/index.js

@@ -9,7 +9,7 @@
 // ═══════════════════════════════════════════════════════════════════════════════
 
 module.exports = {
-  version: '0.5.104',
+  version: '0.5.105',
 
   // ── IAM ──────────────────────────────────────────────────────────────────
   iamUrl: process.env.V2_IAM_URL || 'https://auth-api.ngcloud.ru/api/v1/auth/user',

views/v2/user.ejs

@@ -220,29 +220,17 @@
         </thead>
         <tbody>
           <% entries.forEach(function(e) { %>
-          <tr id="row-<%= e.id %>" style="<%= e.deleted_at ? 'opacity:.5;text-decoration:line-through;' : '' %>">
+          <tr id="row-<%= e.id %>" data-cidr="<%= e.value_cidr %>" data-comment="<%= e.comment || '' %>" style="<%= e.deleted_at ? 'opacity:.5;text-decoration:line-through;' : '' %>">
-            <td>
+            <td id="cell-cidr-<%= e.id %>"><code><%= e.value_cidr %></code><% if (e.deleted_at) { %> <span style="font-size:.7rem;color:var(--red);">удалена</span><% } %></td>
-              <span class="view"><code><%= e.value_cidr %></code><% if (e.deleted_at) { %> <span style="font-size:.7rem;color:var(--red);">удалена</span><% } %></span>
+            <td id="cell-comment-<%= e.id %>"><%= e.comment || '—' %></td>
-              <input class="edit" type="text" name="cidr" value="<%= e.value_cidr %>" size="18" style="display:none;padding:.3rem .5rem;border:1px solid var(--blue);border-radius:4px;font-size:.82rem;">
-            </td>
-            <td>
-              <span class="view"><%= e.comment || '—' %></span>
-              <input class="edit" type="text" name="comment" value="<%= e.comment || '' %>" size="20" style="display:none;padding:.3rem .5rem;border:1px solid var(--blue);border-radius:4px;font-size:.82rem;">
-            </td>
             <td><%= e.created_by %></td>
             <td><%= new Date(e.created_at).toLocaleString('ru') %></td>
-            <td style="text-align:center;white-space:nowrap;">
+            <td id="cell-actions-<%= e.id %>" style="text-align:center;white-space:nowrap;">
               <% if (!e.deleted_at) { %>
-                <span class="view">
+                <button class="btn btn-sm" onclick="editRow(<%= e.id %>)" title="Редактировать">✏️</button>
-                  <button class="btn btn-sm" onclick="editRow(<%= e.id %>)" title="Редактировать">✏️</button>
+                <form method="POST" action="/v2/app/delete/<%= e.id %>" style="display:inline;">
-                  <form method="POST" action="/v2/app/delete/<%= e.id %>" style="display:inline;">
+                  <button class="btn btn-sm btn-danger" onclick="return confirm('Удалить?')" title="Удалить">🗑️</button>
-                    <button class="btn btn-sm btn-danger" onclick="return confirm('Удалить?')" title="Удалить">🗑️</button>
+                </form>
-                  </form>
-                </span>
-                <span class="edit" style="display:none;">
-                  <button class="btn btn-sm btn-primary" onclick="saveRow(<%= e.id %>)" title="Сохранить">✓</button>
-                  <button class="btn btn-sm" onclick="cancelEdit(<%= e.id %>)" title="Отмена">✕</button>
-                </span>
               <% } %>
             </td>
           </tr>
@@ -258,21 +246,38 @@
 <script>
 function editRow(id) {
   var row = document.getElementById('row-' + id);
-  row.querySelectorAll('.view').forEach(function(el) { el.style.display = 'none'; });
+  var cidr = row.getAttribute('data-cidr');
-  row.querySelectorAll('.edit').forEach(function(el) { el.style.display = ''; });
+  var comment = row.getAttribute('data-comment');
-  row.querySelector('input[name="cidr"]').focus();
+
+  document.getElementById('cell-cidr-' + id).innerHTML =
+    '<input type="text" id="inp-cidr-' + id + '" value="' + escHtml(cidr) + '" size="18" style="padding:.3rem .5rem;border:1px solid var(--blue);border-radius:4px;font-size:.82rem;">';
+  document.getElementById('cell-comment-' + id).innerHTML =
+    '<input type="text" id="inp-comment-' + id + '" value="' + escHtml(comment) + '" size="20" style="padding:.3rem .5rem;border:1px solid var(--blue);border-radius:4px;font-size:.82rem;">';
+  document.getElementById('cell-actions-' + id).innerHTML =
+    '<button class="btn btn-sm btn-primary" onclick="saveRow(' + id + ')" title="Сохранить">✓</button> ' +
+    '<button class="btn btn-sm" onclick="cancelEdit(' + id + ')" title="Отмена">✕</button>';
+
+  setTimeout(function() {
+    var inp = document.getElementById('inp-cidr-' + id);
+    if (inp) inp.focus();
+  }, 0);
 }
 
 function cancelEdit(id) {
   var row = document.getElementById('row-' + id);
-  row.querySelectorAll('.view').forEach(function(el) { el.style.display = ''; });
+  document.getElementById('cell-cidr-' + id).innerHTML =
-  row.querySelectorAll('.edit').forEach(function(el) { el.style.display = 'none'; });
+    '<code>' + escHtml(row.getAttribute('data-cidr')) + '</code>';
+  document.getElementById('cell-comment-' + id).innerHTML =
+    row.getAttribute('data-comment') || '—';
+  document.getElementById('cell-actions-' + id).innerHTML =
+    '<button class="btn btn-sm" onclick="editRow(' + id + ')" title="Редактировать">✏️</button> ' +
+    '<form method="POST" action="/v2/app/delete/' + id + '" style="display:inline;">' +
+    '<button class="btn btn-sm btn-danger" onclick="return confirm(\'Удалить?\')" title="Удалить">🗑️</button></form>';
 }
 
 function saveRow(id) {
-  var row = document.getElementById('row-' + id);
+  var cidr = document.getElementById('inp-cidr-' + id).value;
-  var cidr = row.querySelector('input[name="cidr"]').value;
+  var comment = document.getElementById('inp-comment-' + id).value;
-  var comment = row.querySelector('input[name="comment"]').value;
   var form = document.createElement('form');
   form.method = 'POST';
   form.action = '/v2/app/edit/' + id;
@@ -282,6 +287,10 @@ function saveRow(id) {
   document.body.appendChild(form);
   form.submit();
 }
+
+function escHtml(s) {
+  return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
 </script>
 
 <footer style="text-align:right;padding:.5rem 1.5rem;font-size:.72rem;color:var(--muted);">v<%= version %></footer>