Merge branch 'dev' into feat/pagina-overzicht-klassen-voor-student
This commit is contained in:
laurejablonski
commit
7cba7f1fef
173 changed files with 3158 additions and 762 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,68 @@
|
|||
<script setup lang="ts"></script>
|
||||
<script setup lang="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";
|
||||
import { computed, ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useThemeQuery } from "@/queries/themes.ts";
|
||||
|
||||
const props = defineProps<{ theme: string }>();
|
||||
|
||||
const { locale } = useI18n();
|
||||
const language = computed(() => locale.value);
|
||||
|
||||
const themeQueryResult = useThemeQuery(language);
|
||||
|
||||
const currentThemeInfo = computed(() => themeQueryResult.data.value?.find((it) => it.key === props.theme));
|
||||
|
||||
const learningPathsForThemeQueryResult = useGetAllLearningPathsByThemeQuery(() => props.theme);
|
||||
|
||||
const { t } = useI18n();
|
||||
const searchFilter = ref("");
|
||||
|
||||
function filterLearningPaths(learningPaths: LearningPath[]): LearningPath[] {
|
||||
return learningPaths.filter(
|
||||
(it) =>
|
||||
it.title.toLowerCase().includes(searchFilter.value.toLowerCase()) ||
|
||||
it.description.toLowerCase().includes(searchFilter.value.toLowerCase()),
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main></main>
|
||||
<div class="container">
|
||||
<using-query-result :query-result="themeQueryResult">
|
||||
<h1>{{ currentThemeInfo!!.title }}</h1>
|
||||
<p>{{ currentThemeInfo!!.description }}</p>
|
||||
<div class="search-field-container">
|
||||
<v-text-field
|
||||
class="search-field"
|
||||
:label="t('search')"
|
||||
append-inner-icon="mdi-magnify"
|
||||
v-model="searchFilter"
|
||||
></v-text-field>
|
||||
</div>
|
||||
|
||||
<using-query-result
|
||||
:query-result="learningPathsForThemeQueryResult"
|
||||
v-slot="{ data }: { data: LearningPath[] }"
|
||||
>
|
||||
<learning-paths-grid :learning-paths="filterLearningPaths(data)"></learning-paths-grid>
|
||||
</using-query-result>
|
||||
</using-query-result>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
<style scoped>
|
||||
.search-field-container {
|
||||
display: block;
|
||||
margin: 20px;
|
||||
}
|
||||
.search-field {
|
||||
max-width: 300px;
|
||||
}
|
||||
.container {
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
51
frontend/src/views/learning-paths/LearningObjectView.vue
Normal file
51
frontend/src/views/learning-paths/LearningObjectView.vue
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
<script setup lang="ts">
|
||||
import { Language } from "@/data-objects/language.ts";
|
||||
import type { UseQueryReturnType } from "@tanstack/vue-query";
|
||||
import { useLearningObjectHTMLQuery } from "@/queries/learning-objects.ts";
|
||||
import UsingQueryResult from "@/components/UsingQueryResult.vue";
|
||||
|
||||
const props = defineProps<{ hruid: string; language: Language; version: number }>();
|
||||
|
||||
const learningObjectHtmlQueryResult: UseQueryReturnType<Document, Error> = useLearningObjectHTMLQuery(
|
||||
() => props.hruid,
|
||||
() => props.language,
|
||||
() => props.version,
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<using-query-result
|
||||
:query-result="learningObjectHtmlQueryResult as UseQueryReturnType<Document, Error>"
|
||||
v-slot="learningPathHtml: { data: Document }"
|
||||
>
|
||||
<div
|
||||
class="learning-object-container"
|
||||
v-html="learningPathHtml.data.body.innerHTML"
|
||||
></div>
|
||||
</using-query-result>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.learning-object-container {
|
||||
padding: 20px;
|
||||
}
|
||||
:deep(hr) {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
:deep(li) {
|
||||
margin-left: 30px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
:deep(img) {
|
||||
max-width: 80%;
|
||||
}
|
||||
:deep(h2),
|
||||
:deep(h3),
|
||||
:deep(h4),
|
||||
:deep(h5),
|
||||
:deep(h6) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
229
frontend/src/views/learning-paths/LearningPathPage.vue
Normal file
229
frontend/src/views/learning-paths/LearningPathPage.vue
Normal file
|
|
@ -0,0 +1,229 @@
|
|||
<script setup lang="ts">
|
||||
import { Language } from "@/data-objects/language.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";
|
||||
import { useGetLearningPathQuery } from "@/queries/learning-paths.ts";
|
||||
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 route = useRoute();
|
||||
const { t } = useI18n();
|
||||
|
||||
const props = defineProps<{ hruid: string; language: Language; learningObjectHruid?: string }>();
|
||||
|
||||
interface Personalization {
|
||||
forStudent?: string;
|
||||
forGroup?: string;
|
||||
}
|
||||
|
||||
const personalization = computed(() => {
|
||||
if (route.query.forStudent || route.query.forGroup) {
|
||||
return {
|
||||
forStudent: route.query.forStudent,
|
||||
forGroup: route.query.forGroup,
|
||||
} as Personalization;
|
||||
}
|
||||
return {
|
||||
forStudent: authService.authState.user?.profile?.preferred_username,
|
||||
} as Personalization;
|
||||
});
|
||||
|
||||
const learningPathQueryResult = useGetLearningPathQuery(props.hruid, props.language, personalization);
|
||||
|
||||
const learningObjectListQueryResult = useLearningObjectListForPathQuery(learningPathQueryResult.data);
|
||||
|
||||
const nodesList: ComputedRef<LearningPathNode[] | null> = computed(
|
||||
() => learningPathQueryResult.data.value?.nodesAsList ?? null,
|
||||
);
|
||||
|
||||
const currentNode = computed(() => {
|
||||
const currentHruid = props.learningObjectHruid;
|
||||
return nodesList.value?.find((it) => it.learningobjectHruid === currentHruid);
|
||||
});
|
||||
|
||||
const nextNode = computed(() => {
|
||||
if (!currentNode.value || !nodesList.value) return undefined;
|
||||
const currentIndex = nodesList.value?.indexOf(currentNode.value);
|
||||
return currentIndex < nodesList.value?.length ? nodesList.value?.[currentIndex + 1] : undefined;
|
||||
});
|
||||
|
||||
const previousNode = computed(() => {
|
||||
if (!currentNode.value || !nodesList.value) return undefined;
|
||||
const currentIndex = nodesList.value?.indexOf(currentNode.value);
|
||||
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?.find(
|
||||
(it) =>
|
||||
it.learningobjectHruid === learningObject.key &&
|
||||
it.version === learningObject.version &&
|
||||
it.language === learningObject.language,
|
||||
)?.done ?? false
|
||||
);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
type NavItemState = "teacherExclusive" | "completed" | "notCompleted";
|
||||
|
||||
const ICONS: Record<NavItemState, string> = {
|
||||
teacherExclusive: "mdi-information",
|
||||
completed: "mdi-checkbox-marked-circle-outline",
|
||||
notCompleted: "mdi-checkbox-blank-circle-outline",
|
||||
};
|
||||
|
||||
const COLORS: Record<NavItemState, string | undefined> = {
|
||||
teacherExclusive: "info",
|
||||
completed: "success",
|
||||
notCompleted: undefined,
|
||||
};
|
||||
|
||||
function getNavItemState(learningObject: LearningObject): NavItemState {
|
||||
if (learningObject.teacherExclusive) {
|
||||
return "teacherExclusive";
|
||||
} else if (isLearningObjectCompleted(learningObject)) {
|
||||
return "completed";
|
||||
}
|
||||
return "notCompleted";
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<using-query-result
|
||||
:query-result="learningPathQueryResult"
|
||||
v-slot="learningPath: { data: LearningPath }"
|
||||
>
|
||||
<v-navigation-drawer
|
||||
v-model="navigationDrawerShown"
|
||||
:width="350"
|
||||
>
|
||||
<v-list-item>
|
||||
<template v-slot:title>
|
||||
<div class="learning-path-title">{{ learningPath.data.title }}</div>
|
||||
</template>
|
||||
<template v-slot:subtitle>
|
||||
<div>{{ learningPath.data.description }}</div>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<template v-slot:subtitle>
|
||||
<p>
|
||||
<v-icon
|
||||
:color="COLORS.notCompleted"
|
||||
:icon="ICONS.notCompleted"
|
||||
></v-icon>
|
||||
{{ t("legendNotCompletedYet") }}
|
||||
</p>
|
||||
<p>
|
||||
<v-icon
|
||||
:color="COLORS.completed"
|
||||
:icon="ICONS.completed"
|
||||
></v-icon>
|
||||
{{ t("legendCompleted") }}
|
||||
</p>
|
||||
<p>
|
||||
<v-icon
|
||||
:color="COLORS.teacherExclusive"
|
||||
:icon="ICONS.teacherExclusive"
|
||||
></v-icon>
|
||||
{{ t("legendTeacherExclusive") }}
|
||||
</p>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-divider></v-divider>
|
||||
<div v-if="props.learningObjectHruid">
|
||||
<using-query-result
|
||||
:query-result="learningObjectListQueryResult"
|
||||
v-slot="learningObjects: { data: LearningObject[] }"
|
||||
>
|
||||
<template v-for="node in learningObjects.data">
|
||||
<v-list-item
|
||||
link
|
||||
: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>
|
||||
<v-icon
|
||||
:color="COLORS[getNavItemState(node)]"
|
||||
:icon="ICONS[getNavItemState(node)]"
|
||||
></v-icon>
|
||||
</template>
|
||||
<template v-slot:append> {{ node.estimatedTime }}' </template>
|
||||
</v-list-item>
|
||||
</template>
|
||||
</using-query-result>
|
||||
</div>
|
||||
</v-navigation-drawer>
|
||||
<div class="control-bar-above-content">
|
||||
<v-btn
|
||||
:icon="navigationDrawerShown ? 'mdi-menu-open' : 'mdi-menu'"
|
||||
class="navigation-drawer-toggle-button"
|
||||
variant="plain"
|
||||
@click="navigationDrawerShown = !navigationDrawerShown"
|
||||
></v-btn>
|
||||
<div class="search-field-container">
|
||||
<learning-path-search-field></learning-path-search-field>
|
||||
</div>
|
||||
</div>
|
||||
<learning-object-view
|
||||
:hruid="currentNode.learningobjectHruid"
|
||||
:language="currentNode.language"
|
||||
:version="currentNode.version"
|
||||
v-if="currentNode"
|
||||
></learning-object-view>
|
||||
<div class="navigation-buttons-container">
|
||||
<v-btn
|
||||
prepend-icon="mdi-chevron-left"
|
||||
variant="text"
|
||||
:disabled="!previousNode"
|
||||
:to="previousNode ? { path: previousNode.learningobjectHruid, query: route.query } : undefined"
|
||||
>
|
||||
{{ t("previous") }}
|
||||
</v-btn>
|
||||
<v-btn
|
||||
append-icon="mdi-chevron-right"
|
||||
variant="text"
|
||||
:disabled="!nextNode"
|
||||
:to="nextNode ? { path: nextNode.learningobjectHruid, query: route.query } : undefined"
|
||||
>
|
||||
{{ t("next") }}
|
||||
</v-btn>
|
||||
</div>
|
||||
</using-query-result>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.learning-path-title {
|
||||
white-space: normal;
|
||||
}
|
||||
.search-field-container {
|
||||
min-width: 250px;
|
||||
}
|
||||
.control-bar-above-content {
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
margin-bottom: -30px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.navigation-buttons-container {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
48
frontend/src/views/learning-paths/LearningPathSearchPage.vue
Normal file
48
frontend/src/views/learning-paths/LearningPathSearchPage.vue
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
<script setup lang="ts">
|
||||
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";
|
||||
import { useSearchLearningPathQuery } from "@/queries/learning-paths.ts";
|
||||
import UsingQueryResult from "@/components/UsingQueryResult.vue";
|
||||
import LearningPathsGrid from "@/components/LearningPathsGrid.vue";
|
||||
|
||||
const route = useRoute();
|
||||
const { t } = useI18n();
|
||||
|
||||
const query = computed(() => route.query.query as string | undefined);
|
||||
|
||||
const searchQueryResults = useSearchLearningPathQuery(query);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="search-field-container">
|
||||
<learning-path-search-field class="search-field"></learning-path-search-field>
|
||||
</div>
|
||||
|
||||
<using-query-result
|
||||
:query-result="searchQueryResults"
|
||||
v-slot="{ data }: { data: LearningPath[] }"
|
||||
>
|
||||
<learning-paths-grid :learning-paths="data"></learning-paths-grid>
|
||||
</using-query-result>
|
||||
<div content="empty-state-container">
|
||||
<v-empty-state
|
||||
v-if="!query"
|
||||
icon="mdi-magnify"
|
||||
:title="t('enterSearchTerm')"
|
||||
:text="t('enterSearchTermDescription')"
|
||||
></v-empty-state>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.search-field-container {
|
||||
display: block;
|
||||
margin: 20px;
|
||||
}
|
||||
.search-field {
|
||||
max-width: 300px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue