From 53efc8551d8efe8de27b0048a350bc1538606092 Mon Sep 17 00:00:00 2001
From: Yaro Kasear <git@kasear.net>
Date: Thu, 2 Oct 2025 15:42:00 -0500
Subject: [PATCH] Updating notes support done!

---
 inventory/routes/entry.py               |  11 +--
 inventory/templates/inventory_note.html | 108 ++++++++++++++++++++++++
 inventory/templates/submit_button.html  |  16 ++--
 inventory/templates/update_list.html    |  10 +--
 4 files changed, 129 insertions(+), 16 deletions(-)
 create mode 100644 inventory/templates/inventory_note.html

diff --git a/inventory/routes/entry.py b/inventory/routes/entry.py
index aa8bad4..94b1890 100644
--- a/inventory/routes/entry.py
+++ b/inventory/routes/entry.py
@@ -48,7 +48,9 @@ def init_entry_routes(app):
                                 "device_type", "owner", "location", "condition", "image", "notes"]
             fields_spec = [
                 {"name": "label", "type": "display", "label": "", "row": "label",
-                 "attrs": {"class": "display-6 mb-3"}},
+                 "attrs": {"class": "display-6 mb-3"}, "wrap": {"class": "col"}},
+                {"name": "submit", "label": "", "row": "label", "type": "template", "template": "submit_button.html",
+                 "wrap": {"class": "col-auto text-end me-2"}, "attrs": {"data-model": model}},
                 {"name": "name", "row": "names", "label": "Name", "wrap": {"class": "col-3"},
                  "attrs": {"class": "form-control"}, "label_attrs": {"class": "form-label"}},
                 {"name": "serial", "row": "names", "label": "Serial #", "wrap": {"class": "col"},
@@ -72,12 +74,11 @@ def init_entry_routes(app):
                 {"name": "image", "label": "", "row": "image", "type": "template", "label_spec": "{filename}",
                  "template": "image_display.html", "attrs": {"class": "img-fluid img-thumbnail h-auto"},
                  "wrap": {"class": "h-100 w-100"}},
-                {"name": "notes", "type": "textarea", "label": "Notes", "row": "notes", "wrap": {"class": "col"},
-                 "attrs": {"class": "form-control", "rows": 10, "style": "resize: none;"},
-                 "label_attrs": {"class": "form-label"}},
+                {"name": "notes", "type": "template", "label": "Notes", "row": "notes", "wrap": {"class": "col"},
+                 "template": "inventory_note.html"},
             ]
             layout = [
-                {"name": "label", "order": 5},
+                {"name": "label", "order": 5, "attrs": {"class": "row align-items-center"}},
                 {"name": "kitchen_sink", "order": 6, "attrs": {"class": "row"}},
                 {"name": "everything", "order": 10, "attrs": {"class": "col"}, "parent": "kitchen_sink"},
                 {"name": "names", "order": 20, "attrs": {"class": "row"}, "parent": "everything"},
diff --git a/inventory/templates/inventory_note.html b/inventory/templates/inventory_note.html
new file mode 100644
index 0000000..22dab40
--- /dev/null
+++ b/inventory/templates/inventory_note.html
@@ -0,0 +1,108 @@
+<label class="form-label">Notes</label>
+<div class="d-flex justify-content-between align-items-start">
+    <div class="me-3 w-100" id="editContainer"></div>
+    <script type="application/json" id="noteContent">{{ field['template_ctx']['values']['notes'] | tojson }}</script>
+    <div class="form-check form-switch">
+        <input type="checkbox" class="form-check-input" id="editSwitch" onchange="changeMode()" role="switch"
+            aria-label="Edit mode switch for inventory notes.">
+        <label for="editSwitch" class="form-check-label">Edit</label>
+    </div>
+</div>
+
+<style>
+    textarea.auto-md {
+        box-sizing: border-box;
+        width: 100%;
+        max-height: 60vh;
+        overflow: hidden;
+        resize: vertical;
+    }
+
+    @supports (field-sizing: content) {
+        text-area.auto-md {
+            field-sizing: content;
+        }
+    }
+</style>
+
+<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/dompurify/dist/purify.min.js"></script>
+<script>
+    document.addEventListener('DOMContentLoaded', () => {
+        renderView(getMarkdown());
+    });
+
+    function getMarkdown() {
+        const el = document.getElementById('noteContent');
+        return el ? JSON.parse(el.textContent) : "";
+    }
+
+    function setMarkdown(md) {
+        const el = document.getElementById('noteContent');
+        if (el) el.textContent = JSON.stringify(md ?? "");
+    }
+
+    function renderView(md) {
+        const container = document.getElementById('editContainer');
+        if (!container) return;
+        const html = marked.parse(md || "");
+        container.innerHTML = DOMPurify.sanitize(html, { ADD_ATTR: ['target', 'rel'] });
+        for (const a of container.querySelectorAll('a[href]')) {
+            a.setAttribute('target', '_blank');
+            a.setAttribute('rel', 'noopener noreferrer nofollow');
+        }
+    }
+
+    function changeMode() {
+        const container = document.getElementById('editContainer');
+        const toggle = document.getElementById('editSwitch');
+        if (!toggle.checked) return renderView(getMarkdown());
+
+        const current = getMarkdown();
+        container.innerHTML = `
+            <textarea class="form-control w-100 auto-md" id="editor" name="notes">${escapeForTextarea(current)}</textarea>
+            <div class="mt-2 d-flex gap-2">
+                <button type="button" class="btn btn-primary btn-sm" onclick="saveEdit()">Save</button>
+                <button type="button" class="btn btn-secondary btn-sm" onclick="cancelEdit()">Cancel</button>
+                <button type="button" class="btn btn-outline-secondary btn-sm" onclick="togglePreview()">Preview</button>
+            </div>
+            <div class="mt-2 border rounded p-2 d-none" id="preview" aria-live="polite"></div>
+        `;
+        const ta = document.getElementById('editor');
+        autoGrow(ta);
+        ta.addEventListener('input', () => autoGrow(ta));
+    }
+
+    function saveEdit() {
+        const ta = document.getElementById('editor');
+        const value = ta ? ta.value : "";
+        setMarkdown(value);
+        renderView(value);
+        document.getElementById('editSwitch').checked = false;
+    }
+
+    function cancelEdit() {
+        document.getElementById('editSwitch').checked = false;
+        renderView(getMarkdown());
+    }
+
+    function togglePreview() {
+        const ta = document.getElementById('editor');
+        const preview = document.getElementById('preview');
+        preview.classList.toggle('d-none');
+        if (!preview.classList.contains('d-none')) {
+            const html = marked.parse(ta ? ta.value : "");
+            preview.innerHTML = DOMPurify.sanitize(html);
+        }
+    }
+
+    function autoGrow(ta) {
+        if (!ta) return;
+        ta.style.height = 'auto';
+        ta.style.height = ta.scrollHeight + 'px';
+    }
+
+    function escapeForTextarea(s) {
+        return (s ?? "").replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+    }
+</script>
\ No newline at end of file
diff --git a/inventory/templates/submit_button.html b/inventory/templates/submit_button.html
index 2d569b0..000bb62 100644
--- a/inventory/templates/submit_button.html
+++ b/inventory/templates/submit_button.html
@@ -39,6 +39,8 @@
             }
         });
 
