nuxt-promote-yourself/pages/instructor/course/create.vue

<template>
  <div class="full-page-takeover-window">
    <div class="full-page-takeover-page">
      <Header
        :title="`Step ${activeStep} of ${stepsLength}`"
        exitLink="/instructor/courses" />
      <div class="full-page-takeover-header-bottom-progress">
        <div :style="{width: progress}"
             class="full-page-takeover-header-bottom-progress-highlight">
        </div>
      </div>
      <div class="course-create full-page-takeover-container">
        <div class="container">
          <!-- <CourseCreateStep1 v-if="activeStep === 1"/>
          <CourseCreateStep2 v-if="activeStep === 2"/> -->
          <keep-alive>
            <component 
              @stepUpdated="mergeFormData"
              :is="activeComponent"
              ref="activeComponent"/>
          </keep-alive>
        </div>
        <div class="full-page-footer-row">
          <div class="container">
            <div class="full-page-footer-col">
              <div v-if="!isFirstStep">
                <a @click.prevent="_previousStep" class="button is-large">Previous</a>
              </div>
              <div v-else class="empty-container">
              </div>
            </div>
            <div class="full-page-footer-col">
              <div>
                <button
                  v-if="!isLastStep"
                  :disabled="!canProceed"
                  @click.prevent="_nextStep"
                  class="button is-large float-right">
                  Continue
                </button>
                <button
                  v-else
                  :disabled="!canProceed"
                  @click="createCourse"
                  class="button is-success is-large float-right">
                  Confirm
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from '~/components/shared/Header'
import CourseCreateStep1 from '~/components/instructor/CourseCreateStep1'
import CourseCreateStep2 from '~/components/instructor/CourseCreateStep2'
import MultiComponentMixin from '~/mixins/MultiComponentMixin'

export default {
  layout: 'instructor',
  components: {
    Header,
    CourseCreateStep1,
    CourseCreateStep2,
  },
  mixins: [MultiComponentMixin],
  data() {
    return {
      activeStep : 1,
      steps: ['CourseCreateStep1', 'CourseCreateStep2'],
      canProceed: false,
      form: {
        title: '',
        category: ''
      }
    }
  },
  methods : {
    _nextStep (){
      // this.activeStep++
      // this.canProceed = false
      this.nextStep()
      this.$nextTick(() => this.canProceed = this.$refs.activeComponent.isValid)
      // this.canProceed = this.$refs.activeComponent.isValid
    },
    _previousStep (){
      // this.activeStep--
      // this.canProceed = true
      this.previousStep()
    },
    mergeFormData({data, isValid}) {
      this.form = {...this.form, ...data}
      this.canProceed = isValid
    },
    async createCourse() {
      console.log('course/create.vue createCourse call store.dispatch-createCourse')
      const result = await this.$store.dispatch('instructor/course/createCourse', this.form)
      console.log('course/create.vue createCourse done store.dispatch-createCourse')
      this.$router.push('/instructor/courses')
    }
  },
  async fetch({store}) {
    console.log('create.vue call fetch')
    await store.dispatch('category/fetchCategories')
    console.log('create.vue done fetch')
  },
}
</script>

<style lang="scss">
  .float-right {
    float: right;
  }
  .empty-container {
    width: 1px;
    height: 1px;
  }
  .course-create {
    &-wrapper {
      margin-top: 60px;
      text-align: center;
    }
    &-headerText {
      font-weight: 500;
      line-height: 1.1;
      margin-top: 21px;
      margin-bottom: 10.5px;
      font-size: 36px;
      font-weight: 300;
    }
    &-subtitle {
      font-size: 24px;
      font-weight: 300;
      margin-top: 21px;
      margin-bottom: 10.5px;
    }
    &-form {
      margin-top: 60px;
      &-group {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      &-field {
        min-width: 552px;
      }
      .select {
        width: 100%;
        >select {
          width: 100%;
        }
      }
    }
  }
</style>