В первой части статьи мы строили бэкенд на Laravel для вывода разнородных событий на календаре. В этой части мы рассмотрим построение фронт-энда на Vue.js с помощью FullCalendar, для которого есть интеграция fullcalendar-vue. Получится примерно как на картинке.

Что вообще должен делать наш фронт-энд?

Во-первых, загружать из бэк-энда события по созданному ранее пути /api/calendar.

Во-вторых, отображать эти события в соответствии с установленными для них датами.

В третьих, как-то визуально отличать одно событие от другого, чтобы было нагляднее.

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

Будем считать эти четыре пункта нашим ТЗ на фронт-энд и приступим к реализации.

В данной заметке из трёх частей рассматривается построение календаря, отображающего события, связанные с разнородными сущностями системы. Бэк-энд реализован на Laravel, фронт — на Vue.js. Календарь сделаем с помощью Full Calendar и соответствующей интеграции fullcalendar-vue.

Для определенности будем рассматривать туристическую систему, в которой у нас есть заказы, а у заказов есть дата вылета и дата возврата. И также есть сроки оплаты по данным заказам. Вот эти данные мы и будем отображать на календаре.

В результате получится примерно вот так:

Довольно часто встречается задача реализации ин-плейс-редактирования. То есть когда кликнули например два раза на пункт списка, и текст тут же заменился редактором, мы его поменяли, нажали enter, сохранили.

Сделать это во Vue.js несложно: рядом с каждым редактируемым пунктом выводится инпут, и в v-show указываются противоположные условия. А по двойному клику значение условия изменяется. Например:

<template>
<!-- ... -->
    <ul>
        <li v-for="(item, index) in items" :key="item.id">
            <div @dblclick="editTitleMode(item)">
                <div v-show="!item.edit_mode">{{ item.title }}</div>
                <div v-show="item.edit_mode">
                    <input v-model="item.title" @keyup.enter="saveItemTitle(item)" type="text" />
                </div>
            </div>
        </li>
    </ul>
</template>
<script>
    export default {
        data() {
            return {
                items: []
            }
        },
        methods {
            editTitleMode: function (item) {
                this.$set(item, 'edit_mode', true);
            },
            saveItemTitle: function (item) {
                // Do the saving
                item.edit_mode = false;
            }
        }
    }
</script>

И что еще хотелось бы сделать в этой ситуации — так это каждый раз, когда появляется инпут для редактирования, автоматически ставить на него фокус. В принципе, с этим можно легко справиться с помощью jQuery, зная, какой инпут сейчас будет показан. Но когда работаешь с Vue.js, каждое обращение к jQuery в коде кажется малодушием. И в данном случае прекрасно можно обойтись без jQuery.

У компонентов Vue.js есть массив this.$refs, содержащий элементы с заданным атрибутом ref. Тогда найти нужный элемент и поставить на него фокус можно вот так:

<template>
<!-- ... -->
    <ul>
        <li v-for="(item, index) in items" :key="item.id">
            <div @dblclick="editTitleMode(item)">
                <div v-show="!item.edit_mode">{{ item.title }}</div>
                <div v-show="item.edit_mode">
                    <input :ref="'input_item_' + item.id" v-model="item.title" @keyup.enter="saveItemTitle(item)" type="text" />
                </div>
            </div>
        </li>
    </ul>
</template>
<script>
    export default {
        // ...
        methods {
            editTitleMode: function (item) {
                this.$set(item, 'edit_mode', true);
                this.$refs['input_item_' + item.id][0].focus();
            },
            saveItemTitle: function (item) {
                // Do the saving
                item.edit_mode = false;
            }
        }
    }
</script>

Правда, если добавить этот код в метод, по которому показывается инпут, установки фокуса не произойдет. Всё дело в том, что в момент вызова метода editTitleMode(), значение item.edit_mode, используемое в v-show уже изменилось, но Vue.js еще не выполнил цикл проверки реактивных переменных и соответствующие действия. То есть, сам инпут все еще невидим и не может получить фокус.

Чтобы заработало, нужно ставить фокус позже, после цикла проверки, с помощью метода nextTick() вот так:

editTitleMode: function (item) {
    this.$set(item, 'edit_mode', true);
    this.$nextTick(() => {
        this.$refs['input_item_' + item.id][0].focus();
    });
}

В качестве бонуса — поставим курсор в конец текста в инпуте так, чтобы его (курсор) было видно:

editTitleMode: function (item) {
    this.$set(item, 'edit_mode', true);
    this.$nextTick(() => {
        let element = this.$refs['input_item_' + item.id][0];
        let position = element.value.length;
        element.focus();
        if (element.setSelectionRange) {
            element.setSelectionRange(position, position);
        } else if (element.createTextRange) {
            let range = element.createTextRange();
            range.collapse(true);
            range.moveEnd('character', position);
            range.moveStart('character', position);
            range.select();
        }
    });
}

