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

Merge dev into feat/progress-bar

Browse source
This commit is contained in:
Joyelle Ndagijimana 2025-05-17 01:27:19 +02:00
commit 43317c5dee
120 changed files with 4409 additions and 1520 deletions
Download patch file Download diff file Expand all files Collapse all files

18
frontend/Dockerfile
View file

@ -3,22 +3,28 @@ FROM node:22 AS build-stage
# install simple http server for serving static content
RUN npm install -g http-server
WORKDIR /app
WORKDIR /app/dwengo
# Install dependencies
COPY package*.json ./
COPY ./frontend/package.json ./frontend/
# Frontend depends on common
COPY common/package.json ./common/
RUN npm install --silent
# Build the frontend
# Root tsconfig.json
COPY tsconfig.json ./
COPY assets ./assets/
COPY tsconfig.json tsconfig.build.json ./
WORKDIR /app/frontend
COPY assets ./assets
COPY common ./common
RUN npm run build --workspace=common
WORKDIR /app/dwengo/frontend
COPY frontend ./
@ -28,8 +34,8 @@ FROM nginx:stable AS production-stage
COPY config/nginx/nginx.conf /etc/nginx/nginx.conf
COPY --from=build-stage /app/assets /usr/share/nginx/html/assets
COPY --from=build-stage /app/frontend/dist /usr/share/nginx/html
COPY --from=build-stage /app/dwengo/assets /usr/share/nginx/html/assets
COPY --from=build-stage /app/dwengo/frontend/dist /usr/share/nginx/html
EXPOSE 8080

81
frontend/e2e/assignments.spec.ts Normal file
View file

@ -0,0 +1,81 @@
import { test, expect } from "@playwright/test";
test("Teacher can create new assignment", async ({ page }) => {
await page.goto("/");
// Login
await page.getByRole("link", { name: "log in" }).click();
await page.getByRole("button", { name: "teacher" }).click();
await page.getByRole("textbox", { name: "Username or email" }).fill("testleerkracht1");
await page.getByRole("textbox", { name: "Password" }).fill("password");
await page.getByRole("button", { name: "Sign In" }).click();
// Go to assignments
await expect(page.getByRole("banner").getByRole("link", { name: "Assignments" })).toBeVisible();
await page.getByRole("banner").getByRole("link", { name: "Assignments" }).click();
await expect(page.getByRole("heading", { name: "Assignments" })).toBeVisible();
await expect(page.getByRole("button", { name: "New Assignment" })).toBeVisible();
// Create new assignment
await page.getByRole("button", { name: "New Assignment" }).click();
await expect(page.getByRole("button", { name: "submit" })).toBeVisible();
await expect(page.getByRole("link", { name: "cancel" })).toBeVisible();
await page.getByRole("textbox", { name: "Title Title" }).fill("Assignment test 1");
await page.getByRole("textbox", { name: "Select a learning path Select" }).click();
await page.getByText("Using notebooks").click();
await page.getByRole("textbox", { name: "Pick a class Pick a class" }).click();
await page.getByText("class01").click();
await page.getByRole("textbox", { name: "Select Deadline Select" }).fill("2099-01-01T12:34");
await page.getByRole("textbox", { name: "Description Description" }).fill("Assignment description");
await page.getByRole("button", { name: "submit" }).click();
await expect(page.getByText("Assignment test")).toBeVisible();
await expect(page.getByRole("main").getByRole("button").first()).toBeVisible();
await expect(page.getByRole("main")).toContainText("Assignment test 1");
await expect(page.getByRole("link", { name: "Learning path" })).toBeVisible();
await expect(page.getByRole("main")).toContainText("Assignment description");
});
test("Student can see list of assignments", async ({ page }) => {
await page.goto("/");
// Login
await page.getByRole("link", { name: "log in" }).click();
await page.getByRole("button", { name: "student" }).click();
await page.getByRole("textbox", { name: "Username or email" }).fill("testleerling1");
await page.getByRole("textbox", { name: "Password" }).fill("password");
await page.getByRole("button", { name: "Sign In" }).click();
// Go to assignments
await expect(page.getByRole("banner").getByRole("link", { name: "Assignments" })).toBeVisible();
await page.getByRole("banner").getByRole("link", { name: "Assignments" }).click();
await expect(page.getByRole("heading", { name: "Assignments" })).toBeVisible();
await expect(page.getByText("dire straits")).toBeVisible();
await expect(page.locator(".button-row > .v-btn").first()).toBeVisible();
await expect(page.getByText("Class: class01").first()).toBeVisible();
});
test("Student can see assignment details", async ({ page }) => {
await page.goto("/");
// Login
await page.getByRole("link", { name: "log in" }).click();
await page.getByRole("button", { name: "student" }).click();
await page.getByRole("textbox", { name: "Username or email" }).fill("testleerling1");
await page.getByRole("textbox", { name: "Password" }).fill("password");
await page.getByRole("button", { name: "Sign In" }).click();
// Go to assignments
await expect(page.getByRole("banner").getByRole("link", { name: "Assignments" })).toBeVisible();
await page.getByRole("banner").getByRole("link", { name: "Assignments" }).click();
await expect(page.getByText("Assignment: Conditional")).toBeVisible();
await expect(page.locator("div:nth-child(2) > .v-card > .button-row > .v-btn")).toBeVisible();
// View assignment details
await page.locator("div:nth-child(2) > .v-card > .button-row > .v-btn").click();
await expect(page.getByText("Assignment: Conditional")).toBeVisible();
await expect(page.getByRole("link", { name: "Learning path" })).toBeVisible();
await expect(page.getByRole("progressbar").locator("div").first()).toBeVisible();
});

12
frontend/e2e/basic-learning.spec.ts
View file

