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

style: responsive

Browse source
This commit is contained in:
laurejablonski 2025-04-19 14:21:27 +02:00
parent eba7033226
commit 4bc9d29de7
2 changed files with 110 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,7 +1,7 @@
<script setup lang="ts">
import { useI18n } from "vue-i18n";
import authState from "@/services/auth/auth-service.ts";
import { onMounted, ref } from "vue";
import { onMounted, ref, watchEffect } from "vue";
import { useRoute } from "vue-router";
import type { ClassResponse } from "@/controllers/classes";
import type { JoinRequestsResponse, StudentsResponse } from "@/controllers/students";
@ -12,6 +12,7 @@
import { useClassDeleteStudentMutation, useClassQuery, useClassStudentsQuery } from "@/queries/classes";
import { useCreateTeacherInvitationMutation } from "@/queries/teacher-invitations";
import type { TeacherInvitationData } from "@dwengo-1/common/interfaces/teacher-invitation";
import { useDisplay } from "vuetify";
const { t } = useI18n();
@ -142,6 +143,28 @@
snackbar.value.color = color;
snackbar.value.visible = true;
}
// Custom breakpoints
const customBreakpoints = {
xs: 0,
sm: 500,
md: 1370,
lg: 1400,
xl: 1600,
};
// logic for small screens
const display = useDisplay();
// Reactive variables to hold custom logic based on breakpoints
const isSmAndDown = ref(false);
const isMdAndDown = ref(false);
watchEffect(() => {
// Custom breakpoint logic
isSmAndDown.value = display.width.value < customBreakpoints.sm;
isMdAndDown.value = display.width.value < customBreakpoints.md;
});
</script>
<template>
<main>
@ -228,6 +251,7 @@
{{ jr.requester.firstName + " " + jr.requester.lastName }}
</td>
<td>
<span v-if="!isSmAndDown && !isMdAndDown">
<v-btn
@click="handleJoinRequest(jr, true)"
class="mr-2"
@ -243,6 +267,12 @@
>
{{ t("reject") }}
</v-btn>
</span>
<span v-else>
<v-btn @click="handleJoinRequest(jr, true)" icon="mdi-check-circle" class="mr-2" color="green" variant="text"></v-btn>
<v-btn @click="handleJoinRequest(jr, false)" icon="mdi-close-circle" class="mr-2" color="red" variant="text"></v-btn>
</span>
</td>
</tr>
</tbody>

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

@ -152,10 +152,12 @@
// Reactive variables to hold custom logic based on breakpoints
const isMdAndDown = ref(false);
const isSmAndDown = ref(false);
watchEffect(() => {
// Custom breakpoint logic
isMdAndDown.value = display.width.value < customBreakpoints.md;
isSmAndDown.value = display.width.value < customBreakpoints.sm;
});
// Code display dialog logic
@ -320,60 +322,87 @@
<h1 class="title">
{{ t("invitations") }}
</h1>
<v-container fluid class="ma-4">
<v-table class="table">
<thead>
<tr>
<th class="header">{{ t("class") }}</th>
<th class="header">{{ t("sender") }}</th>
<th class="header"></th>
</tr>
</thead>
<tbody>
<using-query-result
:query-result="getInvitationsQuery"
v-slot="invitationsResponse: { data: TeacherInvitationsResponse }"
>
<v-container
fluid
class="ma-4"
>
<v-table class="table">
<thead>
<tr>
<th class="header">{{ t("class") }}</th>
<th class="header">{{ t("sender") }}</th>
<th class="header">{{ t("accept") + "/" + t("reject") }}</th>
</tr>
</thead>
<tbody>
<using-query-result
:query-result="allClassesQuery"
v-slot="classesResponse: { data: ClassesResponse }"
:query-result="getInvitationsQuery"
v-slot="invitationsResponse: { data: TeacherInvitationsResponse }"
>
<tr
v-for="i in invitationsResponse.data.invitations as TeacherInvitationDTO[]"
:key="i.classId"
<using-query-result
:query-result="allClassesQuery"
v-slot="classesResponse: { data: ClassesResponse }"
>
<td>
{{
(classesResponse.data.classes as ClassDTO[]).filter((c) => c.id == i.classId)[0]
.displayName
}}
</td>
<td>
{{ (i.sender as TeacherDTO).firstName + " " + (i.sender as TeacherDTO).lastName }}
</td>
<td class="text-right">
<div>
<v-btn
color="green"
@click="handleInvitation(i, true)"
class="mr-2"
>
{{ t("accept") }}
</v-btn>
<v-btn
color="red"
@click="handleInvitation(i, false)"
>
{{ t("deny") }}
</v-btn>
</div>
</td>
</tr>
<tr
v-for="i in invitationsResponse.data.invitations as TeacherInvitationDTO[]"
:key="i.classId"
>
<td>
{{
(classesResponse.data.classes as ClassDTO[]).filter(
(c) => c.id == i.classId,
)[0].displayName
}}
</td>
<td>
{{
(i.sender as TeacherDTO).firstName + " " + (i.sender as TeacherDTO).lastName
}}
</td>
<td class="text-right">
<span v-if="!isSmAndDown">
<div>
<v-btn
color="green"
@click="handleInvitation(i, true)"
class="mr-2"
>
{{ t("accept") }}
</v-btn>
<v-btn
color="red"
@click="handleInvitation(i, false)"
>
{{ t("deny") }}
</v-btn>
</div>
</span>
<span v-else>
<div>
<v-btn
@click="handleInvitation(i, true)"
class="mr-2"
icon="mdi-check-circle"
color="green"
variant="text"
>
</v-btn>
<v-btn
@click="handleInvitation(i, false)"
class="mr-2"
icon="mdi-close-circle"
color="red"
variant="text"
>
</v-btn></div
></span>
</td>
</tr>
</using-query-result>
</using-query-result>
</using-query-result>
</tbody>
</v-table>
</v-container>
</tbody>
</v-table>
</v-container>
</div>
<v-snackbar
v-model="snackbar.visible"