fix: lege tabellen bevatten boodschap
This commit is contained in:
laurejablonski
parent
aedb47247c
commit
3c3f28497e
4 changed files with 184 additions and 176 deletions
|
|
@ -6,6 +6,46 @@ h1 {
|
||||||
padding-left: 1%;
|
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) {
|
@media screen and (max-width: 850px) {
|
||||||
h1 {
|
h1 {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,7 @@
|
||||||
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";
|
import { useDisplay } from "vuetify";
|
||||||
import '../../assets/common.css'
|
import "../../assets/common.css";
|
||||||
|
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
|
|
||||||
|
|
@ -212,16 +212,31 @@
|
||||||
<th class="header"></th>
|
<th class="header"></th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
|
||||||
|
<tbody v-if="studentsResponse.data.students.length">
|
||||||
<tr
|
<tr
|
||||||
v-for="s in studentsResponse.data.students as StudentDTO[]"
|
v-for="s in studentsResponse.data.students as StudentDTO[]"
|
||||||
:key="s.id"
|
:key="s.id"
|
||||||
>
|
>
|
||||||
|
<td>{{ s.firstName + " " + s.lastName }}</td>
|
||||||
<td>
|
<td>
|
||||||
{{ s.firstName + " " + s.lastName }}
|
<v-btn @click="showPopup(s)">{{ t("remove") }}</v-btn>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
</tr>
|
||||||
<v-btn @click="showPopup(s)"> {{ t("remove") }} </v-btn>
|
</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>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
|
|
@ -243,7 +258,7 @@
|
||||||
<th class="header">{{ t("accept") + "/" + t("reject") }}</th>
|
<th class="header">{{ t("accept") + "/" + t("reject") }}</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody v-if="joinRequests.data.joinRequests.length">
|
||||||
<tr
|
<tr
|
||||||
v-for="jr in joinRequests.data.joinRequests as ClassJoinRequestDTO[]"
|
v-for="jr in joinRequests.data.joinRequests as ClassJoinRequestDTO[]"
|
||||||
:key="(jr.class, jr.requester, jr.status)"
|
:key="(jr.class, jr.requester, jr.status)"
|
||||||
|
|
@ -288,6 +303,21 @@
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</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-table>
|
||||||
</v-col>
|
</v-col>
|
||||||
</using-query-result>
|
</using-query-result>
|
||||||
|
|
@ -357,41 +387,6 @@
|
||||||
</main>
|
</main>
|
||||||
</template>
|
</template>
|
||||||
<style scoped>
|
<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 {
|
h2 {
|
||||||
color: #0e6942;
|
color: #0e6942;
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
|
|
@ -411,7 +406,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 800px) {
|
@media screen and (max-width: 800px) {
|
||||||
|
|
||||||
.join {
|
.join {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,7 @@
|
||||||
import { useClassStudentsQuery, useClassTeachersQuery } from "@/queries/classes";
|
import { useClassStudentsQuery, useClassTeachersQuery } from "@/queries/classes";
|
||||||
import type { StudentsResponse } from "@/controllers/students";
|
import type { StudentsResponse } from "@/controllers/students";
|
||||||
import type { TeachersResponse } from "@/controllers/teachers";
|
import type { TeachersResponse } from "@/controllers/teachers";
|
||||||
import '../../assets/common.css'
|
import "../../assets/common.css";
|
||||||
|
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
|
|
||||||
|
|
@ -162,7 +162,7 @@
|
||||||
<th class="header">{{ t("members") }}</th>
|
<th class="header">{{ t("members") }}</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody v-if="classResponse.data.classes.length">
|
||||||
<tr
|
<tr
|
||||||
v-for="c in classResponse.data.classes as ClassDTO[]"
|
v-for="c in classResponse.data.classes as ClassDTO[]"
|
||||||
:key="c.id"
|
:key="c.id"
|
||||||
|
|
@ -182,6 +182,21 @@
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</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-table>
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
|
|
@ -272,41 +287,6 @@
|
||||||
</main>
|
</main>
|
||||||
</template>
|
</template>
|
||||||
<style scoped>
|
<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 {
|
h2 {
|
||||||
color: #0e6942;
|
color: #0e6942;
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,7 @@
|
||||||
useTeacherInvitationsReceivedQuery,
|
useTeacherInvitationsReceivedQuery,
|
||||||
} from "@/queries/teacher-invitations";
|
} from "@/queries/teacher-invitations";
|
||||||
import { useDisplay } from "vuetify";
|
import { useDisplay } from "vuetify";
|
||||||
import '../../assets/common.css'
|
import "../../assets/common.css";
|
||||||
|
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
|
|
||||||
|
|
@ -213,7 +213,7 @@
|
||||||
<th class="header">{{ t("members") }}</th>
|
<th class="header">{{ t("members") }}</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody v-if="classesResponse.data.classes.length">
|
||||||
<tr
|
<tr
|
||||||
v-for="c in classesResponse.data.classes as ClassDTO[]"
|
v-for="c in classesResponse.data.classes as ClassDTO[]"
|
||||||
:key="c.id"
|
:key="c.id"
|
||||||
|
|
@ -240,6 +240,21 @@
|
||||||
<td>{{ c.students.length }}</td>
|
<td>{{ c.students.length }}</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</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-table>
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col
|
<v-col
|
||||||
|
|
@ -343,61 +358,80 @@
|
||||||
:query-result="allClassesQuery"
|
:query-result="allClassesQuery"
|
||||||
v-slot="classesResponse: { data: ClassesResponse }"
|
v-slot="classesResponse: { data: ClassesResponse }"
|
||||||
>
|
>
|
||||||
<tr
|
<template v-if="invitationsResponse.data.invitations.length">
|
||||||
v-for="i in invitationsResponse.data.invitations as TeacherInvitationDTO[]"
|
<tr
|
||||||
:key="i.classId"
|
v-for="i in invitationsResponse.data.invitations as TeacherInvitationDTO[]"
|
||||||
>
|
:key="i.classId"
|
||||||
<td>
|
>
|
||||||
{{
|
<td>
|
||||||
(classesResponse.data.classes as ClassDTO[]).filter(
|
{{
|
||||||
(c) => c.id == i.classId,
|
(classesResponse.data.classes as ClassDTO[]).filter(
|
||||||
)[0].displayName
|
(c) => c.id == i.classId,
|
||||||
}}
|
)[0].displayName
|
||||||
</td>
|
}}
|
||||||
<td>
|
</td>
|
||||||
{{
|
<td>
|
||||||
(i.sender as TeacherDTO).firstName + " " + (i.sender as TeacherDTO).lastName
|
{{
|
||||||
}}
|
(i.sender as TeacherDTO).firstName +
|
||||||
</td>
|
" " +
|
||||||
<td class="text-right">
|
(i.sender as TeacherDTO).lastName
|
||||||
<span v-if="!isSmAndDown">
|
}}
|
||||||
<div>
|
</td>
|
||||||
<v-btn
|
<td class="text-right">
|
||||||
color="green"
|
<span v-if="!isSmAndDown">
|
||||||
@click="handleInvitation(i, true)"
|
<div>
|
||||||
class="mr-2"
|
<v-btn
|
||||||
>
|
color="green"
|
||||||
{{ t("accept") }}
|
@click="handleInvitation(i, true)"
|
||||||
</v-btn>
|
class="mr-2"
|
||||||
<v-btn
|
>
|
||||||
color="red"
|
{{ t("accept") }}
|
||||||
@click="handleInvitation(i, false)"
|
</v-btn>
|
||||||
>
|
<v-btn
|
||||||
{{ t("deny") }}
|
color="red"
|
||||||
</v-btn>
|
@click="handleInvitation(i, false)"
|
||||||
</div>
|
>
|
||||||
</span>
|
{{ t("deny") }}
|
||||||
<span v-else>
|
</v-btn>
|
||||||
<div>
|
</div>
|
||||||
<v-btn
|
</span>
|
||||||
@click="handleInvitation(i, true)"
|
<span v-else>
|
||||||
class="mr-2"
|
<div>
|
||||||
icon="mdi-check-circle"
|
<v-btn
|
||||||
color="green"
|
@click="handleInvitation(i, true)"
|
||||||
variant="text"
|
class="mr-2"
|
||||||
>
|
icon="mdi-check-circle"
|
||||||
</v-btn>
|
color="green"
|
||||||
<v-btn
|
variant="text"
|
||||||
@click="handleInvitation(i, false)"
|
>
|
||||||
class="mr-2"
|
</v-btn>
|
||||||
icon="mdi-close-circle"
|
<v-btn
|
||||||
color="red"
|
@click="handleInvitation(i, false)"
|
||||||
variant="text"
|
class="mr-2"
|
||||||
>
|
icon="mdi-close-circle"
|
||||||
</v-btn></div
|
color="red"
|
||||||
></span>
|
variant="text"
|
||||||
</td>
|
>
|
||||||
</tr>
|
</v-btn></div
|
||||||
|
></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>
|
||||||
</using-query-result>
|
</using-query-result>
|
||||||
</tbody>
|
</tbody>
|
||||||
|
|
@ -450,41 +484,6 @@
|
||||||
</main>
|
</main>
|
||||||
</template>
|
</template>
|
||||||
<style scoped>
|
<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 {
|
h2 {
|
||||||
color: #0e6942;
|
color: #0e6942;
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
|
|
@ -503,7 +502,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 850px) {
|
@media screen and (max-width: 850px) {
|
||||||
|
|
||||||
.join {
|
.join {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -526,10 +524,6 @@
|
||||||
flex-direction: column !important;
|
flex-direction: column !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.responsive-col {
|
.responsive-col {
|
||||||
max-width: 100% !important;
|
max-width: 100% !important;
|
||||||
flex-basis: 100% !important;
|
flex-basis: 100% !important;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue