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

feat(frontend): Heel ruwe eerste versie van leerpadbeheerpagina toegevoegd

Browse source
This commit is contained in:
Gerald Schmittinger 2025-05-13 01:03:55 +02:00
parent 1a768fedcc
commit 2db5d77296
15 changed files with 732 additions and 5820 deletions
Download patch file Download diff file Expand all files Collapse all files

1
frontend/package.json
View file

@ -21,6 +21,7 @@
"@tanstack/vue-query": "^5.69.0",
"@vueuse/core": "^13.1.0",
"axios": "^1.8.2",
"json-editor-vue": "^0.18.1",
"oidc-client-ts": "^3.1.0",
"rollup": "^4.40.0",
"uuid": "^11.1.0",

3
frontend/src/components/MenuBar.vue
View file

@ -7,8 +7,10 @@
// Import assets
import dwengoLogo from "../../../assets/img/dwengo-groen-zwart.svg";
import { useLocale } from "vuetify";
const { t, locale } = useI18n();
const { current: vuetifyLocale } = useLocale();
const role = auth.authState.activeRole;
const _router = useRouter(); // Zonder '_' gaf dit een linter error voor unused variable
@ -31,6 +33,7 @@
// Logic to change the language of the website to the selected language
function changeLanguage(langCode: string): void {
locale.value = langCode;
vuetifyLocale.value = langCode;
localStorage.setItem("user-lang", langCode);
}

5
frontend/src/controllers/learning-paths.ts
View file

