Админка магазина на vue.js. Урок 12. Редактируем бренды

октябрь 18 , 2019
Метки:
Предыдущая статья Следующая статья Исходники

Сегодня мы заканчиваем работать с брендами, нам осталось сделать лишь редактирование. В нашей админке редактирование - это изменение заголовка бренда. Это будет очень короткий урок. Начали.

Сначала определим, как будет выглядеть это редактирование. Можно было сделать через то же окошко, что использовалось при добавлении бренда, но хотелось чего-то новенького. Давайте сделаем так: рядом с названием бренда нарисуем иконку, а при клике на нее заголовок пусть меняется на инпут, который можно редактировать. И две кнопки: ОК и Отмена.

Вот так это будет выглядеть

За каждый бренд у нас отвечает компонент BrandsItem.vue. А за вывод названия бренда вот такая ячейки таблицы 

    {{ brand.title }}

Нам нужно что-то похитрее. Мы хотим сделать два состояния. Первое - это отображение по умолчанию, как и сейчас, только с иконкой редактирования. А второе - это инпут с названием бренда и кнопки ОК и Отмена. Чтобы понимать, в каком режиме мы сейчас находимся, введем в компонент свойство editing, по умолчанию false. 

    data () {
        return {
            editing: false
        }
    }

Когда войдем в режим редактирования, то editing будет в true. Так выглядит разметка. Вместо куцей ячейки с названием бренда напишем такой код 

    
        

            {{ brand.title }}

Давайте разбирать. Внутри ячейки у нас 2 div-a, по одному на каждое состояние editing. Первый div - для режима по умолчанию, то есть просто для отображения названия и кнопки редактирования. 

    

        {{ brand.title }}

brand.title как и раньше и еще добавился span.icon-edit - это иконка, взятая из библиотеки minicss. Метод editEnter(brand) на клик по иконке переведет бренд в режим редактирования. Напишем его ниже.

Смотрим второй div

Здесь видим простой инпут, который привязан моделью к brand.title, кнопку ОК, которая пока ничего не делает и кнопку Отмена с методом editCancel(brand). Пора реализовать эти 2 метода.

Реализация вроде должна быть простой. Чего там, кликнули на иконку редактирования - перевели editing в true, кликнули на Отмена - обратно в false. Но есть такой момент. Инпут привязан к brand.title, и когда мы редактируем инпут, мы меняем и название бренда. Если после изменения мы нажмем ОК, то это еще нормально, все равно изменения улетят на сервер и нам нужно менять название на клиенте. Но если мы захотим нажать Отмена, то нужно будет возвращать первоначальное значение. А чтобы его вернуть, сначала его нужно куда-то сохранить. Для этого добавим еще одно поле в data - oldTitle. Ну или назовите его cachedTitle - так будет модно. Я же по олдскулу сделаю oldTitle 

    data () {
        return {
            editing: false,
            oldTitle: ''
        }
    }

Теперь мы знаем, что делать при входе в режим редактирования и выходе из него - сохраняем старое значение brand.title или наоборот его восстанавливаем. Вот так будут выглядеть те самые 2 метода editEnter и editCancel 

    editEnter (brand) {
        this.oldTitle = brand.title;
        this.editing = true;
    },
    editCancel (brand) {
        brand.title = this.oldTitle;
        this.editing = false;
    }

Очень похожи, как в зеркало друг на друга смотрят. Проверим в браузере, действительно, кликаем на иконку, появляется инпут с кнопками. Изменяем название, жмем Отмена - все возвращается обратно, название остается старое. Все как надо. Теперь реализуем сохранение названия на сервер.

Схему мы уже знаем. Сначала действие action во vuex, то есть отправка запроса на сервер. Затем мутация с изменением состояния в том же vuex. И наконец вызвать действие из компонента при клике на кнопку ОК.

Сначала action updateBrand. Открываем vuex-модуль brands.js и в разделе actions пишем 

    updateBrand (context, payload) {
        const data = 'title=' + payload.title;

        axios
            .put('/admin/api/v1/brands/' + payload.id, data)
            .then(response => {
                context.commit('UPDATE_BRAND', payload)
            });
    }

До ужаса знакомо, сто раз такое писали в предыдущих уроках. Затем мутация 

    UPDATE_BRAND (state, payload) {
        let brand = _.find(state.all, { id: payload.id });
        brand.title = payload.title;
    }

Здесь ищем нужный бренд в общей коллекции, ищем по id. Чтобы сработало _.find, нужно подключить lodash в начале файла через import 

    import _ from 'lodash';

С vuex закончили, возвращаемся в компонент BrandsItem.vue. Давайте навесим событие на кнопку ОК

Осталось написать метод editSave(brand) 

    editSave (brand) {
        this.$store.dispatch('brands/updateBrand', brand);
        this.editing = false;
    }

Он просто вызывает только что написанное действие и выключает режим редактирования.

Все, на этом урок закончен. Вообще по-хорошему стоит реализовать обработку ошибок, как клиентских, так и серверных. Как мы делали в предыдущем, 11-м уроке. Схема отработана, на сервере все для этого готово, но честно, просто не хочется это повторять заново. Ничего нового я не сообщу, а кода будет в 2 раза больше. А еще появилось несколько интересных идей для блога, пойду лучше их реализовывать. Скоро выложу, что получилось.

До встречи!

Все уроки админки на vue.js

Предыдущая статья Следующая статья Исходники
Метки:
Заходите в группу в контакте - https://vk.com/webdevkin
Анонсы статей, обсуждения интернет-магазинов, vue, фронтенда, php, гита.
Истории из жизни айти и обсуждение кода.
Как Вам статья? Оцените!