Цель
Создать интерфейс на JavaScript, который подключается к Directus API, загружает данные из двух коллекций, определяет типы полей и отрисовывает HTML форму. Поля отображаются с учётом типа: текст — обычный input или редакторы, изображения — через загрузчик, логика сохранения — одной кнопкой для обеих коллекций
Функционал
Подключение к API
Поддержка REST или GraphQL (по выбору). Авторизация — через токен или логин/пароль. Получение метаданных полей для двух коллекций из config.collections.
Форма
По каждой коллекции генерируются поля:
– text: если название содержит content, html, description — использовать wysiwyg (Summernote), если code, css, js — Code editor (CodeMirror). Остальные — input/textarea.
– image/file: загрузчик с preview и загрузкой на /files, запись id в поле.
– boolean: checkbox.
– number: input с типом number.
– date: input типа date или datetime-local.
Редакторы
Подключаются динамически, в зависимости от имени поля.
Загрузка изображений
Файл отправляется на Directus /files, ответ вставляется в поле.
Сохранение
Сбор данных с двух форм, отправка PATCH или POST в /items/{collection}. Обработка ошибок и уведомление об успехе.
Кодовая структура
Файлы:
– api.js: работа с API
– formRenderer.js: генерация полей
– editors.js: подключение редакторов
– main.js: инициализация
UI/UX
Одностраничный интерфейс. Поддержка Bootstrap или TailwindCSS. Уведомления, валидация, ошибки.
Расширяемость
Поддержка добавления коллекций, локализации.
Пишите стоимость ваших работ и сроки
