Feature/vue 3

.gitignore

@@ -0,0 +1 @@
+/target

frontend/package.json

@@ -14,19 +14,20 @@
     "protoc-gen-ts": "^0.8.6",
     "sass": "^1.66.1",
     "scss": "^0.2.4",
-    "vue": "^2.6.14",
-    "vue-router": "^3.5.1",
-    "vuetify": "^2.6.0"
+    "vue": "^3.3.7",
+    "vue-router": "^4.0.13",
+    "vuetify": "^3.4.0-alpha.1",
+    "webpack-plugin-vuetify": "^2.0.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-router": "~5.0.0",
     "@vue/cli-plugin-typescript": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
+    "eslint": "^8.52.0",
+    "eslint-plugin-vuetify": "^2.0.5",
     "sass-loader": "^13.3.2",
     "typescript": "4.9",
-    "vue-cli-plugin-vuetify": "~2.5.8",
-    "vue-template-compiler": "^2.6.14",
-    "vuetify-loader": "^1.7.0"
+    "vue-template-compiler": "^2.6.14"
   }
 }

frontend/src/App.vue

@@ -9,7 +9,7 @@
             <v-spacer></v-spacer>
 
             <v-btn
-                v-if="isAdmin && $router.currentRoute.fullPath !== '/user'"
+                v-if="isAdmin && $router.currentRoute.value.fullPath !== '/user'"
                 icon
                 small
                 class="mr-3"
