feat(gallery): Vue refactor and unified modal styles

[Ibochkarev]

Описание

Рефакторинг галереи товара: замена старого JS (gallery.panel, toolbar, view, window) на Vue-компоненты и унификация стилей модальных окон.

Галерея:

• Новые компоненты: ProductGallery, ProductGalleryGrid, ProductGalleryToolbar, ProductGalleryEditDialog
• Композабл useGalleryApi для работы с API галереи
• Интеграция GalleryUploader в новую структуру
• Обновлён контроллер товара и процессор загрузки, лексиконы ru/en

Модальные окна:

• Введена переменная --ms3-modal-width (design tokens), ширина ConfirmDialog и Dialog приведена к единому виду (без растягивания на 90vw по умолчанию)
• Кнопка закрытия в диалоге «Изменить свойства»: использование closeButtonProps для применения класса к корневому элементу кнопки; круглая обводка при фокусе через box-shadow вместо outline

Тип изменений

• Рефакторинг (без изменения функциональности)
• Исправление бага (non-breaking change)
• Новая функциональность (non-breaking change)
• Breaking change (изменение, ломающее обратную совместимость)
• Документация
• Другое (опишите):

Связанные Issues

(номер issue при наличии)

Как это было протестировано?

• Ручное тестирование
• Автоматические тесты (PHPStan, ESLint)
• Тестирование на разных версиях PHP/MODX

Конфигурация тестирования:

• MiniShop3: 1.5.0-beta
• MODX: 3x
• PHP: 8.1

Скриншоты (если применимо)

До	После

Чеклист

• Код соответствует стилю проекта
• Добавлены/обновлены комментарии в сложных местах
• Изменения не ломают существующую функциональность
• Лексиконы добавлены на двух языках (ru/en)
• PHPStan проходит без новых ошибок
• ESLint проходит без ошибок (для JS/Vue изменений)
• Обновлён CHANGELOG.md (для значимых изменений)

Дополнительные заметки

• Удалены файлы: gallery.panel.js, gallery.toolbar.js, gallery.view.js, gallery.window.js; стили галереи убраны из main.css
• Общие стили модалей (overflow-x: hidden) вынесены в primevue.scss

[biz87]

Ревью PR #121: feat(gallery): Vue refactor and unified modal styles

Большой и качественный PR — полная замена ExtJS-галереи на Vue. Архитектура хорошая: отдельные компоненты, composable useGalleryApi с withLoading, provide/inject для thumb, design-token для модалей. Лексиконы на двух языках, Uppy полностью локализован.

---

1. Безопасность: getMediaSourcesList() без проверки прав

public function getMediaSourcesList()
{
    $sources = $this->modx->getCollection('sources.modMediaSource', ['id:>' => 0]);
    ...
}

Загружает все медиа-источники без проверки access policies. MODX поддерживает ACL на медиа-источники — пользователь может не иметь доступа к некоторым из них.

Старый ms3-combo-source (ExtJS) загружал список через коннектор с проверкой прав. Новый код отдаёт все источники в JSON-конфиг страницы.

Нужно фильтровать через $source->checkPolicy('view') или использовать стандартный механизм MODX для получения доступных источников.

2. updateProductSource — частичное обновление через Product\Update

export async function updateProductSource(productId, sourceId) {
  await connectorRequest(PRODUCT_UPDATE, {
    id: productId,
    source_id: sourceId,
  })
  location.reload()
}

Старый ExtJS код отправлял всю форму через MODx.activePage.submitForm(). Новый код отправляет только id + source_id в Product\Update. Если процессор ожидает обязательные поля (pagetitle и т.д.) или обнуляет пустые — это может привести к потере данных товара. Нужно проверить поведение процессора при частичном вводе.

3. Мёртвый watcher в ProductGalleryGrid.vue

watch(
  () => props.first,
  (v) => {
    if (searchQuery.value !== undefined) return
  }
)

searchQuery — всегда строка (инициализирован как ''), !== undefined всегда true. Watcher ничего не делает — мёртвый код, удалить.

4. Глобальные стили ConfirmDialog

В ProductGallery.vue (unscoped <style>):

.p-confirm-dialog {
  width: var(--ms3-modal-width, 28rem);
  max-width: 90vw;
  ...
}

Затронет все ConfirmDialog на странице, не только галерейные. Может сломать другие диалоги (ProductData, будущие компоненты). Стоит ограничить scope или использовать отдельный CSS-класс.

5. CSS галереи загружается безусловно

Старый код загружал CSS/JS аплоадера только при $show_gallery === true. Новый код загружает GalleryUploader.min.css всегда, без проверки настройки ms3_product_tab_gallery.

6. Двойной emit при закрытии EditDialog

<Dialog
    @update:visible="(v) => $emit('update:visible', v)"
    @hide="close"
>

close() вызывает emit('update:visible', false). При закрытии Dialog сначала вызовет @update:visible(false), потом @hide → close() → ещё один emit. Не вредит, но стоит убрать одно из двух.

7. Имя CSS-файла

gallery-uploader.min.css → GalleryUploader.min.css (PascalCase). Проверить, что Vite генерирует файл именно с таким именем.

Что сделано хорошо

• Composable useGalleryApi с withLoading — элегантный паттерн
• provide/inject для обновления thumb
• vuedraggable для drag&drop, context menu на правый клик
• Robust JSON parsing с fallback для PHP notices в getResponseData
• Debounced search
• Полная локализация Uppy
• Design-token --ms3-modal-width

Итог