@ -37,9 +37,8 @@ export class LearningPathController extends BaseController {
return dtos.map((dto) => LearningPath.fromDTO(dto));
}
async getAllByAdmin(admin: string): Promise<LearningPath[]> {
const dtos = await this.get<LearningPathDTO[]>("/", { admin });
return dtos.map((dto) => LearningPath.fromDTO(dto));
async getAllByAdminRaw(admin: string): Promise<LearningPathDTO[]> {
return await this.get<LearningPathDTO[]>("/", { admin });
}
async postLearningPath(learningPath: LearningPathDTO): Promise<LearningPathDTO> {

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

@ -121,5 +121,18 @@
"invite": "invite",
"assignmentIndicator": "ASSIGNMENT",
"searchAllLearningPathsTitle": "Search all learning paths",
"searchAllLearningPathsDescription": "You didn't find what you were looking for? Click here to search our whole database of available learning paths."
"searchAllLearningPathsDescription": "You didn't find what you were looking for? Click here to search our whole database of available learning paths.",
"learningObjects": "Learning objects",
"learningPaths": "Learning paths",
"hruid": "HRUID",
"language": "Language",
"version": "Version",
"previewFor": "Preview for ",
"upload": "Upload",
"learningObjectUploadTitle": "Upload a learning object",
"uploadFailed": "Upload failed",
"invalidZip": "This is not a valid zip file.",
"emptyZip": "This zip file is empty",
"missingMetadata": "This learning object is missing a metadata.json file.",
"missingContent": "This learning object is missing a content.* file."
}

10
frontend/src/main.ts
View file

@ -7,15 +7,20 @@ import * as components from "vuetify/components";
import * as directives from "vuetify/directives";
import i18n from "./i18n/i18n.ts";
// JSON-editor
import JsonEditorVue from 'json-editor-vue';
// Components
import App from "./App.vue";
import router from "./router";
import { aliases, mdi } from "vuetify/iconsets/mdi";
import { VueQueryPlugin, QueryClient } from "@tanstack/vue-query";
import { de, en, fr, nl } from "vuetify/locale";
const app = createApp(App);
app.use(router);
app.use(JsonEditorVue, {})
const link = document.createElement("link");
link.rel = "stylesheet";
@ -32,6 +37,11 @@ const vuetify = createVuetify({
mdi,
},
},
locale: {
locale: i18n.global.locale,
fallback: 'en',
messages: { nl, en, de, fr }
}
});
const queryClient = new QueryClient({

1
frontend/src/queries/learning-objects.ts
View file

@ -5,7 +5,6 @@ import { getLearningObjectController } from "@/controllers/controllers.ts";
import type { LearningObject } from "@/data-objects/learning-objects/learning-object.ts";
import type { LearningPath } from "@/data-objects/learning-paths/learning-path.ts";
import type { AxiosError } from "axios";
import type { LearningObjectIdentifierDTO } from "@dwengo-1/common/interfaces/learning-content";
export const LEARNING_OBJECT_KEY = "learningObject";
const learningObjectController = getLearningObjectController();

44
frontend/src/queries/learning-paths.ts
View file

@ -1,8 +1,10 @@
import { type MaybeRefOrGetter, toValue } from "vue";
import type { Language } from "@/data-objects/language.ts";
import { useQuery, type UseQueryReturnType } from "@tanstack/vue-query";
import { useMutation, useQuery, useQueryClient, type UseMutationReturnType, type UseQueryReturnType } from "@tanstack/vue-query";
import { getLearningPathController } from "@/controllers/controllers";
import type { LearningPath } from "@/data-objects/learning-paths/learning-path.ts";
import type { AxiosError } from "axios";
import type { LearningPathDTO } from "@/data-objects/learning-paths/learning-path-dto";
export const LEARNING_PATH_KEY = "learningPath";
const learningPathController = getLearningPathController();
@ -32,6 +34,46 @@ export function useGetAllLearningPathsByThemeQuery(
});
}
export function useGetAllLearningPathsByAdminQuery(
admin: MaybeRefOrGetter<string | undefined>
): UseQueryReturnType<LearningPathDTO[], AxiosError> {
return useQuery({
queryKey: [LEARNING_PATH_KEY, "getAllByAdmin", admin],
queryFn: async () => learningPathController.getAllByAdminRaw(toValue(admin)!),
enabled: () => Boolean(toValue(admin))
});
}
export function usePostLearningPathMutation():
UseMutationReturnType<LearningPathDTO, AxiosError, { learningPath: LearningPathDTO }, unknown> {
const queryClient = useQueryClient();
return useMutation({
mutationFn: async ({ learningPath }) => learningPathController.postLearningPath(learningPath),
onSuccess: async () => queryClient.invalidateQueries({ queryKey: [LEARNING_PATH_KEY] })
});
}
export function usePutLearningPathMutation():
UseMutationReturnType<LearningPathDTO, AxiosError, { learningPath: LearningPathDTO }, unknown> {
const queryClient = useQueryClient();
return useMutation({
mutationFn: async ({ learningPath }) => learningPathController.putLearningPath(learningPath),
onSuccess: async () => queryClient.invalidateQueries({ queryKey: [LEARNING_PATH_KEY] })
});
}
export function useDeleteLearningPathMutation():
UseMutationReturnType<LearningPathDTO, AxiosError, { hruid: string, language: Language }, unknown> {
const queryClient = useQueryClient();
return useMutation({
mutationFn: async ({ hruid, language }) => learningPathController.deleteLearningPath(hruid, language),
onSuccess: async () => queryClient.invalidateQueries({ queryKey: [LEARNING_PATH_KEY] })
});
}
export function useSearchLearningPathQuery(
query: MaybeRefOrGetter<string | undefined>,
language: MaybeRefOrGetter<string | undefined>,

20
frontend/src/views/own-learning-content/OwnLearningContentPage.vue
View file

@ -1,18 +1,23 @@
<script setup lang="ts">
import {useLearningObjectListForAdminQuery} from "@/queries/learning-objects.ts";
import OwnLearningObjectsView from "@/views/own-learning-content/OwnLearningObjectsView.vue"
import OwnLearningPathsView from "@/views/own-learning-content/OwnLearningPathsView.vue"
import OwnLearningObjectsView from "@/views/own-learning-content/learning-objects/OwnLearningObjectsView.vue"
import OwnLearningPathsView from "@/views/own-learning-content/learning-paths/OwnLearningPathsView.vue"
import authService from "@/services/auth/auth-service.ts";
import UsingQueryResult from "@/components/UsingQueryResult.vue";
import type { LearningObject } from "@/data-objects/learning-objects/learning-object";
import { ref, type Ref } from "vue";
import { useI18n } from "vue-i18n";
import { useGetAllLearningPathsByAdminQuery } from "@/queries/learning-paths";
import type { LearningPathDTO } from "@/data-objects/learning-paths/learning-path-dto";
const { t } = useI18n();
const learningObjectsQuery =
useLearningObjectListForAdminQuery(authService.authState.user?.profile.preferred_username);
const learningPathsQuery =
useGetAllLearningPathsByAdminQuery(authService.authState.user?.profile.preferred_username);
type Tab = "learningObjects" | "learningPaths";
const tab: Ref<Tab> = ref("learningObjects");
</script>
@ -34,7 +39,12 @@ import { useI18n } from "vue-i18n";
</using-query-result>
</v-tabs-window-item>
<v-tabs-window-item value="learningPaths">
<own-learning-paths-view/>
<using-query-result
:query-result="learningPathsQuery"
v-slot="response: { data: LearningPathDTO[] }"
>
<own-learning-paths-view :learning-paths="response.data"/>
</using-query-result>
</v-tabs-window-item>
</v-tabs-window>
</div>
@ -45,8 +55,10 @@ import { useI18n } from "vue-i18n";
display: flex;
flex-direction: column;
height: 100%;
padding: 20px 30px;
}
.main-content {
flex: 1;
flex: 1 1;
height: 100%;
}
</style>

