feat(frontend): nieuwe "cancel" knop bij create assignment
This commit is contained in:
Joyelle Ndagijimana
parent
1d29adaa31
commit
800f6433d6
10 changed files with 44 additions and 238 deletions
|
|
@ -1,200 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { useRoute } from "vue-router";
|
||||
import {ref, computed} from "vue";
|
||||
import {useI18n} from "vue-i18n";
|
||||
import auth from "@/services/auth/auth-service.ts";
|
||||
import {AssignmentController} from "@/controllers/assignments.ts";
|
||||
import {asyncComputed} from "@vueuse/core";
|
||||
|
||||
|
||||
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);
|
||||
|
||||
const role = auth.authState.activeRole;
|
||||
const isTeacher = computed(() => role === 'teacher');
|
||||
|
||||
const assignment = asyncComputed(async () => {
|
||||
return await controller.getByNumber(assignmentId.value)
|
||||
}, null);
|
||||
|
||||
|
||||
const submitted = ref(true);//TODO: update by fetching submissions and check group
|
||||
|
||||
const submitAssignment = async () => {
|
||||
//TODO
|
||||
};
|
||||
|
||||
|
||||
/***
|
||||
// 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)
|
||||
);
|
||||
});
|
||||
*/
|
||||
|
||||
const deleteAssignment = async () => {
|
||||
await controller.deleteAssignment(assignmentId.value);
|
||||
};
|
||||
|
||||
</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>
|
||||
|
||||
<v-btn
|
||||
v-if="isTeacher"
|
||||
icon
|
||||
variant="text"
|
||||
class="top-right-btn"
|
||||
@click="deleteAssignment"
|
||||
>
|
||||
<v-icon>mdi-delete</v-icon>
|
||||
</v-btn>
|
||||
<v-chip
|
||||
v-if="!isTeacher"
|
||||
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-card-text class="description">
|
||||
{{ assignment.description }}
|
||||
</v-card-text>
|
||||
|
||||
<v-card-text class="group-section">
|
||||
<h3>{{ t("group") }}</h3>
|
||||
|
||||
<!-- Student view
|
||||
<div v-if="!isTeacher">
|
||||
<div v-if="myGroup">
|
||||
<ul>
|
||||
<li v-for="student in myGroup.members" :key="student.username">
|
||||
{{ student.firstName + ' ' + student.lastName}}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>-->
|
||||
|
||||
<!-- Teacher view
|
||||
<div v-if="isTeacher">
|
||||
<v-expansion-panels>
|
||||
<v-expansion-panel
|
||||
v-for="(group, index) in assignment.groups"
|
||||
:key="group.id"
|
||||
>
|
||||
<v-expansion-panel-title>
|
||||
{{ t("group") }} {{ index + 1 }}
|
||||
</v-expansion-panel-title>
|
||||
<v-expansion-panel-text>
|
||||
<ul>
|
||||
<li v-for="student in group.members" :key="student.username">
|
||||
{{ student.firstName + ' ' + student.lastName }}
|
||||
</li>
|
||||
</ul>
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
</div>-->
|
||||
</v-card-text >
|
||||
<v-card-actions class="justify-end">
|
||||
<v-btn
|
||||
v-if="!isTeacher"
|
||||
size="large"
|
||||
color="success"
|
||||
variant="flat"
|
||||
@click="submitAssignment"
|
||||
>
|
||||
{{ t("submit") }}
|
||||
</v-btn>
|
||||
<v-btn
|
||||
v-if="isTeacher"
|
||||
size="large"
|
||||
color="success"
|
||||
variant="text"
|
||||
>
|
||||
{{ t("view-submissions") }}
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
|
||||
</v-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 2%;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.assignment-card {
|
||||
width: 85%;
|
||||
padding: 2%;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-top: 2%;
|
||||
line-height: 1.6;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.top-right-btn {
|
||||
position: absolute;
|
||||
right: 2%;
|
||||
color: red;
|
||||
}
|
||||
|
||||
.group-section {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.group-section h3 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.group-section ul {
|
||||
padding-left: 1.2rem;
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
.subtitle-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -18,12 +18,12 @@ import {useRoute} from "vue-router";
|
|||
/***
|
||||
TODO: when clicking the assign button from lp page pass the lp-hruid in a query like this:
|
||||
router.push({
|
||||
path: "/assignment/create,
|
||||
query: {
|
||||
...route.query,
|
||||
lp: hruid,
|
||||
},
|
||||
});
|
||||
path: "/assignment/create,
|
||||
query: {
|
||||
...route.query,
|
||||
lp: hruid,
|
||||
},
|
||||
});
|
||||
*/
|
||||
|
||||
const route = useRoute();
|
||||
|
|
@ -176,7 +176,12 @@ async function submitFormHandler(): Promise<void> {
|
|||
:rules="descriptionRules"
|
||||
></v-textarea>
|
||||
</v-card-text>
|
||||
<v-btn class="mt-2" color="secondary" type="submit" block>Submit</v-btn>
|
||||
<v-card-text>
|
||||
<v-btn class="mt-2" color="secondary" type="submit" block>{{ t("submit") }}</v-btn>
|
||||
<v-btn to="/user/assignment" color="grey" block>{{ t("cancel") }}</v-btn>
|
||||
</v-card-text>
|
||||
|
||||
|
||||
</v-container>
|
||||
</v-form>
|
||||
</v-card>
|
||||
|
|
|
|||
|
|
@ -66,13 +66,14 @@ function openGroupDetails(group): void {
|
|||
dialog.value = true;
|
||||
}
|
||||
|
||||
const headers = ref([
|
||||
{title: t('group'), align: 'start', key: 'name'},
|
||||
{title: t('progress'), align: 'center', key: 'progress'},
|
||||
{title: t('submission'), align: 'center', key: 'submission'}
|
||||
const headers = computed(() => [
|
||||
{ title: t('group'), align: 'start', key: 'name' },
|
||||
{ title: t('progress'), align: 'center', key: 'progress' },
|
||||
{ title: t('submission'), align: 'center', key: 'submission' }
|
||||
]);
|
||||
|
||||
|
||||
|
||||
const {mutate, isSuccess} = useDeleteAssignmentMutation();
|
||||
|
||||
async function deleteAssignment(num: number, clsId: string): Promise<void> {
|
||||
|
|
@ -177,7 +178,7 @@ async function deleteAssignment(num: number, clsId: string): Promise<void> {
|
|||
|
||||
<v-dialog v-model="dialog" max-width="50%">
|
||||
<v-card>
|
||||
<v-card-title class="headline">Group Members</v-card-title>
|
||||
<v-card-title class="headline">{{t("members")}}</v-card-title>
|
||||
<v-card-text>
|
||||
<v-list>
|
||||
<v-list-item
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue