[Feature] Галерея товара: компактный uploader и сортировка загрузки по имени файла

[Ibochkarev]

Источник

modx.pro — комментарий Сергея Карповича:

• «Огромное drag-and-drop поле (зачем?)»
• Загруженные фото сортируются по дате загрузки, а не по имени; после загрузки мелко внизу под полем — приходится сортировать вручную
• В miniShop2 порядок совпадал с заранее пронумерованными именами файлов

Анализ (код)

UI: крупная зона загрузки

vueManager/src/components/gallery/GalleryUploader.vue:

• Uppy Dashboard inline, height: 400, width: 100% — занимает верх формы.
• ProductGallery.vue: порядок блоков — toolbar → uploader → grid. Превью всегда ниже.

Сортировка при upload

core/components/minishop3/src/Processors/Gallery/Upload.php:

$position = ... ? 0 : $this->modx->getCount(...);
// position = текущее кол-во файлов → append в порядке завершения upload

GetList.php: defaultSortField = position, ASC — отображение следует position, не name/createdon.

При пакетной загрузке через Uppy порядок зависит от скорости ответа сервера, не от lexicographic имени (01.jpg, 02.jpg…). Поведение ms2 (ожидание пользователя) — natural sort по filename после batch или присвоение rank из имени.

Связанный headless scope

#566 — Web API images[] для витрины (другой слой, но порядок position там тоже важен).

Предложения

1. Компактный uploader (UX)

• Режим compact: Dashboard height: 120–160 или note + browse без full dropzone до hover.
• Опция «свернуть зону загрузки» после первого файла (accordion).
• Альтернатива: кнопка «Добавить» + modal uploader вместо permanent 400px block.

2. Сортировка по имени (поведение)

Вариант A (ms2-like, рекомендуется): после complete batch (Uppy upload-complete / server-side hook) — пересчитать position natural sort по file/name для product_id.

Вариант B: при каждом Upload вставлять по lexicographic rank среди siblings (дороже на concurrent uploads).

Вариант C: настройка media source gallerySortOnUpload = name|append (default name для parity ms2).

3. Layout

• Split view: grid слева / uploader справа на wide screens.
• Или sticky toolbar + inline drop на grid (drag onto thumbnails area).

Критерии приёмки

• Dropzone не доминирует над превью на типичном laptop viewport.
• Batch upload 01.jpg…10.jpg → grid order 1..10 без ручного drag-sort.
• Существующий drag-sort (Gallery/Sort.php) не ломается.
• Smoke/PHPUnit на assign position (unit или processor test).

Файлы

• vueManager/src/components/gallery/GalleryUploader.vue
• vueManager/src/components/gallery/ProductGallery.vue
• core/components/minishop3/src/Processors/Gallery/Upload.php (+ опционально post-batch resort service)

Out of scope

Замена Uppy на другой upload stack.