feat: pagination

frontend/src/assets/lang/nl.json

@@ -21,8 +21,8 @@
         "dashboard": {
             "courses": "Mijn vakken",
             "projects": "Lopende projecten",
-            "no_projects": "Geen projecten beschikbaar voor dit academiejaar.",
-            "no_courses": "Geen vakken beschikbaar voor dit academiejaar."
+            "no_projects": "Geen projecten gevonden.",
+            "no_courses": "Geen vakken gevonden."
         },
         "login": {
             "title": "Inloggen",
@@ -48,7 +48,8 @@
           "description": "Beschrijving",
           "year": "Academiejaar",
           "search": {
-
+              "title": "Zoek een vak",
+              "results": "{0} vakken gevonden voor ingestelde filters"
           }
       }
     },

frontend/src/components/courses/CourseList.vue

@@ -36,7 +36,7 @@ const { t } = useI18n();
             </template>
             <template v-else>
                 <div class="col-12">
-                    <p>{{ t('views.dashboard.no_courses') }}</p>
+                    <p class="mt-0">{{ t('views.dashboard.no_courses') }}</p>
                 </div>
             </template>
         </template>

frontend/src/composables/filters/filter.ts

@@ -0,0 +1,15 @@
+import { type Ref, ref } from 'vue';
+import { type Filter } from '@/types/filter/Filter.ts';
+
+export interface FilterState {
+    filter: Ref<Filter>;
+}
+
+export function useFilter(initial: Filter): FilterState {
+    /* State */
+    const filter = ref<Filter>(initial);
+
+    return {
+        filter,
+    };
+}

frontend/src/composables/filters/paginator.ts

@@ -0,0 +1,67 @@
+import { computed, type Ref, ref, watch } from 'vue';
+import { type LocationQuery, useRoute, useRouter } from 'vue-router';
+
+export interface PaginatorState {
+    page: Ref<number>;
+    pageSize: Ref<number>;
+    first: Ref<number>;
+    paginate: (newFirst: number) => Promise<void>;
+}
+
+export function usePaginator(
+    initialPage: number = 1,
+    initialPageSize: number = 20,
+): PaginatorState {
+    /* Composables */
+    const { query } = useRoute();
+    const { push } = useRouter();
+
+    /* State */
+    const page = ref<number>(initialPage);
+    const pageSize = ref<number>(initialPageSize);
+
+    /* Watchers */
+    watch(
+        () => query,
+        (query: LocationQuery) => {
+            if (query.page !== undefined) {
+                page.value = parseInt(query.page as string);
+            }
+
+            if (query.pageSize !== undefined) {
+                pageSize.value = parseInt(query.pageSize as string);
+            }
+        },
+        { immediate: true },
+    );
+
+    /* Computed */
+    const first = computed({
+        get: () => (page.value - 1) * pageSize.value,
+        set: (value: number) =>
+            (page.value = Math.floor(value / pageSize.value) + 1),
+    });
+
+    /**
+     * Paginate using a new first item index.
+     *
+     * @param newFirst
+     */
+    async function paginate(newFirst: number): Promise<void> {
+        first.value = newFirst;
+
+        await push({
+            query: {
+                page: page.value,
+                pageSize: pageSize.value,
+            },
+        });
+    }
+
+    return {
+        page,
+        pageSize,
+        first,
+        paginate,
+    };
+}

frontend/src/composables/services/courses.service.ts

@@ -8,15 +8,20 @@ import {
     deleteId,
     getPaginatedList,
 } from '@/composables/services/helpers.ts';
