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

GromIT · 11 мая 2021

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

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

Задача

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

Подготовка

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

// Создадим плагин для экспериментов, назовем его Sandbox

php artisan create:plugin sandbox.address
  
// Создадим модель и контроллер для плагина
php artisan create:model sandbox.address address
php artisan create:controller sandbox.address addresses

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

// Миграция create_addresses_table.php

<?php namespace Sandbox\Address\Updates;

use Schema;
use October\Rain\Database\Schema\Blueprint;
use October\Rain\Database\Updates\Migration;

class CreateAddressesTable extends Migration
{
    public function up()
    {
        Schema::create('sandbox_address_addresses', function (Blueprint $table) {
            $table->engine = 'InnoDB';
            $table->increments('id');
            $table->string('address');
            $table->timestamps();
        });
    }

    public function down()
    {
        Schema::dropIfExists('sandbox_address_addresses');
    }
}

// =========================================
// Модель Address

<?php namespace Sandbox\Address\Models;

use Model;

/**
 * Address Model
 */
class Address extends Model
{
    /**
     * @var string table associated with the model
     */
    public $table = 'sandbox_address_addresses';
}

// =========================================
// Контроллер Addresses

<?php namespace Sandbox\Address\Controllers;

use BackendMenu;
use Backend\Behaviors\FormController;
use Backend\Behaviors\ListController;
use Backend\Classes\Controller;

/**
 * Addresses Back-end Controller
 */
class Addresses extends Controller
{
    public $implement = [
        FormController::class,
        ListController::class
    ];

    public $formConfig = 'config_form.yaml';
    public $listConfig = 'config_list.yaml';

    public function __construct()
    {
        parent::__construct();

        BackendMenu::setContext('Sandbox.Address', 'address', 'addresses');
    }
}

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

1.0.1: 
    - First version of address
    - create_addresses_table.php

и выполнить:

php artisan plugin:refresh sandbox.address

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

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

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

php artisan create:formwidget sandbox.address MapPicker

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

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


public function registerFormWidgets()
{
    return [
        Sandbox\Address\FormWidgets\MapPicker::class => 'mapPicker',
    ];
}

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

# ===================================
#  Form Field Definitions
# ===================================

fields:
    id:
        label: ID
        disabled: true
    address:
        label: MapPicker
        type: mapPicker

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

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

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

Поле и кнопка

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

// sandbox/address/formwidgets/mappicker/partials/_mappicker.htm

<?php if ($this->previewMode): ?>

    <div class="form-control">
        <?= $value ?>
    </div>

<?php else: ?>

    <div id="widget-<?= $this->getId('input') ?>" class="mappicker-widget">
        <input
            type="text"
            id="<?= $this->getId('input') ?>"
            name="<?= $name ?>"
            value="<?= $value ?>"
            class="form-control"
            autocomplete="off"/>
        <button type="button" class="btn btn-primary">
            Карта
        </button>
    </div>

<?php endif ?>

/*
 * sandbox/address/formwidgets/mappicker/assets/css/mappicker.css
 */

.mappicker-widget{
    display: flex;
    gap: 15px;
}

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

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

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

// sandbox/address/formwidgets/mappicker/partials/_mappicker.htm

<?php if ($this->previewMode): ?>

    <div class="form-control">
        <?= $value ?>
    </div>

<?php else: ?>

    <div id="widget-<?= $this->getId('input') ?>" class="mappicker-widget">
        <input
            type="text"
            id="<?= $this->getId('input') ?>"
            name="<?= $name ?>"
            value="<?= $value ?>"
            class="form-control"
            autocomplete="off"/>
        <button type="button" class="btn btn-primary" @click="$refs.modal.show()">
            Карта
        </button>

        <backend-component-modal
            ref="modal"
            :aria-labeled-by="modalTitleId"
            :unique-key="uniqueKey"
            size="large"
            :draggable="false"
        >
            <template v-slot:content>
                <div class="modal-header">
                    <h4 class="modal-title">Заголовок</h4>
                </div>
                <div class="modal-body">Текст</div>
            </template>
        </backend-component-modal>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            new Vue({
                el: '#widget-<?= $this->getId('input') ?>',
                data: function () {
                    return {
                        uniqueKey: $.oc.domIdManager.generate('modal-mappicker'),
                        modalTitleId: $.oc.domIdManager.generate('modal-mappicker-title'),
                    };
                },
            });
        });
    </script>

