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/FiltersMenu.vue

@@ -0,0 +1,48 @@
+<template>
+  <v-expansion-panels flat accordion tile v-model="panel">
+    <v-expansion-panel v-for="filter in filtersSearchable" :key="filter.title">
+      <v-expansion-panel-header>{{
+        $t(`learning.filters.${filter.title}`) | capitalize
+      }}</v-expansion-panel-header>
+      <v-expansion-panel-content>
+        <universalFilterSelector
+          :filterTitle="filter.title"
+          :editMode="true"
+          filterType="menu"
+        />
+      </v-expansion-panel-content>
+    </v-expansion-panel>
+  </v-expansion-panels>
+</template>
+
+<script>
+import universalFilterSelector from '@/components/UniversalFilterSelector/UniversalFilterSelector'
+
+export default {
+  components: {
+    universalFilterSelector,
+  },
+  computed: {
+    filtersSearchable() {
+      return this.$store.getters.filtersSearchable
+    },
+    subMenu() {
+      return this.$store.getters.rightDrawer.subMenu
+    },
+    panel: {
+      get() {
+        return this.filtersSearchable.findIndex(
+          (filter) => filter.title === this.subMenu
+        )
+      },
+      set(v) {},
+    },
+  },
+}
+</script>
+
+<style scoped>
+.v-item-group >>> .v-list-item--active.secondary {
+  background-color: var(--v-primary-base) !important;
+}
+</style>

components/RightMenu/Notifications.vue

@@ -0,0 +1,165 @@
+<template>
+  <div>
+    <div class="mx-10 my-4">
+      <div class="d-flex">
+        <chip-user-logged v-if="$auth.loggedIn" displayName />
+        <v-spacer />
+        <v-btn
+          fab
+          text
+          @click="$store.commit('navigation/SWITCH_RIGHT_DRAWER', false)"
+        >
+          <v-icon x-small>icon-close</v-icon>
+        </v-btn>
+      </div>
+      <v-divider class="lines" />
+
+      <h3 v-if="hasNotifications" class="my-6">
+        {{ $t('rightMenu.notes') }}
+        <span class="font-weight-light">({{ notifications.length }})</span>
+      </h3>
+    </div>
+
+    <v-list two-line v-if="hasNotifications">
+      <v-list-item-group v-model="selected" multiple active-class="secondary">
+        <template v-for="(notification, index) in notifications">
+          <v-divider
+            v-if="!index && hasNotifications"
+            :key="index + notification.title"
+            class="lines"
+          />
+          <v-list-item
+            :key="`user-notification-${notification.id}`"
+            @click="markAsRead(notification.id)"
+          >
+            <template v-slot:default="{ active, toggle }">
+              <v-list-item-avatar>
+                <!-- <v-icon x-small v-if="active" color="accent">mdi-circle</v-icon>
+                <v-icon x-small v-else>mdi-circle-outline</v-icon> -->
+                <v-icon x-small v-if="!notification.read_at" color="accent"
+                  >mdi-circle</v-icon
+                >
+                <v-icon x-small v-else>mdi-circle-outline</v-icon>
+              </v-list-item-avatar>
+
+              <v-list-item-content class="font-weight-bold">
+                <v-list-item-subtitle
+                  v-text="notification.data.subject"
+                ></v-list-item-subtitle>
+                <v-list-item-subtitle
+                  class="terziary--text"
+                  v-text="notification.data.message"
+                ></v-list-item-subtitle>
+              </v-list-item-content>
+
+              <v-list-item-action>
+                <v-list-item-action-text>{{
+                  formatDate(notification.created_at)
+                }}</v-list-item-action-text>
+              </v-list-item-action>
+            </template>
+          </v-list-item>
+
+          <v-divider
+            v-if="index + 1 < notifications.length"
+            :key="index"
+            class="lines"
+          />
+        </template>
+      </v-list-item-group>
+    </v-list>
+    <v-card v-else flat>
+      <v-card-text> No notifications </v-card-text>
+    </v-card>
+
+    <!-- <v-container class="text-center d-flex flex-column">
+      <v-btn
+        color="success"
+        @click="testNotification"
+        class="my-2"
+        v-if="$store.getters.isAdmin || $store.getters.isOperator"
+        >Test Notification</v-btn
+      >
+      <v-btn
+        color="red"
+        @click="testMailNotifications"
+        class="my-2"
+        v-if="$store.getters.isAdmin || $store.getters.isOperator"
+        >Test Email Notifications
+      </v-btn>
+    </v-container> -->
+  </div>
+</template>
+
+<script>
+import dayjs from 'dayjs'
+import PageHeader from '~/components/UI/PageHeader/PageHeader'
+import chipUserLogged from '~/components/UI/ChipUserLogged/ChipUserLogged'
+
+export default {
+  components: {
+    PageHeader,
+    chipUserLogged,
+  },
+  data() {
+    return {
+      selected: [2],
+    }
+  },
+  computed: {
+    notifications() {
+      return this.$store.getters.notifications
+    },
+    hasNotifications() {
+      return this.$store.getters.hasNotifications
+    },
+  },
+  methods: {
+    formatDate(date) {
+      return dayjs(date).format('D MMM').toLowerCase()
+    },
+    async markAsRead(notificationId) {
+      if (!this.$store.getters.isReadNotification(notificationId)) return
+
+      try {
+        const response = await this.$axios.post('notifications/mark-as-read', {
+          id: notificationId,
+        })
+        await this.$auth.setUser(response.data)
+      } catch (error) {
+        console.log('markAsRead -> error', error)
+      }
+    },
+    async delete(notificationId) {
+      if (!this.$store.getters.isReadNotification(notificationId)) return
+
+      try {
+        const response = await this.$axios.post('notifications/delete', {
+          id: notificationId,
+        })
+        await this.$auth.setUser(response.data)
+      } catch (error) {
+        console.log('markAsRead -> error', error)
+      }
+    },
+
+    async testNotification() {
+      if (!this.$auth.loggedIn) return
+      try {
+        await this.$axios.post('notifications/test')
+      } catch (error) {
+        console.log('testNotification -> error', error)
+      }
+    },
+
+    async testMailNotifications() {
+      if (!this.$auth.loggedIn) return
+      try {
+        await this.$axios.get('notifications/test-mail-notifications')
+      } catch (error) {
+        console.log('testNotification -> error', error)
+      }
+    },
+  },
+}
+</script>

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>

