[PW-11.6/ret] Add "highlighting" matches in table

Organiz "highlighting" of matches in tbl/cells (accord filter-inputs).

Worth noting:
  - thus improving the UX.

core: B-3 / JS-BL

Author: matowdev

core-courses/3-js-basic-level/11-server-async-await/11-6-pw-11-server-async-await/students-db-client/css/table.css

@@ -21,8 +21,35 @@
   color: var(--fire-red);
 }
 
+.dboard__table .dboard__table-body-empty-row td {
+  width: 100%;
+  /* height: 325px; */
+  font-size: 17px;
+  color: var(--bootstrap-red);
+  text-align: center;
+}
+
+#tableThTag {
+  width: 45px;
+}
+
+#tableThFIO {
+  width: 392px;
+}
+
+#tableThFaculty {
+  width: 301px;
+}
+
+#tableThBirthDate {
+  width: 278px;
+}
+
+#tableThStartYear {
+  width: 279px;
+}
+
 .dboard__table-body-cell_number {
-  min-width: 45px;
   min-height: 45px;
 }
 
@@ -40,3 +67,11 @@
   box-shadow: 0 0 0 0.25rem var(--bootstrap-red);
   opacity: 0.5;
 }
+
+/* media queries, any-hover */
+
+@media (max-width: 320px) {
+  .dboard__table .dboard__table-body-empty-row td {
+    font-size: 13px;
+  }
+}

core-courses/3-js-basic-level/11-server-async-await/11-6-pw-11-server-async-await/students-db-client/js/index.js

@@ -672,10 +672,10 @@
     const emptyTableTrRow = document.createElement('tr');
     const emptyTableTdCell = document.createElement('td');
 
+    emptyTableTrRow.classList.add('dboard__table-body-empty-row');
+
     emptyTableTdCell.colSpan = 5; // объединение всех колонок
     emptyTableTdCell.textContent = message;
-    emptyTableTdCell.style.color = '#e10c22';
-    emptyTableTdCell.style.textAlign = 'center';
     emptyTableTrRow.append(emptyTableTdCell);
 
     return emptyTableTrRow;
@@ -790,7 +790,6 @@
     if (updateStudentsDataArr.length > 0) {
       addStudentsToTable(updateStudentsDataArr); // отрисовка данных, наполнение таблицы студентов
     } else {
-      alert('Ошибка при загрузке данных с сервера!');
       tableBody.append(
         createEmptyTableMessageRow(
           'Нет данных! Запустите/перезапустите сервер!'
@@ -1445,6 +1444,12 @@
   function filterStudentsByFormInputs() {
     updateStudentsDataArr = correctInitArr(studentsDataArrWithIds); // обновление исходного массива, перед фильтрацией
 
+    // фиксация вводимых данных
+    let searchFIO = formFilterFIOInput.value.trim().toLowerCase();
+    let searchFaculty = formFilterFacultyInput.value.trim().toLowerCase();
+    let searchStartYear = formFilterStartYearInput.value.trim();
+    let searchEndYear = formFilterEndYearInput.value.trim();
+
     if (formFilterFIOInput.value.trim() !== '') {
       updateStudentsDataArr = updateStudentsDataArr.filter((student) =>
         student.fullName
@@ -1478,14 +1483,62 @@
     }
 
     addStudentsToTable(updateStudentsDataArr); // пере-рисовка (пере-компоновка) таблицы студентов согласно фильтраций
+    highlightStudentSearchMatches({
+      searchFIO,
+      searchFaculty,
+      searchStartYear,
+      searchEndYear,
+    }); // выделение совпадений (передача контекста)
   }
 
+  // отработка "дебаунс" задержки (если много данных, что бы снизить нагрузку)
+  let debounceTimer;
+
   allFormFilterInputs.forEach((input) => {
     input.addEventListener('input', () => {
-      filterStudentsByFormInputs();
+      clearTimeout(debounceTimer); // очистка предыдущей задержки
+      debounceTimer = setTimeout(filterStudentsByFormInputs, 600); // применение фильтрации не сразу
     });
   });
 
+  // ** организация выделения/подсветки совпадений в таблице (согласно вводимых данных в фильтрационные поля)
+  function highlightStudentSearchMatches(searchValues) {
+    const { searchFIO, searchFaculty, searchStartYear, searchEndYear } =
+      searchValues; // получение необходимых элементов/значений (через деструктуризациию входящего/передаваемого объекта)
+
+    const allRows = document.querySelectorAll('.dboard__table-body-row');
+
+    allRows.forEach((row) => {
+      // фиксация данных/ячеек с данными, для последующего сравнения (выделения в них совпадений)
+      let fioCell = row.children[1]; // ФИО
+      let facultyCell = row.children[2]; // факультет
+      let studyYearsCell = row.children[4]; // годы обучения (год начала и окончания)
+
+      // очистка предыдущих выделений (если были)
+      fioCell.innerHTML = fioCell.textContent;
+      facultyCell.innerHTML = facultyCell.textContent;
+      studyYearsCell.innerHTML = studyYearsCell.textContent;
+
+      // логика выделения/подсветки.. добавления background(a)
+      function highlightMatch(cell, searchValue) {
+        if (searchValue) {
+          const regex = new RegExp(`(${searchValue})`, 'gi');
+          cell.innerHTML = cell.textContent.replace(
+            regex,
+            // `<span style="padding: 1px 2px; color: #fff; background: #0d6efd;">$1</span>`
+            `<span style="color: #fff; box-shadow: inset 2em 2em #0d6efd;">$1</span>`
+          );
+        }
+      }
+
+      // инициализация выделений
+      highlightMatch(fioCell, searchFIO);
+      highlightMatch(facultyCell, searchFaculty);
+      highlightMatch(studyYearsCell, searchStartYear);
+      highlightMatch(studyYearsCell, searchEndYear);
+    });
+  }
+
   // ** очистка полей ввода, форм (через внутренние clear кнопки)
   const allClearBtn = document.querySelectorAll('.btn-clear');