nuxt-frontend/components/Learning/CoursesTable.vue

<template>
  <div>
    <a target="_blank" href="/" id="root_url" v-show="false"></a>
    <v-data-table
      :headers="headers"
      :options="coursesTableOptions"
      :items="products"
      :footer-props="{ itemsPerPageOptions: [10, 25, 50, 100, -1] }"
      @update:options="handleChangesOnOptions"
      class="pa-4 secondary"
    >
      <!-- Translates dynamically headers -->
      <template v-for="h in headers" v-slot:[`header.${h.value}`]="{ header }">
        {{ $t(h.text) }}

        <div
          v-if="h.value === 'actions'"
          :key="`column-browser-${h.text}`"
          class="text-center"
        >
          <browser-columns />
        </div>
      </template>

      <template v-slot:item.cover="{ item }">
        <v-img
          :alt="item.title"
          lazy-src="/images/product-placeholder.jpg"
          :src="computeImage(item)"
          contain
          height="60px"
          width="110px"
        />
      </template>

      <template class="d-flex flex-column" v-slot:item.title="{ item }">
        <div>
          <span>
            <span
              v-if="!item.published && !item.deleted_at"
              class="info--text font-weight-thin font-italic"
              >{{ $t('general.draft') | capitalize }}</span
            >
            <span v-if="item.deleted_at" class="error--text font-italic">{{
              $t('general.deleted') | capitalize
            }}</span>
          </span>
          <span>
            <filter-items-resolver
              filterTitle="category"
              :filters="item.filters"
            />

            <filter-items-resolver gratisMode :filters="item.filters" />
          </span>
        </div>
        <strong>{{ item.title | truncate(29) }}</strong>
      </template>

      <template v-slot:item.status="{ item }">
        <filter-items-resolver filterTitle="status" :filters="item.filters" />
      </template>

      <template v-slot:item.product_type="{ item }">
        <filter-items-resolver
          filterTitle="product_type"
          :filters="item.filters"
        />
      </template>

      <template v-slot:item.course="{ item }">
        <filter-items-resolver filterTitle="course" :filters="item.filters" />
      </template>

      <template v-slot:item.actions="{ item }">
        <v-btn
          class="mx-4 white--text"
          style="height: 100%"
          :color="$vuetify.theme.dark ? 'info' : 'txt'"
          rounded
          depressed
          nuxt
          small
          :to="localePath(`/manager/learning/${item.slug}`)"
          >{{ $t('general.view') }}</v-btn
        >

        <v-menu
          offset-y
          close-on-content-click
          v-if="$store.getters.isAdmin || $store.getters.isOperator"
        >
          <template v-slot:activator="{ on, attrs }">
            <v-hover v-slot:default="{ hover }">
              <v-btn
                :color="hover ? 'info' : ''"
                :outlined="hover"
                depressed
                fab
                small
                v-bind="attrs"
                v-on="on"
                class="menu-btn"
              >
                <v-icon>icon-options</v-icon>
              </v-btn>
            </v-hover>
          </template>
          <v-list width="200">
            <v-list-item
              :to="localePath(`/manager/learning/${item.slug}?edit`)"
              nuxt
            >
              <v-list-item-icon class="mr-1">
                <v-icon small>icon-edit</v-icon>
              </v-list-item-icon>

              <v-list-item-content>
                <v-list-item-subtitle>{{
                  $t('general.edit') | capitalize
                }}</v-list-item-subtitle>
              </v-list-item-content>
            </v-list-item>

            <v-list-item @click="clone(item.id)" v-if="publishedSelected">
              <v-list-item-icon class="mr-1">
                <v-icon small>icon-duplicate</v-icon>
              </v-list-item-icon>

              <v-list-item-content>
                <v-list-item-subtitle>{{
                  $t('general.duplicate') | capitalize
                }}</v-list-item-subtitle>
              </v-list-item-content>
            </v-list-item>

            <!-- <v-list-item>
              <v-list-item-icon class="mr-1">
                <v-icon small>icon-download</v-icon>
              </v-list-item-icon>

              <v-list-item-content>
                <v-list-item-subtitle>{{
                  $t('general.download') | capitalize
                }}</v-list-item-subtitle>
              </v-list-item-content>
            </v-list-item>

            <v-list-item
              @click="shareUrl(localePath(`/manager/learning/${item.slug}`))"
            >
              <v-list-item-icon class="mr-1">
                <v-icon small>icon-share</v-icon>
              </v-list-item-icon>

              <v-list-item-content>
                <v-list-item-subtitle>{{
                  $t('general.share') | capitalize
                }}</v-list-item-subtitle>
              </v-list-item-content>
            </v-list-item> -->

            <v-dialog max-width="740" persistent v-model="dialog">
              <template v-slot:activator="{ on }">
                <v-list-item v-on="on">
                  <v-list-item-icon class="mr-1">
                    <v-icon small>icon-remove</v-icon>
                  </v-list-item-icon>

                  <v-list-item-content>
                    <v-list-item-subtitle>{{
                      $t('general.delete') | capitalize
                    }}</v-list-item-subtitle>
                  </v-list-item-content>
                </v-list-item>
              </template>
              <v-card class="primary pa-10" flat>
                <v-card-title class="headline">
                  {{
                    $t('learning.product_overview.delete_confirmation', {
                      productName: item.title,
                    })
                  }}
                </v-card-title>
                <v-card-actions>
                  <div class="ma-4">
                    <v-btn
                      @click="deleteProduct(item.id)"
                      class="mx-2"
                      color="accent"
                      depressed
                      rounded
                      >{{ $t('general.delete') }}</v-btn
                    >
                    <v-btn
                      @click="close"
                      class="mx-2"
                      color="info"
                      depressed
                      rounded
                      >{{ $t('general.cancel') }}</v-btn
                    >
                  </div>
                </v-card-actions>
              </v-card>
            </v-dialog>
          </v-list>
        </v-menu>
      </template>
    </v-data-table>
  </div>
