nuxt-frontend/pages/manager/components/index.vue

<template>
  <div>
    <page-header v-if="components">COMPONENTS ({{components.length}})</page-header>

    <v-sheet class="mx-auto pa-4" tile>
      <v-data-table :search="search" :headers="headers" :items="components" :items-per-page="10">
        <template v-slot:top>
          <v-toolbar flat>
            <v-text-field
              v-model="search"
              class="hidden-sm-and-down"
              hide-details
              flat
              append-icon="mdi-filter"
              placeholder="Filter..."
              light
              outlined
              dense
            ></v-text-field>
            <v-spacer></v-spacer>
            <v-btn depressed to="/manager/components/new">
              <v-icon small>icon-add</v-icon>
            </v-btn>
          </v-toolbar>
        </template>
        <template v-slot:item.actions="{ item }">
          <v-btn
            color="info"
            class="mr-2"
            small
            dark
            tile
            depressed
            nuxt
            :to="localePath(`/manager/components/${item.id}`)"
          >
            <v-icon small>mdi-file-edit</v-icon>
          </v-btn>

          <v-dialog v-model="dialog" persistent max-width="500">
            <template v-slot:activator="{ on }">
              <v-btn color="error" v-on="on" small dark tile depressed>
                <v-icon small>mdi-delete</v-icon>
              </v-btn>
            </template>
            <v-card>
              <v-card-title class="headline">Do you want to delete this component?</v-card-title>
              <v-card-text>Deleting this component it will disappear from all the pages where it is attached and won't be possible to restore it anymore.</v-card-text>
              <v-card-actions>
                <v-btn color="info" @click="dialog = false" tile depressed>back</v-btn>
                <v-spacer></v-spacer>
                <v-btn color="error" @click="deleteComponent(item.id)" tile depressed>Yes, Delete</v-btn>
              </v-card-actions>
            </v-card>
          </v-dialog>
        </template>
      </v-data-table>
    </v-sheet>
  </div>
</template>

<script>
import PageHeader from '~/components/UI/PageHeader/PageHeader'

export default {
  layout: `${process.env.CUSTOMER}Admin`,
  components: {
    PageHeader
  },
  data: () => ({
    dialog: false,
    search: '',
    components: [],
    componentToDelete: null,
    headers: [
      { text: 'id', sortable: true, value: 'id' },
      { text: 'Name', sortable: true, value: 'name' },
      // { text: 'Description', value: 'description' },
      // { text: 'Created', value: 'created_at', sortable: true },
      { text: 'Updated', value: 'updated_at', sortable: true },
      { text: 'Actions', value: 'actions', sortable: false }
    ]
  }),

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

  async asyncData({ $axios }) {
    const response = await $axios.get('/components')
    return { components: response.data }
  },

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

    save() {
      this.close()
    },

    async deleteComponent(id) {
      try {
        const response = await this.$axios.delete(`/components/${id}`)
        this.components = this.components.filter(
          component => component.id !== id
        )
        this.dialog = false

        this.$store.commit('snackbar/set', {
          color: 'success',
          display: true,
          text: 'Component deleted',
          icon: 'mdi-delete'
        })
      } catch (error) {
        this.dialog = false
        this.$store.commit('snackbar/set', {
          color: 'error',
          display: true,
          text: 'Error on deleting component',
          icon: 'mdi-delete'
        })
        console.log('TCL: deleteComponent -> error', error)
      }
    }
  }
}
</script>