feat: werkende aan group edit pagina
This commit is contained in:
Adriaan Jacquet
parent
d8a7a86da0
commit
6c28c0fc3d
1 changed files with 271 additions and 120 deletions
|
|
@ -8,6 +8,8 @@
|
||||||
import type { Language } from "@/data-objects/language.ts";
|
import type { Language } from "@/data-objects/language.ts";
|
||||||
import type { AssignmentResponse } from "@/controllers/assignments.ts";
|
import type { AssignmentResponse } from "@/controllers/assignments.ts";
|
||||||
import type { GroupDTO } from "@dwengo-1/common/interfaces/group";
|
import type { GroupDTO } from "@dwengo-1/common/interfaces/group";
|
||||||
|
import type { AssignmentDTO } from "@dwengo-1/common/interfaces/assignment";
|
||||||
|
import type { StudentDTO } from "@dwengo-1/common/interfaces/student";
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
classId: string;
|
classId: string;
|
||||||
|
|
@ -24,7 +26,7 @@
|
||||||
const groups = ref();
|
const groups = ref();
|
||||||
const learningPath = ref();
|
const learningPath = ref();
|
||||||
|
|
||||||
const assignmentQueryResult = useAssignmentQuery(() => props.classId, props.assignmentId);
|
const assignmentQueryResult = useAssignmentQuery(props.classId, props.assignmentId);
|
||||||
learningPath.value = assignmentQueryResult.data.value?.assignment?.learningPath;
|
learningPath.value = assignmentQueryResult.data.value?.assignment?.learningPath;
|
||||||
// Get learning path object
|
// Get learning path object
|
||||||
const lpQueryResult = useGetLearningPathQuery(
|
const lpQueryResult = useGetLearningPathQuery(
|
||||||
|
|
@ -88,138 +90,185 @@ Const {groupProgressMap} = props.useGroupsWithProgress(
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<using-query-result
|
<using-query-result
|
||||||
:query-result="assignmentQueryResult"
|
:query-result="assignmentQueryResult"
|
||||||
v-slot="{ data }: { data: AssignmentResponse }"
|
v-slot="assignmentResponse: { data: AssignmentResponse }"
|
||||||
>
|
>
|
||||||
<v-card
|
<v-container fluid class="ma-4">
|
||||||
v-if="data"
|
<v-row no-gutters class="custom-breakpoint">
|
||||||
class="assignment-card"
|
<v-col cols="12" sm="6" md="6" class="responsive-col">
|
||||||
>
|
<v-card
|
||||||
<div class="top-buttons">
|
v-if="assignmentResponse"
|
||||||
<v-btn
|
class="assignment-card"
|
||||||
icon
|
|
||||||
variant="text"
|
|
||||||
class="back-btn"
|
|
||||||
to="/user/assignment"
|
|
||||||
>
|
>
|
||||||
<v-icon>mdi-arrow-left</v-icon>
|
<div class="top-buttons">
|
||||||
</v-btn>
|
<v-btn
|
||||||
|
icon
|
||||||
|
variant="text"
|
||||||
|
class="back-btn"
|
||||||
|
to="/user/assignment"
|
||||||
|
>
|
||||||
|
<v-icon>mdi-arrow-left</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
|
||||||
<v-btn
|
<v-btn
|
||||||
icon
|
icon
|
||||||
variant="text"
|
variant="text"
|
||||||
class="top-right-btn"
|
class="top-right-btn"
|
||||||
@click="deleteAssignment(data.assignment.id, data.assignment.within)"
|
@click="deleteAssignment(assignmentResponse.data.assignment.id, assignmentResponse.data.assignment.within)"
|
||||||
>
|
>
|
||||||
<v-icon>mdi-delete</v-icon>
|
<v-icon>mdi-delete</v-icon>
|
||||||
</v-btn>
|
</v-btn>
|
||||||
</div>
|
</div>
|
||||||
<v-card-title class="text-h4 assignmentTopTitle">{{ data.assignment.title }}</v-card-title>
|
<v-card-title class="text-h4 assignmentTopTitle">{{ assignmentResponse.data.assignment.title }}</v-card-title>
|
||||||
<v-card-subtitle class="subtitle-section">
|
<v-card-subtitle class="subtitle-section">
|
||||||
<using-query-result
|
<using-query-result
|
||||||
:query-result="lpQueryResult"
|
:query-result="lpQueryResult"
|
||||||
v-slot="{ data: lpData }"
|
v-slot="{ data: lpData }"
|
||||||
>
|
>
|
||||||
<v-btn
|
|
||||||
v-if="lpData"
|
|
||||||
:to="`/learningPath/${lpData.hruid}/${language}/${lpData.startNode.learningobjectHruid}?assignmentNo=${assignmentId}&classId=${classId}`"
|
|
||||||
variant="tonal"
|
|
||||||
color="primary"
|
|
||||||
>
|
|
||||||
{{ t("learning-path") }}
|
|
||||||
</v-btn>
|
|
||||||
</using-query-result>
|
|
||||||
</v-card-subtitle>
|
|
||||||
|
|
||||||
<v-card-text class="description">
|
|
||||||
{{ data.assignment.description }}
|
|
||||||
</v-card-text>
|
|
||||||
|
|
||||||
<v-card-text class="group-section">
|
|
||||||
<h3>{{ t("groups") }}</h3>
|
|
||||||
<div class="table-scroll">
|
|
||||||
<v-data-table
|
|
||||||
:headers="headers"
|
|
||||||
:items="allGroups"
|
|
||||||
item-key="id"
|
|
||||||
class="elevation-1"
|
|
||||||
>
|
|
||||||
<template #[`item.name`]="{ item }">
|
|
||||||
<v-btn
|
<v-btn
|
||||||
@click="openGroupDetails(item)"
|
v-if="lpData"
|
||||||
variant="text"
|
:to="`/learningPath/${lpData.hruid}/${language}/${lpData.startNode.learningobjectHruid}?assignmentNo=${assignmentId}&classId=${classId}`"
|
||||||
|
variant="tonal"
|
||||||
color="primary"
|
color="primary"
|
||||||
>
|
>
|
||||||
{{ item.name }}
|
{{ t("learning-path") }}
|
||||||
</v-btn>
|
</v-btn>
|
||||||
</template>
|
</using-query-result>
|
||||||
|
</v-card-subtitle>
|
||||||
|
|
||||||
<template #[`item.progress`]="{ item }">
|
<v-card-text class="description">
|
||||||
<v-progress-linear
|
{{ assignmentResponse.data.assignment.description }}
|
||||||
:model-value="item.progress"
|
|
||||||
color="blue-grey"
|
|
||||||
height="25"
|
|
||||||
>
|
|
||||||
<template v-slot:default="{ value }">
|
|
||||||
<strong>{{ Math.ceil(value) }}%</strong>
|
|
||||||
</template>
|
|
||||||
</v-progress-linear>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #[`item.submission`]="{ item }">
|
|
||||||
<v-btn
|
|
||||||
:to="item.submitted ? `${props.assignmentId}/submissions/` : undefined"
|
|
||||||
:color="item.submitted ? 'green' : 'red'"
|
|
||||||
variant="text"
|
|
||||||
class="text-capitalize"
|
|
||||||
>
|
|
||||||
{{ item.submitted ? t("see-submission") : t("no-submission") }}
|
|
||||||
</v-btn>
|
|
||||||
</template>
|
|
||||||
</v-data-table>
|
|
||||||
</div>
|
|
||||||
</v-card-text>
|
|
||||||
|
|
||||||
<v-dialog
|
|
||||||
v-model="dialog"
|
|
||||||
max-width="50%"
|
|
||||||
>
|
|
||||||
<v-card>
|
|
||||||
<v-card-title class="headline">{{ t("members") }}</v-card-title>
|
|
||||||
<v-card-text>
|
|
||||||
<v-list>
|
|
||||||
<v-list-item
|
|
||||||
v-for="(member, index) in selectedGroup.members"
|
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
<v-list-item-content>
|
|
||||||
<v-list-item-title
|
|
||||||
>{{ member.firstName + " " + member.lastName }}
|
|
||||||
</v-list-item-title>
|
|
||||||
</v-list-item-content>
|
|
||||||
</v-list-item>
|
|
||||||
</v-list>
|
|
||||||
</v-card-text>
|
</v-card-text>
|
||||||
<v-card-actions>
|
|
||||||
|
<v-card-text class="group-section">
|
||||||
|
<h3>{{ t("groups") }}</h3>
|
||||||
|
<div class="table-scroll">
|
||||||
|
<v-data-table
|
||||||
|
:headers="headers"
|
||||||
|
:items="allGroups"
|
||||||
|
item-key="id"
|
||||||
|
class="elevation-1"
|
||||||
|
>
|
||||||
|
<template #[`item.name`]="{ item }">
|
||||||
|
<v-btn
|
||||||
|
@click="openGroupDetails(item)"
|
||||||
|
variant="text"
|
||||||
|
color="primary"
|
||||||
|
>
|
||||||
|
{{ item.name }}
|
||||||
|
</v-btn>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #[`item.progress`]="{ item }">
|
||||||
|
<v-progress-linear
|
||||||
|
:model-value="item.progress"
|
||||||
|
color="blue-grey"
|
||||||
|
height="25"
|
||||||
|
>
|
||||||
|
<template v-slot:default="{ value }">
|
||||||
|
<strong>{{ Math.ceil(value) }}%</strong>
|
||||||
|
</template>
|
||||||
|
</v-progress-linear>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #[`item.submission`]="{ item }">
|
||||||
|
<v-btn
|
||||||
|
:to="item.submitted ? `${props.assignmentId}/submissions/` : undefined"
|
||||||
|
:color="item.submitted ? 'green' : 'red'"
|
||||||
|
variant="text"
|
||||||
|
class="text-capitalize"
|
||||||
|
>
|
||||||
|
{{ item.submitted ? t("see-submission") : t("no-submission") }}
|
||||||
|
</v-btn>
|
||||||
|
</template>
|
||||||
|
</v-data-table>
|
||||||
|
</div>
|
||||||
|
</v-card-text>
|
||||||
|
|
||||||
|
<v-dialog
|
||||||
|
v-model="dialog"
|
||||||
|
max-width="50%"
|
||||||
|
>
|
||||||
|
<v-card>
|
||||||
|
<v-card-title class="headline">{{ t("members") }}</v-card-title>
|
||||||
|
<v-card-text>
|
||||||
|
<v-list>
|
||||||
|
<v-list-item
|
||||||
|
v-for="(member, index) in selectedGroup.members"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<v-list-item-content>
|
||||||
|
<v-list-item-title
|
||||||
|
>{{ member.firstName + " " + member.lastName }}
|
||||||
|
</v-list-item-title>
|
||||||
|
</v-list-item-content>
|
||||||
|
</v-list-item>
|
||||||
|
</v-list>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-actions>
|
||||||
|
<v-btn
|
||||||
|
color="primary"
|
||||||
|
@click="dialog = false"
|
||||||
|
>Close</v-btn
|
||||||
|
>
|
||||||
|
</v-card-actions>
|
||||||
|
</v-card>
|
||||||
|
</v-dialog>
|
||||||
|
<!--
|
||||||
|
<v-card-actions class="justify-end">
|
||||||
<v-btn
|
<v-btn
|
||||||
color="primary"
|
size="large"
|
||||||
@click="dialog = false"
|
color="success"
|
||||||
>Close</v-btn
|
variant="text"
|
||||||
>
|
>
|
||||||
|
{{ t("view-submissions") }}
|
||||||
|
</v-btn>
|
||||||
</v-card-actions>
|
</v-card-actions>
|
||||||
|
-->
|
||||||
</v-card>
|
</v-card>
|
||||||
</v-dialog>
|
</v-col>
|
||||||
<!--
|
<v-col cols="12" sm="6" md="6" class="responsive-col">
|
||||||
<v-card-actions class="justify-end">
|
<v-table class="table">
|
||||||
<v-btn
|
<thead>
|
||||||
size="large"
|
<tr>
|
||||||
color="success"
|
<th class="header">{{ t("group") }}</th>
|
||||||
variant="text"
|
<th class="header">
|
||||||
>
|
{{ t("progress") }}
|
||||||
{{ t("view-submissions") }}
|
</th>
|
||||||
</v-btn>
|
<th class="header">{{ t("Members") }}</th>
|
||||||
</v-card-actions>
|
<th class="header">
|
||||||
-->
|
<v-btn :to="`/assignment/${assignmentResponse.data.assignment.within}/${assignmentResponse.data.assignment.id}`" variant="text">
|
||||||
</v-card>
|
<v-icon> mdi-pencil </v-icon>
|
||||||
|
</v-btn>
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr v-for="g in assignmentResponse.data.assignment.groups as GroupDTO[]" :key="g.groupNumber">
|
||||||
|
<td>
|
||||||
|
<v-btn :to="`/assignment/${assignmentResponse.data.assignment.within}/${assignmentResponse.data.assignment.id}`" variant="text">
|
||||||
|
{{ g.groupNumber }}
|
||||||
|
<v-icon end> mdi-menu-right </v-icon>
|
||||||
|
</v-btn>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<v-progress-linear :model-value="0" color="blue-grey" height="25">
|
||||||
|
<template v-slot:default="{ value }">
|
||||||
|
<strong>{{ Math.ceil(value) }}%</strong>
|
||||||
|
</template>
|
||||||
|
</v-progress-linear>
|
||||||
|
</td>
|
||||||
|
<td>{{ (g.members! as StudentDTO[]).map(member => member.username).join(', ') }}</td>
|
||||||
|
<td>
|
||||||
|
<v-btn :to="`/assignment/${assignmentResponse.data.assignment.within}/${assignmentResponse.data.assignment.id}`" variant="text">
|
||||||
|
<v-icon color="red"> mdi-delete </v-icon>
|
||||||
|
</v-btn>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</v-table>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-container>
|
||||||
</using-query-result>
|
</using-query-result>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -231,4 +280,106 @@ Const {groupProgressMap} = props.useGroupsWithProgress(
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
-webkit-overflow-scrolling: touch;
|
-webkit-overflow-scrolling: touch;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: #0e6942;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: bolder;
|
||||||
|
padding-top: 2%;
|
||||||
|
font-size: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
color: #0e6942;
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.join {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20px;
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link {
|
||||||
|
color: #0b75bb;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
margin-left: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 850px) {
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.join {
|
||||||
|
text-align: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sheet {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-breakpoint {
|
||||||
|
flex-direction: column !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.responsive-col {
|
||||||
|
max-width: 100% !important;
|
||||||
|
flex-basis: 100% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Reference in a new issue