[PRAC/cont] Add logic to create "empty" table row

Creating "empty" row/msg for clients table (at/for filtering, etc).

Worth noting:
  - and a few corrections in the CSS.

core: B-3 / JS-BL

Author: matowdev

core-courses/3-js-basic-level/practicum-js-basic-level/sb-crm-client/css/crm-output.css

@@ -54,20 +54,21 @@
 
 .crm__output-table tr th,
 .crm__output-table tr td {
-  /* line-height: 32px;
+  line-height: 32px;
   text-align: center;
   vertical-align: middle;
-  color: var(--starry-night); */
+  color: var(--black);
   cursor: pointer;
 }
 
 .crm__output-table .crm__output-table-head-cell {
   padding: 8px 10px;
+  text-align: start;
 }
 
 .crm__output-table #table-th-id {
   padding-left: 20px;
-  width: 70px;
+  width: 80px;
   font-weight: var(--semi-bold);
   color: var(--text-gray);
 }
@@ -85,6 +86,7 @@
 }
 
 .crm__output-table #table-th-contact {
+  padding-left: 20px;
   width: 145px;
   cursor: default;
 }

core-courses/3-js-basic-level/practicum-js-basic-level/sb-crm-client/js/index.js

@@ -249,9 +249,7 @@
       const data = await response.json(); // преобразование данных в JSON-формат
       clientsDataArrWithIds = addLocalIdsToClients(data); // добавление поля localId
 
-      // ! ТЕСТИРОВАНИЕ
-      // addClientsToTable(clientsDataArrWithIds); // отрисовка данных, наполнение таблицы клиентов
-      // console.log(clientsDataArrWithIds); // ? ВЫВОД МАССИВА ОБЪЕКТОВ
+      addClientsToTable(clientsDataArrWithIds); // отрисовка данных, наполнение таблицы клиентов
     } catch (error) {
       console.error('Не удалось загрузить список клиентов..', error);
       alert('Ошибка при загрузке данных с сервера!?');
@@ -277,11 +275,8 @@
 
     outTableBody.innerHTML = ''; // предварительная очистка таблицы
     updateClientsDataArr = correctInitArr(clientsServerData);
-    // ! ТЕСТИРОВАНИЕ
-    // console.log(updateClientsDataArr); // ? ВЫВОД МАССИВА ОБЪЕКТОВ
 
     if (updateClientsDataArr.length === 0) {
-      // TODO:
       const emptyTableRow = createEmptyTableMessageRow(); // если массив клиентов/таблица данных пуста, вывод сообщения
       outTableBody.append(emptyTableRow);
     } else {
@@ -333,6 +328,23 @@
     return new Date(dateString); // возврат "полноценного" объекта Date
   }
 
+  // ** создание "пустой" строки для таблицы клиентов (при/для фильтрации, пустом массиве)
+  function createEmptyTableMessageRow() {
+    const emptyTableTrRow = document.createElement('tr');
+    const emptyTableTdCell = document.createElement('td');
+
+    emptyTableTdCell.colSpan = 6; // объединение всех колонок
+    emptyTableTdCell.textContent =
+      'Пусто.. измените фильтрацию, добавьте клиента!?';
+    emptyTableTdCell.style.fontWeight = '500';
+    emptyTableTdCell.style.fontSize = '16px';
+    emptyTableTdCell.style.color = '#dc3545';
+    emptyTableTdCell.style.textAlign = 'center';
+    emptyTableTrRow.append(emptyTableTdCell);
+
+    return emptyTableTrRow;
+  }
+
   // ** изменение направления стрелки/svg-icon, согласно прожатия по заглавной ячейке (при сортировке данных)
   const allHeaderRowCells = document.querySelectorAll(
     '.crm__output-table-head-cell'