@ -1,8 +1,16 @@
import { test, expect } from "./fixtures.js";
import { test, expect } from "@playwright/test";
test("Users can filter", async ({ page }) => {
await page.goto("/user");
await page.goto("/");
// Login
await page.getByRole("link", { name: "log in" }).click();
await page.getByRole("button", { name: "teacher" }).click();
await page.getByRole("textbox", { name: "Username or email" }).fill("testleerkracht1");
await page.getByRole("textbox", { name: "Password" }).fill("password");
await page.getByRole("button", { name: "Sign In" }).click();
// Filter
await page.getByRole("combobox").filter({ hasText: "Select a themeAll" }).locator("i").click();
await page.getByText("Nature and climate").click();
await page.getByRole("combobox").filter({ hasText: "Select ageAll agesSelect age" }).locator("i").click();

5
frontend/e2e/basic-learning.ts
View file

@ -1,5 +0,0 @@
import { test, expect } from "./fixtures.js";
test("myTest", async ({ page }) => {
await expect(page).toHaveURL("/");
});

107
frontend/e2e/class.spec.ts Normal file
View file

@ -0,0 +1,107 @@
import { test, expect } from "@playwright/test";
test("Teacher can create a class", async ({ page }) => {
const className = "DeTijdLoze";
await page.goto("/");
// Login
await page.getByRole("link", { name: "log in" }).click();
await page.getByRole("button", { name: "teacher" }).click();
await page.getByRole("textbox", { name: "Username or email" }).fill("testleerkracht1");
await page.getByRole("textbox", { name: "Password" }).fill("password");
await page.getByRole("button", { name: "Sign In" }).click();
// Go to class
await expect(page.getByRole("banner").getByRole("link", { name: "Classes" })).toBeVisible();
await page.getByRole("banner").getByRole("link", { name: "Classes" }).click();
// Check if the class page is visible
await expect(page.getByRole("heading", { name: "Classes" })).toBeVisible();
await expect(page.getByRole("textbox", { name: "classname classname" })).toBeVisible();
await expect(page.getByRole("button", { name: "create" })).toBeVisible();
// Create a class
await page.getByRole("textbox", { name: "classname classname" }).click();
await page.getByRole("textbox", { name: "classname classname" }).fill(className);
await page.getByRole("button", { name: "create" }).click();
// Check if the class is created
await expect(page.getByRole("dialog").getByText("code")).toBeVisible();
await expect(page.getByRole("button", { name: "close" })).toBeVisible();
});
test("Teacher can share a class by code", async ({ page }) => {
await page.goto("/");
// Login
await page.getByRole("link", { name: "log in" }).click();
await page.getByRole("button", { name: "teacher" }).click();
await page.getByRole("textbox", { name: "Username or email" }).fill("testleerkracht1");
await page.getByRole("textbox", { name: "Password" }).fill("password");
await page.getByRole("button", { name: "Sign In" }).click();
// Go to classes
await expect(page.getByRole("banner").getByRole("link", { name: "Classes" })).toBeVisible();
await page.getByRole("banner").getByRole("link", { name: "Classes" }).click();
await expect(page.getByRole("row", { name: "class01" }).locator("i").nth(1)).toBeVisible();
await page.getByRole("row", { name: "class01" }).locator("i").nth(1).click();
await expect(page.getByRole("button").filter({ hasText: /^$/ }).nth(2)).toBeVisible();
await expect(page.getByRole("button").filter({ hasText: /^$/ }).nth(3)).toBeVisible();
await page.getByRole("button").filter({ hasText: /^$/ }).nth(3).click();
await expect(page.getByText("copied!")).toBeVisible();
await page.getByRole("button", { name: "close" }).click();
});
test("Student can join class by code", async ({ page }) => {
await page.goto("/");
// Login
await page.getByRole("link", { name: "log in" }).click();
await page.getByRole("button", { name: "student" }).click();
await page.getByRole("textbox", { name: "Username or email" }).fill("testleerling1");
await page.getByRole("textbox", { name: "Password" }).fill("password");
await page.getByRole("button", { name: "Sign In" }).click();
// Go to class
await expect(page.getByRole("banner").getByRole("link", { name: "Classes" })).toBeVisible();
await page.getByRole("banner").getByRole("link", { name: "Classes" }).click();
// Check if the class page is visible
await expect(page.getByRole("heading", { name: "Classes" })).toBeVisible();
await expect(page.getByRole("heading", { name: "Join class" })).toBeVisible();
await expect(page.getByRole("textbox", { name: "CODE CODE" })).toBeVisible();
await expect(page.getByRole("button", { name: "submit" })).toBeVisible();
// Join a class
await page.getByRole("textbox", { name: "CODE CODE" }).click();
await page.getByRole("textbox", { name: "CODE CODE" }).fill("X2J9QT");
await page.getByRole("button", { name: "submit" }).click();
});
test("Teacher can remove student from class", async ({ page }) => {
await page.goto("/");
// Login
await page.getByRole("link", { name: "log in" }).click();
await page.getByRole("button", { name: "teacher" }).click();
await page.getByRole("textbox", { name: "Username or email" }).fill("testleerkracht1");
await page.getByRole("textbox", { name: "Password" }).fill("password");
await page.getByRole("button", { name: "Sign In" }).click();
await expect(page.getByRole("banner").getByRole("link", { name: "Classes" })).toBeVisible();
await page.getByRole("banner").getByRole("link", { name: "Classes" }).click();
await expect(page.getByRole("link", { name: "class01" })).toBeVisible();
await expect(page.locator("#app")).toContainText("8");
await page.getByRole("link", { name: "class01" }).click();
await expect(page.getByRole("cell", { name: "Kurt Cobain" })).toBeVisible();
await expect(page.getByRole("row", { name: "Kurt Cobain remove" }).getByRole("button")).toBeVisible();
await page.getByRole("row", { name: "Kurt Cobain remove" }).getByRole("button").click();
await expect(page.getByText("Are you sure?")).toBeVisible();
await expect(page.getByRole("button", { name: "cancel" })).toBeVisible();
await expect(page.getByRole("button", { name: "yes" })).toBeVisible();
await page.getByRole("button", { name: "yes" }).click();
await page.getByRole("banner").getByRole("link", { name: "Classes" }).click();
await expect(page.locator("#app")).toContainText("7");
});

2
frontend/package.json
View file

@ -17,10 +17,12 @@
"test:e2e": "playwright test"
},
"dependencies": {
"@dwengo-1/common": "^0.2.0",
"@tanstack/react-query": "^5.69.0",
"@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",

20
frontend/src/components/BrowseThemes.vue
View file

@ -5,6 +5,7 @@
import { AGE_TO_THEMES, THEMESITEMS } from "@/utils/constants.ts";
import { useThemeQuery } from "@/queries/themes.ts";
import type { Theme } from "@/data-objects/theme.ts";
import authService from "@/services/auth/auth-service";
const props = defineProps({
selectedTheme: { type: String, required: true },
@ -33,6 +34,8 @@
cards.value = themes;
}
});
const isTeacher = computed(() => authService.authState.activeRole === "teacher");
</script>
<template>
@ -73,6 +76,23 @@
class="fill-height grey-bg-card"
/>
</v-col>
<v-col
v-if="isTeacher"
cols="12"
sm="6"
md="4"
lg="4"
class="d-flex"
>
<ThemeCard
path="/my-content"
:is-absolute-path="true"
:title="t('ownLearningContentTitle')"
:description="t('ownLearningContentDescription')"
icon="mdi-pencil"
class="fill-height grey-bg-card"
/>
</v-col>
<v-col
v-for="card in cards"
:key="card.key"

63
frontend/src/components/ButtonWithConfirmation.vue Normal file
View file

@ -0,0 +1,63 @@
<script setup lang="ts">
import { useI18n } from "vue-i18n";
const props = defineProps<{
text: string;
prependIcon?: string;
appendIcon?: string;
confirmQueryText: string;
variant?: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain" | undefined;
color?: string;
disabled?: boolean;
}>();
const emit = defineEmits<{ (e: "confirm"): void }>();
const { t } = useI18n();
function confirm(): void {
emit("confirm");
}
</script>
<template>
<v-dialog max-width="500">
<template v-slot:activator="{ props: activatorProps }">
<v-btn
v-bind="activatorProps"
:text="props.text"
:prependIcon="props.prependIcon"
:appendIcon="props.appendIcon"
:variant="props.variant"
:color="color"
:disabled="props.disabled"
></v-btn>
</template>
<template v-slot:default="{ isActive }">
<v-card :title="t('confirmDialogTitle')">
<v-card-text>
{{ props.confirmQueryText }}
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
:text="t('yes')"
@click="
confirm();
isActive.value = false;
"
></v-btn>
<v-btn
:text="t('cancel')"
@click="isActive.value = false"
></v-btn>
</v-card-actions>
</v-card>
</template>
</v-dialog>
</template>
<style scoped></style>

7
frontend/src/components/LearningPathSearchField.vue
View file

@ -31,4 +31,9 @@
></v-text-field>
</template>
<style scoped></style>
<style scoped>
.search-field {
width: 25%;
min-width: 300px;
}
</style>

4
frontend/src/components/LearningPathsGrid.vue
View file

@ -53,9 +53,9 @@
white-space: normal;
}
.results-grid {
margin: 20px;
margin: 20px auto;
display: flex;
align-items: stretch;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}

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

@ -7,13 +7,16 @@
// 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
const name: string = auth.authState.user!.profile.name!;
const username = auth.authState.user!.profile.preferred_username!;
const email = auth.authState.user!.profile.email;
const initials: string = name
.split(" ")
@ -31,6 +34,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);
}
@ -180,10 +184,15 @@
<v-card>
<v-card-text>
<div class="mx-auto text-center">
<v-avatar color="#0e6942">
<span class="text-h5">{{ initials }}</span>
<v-avatar
color="#0e6942"
size="large"
class="user-button mb-3"
>
<span>{{ initials }}</span>
</v-avatar>
<h3>{{ name }}</h3>
<p class="text-caption mt-1">{{ username }}</p>
<p class="text-caption mt-1">{{ email }}</p>
<v-divider class="my-3"></v-divider>
<v-btn

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

