Grid Form

Назначение и границы

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

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

• Восемь исходных записей синтетические. Данные живут в памяти вкладки; серверная БД не нужна.
• Проект сохранён на Angular 11: демонстрирует исходную архитектуру, а не современный стандарт Angular.
• Таблица на узком экране прокручивается горизонтально; число записей ограничено 120.

Архитектура и схемы

• Описание полей отделено от данных таблицы.
• Модальная форма работает с копией записи; сохранение применяется явно.
• Локальный seed и ограничение числа записей делают публичный пример воспроизводимым.

Code-map: от функции к коду

Карта привязана к версии c3cf947c9d63. Она помогает проследить изменение через интерфейс, API, модуль, данные и проверку.

Как работать с картой

1. Перед изменением найти функцию и пройти связи до API, состояния и хранилища.
2. Проверить входы, ошибки, повторные события и зависимые сценарии.
3. После изменения обновить карту и затронутые схемы вместе с кодом.
4. Выполнить связанные проверки и привязать новые материалы к версии исходников.

Сценарии и API

1. Откройте конфигурационную таблицу и сравните две формы.
2. Заполните обязательные поля и добавьте девятую запись.
3. Измените строку в модальном окне, затем проверьте отмену изменения.
4. Отмените удаление, подтвердите удаление и сбросьте таблицу к восьми строкам.

Проверка опубликованной версии

• 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; обратная миграция БД не выполнялась.

Стек

Материалы и исходники

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