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

style: fix linting issues met Prettier

Browse source
This commit is contained in:
Lint Action 2025-05-13 23:45:23 +00:00
parent a65e95ac46
commit 1203f12ff4
33 changed files with 359 additions and 307 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5,7 +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";
import authService from "@/services/auth/auth-service";
const props = defineProps({
selectedTheme: { type: String, required: true },

84
frontend/src/components/ButtonWithConfirmation.vue
View file

@ -1,17 +1,17 @@
<script setup lang="ts">
import { useI18n } from 'vue-i18n';
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
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 emit = defineEmits<{ (e: "confirm"): void }>();
const { t } = useI18n();
@ -22,40 +22,42 @@
<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: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>
<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-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>
<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>
<style scoped></style>

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

@ -7,7 +7,7 @@
// Import assets
import dwengoLogo from "../../../assets/img/dwengo-groen-zwart.svg";
import { useLocale } from "vuetify";
import { useLocale } from "vuetify";
const { t, locale } = useI18n();
const { current: vuetifyLocale } = useLocale();

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

@ -46,16 +46,21 @@ export abstract class BaseController {
* @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> {
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'
}
"Content-Type": "multipart/form-data",
},
});
BaseController.assertSuccessResponse(response)
BaseController.assertSuccessResponse(response);
return response.data;
}

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

@ -22,7 +22,7 @@ export class LearningPathNode {
this.learningobjectHruid = options.learningobjectHruid;
this.version = options.version;
this.language = options.language;
this.transitions = options.transitions.map(it => ({ next: it.next, default: it.default ?? false }));
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;

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

@ -82,7 +82,7 @@ export class LearningPath {
keywords: dto.keywords.split(" "),
targetAges: {
min: dto.min_age ?? NaN,
max: dto.max_age ?? NaN
max: dto.max_age ?? NaN,
},
startNode: LearningPathNode.fromDTOAndOtherNodes(LearningPath.getStartNode(dto), dto.nodes),
image: dto.image,

10
frontend/src/main.ts
View file

@ -8,7 +8,7 @@ import * as directives from "vuetify/directives";
import i18n from "./i18n/i18n.ts";
// JSON-editor
import JsonEditorVue from 'json-editor-vue';
import JsonEditorVue from "json-editor-vue";
// Components
import App from "./App.vue";
@ -20,7 +20,7 @@ import { de, en, fr, nl } from "vuetify/locale";
const app = createApp(App);
app.use(router);
app.use(JsonEditorVue, {})
app.use(JsonEditorVue, {});
const link = document.createElement("link");
link.rel = "stylesheet";
@ -39,9 +39,9 @@ const vuetify = createVuetify({
},
locale: {
locale: i18n.global.locale,
fallback: 'en',
messages: { nl, en, de, fr }
}
fallback: "en",
messages: { nl, en, de, fr },
},
});
const queryClient = new QueryClient({

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

@ -1,6 +1,12 @@
import { type MaybeRefOrGetter, toValue } from "vue";
import type { Language } from "@/data-objects/language.ts";
import { useMutation, useQuery, useQueryClient, type UseMutationReturnType, 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";
@ -58,7 +64,7 @@ export function useLearningObjectListForPathQuery(
}
export function useLearningObjectListForAdminQuery(
admin: MaybeRefOrGetter<string | undefined>
admin: MaybeRefOrGetter<string | undefined>,
): UseQueryReturnType<LearningObject[], Error> {
return useQuery({
queryKey: [LEARNING_OBJECT_KEY, "forAdmin", admin],
@ -66,24 +72,39 @@ export function useLearningObjectListForAdminQuery(
const adminVal = toValue(admin);
return await learningObjectController.getAllAdministratedBy(adminVal!);
},
enabled: () => toValue(admin) !== undefined
enabled: () => toValue(admin) !== undefined,
});
}
export function useUploadLearningObjectMutation(): UseMutationReturnType<LearningObject, AxiosError, {learningObjectZip: File}, unknown> {
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"]}); }
onSuccess: async () => {
await queryClient.invalidateQueries({ queryKey: [LEARNING_OBJECT_KEY, "forAdmin"] });
},
});
}
export function useDeleteLearningObjectMutation(): UseMutationReturnType<LearningObject, AxiosError, {hruid: string, language: Language, version: number}, unknown> {
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"]}); }
mutationFn: async ({ hruid, language, version }) =>
await learningObjectController.deleteLearningObject(hruid, language, version),
onSuccess: async () => {
await queryClient.invalidateQueries({ queryKey: [LEARNING_OBJECT_KEY, "forAdmin"] });
},
});
}

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