</template>

<script>
import Vue2Filters from 'vue2-filters'
import FilterItemsResolver from '~/components/Learning/FilterItemsResolver'
import BrowserColumns from '~/components/Learning/BrowserColumns'

export default {
  mixins: [Vue2Filters.mixin],
  props: {
    published: {
      type: Array,
      required: true,
    },
    drafts: {
      type: Array,
      required: true,
    },
    deleted: {
      type: Array,
      required: true,
    },
    selector: {
      type: String,
      required: true,
    },
  },
  components: {
    FilterItemsResolver,
    BrowserColumns,
  },
  data() {
    return {
      dialog: false,
      page: 1,
    }
  },

  watch: {
    dialog(val) {
      val || this.close()
    },
  },

  computed: {
    noImage() {
      return require(`@/assets/img/no_image.png`)
    },
    headers() {
      return this.$store.getters.columnsSortedSubset
    },
    columns() {
      return this.$store.state.learning.columns
    },
    products() {
      if (!['published', 'drafts', 'deleted'].includes(this.selector)) return []
      return this[this.selector]
    },
    publishedSelected() {
      return this.selector === 'published'
    },
    draftsSelected() {
      return this.selector === 'drafts'
    },
    deletedSelected() {
      return this.selector === 'deleted'
    },
    coursesTableOptions() {
      return this.$store.state.learning.coursesTableOptions
    },
  },

  async mounted() {
    // If cols preferences saved in localstorage
    if (localStorage.getItem('learning_products_cols')) {
      // Get them
      const colsLocalPreferences = JSON.parse(
        localStorage.getItem('learning_products_cols')
      )

      // Local copy and extract values to sort columns
      let colsRestored = [...this.columns]
      const colsLocalPreferencesValues = colsLocalPreferences.map(
        ({ value }) => value
      )

      // Sort by local preferences
      colsRestored.sort(
        (a, b) =>
          colsLocalPreferencesValues.indexOf(a.value) -
          colsLocalPreferencesValues.indexOf(b.value)
      )

      // update visibility by local preferences
      colsLocalPreferences.forEach((col) => {
        if (col.hasOwnProperty('display')) {
          const colIndex = colsRestored.findIndex(
            (el) => el.value === col.value
          )

          colsRestored[colIndex] = {
            ...colsRestored[colIndex],
            display: col.display,
          }
        }
      })

      // Send to Store
      await this.$store.dispatch('learning/setColumns', colsRestored)
    }

    // Initialize columns ordered
    if (this.$store.state.learning.columnsSorted.length <= 0) {
      await this.$store.dispatch('learning/setColumns')
    }
  },

  async created() {
    // Get datatable options from localstorage if present
    if (
      localStorage.getItem(
        `courses_table_options_user${this.$store.getters.loggedInUser.id || ''}`
      )
    ) {
      const options = JSON.parse(
        localStorage.getItem(
          `courses_table_options_user${
            this.$store.getters.loggedInUser.id || ''
          }`
        )
      )

      this.$store.commit('learning/SET_COURSES_TABLE_OPTIONS', options)
    }
  },

  methods: {
    close() {
      this.dialog = false
    },

    save() {
      this.close()
    },

    computeImage(item) {
      if (item.cover.full) return item.cover.full
      if (item.video) return '/images/video-placeholder.jpg'
      return '/images/product-placeholder.jpg'
    },

    async clone(productId) {
      if (!productId) {
        this.$notifier.showMessage({
          content: `No product to clone selected`,
          color: 'error',
          icon: 'icon-message',
        })
      }

      try {
        this.$nextTick(() => this.$nuxt.$loading.start())
        const response = await this.$axios.post('/learning-products/clone', {
          product_id: productId,
        })
        this.$emit('reload-learning-products')

        this.$notifier.showMessage({
          content: `Product cloned in Drafts`,
          color: 'success',
          icon: 'icon-message',
        })

        this.$nuxt.$loading.finish()
      } catch (error) {
        console.log('clone -> error', error)
        this.$nuxt.$loading.finish()
        this.$notifier.showMessage({
          content: `Error trying to clone the selected product`,
          color: 'error',
          icon: 'mdi-delete',
        })
      }
    },

    async deleteProduct(productId) {
      if (!productId) return
      this.dialog = false
      this.$nextTick(() => this.$nuxt.$loading.start())
      await this.$store.dispatch('learning/deleteProduct', productId)
      this.$router.push(this.localePath('/manager/learning'))
    },

    async shareUrl(url) {
      if (!url) return

      const root_url = document.getElementById('root_url').href

      // Remove last slash from root url
      const full_url = `${root_url.slice(0, -1)}${url}`

      try {
        await navigator.clipboard.writeText(full_url)

        this.$notifier.showMessage({
          content: `Url Copied in clipboard `,
          color: 'success',
          icon: 'mdi-check',
        })
      } catch (error) {
        console.log('shareUrl -> error', error)
      }
    },

    async handleChangesOnOptions(options) {
      this.$store.commit('learning/SET_COURSES_TABLE_OPTIONS', options)
      await localStorage.setItem(
        `courses_table_options_user${
          this.$store.getters.loggedInUser.id || ''
        }`,
        JSON.stringify(options)
      )
    },
  },
}
</script>

