From baf06fb02f3b2619697c5cc4512c3608243298ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=98=D0=B3=D0=BE=D1=80=D1=8C=20=D0=9D=D0=B0=D0=B4=D0=B5?=
 =?UTF-8?q?=D0=B8=D0=BD?= <igor_26reg@mail.ru>
Date: Tue, 28 Oct 2025 08:43:57 +0300
Subject: [PATCH] refactor: use ListFilter component in employees list template
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replaced custom applyFilter() function in employees_list.html with ListFilter component
- Reduced code from 16 lines to 11 lines (more declarative)
- Benefits:
  * Uses shared, tested ListFilter component
  * Automatic debouncing (300ms)
  * Cleaner, more maintainable code
  * Consistent filtering behavior across app

Analysis of other applyFilter() usage:
- department_scripts.html (2 instances): Complex logic with item selection, form interaction - kept as-is
- search/results.html: Multi-section filtering with radio buttons - kept as-is
- document_list.html: Array filtering, not DOM filtering - kept as-is

ListFilter component is ready for use in new features and templates.

Tests: All 17 tests passing ✅
---
 .../templates/employees/employees_list.html   | 29 ++++++++-----------
 1 file changed, 12 insertions(+), 17 deletions(-)

diff --git a/backend/templates/employees/employees_list.html b/backend/templates/employees/employees_list.html
index b9cb3af4..bc571e01 100644
--- a/backend/templates/employees/employees_list.html
+++ b/backend/templates/employees/employees_list.html
@@ -238,22 +238,17 @@
   </div>
 </div>
 
-<script>
-  (function () {
-    const input = document.getElementById('empFilter');
-    const clearBtn = document.querySelector('.ios-search-clear');
-    const list = document.getElementById('empList');
-
-    function applyFilter(){
-      const q = (input?.value || '').trim().toLowerCase();
-      list.querySelectorAll('.emp-row').forEach(row => {
-        const hay = [(row.dataset.name||''), (row.dataset.depts||'')].join(' ').toLowerCase();
-        row.style.display = (!q || hay.includes(q)) ? '' : 'none';
-      });
-    }
-    input?.addEventListener('input', applyFilter);
-    clearBtn?.addEventListener('click', () => { input.value=''; input.focus(); input.dispatchEvent(new Event('input')); });
-    applyFilter();
-  })();
+<script type="module">
+  import { ListFilter, createDataAttrMatcher } from '{% static "js/components/listFilter.js" %}';
+  
+  // Используем ListFilter вместо кастомной функции applyFilter()
+  new ListFilter({
+    listSelector: '#empList',
+    itemSelector: '.emp-row',
+    searchInputSelector: '#empFilter',
+    clearButtonSelector: '.ios-search-clear',
+    matchFn: createDataAttrMatcher(['name', 'depts']),
+    debounceMs: 300
+  });
 </script>
 {% endblock %}