refactor(frontend): Minimisation

frontend/package.json

@@ -26,6 +26,7 @@
         "oidc-client-ts": "^3.1.0",
         "rollup": "^4.40.0",
         "uuid": "^11.1.0",
+        "vite-plugin-vuetify": "^2.1.1",
         "vue": "^3.5.13",
         "vue-i18n": "^11.1.2",
         "vue-router": "^4.5.0",

frontend/src/main.ts

@@ -3,8 +3,6 @@ import { createApp } from "vue";
 // Vuetify
 import "vuetify/styles";
 import { createVuetify } from "vuetify";
-import * as components from "vuetify/components";
-import * as directives from "vuetify/directives";
 import i18n from "./i18n/i18n.ts";
 
 // JSON-editor
@@ -28,8 +26,6 @@ link.href = "https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.
 document.head.appendChild(link);
 
 const vuetify = createVuetify({
-    components,
-    directives,
     icons: {
         defaultSet: "mdi",
         aliases,

frontend/src/router/index.ts

@@ -1,23 +1,10 @@
-import { createRouter, createWebHistory } from "vue-router";
-import SingleAssignment from "@/views/assignments/SingleAssignment.vue";
-import SingleClass from "@/views/classes/SingleClass.vue";
-import SingleDiscussion from "@/views/discussions/SingleDiscussion.vue";
-import NotFound from "@/components/errors/NotFound.vue";
-import CreateAssignment from "@/views/assignments/CreateAssignment.vue";
-import CreateDiscussion from "@/views/discussions/CreateDiscussion.vue";
-import CallbackPage from "@/views/CallbackPage.vue";
-import UserClasses from "@/views/classes/UserClasses.vue";
-import UserAssignments from "@/views/assignments/UserAssignments.vue";
-import LearningPathPage from "@/views/learning-paths/LearningPathPage.vue";
-import LearningPathSearchPage from "@/views/learning-paths/LearningPathSearchPage.vue";
-import UserHomePage from "@/views/homepage/UserHomePage.vue";
-import SingleTheme from "@/views/SingleTheme.vue";
-import LearningObjectView from "@/views/learning-paths/learning-object/LearningObjectView.vue";
-import authService from "@/services/auth/auth-service";
-import DiscussionForward from "@/views/discussions/DiscussionForward.vue";
-import NoDiscussion from "@/views/discussions/NoDiscussion.vue";
-import OwnLearningContentPage from "@/views/own-learning-content/OwnLearningContentPage.vue";
-import { allowRedirect, Redirect } from "@/utils/redirect.ts";
+import { createRouter, createWebHistory } from 'vue-router';
+import authService from '@/services/auth/auth-service';
+import { allowRedirect, Redirect } from '@/utils/redirect.ts';
+import HomePage from '@/views/HomePage.vue';
+import LoginPage from '@/views/LoginPage.vue';
+import NotFound from '@/components/errors/NotFound.vue';
+import CallbackPage from '@/views/CallbackPage.vue';
 
 const router = createRouter({
     history: createWebHistory(import.meta.env.BASE_URL),
@@ -25,13 +12,13 @@ const router = createRouter({
         {
             path: "/",
             name: "home",
-            component: async (): Promise<unknown> => import("../views/HomePage.vue"),
+            component: HomePage,
             meta: { requiresAuth: false },
         },
         {
             path: "/login",
             name: "LoginPage",
-            component: async (): Promise<unknown> => import("../views/LoginPage.vue"),
+            component: LoginPage,
             meta: { requiresAuth: false },
         },
         {
@@ -47,25 +34,24 @@ const router = createRouter({
                 {
                     path: "",
                     name: "UserHomePage",
-                    component: UserHomePage,
+                    component: async() : Promise<unknown> => import("@/views/homepage/UserHomePage.vue"),
                 },
                 {
                     path: "assignment",
                     name: "UserAssignments",
-                    component: UserAssignments,
+                    component: async() : Promise<unknown> => import("@/views/assignments/UserAssignments.vue"),
                 },
                 {
                     path: "class",
                     name: "UserClasses",
-                    component: UserClasses,
+                    component: async() : Promise<unknown> => import("@/views/classes/UserClasses.vue"),
                 },
             ],
         },
-
         {
             path: "/theme/:theme",
             name: "Theme",
-            component: SingleTheme,
+            component: async(): Promise<unknown> => import("@/views/SingleTheme.vue"),
             props: true,
             meta: { requiresAuth: true },
         },
@@ -76,75 +62,77 @@ const router = createRouter({
                 {
                     path: "create",
                     name: "CreateAssigment",
-                    component: CreateAssignment,
+                    component: async() : Promise<unknown> => import("@/views/assignments/CreateAssignment.vue"),
                 },
                 {
                     path: ":classId/:id",
                     name: "SingleAssigment",
-                    component: SingleAssignment,
+                    component: async() : Promise<unknown> => import("@/views/assignments/SingleAssignment.vue"),
                 },
             ],
         },
         {
             path: "/class/:id",
             name: "SingleClass",
-            component: SingleClass,
-            meta: { requiresAuth: true },
-        },
-        {
-            path: "/discussion/create",
-            name: "CreateDiscussion",
-            component: CreateDiscussion,
+            component: async() : Promise<unknown> => import("@/views/classes/SingleClass.vue"),
             meta: { requiresAuth: true },
         },
         {
             path: "/discussion",
-            name: "Discussions",
-            component: NoDiscussion,
-            meta: { requiresAuth: true },
-        },
-        {
-            path: "/discussion/:hruid/:language/:learningObjectHruid",
-            name: "SingleDiscussion",
-            component: SingleDiscussion,
-            props: true,
             meta: { requiresAuth: true },
+            children: [
+                {
+                    path: "",
+                    name: "Discussions",
+                    component: async() : Promise<unknown> => import("@/views/discussions/NoDiscussion.vue"),
+                },
+                {
+                    path: "/create",
+                    name: "CreateDiscussion",
+                    component: async() : Promise<unknown> => import("@/views/discussions/CreateDiscussion.vue"),
+                },
+                {
+                    path: "/:hruid/:language/:learningObjectHruid",
+                    name: "SingleDiscussion",
+                    component: async() : Promise<unknown> => import("@/views/discussions/SingleDiscussion.vue"),
+                    props: true,
+                },
+            ]
         },
         {
             path: "/discussion-reload/:hruid/:language/:learningObjectHruid",
             name: "DiscussionForwardWorkaround",
-            component: DiscussionForward,
+            component: async() : Promise<unknown> => import("@/views/discussions/DiscussionForward.vue"),
             props: true,
             meta: { requiresAuth: true },
         },
         {
             path: "/my-content",
             name: "OwnLearningContentPage",
-            component: OwnLearningContentPage,
+            component: async() : Promise<unknown> => import("@/views/own-learning-content/OwnLearningContentPage.vue"),
             meta: { requiresAuth: true },
         },
         {
             path: "/learningPath",
+            meta: { requiresAuth: true },
             children: [
                 {
                     path: "search",
                     name: "LearningPathSearchPage",
-                    component: LearningPathSearchPage,
-                    meta: { requiresAuth: true },
+                    component: async() : Promise<unknown> => import("@/views/learning-paths/LearningPathSearchPage.vue"),
                 },
                 {
                     path: ":hruid/:language/:learningObjectHruid",
                     name: "LearningPath",
-                    component: LearningPathPage,
+                    component: async() : Promise<unknown> => import("@/views/learning-paths/LearningPathPage.vue"),
                     props: true,
-                    meta: { requiresAuth: true },
                 },
             ],
         },
         {
             path: "/learningObject/:hruid/:language/:version/raw",
             name: "LearningObjectView",
-            component: LearningObjectView,
+            component: async() : Promise<unknown> => import("@/views/learning-paths/learning-object/LearningObjectView.vue"),
             props: true,
             meta: { requiresAuth: true },
         },

frontend/src/services/auth/auth-service.ts

@@ -4,7 +4,7 @@
 
 import { computed, reactive } from "vue";
 import type { AuthState, Role, UserManagersForRoles } from "@/services/auth/auth.d.ts";
-import { User, UserManager } from "oidc-client-ts";
+import { type User, UserManager } from "oidc-client-ts";
 import { AUTH_CONFIG_ENDPOINT, loadAuthConfig } from "@/services/auth/auth-config-loader.ts";
 import authStorage from "./auth-storage.ts";
 import { loginRoute } from "@/config.ts";

frontend/src/views/own-learning-content/learning-paths/LearningPathPreviewCard.vue

@@ -11,7 +11,6 @@
     import { Language } from "@/data-objects/language";
     import type { LearningPath } from "@dwengo-1/common/interfaces/learning-content";
     import type { AxiosError } from "axios";
-    import { parse } from "uuid";
 
     const { t } = useI18n();
 

package-lock.json

@@ -117,6 +117,7 @@
                 "oidc-client-ts": "^3.1.0",
                 "rollup": "^4.40.0",
                 "uuid": "^11.1.0",
+                "vite-plugin-vuetify": "^2.1.1",
                 "vue": "^3.5.13",
                 "vue-i18n": "^11.1.2",
                 "vue-router": "^4.5.0",