Разработка простейшего виджета формы с использованием 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 и увидим стандартный сгенерированный шаблон виджета. С ним и будем работать.
Итак, что мы хотим здесь видеть:
- Поле ввода адреса
- Кнопку, которая откроет в модальном окне карту
- Собственно карту, при клике по которой, мы получим адрес и вставим его в поле ввода
Поле и кнопка
Поправим стандартный шаблон партиалки, добавив в него кнопку и немного css.
Получили примерно то, что надо =)
Далее используем стандартный компонент <backend-component-modal>, немного покопавшись в исходниках модуля editor и подглядев, как его вызывать.
Немного модифицируем нашу партиалку:
Проверяем:
Ура, получилось! Дело за малым, наполнить модалку картой и функционалом.
Яндекс.Карты
Достаточно просто и красиво всё описано тут - https://vue-yandex-maps.github.io/
Немного модифицируем файл виджета, добавив в метод загрузки ассетов одну строку
Ну вот и всё - согласно документации, мы подключили плагин карт напрямую, и теперь дело техники, подпилить нашу партиалку для работы с ним.
Долго описывать не будем - покажем результат модифицированной партиалки
И немного докинем стилей в css
Результат
Собственно, чтобы не придумывать велосипед - небольшое видео-демонстрация
Исходники виджета можно скачать тут https://github.com/gromitsoft/sandbox-formwidget