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

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>