diff --git a/inventory/static/js/widget.js b/inventory/static/js/widget.js index 2c7dc0b..bd2c239 100644 --- a/inventory/static/js/widget.js +++ b/inventory/static/js/widget.js @@ -53,6 +53,37 @@ function renderToast({ message, type = ToastConfig.defaultType, timeout = ToastC }); } +const EditorWidget = (() => { + let tempIdCounter = 1; + + function autoResizeTextarea(textarea) { + textarea.style.height = 'auto'; + textarea.style.height = `${textarea.scrollHeight + 2}px`; + } + + function createEditorWidget(template, id, timestamp, content = '') { + let html = template.innerHTML + .replace(/__ID__/g, id) + .replace(/__TIMESTAMP__/g, timestamp) + .replace(/__CONTENT__/g, content); + + const wrapper = document.createElement("div"); + wrapper.innerHTML = html; + + return wrapper.firstElementChild; + } + + function createTempId(prefix = "temp") { + return `${prefix}-${tempIdCounter++}`; + } + + return { + autoResizeTextarea, + createEditorWidget, + createTempId + }; +})(); + const ComboBoxWidget = (() => { let tempIdCounter = 1; diff --git a/inventory/templates/fragments/_editor_fragment.html b/inventory/templates/fragments/_editor_fragment.html new file mode 100644 index 0000000..3a58d7f --- /dev/null +++ b/inventory/templates/fragments/_editor_fragment.html @@ -0,0 +1,47 @@ +{% import "fragments/_icon_fragment.html" as icons %} + +{% macro render_editor(id, title, mode='edit', content=None) %} + +
+
+ +
+
+ +
+
+
+
+
+ + +{% endmacro %} \ No newline at end of file diff --git a/inventory/templates/layout.html b/inventory/templates/layout.html index 9c4ea7b..0902d5a 100644 --- a/inventory/templates/layout.html +++ b/inventory/templates/layout.html @@ -1,5 +1,6 @@ {% import "fragments/_breadcrumb_fragment.html" as breadcrumbs %} {% import "fragments/_combobox_fragment.html" as combos %} +{% import "fragments/_editor_fragment.html" as editor %} {% import "fragments/_icon_fragment.html" as icons %} {% import "fragments/_link_fragment.html" as links %} {% import "fragments/_table_fragment.html" as tables %} @@ -19,10 +20,13 @@ rel="stylesheet" integrity="sha384-gdnBcErvPbrURVoR9w3NhVMliw+ZmcTCmq+64xj2Ksx21nRJFX3qW0zFvBotL5rm" crossorigin="anonymous"> + @@ -53,7 +57,7 @@
- {% block content %}{% endblock %} + {% block content %}{% endblock %}
+ diff --git a/inventory/templates/worklog.html b/inventory/templates/worklog.html index c30d016..89e1acc 100644 --- a/inventory/templates/worklog.html +++ b/inventory/templates/worklog.html @@ -4,7 +4,7 @@ {% block title %}{{ title }}{% endblock %} {% block content %} - {% endblock %} {% block script %} @@ -137,6 +128,7 @@ if (addUpdateButton) { addUpdateButton.addEventListener("click", (e) => { + {# const row = document.createElement("div"); row.classList.add("row"); @@ -159,14 +151,21 @@ updateContent.dataset.noteId = ""; updateContent.name = "updateNew"; + // Hook in auto-resize + updateContent.addEventListener("input", () => autoResizeTextarea(updateContent)); + autoResizeTextarea(updateContent); + // Stitch it all together igroup.appendChild(ts); igroup.appendChild(updateContent); col.appendChild(igroup); row.appendChild(col); + #} + const template = document.getElementById("editor-template"); + const newEditor = EditorWidget.createEditorWidget(template, EditorWidget.createTempId("new"), formatDate(new Date())); const updatesContainer = document.getElementById("updates-container"); - updatesContainer.appendChild(row); + updatesContainer.appendChild(newEditor); }); }