<?php endif ?>

Проверяем:

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

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

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

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

// sandbox/address/formwidgets/MapPicker.php


public function loadAssets()
{
    $this->addCss('css/mappicker.css', 'sandbox.address');
    $this->addJs('js/mappicker.js', 'sandbox.address');
    $this->addJs('https://unpkg.com/vue-yandex-maps', 'sandbox.address');
}

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

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

// sandbox/address/formwidgets/mappicker/partials/_mappicker.htm

<?php if ($this->previewMode): ?>

    <div class="form-control">
        <?= $value ?>
    </div>

<?php else: ?>
    <div id="widget-<?= $this->getId('input') ?>" class="mappicker-widget">
        <input
            type="text"
            id="<?= $this->getId('input') ?>"
            name="<?= $name ?>"
            value="<?= $value ?>"
            class="form-control"
            v-model="address"
            autocomplete="off"/>
        <button type="button"
                class="btn btn-primary"
                @click="$refs.modal.show()"
        >
            Карта
        </button>

        <backend-component-modal
            ref="modal"
            :aria-labeled-by="modalTitleId"
            :unique-key="uniqueKey"
            size="large"
            :draggable="false"
        >
            <template v-slot:content>
                <div class="modal-header">
                    <h4 class="modal-title">
                        <span v-if="address">{{ address }}</span>
                        <span v-else>Кликните по карте, для получения адреса</span>
                    </h4>
                </div>
                <div class="modal-body">
                    <div id="yandex-map">
                        <yandex-map
                            :coords="coords"
                            :controls="controls"
                            zoom=10
                            @click="onMapClick"
                        >
                            <ymap-marker
                                :coords="coords"
                                marker-id="marker-<?= $this->getId('input') ?>"
                                :icon="markerIcon"
                                :key="address"
                            />
                        </yandex-map>
                    </div>
                    <button type="button"
                            class="btn btn-primary pull-right m-b"
                            :disabled="!address"
                            @click="$refs.modal.hide()"
                    >
                        Выбрать этот адрес
                    </button>
                </div>
            </template>
        </backend-component-modal>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            new Vue({
                el: '#widget-<?= $this->getId('input') ?>',
                data: function () {
                    return {
                        address: '',
                        uniqueKey: $.oc.domIdManager.generate('modal-mappicker'),
                        modalTitleId: $.oc.domIdManager.generate('modal-mappicker-title'),
                        coords: [55.753994, 37.622093],
                        controls: [],
                        markerIcon: {
                            content: '',
                        }
                    };
                },
                methods: {
                    onMapClick(event) {
                        this.coords = event.get('coords');
                        this.getAddress(this.coords);
                    },
                    getAddress(coords) {
                        vm = this;
                        vm.markerIcon.content = '';
                        ymaps.geocode(this.coords).then(function (res) {
                            let firstGeoObject = res.geoObjects.get(0);
                            vm.address = firstGeoObject.getAddressLine();
                            vm.markerIcon.content = vm.address;
                        });
                    }
                },
                async mounted() {
                    await window['vue-yandex-maps'].loadYmap({
                        apiKey: "YOUR-API-KEY",
                        lang: "ru_RU",
                        coordorder: "latlong",
                        version: "2.1"
                    });
                },
            });
        });
    </script>
<?php endif ?>

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

// sandbox/address/formwidgets/mappicker/assets/css/mappicker.css

/*
 * This is a sample StyleSheet file used by MapPicker
 *
 * You can delete this file if you want
 */
.mappicker-widget {
    display: flex;
    gap: 15px;
}

#yandex-map {
    height: 400px;
    margin-bottom: 20px;
}

.ymap-container {
    height: 100%;
}

Результат

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

Ссылки

Оригинал статьи
Исходный код примера

EESt · 12 мая 2021

Спасибо, очень интересно!