Port to TS

frontend/index.html

@@ -14,6 +14,6 @@
       <strong>We're sorry but Chorister doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

frontend/package.json

@@ -24,6 +24,7 @@
     "@vuelidate/validators": "^2.0.0",
     "axios": "^0.21.1",
     "depcheck": "^1.4.3",
+    "effect": "^2.0.3",
     "moment": "^2.29.4",
     "oidc-client": "^1.11.5",
     "pinia": "^2.0.23",
@@ -40,6 +41,7 @@
     "@typescript-eslint/parser": "^6.17.0",
     "eslint": "^8.39.0",
     "eslint-plugin-vue": "^9.11.0",
+    "prettier": "^3.1.1",
     "typescript": "^5.3.3",
     "vue-tsc": "^1.8.27"
   },
@@ -51,10 +53,21 @@
     },
     "extends": [
       "plugin:vue/essential",
-      "eslint:recommended"
+      "eslint:recommended",
+      "@vue/typescript/recommended",
+      "prettier"
+    ],
+    "parser": "vue-eslint-parser",
+    "parserOptions": {
+      "parser": "@typescript-eslint/parser"
+    },
+    "plugins": [
+      "@typescript-eslint",
+      "prettier"
     ],
     "rules": {
       "no-unused-vars": "off",
+      "prettier/prettier": "error",
       "vue/multi-word-component-names": "off"
     }
   },

frontend/src/api.ts