@ -6,6 +6,7 @@
import type { AnswersResponse } from "@/controllers/answers";
import type { AnswerData, AnswerDTO } from "@dwengo-1/common/interfaces/answer";
import authService from "@/services/auth/auth-service";
import { AccountType } from "@dwengo-1/common/util/account-types";
const props = defineProps<{
question: QuestionDTO;
@ -80,7 +81,7 @@
{{ question.content }}
</div>
<div
v-if="authService.authState.activeRole === 'teacher'"
v-if="authService.authState.activeRole === AccountType.Teacher"
class="answer-input-container"
>
<input

2
frontend/src/components/UsingQueryResult.vue
View file

@ -27,7 +27,7 @@
<div v-if="isError">
<v-empty-state
icon="mdi-alert-circle-outline"
:text="errorMessage"
:text="t(errorMessage)"
:title="t('error_title')"
></v-empty-state>
</div>

27
frontend/src/controllers/base-controller.ts
View file

@ -37,6 +37,33 @@ export abstract class BaseController {
return response.data;
}
/**
* Sends a POST-request with a form-data body with the given file.
*
* @param path Relative path in the api to send the request to.
* @param formFieldName The name of the form field in which the file should be.
* @param file The file to upload.
* @param queryParams The query parameters.
* @returns The response the POST request generated.
*/
protected async postFile<T>(
path: string,
formFieldName: string,
file: File,
queryParams?: QueryParams,
): Promise<T> {
const formData = new FormData();
formData.append(formFieldName, file);
const response = await apiClient.post<T>(this.absolutePathFor(path), formData, {
params: queryParams,
headers: {
"Content-Type": "multipart/form-data",
},
});
BaseController.assertSuccessResponse(response);
return response.data;
}
protected async delete<T>(path: string, queryParams?: QueryParams): Promise<T> {
const response = await apiClient.delete<T>(this.absolutePathFor(path), { params: queryParams });
BaseController.assertSuccessResponse(response);

12
frontend/src/controllers/learning-objects.ts
View file

@ -14,4 +14,16 @@ export class LearningObjectController extends BaseController {
async getHTML(hruid: string, language: Language, version: number): Promise<Document> {
return this.get<Document>(`/${hruid}/html`, { language, version }, "document");
}
async getAllAdministratedBy(admin: string): Promise<LearningObject[]> {
return this.get<LearningObject[]>("/", { admin });
}
async upload(learningObjectZip: File): Promise<LearningObject> {
return this.postFile<LearningObject>("/", "learningObject", learningObjectZip);
}
async deleteLearningObject(hruid: string, language: Language, version: number): Promise<LearningObject> {
return this.delete<LearningObject>(`/${hruid}`, { language, version });
}
}

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

@ -1,8 +1,8 @@
import { BaseController } from "@/controllers/base-controller.ts";
import { LearningPath } from "@/data-objects/learning-paths/learning-path.ts";
import type { Language } from "@/data-objects/language.ts";
import { single } from "@/utils/response-assertions.ts";
import type { LearningPathDTO } from "@/data-objects/learning-paths/learning-path-dto.ts";
import { LearningPath } from "@/data-objects/learning-paths/learning-path";
import { NotFoundException } from "@/exception/not-found-exception";
import type { LearningPath as LearningPathDTO } from "@dwengo-1/common/interfaces/learning-content";
export class LearningPathController extends BaseController {
constructor() {
@ -24,10 +24,13 @@ export class LearningPathController extends BaseController {
assignmentNo: forGroup?.assignmentNo,
classId: forGroup?.classId,
});
return LearningPath.fromDTO(single(dtos));
if (dtos.length === 0) {
throw new NotFoundException("learningPathNotFound");
}
return LearningPath.fromDTO(dtos[0]);
}
async getAllByTheme(theme: string): Promise<LearningPath[]> {
const dtos = await this.get<LearningPathDTO[]>("/", { theme });
async getAllByThemeAndLanguage(theme: string, language: Language): Promise<LearningPath[]> {
const dtos = await this.get<LearningPathDTO[]>("/", { theme, language });
return dtos.map((dto) => LearningPath.fromDTO(dto));
}
@ -36,4 +39,20 @@ export class LearningPathController extends BaseController {
const dtos = await this.get<LearningPathDTO[]>("/", query);
return dtos.map((dto) => LearningPath.fromDTO(dto));
}
async getAllByAdminRaw(admin: string): Promise<LearningPathDTO[]> {
return await this.get<LearningPathDTO[]>("/", { admin });
}
async postLearningPath(learningPath: Partial<LearningPathDTO>): Promise<LearningPathDTO> {
return await this.post<LearningPathDTO>("/", learningPath);
}
async putLearningPath(learningPath: Partial<LearningPathDTO>): Promise<LearningPathDTO> {
return await this.put<LearningPathDTO>(`/${learningPath.hruid}/${learningPath.language}`, learningPath);
}
async deleteLearningPath(hruid: string, language: string): Promise<LearningPathDTO> {
return await this.delete<LearningPathDTO>(`/${hruid}/${language}`);
}
}

10
frontend/src/data-objects/learning-paths/learning-path-node.ts
View file

@ -1,5 +1,5 @@
import type { Language } from "@/data-objects/language.ts";
import type { LearningPathNodeDTO } from "@/data-objects/learning-paths/learning-path.ts";
import type { LearningObjectNode as LearningPathNodeDTO } from "@dwengo-1/common/interfaces/learning-content";
export class LearningPathNode {
public readonly learningobjectHruid: string;
@ -14,7 +14,7 @@ export class LearningPathNode {
learningobjectHruid: string;
version: number;
language: Language;
transitions: { next: LearningPathNode; default: boolean }[];
transitions: { next: LearningPathNode; default?: boolean }[];
createdAt: Date;
updatedAt: Date;
done?: boolean;
@ -22,7 +22,7 @@ export class LearningPathNode {
this.learningobjectHruid = options.learningobjectHruid;
this.version = options.version;
this.language = options.language;
this.transitions = options.transitions;
this.transitions = options.transitions.map((it) => ({ next: it.next, default: it.default ?? false }));
this.createdAt = options.createdAt;
this.updatedAt = options.updatedAt;
this.done = options.done || false;
@ -50,8 +50,8 @@ export class LearningPathNode {
return undefined;
})
.filter((it) => it !== undefined),
createdAt: new Date(dto.created_at),
updatedAt: new Date(dto.updatedAt),
createdAt: dto.created_at ? new Date(dto.created_at) : new Date(),
updatedAt: dto.updatedAt ? new Date(dto.updatedAt) : new Date(),
done: dto.done,
});
}

18
frontend/src/data-objects/learning-paths/learning-path.ts
View file

@ -1,6 +1,6 @@
import type { Language } from "@/data-objects/language.ts";
import { LearningPathNode } from "@/data-objects/learning-paths/learning-path-node.ts";
import type { LearningPathDTO } from "@/data-objects/learning-paths/learning-path-dto.ts";
import type { LearningObjectNode, LearningPath as LearningPathDTO } from "@dwengo-1/common/interfaces/learning-content";
export interface LearningPathNodeDTO {
_id: string;
@ -77,20 +77,26 @@ export class LearningPath {
hruid: dto.hruid,
title: dto.title,
description: dto.description,
amountOfNodes: dto.num_nodes,
amountOfNodesLeft: dto.num_nodes_left,
amountOfNodes: dto.num_nodes ?? dto.nodes.length,
amountOfNodesLeft: dto.num_nodes_left ?? dto.nodes.length,
keywords: dto.keywords.split(" "),
targetAges: { min: dto.min_age, max: dto.max_age },
targetAges: {
min: dto.min_age ?? NaN,
max: dto.max_age ?? NaN,
},
startNode: LearningPathNode.fromDTOAndOtherNodes(LearningPath.getStartNode(dto), dto.nodes),
image: dto.image,
});
}
static getStartNode(dto: LearningPathDTO): LearningPathNodeDTO {
static getStartNode(dto: LearningPathDTO): LearningObjectNode {
const startNodeDtos = dto.nodes.filter((it) => it.start_node === true);
if (startNodeDtos.length < 1) {
// The learning path has no starting node -> use the first node.
return dto.nodes[0];
if (dto.nodes.length > 0) {
return dto.nodes[0];
}
throw new Error("emptyLearningPath");
} // The learning path has 1 or more starting nodes -> use the first start node.
return startNodeDtos[0];
}

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

@ -134,5 +134,36 @@
"valid-username": "Bitte geben Sie einen gültigen Benutzernamen ein",
"creationFailed": "Erstellung fehlgeschlagen, bitte versuchen Sie es erneut",
"no-assignments": "Derzeit gibt es keine Zuweisungen.",
"deadline": "deadline"
"deadline": "deadline",
"learningObjects": "Lernobjekte",
"learningPaths": "Lernpfade",
"hruid": "HRUID",
"language": "Sprache",
"version": "Version",
"previewFor": "Vorschau für ",
"upload": "Hochladen",
"learningObjectUploadTitle": "Lernobjekt hochladen",
"uploadFailed": "Hochladen fehlgeschlagen",
"invalidZip": "Dies ist keine gültige ZIP-Datei.",
"emptyZip": "Diese ZIP-Datei ist leer.",
"missingMetadata": "Dieses Lernobjekt enthält keine metadata.json-Datei.",
"missingContent": "Dieses Lernobjekt enthält keine content.*-Datei.",
"open": "öffnen",
"editLearningPath": "Lernpfad bearbeiten",
"newLearningPath": "Neuen Lernpfad erstellen",
"saveChanges": "Änderungen speichern",
"newLearningObject": "Lernobjekt hochladen",
"confirmDialogTitle": "Bitte bestätigen",
"learningPathDeleteQuery": "Möchten Sie diesen Lernpfad wirklich löschen?",
"learningObjectDeleteQuery": "Möchten Sie dieses Lernobjekt wirklich löschen?",
"learningPathCantModifyId": "Der HRUID oder die Sprache eines Lernpfads kann nicht geändert werden.",
"error": "Fehler",
"ownLearningContentTitle": "Eigene Lerninhalte",
"ownLearningContentDescription": "Erstellen und verwalten Sie eigene Lernobjekte und Lernpfade. Nur für fortgeschrittene Nutzer.",
"learningPathNotFound": "Dieser Lernpfad konnte nicht gefunden werden.",
"emptyLearningPath": "Dieser Lernpfad enthält keine Lernobjekte.",
"pathContainsNonExistingLearningObjects": "Mindestens eines der in diesem Pfad referenzierten Lernobjekte existiert nicht.",
"targetAgesMandatory": "Zielalter müssen angegeben werden.",
"hintRemoveIfUnconditionalTransition": "(entfernen, wenn dies ein bedingungsloser Übergang sein soll)",
"hintKeywordsSeparatedBySpaces": "Schlüsselwörter durch Leerzeichen getrennt"
}

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

@ -134,5 +134,36 @@
"valid-username": "please enter a valid username",
"creationFailed": "creation failed, please try again",
"no-assignments": "There are currently no assignments.",
"deadline": "deadline"
"deadline": "deadline",
"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.",
"open": "open",
"editLearningPath": "Edit learning path",
"newLearningPath": "Create a new learning path",
"saveChanges": "Save changes",
"newLearningObject": "Upload learning object",
"confirmDialogTitle": "Please confirm",
"learningPathDeleteQuery": "Are you sure you want to delete this learning path?",
"learningObjectDeleteQuery": "Are you sure you want to delete this learning object?",
"learningPathCantModifyId": "The HRUID or language of a learning path cannot be modified.",
"error": "Error",
"ownLearningContentTitle": "Own learning content",
"ownLearningContentDescription": "Create and administrate your own learning objects and learning paths. For advanced users only.",
"learningPathNotFound": "This learning path could not be found.",
"emptyLearningPath": "This learning path does not contain any learning objects.",
"pathContainsNonExistingLearningObjects": "At least one of the learning objects referenced in this path does not exist.",
"targetAgesMandatory": "Target ages must be specified.",
"hintRemoveIfUnconditionalTransition": "(remove this if this should be an unconditional transition)",
"hintKeywordsSeparatedBySpaces": "Keywords separated by spaces"
}

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