<style scoped>
table tr a.v-btn {
  opacity: 0;
}
table tr:hover a.v-btn {
  opacity: 1;
}
.v-list-item:hover >>> .v-list-item__icon i,
.v-list-item:hover >>> .v-list-item__content .v-list-item__subtitle {
  color: var(--v-info-base) !important;
}
.v-data-table >>> .v-data-table-header th:last-child,
.v-data-table >>> .v-data-table-header th:nth-child(3) {
  position: relative;
}
.v-data-table >>> .v-data-table-header th:last-child::before,
.v-data-table >>> .v-data-table-header th:nth-child(3)::before {
  content: '';
  position: absolute;
  left: -1px;
  height: 20px;
  top: 50%;
  transform: translateY(-50%);
  border-left: 1px solid rgba(0, 0, 0, 0.12) !important;
}
.v-data-table >>> .v-data-table-header tr th {
  border-bottom: none !important;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.v-data-table td .menu-btn {
  background-color: unset !important;
}
.v-data-table >>> td {
  color: var(--v-txt-base) !important;
}
.v-data-table >>> thead th {
  white-space: nowrap;
}
.v-data-table >>> td:first-child {
  padding-right: 0px !important;
}
.v-data-table >>> td:last-child {
  display: flex;
  align-items: center;
  justify-content: center;
}
.v-data-table >>> td:first-child .v-image {
  margin-right: -18px;
}
.v-data-table >>> td:last-child,
.v-data-table >>> td:nth-child(3) {
  position: relative;
}
.v-data-table >>> td:last-child::before,
.v-data-table >>> td:nth-child(3)::before {
  content: '';
  position: absolute;
  left: -1px;
  height: 60px;
  top: 50%;
  transform: translateY(-50%);
  border-left: 1px solid rgba(0, 0, 0, 0.12) !important;
}
.v-data-table >>> .v-data-table__divider {
  border-right: none !important;
}
</style>