feat: add filter for internships

frontend/app/components/InternshipListView.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import type { Internship } from '~/types/internships';
+import type { Paginated } from '~/types/pagination';
+import { prettyInternshipStatus } from '~/types/internship_status';
+
+const props = defineProps<{
+    mode: 'admin' | 'company' | 'student';
+}>();
+
+const filters = ref({
+    year: null,
+    company: null,
+    study_programe: null,
+    student: null,
+});
+
+const page = ref(1);
+const itemsPerPage = ref(15);
+const totalItems = ref(0);
+
+const allHeaders = [
+    { title: "Študent", key: "student.name", sortable: false },
+    { title: "Firma", key: "company.name", sortable: false },
+    { title: "Od", key: "start", sortable: false },
+    { title: "Do", key: "end", sortable: false },
+    { title: "Semester", key: "semester", sortable: false },
+    { title: "Ročník", key: "year_of_study", sortable: false },
+    { title: "Študijný odbor", key: "student.student_data.study_field", sortable: false },
+    { title: "Stav", key: "status", sortable: false },
+    { title: "Operácie", key: "operations", sortable: false }
+];
+
+const headers = props.mode === 'company'
+    ? allHeaders.filter(header => header.key !== "company.name")
+    : allHeaders;
+
+const { data, error, pending } = await useLazySanctumFetch<Paginated<Internship>>('/api/internships', () => ({
+    params: {
+        ...filters.value,
+        page: page.value,
+        per_page: itemsPerPage.value,
+    }
+}), {
+    watch: [filters.value, page, itemsPerPage]
+});
+
+watch(data, (newData) => {
+    totalItems.value = newData?.total ?? 0;
+});
+
+watch(filters, async () => {
+    page.value = 1;
+}, { deep: true });
+
+async function delteInternship(internship: Internship) {
+    // TODO: unimplemented
+}
+</script>
+
+<template>
+    <div>
+        <ErrorAlert v-if="error" :error="error.statusMessage ?? error.message" />
+
+        <v-row>
+            <v-col cols="12" md="3">
+                <v-text-field v-model="filters.year" label="Rok" type="number" clearable density="compact" />
+            </v-col>
+            <v-col cols="12" md="3" v-if="mode !== 'company'">
+                <v-text-field v-model="filters.company" label="Názov firmy" clearable density="compact" />
+            </v-col>
+            <v-col cols="12" md="3" v-if="mode !== 'student'">
+                <v-text-field v-model="filters.study_programe" label="Študijný program" clearable density="compact" />
+            </v-col>
+            <v-col cols="12" md="3" v-if="mode !== 'student'">
+                <v-text-field v-model="filters.student" label="Študent" clearable density="compact" />
+            </v-col>
+        </v-row>
+
+        <v-data-table-server v-model:items-per-page="itemsPerPage" v-model:page="page" :headers="headers"
+            :items="data?.data" :items-length="totalItems" :loading="pending">
+
+            <template #item.status="{ item }">
+                {{ prettyInternshipStatus(item.status.status) }}
+            </template>
+
+            <template #item.semester="{ item }">
+                {{ item.semester === "WINTER" ? "Zimný" : "Letný" }}
+            </template>
+
+            <template #item.operations="{ item }">
+                <v-tooltip text="Editovať">
+                    <template #activator="{ props }">
+                        <v-btn icon="mdi-pencil" size="small" variant="text"
+                            :to="`/dashboard/${mode}/internships/edit/${item.id}`" />
+                    </template>
+                </v-tooltip>
+                <v-tooltip text="Vymazať">
+                    <template #activator="{ props }">
+                        <v-btn icon="mdi-delete" size="small" variant="text" color="error"
+                            @click="async () => delteInternship(item)" />
+                    </template>
+                </v-tooltip>
+            </template>
+        </v-data-table-server>
+    </div>
+</template>
+
+<style scoped>
+:deep(.v-data-table-header__content) {
+    font-weight: bold;
+}
+</style>

frontend/app/pages/dashboard/admin/internships/index.vue

@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import { prettyInternshipStatus } from '~/types/internship_status';
-import type { Internship } from '~/types/internships';
-
 definePageMeta({
     middleware: ['sanctum:auth', 'admin-only'],
 });