@ -135,5 +135,36 @@
"valid-username": "veuillez entrer un nom d'utilisateur valide",
"creationFailed": "échec de la création, veuillez réessayer",
"no-assignments": "Il n'y a actuellement aucun travail.",
"deadline": "délai"
"deadline": "délai",
"learningObjects": "Objets d’apprentissage",
"learningPaths": "Parcours d’apprentissage",
"hruid": "HRUID",
"language": "Langue",
"version": "Version",
"previewFor": "Aperçu de ",
"upload": "Téléverser",
"learningObjectUploadTitle": "Téléverser un objet d’apprentissage",
"uploadFailed": "Échec du téléversement",
"invalidZip": "Ce n’est pas un fichier ZIP valide.",
"emptyZip": "Ce fichier ZIP est vide.",
"missingMetadata": "Il manque un fichier metadata.json à cet objet d’apprentissage.",
"missingContent": "Il manque un fichier content.* à cet objet d’apprentissage.",
"open": "ouvrir",
"editLearningPath": "Modifier le parcours",
"newLearningPath": "Créer un nouveau parcours",
"saveChanges": "Enregistrer les modifications",
"newLearningObject": "Téléverser un objet d’apprentissage",
"confirmDialogTitle": "Veuillez confirmer",
"learningPathDeleteQuery": "Voulez-vous vraiment supprimer ce parcours d’apprentissage ?",
"learningObjectDeleteQuery": "Voulez-vous vraiment supprimer cet objet d’apprentissage ?",
"learningPathCantModifyId": "Le HRUID ou la langue d’un parcours ne peuvent pas être modifiés.",
"error": "Erreur",
"ownLearningContentTitle": "Contenu d’apprentissage personnel",
"ownLearningContentDescription": "Créez et gérez vos propres objets et parcours d’apprentissage. Réservé aux utilisateurs avancés.",
"learningPathNotFound": "Ce parcours d'apprentissage est introuvable.",
"emptyLearningPath": "Ce parcours d'apprentissage ne contient aucun objet d'apprentissage.",
"pathContainsNonExistingLearningObjects": "Au moins un des objets d’apprentissage référencés dans ce chemin n’existe pas.",
"targetAgesMandatory": "Les âges cibles doivent être spécifiés.",
"hintRemoveIfUnconditionalTransition": "(supprimer ceci s’il s’agit d’une transition inconditionnelle)",
"hintKeywordsSeparatedBySpaces": "Mots-clés séparés par des espaces"
}

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

@ -134,5 +134,36 @@
"valid-username": "voer een geldige gebruikersnaam in",
"creationFailed": "aanmaak mislukt, probeer het opnieuw",
"no-assignments": "Er zijn momenteel geen opdrachten.",
"deadline": "deadline"
"deadline": "deadline",
"learningObjects": "Leerobjecten",
"learningPaths": "Leerpaden",
"hruid": "HRUID",
"language": "Taal",
"version": "Versie",
"previewFor": "Voorbeeld van ",
"upload": "Uploaden",
"learningObjectUploadTitle": "Leerobject uploaden",
"uploadFailed": "Upload mislukt",
"invalidZip": "Dit is geen geldig zipbestand.",
"emptyZip": "Dit zipbestand is leeg.",
"missingMetadata": "Dit leerobject mist een metadata.json-bestand.",
"missingContent": "Dit leerobject mist een content.*-bestand.",
"open": "openen",
"editLearningPath": "Leerpad bewerken",
"newLearningPath": "Nieuw leerpad aanmaken",
"saveChanges": "Wijzigingen opslaan",
"newLearningObject": "Leerobject uploaden",
"confirmDialogTitle": "Bevestig alstublieft",
"learningPathDeleteQuery": "Weet u zeker dat u dit leerpad wilt verwijderen?",
"learningObjectDeleteQuery": "Weet u zeker dat u dit leerobject wilt verwijderen?",
"learningPathCantModifyId": "De HRUID of taal van een leerpad kan niet worden gewijzigd.",
"error": "Fout",
"ownLearningContentTitle": "Eigen leerinhoud",
"ownLearningContentDescription": "Maak en beheer je eigen leerobjecten en leerpads. Alleen voor gevorderde gebruikers.",
"learningPathNotFound": "Dit leerpad kon niet gevonden worden.",
"emptyLearningPath": "Dit leerpad bevat geen leerobjecten.",
"pathContainsNonExistingLearningObjects": "Ten minste één van de leerobjecten in dit pad bestaat niet.",
"targetAgesMandatory": "Doelleeftijden moeten worden opgegeven.",
"hintRemoveIfUnconditionalTransition": "(verwijder dit voor onvoorwaardelijke overgangen)",
"hintKeywordsSeparatedBySpaces": "Trefwoorden gescheiden door spaties"
}

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({

3
frontend/src/queries/classes.ts
View file

@ -15,6 +15,7 @@ import { invalidateAllGroupKeys } from "./groups";
import { invalidateAllSubmissionKeys } from "./submissions";
import type { TeachersResponse } from "@/controllers/teachers";
import type { TeacherInvitationsResponse } from "@/controllers/teacher-invitations";
import { studentClassesQueryKey } from "@/queries/students.ts";
const classController = new ClassController();
@ -171,6 +172,8 @@ export function useClassDeleteStudentMutation(): UseMutationReturnType<
await queryClient.invalidateQueries({ queryKey: classQueryKey(data.class.id) });
await queryClient.invalidateQueries({ queryKey: classStudentsKey(data.class.id, true) });
await queryClient.invalidateQueries({ queryKey: classStudentsKey(data.class.id, false) });
await queryClient.invalidateQueries({ queryKey: studentClassesQueryKey(data.class.id, false) });
await queryClient.invalidateQueries({ queryKey: studentClassesQueryKey(data.class.id, true) });
},
});
}

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

@ -1,9 +1,16 @@
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 { 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";
export const LEARNING_OBJECT_KEY = "learningObject";
const learningObjectController = getLearningObjectController();
@ -24,15 +31,15 @@ export function useLearningObjectMetadataQuery(
}
export function useLearningObjectHTMLQuery(
hruid: MaybeRefOrGetter<string>,
language: MaybeRefOrGetter<Language>,
version: MaybeRefOrGetter<number>,
hruid: MaybeRefOrGetter<string | undefined>,
language: MaybeRefOrGetter<Language | undefined>,
version: MaybeRefOrGetter<number | undefined>,
): UseQueryReturnType<Document, Error> {
return useQuery({
queryKey: [LEARNING_OBJECT_KEY, "html", hruid, language, version],
queryFn: async () => {
const [hruidVal, languageVal, versionVal] = [toValue(hruid), toValue(language), toValue(version)];
return learningObjectController.getHTML(hruidVal, languageVal, versionVal);
return learningObjectController.getHTML(hruidVal!, languageVal!, versionVal!);
},
enabled: () => Boolean(toValue(hruid)) && Boolean(toValue(language)) && Boolean(toValue(version)),
});
@ -55,3 +62,49 @@ export function useLearningObjectListForPathQuery(
enabled: () => Boolean(toValue(learningPath)),
});
}
export function useLearningObjectListForAdminQuery(
admin: MaybeRefOrGetter<string | undefined>,
): UseQueryReturnType<LearningObject[], Error> {
return useQuery({
queryKey: [LEARNING_OBJECT_KEY, "forAdmin", admin],
queryFn: async () => {
const adminVal = toValue(admin);
return await learningObjectController.getAllAdministratedBy(adminVal!);
},
enabled: () => toValue(admin) !== undefined,
});
}
export function useUploadLearningObjectMutation(): UseMutationReturnType<
LearningObject,
AxiosError,
{ learningObjectZip: File },
unknown
> {
const queryClient = useQueryClient();
return useMutation({
mutationFn: async ({ learningObjectZip }) => await learningObjectController.upload(learningObjectZip),
onSuccess: async () => {
await queryClient.invalidateQueries({ queryKey: [LEARNING_OBJECT_KEY, "forAdmin"] });
},
});
}
export function useDeleteLearningObjectMutation(): UseMutationReturnType<
LearningObject,
AxiosError,
{ hruid: string; language: Language; version: number },
unknown
> {
const queryClient = useQueryClient();
return useMutation({
mutationFn: async ({ hruid, language, version }) =>
await learningObjectController.deleteLearningObject(hruid, language, version),
onSuccess: async () => {
await queryClient.invalidateQueries({ queryKey: [LEARNING_OBJECT_KEY, "forAdmin"] });
},
});
}

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

