gist.vue

<template lang="pug">
div
  .grid-row#wizard_head
    .col-lg-10.col-lg-offset-1.col-md-12
      h1.lot-master__step-2-heading
        span.lot-master__step-2-heading-category(v-text='draft.section')
        span.lot-master__step-2-heading-brand(v-text='draft.brand')

  .grid-row
    .col-lg-10.col-lg-offset-1.col-md-12
      .lot-master.lot-master--step-2
        #wizard.lot-master__section
          component(
            v-for='step in steps',
            :is='getComponentNameByStepId(step.id)',
            :key='step.id',
            :step='step',
            :draft='draft',
            @send='onStepSend',
            @changestep='onStepChange'
          )
            .lot-master__publish-btn(v-if='noCurrentStep')
              a.btn.btn--primary.btn--70(@click.prevent='completeWizard') Опубликовать лот

  //- (!) temp / remove in production
  mark(style="position:fixed; top:85px; left:15px; z-index:99;")
    nuxt-link(v-for="locale in availableLocales", :key="locale.code", :to="switchLocalePath(locale.code)") Change lang to {{ locale.name }}
</template>

<script>
import { mapMutations } from 'vuex';

import BaseLot from '~/store/lots/baseLotsConstructor';
import DraftLot from '~/store/lots/draftLotConstructor';
import LotsFactory from '~/store/lots/LotsFactory';

import AdditionalStep from './steps/AdditionalStep.vue';
import ColorStep from './steps/ColorStep.vue';
import CountryStep from './steps/CountryStep.vue';
import DescriptionStep from './steps/DescriptionStep.vue';
import MaterialStep from './steps/MaterialStep.vue';
import PaymentTermsStep from './steps/PaymentTermsStep.vue';
import PhotoStep from './steps/PhotoStep.vue';
import PreorderDeadlineStep from './steps/PreorderDeadlineStep.vue';
import PriceStep from './steps/PriceStep.vue';
import ShippingDateStep from './steps/ShippingDateStep.vue';
// import SizeStep from './steps/SizeStep.vue';

import WizardStep from '~/store/sell/wizardStep';

export default {
  name: 'DraftWizard',

  components: {
    ColorStep,
    MaterialStep,
    CountryStep,
    AdditionalStep,
    DescriptionStep,
    PaymentTermsStep,
    PhotoStep,
    PreorderDeadlineStep,
    PriceStep,
    ShippingDateStep,
    // SizeStep,
  },

  props: {
    draft: {
      type: [BaseLot],
      required: true,
    },
  },

  data() {
    return {
      steps: [],
    };
  },

  computed: {
    noCurrentStep() {
      return this.steps.length && !_.find(this.steps, step => step.isCurrent());
    },

    // (!) for temp lang switcher / remove in production
    availableLocales() {
      return this.$i18n.locales.filter(i => i.code !== this.$i18n.locale);
    },
  },

  watch: {
    draft(val, oldVal) {
      if (val.id !== oldVal.id) {
        // Перезапрашиваем данные по лоту, только при замене лота на другой
        this.loadWizardData();
      }
    },
  },

  mounted() {
    this.loadWizardData();
  },

  methods: {
    ...mapMutations({
      updateLot: 'lots/updateLot',
    }),

    onStepChange(stepId) {
      const reducer = (found, step) => {
        if (step.id === stepId) {
          step.state.isPast = false;
          step.state.isFuture = false;
          step.state.isCurrent = true;
          return true;
        }
        step.state.isCurrent = false;
        step.state.isPast = !found;
        step.state.isFuture = found;
        return found;
      };

      this.steps.reduce(reducer, false);
      this.$nextTick(this.scrollToCurrentStep);

      return true;
    },

    completeWizard() {
      this.$axios.post(`sell/${this.draft.id}/`).then((response) => {
        this.updateLot(LotsFactory.create(response.data.data));
        this.$router.replace(this.localePath({ name: 'sell-complete' }));
      }).catch(() => true);
    },

    onStepSend(data) {
      this.$axios.patch(`sell/${this.draft.id}/`, Object.assign(data))
        .then((response) => {
          this.updateSteps(response.data.data.wizard.steps);
          this.updateLot(LotsFactory.create(response.data.data.wizard.draft));
          if (this.draft instanceof DraftLot && this.noCurrentStep) {
            // Если это черновик и у нас не осталось не заполненных шагов, то сразу шлем запрос на завершение
            // Проверка на тип лота нужна, потому что для Returned все шаги будут всегда заполнены
            this.completeWizard();
          } else {
            this.$nextTick(this.scrollToCurrentStep);
          }
        }).catch(() => true); // Ошибки сервера обрабатываются выше
    },

    scrollToCurrentStep() {
      this.$children.forEach((children) => {
        console.log(children.step);
      });
    },

    getComponentNameByStepId(stepId) {
      const componentName = _.findKey(this.$options.components, (value, key) => key.toLowerCase() === stepId);

      return componentName ? this.$options.components[componentName].name : null;
    },

    updateSteps(responseStepsData) {
      const steps = [];

      Object.keys(responseStepsData).map((stepId) => {
        if (Object.prototype.hasOwnProperty.call(responseStepsData, stepId)) {
          steps.push(new WizardStep(Object.assign({ id: stepId }, responseStepsData[stepId])));
        }
        return true;
      });

      this.steps = steps;
    },

    loadWizardData() {
      this.$axios.get(`/sell/${this.draft.id}/`).then((response) => {
        this.updateSteps(response.data.data.wizard.steps);
      }).catch((error) => {
        console.error(error);
      });
    },
  },
};
</script>