+        console.log(out);
+
         return out;
     }
 
@@ -69,13 +71,15 @@
         const json = formToJson(e.target);
         json.id = {{ field['template_ctx']['values']['id'] }};
 
-        // map friendly names to real FK columns if needed
-        if (json.contact && !json.contact_id) json.contact_id = Number(json.contact) || null;
-        if (json.work_item && !json.work_item_id) json.work_item_id = Number(json.work_item) || null;
+        const model_name  = {{ field['attrs']['data-model'] | tojson }};
 
-        // child mutations
-        json.updates = collectEditedUpdates();
-        json.delete_update_ids = collectDeletedIds();
+        if(model_name === 'inventory') {
+            json.notes = getMarkdown().trim();
+        } else if (model_name === 'worklog') {
+            // child mutations
+            json.updates = collectEditedUpdates();
+            json.delete_update_ids = collectDeletedIds();
+        }
 
         try {
             const response = await fetch(
diff --git a/inventory/templates/update_list.html b/inventory/templates/update_list.html
index f3eb929..e9a2ab0 100644
--- a/inventory/templates/update_list.html
+++ b/inventory/templates/update_list.html
@@ -65,8 +65,8 @@
     const html = marked.parse(md || "");
     container.innerHTML = DOMPurify.sanitize(html, { ADD_ATTR: ['target','rel'] });
     for (const a of container.querySelectorAll('a[href]')) {
-      a.setAttribute('target','_blank');
-      a.setAttribute('rel','noopener noreferrer nofollow');
+      a.setAttribute('target', '_blank');
+      a.setAttribute('rel', 'noopener noreferrer nofollow');
     }
   }
 
@@ -79,9 +79,9 @@
     container.innerHTML = `
       <textarea class="form-control w-100 auto-md" id="editor${id}">${escapeForTextarea(current)}</textarea>
       <div class="mt-2 d-flex gap-2">
-        <button class="btn btn-primary btn-sm" onclick="saveEdit(${id})">Save</button>
-        <button class="btn btn-secondary btn-sm" onclick="cancelEdit(${id})">Cancel</button>
-        <button class="btn btn-outline-secondary btn-sm" onclick="togglePreview(${id})">Preview</button>
+        <button type="button" class="btn btn-primary btn-sm" onclick="saveEdit(${id})">Save</button>
+        <button type="button" class="btn btn-secondary btn-sm" onclick="cancelEdit(${id})">Cancel</button>
+        <button type="button" class="btn btn-outline-secondary btn-sm" onclick="togglePreview(${id})">Preview</button>
       </div>
       <div class="mt-2 border rounded p-2 d-none" id="preview${id}" aria-live="polite"></div>
     `;