feat: edit assignment pagina aangemaakt
This commit is contained in:
parent
2c2aeca7ab
commit
4f09d004ab
11 changed files with 225 additions and 247 deletions
|
@ -1,87 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRouter } from 'vue-router';
|
||||
import auth from "@/services/auth/auth-service.ts";
|
||||
import {assignments} from "@/utils/tempData.ts";
|
||||
|
||||
const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
|
||||
const role = auth.authState.activeRole;
|
||||
|
||||
const allAssignments = ref(assignments);
|
||||
const isTeacher = computed(() => role === 'teacher');
|
||||
|
||||
const loadAssignments = async () => {
|
||||
//TODO: replace with controller function
|
||||
// fetch all student's or teacher's assignments
|
||||
};
|
||||
|
||||
onMounted(loadAssignments);
|
||||
|
||||
const goToCreateAssignment = () => {
|
||||
router.push('/assignment/create');
|
||||
};
|
||||
|
||||
const goToEditAssignment = (id: number) => {
|
||||
router.push(`/assignment/edit/${id}`);
|
||||
};
|
||||
|
||||
const goToAssignmentDetails = (id: number) => {
|
||||
router.push(`/assignment/${id}`);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="assignments-container">
|
||||
<h1>{{ t('assignments') }}</h1>
|
||||
|
||||
<v-btn v-if="isTeacher" color="primary" class="mb-4" @click="goToCreateAssignment">
|
||||
{{ t('new-assignment') }}
|
||||
</v-btn>
|
||||
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-col v-for="assignment in allAssignments" :key="assignment.id" cols="12">
|
||||
<v-card class="assignment-card" variant="outlined">
|
||||
<v-card-title>{{ assignment.title }}</v-card-title>
|
||||
<v-divider></v-divider>
|
||||
<v-card-text>{{ assignment.description }}</v-card-text>
|
||||
|
||||
<v-card-actions>
|
||||
<v-btn color="primary" @click="goToAssignmentDetails(assignment.id)">
|
||||
{{ t('view-assignment') }}
|
||||
</v-btn>
|
||||
<v-btn v-if="isTeacher" color="secondary" @click="goToEditAssignment(assignment.id)">
|
||||
{{ t('edit') }}
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.assignments-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.assignment-card {
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
Loading…
Add table
Add a link
Reference in a new issue