9
frontend/src/views/own-learning-content/OwnLearningPathsView.vue
View file

@ -1,9 +0,0 @@
<script lang="ts">
</script>
<template>
<p>Own learning paths</p>
</template>
<style>
</style>

50
frontend/src/views/own-learning-content/learning-objects/LearningObjectPreviewCard.vue Normal file
View file

@ -0,0 +1,50 @@
<script setup lang="ts">
import type { LearningObject } from '@/data-objects/learning-objects/learning-object';
import UsingQueryResult from '@/components/UsingQueryResult.vue';
import LearningObjectContentView from '../../learning-paths/learning-object/content/LearningObjectContentView.vue';
import { useDeleteLearningObjectMutation, useLearningObjectHTMLQuery } from '@/queries/learning-objects';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const props = defineProps<{
selectedLearningObject?: LearningObject
}>();
const learningObjectQueryResult = useLearningObjectHTMLQuery(
() => props.selectedLearningObject?.key,
() => props.selectedLearningObject?.language,
() => props.selectedLearningObject?.version
);
const { isPending, mutate } = useDeleteLearningObjectMutation();
function deleteLearningObject(): void {
if (props.selectedLearningObject) {
mutate({
hruid: props.selectedLearningObject.key,
language: props.selectedLearningObject.language,
version: props.selectedLearningObject.version
});
}
}
</script>
<template>
<v-card
v-if="selectedLearningObject"
:title="t('previewFor') + selectedLearningObject.title"
>
<template v-slot:text>
<using-query-result :query-result="learningObjectQueryResult" v-slot="response: { data: Document }">
<learning-object-content-view :learning-object-content="response.data"></learning-object-content-view>
</using-query-result>
</template>
<template v-slot:actions>
<v-btn text="Delete" @click="deleteLearningObject()"></v-btn>
</template>
</v-card>
</template>
<style scoped>
</style>

9
frontend/src/views/own-learning-content/LearningObjectUploadButton.vue → frontend/src/views/own-learning-content/learning-objects/LearningObjectUploadButton.vue
View file

@ -32,17 +32,14 @@
<template>
<v-dialog max-width="500" v-model="dialogOpen">
<template v-slot:activator="{ props: activatorProps }">
<v-fab icon="mdi mdi-plus" v-bind="activatorProps"></v-fab>
<v-fab icon="mdi mdi-plus" v-bind="activatorProps" color="rgb(14, 105, 66)" size="large"></v-fab>
</template>
<template v-slot:default="{ isActive }">
<v-card :title="t('learning_object_upload_title')">
<v-card :title="t('learningObjectUploadTitle')">
<v-card-text>
<v-file-upload
:browse-text="t('upload_browse')"
:divider-text="t('upload_divider')"
icon="mdi-upload"
:title="t('upload_drag_and_drop')"
v-model="fileToUpload"
:disabled="isPending"
></v-file-upload>
@ -50,7 +47,7 @@
v-if="error"
icon="mdi mdi-alert-circle"
type="error"
:title="t('upload_failed')"
:title="t('uploadFailed')"
:text="t((error.response?.data as ContainsErrorString).error ?? error.message)"
></v-alert>
</v-card-text>

29
frontend/src/views/own-learning-content/OwnLearningObjectsView.vue → frontend/src/views/own-learning-content/learning-objects/OwnLearningObjectsView.vue
View file

