nuxt-promote-yourself/pages/instructor/heroes/index.vue

<template>
  <div class="heroes-page">
    <div class="container">
      <h1 class="title">Course Heroes</h1>
      <portal-target name="modal-view-hero-1" />
      <portal-target name="modal-view-hero-2" />
      <table class="heroes-table table is-responsive">
        <thead>
          <tr class="main-table-row">
            <th>Image</th>
            <th>Title</th>
            <th>Subtitle</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          <tr @click="openModal('1')" class="table-row">
            <td>Hero Image</td>
            <td>Hero Title</td>
            <td>Hero Subtitle</td>
            <td>Active/ Inactive</td>
            <td class="modal-td" v-show="false">
            <portal to="modal-view-hero-1">
              <Modal
                ref="modal-1"
                :showButton="false"
                actionTitle="Make Active"
                openTitle="Favorite"
                title="Make Course Hero">
                <div>
                  <div class="subtitle">
                    Title: Some Title
                  </div>
                  <div class="subtitle">
                    Subtitle: Some Subtitle
                  </div>
                  <figure class="image is-3by1">
                    <img>
                  </figure>
                </div>
              </Modal>
            </portal>
            </td>
          </tr>
          <tr @click="openModal('2')" class="table-row">
            <td>Hero Image</td>
            <td>Hero Title</td>
            <td>Hero Subtitle</td>
            <td>Active/ Inactive</td>
            <td class="modal-td" v-show="false">
            <portal to="modal-view-hero-2">
              <Modal
                ref="modal-2"
                :showButton="false"
                actionTitle="Make Active"
                openTitle="Favorite"
                title="Make Course Hero">
                <div>
                  <div class="subtitle">
                    Title: Some Title 2
                  </div>
                  <div class="subtitle">
                    Subtitle: Some Subtitle 2
                  </div>
                  <figure class="image is-3by1">
                    <img>
                  </figure>
                </div>
              </Modal>
            </portal>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
import Modal from '~/components/shared/Modal'
export default {
  middleware: 'admin',
  components: {
    Modal
  },
  computed: {
    heroes() {
      return this.$store.state.instructor.heroes
    }
  },
  async fetch({store}) {
    await store.dispatch('instructor/fetchHeroes')
  },
  methods: {
    openModal(modalId) {
      this.$refs[`modal-${modalId}`].openModal()
    }
  }
}
</script>
<style scoped lang="scss">
  .heroes-page {
    max-width: 1000px;
    margin: 0 auto 5rem auto;
    margin-top: 40px;
  }
  .title {
    font-size: 45px;
    font-weight: bold;
  }
  .isActive {
  }
  .table-row {
    margin: 20px;
    &.isActive {
      background-color: #dfffe1
    }
    &:hover {
      cursor: pointer;
      background-color: #e4e4e4;
    }
  }
</style>