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

feat(frontend): alle leerpaden en klasses worden gefetched via de controllers

Browse source
This commit is contained in:
Joyelle Ndagijimana 2025-04-08 01:29:42 +02:00
parent 23947ecd92
commit 1328771551
7 changed files with 113 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2,7 +2,6 @@
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,
classRules,
@ -11,39 +10,80 @@
submitForm
} from "@/utils/assignmentForm.ts";
import DeadlineSelector from "@/components/DeadlineSelector.vue";
import auth from "@/services/auth/auth-service.ts";
import {useTeacherClassesQuery} from "@/queries/teachers.ts";
import {useRouter} from "vue-router";
import {useGetAllLearningPaths} from "@/queries/learning-paths.ts";
import UsingQueryResult from "@/components/UsingQueryResult.vue";
import type {LearningPath} from "@/data-objects/learning-paths/learning-path.ts";
import type {Language} from "@/data-objects/language.ts";
const router = useRouter();
const {t, locale} = useI18n();
const role = ref(auth.authState.activeRole);
const username = ref<string | null>(null);
onMounted(async () => {
// Redirect student
if (role.value === 'student') {
await router.push('/user');
}
// Get the user's username
const user = await auth.loadUser();
username.value = user?.profile?.preferred_username ?? null;
});
const language = computed(() => locale.value);
//Fetch all learning paths
const learningPathsQueryResults = useGetAllLearningPaths(language);
watch(language, (newLanguage) => {
console.log(newLanguage);
learningPathsQueryResults.refetch();
});
// Fetch and store all the teacher's classes
const { data: classes, isLoading, error, refetch } = useTeacherClassesQuery(username, true);
const allClasses = computed(() => {
if (isLoading.value) {
return [];
}
if (error.value) {
return [];
}
return classes.value?.classes || [];
});
const form = ref();
const language = ref(locale.value);
const searchQuery = ref('');
const assignmentTitle = ref('');
const deadline = ref(null);
const description = ref('');
const allLearningPaths = ref([]);
const filteredLearningPaths = ref([]);
const selectedLearningPath = ref(null);
const allClasses = ref([...classes.map(cl => ({title: cl.displayName, value: cl.id}))]);
const selectedClass = ref(null);
const groups = ref<string[][]>([]);
const availableClass = computed(() => {
//TODO: replace by real data
return classes.find(cl => selectedClass.value?.value === cl.id) || null;
return /*classes.find(cl => selectedClass.value?.value === cl.id) ||*/ null;
});
const allStudents = computed(() => {
//TODO: replace by real data
if (!selectedClass.value) return [];
/*if (!selectedClass.value) return [];
const cl = classes.find(c => c.id === selectedClass.value.value);
return cl ? cl.students.map(st => ({
title: `${st.firstName} ${st.lastName}`,
value: st.username,
classes: cl
})) : [];
})) : [];*/
return [];
});
@ -54,48 +94,13 @@
}
};
async function fetchAllLearningPaths() {
try {
//TODO: replace by function from controller
const response = await fetch(`http://localhost:3000/api/learningPath?language=${language.value}`);
if (!response.ok) throw new Error("Failed to fetch learning paths");
const data = await response.json();
allLearningPaths.value = data.map((lp: { hruid: string; title: string }) => ({
hruid: lp.hruid,
title: lp.title
}));
filteredLearningPaths.value = [...allLearningPaths.value];
} catch (error) {
console.error(error);
}
}
watch(
() => locale.value,
(newLocale) => {
if (!["nl", "en"].includes(newLocale)) {
language.value = "en";
}
fetchAllLearningPaths();
},
{immediate: true}
);
watch(selectedClass, () => {
groups.value = [];
});
const searchResults = computed(() => {
return filteredLearningPaths.value.filter((lp: { hruid: string; title: string }) =>
lp.title.toLowerCase().includes(searchQuery.value.toLowerCase())
);
});
onMounted(fetchAllLearningPaths);
const submitFormHandler = async () => {
const { valid } = await form.value.validate();
// Don't submit thr form if all rules don't apply
// Don't submit the form if all rules don't apply
if (!valid) return;
submitForm(assignmentTitle.value, selectedLearningPath.value?.hruid, selectedClass.value.value, groups.value, deadline.value, description.value, locale.value);
};
@ -113,23 +118,28 @@
density="compact" variant="outlined" 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="outlined"
clearable
hide-details
density="compact"
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>
<using-query-result
:query-result="learningPathsQueryResults"
v-slot="{ data }: { data: LearningPath[] }"
>
<v-card-text>
<v-combobox
v-model="selectedLearningPath"
:items="data"
:label="t('choose-lp')"
:rules="learningPathRules"
variant="outlined"
clearable
hide-details
density="compact"
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>
</using-query-result>
<v-card-text>
<v-combobox
@ -142,8 +152,8 @@
hide-details
density="compact"
append-inner-icon="mdi-magnify"
item-title="title"
item-value="value"
item-title="displayName"
item-value="id"
required
></v-combobox>