components/RightMenu/UserMenu.vue

@@ -0,0 +1,78 @@
+<template>
+  <v-expansion-panels flat tile v-model="panel" multiple>
+    <v-expansion-panel>
+      <v-expansion-panel-header
+        class="font-weight-bold"
+        expand-icon="icon-dropdown-up"
+        >{{ $t('rightMenu.my_account') }}
+      </v-expansion-panel-header>
+      <v-expansion-panel-content>
+        <v-list-item
+          nuxt
+          exact
+          :to="localePath(`/manager/accounts/${$auth.user.id}`)"
+          @click="$store.commit('navigation/SWITCH_RIGHT_DRAWER', false)"
+        >
+          <v-list-item-content>
+            <v-list-item-subtitle> Profiel bewerken </v-list-item-subtitle>
+          </v-list-item-content>
+        </v-list-item>
+        <!--<v-list-item
+          nuxt
+          :to="localePath('/manager/accounts')"
+          exact
+          @click="$store.commit('navigation/SWITCH_RIGHT_DRAWER', false)"
+          v-if="$store.getters.isSuperAdmin"
+        >
+          <v-list-item-content>
+            <v-list-item-subtitle>
+              {{ $t('rightMenu.users_manager') }}
+            </v-list-item-subtitle>
+          </v-list-item-content>
+        </v-list-item>
+         <v-list-item>
+          <v-list-item-content>
+            <v-list-item-subtitle>
+              {{ $t('rightMenu.notification_manager') }}
+            </v-list-item-subtitle>
+          </v-list-item-content>
+        </v-list-item> -->
+
+        <v-divider class="my-2 lines" />
+
+        <v-list-item @click="logout">
+          <v-list-item-content>
+            <v-list-item-title>
+              {{ $t('rightMenu.logout') }}
+              <!-- <localeSwitch /> -->
+            </v-list-item-title>
+          </v-list-item-content>
+
+          <v-list-item-avatar>
+            <v-btn text>
+              <v-icon small>icon-logout</v-icon>
+            </v-btn>
+          </v-list-item-avatar>
+        </v-list-item>
+      </v-expansion-panel-content>
+    </v-expansion-panel>
+  </v-expansion-panels>
+</template>
+
+<script>
+// import localeSwitch from '~/components/LocaleSwitch/LocaleSwitch'
+
+export default {
+  data: () => ({
+    panel: [0],
+  }),
+  // components: {
+  //   localeSwitch,
+  // },
+  methods: {
+    async logout() {
+      await this.$auth.logout()
+    },
+  },
+}
+</script>