ServiceTabs.vue

<template>
  <div id="service-tabs">
    <v-layout align-center justify-space-between row fill-height>
      <v-flex xs10>
        <v-btn :exact="true" :to="link" color="success" class="_no_padding">Добавить страницу</v-btn>
      </v-flex>
      <v-flex xs2>
        <a href="/admin/services_categories/" class="_no_padding btn btn--flat btn--small primary--text">
          <span class="btn__content">
            Настройки категорий
          </span>
        </a>
      </v-flex>
    </v-layout>
    <v-layout>
      <v-flex xs8>
        <base-list-control-button
                :items="getLanguageList"
                keyItem="is_active"
                keyToDisplay="code"
                @changeItem="changeLanguage"
        >
        </base-list-control-button>
      </v-flex>
      <v-flex xs4>
        <v-text-field append-icon="search" label="Поиск" single-line hide-details v-model="search"></v-text-field>
      </v-flex>

      <div class="parent-service">
          <button @click="show = !show">
              <v-icon v-if="!show">label</v-icon>
          </button>
          <v-icon v-if="show" @click="show = !show">close</v-icon>
        <v-slide-x-transition>
          <v-flex class="text" v-if="show">
            Родительская страница <br>
            <a href="/admin/services/">https://netpeak.ua/admin/services/</a>
          </v-flex>
        </v-slide-x-transition>
      </div>

    </v-layout>
    <v-layout class="service-page-table">
      <v-flex xs12>
        <v-tooltip bottom class="sorting-tooltip">
          <v-icon slot="activator">help_outline</v-icon>
          <span>Порядок услуг здесь влияет на их порядок отображения на странице услуг /services</span>
        </v-tooltip>
        <v-data-table :headers="headers" :items="items" :search="search" hide-actions class="elevation-2" >
          <template slot="items" slot-scope="props">
            <td class="handle"><b>::</b></td>
            <td>{{ props.item.main.id }}</td>
            <td>
              <v-flex>
                Имя страницы: {{ props.item.main.name_page }} <br>
                <b>URL:</b>
                <v-btn
                        flat
                        small
                        color="primary"
                        :href="getFullUrl(props.item)"
                        target="_blank"
                >
                  https://netpeak.{{currentLanguage.code}}/service/{{props.item.main.segment_url}}
                </v-btn>
              </v-flex>
            </td>
            <td>
              кнопки
            </td>
            <td class="justify-center align-content-end">
              <div class="flex">
                <v-btn icon class="mx-0" @click="changeServicePageVisibility(props.item.main)">
                  <v-tooltip class="service-tooltip" left>
                    <v-icon color="darken-1" :style="getVisibility(props.item)" slot="activator">visibility</v-icon>
                    <span>Сменить видимость</span>
                  </v-tooltip>
                </v-btn>
                <router-link :to="{ path: '/services/edit/'+ currentLanguage.code +'/' + props.item.main.id }">
                  <v-tooltip class="service-tooltip" left>
                    <v-btn icon class="mx-0" slot="activator">
                      <v-icon color="blue">edit</v-icon>
                    </v-btn>
                    <span>Редактировать</span>
                  </v-tooltip>
                </router-link>
                <v-btn icon class="mx-0" @click="dropServicePage(props.item.main.id)">
                  <v-tooltip class="service-tooltip" right>
                    <v-icon color="deep-orange darken-1" slot="activator">delete</v-icon>
                    <span>Удалить</span>
                  </v-tooltip>
                </v-btn>
              </div>
            </td>
          </template>
          <template slot="pageText" slot-scope="{ pageStart, pageStop }">
            From {{ pageStart }} to {{ pageStop }}
          </template>
        </v-data-table>
      </v-flex>
      <v-tooltip left class="save-button-sort" v-if="isShowSaveSortingButton">
        <v-btn fab dark small color="primary" slot="activator" class="_no_padding" @click="saveSortingPages">
          <v-icon dark>save</v-icon>
        </v-btn>
        <span>Сохранить сортировку</span>
      </v-tooltip>
    </v-layout>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex';
  import * as types from '../../store/types';
  import BaseListControlButton from '../base/list-control-button/BaseListControlButton';
  import Sortable from 'sortablejs'

  function getLanguageByHost(languages) {
    let currentHost = window.location.host;

    return languages.filter((language) => {
      let domain = language.domains.filter((domain) => { return domain.name === currentHost;});

      if (domain.length !== 0 ) {
        return language;
      }
    })[0];
  }

  export default {
    name: 'service-tabs',
    components: {BaseListControlButton, Sortable},
    data() {
      return {
        link: '/services/edit/ru/0',
        isShowParentUrl: false,
        servicesPagesByLanguages: [],
        headers: [
          {text: '', align: 'left', sortable: true,},
          {text: 'ID', align: 'left', sortable: true, value: 'main.id'},
          {text: 'Title', align: 'left',sortable: false, value: 'main.name_page'},
          {text: 'На других языках',sortable: false, align: 'left',},
          {text: 'Операции', sortable: false, align: 'center'},
        ],
        items: [],
        search: '',
        isShowSaveSortingButton: false,
        show: false,
      }
    },

    methods: {
      changeLanguage(language) {
        this.servicesPagesByLanguages.map((item) => {
          item.is_active = false;
        });
        language.is_active = true;
        this.link = '/services/edit/' + language.code + '/0';
        this.currentLanguage = language;

        this.$store.dispatch(types.FIND_SERVICE_PAGE_BY_LANGUAGE, language.id).then((response) => {
          this.items = response;
        });
        this.isShowSaveSortingButton = false;
      },

      changeServicePageVisibility(item) {
        this.$store.dispatch(types.CHANGE_VISIBILITY, item.id).then((response) => {
          item.is_visible = response.is_visible;
        });
      },

      dropServicePage(id) {
        this.$confirm('Вы собираетесь удалить страницу', {
          buttonTrueText: 'Продолжить',
          buttonFalseText: 'Oтмена',
          color: 'warning',
          icon: 'warning',
          property: '$confirm'
        }).then(success => {
          if (success) {
            this.$store.dispatch(types.DROP_SERVICE_PAGE, id).then((response) => {});
            this.items = this.items.filter(item => item.main.id !== id);
          }
        });
      },

      getFullUrl(item) {
        return 'https://netpeak.' + this.currentLanguage.code + '/service/' + item.main.segment_url;
      },

      getVisibility(item) {
        return { color: item.main.is_visible ? 'green' : 'red'};
      },

      saveSortingPages() {
        // в будущем тут сейв сделать.
        this.isShowSaveSortingButton = false;
      }
    },

    watch: {
      languages: function(languages) {
        let currentLanguage = getLanguageByHost(languages);
        this.link = currentLanguage === undefined ? '/services/edit/ru/0' : '/services/edit/' + currentLanguage.code + '/0';
        // this.changeLanguage(currentLanguage); //FIXME
        this.currentLanguage = currentLanguage;
        // this.link = '/services/edit/' + this.currentLanguage.code + '/0';
      }
    },

    computed: {
      ...mapGetters({
        languages: types.GET_LANGUAGES_LIST,
      }),

      getLanguageList() {
        this.servicesPagesByLanguages = this.languages.map((language) => {
          let item = Object.assign({}, language);
          item.is_active = false;
          return item;
        });

        return this.servicesPagesByLanguages;
      }
    },

    mounted: function () {
      this.$store.dispatch(types.LOAD_LANGUAGES_LIST);
      this.$store.dispatch(types.CHANGE_DEFAULT_SERVICE_PAGE);
      let table = document.querySelector('.datatable tbody');
      const _self = this;
      Sortable.create(table, {
        handle: '.handle',
        onEnd({newIndex, oldIndex}) {
          const rowSelected = _self.items.splice(oldIndex, 1)[0]; // Get the selected row and remove it
          _self.items.splice(newIndex, 0, rowSelected); // Move it to the new index

          let test = _self.items.map((item) => {
            return item.main.id;
          });
          console.log(test); //FIXME
        },
      });
    },
  }
</script>

<style lang="sass">
  #service-tabs
    padding: 0 22px
    position: relative
    .handle
      cursor: move !important
      cursor: -webkit-grabbing !important
    .sorting-tooltip
      opacity: 1
      width: 24px
      height: 24px
      position: absolute
      top: 30px
      left: 15px
    .service-page-table
      position: relative
    .service-tooltip
      opacity: 1 !important
      display: inline
      z-index: 100
    .save-button-sort
      opacity: 1
      position: fixed
      right: 20px
      bottom: 20px
      i
        padding-top: 10px
    .parent-service
      position: fixed
      right: 20px
      top: 90px
      z-index: 1000
      button
        max-width: 50px
      .text
        z-index: 1000
        background: #00B8E4
        border-radius: 5px
        padding: 10px 20px
        a
          color: #000000
</style>