@ -1,11 +1,9 @@
<script setup lang="ts">
import type { LearningObject } from '@/data-objects/learning-objects/learning-object';
import LearningObjectUploadButton from '@/views/own-learning-content/LearningObjectUploadButton.vue'
import LearningObjectContentView from '../learning-paths/learning-object/content/LearningObjectContentView.vue';
import LearningObjectUploadButton from '@/views/own-learning-content/learning-objects/LearningObjectUploadButton.vue'
import LearningObjectPreviewCard from './LearningObjectPreviewCard.vue';
import { computed, ref, type Ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useLearningObjectHTMLQuery } from '@/queries/learning-objects';
import UsingQueryResult from '@/components/UsingQueryResult.vue';
const { t } = useI18n();
const props = defineProps<{
@ -19,17 +17,12 @@ import UsingQueryResult from '@/components/UsingQueryResult.vue';
{ title: t("title"), key: "title" }
];
const selectedLearningObjects: Ref<LearningObject[]> = ref([])
const selectedLearningObjects: Ref<LearningObject[]> = ref([]);
const selectedLearningObject = computed(() =>
selectedLearningObjects.value ? selectedLearningObjects.value[0] : undefined
)
const learningObjectQueryResult = useLearningObjectHTMLQuery(
() => selectedLearningObject.value?.key,
() => selectedLearningObject.value?.language,
() => selectedLearningObject.value?.version
);
</script>
<template>
@ -43,17 +36,7 @@ import UsingQueryResult from '@/components/UsingQueryResult.vue';
show-select
return-object
/>
<v-card
class="preview"
v-if="selectedLearningObjects.length > 0"
:title="t('preview_for') + selectedLearningObjects[0].title"
>
<template v-slot:text>
<using-query-result :query-result="learningObjectQueryResult" v-slot="response: { data: Document }">
<learning-object-content-view :learning-object-content="response.data"></learning-object-content-view>
</using-query-result>
</template>
</v-card>
<learning-object-preview-card class="preview" :selectedLearningObject="selectedLearningObject"/>
</div>
<div class="fab">
<learning-object-upload-button/>
@ -70,9 +53,11 @@ import UsingQueryResult from '@/components/UsingQueryResult.vue';
display: flex;
gap: 20px;
padding: 20px;
flex-wrap: wrap;
}
.preview {
flex: 1;
min-width: 400px;
}
.table {
flex: 1;

62
frontend/src/views/own-learning-content/learning-paths/LearningPathPreviewCard.vue Normal file
View file

@ -0,0 +1,62 @@
<script setup lang="ts">
import UsingQueryResult from '@/components/UsingQueryResult.vue';
import { useI18n } from 'vue-i18n';
import type { LearningPathDTO } from '@/data-objects/learning-paths/learning-path-dto';
import { computed, ref, watch } from 'vue';
import JsonEditorVue from 'json-editor-vue'
import { useMutation } from '@tanstack/vue-query';
import { usePostLearningPathMutation, usePutLearningPathMutation } from '@/queries/learning-paths';
const { t } = useI18n();
const props = defineProps<{
selectedLearningPath?: LearningPathDTO
}>();
const INDENT = 4;
const DEFAULT_LEARNING_PATH: LearningPathDTO = {
language: '',
hruid: '',
title: '',
description: '',
num_nodes: 0,
num_nodes_left: 0,
nodes: [],
keywords: '',
target_ages: [],
min_age: 0,
max_age: 0,
__order: 0
}
const { isPending: isPostPending, mutate: doPost } = usePostLearningPathMutation();
const { isPending: isPutPending, mutate: doPut } = usePutLearningPathMutation();
const learningPath = ref(DEFAULT_LEARNING_PATH);
watch(() => props.selectedLearningPath, () => learningPath.value = props.selectedLearningPath ?? DEFAULT_LEARNING_PATH);
function uploadLearningPath(): void {
if (props.selectedLearningPath) {
doPut({ learningPath: learningPath.value });
} else {
doPost({ learningPath: learningPath.value });
}
}
</script>
<template>
<v-card
:title="props.selectedLearningPath ? t('editLearningPath') : t('newLearningPath')"
>
<template v-slot:text>
<json-editor-vue v-model="learningPath"></json-editor-vue>
</template>
<template v-slot:actions>
<v-btn @click="uploadLearningPath" :loading="isPostPending || isPutPending">{{ props.selectedLearningPath ? t('saveChanges') : t('create') }}</v-btn>
</template>
</v-card>
</template>
<style scoped>
</style>

60
frontend/src/views/own-learning-content/learning-paths/OwnLearningPathsView.vue Normal file
View file

@ -0,0 +1,60 @@
<script setup lang="ts">
import LearningPathPreviewCard from './LearningPathPreviewCard.vue';
import { computed, ref, type Ref } from 'vue';
import { useI18n } from 'vue-i18n';
import type { LearningPathDTO } from '@/data-objects/learning-paths/learning-path-dto';
const { t } = useI18n();
const props = defineProps<{
learningPaths: LearningPathDTO[]
}>();
const tableHeaders = [
{ title: t("hruid"), width: "250px", key: "key" },
{ title: t("language"), width: "50px", key: "language" },
{ title: t("title"), key: "title" }
];
const selectedLearningPaths: Ref<LearningPathDTO[]> = ref([]);
const selectedLearningPath = computed(() =>
selectedLearningPaths.value ? selectedLearningPaths.value[0] : undefined
);
</script>
<template>
<div class="root">
<v-data-table
class="table"
v-model="selectedLearningPaths"
:items="props.learningPaths"
:headers="tableHeaders"
select-strategy="single"
show-select
return-object
/>
<learning-path-preview-card class="preview" :selectedLearningPath="selectedLearningPath"/>
</div>
</template>
<style scoped>
.fab {
position: absolute;
right: 20px;
bottom: 20px;
}
.root {
display: flex;
gap: 20px;
padding: 20px;
flex-wrap: wrap;
}
.preview {
flex: 1;
min-width: 400px;
}
.table {
flex: 1;
}
</style>

6234
package-lock.json generated
View file

File diff suppressed because it is too large Load diff