May 11, 2021

Разработка простейшего виджета формы с использованием Vue.js для OctoberCMS v.2

С появлением поддержки Vue.js в новом October, открылись новые возможности по созданию виджетов и прочих интересных вещей в админке нашей любимой CMS.

Так как документации по поводу использования Vue.js в настоящий момент еще нет и автор не претендует на звание Кунг-Vue мастера, то публикуем этот гайд исходя из опыта, полученного в процессе изучения исходников новой системы.

Задача

Задача простая, бесполезная, но сгодится для примера - это создание formWidget'а для получения адреса, с использованием Яндекс.Карт

Подготовка

Перед тем как начать - создадим тестовый плагин, назовем его Address.
Данный материал предполагает, что читатель знаком с базовыми командами по созданию плагинов, моделей и пр. в OctoberCMS.

Далее ускоренный прогон - миграция, модель, контроллер.

Не забываем обновить файл updates/version.yaml

и выполнить:

Не стану описывать, что и как - мы только что создали простой скелет, для того, чтобы было куда "прицепить" наш formWidget.

Создание виджета

Пробежимся по созданию виджета - следуя документации. Назовем наш виджет MapPicker

В итоге у нас будет создан шаблон нашего виджета, с ним и будем работать.

Сразу зарегистрируем виджет (согласно документации) в файле Plugin.php нашего плагина SandBox:

И добавим поле address с типом mapPicker в yaml-файл sandbox/address/models/address/fields.yaml

Теперь в браузере перейдем на страницу /backend/sandbox/address/addresses/create и увидим стандартный сгенерированный шаблон виджета. С ним и будем работать.

Итак, что мы хотим здесь видеть:

  1. Поле ввода адреса
  2. Кнопку, которая откроет в модальном окне карту
  3. Собственно карту, при клике по которой, мы получим адрес и вставим его в поле ввода

Поле и кнопка

Поправим стандартный шаблон партиалки, добавив в него кнопку и немного css.

Получили примерно то, что надо =)

Далее используем стандартный компонент <backend-component-modal>, немного покопавшись в исходниках модуля editor и подглядев, как его вызывать.

Немного модифицируем нашу партиалку:

Проверяем:

Ура, получилось! Дело за малым, наполнить модалку картой и функционалом.

Яндекс.Карты

Достаточно просто и красиво всё описано тут - https://vue-yandex-maps.github.io/

Немного модифицируем файл виджета, добавив в метод загрузки ассетов одну строку

Ну вот и всё - согласно документации, мы подключили плагин карт напрямую, и теперь дело техники, подпилить нашу партиалку для работы с ним.

Долго описывать не будем - покажем результат модифицированной партиалки

И немного докинем стилей в css

Результат

Собственно, чтобы не придумывать велосипед - небольшое видео-демонстрация

Исходники виджета можно скачать тут https://github.com/gromitsoft/sandbox-formwidget