ServicePage.vue

<template>
    <div id="service-page">
        <v-tabs v-model="active" color="blue" slider-color="grey lighten-2">
            <v-tab v-for="title in titles" :key="title.title" ripple>
                {{ title.title }}
            </v-tab>
            <v-tab-item :key="1">
                <service-main-page
                        :main="currentServicePageState.main"
                        :isEditPage="isEditPage"
                        :relationPages="relationPagesByLanguage"
                        @sendServicePageMain="changeServicePageMain"
                ></service-main-page>
            </v-tab-item>
            <v-tab-item :key="2">
                <page-seo
                        :robots="initialSeoPageData.robots"
                        :og_types="initialSeoPageData.og_types"
                        :twitter_cards="initialSeoPageData.twitter_cards"
                        :seoPageData="currentServicePageState.seo"
                        :controlButtonsIsVisible="false"
                        link-back="/services"
                        @sendSeo="changeSeo"
                ></page-seo>
            </v-tab-item>
            <v-tab-item :key="3">
                <page-sitemap
                        :update_frequency_xml="initialSeoPageData.update_frequency_xml"
                        :priority_xml="initialSeoPageData.priority_xml"
                        :visibility_map_site="currentServicePageState.sitemap"
                        :controlButtonsIsVisible="false"
                        link-back="/services"
                        @sendMapSite="changeSitemap"
                ></page-sitemap>
            </v-tab-item>
        </v-tabs>
        <div>
            <v-layout align-center justify-center row fill-height>
                <v-flex xs3>
                    <the-group-control-buttons
                            link-back="/services"
                            @SaveButtonPressed="savePage"
                            @BackButtonPressed="checkIsPressedSaveButton"
                    ></the-group-control-buttons>
                </v-flex>
            </v-layout>
        </div>

        <v-dialog v-model="dialog" max-width="290">
            <v-card>
                <v-alert :value="true" :type="typeModal" v-html="titleModal"></v-alert>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="primary darken-1" flat="flat" @click="dialog = false">
                        Хорошо, я понял.
                    </v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
    </div>
</template>

