99 lines
2.4 KiB
Vue
99 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import { useRoute } from "vue-router";
|
|
import {ref, onMounted, computed} from "vue";
|
|
import {useI18n} from "vue-i18n";
|
|
import {assignments} from "@/utils/tempData.ts";
|
|
import auth from "@/services/auth/auth-service.ts";
|
|
|
|
const {t} = useI18n();
|
|
const route = useRoute();
|
|
const assignmentId = ref(route.params.id as string);
|
|
const assignment = ref(null);
|
|
|
|
const role = auth.authState.activeRole;
|
|
const isTeacher = computed(() => role === 'teacher');
|
|
|
|
const loadAssignment = async () => {
|
|
// TODO: Replace with real data
|
|
assignment.value = assignments[0];
|
|
};
|
|
|
|
const deleteAssignment = () => {
|
|
console.log('Delete assignment:', assignmentId.value);
|
|
};
|
|
|
|
onMounted(loadAssignment);
|
|
|
|
</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="delete-btn"
|
|
@click="deleteAssignment"
|
|
>
|
|
<v-icon>mdi-delete</v-icon>
|
|
</v-btn>
|
|
</div>
|
|
<v-card-title class="text-h4">{{ assignment.title }}</v-card-title>
|
|
<v-card-subtitle>
|
|
<v-btn
|
|
:to="`/learningPath/${assignment.learningPathHruid}`"
|
|
variant="tonal"
|
|
color="primary"
|
|
>
|
|
{{ t("learning-path") }}
|
|
</v-btn>
|
|
</v-card-subtitle>
|
|
|
|
<v-card-text class="description">
|
|
{{ assignment.description }}
|
|
</v-card-text>
|
|
</v-card>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 2%;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.assignment-card {
|
|
width: 90%;
|
|
max-width: 900px;
|
|
padding: 2%;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.description {
|
|
margin-top: 2%;
|
|
line-height: 1.6;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.delete-btn {
|
|
position: absolute;
|
|
right: 1%;
|
|
color: red;
|
|
}
|
|
|
|
</style>
|
|
|