-import { type Filters, type PaginationResponse } from '@/types/Pagination.ts';
+import { type PaginatorResponse } from '@/types/filter/Paginator.ts';
+import { type Filter } from '@/types/filter/Filter.ts';
 
 interface CoursesState {
-    pagination: Ref<PaginationResponse<Course> | null>;
+    pagination: Ref<PaginatorResponse<Course> | null>;
     courses: Ref<Course[] | null>;
     course: Ref<Course | null>;
     getCourseByID: (id: string) => Promise<void>;
     getCourses: () => Promise<void>;
-    searchCourses: (filters: Filters) => Promise<void>;
+    searchCourses: (
+        filters: Filter,
+        page: number,
+        pageSize: number,
+    ) => Promise<void>;
     getCoursesByStudent: (studentId: string) => Promise<void>;
     getCoursesByTeacher: (teacherId: string) => Promise<void>;
     getCourseByAssistant: (assistantId: string) => Promise<void>;
@@ -26,7 +31,7 @@ interface CoursesState {
 }
 
 export function useCourses(): CoursesState {
-    const pagination = ref<PaginationResponse<Course> | null>(null);
+    const pagination = ref<PaginatorResponse<Course> | null>(null);
     const courses = ref<Course[] | null>(null);
     const course = ref<Course | null>(null);
 
@@ -40,11 +45,17 @@ export function useCourses(): CoursesState {
         await getList<Course>(endpoint, courses, Course.fromJSON);
     }
 
-    async function searchCourses(filters: Filters): Promise<void> {
+    async function searchCourses(
+        filters: Filter,
+        page: number,
+        pageSize: number,
+    ): Promise<void> {
         const endpoint = endpoints.courses.search;
         await getPaginatedList<Course>(
             endpoint,
             filters,
+            page,
+            pageSize,
             pagination,
             Course.fromJSON,
         );

frontend/src/composables/services/helpers.ts

@@ -1,9 +1,10 @@
 import { type AxiosError } from 'axios';
-import { client } from '@/composables/axios.ts';
+import { client } from '@/config/axios.ts';
 import { type Ref } from 'vue';
 import { useMessagesStore } from '@/store/messages.store.ts';
-import { i18n } from '../i18n';
-import { type Filters, type PaginationResponse } from '@/types/Pagination.ts';
+import { i18n } from '@/config/i18n.ts';
+import { type PaginatorResponse } from '@/types/filter/Paginator.ts';
+import { type Filter } from '@/types/filter/Filter.ts';
 
 /**
  * Get an item given its ID.
@@ -115,6 +116,7 @@ export async function getList<T>(
     } catch (error: any) {
         processError(error);
         console.error(error); // Log the error for debugging
+        ref.value = []; // Set the ref to an empty array
         throw error; // Re-throw the error to the caller
     }
 }
@@ -123,19 +125,27 @@ export async function getList<T>(
  * Get a paginated list of items.
  *
  * @param endpoint
- * @param params
+ * @param filters
+ * @param page
+ * @param pageSize
  * @param pagination
  * @param fromJson
  */
 export async function getPaginatedList<T>(
     endpoint: string,
-    params: Filters,
-    pagination: Ref<PaginationResponse<T> | null>,
+    filters: Filter,
+    page: number,
+    pageSize: number,
+    pagination: Ref<PaginatorResponse<T> | null>,
     fromJson: (data: any) => T,
 ): Promise<void> {
     try {
         const response = await client.get(endpoint, {
-            params,
+            params: {
+                ...filters,
+                page,
+                page_size: pageSize,
+            },
         });
 
         pagination.value = {
@@ -145,6 +155,14 @@ export async function getPaginatedList<T>(
     } catch (error: any) {
         processError(error);
         console.error(error); // Log the error for debugging
+
+        pagination.value = {
+            // Set the ref to an empty array
+            ...error.data,
+            count: 0,
+            results: [],
+        };
+
         throw error; // Re-throw the error to the caller
     }
 }
@@ -174,6 +192,7 @@ export async function getListMerged<T>(
         } catch (error: any) {
             processError(error);
             console.error(error); // Log the error for debugging
+            ref.value = []; // Set the ref to an empty array
             throw error; // Re-throw the error to the caller
         }
     }

frontend/src/composables/axios.ts → frontend/src/config/axios.ts

@@ -1,6 +1,6 @@
 import axios from 'axios';
 import Cookie from 'js-cookie';
-import { i18n } from '@/composables/i18n';
+import { i18n } from '@/config/i18n.ts';
 
 const { locale } = i18n.global;
 

frontend/src/main.ts

@@ -3,7 +3,7 @@ import router from '@/router/router';
 import PrimeVue from 'primevue/config';
 import ToastService from 'primevue/toastservice';
 import Ripple from 'primevue/ripple';
-import { i18n } from '@/composables/i18n';
+import { i18n } from '@/config/i18n.ts';
 import { createApp } from 'vue';
 import { createPinia } from 'pinia';
 

frontend/src/store/authentication.store.ts

@@ -3,7 +3,7 @@ import { defineStore } from 'pinia';
 import { type Role, User } from '@/types/users/User.ts';
 import { endpoints } from '@/config/endpoints.ts';
 import { useMessagesStore } from '@/store/messages.store.ts';
-import { client } from '@/composables/axios.ts';
+import { client } from '@/config/axios.ts';
 import { useLocalStorage } from '@vueuse/core';
 import { computed, ref, watch } from 'vue';
 import { useAssistant } from '@/composables/services/assistant.service';

frontend/src/types/filter/Filter.ts

@@ -0,0 +1,10 @@
+export const COURSE_FILTER = {
+    search: '',
+    faculties: [],
+    years: [],
+};
+
+export interface Filter {
+    search: string;
+    [key: string]: any;
+}

frontend/src/types/filter/Paginator.ts

@@ -0,0 +1,6 @@
+export interface PaginatorResponse<T> {
+    count: number;
+    next: string | null;
+    previous: string | null;
+    results: T[];
+}

frontend/src/views/authentication/VerifyView.vue

@@ -1,18 +1,17 @@
 <script setup lang="ts">
 import BaseLayout from '@/components/layout/BaseLayout.vue';
+import Title from '@/components/layout/Title.vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useAuthStore } from '@/store/authentication.store.ts';
 import { onMounted } from 'vue';
-import Title from '@/components/layout/Title.vue';
 
 const { query } = useRoute();
 const { push } = useRouter();
 const { login, intent } = useAuthStore();
 
 onMounted(async () => {
-    await login(query.ticket as string).then(() => {
-        push(intent);
-    });
+    await login(query.ticket as string);
+    await push(intent);
 });
 </script>