<script>
    import PageSitemap from '../../page/PageSitemap'
    import PageSeo from '../../page/PageSeo'
    import ServiceMainPage from '../../service/page/ServiceMainPage';
    import TheGroupControlButtons from '../../TheGroupControlButtons';
    import {mapGetters} from 'vuex';
    import * as types from '../../../store/types';
    import EventBus from '../../../store/event-bus';
    import ServicePage from '../../service/page/ServicePage.js';
    import ServicePageBuilder from '../../service/page/ServicePageBuilder.js';

    let servicePage = {};
    export default {
        name: 'service-page',
        components: {PageSitemap, PageSeo, ServiceMainPage, TheGroupControlButtons},

        data() {
            return {
                active: null,
                titles: [{title: 'Основное'}, {title: 'SEO'}, {title: 'Карта сайта'}],
                dialog: false,
                titleModal: '',
                typeModal: 'error',
                isEditPage: false,
                relationPagesByLanguage: [],
                currentServicePageState: {}
            }
        },

        computed: {
            ...mapGetters({
                initialSeoPageData: [types.GET_DEFAULT_SEO_PAGE_DATA],
                // currentServicePageState: [types.GET_PAGE_SERVICES],
                languages: types.GET_LANGUAGES_LIST,
            }),
        },

        methods: {
            /**
             * Метод проверяет были ли сохраненны данные на странице или нет
             *
             * @returns {boolean}
             */
            checkIsPressedSaveButton: function () {
                const oldStatePage = servicePage.createStateServicePage();

                this._createPromiseSavePage().then(() => {
                    const currentState = servicePage.createStateServicePage();
                    const isEqual = this._.isEqual(oldStatePage, currentState);

                    console.log('oldStatePage'); //FIXME
                    console.log(oldStatePage.main.id); //FIXME

                    console.log('currentState'); //FIXME
                    console.log(currentState.main.id); //FIXME

                    console.log('isEqual'); //FIXME
                    console.log(isEqual); //FIXME
                    if (isEqual) {
                        this.$router.replace('/services');
                        return false;
                    }
                    this.$confirm('Есть несохраненые данные, сохранить?', {buttonFalseText: 'Нет я хочу уйти'}).then((isNeedToSave) => {
                        if (! isNeedToSave) {
                            this.$router.replace('/services');
                            return false;
                        }
                        this._createPromiseSavePage().then(() => {
                            this._save();
                        }).catch((reason) => {
                            this.typeModal = 'error';
                            this.dialog = true;
                            this.titleModal = reason + ' Не все поля заполнены верно';
                        });
                    });
                }, reason => {
                    this.typeModal = 'error';
                    this.dialog = true;
                    this.titleModal = reason + ' Не все поля заполнены верно';
                });
            },

            /**
             * Метод сохраняет страницу
             */
            savePage: function () {
                this._createPromiseSavePage().then(() => {
                    this._save();
                }, reason => {
                    this.typeModal = 'error';
                    this.dialog = true;
                    this.titleModal = reason + ' Не все поля заполнены верно';
                });
            },

            changeServicePageMain: function(main) {
                servicePage.changeMain(main);
            },

            changeSitemap: function (sitemap) {
                servicePage.changeSitemap(Object.assign({}, sitemap));
                servicePage.setRequiredSitemap();
            },

            changeSeo: function (seo) {
                servicePage.changeSeo(Object.assign({}, seo));
                servicePage.setRequiredSeo();
            },

            _save: function () {
                servicePage.transformToSendServer();
                let page = servicePage.getPageToServer();
                let currentServicePageState = this._prepareData(page);

               this.$store.dispatch(types.SEND_PAGE_SERVICE, currentServicePageState).then((response) => {
                    this.dialog = true;
                    if (! response.id) {
                        this.typeModal = 'error';
                        this.titleModal = response.response;
                        return false;
                    }
                    this.typeModal = 'success';
                    this.titleModal = 'Успешно сохранено ID - ' + response.id;

                    servicePage.thisNewPage(false);
                    servicePage.changeId(response.id);
                    this.isEditPage = true;
                    this.$store.commit(types.SET_PAGE_SERVICES, this._.cloneDeep(servicePage));
               });
            },

            /**
             * Метод создает обещание на сохранение страницы
             *
             * @returns {Promise<[any]>}
             * @private
             */
            _createPromiseSavePage: function () {
                let promises = [];
                promises.push(
                    this._createdPromiseByEventName('sendSitemapPromise'),
                    this._createdPromiseByEventName('sendSeo'),
                    this._createdPromiseByEventName('sendMainServicePage'),
                );

                return Promise.all(promises);
            },

            /**
             * Метод создает обещание по евенту
             *
             * @param eventName евент
             *
             * @returns {Promise<any>}
             * @private
             */
            _createdPromiseByEventName: function (eventName) {
                return new Promise((resolve, reject) => {
                    EventBus.$emit(eventName, resolve, reject);
                }, () => {});
            },

            /**
             * Метод подготовки данных
             * (нужен потому что CI не умеет валидировать многомерные массивы).
             * @returns {*}
             * @private
             */
            _prepareData: function (currentServicePageState) {
                let preparePage = this.$helpers.flatten(currentServicePageState, ['selected_categories', 'selected_services_pup']);
                preparePage.selected_categories = Object.assign({}, currentServicePageState.main.selected_categories);
                preparePage.selected_services_pup = Object.assign({}, currentServicePageState.main.selected_services_pup);

                return preparePage;
            },

            _fetchServicePageData: function () {
                this.$store.dispatch(types.LOAD_DEFAULT_SEO_PAGE_DATA);
                let pageFromState = this._.cloneDeep(this.$store.getters[types.GET_PAGE_SERVICES]);
                servicePage = ServicePageBuilder.create(pageFromState);

                if (+this.$route.params.page_id === 0) {
                    this.$store.commit(types.SET_PAGE_SERVICES, this._.cloneDeep(servicePage));
                    this.currentServicePageState.main = pageFromState.main;
                    return false;
                }
                this.isEditPage = true;
                this.$store.dispatch(types.LOAD_PAGE_SERVICES, this.$route.params.page_id).then((response) => {
                    this.relationPagesByLanguage = response.pages_by_language;

                    servicePage.changeId(response.page.main.id);
                    servicePage.changeMain(response.page.main);
                    servicePage.changeSeo(response.page.seo);
                    servicePage.changeSitemap(response.page.sitemap);

                    this.$store.commit(types.SET_PAGE_SERVICES, servicePage);
                    let tempPage = this.$store.getters[types.GET_PAGE_SERVICES];
                    this.currentServicePageState = this._.cloneDeep(tempPage);
                });
            },
        },

        created: function () {
            this._fetchServicePageData();
        },

        watch: {
            '$route': '_fetchServicePageData'
        },
    }
</script>

<style lang="sass">
    #service-page
        padding: 0 22px
        .tabs__bar
            background-color: #337ab7
            .tabs__item
                color: #ffffff
</style>