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

components/RightMenu/Settings.vue

@@ -0,0 +1,156 @@
+<template>
+  <v-expansion-panels flat accordion tile v-model="panel" multiple>
+    <v-expansion-panel>
+      <v-expansion-panel-header>Table</v-expansion-panel-header>
+      <v-expansion-panel-content>
+        <draggable v-model="columnsSorted">
+          <transition-group>
+            <div v-for="(column, i) in columnsSorted" :key="column.value">
+              <v-card class="mx-auto" outlined tile flat v-if="!column.fixed">
+                <v-card-text
+                  class="d-flex justify-space-between font-weight-black"
+                >
+                  <small class="mr-4">{{ i - 1 + ':' }}</small>
+                  <small>{{ $t(column.text) }}</small>
+                  <v-spacer></v-spacer>
+                  <v-btn
+                    icon
+                    x-small
+                    class="mr-4"
+                    @click="toggleVisibility(column.value)"
+                  >
+                    <v-icon x-small>{{
+                      column.display
+                        ? 'icon-visible-true'
+                        : 'icon-visible-false'
+                    }}</v-icon>
+                  </v-btn>
+                  <v-btn icon x-small class="mr-2">
+                    <v-icon>icon-dragdrop</v-icon>
+                  </v-btn>
+                </v-card-text>
+              </v-card>
+            </div>
+          </transition-group>
+        </draggable>
+      </v-expansion-panel-content>
+    </v-expansion-panel>
+    <v-expansion-panel>
+      <v-expansion-panel-header>Filters </v-expansion-panel-header>
+      <v-expansion-panel-content>
+        <draggable v-model="filters">
+          <transition-group>
+            <div v-for="(filter, i) in filters" :key="filter.title">
+              <v-card class="mx-auto" outlined tile flat v-if="!filter.fixed">
+                <v-card-text
+                  class="d-flex justify-space-between font-weight-black"
+                >
+                  <small class="mr-4">{{ i + 1 + ':' }}</small>
+                  <small>
+                    {{ $t(`learning.filters.${filter.title}`) }}
+                  </small>
+                  <v-spacer></v-spacer>
+                  <!-- <v-btn icon x-small class="mr-4">
+                    <v-icon>icon-visible-true</v-icon>
+                  </v-btn> -->
+                  <v-btn icon x-small class="mr-2">
+                    <v-icon>icon-dragdrop</v-icon>
+                  </v-btn>
+                </v-card-text>
+              </v-card>
+              <template v-if="i === 4">
+                <div class="my-4">Meer filters:</div>
+              </template>
+            </div>
+          </transition-group>
+        </draggable>
+      </v-expansion-panel-content>
+    </v-expansion-panel>
+  </v-expansion-panels>
+</template>
+
+<script>
+import draggable from 'vuedraggable'
+
+export default {
+  components: {
+    draggable,
+  },
+  computed: {
+    columns() {
+      return this.$store.state.learning.columns
+    },
+    subMenu() {
+      return this.$store.getters.rightDrawer.subMenu
+    },
+    panel: {
+      get() {
+        const submenus = ['columns', 'filters']
+        const index = submenus.indexOf(this.subMenu)
+        return [index]
+      },
+      set(v) {},
+    },
+    columnsSorted: {
+      get() {
+        return this.$store.state.learning.columnsSorted
+      },
+      async set(v) {
+        await this.$store.commit('learning/SORT_COLUMNS', v)
+        await this.storeLocallyColumnsSorted()
+      },
+    },
+    filters: {
+      get() {
+        return this.$store.state.learning.filters
+      },
+      async set(v) {
+        await this.$store.commit('learning/SORT_FILTERS', v)
+        await this.storeLocallyFiltersSorted()
+      },
+    },
+  },
+  methods: {
+    async storeLocallyColumnsSorted() {
+      await localStorage.setItem(
+        'learning_products_cols',
+        JSON.stringify(this.columnsSorted)
+      )
+    },
+
+    async storeLocallyFiltersSorted() {
+      const filtersIdsSorted = this.filters.map(({ id }) => id)
+
+      await localStorage.setItem(
+        'learning_products_filters',
+        JSON.stringify(filtersIdsSorted)
+      )
+    },
+
+    async toggleVisibility(value) {
+      // if no columns sorted, make a copy from columns
+      if (this.columnsSorted.length <= 0) {
+        await this.$store.dispatch('learning/setColumns')
+      }
+
+      // Find column index
+      const columnIndex = this.columnsSorted.findIndex(
+        (element) => element.value === value
+      )
+
+      // find the column to change and edit
+      let colsSortedCopy = [...this.columnsSorted]
+      colsSortedCopy[columnIndex] = {
+        ...colsSortedCopy[columnIndex],
+        display: !colsSortedCopy[columnIndex].display,
+      }
+
+      // store in colSsorted
+      await this.$store.commit('learning/SORT_COLUMNS', colsSortedCopy)
+
+      // copy in localStorage
+      this.storeLocallyColumnsSorted()
+    },
+  },
+}
+</script>