@ -1,6 +1,12 @@
import { type MaybeRefOrGetter, toValue } from "vue";
import type { Language } from "@/data-objects/language.ts";
import { useMutation, useQuery, useQueryClient, type UseMutationReturnType, 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 { AxiosError } from "axios";
import type { LearningPath as LearningPathDTO } from "@dwengo-1/common/interfaces/learning-content";
@ -35,42 +41,54 @@ export function useGetAllLearningPathsByThemeQuery(
}
export function useGetAllLearningPathsByAdminQuery(
admin: MaybeRefOrGetter<string | undefined>
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))
enabled: () => Boolean(toValue(admin)),
});
}
export function usePostLearningPathMutation():
UseMutationReturnType<LearningPathDTO, AxiosError, { learningPath: LearningPathDTO }, unknown> {
export function usePostLearningPathMutation(): UseMutationReturnType<
LearningPathDTO,
AxiosError,
{ learningPath: LearningPathDTO },
unknown
> {
const queryClient = useQueryClient();
return useMutation({
mutationFn: async ({ learningPath }) => learningPathController.postLearningPath(learningPath),
onSuccess: async () => queryClient.invalidateQueries({ queryKey: [LEARNING_PATH_KEY] })
onSuccess: async () => queryClient.invalidateQueries({ queryKey: [LEARNING_PATH_KEY] }),
});
}
export function usePutLearningPathMutation():
UseMutationReturnType<LearningPathDTO, AxiosError, { learningPath: LearningPathDTO }, unknown> {
export function usePutLearningPathMutation(): UseMutationReturnType<
LearningPathDTO,
AxiosError,
{ learningPath: LearningPathDTO },
unknown
> {
const queryClient = useQueryClient();
return useMutation({
mutationFn: async ({ learningPath }) => learningPathController.putLearningPath(learningPath),
onSuccess: async () => queryClient.invalidateQueries({ queryKey: [LEARNING_PATH_KEY] })
onSuccess: async () => queryClient.invalidateQueries({ queryKey: [LEARNING_PATH_KEY] }),
});
}
export function useDeleteLearningPathMutation():
UseMutationReturnType<LearningPathDTO, AxiosError, { hruid: string, language: Language }, unknown> {
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] })
onSuccess: async () => queryClient.invalidateQueries({ queryKey: [LEARNING_PATH_KEY] }),
});
}

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

