feat(frontend): groups in assignments ophalen
This commit is contained in:
Joyelle Ndagijimana
parent
45cb020861
commit
d6009ff878
8 changed files with 182 additions and 126 deletions
|
|
@ -1,21 +1,29 @@
|
|||
<script setup lang="ts">
|
||||
import { useRoute } from "vue-router";
|
||||
import {ref, computed} from "vue";
|
||||
import {ref, computed, defineProps} from "vue";
|
||||
import auth from "@/services/auth/auth-service.ts";
|
||||
import {useI18n} from "vue-i18n";
|
||||
import {AssignmentController} from "@/controllers/assignments.ts";
|
||||
import {useAssignmentQuery} from "@/queries/assignments.ts";
|
||||
import UsingQueryResult from "@/components/UsingQueryResult.vue";
|
||||
import type {AssignmentResponse} from "@/controllers/assignments.ts";
|
||||
import type {GroupDTO} from "@dwengo-1/common/interfaces/group";
|
||||
import {asyncComputed} from "@vueuse/core";
|
||||
import {useStudentsByUsernamesQuery} from "@/queries/students.ts";
|
||||
|
||||
const props = defineProps<{
|
||||
classId: string
|
||||
assignmentId: number
|
||||
groups: GroupDTO[] | undefined
|
||||
}>();
|
||||
|
||||
const {t, locale} = useI18n();
|
||||
const language = computed(() => locale.value);
|
||||
const route = useRoute();
|
||||
const assignmentId = ref(Number(route.params.id));
|
||||
const classId = window.history.state?.class_id;
|
||||
const controller = new AssignmentController(classId);
|
||||
// Get the user's username/id
|
||||
const username = asyncComputed(async () => {
|
||||
const user = await auth.loadUser();
|
||||
return user?.profile?.preferred_username ?? undefined
|
||||
});
|
||||
|
||||
const assignment = asyncComputed(async () => {
|
||||
return await controller.getByNumber(assignmentId.value)
|
||||
}, null);
|
||||
const assignmentQueryResult = useAssignmentQuery(() => props.classId, props.assignmentId);
|
||||
|
||||
const submitted = ref(true);//TODO: update by fetching submissions and check group
|
||||
|
||||
|
|
@ -23,83 +31,83 @@ const submitAssignment = async () => {
|
|||
//TODO
|
||||
};
|
||||
|
||||
const group = computed(() => {
|
||||
return props?.groups?.find(group =>
|
||||
group.members.some(m => m.username === username.value)
|
||||
);
|
||||
});
|
||||
|
||||
/***
|
||||
// Display group members
|
||||
const myGroup = computed(() => {
|
||||
if (!assignment.value || !assignment.value.groups) return null;
|
||||
console.log(assignment.value.groups)
|
||||
return assignment.value.groups.find(group =>
|
||||
group.members.some(m => m.username === myUsername)
|
||||
);
|
||||
});
|
||||
*/
|
||||
// Assuming group.value.members is a list of usernames
|
||||
const studentQueries = useStudentsByUsernamesQuery(() => group.value?.members as string[]);
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container">
|
||||
<v-card v-if="assignment" class="assignment-card">
|
||||
<div class="top-buttons">
|
||||
<v-btn
|
||||
icon
|
||||
variant="text"
|
||||
class="back-btn"
|
||||
to="/user/assignment"
|
||||
>
|
||||
<v-icon>mdi-arrow-left</v-icon>
|
||||
</v-btn>
|
||||
<using-query-result
|
||||
:query-result="assignmentQueryResult"
|
||||
v-slot="{ data }: {data: AssignmentResponse}"
|
||||
>
|
||||
<v-card v-if="data" class="assignment-card">
|
||||
<div class="top-buttons">
|
||||
<v-btn
|
||||
icon
|
||||
variant="text"
|
||||
class="back-btn"
|
||||
to="/user/assignment"
|
||||
>
|
||||
<v-icon>mdi-arrow-left</v-icon>
|
||||
</v-btn>
|
||||
|
||||
<v-chip
|
||||
class="ma-2 top-right-btn"
|
||||
label
|
||||
color="success"
|
||||
>
|
||||
{{ t("submitted") }}
|
||||
</v-chip>
|
||||
</div>
|
||||
<v-card-title class="text-h4">{{ assignment.title }}</v-card-title>
|
||||
<v-card-subtitle class="subtitle-section">
|
||||
<v-btn
|
||||
:to="`/learningPath/${language}/${assignment.learningPath}`"
|
||||
variant="tonal"
|
||||
color="primary"
|
||||
>
|
||||
{{ t("learning-path") }}
|
||||
</v-btn>
|
||||
</v-card-subtitle>
|
||||
<v-chip
|
||||
v-if="submitted"
|
||||
class="ma-2 top-right-btn"
|
||||
label
|
||||
color="success"
|
||||
>
|
||||
{{ t("submitted") }}
|
||||
</v-chip>
|
||||
</div>
|
||||
<v-card-title class="text-h4">{{ data.title }}</v-card-title>
|
||||
<v-card-subtitle class="subtitle-section">
|
||||
<v-btn
|
||||
:to="`/learningPath/${language}/${data.learningPath}`"
|
||||
variant="tonal"
|
||||
color="primary"
|
||||
>
|
||||
{{ t("learning-path") }}
|
||||
</v-btn>
|
||||
</v-card-subtitle>
|
||||
|
||||
<v-card-text class="description">
|
||||
{{ assignment.description }}
|
||||
</v-card-text>
|
||||
<v-card-text class="description">
|
||||
{{ data.description }}
|
||||
</v-card-text>
|
||||
|
||||
<v-card-text class="group-section">
|
||||
<h3>{{ t("group") }}</h3>
|
||||
|
||||
<!-- Student view
|
||||
<div v-if="!isTeacher">
|
||||
<div v-if="myGroup">
|
||||
<v-card-text class="group-section">
|
||||
<h3>{{ t("group") }}</h3>
|
||||
<pre>{{ props.groups }}</pre>
|
||||
<div v-if="studentQueries">
|
||||
<ul>
|
||||
<li v-for="student in myGroup.members" :key="student.username">
|
||||
{{ student.firstName + ' ' + student.lastName}}
|
||||
<li v-for="student in studentQueries" :key="student.data?.student.id">
|
||||
{{ student.data?.student.firstName + ' ' + student.data?.student.lastName }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>-->
|
||||
|
||||
</v-card-text >
|
||||
<v-card-actions class="justify-end">
|
||||
<v-btn
|
||||
size="large"
|
||||
color="success"
|
||||
variant="flat"
|
||||
@click="submitAssignment"
|
||||
>
|
||||
{{ t("submit") }}
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card-text>
|
||||
<v-card-actions class="justify-end">
|
||||
<v-btn
|
||||
size="large"
|
||||
color="success"
|
||||
variant="flat"
|
||||
@click="submitAssignment"
|
||||
>
|
||||
{{ t("submit") }}
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
|
||||
</v-card>
|
||||
</v-card>
|
||||
</using-query-result>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue