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

feat: create assignment form is klaar

Browse source
This commit is contained in:
Joyelle Ndagijimana 2025-03-29 19:14:10 +01:00
parent 05fa69f0c7
commit db7c5409fc
8 changed files with 273 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

103
frontend/src/views/assignments/CreateAssignment.vue
View file

@ -2,49 +2,66 @@
import {useI18n} from "vue-i18n";
import {computed, onMounted, ref, watch} from "vue";
import GroupSelector from "@/components/GroupSelector.vue";
import {classes} from "@/utils/tempData.ts";
import {assignmentTitleRules, classesRules, learningPathRules, submitForm} from "@/utils/assignmentForm.ts"; // Assuming your tempData.ts has the required classes
const {t, locale} = useI18n();
const language = ref(locale.value);
const searchQuery = ref("");
const searchQuery = ref('');
const assignmentTitle = ref('');
const allLearningPaths = ref([]);
const filteredLearningPaths = ref([]);
const selectedLearningPath = ref(null);
const allClasses = ref(["f", "r"]);
const allClasses = ref([...classes.map(cl => ({title: cl.displayName, value: cl.id}))]);
const selectedClasses = ref([]);
const allStudents = ref([]); // Fetched students from each selected class
const groups = ref<string[][]>([]); // Each group is a list of student {names, id's}
const groups = ref<string[][]>([]);
const availableClasses = computed(() => {
//TODO: replace by real data
return classes.filter(cl => selectedClasses.value.some(c => c.value === cl.id));
});
const allStudents = computed(() => {
//TODO: replace by real data
return classes
.filter(cl => selectedClasses.value.some(c => c.value === cl.id))
.flatMap(cl => cl.students.map(st => ({
title: `${st.firstName} ${st.lastName}`,
value: st.username,
classes: cl
})));
});
// New group is added to the list
const addGroupToList = (students: string[]) => {
if (students.length) {
groups.value = [...groups.value, students];
}
};
// Fetch all learning paths initially
async function fetchAllLearningPaths() {
//TODO: replace by function from controller
try {
//TODO: replace by function from controller
const response = await fetch(`http://localhost:3000/api/learningPath?language=${language.value}`);
// Error
if (!response.ok) throw new Error("Failed to fetch learning paths");
// Collect all the learning paths and store them in a list by hruid and title
const data = await response.json();
allLearningPaths.value = data.map((lp: { hruid: string; title: string }) => ({
hruid: lp.hruid,
title: lp.title
}));
// Get all the learning paths in the filtered list
filteredLearningPaths.value = [...allLearningPaths.value];
} catch (error) {
console.error(error);
}
}
// Re-fetch the learning paths when the language changes
watch(
() => locale.value,
(newLocale) => {
// Check if the language is valid
if (!["nl", "en"].includes(newLocale)) {
language.value = "en";
}
@ -59,34 +76,31 @@
);
});
// Fetch all learning paths on mount
onMounted(fetchAllLearningPaths);
// All students that aren't already in a group
const availableStudents = computed(() => {
const groupedStudents = new Set(groups.value.flat());
return allStudents.value.filter(student => !groupedStudents.has(student));
});
const addGroupToList = (students: string[]) => {
if (students.length) {
groups.value.push(students);
}
const submitFormHandler = () => {
submitForm(assignmentTitle.value, selectedLearningPath.value, selectedClasses.value, groups.value);
};
</script>
<template>
<div class="main-container">
<h1 class="title">{{ t("new-assignment") }}</h1>
<v-card class="form-card">
<v-form class="form-container">
<v-form class="form-container" validate-on="submit lazy" @submit.prevent="submitFormHandler">
<v-container class="step-container">
<v-card-text>
<v-text-field :v-model="assignmentTitle" :label="t('title')" :rules="assignmentTitleRules"
density="compact" variant="solo" clearable required></v-text-field>
</v-card-text>
<v-card-text>
<v-combobox
v-model="selectedLearningPath"
:items="searchResults"
:label="t('choose-lp')"
:rules="learningPathRules"
variant="solo"
clearable
hide-details
@ -94,6 +108,7 @@
append-inner-icon="mdi-magnify"
item-title="title"
item-value="value"
required
:filter="(item, query: string) => item.title.toLowerCase().includes(query.toLowerCase())"
></v-combobox>
</v-card-text>
@ -103,39 +118,33 @@
v-model="selectedClasses"
:items="allClasses"
:label="t('choose-classes')"
:rules="classesRules"
variant="solo"
clearable
multiple
hide-details
density="compact"
chips
append-inner-icon="mdi-magnify"
item-title="title"
item-value="value"
required
></v-combobox>
</v-card-text>
<v-container>
<h3>{{ t('create-groups') }}</h3>
<h3>{{ t('create-groups') }}</h3>
<GroupSelector
:students="availableStudents"
@groupCreated="addGroupToList"
/>
<GroupSelector
:students="allStudents"
:availableClasses="availableClasses"
:groups="groups"
@groupCreated="addGroupToList"
/>
<!-- Counter for created groups -->
<v-card-text v-if="groups.length">
<strong>{{ t('created-groups') }}: {{ groups.length }}</strong>
</v-card-text>
<!-- Display created groups -->
<v-card-text v-if="groups.length">
<ul>
<li v-for="(group, index) in groups" :key="index">
{{ group.join(', ') }}
</li>
</ul>
</v-card-text>
</v-container>
<!-- Counter for created groups -->
<v-card-text v-if="groups.length">
<strong>Created Groups: {{ groups.length }}</strong>
</v-card-text>
</v-container>
<v-btn class="mt-2" type="submit" block>Submit</v-btn>