Динамическая форма JS + Directus API, редакторы, файлы

Цель
Создать динамический интерфейс на JavaScript, который:

Загружает данные из двух коллекций Directus.

Автоматически определяет типы полей и отрисовывает соответствующие элементы формы.

Поддерживает загрузку изображений, текстовые редакторы (wysiwyg или code editor) в зависимости от названия поля.

Сохраняет данные обратно в обе коллекции одной кнопкой.

Требования к функционалу
1. Инициализация и подключение к API
Использовать REST API или GraphQL Directus (по договорённости).

Авторизация — через токен или логин/пароль (реализовать в конфиге).

Получить метаданные полей (описания схемы) для двух коллекций.

2. Отображение формы
Для каждой коллекции:

Получить список полей.

Для каждого поля сгенерировать соответствующий HTML-инпут:

text / string:

Если в названии поля есть content, html, description — использовать WYSIWYG редактор (Summernote или аналог).

Если в названии поля есть code, css, js, script — использовать Code editor (CodeMirror или аналог).

Остальные — обычный input[type="text"] или textarea.

image / file:

Отрисовать загрузчик изображений (drag’n’drop + preview).

boolean: переключатель (checkbox).

number: input[type="number"].

date/datetime: input[type="date" | "datetime-local"].

3. Редакторы
WYSIWYG: Summernote или аналог.

Code editor: CodeMirror (или аналог).

Подключение редактора должно происходить динамически, по названию поля.

4. Загрузка изображений
При выборе изображения — отправка файла через Directus /files endpoint.

После загрузки — вставка id файла в соответствующее поле.

5. Сохранение данных
Все данные из форм двух коллекций собираются при нажатии на кнопку «Сохранить».

Отправить PATCH или POST (в зависимости от режима) по /items/{collection} для каждой коллекции.

Обработка ошибок и отображение успешного результата.

6. Структура кода
Разделить JS на модули:

API взаимодействие (api.js)

Отрисовка полей (formRenderer.js)

Работа с редакторами (editors.js)

Основной инициализатор (main.js)

7. UI/UX
Интерфейс одностраничный.

Возможна работа с Bootstrap или TailwindCSS.

Поддержка отображения ошибок.

Окно уведомления об успешном сохранении.

8. Расширяемость
Возможность добавлять новые коллекции с минимумом изменений.

Поддержка локализации (опционально).

Данные для конфигурации
js
Копировать
Редактировать
const config = {
  apiUrl: 'your-directus-instance.co...',
  authToken: 'your-token-here',
  collections: ['collection1', 'collection2'],

Присылайте стоимость ваших работ и сроки