@@ -23,8 +20,6 @@ const headers = [
     { title: 'Stav', key: 'status', align: 'middle' },
     { title: 'Operácie', key: 'ops', align: 'middle' },
 ];
-
-const { data, error, pending } = await useLazySanctumFetch<Internship[]>('/api/internships');
 </script>
 
 <template>
@@ -35,42 +30,7 @@ const { data, error, pending } = await useLazySanctumFetch<Internship[]>('/api/i
             <!-- spacer -->
             <div style="height: 40px;"></div>
 
-            <!-- Čakajúca hláška -->
-            <LoadingAlert v-if="pending" />
-
-            <!-- Chybová hláška -->
-            <ErrorAlert v-else-if="error" :error="error?.message" />
-
-            <v-table v-else>
-                <thead>
-                    <tr>
-                        <th v-for="header in headers" :class="'text-' + header.align">
-                            <strong>{{ header.title }}</strong>
-                        </th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr v-for="item in data">
-                        <td>{{ item.company.name }}</td>
-                        <td>{{ item.student.name }}</td>
-                        <td>{{ item.start }}</td>
-                        <td>{{ item.end }}</td>
-                        <td>{{ item.year_of_study }}</td>
-                        <td>{{ item.semester === "WINTER" ? "Zimný" : "Letný" }}</td>
-                        <td>
-                            <v-btn class="m-1" density="compact" base-color="grey">
-                                {{ prettyInternshipStatus(item.status.status) }}
-                            </v-btn>
-                        </td>
-                        <td class="text-left">
-                            <v-btn class="m-1 op-btn" density="compact" append-icon="mdi-pencil" base-color="orange"
-                                :to="'/dashboard/admin/internships/edit/' + item.id">Editovať</v-btn>
-                            <v-btn class="m-1 op-btn" density="compact" append-icon="mdi-trash-can-outline"
-                                base-color="red" @click="async () => { }">Vymazať</v-btn>
-                        </td>
-                    </tr>
-                </tbody>
-            </v-table>
+            <InternshipListView mode="admin" />
         </v-card>
     </v-container>
 </template>

frontend/app/pages/dashboard/company/internships/index.vue

@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import type { Internship } from '~/types/internships';
-import { prettyInternshipStatus } from '~/types/internship_status';
-
 definePageMeta({
     middleware: ['sanctum:auth', 'company-only'],
 });
@@ -22,8 +19,6 @@ const headers = [
     { title: 'Stav', key: 'status', align: 'middle' },
     { title: 'Operácie', key: 'ops', align: 'middle' },
 ];
-
-const { data, error, pending } = await useLazySanctumFetch<Internship[]>('/api/internships/my');
 </script>
 
 <template>
@@ -34,41 +29,7 @@ const { data, error, pending } = await useLazySanctumFetch<Internship[]>('/api/i
             <!-- spacer -->
             <div style="height: 40px;"></div>
 
-            <!-- Čakajúca hláška -->
-            <LoadingAlert v-if="pending" />
-
-            <!-- Chybová hláška -->
-            <ErrorAlert v-if="error" :error="error?.message" />
-
-            <v-table v-else>
-                <thead>
-                    <tr>
-                        <th v-for="header in headers" :class="'text-' + header.align">
-                            <strong>{{ header.title }}</strong>
-                        </th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr v-for="item in data">
-                        <td>{{ item.student.name }}</td>
-                        <td>{{ item.start }}</td>
-                        <td>{{ item.end }}</td>
-                        <td>{{ item.year_of_study }}</td>
-                        <td>{{ item.semester === "WINTER" ? "Zimný" : "Letný" }}</td>
-                        <td>
-                            <v-btn class="m-1" density="compact" base-color="grey">
-                                {{ prettyInternshipStatus(item.status.status) }}
-                            </v-btn>
-                        </td>
-                        <td class="text-left">
-                            <v-btn class="m-1 op-btn" density="compact" append-icon="mdi-pencil" base-color="orange"
-                                :to="'/dashboard/company/internships/edit/' + item.id">Editovať</v-btn>
-                            <v-btn class="m-1 op-btn" density="compact" append-icon="mdi-trash-can-outline"
-                                base-color="red" @click="async () => { }">Zmazať</v-btn>
-                        </td>
-                    </tr>
-                </tbody>
-            </v-table>
+            <InternshipListView mode="company" />
         </v-card>
     </v-container>
 </template>
@@ -78,12 +39,4 @@ const { data, error, pending } = await useLazySanctumFetch<Internship[]>('/api/i
     padding-left: 10px;
     padding-right: 10px;
 }
-
-.alert {
-    margin-bottom: 10px;
-}
-
-.op-btn {
-    margin: 10px;
-}
 </style>

frontend/app/pages/dashboard/student/index.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { prettyInternshipStatus } from '~/types/internship_status';
-import type { Internship } from '~/types/internships';
 import type { User } from '~/types/user';
 
 definePageMeta({
@@ -14,18 +12,7 @@ useSeoMeta({
     ogDescription: "Portál študenta",
 });
 
-const headers = [
-    { title: 'Firma', key: 'company', align: 'left' },
-    { title: 'Od', key: 'start', align: 'left' },
-    { title: 'Do', key: 'end', align: 'left' },
-    { title: 'Ročník', key: 'year_of_study', align: 'middle' },
-    { title: 'Semester', key: 'semester', align: 'middle' },
-    { title: 'Stav', key: 'status', align: 'middle' },
-    { title: 'Operácie', key: 'ops', align: 'middle' },
-];
-
 const user = useSanctumUser<User>();
-const { data, error, pending } = await useLazySanctumFetch<Internship[]>('/api/internships/my');
 </script>
 
 <template>
@@ -38,7 +25,7 @@ const { data, error, pending } = await useLazySanctumFetch<Internship[]>('/api/i
             <!-- spacer -->
             <div style="height: 40px;"></div>
 
-            <v-btn prepend-icon="mdi-plus" color="blue" class="mr-2" to="/dashboard/student/internship/create">
+            <v-btn prepend-icon="mdi-plus" color="blue" class="mr-2" to="/dashboard/student/internships/create">
                 Pridať
             </v-btn>
             <v-btn prepend-icon="mdi-domain" color="blue" class="mr-2" to="/dashboard/student/companies">
@@ -53,41 +40,7 @@ const { data, error, pending } = await useLazySanctumFetch<Internship[]>('/api/i
 
             <h3>Moje praxe</h3>
 
-            <!-- Čakajúca hláška -->
-            <LoadingAlert v-if="pending" />
-
-            <!-- Chybová hláška -->
-            <ErrorAlert v-else-if="error" :error="error?.message" />
-
-            <v-table v-else>
-                <thead>
-                    <tr>
-                        <th v-for="header in headers" :class="'text-' + header.align">
-                            <strong>{{ header.title }}</strong>
-                        </th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr v-for="item in data">
-                        <td>{{ item.company.name }}</td>
-                        <td>{{ item.start }}</td>
-                        <td>{{ item.end }}</td>
-                        <td>{{ item.year_of_study }}</td>
-                        <td>{{ item.semester === "WINTER" ? "Zimný" : "Letný" }}</td>
-                        <td>
-                            <v-btn class="m-1" density="compact" base-color="grey">
-                                {{ prettyInternshipStatus(item.status.status) }}
-                            </v-btn>
-                        </td>
-                        <td class="text-left">
-                            <v-btn class="m-1 op-btn" density="compact" append-icon="mdi-pencil" base-color="orange"
-                                :to="'/dashboard/student/internship/edit/' + item.id">Editovať</v-btn>
-                            <v-btn class="m-1 op-btn" density="compact" append-icon="mdi-trash-can-outline"
-                                base-color="red" @click="async () => { }">Zmazať</v-btn>
-                        </td>
-                    </tr>
-                </tbody>
-            </v-table>
+            <InternshipListView mode="student" />
         </v-card>
     </v-container>
 </template>
@@ -97,8 +50,4 @@ const { data, error, pending } = await useLazySanctumFetch<Internship[]>('/api/i
     padding-left: 10px;
     padding-right: 10px;
 }
-
-.op-btn {
-    margin: 10px;
-}
 </style>

frontend/app/types/pagination.ts

@@ -0,0 +1,4 @@
+export type Paginated<T> = {
+    data: T[],
+    total: number;
+};