Тестовое задание Nuxt4 DNS

Установка

1. установка зависимостей внутри проекта выволните команду

npm install 

2. запуска в отладочном режиме

npm run dev

⚙️ 3. Структура интерфейса

🏠 3.1. Главная страница /

Элементы интерфейса:

• Левое навигационное меню (отображается только на определённых страницах).
  ▫ Возможность сворачивания/разворачивания по клику на кнопку.
• Таблица заявок, содержащая следующие колонки:
  • Номер
  • Статус
  • Результат проверки
  • Дата создания
  • Действие (кнопки управления)

Для каждой строки отображаются две кнопки:

• 📝 Редактировать — переход на страницу /edit?id=<id>.
• 📤 Отправить — отправка данных на сервер.

Логика отображения кнопок:

• Если в localStorage есть данные по заявке — отображается кнопка «Отправить».
• Если данных нет — «Редактировать».

---

✏️ 3.2. Страница редактирования /edit

Элементы интерфейса:

• Заголовок страницы
• Список товаров (запрашивается с сервера с задержкой 2 с)
• Каждая позиция содержит поля:
  • Название — readonly
  • Количество — input (редактируемое поле)
  • Цена — input (редактируемое поле)
  • Цвет — select (с ограниченным набором опций)

Требования к загрузке данных:

• При первом открытии страницы выполняется запрос к /api/products с задержкой 2 секунды.
• После получения данных — сохранение в localStorage.
• При повторном открытии данные берутся из localStorage, без запроса к серверу.

Валидация при сохранении:

• Поля input принимают только цифры и точку — ^\d+(\.\d+)?$.
• Поля select принимают только допустимые опции.
• Проверка выполняется после нажатия кнопки «Сохранить».
• При ошибке — поля подсвечиваются (border-red).
• Если все поля валидны:
  • данные сохраняются в localStorage;
  • выполняется переход обратно на страницу /.

---

📤 3.3. Отправка данных

• При нажатии кнопки «Отправить» на главной странице:
  1. данные заявки отправляются на сервер — POST /api/send;
  2. после успешного ответа localStorage очищается;
  3. таблица обновляется, статусы сбрасываются.