Initial Nuxt frontend import

- Complete GGZ Ecademy Nuxt.js user portal
- Learning products browser and management
- Member management interface
- User authentication and roles
- Multi-language support (NL/EN)
- Vuex store for state management
- Component-based architecture

pages/manager/components/index.vue

@@ -0,0 +1,132 @@
+<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>