style: responsive
This commit is contained in:
laurejablonski
parent
eba7033226
commit
4bc9d29de7
2 changed files with 110 additions and 51 deletions
|
|
@ -1,7 +1,7 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
import authState from "@/services/auth/auth-service.ts";
|
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 { useRoute } from "vue-router";
|
||||||
import type { ClassResponse } from "@/controllers/classes";
|
import type { ClassResponse } from "@/controllers/classes";
|
||||||
import type { JoinRequestsResponse, StudentsResponse } from "@/controllers/students";
|
import type { JoinRequestsResponse, StudentsResponse } from "@/controllers/students";
|
||||||
|
|
@ -12,6 +12,7 @@
|
||||||
import { useClassDeleteStudentMutation, useClassQuery, useClassStudentsQuery } from "@/queries/classes";
|
import { useClassDeleteStudentMutation, useClassQuery, useClassStudentsQuery } from "@/queries/classes";
|
||||||
import { useCreateTeacherInvitationMutation } from "@/queries/teacher-invitations";
|
import { useCreateTeacherInvitationMutation } from "@/queries/teacher-invitations";
|
||||||
import type { TeacherInvitationData } from "@dwengo-1/common/interfaces/teacher-invitation";
|
import type { TeacherInvitationData } from "@dwengo-1/common/interfaces/teacher-invitation";
|
||||||
|
import { useDisplay } from "vuetify";
|
||||||
|
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
|
|
||||||
|
|
@ -142,6 +143,28 @@
|
||||||
snackbar.value.color = color;
|
snackbar.value.color = color;
|
||||||
snackbar.value.visible = true;
|
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>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<main>
|
<main>
|
||||||
|
|
@ -228,6 +251,7 @@
|
||||||
{{ jr.requester.firstName + " " + jr.requester.lastName }}
|
{{ jr.requester.firstName + " " + jr.requester.lastName }}
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
|
<span v-if="!isSmAndDown && !isMdAndDown">
|
||||||
<v-btn
|
<v-btn
|
||||||
@click="handleJoinRequest(jr, true)"
|
@click="handleJoinRequest(jr, true)"
|
||||||
class="mr-2"
|
class="mr-2"
|
||||||
|
|
@ -243,6 +267,12 @@
|
||||||
>
|
>
|
||||||
{{ t("reject") }}
|
{{ t("reject") }}
|
||||||
</v-btn>
|
</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>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
|
|
|
||||||
|
|
@ -152,10 +152,12 @@
|
||||||
|
|
||||||
// Reactive variables to hold custom logic based on breakpoints
|
// Reactive variables to hold custom logic based on breakpoints
|
||||||
const isMdAndDown = ref(false);
|
const isMdAndDown = ref(false);
|
||||||
|
const isSmAndDown = ref(false);
|
||||||
|
|
||||||
watchEffect(() => {
|
watchEffect(() => {
|
||||||
// Custom breakpoint logic
|
// Custom breakpoint logic
|
||||||
isMdAndDown.value = display.width.value < customBreakpoints.md;
|
isMdAndDown.value = display.width.value < customBreakpoints.md;
|
||||||
|
isSmAndDown.value = display.width.value < customBreakpoints.sm;
|
||||||
});
|
});
|
||||||
|
|
||||||
// Code display dialog logic
|
// Code display dialog logic
|
||||||
|
|
@ -320,60 +322,87 @@
|
||||||
<h1 class="title">
|
<h1 class="title">
|
||||||
{{ t("invitations") }}
|
{{ t("invitations") }}
|
||||||
</h1>
|
</h1>
|
||||||
<v-container fluid class="ma-4">
|
<v-container
|
||||||
<v-table class="table">
|
fluid
|
||||||
<thead>
|
class="ma-4"
|
||||||
<tr>
|
>
|
||||||
<th class="header">{{ t("class") }}</th>
|
<v-table class="table">
|
||||||
<th class="header">{{ t("sender") }}</th>
|
<thead>
|
||||||
<th class="header"></th>
|
<tr>
|
||||||
</tr>
|
<th class="header">{{ t("class") }}</th>
|
||||||
</thead>
|
<th class="header">{{ t("sender") }}</th>
|
||||||
<tbody>
|
<th class="header">{{ t("accept") + "/" + t("reject") }}</th>
|
||||||
<using-query-result
|
</tr>
|
||||||
:query-result="getInvitationsQuery"
|
</thead>
|
||||||
v-slot="invitationsResponse: { data: TeacherInvitationsResponse }"
|
<tbody>
|
||||||
>
|
|
||||||
<using-query-result
|
<using-query-result
|
||||||
:query-result="allClassesQuery"
|
:query-result="getInvitationsQuery"
|
||||||
v-slot="classesResponse: { data: ClassesResponse }"
|
v-slot="invitationsResponse: { data: TeacherInvitationsResponse }"
|
||||||
>
|
>
|
||||||
<tr
|
<using-query-result
|
||||||
v-for="i in invitationsResponse.data.invitations as TeacherInvitationDTO[]"
|
:query-result="allClassesQuery"
|
||||||
:key="i.classId"
|
v-slot="classesResponse: { data: ClassesResponse }"
|
||||||
>
|
>
|
||||||
<td>
|
<tr
|
||||||
{{
|
v-for="i in invitationsResponse.data.invitations as TeacherInvitationDTO[]"
|
||||||
(classesResponse.data.classes as ClassDTO[]).filter((c) => c.id == i.classId)[0]
|
:key="i.classId"
|
||||||
.displayName
|
>
|
||||||
}}
|
<td>
|
||||||
</td>
|
{{
|
||||||
<td>
|
(classesResponse.data.classes as ClassDTO[]).filter(
|
||||||
{{ (i.sender as TeacherDTO).firstName + " " + (i.sender as TeacherDTO).lastName }}
|
(c) => c.id == i.classId,
|
||||||
</td>
|
)[0].displayName
|
||||||
<td class="text-right">
|
}}
|
||||||
<div>
|
</td>
|
||||||
<v-btn
|
<td>
|
||||||
color="green"
|
{{
|
||||||
@click="handleInvitation(i, true)"
|
(i.sender as TeacherDTO).firstName + " " + (i.sender as TeacherDTO).lastName
|
||||||
class="mr-2"
|
}}
|
||||||
>
|
</td>
|
||||||
{{ t("accept") }}
|
<td class="text-right">
|
||||||
</v-btn>
|
<span v-if="!isSmAndDown">
|
||||||
<v-btn
|
<div>
|
||||||
color="red"
|
<v-btn
|
||||||
@click="handleInvitation(i, false)"
|
color="green"
|
||||||
>
|
@click="handleInvitation(i, true)"
|
||||||
{{ t("deny") }}
|
class="mr-2"
|
||||||
</v-btn>
|
>
|
||||||
</div>
|
{{ t("accept") }}
|
||||||
</td>
|
</v-btn>
|
||||||
</tr>
|
<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>
|
||||||
</using-query-result>
|
</tbody>
|
||||||
</tbody>
|
</v-table>
|
||||||
</v-table>
|
</v-container>
|
||||||
</v-container>
|
|
||||||
</div>
|
</div>
|
||||||
<v-snackbar
|
<v-snackbar
|
||||||
v-model="snackbar.visible"
|
v-model="snackbar.visible"
|
||||||
|
|
|
||||||
Reference in a new issue