nuxt-promote-yourself/pages/instructor/course/_id/manage.vue

<template>
  <div class="manage-page">
    <Header
      title="Some very nice course name"
      exitLink="/instructor/courses">
      <template #actionMenu>
        <div class="full-page-takeover-header-button">
          <button
            @click="updateCourse"
            :disabled="!canUpdateCourse"
            class="button is-primary is-inverted is-medium is-outlined">
            Save
          </button>
        </div>
      </template>
    </Header>
    <div class="course-manage">
      <div class="container">
        <div class="columns">
          <div class="column is-3 p-lg">
            <!-- <aside class="menu is-hidden-mobile"> -->
            <aside class="menu">
              <p class="menu-label">
                Course Editing
              </p>
              <ul class="menu-list">
                <li>
                  <!-- display TargetStudents -->
                  <a @click.prevent="navigateTo(1)"
                     :class="activeComponentClass(1)">Target Your Students
                  </a>
                </li>
                <li>
                  <!-- display LandingPage -->
                  <a 
                    :class="activeComponentClass(2)"
                    @click.prevent="navigateTo(2)">
                    Course Landing Page
                  </a>
                </li>
              </ul>
              <p class="menu-label">
                Course Managment
              </p>
              <ul class="menu-list">
                <li>
                  <!-- display Price -->
                  <a 
                    :class="activeComponentClass(3)"
                    @click.prevent="navigateTo(3)">
                    Price
                  </a>
                </li>
                <li>
                  <!-- display Status -->
                  <a 
                    :class="activeComponentClass(4)"
                    @click.prevent="navigateTo(4)">
                    Status
                  </a>
                </li>
              </ul>
            </aside>
          </div>
          <div class="column">
            <!-- 
            <TargetStudents/>
            <LandingPage/>
            <Price/>
            <Status/> -->
            <keep-alive>
              <component
              @courseValueUpdated="handleCourseUpdate"
              :is="activeComponent"
              :course="course"/>
            </keep-alive>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from '~/components/shared/Header'
import TargetStudents from '~/components/instructor/TargetStudents'
import LandingPage from '~/components/instructor/LandingPage'
import Price from '~/components/instructor/Price'
import Status from '~/components/instructor/Status'
import MultiComponentMixin from '~/mixins/MultiComponentMixin'
import { mapState } from 'vuex'

export default {
  layout: 'instructor',
  components: { 
    Header,
    TargetStudents,
    LandingPage,
    Price,
    Status
  },
  mixins: [MultiComponentMixin],
  data() {
    return {
      steps : ['TargetStudents', 'LandingPage', 'Price', 'Status'],
    }
  },
  async fetch({store, params}) {
    console.log('course/_id/manage.vue fetch call')
    await store.dispatch('instructor/course/fetchCourseById', params.id)
    console.log('course/_id/manage.vue fetch done')
    console.log('course/_id/manage.vue category/fetchCategories call')
    await store.dispatch('category/fetchCategories')
    console.log('course/_id/manage.vue category/fetchCategories done')
  },
  computed: {
    ...mapState({
      course: ({instructor}) => instructor.course.item,
      canUpdateCourse: ({instructor}) => instructor.course.canUpdateCourse
    })
  },
  methods: {
    handleCourseUpdate({value, field}){
      this.$store.dispatch('instructor/course/updateCourseValue', {field, value})
    },
    async updateCourse() {
      try{
        await this.$store.dispatch('instructor/course/updateCourse')
        this.$toasted.success('Course has been succefuly updated!', {duration: 3000})
      }catch(error){
        this.$toasted.error('Course cannot be updated!'), {duration: 3000}
      }
    },
  }
}
</script>

<style lang="scss">
  .manage-page {
    .label-info {
      font-size: 13px;
      color: gray;
      font-style: italic;
    }
    .course-manage {
      padding-top: 40px;
      .menu {
        padding-top: 30px;
        &-label {
          font-size: 20px;
          color: black;
        }
        &-list {
          >li {
            font-size: 18px;
            margin-top: 10px;
            > a {
              &.is-active {
                border-left: 3px solid #58529f;
                background-color: transparent;
                color: inherit;
              }
            }
          }
        }
      }
      .card {
        &-section {
          padding: 40px;
        }
        &-header {
          &-title {
            padding: 0;
            color: #8F99A3;
            font-weight: 400;
            font-size: 25px;
          }
        }
      }
    }
  }
</style>