tdpeuter/2025SELab2-project-Dwengo
tdpeuter/2025SELab2-project-Dwengo
1
Fork 0
Code Issues Releases 4 Packages 2 Wiki Activity

fix: lege tabellen bevatten boodschap

Browse source
This commit is contained in:
laurejablonski 2025-05-10 11:10:36 +02:00
parent aedb47247c
commit 3c3f28497e
4 changed files with 184 additions and 176 deletions
Download patch file Download diff file Expand all files Collapse all files

40
frontend/src/assets/common.css
View file

@ -6,6 +6,46 @@ h1 {
padding-left: 1%;
}
.empty-message {
text-align: center;
font-size: 20px;
}
.header {
font-weight: bold !important;
background-color: #0e6942;
color: white;
padding: 10px;
}
table thead th:first-child {
border-top-left-radius: 10px;
}
.table thead th:last-child {
border-top-right-radius: 10px;
}
.table tbody tr:nth-child(odd) {
background-color: white;
}
.table tbody tr:nth-child(even) {
background-color: #f6faf2;
}
td,
th {
border-bottom: 1px solid #0e6942;
border-top: 1px solid #0e6942;
}
.table {
width: 90%;
padding-top: 10px;
border-collapse: collapse;
}
@media screen and (max-width: 850px) {
h1 {
text-align: center;

78
frontend/src/views/classes/SingleClass.vue
View file

@ -13,7 +13,7 @@
import { useCreateTeacherInvitationMutation } from "@/queries/teacher-invitations";
import type { TeacherInvitationData } from "@dwengo-1/common/interfaces/teacher-invitation";
import { useDisplay } from "vuetify";
import '../../assets/common.css'
import "../../assets/common.css";
const { t } = useI18n();
@ -212,16 +212,31 @@
<th class="header"></th>
</tr>
</thead>
<tbody>
<tbody v-if="studentsResponse.data.students.length">
<tr
v-for="s in studentsResponse.data.students as StudentDTO[]"
:key="s.id"
>
<td>{{ s.firstName + " " + s.lastName }}</td>
<td>
{{ s.firstName + " " + s.lastName }}
<v-btn @click="showPopup(s)">{{ t("remove") }}</v-btn>
</td>
<td>
<v-btn @click="showPopup(s)"> {{ t("remove") }} </v-btn>
</tr>
</tbody>
<tbody v-else>
<tr>
<td
colspan="2"
class="empty-message"
>
<v-icon
icon="mdi-information-outline"
size="small"
>
</v-icon>
{{ t("no-students-found") }}
</td>
</tr>
</tbody>
@ -243,7 +258,7 @@
<th class="header">{{ t("accept") + "/" + t("reject") }}</th>
</tr>
</thead>
<tbody>
<tbody v-if="joinRequests.data.joinRequests.length">
<tr
v-for="jr in joinRequests.data.joinRequests as ClassJoinRequestDTO[]"
:key="(jr.class, jr.requester, jr.status)"
@ -288,6 +303,21 @@
</td>
</tr>
</tbody>
<tbody v-else>
<tr>
<td
colspan="2"
class="empty-message"
>
<v-icon
icon="mdi-information-outline"
size="small"
>
</v-icon>
{{ t("no-join-requests-found") }}
</td>
</tr>
</tbody>
</v-table>
</v-col>
</using-query-result>
@ -357,41 +387,6 @@
</main>
</template>
<style scoped>
.header {
font-weight: bold !important;
background-color: #0e6942;
color: white;
padding: 10px;
}
table thead th:first-child {
border-top-left-radius: 10px;
}
.table thead th:last-child {
border-top-right-radius: 10px;
}
.table tbody tr:nth-child(odd) {
background-color: white;
}
.table tbody tr:nth-child(even) {
background-color: #f6faf2;
}
td,
th {
border-bottom: 1px solid #0e6942;
border-top: 1px solid #0e6942;
}
.table {
width: 90%;
padding-top: 10px;
border-collapse: collapse;
}
h2 {
color: #0e6942;
font-size: 30px;
@ -411,7 +406,6 @@
}
@media screen and (max-width: 800px) {
.join {
text-align: center;
align-items: center;

54
frontend/src/views/classes/StudentClasses.vue
View file

@ -12,7 +12,7 @@
import { useClassStudentsQuery, useClassTeachersQuery } from "@/queries/classes";
import type { StudentsResponse } from "@/controllers/students";
import type { TeachersResponse } from "@/controllers/teachers";
import '../../assets/common.css'
import "../../assets/common.css";
const { t } = useI18n();
@ -162,7 +162,7 @@
<th class="header">{{ t("members") }}</th>
</tr>
</thead>
<tbody>
<tbody v-if="classResponse.data.classes.length">
<tr
v-for="c in classResponse.data.classes as ClassDTO[]"
:key="c.id"
@ -182,6 +182,21 @@
</td>
</tr>
</tbody>
<tbody v-else>
<tr>
<td
colspan="3"
class="empty-message"
>
<v-icon
icon="mdi-information-outline"
size="small"
>
</v-icon>
{{ t("no-classes-found") }}
</td>
</tr>
</tbody>
</v-table>
</v-col>
</v-row>
@ -272,41 +287,6 @@
</main>
</template>
<style scoped>
.header {
font-weight: bold !important;
background-color: #0e6942;
color: white;
padding: 10px;
}
table thead th:first-child {
border-top-left-radius: 10px;
}
.table thead th:last-child {
border-top-right-radius: 10px;
}
.table tbody tr:nth-child(odd) {
background-color: white;
}
.table tbody tr:nth-child(even) {
background-color: #f6faf2;
}
td,
th {
border-bottom: 1px solid #0e6942;
border-top: 1px solid #0e6942;
}
.table {
width: 90%;
padding-top: 10px;
border-collapse: collapse;
}
h2 {
color: #0e6942;
font-size: 30px;

80
frontend/src/views/classes/TeacherClasses.vue
View file

@ -15,7 +15,7 @@
useTeacherInvitationsReceivedQuery,
} from "@/queries/teacher-invitations";
import { useDisplay } from "vuetify";
import '../../assets/common.css'
import "../../assets/common.css";
const { t } = useI18n();
@ -213,7 +213,7 @@
<th class="header">{{ t("members") }}</th>
</tr>
</thead>
<tbody>
<tbody v-if="classesResponse.data.classes.length">
<tr
v-for="c in classesResponse.data.classes as ClassDTO[]"
:key="c.id"
@ -240,6 +240,21 @@
<td>{{ c.students.length }}</td>
</tr>
</tbody>
<tbody v-else>
<tr>
<td
colspan="3"
class="empty-message"
>
<v-icon
icon="mdi-information-outline"
size="small"
>
</v-icon>
{{ t("no-classes-found") }}
</td>
</tr>
</tbody>
</v-table>
</v-col>
<v-col
@ -343,6 +358,7 @@
:query-result="allClassesQuery"
v-slot="classesResponse: { data: ClassesResponse }"
>
<template v-if="invitationsResponse.data.invitations.length">
<tr
v-for="i in invitationsResponse.data.invitations as TeacherInvitationDTO[]"
:key="i.classId"
@ -356,7 +372,9 @@
</td>
<td>
{{
(i.sender as TeacherDTO).firstName + " " + (i.sender as TeacherDTO).lastName
(i.sender as TeacherDTO).firstName +
" " +
(i.sender as TeacherDTO).lastName
}}
</td>
<td class="text-right">
@ -398,6 +416,22 @@
></span>
</td>
</tr>
</template>
<template v-else>
<tr>
<td
colspan="3"
class="empty-message"
>
<v-icon
icon="mdi-information-outline"
size="small"
>
</v-icon>
{{ t("no-invitations-found") }}
</td>
</tr>
</template>
</using-query-result>
</using-query-result>
</tbody>
@ -450,41 +484,6 @@
</main>
</template>
<style scoped>
.header {
font-weight: bold !important;
background-color: #0e6942;
color: white;
padding: 10px;
}
table thead th:first-child {
border-top-left-radius: 10px;
}
.table thead th:last-child {
border-top-right-radius: 10px;
}
.table tbody tr:nth-child(odd) {
background-color: white;
}
.table tbody tr:nth-child(even) {
background-color: #f6faf2;
}
td,
th {
border-bottom: 1px solid #0e6942;
border-top: 1px solid #0e6942;
}
.table {
width: 90%;
padding-top: 10px;
border-collapse: collapse;
}
h2 {
color: #0e6942;
font-size: 30px;
@ -503,7 +502,6 @@
}
@media screen and (max-width: 850px) {
.join {
text-align: center;
align-items: center;
@ -526,10 +524,6 @@
flex-direction: column !important;
}
.table {
width: 100%;
}
.responsive-col {
max-width: 100% !important;
flex-basis: 100% !important;