nuxt-frontend/pages/manager/learning/quality-standards/index.vue

<template>
  <div>
    <page-header class="d-flex justify-space-between">
      <span>
        {{ $t('learning.quality_standards') }}
      </span>

      <v-btn
        depressed
        :to="localePath('/manager/learning/quality-standards/new')"
        color="accent"
        rounded
      >
        <v-icon left>mdi-plus</v-icon>
        <small>{{ $t('general.add') }}</small>
      </v-btn>
    </page-header>

    <v-data-table
      :headers="headers"
      :items="filter.items"
      :items-per-page="10"
      class="pa-4 secondary"
    >
      <!-- Translates dynamically headers -->
      <template v-for="h in headers" v-slot:[`header.${h.value}`]="{ header }">
        {{ $t(h.text) }}
      </template>

      <template v-slot:item.name="{ item }">
        <strong class="txt--text" v-text="item.name"></strong>
      </template>

      <template v-slot:item.actions="{ item }">
        <v-menu offset-y>
          <template v-slot:activator="{ on }">
            <v-hover v-slot:default="{ hover }">
              <v-btn
                v-on="on"
                depressed
                :outlined="hover"
                small
                fab
                :color="hover ? 'info' : ''"
              >
                <v-icon>mdi-dots-horizontal</v-icon>
              </v-btn>
            </v-hover>
          </template>
          <v-list width="200">
            <v-list-item
              nuxt
              :to="localePath(`/manager/learning/quality-standards/${item.id}`)"
            >
              <v-list-item-icon class="mr-1">
                <v-icon small>mdi-pencil</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>
              <v-list-item-icon class="mr-1">
                <v-icon small>icon-link</v-icon>
              </v-list-item-icon>

              <v-list-item-content>
                <v-list-item-subtitle>
                  Link naar informatie
                </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="deleteItem(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 PageHeader from '~/components/UI/PageHeader/PageHeader'
import accordionCard from '@/components/UI/AccordionCard/AccordionCard'

export default {
  layout: `${process.env.CUSTOMER}Admin`,
  components: {
    PageHeader,
    accordionCard,
  },
  data() {
    return {
      headers: [
        { text: 'naam', sortable: false, value: 'title' },
        { text: '', value: 'actions' },
      ],
      filter: {},
      dialog: false,
    }
  },
  async asyncData({ $axios }) {
    try {
      const { data } = await $axios.get(`/filters`)

      const qualityStandards = data.find((f) => f.title === 'quality_standards')

      return { filter: { ...qualityStandards } }
    } catch (error) {
      console.log(error)
    }
  },
  methods: {
    close() {
      this.dialog = false
    },
    async deleteItem(itemId) {
      if (!itemId) {
        this.$notifier.showMessage({
          content: `No item to delete selected`,
          color: 'error',
          icon: 'icon-message',
        })
      }

      this.$nextTick(() => this.$nuxt.$loading.start())

      try {
        await this.$axios.delete(`/filter-items/${itemId}`)

        this.dialog = false

        this.filter.items = this.filter.items.filter((i) => i.id !== itemId)

        this.$nuxt.$loading.finish()

        this.$notifier.showMessage({
          content: `Filter Item deleted`,
          color: 'success',
          icon: 'mdi-delete',
        })
      } catch (error) {
        this.dialog = false
        this.$nuxt.$loading.finish()

        this.$notifier.showMessage({
          content: `Error trying to delete the selected Filter Item`,
          color: 'error',
          icon: 'mdi-delete',
        })
      }
    },
  },
}
</script>