feat(frontend): controllers integreren in assignments

This commit is contained in:
Joyelle Ndagijimana 2025-04-07 21:18:09 +02:00
parent baea0051e6
commit 23947ecd92
11 changed files with 100 additions and 65 deletions

View file

@ -1,11 +1,11 @@
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
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 {t} = useI18n();
const router = useRouter();
const role = auth.authState.activeRole;
@ -19,17 +19,12 @@
};
onMounted(loadAssignments);
const goToCreateAssignment = () => {
router.push('/assignment/create');
};
const goToEditAssignment = (id: string) => {
router.push(`/assignment/${id}/edit`);
};
const goToAssignmentDetails = (id: string) => {
router.push(`/assignment/${id}`);
};
@ -45,7 +40,7 @@
<v-btn
v-if="isTeacher"
color="primary"
class="mb-4"
class="mb-4 center-btn"
@click="goToCreateAssignment"
>
{{ t('new-assignment') }}
@ -58,24 +53,26 @@
:key="assignment.id"
cols="12"
>
<v-card class="assignment-card" variant="outlined">
<v-card class="assignment-card">
<v-card-text class="card-content">
<div class="left-content">
<div class="assignment-title">{{ assignment.title }}</div>
<div class="assignment-class">
{{ t('class') }}:
<span class="class-name">
{{ assignment.class }}
</span>
{{ assignment.class }}
</span>
</div>
</div>
<div class="right-content">
<v-btn
color="primary"
@click="goToAssignmentDetails(assignment.id)"
>
{{ t('view-assignment') }}
</v-btn>
<v-card-actions>
<v-btn color="primary" @click="goToAssignmentDetails(assignment.id)">
{{ t('view-assignment') }}
</v-btn>
<v-btn v-if="isTeacher" color="red" @click="goToDeleteAssignment(assignment.id)">
{{ t('delete') }}
</v-btn>
</v-card-actions>
</div>
</v-card-text>
</v-card>
@ -94,6 +91,13 @@
box-sizing: border-box;
}
.center-btn {
display: block;
margin-left: auto;
margin-right: auto;
}
.assignment-card {
padding: 1rem;
}
@ -117,7 +121,7 @@
.assignment-title {
font-weight: bold;
font-size: 1.5rem;
margin-bottom: 0.3rem;
margin-bottom: 0.1rem;
word-break: break-word;
}
@ -133,8 +137,17 @@
.right-content {
display: flex;
align-items: center;
justify-content: flex-end;
align-items: center;
flex-shrink: 0;
flex-wrap: wrap;
width: 100%;
}
@media (min-width: 700px) {
.right-content {
width: auto;
}
}
</style>