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

fix(frontend): Linting errors/warnings opgelost

Browse source
This commit is contained in:
Gerald Schmittinger 2025-04-01 15:00:47 +02:00
parent b2e6b33716
commit 4d98be78c1
26 changed files with 272 additions and 258 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -10,12 +10,12 @@
const query = computed({
get: () => route.query.query as string | null,
set: (newValue) => router.push({path: SEARCH_PATH, query: {query: newValue}})
set: async (newValue) => router.push({path: SEARCH_PATH, query: {query: newValue}})
});
const queryInput = ref(query.value);
function search() {
function search(): void {
query.value = queryInput.value;
}
</script>

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

@ -1,7 +1,7 @@
<script setup lang="ts">
import {convertBase64ToImageSrc} from "@/utils/base64ToImage.ts";
import type {LearningPath} from "@/data-objects/learning-path.ts";
import type {LearningPath} from "@/data-objects/learning-paths/learning-path.ts";
import {useI18n} from "vue-i18n";
const { t } = useI18n();
@ -15,6 +15,7 @@ const props = defineProps<{learningPaths: LearningPath[]}>();
class="learning-path-card"
link
:to="`/learningPath/${learningPath.hruid}/${learningPath.language}/${learningPath.startNode.learningobjectHruid}`"
:key="[learningPath.hruid, learningPath.language]"
v-for="learningPath in props.learningPaths"
>
<v-img

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

@ -12,7 +12,7 @@
const { t } = useI18n();
const errorMessage = computed(() => {
let errorWithMessage = (error.value as {message: string}) || null;
const errorWithMessage = (error.value as {message: string}) || null;
return errorWithMessage?.message || JSON.stringify(errorWithMessage)
});
</script>

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

@ -9,40 +9,42 @@ export abstract class BaseController {
this.basePath = basePath;
}
private assertSuccessResponse(response: AxiosResponse<unknown, unknown>) {
private static assertSuccessResponse(response: AxiosResponse<unknown, unknown>): void {
if (response.status / 100 !== 2) {
throw new HttpErrorResponseException(response);
}
}
private absolutePathFor(path: string) {
return "/" + this.basePath + path;
}
protected async get<T>(path: string, queryParams?: Record<string, any>, responseType?: ResponseType): Promise<T> {
let response = await apiClient.get<T>(
protected async get<T>(path: string, queryParams?: QueryParams, responseType?: ResponseType): Promise<T> {
const response = await apiClient.get<T>(
this.absolutePathFor(path),
{params: queryParams, responseType}
);
this.assertSuccessResponse(response);
BaseController.assertSuccessResponse(response);
return response.data;
}
protected async post<T>(path: string, body: unknown): Promise<T> {
let response = await apiClient.post<T>(this.absolutePathFor(path), body);
this.assertSuccessResponse(response);
const response = await apiClient.post<T>(this.absolutePathFor(path), body);
BaseController.assertSuccessResponse(response);
return response.data;
}
protected async delete<T>(path: string): Promise<T> {
let response = await apiClient.delete<T>(this.absolutePathFor(path))
this.assertSuccessResponse(response);
const response = await apiClient.delete<T>(this.absolutePathFor(path))
BaseController.assertSuccessResponse(response);
return response.data;
}
protected async put<T>(path: string, body: unknown): Promise<T> {
let response = await apiClient.put<T>(this.absolutePathFor(path), body);
this.assertSuccessResponse(response);
const response = await apiClient.put<T>(this.absolutePathFor(path), body);
BaseController.assertSuccessResponse(response);
return response.data;
}
private absolutePathFor(path: string): string {
return "/" + this.basePath + path;
}
}
type QueryParams = Record<string, string | number | boolean | undefined>;

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

@ -1,6 +1,6 @@
import {BaseController} from "@/controllers/base-controller.ts";
import type {Language} from "@/data-objects/language.ts";
import type {LearningObject} from "@/data-objects/learning-object.ts";
import type {LearningObject} from "@/data-objects/learning-objects/learning-object.ts";
export class LearningObjectController extends BaseController {
constructor() {

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

@ -1,19 +1,19 @@
import {BaseController} from "@/controllers/base-controller.ts";
import {LearningPath} from "@/data-objects/learning-path.ts";
import type {LearningPathDTO} from "@/data-objects/learning-path.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";
export class LearningPathController extends BaseController {
constructor() {
super("learningPath");
}
async search(query: string) {
let dtos = await this.get<LearningPathDTO[]>("/", {search: query});
async search(query: string): Promise<LearningPath[]> {
const dtos = await this.get<LearningPathDTO[]>("/", {search: query});
return dtos.map(dto => LearningPath.fromDTO(dto));
}
async getBy(hruid: string, language: Language, options?: {forGroup?: string, forStudent?: string}) {
let dtos = await this.get<LearningPathDTO[]>("/", {
async getBy(hruid: string, language: Language, options?: {forGroup?: string, forStudent?: string}): Promise<LearningPath> {
const dtos = await this.get<LearningPathDTO[]>("/", {
hruid,
language,
forGroup: options?.forGroup,
@ -21,8 +21,8 @@ export class LearningPathController extends BaseController {
});
return LearningPath.fromDTO(single(dtos));
}
async getAllByTheme(theme: string) {
let dtos = await this.get<LearningPathDTO[]>("/", {theme});
async getAllByTheme(theme: string): Promise<LearningPath[]> {
const dtos = await this.get<LearningPathDTO[]>("/", {theme});
return dtos.map(dto => LearningPath.fromDTO(dto));
}
}

4
frontend/src/data-objects/learning-objects/educational-goal.ts Normal file
View file

@ -0,0 +1,4 @@
export interface EducationalGoal {
source: string;
id: string;
}

12
frontend/src/data-objects/learning-object.ts → frontend/src/data-objects/learning-objects/learning-object.ts
View file

@ -1,14 +1,6 @@
import type {Language} from "@/data-objects/language.ts";
export interface EducationalGoal {
source: string;
id: string;
}
export interface ReturnValue {
callback_url: string;
callback_schema: Record<string, any>;
}
import type {ReturnValue} from "@/data-objects/learning-objects/return-value.ts";
import type {EducationalGoal} from "@/data-objects/learning-objects/educational-goal.ts";
export interface LearningObject {
key: string;

4
frontend/src/data-objects/learning-objects/return-value.ts Normal file
View file

@ -0,0 +1,4 @@
export interface ReturnValue {
callback_url: string;
callback_schema: Record<string, unknown>;
}

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

@ -1,128 +0,0 @@
import type {Language} from "@/data-objects/language.ts";
export interface LearningPathDTO {
language: string;
hruid: string;
title: string;
description: string;
image?: string; // Image might be missing, so it's optional
num_nodes: number;
num_nodes_left: number;
nodes: LearningPathNodeDTO[];
keywords: string;
target_ages: number[];
min_age: number;
max_age: number;
__order: number;
}
interface LearningPathNodeDTO {
_id: string;
learningobject_hruid: string;
version: number;
language: Language;
start_node?: boolean;
transitions: LearningPathTransitionDTO[];
created_at: string;
updatedAt: string;
done?: boolean; // True if a submission exists for this node by the user for whom the learning path is customized.
}
interface LearningPathTransitionDTO {
default: boolean;
_id: string;
next: {
_id: string;
hruid: string;
version: number;
language: string;
};
}
export class LearningPathNode {
constructor(
public readonly learningobjectHruid: string,
public readonly version: number,
public readonly language: Language,
public readonly transitions: {next: LearningPathNode, default: boolean}[],
public readonly createdAt: Date,
public readonly updatedAt: Date,
public readonly done: boolean = false
) {
}
static fromDTOAndOtherNodes(dto: LearningPathNodeDTO, otherNodes: LearningPathNodeDTO[]): LearningPathNode {
return new LearningPathNode(
dto.learningobject_hruid,
dto.version,
dto.language,
dto.transitions.map(transDto => {
let nextNodeDto = otherNodes.filter(it =>
it.learningobject_hruid === transDto.next.hruid
&& it.language === transDto.next.language
&& it.version === transDto.next.version
);
if (nextNodeDto.length !== 1) {
throw new Error(`Invalid learning path! There is a transition to node`
+ `${transDto.next.hruid}/${transDto.next.language}/${transDto.next.version}, but there are`
+ `${nextNodeDto.length} such nodes.`);
}
return {
next: LearningPathNode.fromDTOAndOtherNodes(nextNodeDto[0], otherNodes),
default: transDto.default
}
}),
new Date(dto.created_at),
new Date(dto.updatedAt),
dto.done
)
}
}
export class LearningPath {
constructor(
public readonly language: string,
public readonly hruid: string,
public readonly title: string,
public readonly description: string,
public readonly amountOfNodes: number,
public readonly amountOfNodesLeft: number,
public readonly keywords: string[],
public readonly targetAges: {min: number; max: number},
public readonly startNode: LearningPathNode,
public readonly image?: string // Image might be missing, so it's optional
) {
}
public get nodesAsList(): LearningPathNode[] {
let list: LearningPathNode[] = [];
let currentNode = this.startNode;
while (currentNode) {
list.push(currentNode);
currentNode = currentNode.transitions.filter(it => it.default)[0]?.next
|| currentNode.transitions[0]?.next;
}
return list;
}
static fromDTO(dto: LearningPathDTO): LearningPath {
let startNodeDto = dto.nodes.filter(it => it.start_node === true);
if (startNodeDto.length !== 1) {
throw new Error(`Invalid learning path: ${dto.hruid}/${dto.language}!
Expected precisely one start node, but there were ${startNodeDto.length}.`);
}
return new LearningPath(
dto.language,
dto.hruid,
dto.title,
dto.description,
dto.num_nodes,
dto.num_nodes_left,
dto.keywords.split(' '),
{min: dto.min_age, max: dto.max_age},
LearningPathNode.fromDTOAndOtherNodes(startNodeDto[0], dto.nodes),
dto.image
)
}
}

17
frontend/src/data-objects/learning-paths/learning-path-dto.ts Normal file
View file

@ -0,0 +1,17 @@
import type {LearningPathNodeDTO} from "@/data-objects/learning-paths/learning-path.ts";
export interface LearningPathDTO {
language: string;
hruid: string;
title: string;
description: string;
image?: string; // Image might be missing, so it's optional
num_nodes: number;
num_nodes_left: number;
nodes: LearningPathNodeDTO[];
keywords: string;
target_ages: number[];
min_age: number;
max_age: number;
__order: number;
}

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

@ -0,0 +1,57 @@
import type {Language} from "@/data-objects/language.ts";
import type {LearningPathNodeDTO} from "@/data-objects/learning-paths/learning-path.ts";
export class LearningPathNode {
public readonly learningobjectHruid: string;
public readonly version: number;
public readonly language: Language;
public readonly transitions: { next: LearningPathNode, default: boolean }[];
public readonly createdAt: Date;
public readonly updatedAt: Date;
public readonly done: boolean;
constructor(options: {
learningobjectHruid: string,
version: number,
language: Language,
transitions: { next: LearningPathNode, default: boolean }[],
createdAt: Date,
updatedAt: Date,
done?: boolean
}) {
this.learningobjectHruid = options.learningobjectHruid;
this.version = options.version;
this.language = options.language;
this.transitions = options.transitions;
this.createdAt = options.createdAt;
this.updatedAt = options.updatedAt;
this.done = options.done || false;
}
static fromDTOAndOtherNodes(dto: LearningPathNodeDTO, otherNodes: LearningPathNodeDTO[]): LearningPathNode {
return new LearningPathNode({
learningobjectHruid: dto.learningobject_hruid,
version: dto.version,
language: dto.language,
transitions: dto.transitions.map(transDto => {
const nextNodeDto = otherNodes.filter(it =>
it.learningobject_hruid === transDto.next.hruid
&& it.language === transDto.next.language
&& it.version === transDto.next.version
);
if (nextNodeDto.length !== 1) {
throw new Error(`Invalid learning path! There is a transition to node`
+ `${transDto.next.hruid}/${transDto.next.language}/${transDto.next.version}, but there are`
+ `${nextNodeDto.length} such nodes.`);
}
return {
next: LearningPathNode.fromDTOAndOtherNodes(nextNodeDto[0], otherNodes),
default: transDto.default
}
}),
createdAt: new Date(dto.created_at),
updatedAt: new Date(dto.updatedAt),
done: dto.done
})
}
}

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

@ -0,0 +1,94 @@
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";
export interface LearningPathNodeDTO {
_id: string;
learningobject_hruid: string;
version: number;
language: Language;
start_node?: boolean;
transitions: LearningPathTransitionDTO[];
created_at: string;
updatedAt: string;
done?: boolean; // True if a submission exists for this node by the user for whom the learning path is customized.
}
export interface LearningPathTransitionDTO {
default: boolean;
_id: string;
next: {
_id: string;
hruid: string;
version: number;
language: string;
};
}
export class LearningPath {
public readonly language: string;
public readonly hruid: string;
public readonly title: string;
public readonly description: string;
public readonly amountOfNodes: number;
public readonly amountOfNodesLeft: number;
public readonly keywords: string[];
public readonly targetAges: {min: number; max: number};
public readonly startNode: LearningPathNode;
public readonly image?: string; // Image might be missing, so it's optional
constructor(options: {
language: string,
hruid: string,
title: string,
description: string,
amountOfNodes: number,
amountOfNodesLeft: number,
keywords: string[],
targetAges: {min: number; max: number},
startNode: LearningPathNode,
image?: string // Image might be missing, so it's optional
}) {
this.language = options.language;
this.hruid = options.hruid;
this.title = options.title;
this.description = options.description;
this.amountOfNodes = options.amountOfNodes;
this.amountOfNodesLeft = options.amountOfNodesLeft;
this.keywords = options.keywords;
this.targetAges = options.targetAges;
this.startNode = options.startNode;
this.image = options.image;
}
public get nodesAsList(): LearningPathNode[] {
const list: LearningPathNode[] = [];
let currentNode = this.startNode;
while (currentNode) {
list.push(currentNode);
currentNode = currentNode.transitions.find(it => it.default)?.next
|| currentNode.transitions[0]?.next;
}
return list;
}
static fromDTO(dto: LearningPathDTO): LearningPath {
const startNodeDto = dto.nodes.filter(it => it.start_node === true);
if (startNodeDto.length !== 1) {
throw new Error(`Invalid learning path: ${dto.hruid}/${dto.language}!
Expected precisely one start node, but there were ${startNodeDto.length}.`);
}
return new LearningPath({
language: dto.language,
hruid: dto.hruid,
title: dto.title,
description: dto.description,
amountOfNodes: dto.num_nodes,
amountOfNodesLeft: dto.num_nodes_left,
keywords: dto.keywords.split(' '),
targetAges: {min: dto.min_age, max: dto.max_age},
startNode: LearningPathNode.fromDTOAndOtherNodes(startNodeDto[0], dto.nodes),
image: dto.image
});
}
}

5
frontend/src/exception/invalid-response-exception.ts Normal file
View file

@ -0,0 +1,5 @@
export class InvalidResponseException extends Error {
constructor(message: string) {
super(message);
}
}

5
frontend/src/exception/not-found-exception.ts Normal file
View file

@ -0,0 +1,5 @@
export class NotFoundException extends Error {
constructor(message: string) {
super(message);
}
}

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

@ -2,8 +2,8 @@ import {type MaybeRefOrGetter, toValue} from "vue";
import type {Language} from "@/data-objects/language.ts";
import {useQuery, type UseQueryReturnType} from "@tanstack/vue-query";
import {getLearningObjectController} from "@/controllers/controllers.ts";
import type {LearningObject} from "@/data-objects/learning-object.ts";
import type {LearningPath} from "@/data-objects/learning-path.ts";
import type {LearningObject} from "@/data-objects/learning-objects/learning-object.ts";
import type {LearningPath} from "@/data-objects/learning-paths/learning-path.ts";
const LEARNING_OBJECT_KEY = "learningObject";
const learningObjectController = getLearningObjectController();
@ -15,7 +15,7 @@ export function useLearningObjectMetadataQuery(
): UseQueryReturnType<LearningObject, Error> {
return useQuery({
queryKey: [LEARNING_OBJECT_KEY, "metadata", hruid, language, version],
queryFn: () => {
queryFn: async () => {
const [hruidVal, languageVal, versionVal] = [toValue(hruid), toValue(language), toValue(version)];
return learningObjectController.getMetadata(hruidVal, languageVal, versionVal)
},
@ -30,7 +30,7 @@ export function useLearningObjectHTMLQuery(
): UseQueryReturnType<Document, Error> {
return useQuery({
queryKey: [LEARNING_OBJECT_KEY, "html", hruid, language, version],
queryFn: () => {
queryFn: async () => {
const [hruidVal, languageVal, versionVal] = [toValue(hruid), toValue(language), toValue(version)];
return learningObjectController.getHTML(hruidVal, languageVal, versionVal)
},
@ -43,9 +43,9 @@ export function useLearningObjectListForPathQuery(
): UseQueryReturnType<LearningObject, Error> {
return useQuery({
queryKey: [LEARNING_OBJECT_KEY, "onPath", learningPath],
queryFn: () => {
let learningObjects = [];
for (let node of toValue(learningPath).nodesAsList) {
queryFn: async () => {
const learningObjects = [];
for (const node of toValue(learningPath).nodesAsList) {
learningObjects.push(
learningObjectController.getMetadata(node.learningobjectHruid, node.language, node.version)
);

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

@ -2,7 +2,7 @@ import {type MaybeRefOrGetter, toValue} from "vue";
import type {Language} from "@/data-objects/language.ts";
import {useQuery, type UseQueryReturnType} from "@tanstack/vue-query";
import { getLearningPathController } from "@/controllers/controllers";
import type {LearningPath} from "@/data-objects/learning-path.ts";
import type {LearningPath} from "@/data-objects/learning-paths/learning-path.ts";
const LEARNING_PATH_KEY = "learningPath";
const learningPathController = getLearningPathController();
@ -14,7 +14,7 @@ export function useGetLearningPathQuery(
): UseQueryReturnType<LearningPath, Error> {
return useQuery({
queryKey: [LEARNING_PATH_KEY, "get", hruid, language, options],
queryFn: () => {
queryFn: async () => {
const [hruidVal, languageVal, optionsVal] = [toValue(hruid), toValue(language), toValue(options)];
return learningPathController.getBy(hruidVal, languageVal, optionsVal)
},
@ -27,9 +27,7 @@ export function useGetAllLearningPathsByThemeQuery(
): UseQueryReturnType<LearningPath[], Error> {
return useQuery({
queryKey: [LEARNING_PATH_KEY, "getAllByTheme", theme],
queryFn: () => {
return learningPathController.getAllByTheme(toValue(theme))
},
queryFn: async () => learningPathController.getAllByTheme(toValue(theme)),
enabled: () => Boolean(toValue(theme)),
})
}
@ -39,7 +37,7 @@ export function useSearchLearningPathQuery(
): UseQueryReturnType<LearningPath[], Error> {
return useQuery({
queryKey: [LEARNING_PATH_KEY, "search", query],
queryFn: () => {
queryFn: async () => {
const queryVal = toValue(query);
return learningPathController.search(queryVal);
},

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

@ -15,6 +15,7 @@ import LearningPathPage from "@/views/learning-paths/LearningPathPage.vue";
import LearningPathSearchPage from "@/views/learning-paths/LearningPathSearchPage.vue";
import UserHomePage from "@/views/homepage/UserHomePage.vue";
import SingleTheme from "@/views/SingleTheme.vue";
import LearningObjectView from "@/views/learning-paths/LearningObjectView.vue";
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
@ -117,22 +118,21 @@ const router = createRouter({
meta: { requiresAuth: true }
},
{
path: ":hruid/:language",
path: ":hruid/:language/:learningObjectHruid",
name: "LearningPath",
component: LearningPathPage,
props: true,
meta: { requiresAuth: true },
children: [
{
path: ":learningObjectHruid",
component: LearningPathPage,
props: true,
meta: { requiresAuth: true }
}
]
},
]
},
{
path: "/learningObject/:hruid/:language/:version/raw",
name: "LearningObjectView",
component: LearningObjectView,
props: true,
meta: { requiresAuth: true }
},
{
path: "/:catchAll(.*)",
name: "NotFound",

22
frontend/src/services/api-client/api-exceptions.ts
View file

@ -1,22 +0,0 @@
import type {AxiosResponse} from "axios";
export class HttpErrorStatusException extends Error {
public readonly statusCode: number;
constructor(response: AxiosResponse<any, any>) {
super(`${response.statusText} (${response.status})`);
this.statusCode = response.status;
}
}
export class NotFoundException extends Error {
constructor(message: string) {
super(message);
}
}
export class InvalidResponseException extends Error {
constructor(message: string) {
super(message);
}
}

3
frontend/src/utils/response-assertions.ts
View file

@ -1,4 +1,5 @@
import {InvalidResponseException, NotFoundException} from "@/services/api-client/api-exceptions.ts";
import {NotFoundException} from "@/exception/not-found-exception.ts";
import {InvalidResponseException} from "@/exception/invalid-response-exception.ts";
export function single<T>(list: T[]): T {
if (list.length === 1) {

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

@ -1,22 +1,25 @@
<script setup lang="ts">
import { useRouter } from "vue-router";
import { onMounted } from "vue";
import {onMounted, ref, type Ref} from "vue";
import auth from "../services/auth/auth-service.ts";
const router = useRouter();
const errorMessage: Ref<string | null> = ref(null);
onMounted(async () => {
try {
await auth.handleLoginCallback();
await router.replace("/user"); // Redirect to theme page
} catch (_error) {
// FIXME console.error("OIDC callback error:", error);
} catch (error) {
errorMessage.value = `OIDC callback error: ${error}`;
}
});
</script>
<template>
<p>Logging you in...</p>
<p v-if="!errorMessage">Logging you in...</p>
<p v-else>{{ errorMessage }}</p>
</template>
<style scoped></style>

2
frontend/src/views/HomePage.vue
View file

@ -1,6 +1,4 @@
<script setup lang="ts">
import auth from "@/services/auth/auth-service.ts";
import apiClient from "@/services/api-client/api-client.ts";
import { ref } from "vue";
import dwengoLogo from "../../../assets/img/dwengo-groen-zwart.svg";
import { useI18n } from "vue-i18n";

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

@ -1,5 +1,5 @@
<script setup lang="ts">
import type {LearningPath} from "@/data-objects/learning-path.ts";
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";
@ -23,7 +23,7 @@ const learningPathsForThemeQueryResult = useGetAllLearningPathsByThemeQuery(() =
const { t } = useI18n();
const searchFilter = ref("");
function filterLearningPaths(learningPaths: LearningPath[]) {
function filterLearningPaths(learningPaths: LearningPath[]): LearningPath[] {
return learningPaths.filter(it =>
it.title.toLowerCase().includes(searchFilter.value.toLowerCase())
|| it.description.toLowerCase().includes(searchFilter.value.toLowerCase)

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

@ -1,6 +1,6 @@
<script setup lang="ts">
import {Language} from "@/data-objects/language.ts";
import {type UseQueryReturnType} from "@tanstack/vue-query";
import type {UseQueryReturnType} from "@tanstack/vue-query";
import {useLearningObjectHTMLQuery} from "@/queries/learning-objects.ts";
import UsingQueryResult from "@/components/UsingQueryResult.vue";

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

@ -1,10 +1,9 @@
<script setup lang="ts">
import {Language} from "@/data-objects/language.ts";
import {type LearningPath, LearningPathNode} from "@/data-objects/learning-path.ts";
import {computed, type ComputedRef, ref, watch} from "vue";
import type {LearningObject} from "@/data-objects/learning-object.ts";
import {useRoute, useRouter} from "vue-router";
import {type SuccessState} from "@/services/api-client/remote-resource.ts";
import type {LearningPath} from "@/data-objects/learning-paths/learning-path.ts";
import {computed, type ComputedRef, ref} from "vue";
import type {LearningObject} from "@/data-objects/learning-objects/learning-object.ts";
import {useRoute} from "vue-router";
import LearningObjectView from "@/views/learning-paths/LearningObjectView.vue";
import {useI18n} from "vue-i18n";
import LearningPathSearchField from "@/components/LearningPathSearchField.vue";
@ -12,8 +11,8 @@
import {useLearningObjectListForPathQuery} from "@/queries/learning-objects.ts";
import UsingQueryResult from "@/components/UsingQueryResult.vue";
import authService from "@/services/auth/auth-service.ts";
import {LearningPathNode} from "@/data-objects/learning-paths/learning-path-node.ts";
const router = useRouter();
const route = useRoute();
const { t } = useI18n();
@ -30,11 +29,11 @@
forStudent: route.query.forStudent,
forGroup: route.query.forGroup
} as Personalization
} else {
}
return {
forStudent: authService.authState.user?.profile?.preferred_username
} as Personalization
}
});
const learningPathQueryResult = useGetLearningPathQuery(
@ -51,61 +50,45 @@
const currentNode = computed(() => {
const currentHruid = props.learningObjectHruid;
if (nodesList.value) {
return nodesList.value.filter(it => it.learningobjectHruid === currentHruid)[0]
}
return nodesList.value?.find(it => it.learningobjectHruid === currentHruid);
});
const nextNode = computed(() => {
if (!currentNode.value || !nodesList.value)
return;
return undefined;
const currentIndex = nodesList.value?.indexOf(currentNode.value);
if (currentIndex < nodesList.value?.length) {
return nodesList.value?.[currentIndex + 1];
}
return currentIndex < nodesList.value?.length ? nodesList.value?.[currentIndex + 1] : undefined;
});
const previousNode = computed(() => {
if (!currentNode.value || !nodesList.value)
return;
return undefined;
const currentIndex = nodesList.value?.indexOf(currentNode.value);
if (currentIndex < nodesList.value?.length) {
return nodesList.value?.[currentIndex - 1];
}
});
watch(() => learningPathQueryResult, (newValue) => {
if (learningPathQueryResult.isSuccess && false) {
router.push({
path: router.currentRoute.value.path + "/" + (newValue as SuccessState<LearningPath>).data.startNode.learningobjectHruid,
query: route.query,
});
}
return currentIndex < nodesList.value?.length ? nodesList.value?.[currentIndex - 1] : undefined;
});
const navigationDrawerShown = ref(true);
function isLearningObjectCompleted(learningObject: LearningObject): boolean {
if (learningObjectListQueryResult.isSuccess) {
return learningPathQueryResult.data.value.nodesAsList.filter(it =>
return learningPathQueryResult.data.value.nodesAsList.find(it =>
it.learningobjectHruid === learningObject.key
&& it.version === learningObject.version
&& it.language == learningObject.language
)[0].done;
&& it.language === learningObject.language
).done;
}
return false;
}
type NavItemState = "teacherExclusive" | "completed" | "notCompleted";
const ICONS: {[key: NavItemState]: string} = {
const ICONS: Record<NavItemState, string> = {
teacherExclusive: "mdi-information",
completed: "mdi-checkbox-marked-circle-outline",
notCompleted: "mdi-checkbox-blank-circle-outline"
}
const COLORS: {[key: NavItemState]: string | undefined} = {
const COLORS: Record<NavItemState, string | undefined> = {
teacherExclusive: "info",
completed: "success",
notCompleted: undefined
@ -116,9 +99,9 @@
return "teacherExclusive";
} else if (isLearningObjectCompleted(learningObject)) {
return "completed";
} else {
return "notCompleted";
}
return "notCompleted";
}
</script>
@ -151,6 +134,7 @@
:to="{path: node.key, query: route.query}"
:title="node.title"
:active="node.key === props.learningObjectHruid"
:key="node.key"
v-if="!node.teacherExclusive || authService.authState.activeRole === 'teacher'"
>
<template v-slot:prepend>

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

@ -1,6 +1,6 @@
<script setup lang="ts">
import type {LearningPath} from "@/data-objects/learning-path.ts";
import {useRoute, useRouter} from "vue-router";
import type {LearningPath} from "@/data-objects/learning-paths/learning-path.ts";
import {useRoute} from "vue-router";
import {computed} from "vue";
import {useI18n} from "vue-i18n";
import LearningPathSearchField from "@/components/LearningPathSearchField.vue";
@ -9,7 +9,6 @@
import LearningPathsGrid from "@/components/LearningPathsGrid.vue";
const route = useRoute();
const router = useRouter();
const { t } = useI18n();
const query = computed(() => route.query.query as string | null);