@@ -31,48 +31,44 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-import {checkLoggedIn, KoalaLoginUrl, LoginCheckResult, Storage} from "@/api";
-
-export default Vue.extend({
-    watch: {
-        async $route(to, from) {
-            await this.performLoginCheck();
-        }
-    },
-    computed: {
-        isAdmin(): boolean {
-            return Storage.isAdmin();
-        }
-    },
-    async mounted() {
-        this.$vuetify.theme.dark = Storage.getIsDarkMode();
-
-        this.$router.onReady(async () => {
-            await this.performLoginCheck();
-        })
-    },
-    methods: {
-        toggleDarkMode() {
+import { defineComponent, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { checkLoggedIn, KoalaLoginUrl, LoginCheckResult, Storage } from "@/api";
+
+export default defineComponent({
+    setup() {
+        const route = useRoute();
+        const router = useRouter();
+
+        const isAdmin = Storage.isAdmin();
+
+        watch(() => route.fullPath, async () => {
+            await performLoginCheck();
+        });
+
+        const toggleDarkMode = () => {
             if(Storage.getIsDarkMode()) {
                 Storage.setIsDarkMode(false);
             } else {
                 Storage.setIsDarkMode(true);
             }
 
-            this.$vuetify.theme.dark = Storage.getIsDarkMode();
-        },
-        navigateToUser() {
-            if(!this.isAdmin) {
+            // Note: You'll need to adjust this part based on Vuetify's Vue 3 integration specifics
+            // this.$vuetify.theme.dark = Storage.getIsDarkMode();
+        };
+
+        const navigateToUser = () => {
+            if(!isAdmin.valueOf()) {
                 return;
             }
 
-            if(this.$router.currentRoute.fullPath !== "/user") {
-                this.$router.push('/user');
+            if(route.fullPath !== "/user") {
+                router.push('/user');
             }
-        },
-        async performLoginCheck() {
-            if (this.$router.currentRoute.path == '/logged_in') {
+        };
+
+        const performLoginCheck = async () => {
+            if (route.path == '/logged_in') {
                 return;
             }
 
@@ -83,23 +79,30 @@ export default Vue.extend({
             }
 
             if (loggedIn instanceof KoalaLoginUrl) {
-                Storage.setBeforeAuthUrl(this.$router.currentRoute.path);
+                Storage.setBeforeAuthUrl(route.path);
                 window.location.href = loggedIn.url;
                 return;
             }
 
+
             if (!(loggedIn instanceof LoginCheckResult)) {
                 // Future proofing
                 console.error("Variable 'item' is not a valid type");
                 return;
             }
 
-            // This isnt used for access control. just to show or hide portions of the UI
-            // Someone could set this manually, and it'll show the UI, but they still cant do anyhing useful.
+            // This isn't used for access control. Just to show or hide portions of the UI
+            // Someone could set this manually, and it'll show the UI, but they still can't do anything useful.
             Storage.setAdmin(loggedIn.isAdmin);
+        };
 
-            // User is logged in
-        }
+        return {
+            route,
+            isAdmin,
+            toggleDarkMode,
+            navigateToUser,
+            performLoginCheck
+        };
     }
 });
 </script>

frontend/src/components/AlbumCover.vue

@@ -9,7 +9,7 @@
                 color="primary"
                 fab
                 small
-                @click="deleteAlbum">
+                @click="DeleteAlbum">
                 <v-icon>mdi-trash-can-outline</v-icon>
             </v-btn>
             <v-btn
@@ -53,18 +53,13 @@
 </template>
 
 <script lang="ts">
-import Vue, {PropType} from 'vue';
-import {AlbumModel, deleteAlbum} from "@/views/album/album";
-import {errorText} from "@/api";
-import {getPhoto, PhotoModel} from "@/views/photo/photo";
+import { defineComponent, ref, computed, PropType } from 'vue';
+import { AlbumModel, deleteAlbum } from "@/views/album/album";
+import { errorText } from "@/api";
+import { getPhoto, PhotoModel } from "@/views/photo/photo";
+import { useRouter } from 'vue-router';
 
-interface Data {
-    snackbar: string | null,
-    coverPhoto: PhotoModel | null,
-    loading: boolean,
-}
-
-export default Vue.extend({
+export default defineComponent({
     props: {
         album: {
             type: Object as PropType<AlbumModel>,
@@ -73,37 +68,46 @@ export default Vue.extend({
         canEdit: Boolean,
         canDelete: Boolean,
     },
-    data(): Data {
-        return {
-            snackbar: null,
-            coverPhoto: null,
-            loading: true,
-        }
-    },
-    computed: {
-        coverPhotoUrl(): string | null {
-            if(this.loading || this.coverPhoto == null) {
+    setup(props, context) {
+        const snackbar = ref<string | null>(null);
+        const coverPhoto = ref<PhotoModel | null>(null);
+        const loading = ref<boolean>(true);
+        const router = useRouter();
+
+
+        const coverPhotoUrl = computed(() => {
+            if (loading.value || coverPhoto.value == null) {
                 return null;
             }
+            return coverPhoto.value.getAsSrcUrl();
+        });
 
-            return this.coverPhoto.getAsSrcUrl();
-        }
-    },
-    methods: {
-        async deleteAlbum() {
-            const result = await deleteAlbum(this.album.id);
-            if(result) {
-                this.requestUpdate();
+        const DeleteAlbum = async () => {
+            const result = await deleteAlbum(props.album.id);
+            if (result) {
+                requestUpdate();
             } else {
-                this.snackbar = errorText;
+                snackbar.value = errorText;
             }
-        },
-        requestUpdate() {
-            this.$emit('change');
-        },
-        openAlbum() {
-            this.$router.push(`/album/view?id=${this.album.id}`)
-        }
+        };
+
+        const requestUpdate = () => {
+            context.emit("update");
+        };
+
+        const openAlbum = () => {
+            router.push(`/album/view?id=${props.album.id}`);
+        };
+
+        return {
+            snackbar,
+            coverPhoto,
+            loading,
+            coverPhotoUrl,
+            DeleteAlbum,
+            requestUpdate,
+            openAlbum
+        };
     }
 })
 </script>
@@ -112,4 +116,4 @@ export default Vue.extend({
 .v-card:hover {
     cursor: pointer;
 }
-</style>
+</style>