@ -110,7 +110,7 @@ const router = createRouter({
path: "/my-content",
name: "OwnLearningContentPage",
component: OwnLearningContentPage,
meta: { requiresAuth: true }
meta: { requiresAuth: true },
},
{
path: "/learningPath",
@ -126,7 +126,7 @@ const router = createRouter({
name: "LearningPath",
component: LearningPathPage,
props: true,
meta: { requiresAuth: true }
meta: { requiresAuth: true },
},
],
},

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

@ -1,7 +1,7 @@
<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 { 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";
@ -12,11 +12,13 @@
const { t } = useI18n();
const learningObjectsQuery =
useLearningObjectListForAdminQuery(authService.authState.user?.profile.preferred_username);
const learningObjectsQuery = useLearningObjectListForAdminQuery(
authService.authState.user?.profile.preferred_username,
);
const learningPathsQuery =
useGetAllLearningPathsByAdminQuery(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");
@ -27,12 +29,18 @@
<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-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">
<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[] }"
@ -45,7 +53,7 @@
:query-result="learningPathsQuery"
v-slot="response: { data: LearningPathDTO[] }"
>
<own-learning-paths-view :learningPaths="response.data"/>
<own-learning-paths-view :learningPaths="response.data" />
</using-query-result>
</v-tabs-window-item>
</v-tabs-window>

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

@ -1,21 +1,21 @@
<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';
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
selectedLearningObject?: LearningObject;
}>();
const learningObjectQueryResult = useLearningObjectHTMLQuery(
() => props.selectedLearningObject?.key,
() => props.selectedLearningObject?.language,
() => props.selectedLearningObject?.version
() => props.selectedLearningObject?.version,
);
const { isPending, mutate } = useDeleteLearningObjectMutation();
@ -25,7 +25,7 @@
mutate({
hruid: props.selectedLearningObject.key,
language: props.selectedLearningObject.language,
version: props.selectedLearningObject.version
version: props.selectedLearningObject.version,
});
}
}
@ -37,7 +37,10 @@
:title="t('previewFor') + selectedLearningObject.title"
>
<template v-slot:text>
<using-query-result :query-result="learningObjectQueryResult" v-slot="response: { data: Document }">
<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>
@ -53,5 +56,4 @@
</v-card>
</template>
<style scoped>
</style>
<style scoped></style>

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

@ -1,8 +1,8 @@
<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';
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();
@ -25,19 +25,23 @@
function uploadFile() {
if (fileToUpload.value) {
mutate({learningObjectZip: fileToUpload.value});
mutate({ learningObjectZip: fileToUpload.value });
}
}
</script>
<template>
<v-dialog max-width="500" v-model="dialogOpen">
<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">
size="large"
>
</v-btn>
</template>
@ -75,5 +79,4 @@
</template>
</v-dialog>
</template>
<style scoped>
</style>
<style scoped></style>

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

