tdpeuter/2025SELab2-project-Dwengo
tdpeuter/2025SELab2-project-Dwengo
Archived
1
Fork 0
Code Issues Releases 4 Packages 2 Wiki Activity

feat(frontend): buttons kleiner maken

Browse source
This commit is contained in:
Joyelle Ndagijimana 2025-04-08 21:44:50 +02:00
parent 9aae5a3a46
commit ce5e9cd342
7 changed files with 55 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

6
frontend/src/components/assignments/AssignmentForm.vue
View file

@ -17,11 +17,7 @@ import type {GroupDTO} from "@dwengo-1/common/interfaces/group";
import {GroupController} from "@/controllers/groups.ts";
/***
TODO: when clicking the assign button from lp page pass the lp-object like this:
router.push({
path: '/assignment/create',
query: { learningPath: 'learningPathObject' }
});
TODO: when clicking the assign button from lp page pass the lp-object in a state:
*/
const props = defineProps<{
learningPath?: LearningPath | null; // Optional learningPath prop

4
frontend/src/i18n/locale/de.json
View file

@ -63,5 +63,7 @@
"pick-class": "Wählen Sie eine klasse",
"choose-students": "Studenten auswählen",
"create-group": "Gruppe erstellen",
"class": "klasse"
"class": "klasse",
"delete": "löschen",
"view-assignment": "Auftrag anzeigen"
}

4
frontend/src/i18n/locale/en.json
View file

@ -63,5 +63,7 @@
"pick-class": "Pick a class",
"choose-students": "Select students",
"create-group": "Create group",
"class": "class"
"class": "class",
"delete": "delete",
"view-assignment": "View assignment"
}

4
frontend/src/i18n/locale/fr.json
View file

@ -63,5 +63,7 @@
"pick-class": "Choisissez une classe",
"choose-students": "Sélectionnez des élèves",
"create-group": "Créer un groupe",
"class": "classe"
"class": "classe",
"delete": "supprimer",
"view-assignment": "Voir le travail"
}

4
frontend/src/i18n/locale/nl.json
View file

@ -63,5 +63,7 @@
"pick-class": "Kies een klas",
"choose-students": "Studenten selecteren",
"create-group": "Groep aanmaken",
"class": "klas"
"class": "klas",
"delete": "verwijderen",
"view-assignment": "Opdracht bekijken"
}

7
frontend/src/views/assignments/SingleAssignment.vue
View file

@ -12,7 +12,6 @@
const route = useRoute();
const assignmentId = ref(Number(route.params.id));
const classId = window.history.state?.class_id;
//const assignment = ref(null);
const controller = new AssignmentController(classId);
const role = auth.authState.activeRole;
@ -23,7 +22,6 @@
}, null);
/***
// Display group members
const myGroup = computed(() => {
@ -35,9 +33,8 @@
});
*/
const deleteAssignment = () => {
console.log('Delete assignment:', assignmentId.value);
//controller.deleteAssignment(assignmentId);
const deleteAssignment = async () => {
await controller.deleteAssignment(assignmentId.value);
};
</script>

65
frontend/src/views/assignments/UserAssignments.vue
View file

@ -3,12 +3,12 @@ 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";
import {useTeacherClassesQuery} from "@/queries/teachers.ts";
import {useStudentClassesQuery} from "@/queries/students.ts";
import {ClassController} from "@/controllers/classes.ts";
import type {ClassDTO} from "@dwengo-1/common/interfaces/class";
import {asyncComputed} from "@vueuse/core";
import {AssignmentController} from "@/controllers/assignments.ts";
const {t} = useI18n();
const router = useRouter();
@ -58,7 +58,7 @@ const goToCreateAssignment = async () => {
await router.push('/assignment/create');
};
const goToAssignmentDetails = async (id: number, class_id: number) => {
const goToAssignmentDetails = async (id: number, class_id: string) => {
await router.push({
path: `/assignment/${id}`,
state: {class_id},
@ -66,7 +66,9 @@ const goToAssignmentDetails = async (id: number, class_id: number) => {
};
const goToDeleteAssignment = (id: number) => {
const goToDeleteAssignment = async (id: number, class_id: string) => {
const controller = new AssignmentController(class_id);
await controller.deleteAssignment(id);
};
onMounted(async () => {
@ -97,7 +99,7 @@ onMounted(async () => {
>
<v-card class="assignment-card">
<v-card-text class="card-content">
<div class="left-content">
<div class="top-content">
<div class="assignment-title">{{ assignment.title }}</div>
<div class="assignment-class">
{{ t('class') }}:
@ -106,18 +108,24 @@ onMounted(async () => {
</span>
</div>
</div>
<div class="right-content">
<v-card-actions>
<v-btn color="primary" @click="goToAssignmentDetails(assignment.id, assignment.class.id)">
<div class="spacer"></div>
<div class="button-row">
<v-btn color="primary"
size="small"
@click="goToAssignmentDetails(assignment.id, assignment.class.id)">
{{ t('view-assignment') }}
</v-btn>
<v-btn v-if="isTeacher" color="red" @click="goToDeleteAssignment(assignment.id)">
<v-btn v-if="isTeacher" color="red"
size="small"
@click="goToDeleteAssignment(assignment.id, assignment.class.id)">
{{ t('delete') }}
</v-btn>
</v-card-actions>
</div>
</v-card-text>
</v-card>
</v-col>
</v-row>
</v-container>
@ -146,18 +154,25 @@ onMounted(async () => {
.card-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
flex-direction: column;
height: 100%;
min-height: 150px;
}
.left-content {
display: flex;
flex-direction: column;
.top-content {
margin-bottom: 1rem;
word-break: break-word;
}
.spacer {
flex: 1;
min-width: 200px;
max-width: 70%;
}
.button-row {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
flex-wrap: wrap;
}
.assignment-title {
@ -177,19 +192,5 @@ onMounted(async () => {
color: #333;
}
.right-content {
display: flex;
justify-content: flex-end;
align-items: center;
flex-shrink: 0;
flex-wrap: wrap;
width: 100%;
}
@media (min-width: 700px) {
.right-content {
width: auto;
}
}
</style>