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/DynamicComponents/Calendar.vue

@@ -0,0 +1,123 @@
+<template>
+  <div>
+    <v-sheet tile height="54" color="grey lighten-3" class="d-flex">
+      <v-btn icon class="ma-2" @click="$refs.calendar.prev()">
+        <v-icon x-small>icon-dropdown-left</v-icon>
+      </v-btn>
+      <v-select v-model="type" :items="types" dense outlined hide-details class="ma-2" label="type"></v-select>
+      <v-select
+        v-model="mode"
+        :items="modes"
+        dense
+        outlined
+        hide-details
+        label="event-overlap-mode"
+        class="ma-2"
+      ></v-select>
+      <v-select
+        v-model="weekday"
+        :items="weekdays"
+        dense
+        outlined
+        hide-details
+        label="weekdays"
+        class="ma-2"
+      ></v-select>
+      <v-spacer></v-spacer>
+      <v-btn icon class="ma-2" @click="$refs.calendar.next()">
+        <v-icon x-small>icon-dropdown-right</v-icon>
+      </v-btn>
+    </v-sheet>
+    <v-sheet height="600">
+      <v-calendar
+        ref="calendar"
+        v-model="value"
+        :weekdays="weekday"
+        :type="type"
+        :events="events"
+        :event-overlap-mode="mode"
+        :event-overlap-threshold="30"
+        :event-color="getEventColor"
+        @change="getEvents"
+      ></v-calendar>
+    </v-sheet>
+  </div>
+</template>
+
+<script>
+export default {
+  data: () => ({
+    type: 'month',
+    types: ['month', 'week', 'day', '4day'],
+    mode: 'stack',
+    modes: ['stack', 'column'],
+    weekday: [0, 1, 2, 3, 4, 5, 6],
+    weekdays: [
+      { text: 'Sun - Sat', value: [0, 1, 2, 3, 4, 5, 6] },
+      { text: 'Mon - Sun', value: [1, 2, 3, 4, 5, 6, 0] },
+      { text: 'Mon - Fri', value: [1, 2, 3, 4, 5] },
+      { text: 'Mon, Wed, Fri', value: [1, 3, 5] }
+    ],
+    value: '',
+    events: [],
+    colors: [
+      'blue',
+      'indigo',
+      'deep-purple',
+      'cyan',
+      'green',
+      'orange',
+      'grey darken-1'
+    ],
+    names: [
+      'Meeting',
+      'Holiday',
+      'PTO',
+      'Travel',
+      'Event',
+      'Birthday',
+      'Conference',
+      'Party'
+    ]
+  }),
+  methods: {
+    getEvents({ start, end }) {
+      const events = []
+
+      const min = new Date(`${start.date}T00:00:00`)
+      const max = new Date(`${end.date}T23:59:59`)
+      const days = (max.getTime() - min.getTime()) / 86400000
+      const eventCount = this.rnd(days, days + 20)
+
+      for (let i = 0; i < eventCount; i++) {
+        const allDay = this.rnd(0, 3) === 0
+        const firstTimestamp = this.rnd(min.getTime(), max.getTime())
+        const first = new Date(firstTimestamp - (firstTimestamp % 900000))
+        const secondTimestamp = this.rnd(2, allDay ? 288 : 8) * 900000
+        const second = new Date(first.getTime() + secondTimestamp)
+
+        events.push({
+          name: this.names[this.rnd(0, this.names.length - 1)],
+          start: this.formatDate(first, !allDay),
+          end: this.formatDate(second, !allDay),
+          color: this.colors[this.rnd(0, this.colors.length - 1)]
+        })
+      }
+
+      this.events = events
+    },
+    getEventColor(event) {
+      return event.color
+    },
+    rnd(a, b) {
+      return Math.floor((b - a + 1) * Math.random()) + a
+    },
+    formatDate(a, withTime) {
+      return withTime
+        ? `${a.getFullYear()}-${a.getMonth() +
+            1}-${a.getDate()} ${a.getHours()}:${a.getMinutes()}`
+        : `${a.getFullYear()}-${a.getMonth() + 1}-${a.getDate()}`
+    }
+  }
+}
+</script>

components/DynamicComponents/Card.vue

@@ -0,0 +1,30 @@
+<template>
+  <v-card class="mx-auto my-12" max-width="374">
+    <v-img height="250" :src="data.image" cover></v-img>
+
+    <v-card-title>{{data.title}}</v-card-title>
+
+    <v-card-text>
+      <v-row align="center" class="mx-0">
+        <v-rating :value="4.5" color="amber" dense half-increments readonly size="14"></v-rating>
+
+        <div class="grey--text ml-4">4.5 (413)</div>
+      </v-row>
+
+      <div class="my-4 subtitle-1 black--text">$ • Italian, Cafe</div>
+
+      <div>Small plates, salads & sandwiches - an intimate setting with 12 indoor seats plus patio seating.</div>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script>
+export default {
+  props: {
+    data: Object
+  },
+  data: () => ({}),
+
+  methods: {}
+}
+</script>

components/DynamicComponents/Carousel.vue

@@ -0,0 +1,47 @@
+<template>
+  <v-carousel>
+    <v-carousel-item
+      v-for="(item,i) in items"
+      :key="i"
+      :src="item"
+      reverse-transition="fade-transition"
+      transition="fade-transition"
+    >
+       <v-row class="fill-height" align="center" justify="center">
+        <div class="display-3">Title</div>
+      </v-row>
+
+      <!-- <div class="display-3 pa-4">Title</div> -->
+    </v-carousel-item>
+  </v-carousel>
+</template>
+
+<script>
+export default {
+  props: {
+    data: Object
+  },
+
+  computed: {
+    items() {
+      // Returns an array with all the imageX fields
+
+      // Iterate data where key === image__ and return the value;
+      let filtered_keys = (obj, filter) => {
+        let key,
+          keys = []
+        for (key in obj)
+          if (obj.hasOwnProperty(key) && filter.test(key)) keys.push(key)
+        return keys
+      }
+
+      const keys = filtered_keys(this.data, /img_carousel_/)
+
+      return keys.map(key => {
+        if (this.data[key]) return this.data[key]
+        return null
+      })
+    }
+  }
+}
+</script>