Refactor icon rendering; update render_icon macro to accept extra_class parameter and adjust button icons in combobox for better state management

models/inventory.py

@@ -2,12 +2,10 @@ from typing import Any, List, Optional, TYPE_CHECKING
 if TYPE_CHECKING:
     from .brands import Brand 
     from .items import Item
-    from .users import User
     from .work_log import WorkLog  
     from .rooms import Room
 
-from sqlalchemy import Boolean, ForeignKeyConstraint, ForeignKey, Identity, Index, Integer, PrimaryKeyConstraint, String, Unicode, DateTime, text
-from sqlalchemy.dialects.mssql import DATETIME2, MONEY
+from sqlalchemy import Boolean, ForeignKey, Identity, Index, Integer, Unicode, DateTime, text
 from sqlalchemy.orm import Mapped, mapped_column, relationship
 import datetime
 

static/js/widget.js

@@ -15,7 +15,15 @@ const ComboBoxWidget = (() => {
         }
 
         function updateAddButtonIcon() {
-            addBtn.innerHTML = currentlyEditing ? icons.edit : icons.add;
+            const iconEl = addBtn.querySelector('.icon-state');
+
+            const iconClass = currentlyEditing ? 'bi-pencil' : 'bi-plus-lg';
+            iconEl.classList.forEach(cls => {
+                if (cls.startsWith('bi-') && cls !== 'icon-state') {
+                    iconEl.classList.remove(cls);
+                }
+            });
+            iconEl.classList.add(iconClass);
         }
 
         input.addEventListener('input', () => {
@@ -96,13 +104,6 @@ const ComboBoxWidget = (() => {
         }
     }
 
-    function sortOptions(selectElement) {
-        const sorted = Array.from(selectElement.options)
-            .sort((a, b) => a.text.localeCompare(b.text));
-        selectElement.innerHTML = '';
-        sorted.forEach(option => selectElement.appendChild(option));
-    }
-
     return {
         initComboBox
     };

templates/fragments/_combobox_fragment.html

@@ -8,7 +8,7 @@
         <div class="input-group">
             <input type="text" class="form-control rounded-bottom-0" id="{{ id }}-input"{% if placeholder %} placeholder="{{ placeholder }}"{% endif %}>
             <button type="button" class="btn btn-primary rounded-bottom-0" id="{{ id }}-add" disabled>
-                {{ icons.render_icon('plus-lg', 16) }}
+                {{ icons.render_icon('plus-lg', 16, 'icon-state') }}
             </button>
             <button type="button" class="btn btn-danger rounded-bottom-0" id="{{ id }}-remove" disabled>
                 {{ icons.render_icon('dash-lg', 16) }}

templates/fragments/_icon_fragment.html

@@ -1,4 +1,4 @@
 
-{% macro render_icon(icon, size=24) %}
-    <i class="bi bi-{{ icon }}" style="font-size: {{ size }}px;"></i>
+{% macro render_icon(icon, size=24, extra_class='') %}
+    <i class="bi bi-{{ icon }} {{ extra_class }}" style="font-size: {{ size }}px;"></i>
 {% endmacro  %}

templates/settings.html

@@ -72,10 +72,3 @@
     </div>
 </form>
 {% endblock %}
-
-{% block script %}
-    const icons = {
-        add: `{{ icons.render_icon('plus', 16)|safe }}`,
-        edit: `{{ icons.render_icon('pencil', 16)|safe }}`,
-    };
-{% endblock %}