@@ -0,0 +1,141 @@
+import axios from 'axios'
+import { useAuth } from "@/stores/authStore";
+import { Invite, Song, Score, Category, Setlist, SetlistEntry, Choir, User, WithEmbedded, AcceptInvite, NewChoirRegistration } from "@/types";
+
+const SERVER_URL = import.meta.env.VITE_APP_BASE_URL + '/api';
+const auth = useAuth();
+const instance = axios.create({
+    baseURL: SERVER_URL,
+    timeout: 5000
+});
+instance.interceptors.request.use(
+    async config => {
+        let accessToken = await auth.getAccessToken()
+        if(accessToken) {
+            config.headers.common.Authorization = 'Bearer ' + accessToken
+        }
+        return config
+    }
+)
+
+const functions = {
+
+    getGetConfig: (embeddedAttributeName: string) => {
+        return {
+            transformResponse: [
+                function(data: string) {
+                    return data ? JSON.parse(data)._embedded[embeddedAttributeName] : data;
+                }
+            ]
+        }
+    },
+
+    // Generic
+
+    delete: (resourceUri: string) => instance.delete(resourceUri),
+
+    // Register
+
+    register: (request: NewChoirRegistration) => instance.post('registration', request),
+
+    // Invites
+
+    getInvites: () => instance.get<Array<Invite>>('invites', functions.getGetConfig('invites')),
+
+    updateInviteForId: (id: number, invite: any) => instance.put('invites/' + id, invite),
+
+    getInviteByToken: (token: string) => instance.get<Invite>('invite?token=' + token),
+
+    acceptInvite: (request: AcceptInvite) => instance.post('invite/accept', request),
+
+    getToken: () => instance.get<string>('choir/invitelink'),
+
+    deleteToken: () => instance.delete('choir/invitelink'),
+
+    // Songs
+
+    getSongById: (id: number) => instance.get<Song>('songs/' + id),
+
+    getAllSongs: () => instance.get<Array<Song>>('songs', functions.getGetConfig('songs')),
+
+    getSongsByCategoryId: (categoryId: number) => instance.get<Array<Song>>('songs/search/bycategory?id=' + categoryId, functions.getGetConfig('songs')),
+
+    createNewSong: (song: any) => instance.post<Song>('songs', song),
+
+    updateSongForId: (id: number, song: any) => instance.put<Song>('songs/' + id, song),
+
+    deleteSongForId: (id: number) => instance.delete('songs/' + id),
+
+    // Scores
+
+    getScoreById: (scoreId: number) => instance.get<Score>('scores/' + scoreId),
+
+    getScoresBySongId: (songId: number) => instance.get<Array<Score>>('songs/' + songId + '/scores', functions.getGetConfig('scores')),
+
+    createNewScore: (score: any) => instance.post('scores', score),
+
+    updateScoreForId: (id: number, score: any) => instance.put('scores/' + id, score),
+
+    deleteScoreForId: (id: number) => instance.delete('scores/' + id),
+
+    // Categories
+
+    getCategoryById: (id: number) => instance.get<Category>('categories/' + id),
+
+    getAllCategories: () => instance.get<Array<Category>>('categories', functions.getGetConfig('categories')),
+
+    // Song categories
+
+    getSongCategories: (songId: number) => instance.get<Array<Category>>('songs/' + songId + '/categories', functions.getGetConfig('categories')),
+
+    postSongCategories: (songId: number, categoryUris: string[]) => instance.post('songs/' + songId + '/categories', categoryUris.join('\r\n'), {
+        headers: {
+            'content-type': 'text/uri-list'
+        }
+    }),
+
+    deleteSongCategory: (songId: number, categoryId: number) => instance.delete('songs/' + songId + '/categories/' + categoryId),
+
+    // Setlists
+
+    getSetlistById: (id: number) => instance.get<Setlist>('setlists/' + id),
+
+    getAllSetlists: () => instance.get<Array<Setlist>>('setlists', functions.getGetConfig('setlists')),
+
+    createNewSetlist: (setlist: any) => instance.post('setlists', setlist),
+
+    updateSetlistForId: (id: number, setlist: any) => instance.put('setlists/' + id, setlist),
+
+    deleteSetlistForId: (id: number) => instance.delete('setlists/' + id),
+
+    // Setlist songs
+
+    getSetlistEntries: (setlistId: number) => instance.get<Array<SetlistEntry & WithEmbedded<"song", Song>>>('setlists/' + setlistId + '/entries', functions.getGetConfig('setlistEntries')),
+
+    postSetlistEntry: (entry: any) => instance.post("setlistEntries", entry, {
+        headers: {
+            'content-type': 'application/json'
+        }
+    }),
+
+    deleteSetlistEntry: (setlistEntryId: string) => instance.delete("setlistEntries/" + setlistEntryId),
+
+    // My Choir
+
+    getChoirs: () => instance.get<Array<Choir>>('choirs', functions.getGetConfig('choirs')),
+
+    updateChoirForId: (id: number, choir: any) => instance.post('choirs/' + id, choir),
+
+    // Users
+
+    getUsers: () => instance.get<Array<User>>('users',  functions.getGetConfig('users')),
+
+    getUserById: (userId: number) => instance.get<User>('users/' + userId),
+
+    getUser: () => instance.get<User>('user'),
+
+    updateUserForId: (id: number, user: any) => instance.patch('users/' + id, user),
+
+}
+
+export default functions;

frontend/src/components/AppHeader.vue

@@ -47,28 +47,19 @@
   </nav>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { useAuth } from "@/stores/authStore";
 import { inject, onMounted } from "vue";
 import { storeToRefs } from "pinia";
 
+// State
+const auth = useAuth();
+const { user, isLoggedIn } = storeToRefs(auth);
 
-export default {
-    setup() {
-        const logger = inject('vuejs3-logger');
+// Computed
+onMounted(() => {});
 
-        // State
-        const auth = useAuth();
-        const { user, isLoggedIn } = storeToRefs(auth);
-
-        // Computed
-        onMounted(() => {});
-
-        // Methods
-        const onLogin = () => auth.login()
-        const onLogout = () => auth.logout()
-
-        return { auth, user, isLoggedIn, onLogin, onLogout }
-    }
-}
+// Methods
+const onLogin = () => auth.login()
+const onLogout = () => auth.logout()
 </script>