Модуль 5 · урок 10 з 10
Практика модуля
Практика модуля: повноцінний екран списку на даних із модуля 4. Це найпомітніша частина всього проєкту — саме її лід відкриє першою, і саме на ній перевіряються одразу чотири попередні модулі.
КРОК 1Стан таблиці
Опиши TableState одним інтерфейсом: сторінка, розмір, масив сортування,
пошук, фільтри. Заведи його в сторі одним BehaviorSubject, а не трьома.
Усі зміни — через методи, і в кожному, що стосується фільтрів, обовʼязково
page: 1.
КРОК 2Чиста функція applyState
Винеси всю логіку в окремий файл: фільтр → сортування → зріз сторінки, саме в такому
порядку, з поверненням { items, total }. Жодного Angular усередині —
у модулі 8 ти протестуєш цю функцію першою.
КРОК 3Компаратор
Реалізуй багатоколонкове сортування: масив ключів, localeCompare для рядків,
порожні значення завжди в кінець, стабільність при рівності. У шапці — цикл
asc → desc → без сортування, Shift+клік для додавання колонки
й видимий порядковий номер.
КРОК 4Пошук і фільтри
Поле пошуку з debounceTime(300) і distinctUntilChanged.
Нормалізація рядка, пошук по кількох полях, усі слова в будь-якому порядку.
Плюс два-три фільтри-селекти. Стан фільтрів клади в query-параметри
з replaceUrl: true.
КРОК 5Пагінація
MatPaginator із вибором розміру сторінки. Перевір найважливіше:
total показує кількість знайдених, а не всіх рядків, і при зміні
фільтра сторінка скидається на першу.
КРОК 6Вибір і масові дії
Чекбокси в рядках і в шапці з проміжним станом. Чекбокс шапки вибирає лише поточну
сторінку; окремою смугою — пропозиція вибрати всі знайдені. Хоча б одна масова дія
через concatMap. Зберігай id, не обʼєкти.
КРОК 7Типізація
Опиши Column<T> з keyof T. Перевір, що друкарська помилка
в назві поля дає помилку компіляції. Додай хоча б одну обчислювану колонку через
розрізнюваний union.
КРОК 8Продуктивність і стани
trackBy, OnPush, нуль викликів методів у шаблоні.
Три стани: скелетон під час завантаження, «нічого не знайдено» з кнопкою скидання фільтрів,
«ще немає записів» з кнопкою створення. Запиши профіль до й після — як у модулі 3.
- Багатоколонкове сортування працює, пріоритет колонок видно в шапці.
- Пошук із затримкою, нормалізацією й пошуком по кількох полях.
- Пагінація клієнтська;
total— це кількість знайдених. - При зміні будь-якого фільтра сторінка скидається на першу.
- Вибір рядків із проміжним станом шапки; масові дії не скасовують одна одну.
- Колонки типізовані через
keyof; неіснуюче поле не компілюється. - 800+ рядків моків, таблиця не лагає, у шаблоні немає викликів методів.
- Є всі стани: завантаження, порожньо, нічого не знайдено, помилка.
Що сказати ліду на демо
«Стан таблиці — один обʼєкт: сторінка, сортування, фільтри. Вся логіка в чистій функції
applyState: фільтр, потім сортування, потім зріз — саме в цьому порядку,
інакше total брехав би. Сортування багатоколонкове, компаратор іде масивом
ключів, рядки через localeCompare з українською локаллю, порожні значення
завжди в кінці. Колонки типізовані через keyof Task, тож помилка в назві поля
не компілюється. Чекбокс у шапці вибирає сторінку, а не весь набір — інакше масове
видалення зачепило б те, чого користувач не бачив. І trackBy з OnPush:
ось профіль, при зміні одного рядка перемальовується саме він.»
Далі — модуль 6. Форми: створення й редагування записів у модалці, типізовані реактивні форми, кастомні та асинхронні валідатори. Таблиця отримає кнопки «Створити» і «Змінити», і застосунок стане повноцінним CRUD.