Допустим, хотим мы добавить в формы нашего фронт-энда такой популярный плагин как datetimepicker. То есть красивый элемент для выбора даты и времени.

У Vue.js есть для этого несколько разных библиотек с компонентами, вот одна из них: Vue Bootstrap Datetimepicker. Данная библиотека при подключении позволяет использовать компонент date-picker. Компонент достаточно гибкий, с разнообразными настройками, можно выбирать дату, можно дату и время, поддерживаются форматы, используется moment.js, всё хорошо.

TL;DR: Далее рассматривается создание компонента-обертки, инкапсуляция настроек дейтпикера в нём, дополнительные настройки и пропы.

Прикручивал тут к одному проекту на Drupal 8 Vue.js для фронт-энда. Нужно было несколько интерактивных фильтров на паре страниц сделать, на Vue ложилось идеально. Но поскольку кроме фильтров больше ни для чего Vue был не нужен, в полный headless не пошел. Ограничился эдаким headless-less подходом, когда на нужных страницах разметку генерирует все еще Друпал, а Vue берет с неё свои компоненты, данные в которых переданы через пропы, а незначащая разметка — через слоты.

Изначально хотел описать по порядку, что и как я делал, но по ходу применения этого гибридного headless-less варианта пришел к выводу, что делать так вообще не надо. Лучше (если Vue нужен только для конкретных страниц) — отдавать что-нибудь вроде

<master-component :data="jsonData"></master-component>

где в jsonData упаковано всё что нужно для генерации разметки на стороне Vue. А дальше пусть Vue сам разберется.

Потому что иначе постоянно возникают ограничения и несовместимости, возникают и выносят мозг. Перечислю некоторые из них.

Во-первых, часть разметки все равно придется перенести в компоненты. Вот например представим, что нам надо список товаров фильтровать с помощью формы из нескольких чекбоксов. Если попробовать вставить разметку формы в слот и передать через scope значения в v-model, связь получится односторонняя. Фильтр примет начальные значения из scope, но передавать изменения обратно в компонент — не будет. То есть полностью сохранить темплейт на стороне Друпала не получится.

Во-вторых, вот есть у Vue.js транзишны для анимации. Пользоваться удобно, enter/leave можно сделать за 5 минут просто обернув компонент в <transition></transition> и добавив три строчки CSS. Но есть в транзишнах вот такая клевая штука для списков. То есть анимация вставки/удаления элементов списка. Если мы генерируем разметку на стороне Друпала:

{% for product in products %}
  <product :data="{{ product_data }}">
    <div>Разметка товара</div>
  </product>
{% endfor %}

то list-транзишны работать не будут, нужно чтобы список был сгенерирован на стороне Vue.js через v-for. То есть, опять-таки, чем больше передадим во Vue.js в виде json-данных — тем лучше.

Далее, если эти компоненты product переданы через слот в родительский компонент Products, мы будем испытывать затруднения если захотим обратиться к каждому из дочерних product-ов (например, чтобы определить количество видимых в данных момент товаров). Так-то во Vue можно задать дочерним компонентам ref и обращаться в родительском через this.$refs. Но, опять же, для этого компоненты должны создаваться в родительском темплейте на стороне Vue. А так пришлось изгаляться с jQuery (что при наличии транзишнов не очень-то весело).

Наконец, следует помнить, что вся Vue-related разметка, сгенерированная на стороне Друпала, не проходит через систему сборки, в отличие от файлов .vue с компонентами. Из-за этого нужно быть осторожным в её написании. Например, взяли мы и деструктурировали для удобства данные, передаваемые в scoped-slot:

<div slot-scope="{ results }">
  <p v-show="results">There are results!</p>
</div>

И всё, пока-пока, IE11. А на стороне Vue этот код был бы собран с поддержкой совместимости.

В общем, эксперимент с headless-less показал, что для небольших интерактивностей Vue без headless использовать можно, но органичения подстерегают повсюду. И если есть такая возможность — на страницах с компонентами лучше сразу возвращать данные в json и строить компоненты на стороне Vue.js.

Какое-то время пилю некоторое приложение на Laravel. На этот раз, для разнообразия, решил попробовать прилагающийся по умолчанию фронт-энд. На Vue.js который.

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

В процессе освоения и использования, набрёл на любопытный хак. Захотелось мне, значит, сделать множество полей с автодополнением, примерно так (упрощенно):

<ol>
    <li v-if="people" v-for="(person, index) in people">
        <autocomplete
            url="/people/search_by_name"
            anchor="name"
            label="email"
            :initValue="person.name"
            :onInput="autocompleteNameChanged"
            :onSelect="autocompleteGetData"></autocomplete>
        <button type="button" v-on:click="removePerson($event, index)" class="btn btn-default"><span class="fa fa-times"></span></button>
    </li>
</ol>