@ -1,8 +1,16 @@
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 { LearningPath as LearningPathDTO } from "@dwengo-1/common/interfaces/learning-content";
import type { LearningPath } from "@/data-objects/learning-paths/learning-path";
export const LEARNING_PATH_KEY = "learningPath";
const learningPathController = getLearningPathController();
@ -22,16 +30,69 @@ export function useGetLearningPathQuery(
});
}
export function useGetAllLearningPathsByThemeQuery(
export function useGetAllLearningPathsByThemeAndLanguageQuery(
theme: MaybeRefOrGetter<string>,
language: MaybeRefOrGetter<Language>,
): UseQueryReturnType<LearningPath[], Error> {
return useQuery({
queryKey: [LEARNING_PATH_KEY, "getAllByTheme", theme],
queryFn: async () => learningPathController.getAllByTheme(toValue(theme)),
queryKey: [LEARNING_PATH_KEY, "getAllByTheme", theme, language],
queryFn: async () => learningPathController.getAllByThemeAndLanguage(toValue(theme), toValue(language)),
enabled: () => Boolean(toValue(theme)),
});
}
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: Partial<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: Partial<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>,

2
frontend/src/queries/students.ts
View file

@ -33,7 +33,7 @@ function studentsQueryKey(full: boolean): [string, boolean] {
function studentQueryKey(username: string): [string, string] {
return ["student", username];
}
function studentClassesQueryKey(username: string, full: boolean): [string, string, boolean] {
export function studentClassesQueryKey(username: string, full: boolean): [string, string, boolean] {
return ["student-classes", username, full];
}
function studentAssignmentsQueryKey(username: string, full: boolean): [string, string, boolean] {

14
frontend/src/router/index.ts
View file

@ -14,6 +14,8 @@ import UserHomePage from "@/views/homepage/UserHomePage.vue";
import SingleTheme from "@/views/SingleTheme.vue";
import LearningObjectView from "@/views/learning-paths/learning-object/LearningObjectView.vue";
import authService from "@/services/auth/auth-service";
import OwnLearningContentPage from "@/views/own-learning-content/OwnLearningContentPage.vue";
import { allowRedirect, Redirect } from "@/utils/redirect.ts";
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
@ -105,6 +107,12 @@ const router = createRouter({
component: SingleDiscussion,
meta: { requiresAuth: true },
},
{
path: "/my-content",
name: "OwnLearningContentPage",
component: OwnLearningContentPage,
meta: { requiresAuth: true },
},
{
path: "/learningPath",
children: [
@ -143,7 +151,11 @@ router.beforeEach(async (to, _from, next) => {
// Verify if user is logged in before accessing certain routes
if (to.meta.requiresAuth) {
if (!authService.isLoggedIn.value && !(await authService.loadUser())) {
next("/login");
const path = to.fullPath;
if (allowRedirect(path)) {
localStorage.setItem(Redirect.AFTER_LOGIN_KEY, path);
}
next(Redirect.LOGIN);
} else {
next();
}

12
frontend/src/utils/redirect.ts Normal file
View file

@ -0,0 +1,12 @@
export enum Redirect {
AFTER_LOGIN_KEY = "redirectAfterLogin",
HOME = "/user",
LOGIN = "/login",
ROOT = "/",
}
const NOT_ALLOWED_REDIRECTS = new Set<Redirect>([Redirect.HOME, Redirect.ROOT, Redirect.LOGIN]);
export function allowRedirect(path: string): boolean {
return !NOT_ALLOWED_REDIRECTS.has(path as Redirect);
}

13
frontend/src/views/CallbackPage.vue
View file

@ -3,6 +3,7 @@
import { useI18n } from "vue-i18n";
import { onMounted, ref, type Ref } from "vue";
import auth from "../services/auth/auth-service.ts";
import { Redirect } from "@/utils/redirect.ts";
const { t } = useI18n();
@ -10,10 +11,20 @@
const errorMessage: Ref<string | null> = ref(null);
async function redirectPage(): Promise<void> {
const redirectUrl = localStorage.getItem(Redirect.AFTER_LOGIN_KEY);
if (redirectUrl) {
localStorage.removeItem(Redirect.AFTER_LOGIN_KEY);
await router.replace(redirectUrl);
} else {
await router.replace(Redirect.HOME);
}
}
onMounted(async () => {
try {
await auth.handleLoginCallback();
await router.replace("/user"); // Redirect to theme page
await redirectPage();
} catch (error) {
errorMessage.value = `${t("loginUnexpectedError")}: ${error}`;
}

5
frontend/src/views/LoginPage.vue
View file

@ -3,6 +3,7 @@
import dwengoLogo from "../../../assets/img/dwengo-groen-zwart.svg";
import auth from "@/services/auth/auth-service.ts";
import { watch } from "vue";
import { AccountType } from "@dwengo-1/common/util/account-types";
const router = useRouter();
@ -17,11 +18,11 @@
);
async function loginAsStudent(): Promise<void> {
await auth.loginAs("student");
await auth.loginAs(AccountType.Student);
}
async function loginAsTeacher(): Promise<void> {
await auth.loginAs("teacher");
await auth.loginAs(AccountType.Teacher);
}
</script>

23
frontend/src/views/SingleTheme.vue
View file

@ -2,10 +2,11 @@
import type { LearningPath } from "@/data-objects/learning-paths/learning-path.ts";
import LearningPathsGrid from "@/components/LearningPathsGrid.vue";
import UsingQueryResult from "@/components/UsingQueryResult.vue";
import { useGetAllLearningPathsByThemeQuery } from "@/queries/learning-paths.ts";
import { useGetAllLearningPathsByThemeAndLanguageQuery } from "@/queries/learning-paths.ts";
import { computed, ref } from "vue";
import { useI18n } from "vue-i18n";
import { useThemeQuery } from "@/queries/themes.ts";
import type { Language } from "@/data-objects/language";
const props = defineProps<{ theme: string }>();
@ -16,7 +17,10 @@
const currentThemeInfo = computed(() => themeQueryResult.data.value?.find((it) => it.key === props.theme));
const learningPathsForThemeQueryResult = useGetAllLearningPathsByThemeQuery(() => props.theme);
const learningPathsForThemeQueryResult = useGetAllLearningPathsByThemeAndLanguageQuery(
() => props.theme,
() => locale.value as Language,
);
const { t } = useI18n();
const searchFilter = ref("");
@ -31,13 +35,14 @@
</script>
<template>
<div class="container">
<div class="container d-flex flex-column align-items-center justify-center">
<using-query-result :query-result="themeQueryResult">
<h1>{{ currentThemeInfo!!.title }}</h1>
<p>{{ currentThemeInfo!!.description }}</p>
<div class="search-field-container">
<br />
<div class="search-field-container mt-sm-6">
<v-text-field
class="search-field"
class="search-field mx-auto"
:label="t('search')"
append-inner-icon="mdi-magnify"
v-model="searchFilter"
@ -56,13 +61,15 @@
<style scoped>
.search-field-container {
display: block;
margin: 20px;
justify-content: center !important;
}
.search-field {
max-width: 300px;
width: 25%;
min-width: 300px;
}
.container {
padding: 20px;
justify-content: center;
justify-items: center;
}
</style>

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

@ -14,6 +14,7 @@
import type { AssignmentDTO } from "@dwengo-1/common/interfaces/assignment";
import { useCreateAssignmentMutation } from "@/queries/assignments.ts";
import { useRoute } from "vue-router";
import { AccountType } from "@dwengo-1/common/util/account-types";
const route = useRoute();
const router = useRouter();
@ -23,7 +24,7 @@
onMounted(async () => {
// Redirect student
if (role.value === "student") {
if (role.value === AccountType.Student) {
await router.push("/user");
}

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

@ -4,9 +4,10 @@
import StudentAssignment from "@/views/assignments/StudentAssignment.vue";
import TeacherAssignment from "@/views/assignments/TeacherAssignment.vue";
import { useRoute } from "vue-router";
import { AccountType } from "@dwengo-1/common/util/account-types";
const role = auth.authState.activeRole;
const isTeacher = computed(() => role === "teacher");
const isTeacher = computed(() => role === AccountType.Teacher);
const route = useRoute();
const classId = ref<string>(route.params.classId as string);

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

@ -9,6 +9,7 @@
import type { ClassDTO } from "@dwengo-1/common/interfaces/class";
import { asyncComputed } from "@vueuse/core";
import { useDeleteAssignmentMutation } from "@/queries/assignments.ts";
import { AccountType } from "@dwengo-1/common/util/account-types";
import "../../assets/common.css";
const { t, locale } = useI18n();
@ -17,7 +18,7 @@
const role = ref(auth.authState.activeRole);
const username = ref<string>("");
const isTeacher = computed(() => role.value === "teacher");
const isTeacher = computed(() => role.value === AccountType.Teacher);
// Fetch and store all the teacher's classes
let classesQueryResults = undefined;

20
frontend/src/views/classes/ClassDisplay.vue Normal file
View file

@ -0,0 +1,20 @@
<script setup lang="ts">
import { useClassQuery } from "@/queries/classes";
import { defineProps } from "vue";
import UsingQueryResult from "@/components/UsingQueryResult.vue";
const props = defineProps({
classId: String,
});
const classQuery = useClassQuery(props.classId);
</script>
<template>
<using-query-result
:query-result="classQuery"
v-slot="{ data: classResponse }"
>
<span>{{ classResponse?.class.displayName }}</span>
</using-query-result>
</template>

6
frontend/src/views/classes/SingleClass.vue
View file

@ -77,7 +77,7 @@
},
onError: (e) => {
dialog.value = false;
showSnackbar(t("failed") + ": " + e.message, "error");
showSnackbar(t("failed") + ": " + e.response.data.error || e.message, "error");
},
},
);
@ -105,7 +105,7 @@
}
},
onError: (e) => {
showSnackbar(t("failed") + ": " + e.message, "error");
showSnackbar(t("failed") + ": " + e.response.data.error || e.message, "error");
},
},
);
@ -126,7 +126,7 @@
usernameTeacher.value = "";
},
onError: (e) => {
showSnackbar(t("failed") + ": " + e.message, "error");
showSnackbar(t("failed") + ": " + e.response.data.error || e.message, "error");
},
});
}

20
frontend/src/views/classes/StudentClasses.vue
View file

@ -2,7 +2,7 @@
import { useI18n } from "vue-i18n";
import authState from "@/services/auth/auth-service.ts";
import { computed, onMounted, ref } from "vue";
import { validate, version } from "uuid";
import { useRoute } from "vue-router";
import type { ClassDTO } from "@dwengo-1/common/interfaces/class";
import { useCreateJoinRequestMutation, useStudentClassesQuery } from "@/queries/students";
import type { StudentDTO } from "@dwengo-1/common/interfaces/student";
@ -15,6 +15,7 @@
import "../../assets/common.css";
const { t } = useI18n();
const route = useRoute();
// Username of logged in student
const username = ref<string | undefined>(undefined);
@ -38,6 +39,11 @@
} finally {
isLoading.value = false;
}
const queryCode = route.query.code as string | undefined;
if (queryCode) {
code.value = queryCode;
}
});
// Fetch all classes of the logged in student
@ -75,11 +81,15 @@
// The code a student sends in to join a class needs to be formatted as v4 to be valid
// These rules are used to display a message to the user if they use a code that has an invalid format
function codeRegex(value: string): boolean {
return /^[a-zA-Z0-9]{6}$/.test(value);
}
const codeRules = [
(value: string | undefined): string | boolean => {
if (value === undefined || value === "") {
return true;
} else if (value !== undefined && validate(value) && version(value) === 4) {
} else if (codeRegex(value)) {
return true;
}
return t("invalidFormat");
@ -92,7 +102,7 @@
// Function called when a student submits a code to join a class
function submitCode(): void {
// Check if the code is valid
if (code.value !== undefined && validate(code.value) && version(code.value) === 4) {
if (code.value !== undefined && codeRegex(code.value)) {
mutate(
{ username: username.value!, classId: code.value },
{
@ -100,7 +110,7 @@
showSnackbar(t("sent"), "success");
},
onError: (e) => {
showSnackbar(t("failed") + ": " + e.message, "error");
showSnackbar(t("failed") + ": " + e.response.data.error || e.message, "error");
},
},
);
@ -260,7 +270,7 @@
<v-text-field
label="CODE"
v-model="code"
placeholder="XXXXXXXX-XXXX-4XXX-XXXX-XXXXXXXXXXXX"
placeholder="XXXXXX"
:rules="codeRules"
variant="outlined"
></v-text-field>

246
frontend/src/views/classes/TeacherClasses.vue
View file

@ -8,7 +8,7 @@
import { useTeacherClassesQuery } from "@/queries/teachers";
import type { ClassesResponse } from "@/controllers/classes";
import UsingQueryResult from "@/components/UsingQueryResult.vue";
import { useClassesQuery, useCreateClassMutation } from "@/queries/classes";
import { useCreateClassMutation } from "@/queries/classes";
import type { TeacherInvitationsResponse } from "@/controllers/teacher-invitations";
import {
useRespondTeacherInvitationMutation,
@ -16,6 +16,7 @@
} from "@/queries/teacher-invitations";
import { useDisplay } from "vuetify";
import "../../assets/common.css";
import ClassDisplay from "@/views/classes/ClassDisplay.vue";
const { t } = useI18n();
@ -41,7 +42,6 @@
// Fetch all classes of the logged in teacher
const classesQuery = useTeacherClassesQuery(username, true);
const allClassesQuery = useClassesQuery();
const { mutate } = useCreateClassMutation();
const getInvitationsQuery = useTeacherInvitationsReceivedQuery(username);
const { mutate: respondToInvitation } = useRespondTeacherInvitationMutation();
@ -70,7 +70,7 @@
await getInvitationsQuery.refetch();
},
onError: (e) => {
showSnackbar(t("failed") + ": " + e.message, "error");
showSnackbar(t("failed") + ": " + e.response.data.error || e.message, "error");
},
});
}
@ -132,17 +132,12 @@
// Show the teacher, copying of the code was a successs
const copied = ref(false);
// Copy the generated code to the clipboard
async function copyToClipboard(): Promise<void> {
await navigator.clipboard.writeText(code.value);
copied.value = true;
}
async function copyToClipboard(code: string, isDialog = false, isLink = false): Promise<void> {
const content = isLink ? `${window.location.origin}/user/class?code=${code}` : code;
await navigator.clipboard.writeText(content);
copied.value = isDialog;
async function copyCode(selectedCode: string): Promise<void> {
code.value = selectedCode;
await copyToClipboard();
showSnackbar(t("copied"), "white");
copied.value = false;
if (!isDialog) showSnackbar(t("copied"), "white");
}
// Custom breakpoints
@ -170,6 +165,7 @@
// Code display dialog logic
const viewCodeDialog = ref(false);
const selectedCode = ref("");
function openCodeDialog(codeToView: string): void {
selectedCode.value = codeToView;
viewCodeDialog.value = true;
@ -231,24 +227,38 @@
variant="text"
>
{{ c.displayName }}
<v-icon end> mdi-menu-right </v-icon>
<v-icon end> mdi-menu-right</v-icon>
</v-btn>
</td>
<td>
<v-btn
<v-row
v-if="!isMdAndDown"
variant="text"
append-icon="mdi-content-copy"
@click="copyCode(c.id)"
dense
align="center"
no-gutters
>
{{ c.id }}
</v-btn>
<v-btn
variant="text"
append-icon="mdi-content-copy"
@click="copyToClipboard(c.id)"
>
{{ c.id }}
</v-btn>
<v-btn
icon
variant="text"
@click="copyToClipboard(c.id, false, true)"
>
<v-icon>mdi-link-variant</v-icon>
</v-btn>
</v-row>
<span
v-else
style="cursor: pointer"
@click="openCodeDialog(c.id)"
><v-icon icon="mdi-eye"></v-icon
></span>
>
<v-icon icon="mdi-eye"></v-icon>
</span>
</td>
<td>{{ c.students.length }}</td>
@ -300,8 +310,8 @@
type="submit"
@click="createClass"
block
>{{ t("create") }}</v-btn
>
>{{ t("create") }}
</v-btn>
</v-form>
</v-sheet>
<v-container>
@ -310,14 +320,29 @@
max-width="400px"
>
<v-card>
<v-card-title class="headline">code</v-card-title>
<v-card-title class="headline">{{ t("code") }}</v-card-title>
<v-card-text>
<v-text-field
v-model="code"
readonly
append-inner-icon="mdi-content-copy"
@click:append-inner="copyToClipboard"
></v-text-field>
>
<template #append>
<v-btn
icon
variant="text"
@click="copyToClipboard(code, true)"
>
<v-icon>mdi-content-copy</v-icon>
</v-btn>
<v-btn
icon
variant="text"
@click="copyToClipboard(code, true, true)"
>
<v-icon>mdi-link-variant</v-icon>
</v-btn>
</template>
</v-text-field>
<v-slide-y-transition>
<div
v-if="copied"
@ -368,85 +393,75 @@
:query-result="getInvitationsQuery"
v-slot="invitationsResponse: { data: TeacherInvitationsResponse }"
>
<using-query-result
:query-result="allClassesQuery"
v-slot="classesResponse: { data: ClassesResponse }"
>
<template v-if="invitationsResponse.data.invitations.length">
<tr
v-for="i in invitationsResponse.data.invitations as TeacherInvitationDTO[]"
:key="i.classId"
<template v-if="invitationsResponse.data.invitations.length">
<tr
v-for="i in invitationsResponse.data.invitations as TeacherInvitationDTO[]"
:key="i.classId"
>
<td>
<ClassDisplay :classId="i.classId" />
</td>
<td>
{{
(i.sender as TeacherDTO).firstName + " " + (i.sender as TeacherDTO).lastName
}}
</td>
<td class="text-right">
<span v-if="!isSmAndDown">
<div>
<v-btn
color="green"
@click="handleInvitation(i, true)"
class="mr-2"
>
{{ t("accept") }}
</v-btn>
<v-btn
color="red"
@click="handleInvitation(i, false)"
>
{{ t("deny") }}
</v-btn>
</div>
</span>
<span v-else>
<div>
<v-btn
@click="handleInvitation(i, true)"
class="mr-2"
icon="mdi-check-circle"
color="green"
variant="text"
>
</v-btn>
<v-btn
@click="handleInvitation(i, false)"
class="mr-2"
icon="mdi-close-circle"
color="red"
variant="text"
>
</v-btn>
</div>
</span>
</td>
</tr>
</template>
<template v-else>
<tr>
<td
colspan="3"
class="empty-message"
>
<td>
{{
(classesResponse.data.classes as ClassDTO[]).filter(
(c) => c.id == i.classId,
)[0].displayName
}}
</td>
<td>
{{
(i.sender as TeacherDTO).firstName +
" " +
(i.sender as TeacherDTO).lastName
}}
</td>
<td class="text-right">
<span v-if="!isSmAndDown">
<div>
<v-btn
color="green"
@click="handleInvitation(i, true)"
class="mr-2"
>
{{ t("accept") }}
</v-btn>
<v-btn
color="red"
@click="handleInvitation(i, false)"
>
{{ t("deny") }}
</v-btn>
</div>
</span>
<span v-else>
<div>
<v-btn
@click="handleInvitation(i, true)"
class="mr-2"
icon="mdi-check-circle"
color="green"
variant="text"
>
</v-btn>
<v-btn
@click="handleInvitation(i, false)"
class="mr-2"
icon="mdi-close-circle"
color="red"
variant="text"
>
</v-btn></div
></span>
</td>
</tr>
</template>
<template v-else>
<tr>
<td
colspan="3"
class="empty-message"
<v-icon
icon="mdi-information-outline"
size="small"
>
<v-icon
icon="mdi-information-outline"
size="small"
>
</v-icon>
{{ t("no-invitations-found") }}
</td>
</tr>
</template>
</using-query-result>
</v-icon>
{{ t("no-invitations-found") }}
</td>
</tr>
</template>
</using-query-result>
</tbody>
</v-table>
@ -469,9 +484,24 @@
<v-text-field
v-model="selectedCode"
readonly
append-inner-icon="mdi-content-copy"
@click:append-inner="copyToClipboard"
></v-text-field>
>
<template #append>
<v-btn
icon
variant="text"
@click="copyToClipboard(selectedCode, true)"
>
<v-icon>mdi-content-copy</v-icon>
</v-btn>
<v-btn
icon
variant="text"
@click="copyToClipboard(selectedCode, true, true)"
>
<v-icon>mdi-link-variant</v-icon>
</v-btn>
</template>
</v-text-field>
<v-slide-y-transition>
<div
v-if="copied"

3
frontend/src/views/classes/UserClasses.vue
View file

@ -2,6 +2,7 @@
import authState from "@/services/auth/auth-service.ts";
import TeacherClasses from "./TeacherClasses.vue";
import StudentClasses from "./StudentClasses.vue";
import { AccountType } from "@dwengo-1/common/util/account-types";
// Determine if role is student or teacher to render correct view
const role: string = authState.authState.activeRole!;
@ -9,7 +10,7 @@
<template>
<main>
<TeacherClasses v-if="role === 'teacher'"></TeacherClasses>
<TeacherClasses v-if="role === AccountType.Teacher"></TeacherClasses>
<StudentClasses v-else></StudentClasses>
</main>
</template>

21
frontend/src/views/learning-paths/LearningPathPage.vue
View file

@ -22,6 +22,7 @@
import type { AssignmentDTO } from "@dwengo-1/common/interfaces/assignment";
import type { GroupDTO } from "@dwengo-1/common/interfaces/group";
import QuestionNotification from "@/components/QuestionNotification.vue";
import { AccountType } from "@dwengo-1/common/util/account-types";
const router = useRouter();
const route = useRoute();
@ -235,8 +236,10 @@
</p>
</template>
</v-list-item>
<v-list-item
v-if="query.classId && query.assignmentNo && authService.authState.activeRole === 'teacher'"
<v-list-itemF
v-if="
query.classId && query.assignmentNo && authService.authState.activeRole === AccountType.Teacher
"
>
<template v-slot:default>
<learning-path-group-selector
@ -245,9 +248,9 @@
v-model="forGroupQueryParam"
/>
</template>
</v-list-item>
</v-list-itemF>
<v-divider></v-divider>
<div v-if="props.learningObjectHruid">
<div>
<using-query-result
:query-result="learningObjectListQueryResult"
v-slot="learningObjects: { data: LearningObject[] }"
@ -259,7 +262,9 @@
:title="node.title"
:active="node.key === props.learningObjectHruid"
:key="node.key"
v-if="!node.teacherExclusive || authService.authState.activeRole === 'teacher'"
v-if="
!node.teacherExclusive || authService.authState.activeRole === AccountType.Teacher
"
>
<template v-slot:prepend>
<v-icon
@ -283,7 +288,7 @@
</using-query-result>
</div>
<v-spacer></v-spacer>
<v-list-item v-if="authService.authState.activeRole === 'teacher'">
<v-list-item v-if="authService.authState.activeRole === AccountType.Teacher">
<template v-slot:default>
<v-btn
class="button-in-nav"
@ -296,7 +301,7 @@
</v-list-item>
<v-list-item>
<div
v-if="authService.authState.activeRole === 'student' && pathIsAssignment"
v-if="authService.authState.activeRole === AccountType.Student && pathIsAssignment"
class="assignment-indicator"
>
{{ t("assignmentIndicator") }}
@ -325,7 +330,7 @@
></learning-object-view>
</div>
<div
v-if="authService.authState.activeRole === 'student' && pathIsAssignment"
v-if="authService.authState.activeRole === AccountType.Student && pathIsAssignment"
class="question-box"
>
<div class="input-wrapper">

61
frontend/src/views/learning-paths/LearningPathSearchPage.vue
View file

@ -17,43 +17,29 @@
</script>
<template>
<v-container class="search-page-container">
<v-row
justify="center"
class="mb-6"
<div class="search-page-container d-flex flex-column align-items-center justify-center">
<div class="search-field-container">
<learning-path-search-field class="mx-auto" />
</div>
<using-query-result
:query-result="searchQueryResults"
v-slot="{ data }: { data: LearningPath[] }"
>
<v-col
cols="12"
sm="8"
md="6"
lg="4"
>
<learning-path-search-field class="search-field" />
</v-col>
</v-row>
<learning-paths-grid :learning-paths="data" />
</using-query-result>
<v-row justify="center">
<v-col cols="12">
<using-query-result
:query-result="searchQueryResults"
v-slot="{ data }: { data: LearningPath[] }"
>
<learning-paths-grid :learning-paths="data" />
</using-query-result>
<div
v-if="!query"
class="empty-state-container"
>
<v-empty-state
icon="mdi-magnify"
:title="t('enterSearchTerm')"
:text="t('enterSearchTermDescription')"
/>
</div>
</v-col>
</v-row>
</v-container>
<div
v-if="!query"
class="empty-state-container"
>
<v-empty-state
icon="mdi-magnify"
:title="t('enterSearchTerm')"
:text="t('enterSearchTermDescription')"
/>
</div>
</div>
</template>
<style scoped>
@ -61,8 +47,7 @@
padding-top: 40px;
padding-bottom: 40px;
}
.search-field {
max-width: 100%;
.search-field-container {
justify-content: center !important;
}
</style>

3
frontend/src/views/learning-paths/learning-object/LearningObjectView.vue
View file

@ -8,8 +8,9 @@
import type { SubmissionData } from "@/views/learning-paths/learning-object/submission-data";
import LearningObjectContentView from "@/views/learning-paths/learning-object/content/LearningObjectContentView.vue";
import LearningObjectSubmissionsView from "@/views/learning-paths/learning-object/submissions/LearningObjectSubmissionsView.vue";
import { AccountType } from "@dwengo-1/common/util/account-types";
const _isStudent = computed(() => authService.authState.activeRole === "student");
const _isStudent = computed(() => authService.authState.activeRole === AccountType.Student);
const props = defineProps<{
hruid: string;

3
frontend/src/views/learning-paths/learning-object/submissions/SubmitButton.vue
View file

@ -11,6 +11,7 @@
import type { StudentDTO } from "@dwengo-1/common/interfaces/student";
import type { GroupDTO } from "@dwengo-1/common/interfaces/group";
import { useI18n } from "vue-i18n";
import { AccountType } from "@dwengo-1/common/util/account-types";
const { t } = useI18n();
@ -31,7 +32,7 @@
mutate: submitSolution,
} = useCreateSubmissionMutation();
const isStudent = computed(() => authService.authState.activeRole === "student");
const isStudent = computed(() => authService.authState.activeRole === AccountType.Student);
const isSubmitDisabled = computed(() => {
if (!props.submissionData || props.submissions === undefined) {

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

@ -0,0 +1,81 @@
<script setup lang="ts">
import { useLearningObjectListForAdminQuery } from "@/queries/learning-objects.ts";
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 { LearningPath as LearningPathDTO } from "@dwengo-1/common/interfaces/learning-content";
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>
<template>
<div class="tab-pane-container">
<h1 class="title">{{ t("ownLearningContentTitle") }}</h1>
<v-tabs v-model="tab">
<v-tab value="learningObjects">{{ t("learningObjects") }}</v-tab>
<v-tab value="learningPaths">{{ t("learningPaths") }}</v-tab>
</v-tabs>
<v-tabs-window
v-model="tab"
class="main-content"
>
<v-tabs-window-item
value="learningObjects"
class="main-content"
>
<using-query-result
:query-result="learningObjectsQuery"
v-slot="response: { data: LearningObject[] }"
>
<own-learning-objects-view :learningObjects="response.data"></own-learning-objects-view>
</using-query-result>
</v-tabs-window-item>
<v-tabs-window-item value="learningPaths">
<using-query-result
:query-result="learningPathsQuery"
v-slot="response: { data: LearningPathDTO[] }"
>
<own-learning-paths-view :learningPaths="response.data" />
</using-query-result>
</v-tabs-window-item>
</v-tabs-window>
</div>
</template>
<style scoped>
h1 {
color: #0e6942;
text-transform: uppercase;
font-weight: bolder;
font-size: 50px;
}
.tab-pane-container {
display: flex;
flex-direction: column;
height: 100%;
padding: 20px 30px;
}
.main-content {
flex: 1 1;
height: 100%;
}
</style>

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

@ -0,0 +1,59 @@
<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 ButtonWithConfirmation from "@/components/ButtonWithConfirmation.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>
<button-with-confirmation
@confirm="deleteLearningObject"
prepend-icon="mdi mdi-delete"
color="red"
:text="t('delete')"
:confirmQueryText="t('learningObjectDeleteQuery')"
/>
</template>
</v-card>
</template>
<style scoped></style>

82
frontend/src/views/own-learning-content/learning-objects/LearningObjectUploadButton.vue Normal file
View file

@ -0,0 +1,82 @@
<script setup lang="ts">
import { useUploadLearningObjectMutation } from "@/queries/learning-objects";
import { ref, watch, type Ref } from "vue";
import { useI18n } from "vue-i18n";
import { VFileUpload } from "vuetify/labs/VFileUpload";
const { t } = useI18n();
const dialogOpen = ref(false);
interface ContainsErrorString {
error: string;
}
const fileToUpload: Ref<File | undefined> = ref(undefined);
const { isPending, error, isError, isSuccess, mutate } = useUploadLearningObjectMutation();
watch(isSuccess, (newIsSuccess) => {
if (newIsSuccess) {
dialogOpen.value = false;
fileToUpload.value = undefined;
}
});
function uploadFile() {
if (fileToUpload.value) {
mutate({ learningObjectZip: fileToUpload.value });
}
}
</script>
<template>
<v-dialog
max-width="500"
v-model="dialogOpen"
>
<template v-slot:activator="{ props: activatorProps }">
<v-btn
prepend-icon="mdi mdi-plus"
:text="t('newLearningObject')"
v-bind="activatorProps"
color="rgb(14, 105, 66)"
size="large"
>
</v-btn>
</template>
<template v-slot:default="{ isActive }">
<v-card :title="t('learningObjectUploadTitle')">
<v-card-text>
<v-file-upload
icon="mdi-upload"
v-model="fileToUpload"
:disabled="isPending"
></v-file-upload>
<v-alert
v-if="error"
icon="mdi mdi-alert-circle"
type="error"
:title="t('uploadFailed')"
:text="t((error.response?.data as ContainsErrorString).error ?? error.message)"
></v-alert>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
:text="t('cancel')"
@click="isActive.value = false"
></v-btn>
<v-btn
:text="t('upload')"
@click="uploadFile()"
:loading="isPending"
:disabled="!fileToUpload"
></v-btn>
</v-card-actions>
</v-card>
</template>
</v-dialog>
</template>
<style scoped></style>

79
frontend/src/views/own-learning-content/learning-objects/OwnLearningObjectsView.vue Normal file
View file

@ -0,0 +1,79 @@
<script setup lang="ts">
import type { LearningObject } from "@/data-objects/learning-objects/learning-object";
import LearningObjectUploadButton from "@/views/own-learning-content/learning-objects/LearningObjectUploadButton.vue";
import LearningObjectPreviewCard from "./LearningObjectPreviewCard.vue";
import { computed, ref, watch, type Ref } from "vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const props = defineProps<{
learningObjects: LearningObject[];
}>();
const tableHeaders = [
{ title: t("hruid"), width: "250px", key: "key" },
{ title: t("language"), width: "50px", key: "language" },
{ title: t("version"), width: "50px", key: "version" },
{ title: t("title"), key: "title" },
];
const selectedLearningObjects: Ref<LearningObject[]> = ref([]);
watch(
() => props.learningObjects,
() => (selectedLearningObjects.value = []),
);
const selectedLearningObject = computed(() =>
selectedLearningObjects.value ? selectedLearningObjects.value[0] : undefined,
);
</script>
<template>
<div class="root">
<div class="table-container">
<learning-object-upload-button />
<v-data-table
class="table"
v-model="selectedLearningObjects"
:items="props.learningObjects"
:headers="tableHeaders"
select-strategy="single"
show-select
return-object
/>
</div>
<div
class="preview-container"
v-if="selectedLearningObject"
>
<learning-object-preview-card
class="preview"
:selectedLearningObject="selectedLearningObject"
/>
</div>
</div>
</template>
<style scoped>
.root {
display: flex;
gap: 20px;
padding: 20px;
flex-wrap: wrap;
}
.preview-container {
flex: 1;
min-width: 400px;
}
.table-container {
flex: 1;
}
.preview {
width: 100%;
}
.table {
width: 100%;
margin-top: 20px;
}
</style>

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

@ -0,0 +1,147 @@
<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { computed, ref, watch, type Ref } from "vue";
import JsonEditorVue from "json-editor-vue";
import ButtonWithConfirmation from "@/components/ButtonWithConfirmation.vue";
import {
useDeleteLearningPathMutation,
usePostLearningPathMutation,
usePutLearningPathMutation,
} from "@/queries/learning-paths";
import { Language } from "@/data-objects/language";
import type { LearningPath } from "@dwengo-1/common/interfaces/learning-content";
import type { AxiosError } from "axios";
import { parse } from "uuid";
const { t } = useI18n();
const props = defineProps<{
selectedLearningPath?: LearningPath;
}>();
const { isPending, mutate, error: deleteError, isSuccess: deleteSuccess } = useDeleteLearningPathMutation();
const DEFAULT_LEARNING_PATH: Partial<LearningPath> = {
language: "en",
hruid: "...",
title: "...",
description: "...",
nodes: [
{
learningobject_hruid: "...",
language: Language.English,
version: 1,
start_node: true,
transitions: [
{
default: true,
condition: t("hintRemoveIfUnconditionalTransition"),
next: {
hruid: "...",
version: 1,
language: "...",
},
},
],
},
],
};
const { isPending: isPostPending, error: postError, mutate: doPost } = usePostLearningPathMutation();
const { isPending: isPutPending, error: putError, mutate: doPut } = usePutLearningPathMutation();
const learningPath: Ref<Partial<LearningPath> | string> = ref(DEFAULT_LEARNING_PATH);
const parsedLearningPath = computed(() =>
typeof learningPath.value === "string" ? (JSON.parse(learningPath.value) as LearningPath) : learningPath.value,
);
watch(
() => props.selectedLearningPath,
() => (learningPath.value = props.selectedLearningPath ?? DEFAULT_LEARNING_PATH),
);
function uploadLearningPath(): void {
if (props.selectedLearningPath) {
doPut({ learningPath: parsedLearningPath.value });
} else {
doPost({ learningPath: parsedLearningPath.value });
}
}
function deleteLearningPath(): void {
if (props.selectedLearningPath) {
mutate({
hruid: props.selectedLearningPath.hruid,
language: props.selectedLearningPath.language as Language,
});
}
}
function extractErrorMessage(error: AxiosError): string {
return (error.response?.data as { error: string }).error ?? error.message;
}
const isIdModified = computed(
() =>
props.selectedLearningPath !== undefined &&
(props.selectedLearningPath.hruid !== parsedLearningPath.value.hruid ||
props.selectedLearningPath.language !== parsedLearningPath.value.language),
);
function getErrorMessage(): string | null {
if (postError.value) {
return t(extractErrorMessage(postError.value));
} else if (putError.value) {
return t(extractErrorMessage(putError.value));
} else if (deleteError.value) {
return t(extractErrorMessage(deleteError.value));
} else if (isIdModified.value) {
return t("learningPathCantModifyId");
}
return null;
}
</script>
<template>
<v-card :title="props.selectedLearningPath ? t('editLearningPath') : t('newLearningPath')">
<template v-slot:text>
<json-editor-vue v-model="learningPath"></json-editor-vue>
<v-alert
v-if="postError || putError || deleteError || isIdModified"
icon="mdi mdi-alert-circle"
type="error"
:title="t('error')"
:text="getErrorMessage()!"
></v-alert>
</template>
<template v-slot:actions>
<v-btn
@click="uploadLearningPath"
prependIcon="mdi mdi-check"
:loading="isPostPending || isPutPending"
:disabled="parsedLearningPath.hruid === DEFAULT_LEARNING_PATH.hruid || isIdModified"
>
{{ props.selectedLearningPath ? t("saveChanges") : t("create") }}
</v-btn>
<button-with-confirmation
@confirm="deleteLearningPath"
:disabled="!props.selectedLearningPath"
:text="t('delete')"
color="red"
prependIcon="mdi mdi-delete"
:confirmQueryText="t('learningPathDeleteQuery')"
/>
<v-btn
:href="`/learningPath/${props.selectedLearningPath?.hruid}/${props.selectedLearningPath?.language}/start`"
target="_blank"
prepend-icon="mdi mdi-open-in-new"
:disabled="!props.selectedLearningPath"
>
{{ t("open") }}
</v-btn>
</template>
</v-card>
</template>
<style scoped></style>

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

@ -0,0 +1,77 @@
<script setup lang="ts">
import LearningPathPreviewCard from "./LearningPathPreviewCard.vue";
import { computed, ref, watch, type Ref } from "vue";
import { useI18n } from "vue-i18n";
import type { LearningPath as LearningPathDTO } from "@dwengo-1/common/interfaces/learning-content";
const { t } = useI18n();
const props = defineProps<{
learningPaths: LearningPathDTO[];
}>();
const tableHeaders = [
{ title: t("hruid"), width: "250px", key: "hruid" },
{ 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,
);
watch(
() => props.learningPaths,
() => (selectedLearningPaths.value = []),
);
</script>
<template>
<div class="root">
<div class="table-container">
<v-data-table
class="table"
v-model="selectedLearningPaths"
:items="props.learningPaths"
:headers="tableHeaders"
select-strategy="single"
show-select
return-object
/>
</div>
<div class="preview-container">
<learning-path-preview-card
class="preview"
:selectedLearningPath="selectedLearningPath"
/>
</div>
</div>
</template>
<style scoped>
.fab {
position: absolute;
right: 20px;
bottom: 20px;
}
.root {
display: flex;
gap: 20px;
padding: 20px;
flex-wrap: wrap;
}
.preview-container {
flex: 1;
min-width: 400px;
}
.table-container {
flex: 1;
}
.preview {
width: 100%;
}
.table {
width: 100%;
}
</style>

28
frontend/tests/controllers/learning-objects-controller.test.ts Normal file
View file

@ -0,0 +1,28 @@
import { LearningObjectController } from "../../src/controllers/learning-objects";
import { Language } from "@dwengo-1/common/util/language";
import { beforeEach, describe, expect, it } from "vitest";
describe("Test controller learning object", () => {
let controller: LearningObjectController;
beforeEach(async () => {
controller = new LearningObjectController();
});
it("can get the metadata of a learning object", async () => {
const result = await controller.getMetadata("u_id01", Language.English, 1);
expect(result).not.toBeNull();
for (const property of ["key", "version", "language", "title"]) {
expect(result).toHaveProperty(property);
}
expect(result.key).toEqual("u_id01");
expect(result.version).toEqual(1);
expect(result.language).toEqual(Language.English);
});
it("can get the HTML of a learning object", async () => {
const result = await controller.getHTML("u_id01", Language.English, 1);
expect(result).toHaveProperty("body");
expect(result.body).toHaveProperty("innerHTML");
});
});

7
frontend/tests/controllers/learning-paths-controller.test.ts
View file

@ -15,7 +15,12 @@ describe("Test controller learning paths", () => {
});
it("Can get learning path by id", async () => {
const data = await controller.getAllByTheme("kiks");
const data = await controller.getAllByThemeAndLanguage("kiks", Language.Dutch);
expect(data).to.have.length.greaterThan(0);
});
it("Can get all learning paths administrated by a certain user.", async () => {
const data = await controller.getAllByAdminRaw("user");
expect(data.length).toBe(0); // This user does not administrate any learning paths in the test data.
});
});

1
frontend/vite.config.ts
View file

@ -9,6 +9,7 @@ export default defineConfig({
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),
"@dwengo-1/common": fileURLToPath(new URL("../common/src", import.meta.url)),
},
},
build: {