Пункты 1-2 — блокирующие (безопасность + потенциальная потеря данных). Остальное — улучшения.

[biz87]

Ревью

PR отличный по архитектуре — composable с withLoading, provide/inject для thumb, отдельный UpdateSource процессор. Замечания biz87 учтены (checkPolicy, dedicated processor, переписанный watcher). Два момента:

1. Блокирующее: watch не импортирован в ProductGalleryGrid.vue

// строка 10
import { computed, ref } from 'vue'

// строка 57 — вызов watch(), которого нет в импорте
watch(
  () => props.items,
  (val) => { orderedItems.value = val?.length ? [...val] : [] },
  { immediate: true }
)

Компонент упадёт с ReferenceError: watch is not defined при рендере. Без этого watcher'а сетка галереи не будет обновляться при загрузке данных.

Фикс: import { computed, ref, watch } from 'vue'

2. Не блокирующее: connectorRequest фильтрует пустые строки — нельзя очистить description

В useGalleryApi.js:

Object.entries(allParams).filter(([_, v]) => v !== undefined && v !== null && v !== '')

updateFile передаёт description: payload.description ?? ''. Если пользователь очистит description → пустая строка отфильтруется → процессор не получит параметр → значение останется прежним.

Старый ExtJS-код отправлял форму как есть, пустые поля доходили до процессора.

Варианты:

• Убрать v !== '' из общего фильтра
• Или не фильтровать пустые строки только для updateFile (передавать params напрямую)

[biz87]

Code Review: PR #121 — Gallery Vue Refactor

Хороший рефакторинг. Полная замена 4 ExtJS файлов (panel, toolbar, view, window) на Vue-компоненты с композаблом — правильный вектор. Архитектура чистая: ProductGallery как оркестратор, Grid/Toolbar/EditDialog как дочерние, useGalleryApi как data layer. Код читаемый, лексиконы синхронны (ru/en). Выделю важные моменты.

---

1. Performance: upload-success vs upload-complete

ProductGallery.vue слушает @upload-success, который срабатывает на каждый файл. При загрузке 10 фото — 10 вызовов loadList(). Старый ExtJS код использовал onUploadComplete (1 раз в конце батча).

Рекомендация: слушать @upload-complete вместо @upload-success, или debounce reload.

---

2. updateProductSource теряет несохранённые изменения

Старый код (gallery.toolbar.js):

MODx.activePage.submitForm({ success: { fn: function(r) {
    MODx.loadPage('resource/update', 'id=' + r.result.object.id);
}}});

Новый код (useGalleryApi.js):

location.reload()

Старый код сначала сохранял форму, потом перезагружал. Новый просто делает location.reload(). Если пользователь редактировал поля товара на других вкладках — всё потеряется без предупреждения.

Варианты:

• Использовать MODx.activePage.submitForm() из Vue (доступен через global)
• Предупреждать пользователя, что несохранённые изменения будут потеряны (это уже частично делает confirm dialog, но текст лексикона не упоминает потерю данных)

---

3. UpdateSource.php — валидация source_id

if ($sourceId < 0) {
    return $this->failure(...)

Пропускает source_id = 0, что в MODX обычно означает «нет источника». Также не проверяется, что media source с таким ID существует и пользователь имеет к нему доступ. Сравни с getMediaSourcesList() из того же PR, где правильно проверяется $source->checkPolicy('view').

Рекомендация:

$source = $this->modx->getObject(\MODX\Revolution\Sources\modMediaSource::class, $sourceId);
if (!$source || !$source->checkPolicy('view')) {
    return $this->failure(...);
}

---

4. UpdateSource.php — не проверяет policy на продукт

Проверяется только $permission = 'msproduct_save' (пермишен), но не $this->product->checkPolicy('save') (ACL-политика ресурса). В основном Update.php процессоре это проверяется.

---

5. Неиспользуемый лексикон ms3_gallery_search_placeholder

Добавлены ключи ms3_gallery_search_placeholder (ru/en), но в ProductGalleryGrid.vue поиск использует:

:placeholder="_('search')"

Вместо:

:placeholder="_('ms3_gallery_search_placeholder')"

Либо удалить неиспользуемый лексикон, либо использовать его.

---

6. connectorRequest — пустые строки в GET-запросах

После commit 3 фильтр пропускает пустые строки (v !== undefined && v !== null). Для POST это правильно (чтобы description можно было очистить). Но для GET-запросов (fetchGalleryList) это означает, что пустая query отправится как &query=, что раньше (commit 1) фильтровалось. Скорее всего не критично, но стоит проверить, что GetList процессор нормально обрабатывает пустой query.

---

7. Minor

• getMediaSourcesList() использует строковый alias 'sources.modMediaSource' вместо \MODX\Revolution\Sources\modMediaSource::class. Не критично, но отличается от паттерна остального кода.
• Commit 3 message: «Added watch import for potential reactive data handling» — watch реально используется для orderedItems, commit message вводит в заблуждение.
• GalleryUploader.vue getResponseData: Хороший defensive parsing (обработка PHP notices перед JSON), но стоит добавить console.warn для случая когда JSON извлекается из «мусорного» ответа — иначе PHP-ошибки на сервере будут полностью тихими.

---

Итого

Главные замечания:

1. ⚠️ upload-success → upload-complete (performance, N запросов вместо 1)
2. ⚠️ location.reload() без сохранения (потеря данных)
3. ⚠️ UpdateSource.php — неполная валидация (существование source, policy check)

Остальное — минор.