@ -1,36 +1,38 @@
<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';
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[]
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" }
{ title: t("title"), key: "title" },
];
const selectedLearningObjects: Ref<LearningObject[]> = ref([]);
watch(() => props.learningObjects, () => selectedLearningObjects.value = []);
const selectedLearningObject = computed(() =>
selectedLearningObjects.value ? selectedLearningObjects.value[0] : undefined
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/>
<learning-object-upload-button />
<v-data-table
class="table"
v-model="selectedLearningObjects"
@ -41,8 +43,14 @@
return-object
/>
</div>
<div class="preview-container" v-if="selectedLearningObject">
<learning-object-preview-card class="preview" :selectedLearningObject="selectedLearningObject"/>
<div
class="preview-container"
v-if="selectedLearningObject"
>
<learning-object-preview-card
class="preview"
:selectedLearningObject="selectedLearningObject"
/>
</div>
</div>
</template>

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

@ -1,30 +1,34 @@
<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';
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
selectedLearningPath?: LearningPath;
}>();
const { isPending, mutate, error: deleteError, isSuccess: deleteSuccess } = useDeleteLearningPathMutation();
const DEFAULT_LEARNING_PATH: LearningPath = {
language: 'en',
hruid: '...',
title: '...',
description: '...',
language: "en",
hruid: "...",
title: "...",
description: "...",
nodes: [
{
learningobject_hruid: '...',
learningobject_hruid: "...",
language: Language.English,
version: 1,
start_node: true,
@ -33,17 +37,17 @@ import { parse } from 'uuid';
default: true,
condition: "(remove if the transition should be unconditinal)",
next: {
hruid: '...',
hruid: "...",
version: 1,
language: '...'
}
}
]
}
language: "...",
},
},
],
},
],
keywords: 'Keywords separated by spaces',
target_ages: []
}
keywords: "Keywords separated by spaces",
target_ages: [],
};
const { isPending: isPostPending, error: postError, mutate: doPost } = usePostLearningPathMutation();
const { isPending: isPutPending, error: putError, mutate: doPut } = usePutLearningPathMutation();
@ -51,11 +55,13 @@ import { parse } from 'uuid';
const learningPath: Ref<LearningPath | string> = ref(DEFAULT_LEARNING_PATH);
const parsedLearningPath = computed(() =>
typeof learningPath.value === "string" ? JSON.parse(learningPath.value) as LearningPath
: learningPath.value
typeof learningPath.value === "string" ? (JSON.parse(learningPath.value) as LearningPath) : learningPath.value,
);
watch(() => props.selectedLearningPath, () => learningPath.value = props.selectedLearningPath ?? DEFAULT_LEARNING_PATH);
watch(
() => props.selectedLearningPath,
() => (learningPath.value = props.selectedLearningPath ?? DEFAULT_LEARNING_PATH),
);
function uploadLearningPath(): void {
if (props.selectedLearningPath) {
@ -69,20 +75,20 @@ import { parse } from 'uuid';
if (props.selectedLearningPath) {
mutate({
hruid: props.selectedLearningPath.hruid,
language: props.selectedLearningPath.language as Language
language: props.selectedLearningPath.language as Language,
});
}
}
function extractErrorMessage(error: AxiosError): string {
return (error.response?.data as {error: string}).error ?? error.message;
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
)
const isIdModified = computed(
() =>
props.selectedLearningPath !== undefined &&
(props.selectedLearningPath.hruid !== parsedLearningPath.value.hruid ||
props.selectedLearningPath.language !== parsedLearningPath.value.language),
);
function getErrorMessage(): string | null {
@ -93,24 +99,22 @@ import { parse } from 'uuid';
} else if (deleteError.value) {
return t(extractErrorMessage(deleteError.value));
} else if (isIdModified.value) {
return t('learningPathCantModifyId');
return t("learningPathCantModifyId");
}
return null;
}
</script>
<template>
<v-card
:title="props.selectedLearningPath ? t('editLearningPath') : t('newLearningPath')"
>
<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-if="postError || putError || deleteError || isIdModified"
icon="mdi mdi-alert-circle"
type="error"
:title="t('error')"
:text="getErrorMessage()!"
></v-alert>
</template>
<template v-slot:actions>
@ -120,7 +124,7 @@ import { parse } from 'uuid';
:loading="isPostPending || isPutPending"
:disabled="parsedLearningPath.hruid === DEFAULT_LEARNING_PATH.hruid || isIdModified"
>
{{ props.selectedLearningPath ? t('saveChanges') : t('create') }}
{{ props.selectedLearningPath ? t("saveChanges") : t("create") }}
</v-btn>
<button-with-confirmation
@confirm="deleteLearningPath"
@ -136,11 +140,10 @@ import { parse } from 'uuid';
prepend-icon="mdi mdi-open-in-new"
:disabled="!props.selectedLearningPath"
>
{{ t('open') }}
{{ t("open") }}
</v-btn>
</template>
</v-card>
</template>
<style scoped>
</style>
<style scoped></style>

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

@ -1,27 +1,30 @@
<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';
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[]
learningPaths: LearningPathDTO[];
}>();
const tableHeaders = [
{ title: t("hruid"), width: "250px", key: "hruid" },
{ title: t("language"), width: "50px", key: "language" },
{ title: t("title"), key: "title" }
{ title: t("title"), key: "title" },
];
const selectedLearningPaths: Ref<LearningPathDTO[]> = ref([]);
const selectedLearningPath = computed(() =>
selectedLearningPaths.value ? selectedLearningPaths.value[0] : undefined
selectedLearningPaths.value ? selectedLearningPaths.value[0] : undefined,
);
watch(() => props.learningPaths, () => selectedLearningPaths.value = []);
watch(
() => props.learningPaths,
() => (selectedLearningPaths.value = []),
);
</script>
<template>
@ -38,7 +41,10 @@
/>
</div>
<div class="preview-container">
<learning-path-preview-card class="preview" :selectedLearningPath="selectedLearningPath"/>
<learning-path-preview-card
class="preview"
:selectedLearningPath="selectedLearningPath"
/>
</div>
</div>
</template>