# Grid Form

Небольшой Angular-проект с конфигурируемой таблицей, формами и модальными окнами. Один набор полей связывает просмотр и редактирование записей.

Статус: passed

Версия: `c3cf947c9d630401bb9cfd1e5af9a577e111d2fc`. История кода начинается в январе 2021. Обновление публичного демо: 7 сентября 2026.

## Задача

Повторяющиеся административные формы требуют согласованного описания колонок, значений и правил ввода.

## Аудитория

Разработчики административных интерфейсов и операторских форм.

## Личный вклад

- Конфигурируемые grid/form-компоненты и модальное редактирование.

- Связь операций создания, изменения и удаления со стабильными идентификаторами.

- Для демо исправлены отмена редактирования, обязательные поля, мобильные действия и сброс.

## Решения

- Описание полей отделено от данных таблицы.

- Модальная форма работает с копией записи; сохранение применяется явно.

- Локальный seed и ограничение числа записей делают публичный пример воспроизводимым.

## Границы и ограничения

- Восемь исходных записей синтетические. Данные живут в памяти вкладки; серверная БД не нужна.

- Проект сохранён на Angular 11: демонстрирует исходную архитектуру, а не современный стандарт Angular.

- Таблица на узком экране прокручивается горизонтально; число записей ограничено 120.

## Что попробовать

- Откройте конфигурационную таблицу и сравните две формы.

- Заполните обязательные поля и добавьте девятую запись.

- Измените строку в модальном окне, затем проверьте отмену изменения.

- Отмените удаление, подтвердите удаление и сбросьте таблицу к восьми строкам.

## Проверки

- Create 8 → 9 records

- Modal update persisted

- Cancel deletion preserves record

- Confirmed deletion 9 → 8

- Reset restores one table and 8 seed records

- 390px viewport: no document overflow; horizontal table scrolling

- Подтверждённого GitHub CI для этого SHA нет; перечислены выполненные локальные проверки и сценарии опубликованной версии. Исторические CI-ссылки, если есть, отмечены отдельно.

## Результаты

- Сохранено 12 содержательных кадров фактического интерфейса.

- Дата, сценарий и версия указаны у каждого кадра.

- Отдельного backend-процесса на VPS нет: Nginx раздаёт статику. Ресурсы общего Nginx нельзя честно приписать одному сайту.

- Измерено 6 повторений сценария; медиана 978.5 мс, максимум 3471 мс. Время включает браузер и HTTPS; методика и ограничения приложены.

## Запуск и эксплуатация

- Это автономный браузерный пример: цепочка интерфейс → конфигурация → локальная модель показана без искусственно добавленного backend.

- Сборка закреплённой версии выполняется Docker вне VPS. Готовая статика размещается в /srv/portfolio/grid/releases; current выбирает опубликованный релиз.

- После изменения конфигурации проверять обе формы, модальное сохранение/отмену и операции по ID. Простое обновление страницы должно возвращать синтетический набор; отдельные вкладки не разделяют изменения.

- Общие правила эксплуатации: готовые файлы и закреплённые образы собираются вне VPS; секреты не входят в артефакты. Общесерверный docker prune не применяется. Логи backend ограничены ротацией, изменения log options требуют пересоздания контейнера.

- Перед изменением пройти code-map от функции к экрану/API, модулю и данным. После изменения обновить карту и схемы, выполнить связанные сценарии, включая ошибку, повтор и сброс. Источник истины — конкретная версия кода, а не старая диаграмма.

- Откат проверен 2026-09-07T00:59:38.609298+00:00: 20260907-verified → 20260907c → 20260907-verified. После каждого переключения подтверждены HTTPS, readiness и SHA. Это проверка конфигурации и артефактов на одном проверенном SHA; обратная миграция БД не выполнялась.

## Стек и роль

- **Angular / TypeScript**: Компоненты таблицы, формы, модальные события и типы конфигурации.
- **Angular Forms / ngModel**: Двустороннее связывание полей и обязательная валидация.
- **SCSS**: Общее оформление контролов, табличный скролл и мобильные действия.

## Code-map

|Функция|Экран / API|Модуль|Данные / проверка|
|---|---|---|---|
|Конфигурация|Главный экран|views/home/home.component; types|описание полей; production build|
|Таблица|Grid|modules/grid|ID строки; add/update/delete QA|
|Редактирование|Modal|modules/modal/services/modal.service|копия записи; cancel сохраняет оригинал|
|Валидация|Формы|модули форм и конфигурация полей|required; добавление недоступно при пустых полях|
|Сброс|Демо-кнопка|providers/app.provider|восемь seed-строк; browser QA|

## Схемы

- Компоненты опубликованного демо — `diagrams/components.mmd`
- Основной сценарий — `diagrams/scenario.mmd`
- Размещение опубликованной версии — `diagrams/deployment.mmd`

## Индекс изображений

- 01-overview: Конфигурационная таблица и две синхронные формы; 2026-09-06T22:22:33.984Z; SHA c3cf947c9d630401bb9cfd1e5af9a577e111d2fc
- 02-required-fields: Пустая форма: добавление недоступно; 2026-09-06T22:22:34.049Z; SHA c3cf947c9d630401bb9cfd1e5af9a577e111d2fc
- 03-filled-form: Заполненная форма и синхронизация ввода; 2026-09-06T22:22:34.201Z; SHA c3cf947c9d630401bb9cfd1e5af9a577e111d2fc
- 04-added-row: Новая запись в таблице; 2026-09-06T22:22:34.313Z; SHA c3cf947c9d630401bb9cfd1e5af9a577e111d2fc
- 05-edit-modal: Редактирование в модальном окне; 2026-09-06T22:22:34.430Z; SHA c3cf947c9d630401bb9cfd1e5af9a577e111d2fc
- 06-updated-row: Результат сохранения; 2026-09-06T22:22:34.565Z; SHA c3cf947c9d630401bb9cfd1e5af9a577e111d2fc
- 07-delete-confirm: Подтверждение удаления; 2026-09-06T22:22:34.647Z; SHA c3cf947c9d630401bb9cfd1e5af9a577e111d2fc
- 08-two-tables: Независимая копия таблицы; 2026-09-06T22:22:34.929Z; SHA c3cf947c9d630401bb9cfd1e5af9a577e111d2fc
- 09-reset: Восстановленный исходный набор; 2026-09-06T22:22:35.149Z; SHA c3cf947c9d630401bb9cfd1e5af9a577e111d2fc
- 10-mobile: Мобильный вид: обзор и форма; 2026-09-06T22:22:35.185Z; SHA c3cf947c9d630401bb9cfd1e5af9a577e111d2fc
- 11-mobile-table: Мобильная таблица с горизонтальной прокруткой; 2026-09-06T22:22:35.253Z; SHA c3cf947c9d630401bb9cfd1e5af9a577e111d2fc
- 12-mobile-actions: Кнопки редактирования доступны после прокрутки таблицы; 2026-09-06T22:22:35.286Z; SHA c3cf947c9d630401bb9cfd1e5af9a577e111d2fc