style: fix linting issues met Prettier
This commit is contained in:
Lint Action
parent
ed8b5c919d
commit
ea5cf7abf9
26 changed files with 467 additions and 422 deletions
|
|
@ -1,18 +1,27 @@
|
|||
<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";
|
||||
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);
|
||||
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
|
||||
: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>
|
||||
|
||||
|
|
@ -32,7 +41,11 @@ const learningObjectHtmlQueryResult: UseQueryReturnType<Document, Error> = useLe
|
|||
:deep(img) {
|
||||
max-width: 80%;
|
||||
}
|
||||
:deep(h2), :deep(h3), :deep(h4), :deep(h5), :deep(h6) {
|
||||
:deep(h2),
|
||||
:deep(h3),
|
||||
:deep(h4),
|
||||
:deep(h5),
|
||||
:deep(h6) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,68 +1,61 @@
|
|||
<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 { 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 { 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 { 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";
|
||||
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}>()
|
||||
const props = defineProps<{ hruid: string; language: Language; learningObjectHruid?: string }>();
|
||||
|
||||
interface Personalization {
|
||||
forStudent?: string,
|
||||
forGroup?: string
|
||||
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
|
||||
forGroup: route.query.forGroup,
|
||||
} as Personalization;
|
||||
}
|
||||
return {
|
||||
forStudent: authService.authState.user?.profile?.preferred_username
|
||||
} as Personalization
|
||||
|
||||
return {
|
||||
forStudent: authService.authState.user?.profile?.preferred_username,
|
||||
} as Personalization;
|
||||
});
|
||||
|
||||
const learningPathQueryResult = useGetLearningPathQuery(
|
||||
props.hruid,
|
||||
props.language,
|
||||
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 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);
|
||||
return nodesList.value?.find((it) => it.learningobjectHruid === currentHruid);
|
||||
});
|
||||
|
||||
const nextNode = computed(() => {
|
||||
if (!currentNode.value || !nodesList.value)
|
||||
return undefined;
|
||||
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;
|
||||
if (!currentNode.value || !nodesList.value) return undefined;
|
||||
const currentIndex = nodesList.value?.indexOf(currentNode.value);
|
||||
return currentIndex < nodesList.value?.length ? nodesList.value?.[currentIndex - 1] : undefined;
|
||||
});
|
||||
|
|
@ -71,11 +64,14 @@
|
|||
|
||||
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 (
|
||||
learningPathQueryResult.data.value?.nodesAsList?.find(
|
||||
(it) =>
|
||||
it.learningobjectHruid === learningObject.key &&
|
||||
it.version === learningObject.version &&
|
||||
it.language === learningObject.language,
|
||||
)?.done ?? false
|
||||
);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
|
@ -85,14 +81,14 @@
|
|||
const ICONS: Record<NavItemState, string> = {
|
||||
teacherExclusive: "mdi-information",
|
||||
completed: "mdi-checkbox-marked-circle-outline",
|
||||
notCompleted: "mdi-checkbox-blank-circle-outline"
|
||||
}
|
||||
notCompleted: "mdi-checkbox-blank-circle-outline",
|
||||
};
|
||||
|
||||
const COLORS: Record<NavItemState, string | undefined> = {
|
||||
const COLORS: Record<NavItemState, string | undefined> = {
|
||||
teacherExclusive: "info",
|
||||
completed: "success",
|
||||
notCompleted: undefined
|
||||
}
|
||||
notCompleted: undefined,
|
||||
};
|
||||
|
||||
function getNavItemState(learningObject: LearningObject): NavItemState {
|
||||
if (learningObject.teacherExclusive) {
|
||||
|
|
@ -100,15 +96,14 @@
|
|||
} else if (isLearningObjectCompleted(learningObject)) {
|
||||
return "completed";
|
||||
}
|
||||
return "notCompleted";
|
||||
|
||||
return "notCompleted";
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<using-query-result
|
||||
:query-result="learningPathQueryResult"
|
||||
v-slot="learningPath: {data: LearningPath}"
|
||||
v-slot="learningPath: { data: LearningPath }"
|
||||
>
|
||||
<v-navigation-drawer v-model="navigationDrawerShown">
|
||||
<v-list-item
|
||||
|
|
@ -117,21 +112,39 @@
|
|||
></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>
|
||||
<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[]}"
|
||||
v-slot="learningObjects: { data: LearningObject[] }"
|
||||
>
|
||||
<template v-for="node in learningObjects.data">
|
||||
<v-list-item
|
||||
link
|
||||
:to="{path: node.key, query: route.query}"
|
||||
:to="{ path: node.key, query: route.query }"
|
||||
:title="node.title"
|
||||
:active="node.key === props.learningObjectHruid"
|
||||
:key="node.key"
|
||||
|
|
@ -140,11 +153,10 @@
|
|||
<template v-slot:prepend>
|
||||
<v-icon
|
||||
:color="COLORS[getNavItemState(node)]"
|
||||
:icon="ICONS[getNavItemState(node)]"></v-icon>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
{{ node.estimatedTime }}'
|
||||
:icon="ICONS[getNavItemState(node)]"
|
||||
></v-icon>
|
||||
</template>
|
||||
<template v-slot:append> {{ node.estimatedTime }}' </template>
|
||||
</v-list-item>
|
||||
</template>
|
||||
</using-query-result>
|
||||
|
|
@ -155,7 +167,8 @@
|
|||
:icon="navigationDrawerShown ? 'mdi-menu-open' : 'mdi-menu'"
|
||||
class="navigation-drawer-toggle-button"
|
||||
variant="plain"
|
||||
@click="navigationDrawerShown = !navigationDrawerShown"></v-btn>
|
||||
@click="navigationDrawerShown = !navigationDrawerShown"
|
||||
></v-btn>
|
||||
<div class="search-field-container">
|
||||
<learning-path-search-field></learning-path-search-field>
|
||||
</div>
|
||||
|
|
@ -171,7 +184,7 @@
|
|||
prepend-icon="mdi-chevron-left"
|
||||
variant="text"
|
||||
:disabled="!previousNode"
|
||||
:to="previousNode ? {path: previousNode.learningobjectHruid, query: route.query} : undefined"
|
||||
:to="previousNode ? { path: previousNode.learningobjectHruid, query: route.query } : undefined"
|
||||
>
|
||||
{{ t("previous") }}
|
||||
</v-btn>
|
||||
|
|
@ -179,7 +192,7 @@
|
|||
append-icon="mdi-chevron-right"
|
||||
variant="text"
|
||||
:disabled="!nextNode"
|
||||
:to="nextNode ? {path: nextNode.learningobjectHruid, query: route.query} : undefined"
|
||||
:to="nextNode ? { path: nextNode.learningobjectHruid, query: route.query } : undefined"
|
||||
>
|
||||
{{ t("next") }}
|
||||
</v-btn>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<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 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 { useSearchLearningPathQuery } from "@/queries/learning-paths.ts";
|
||||
import UsingQueryResult from "@/components/UsingQueryResult.vue";
|
||||
import LearningPathsGrid from "@/components/LearningPathsGrid.vue";
|
||||
|
||||
|
|
@ -21,7 +21,10 @@
|
|||
<learning-path-search-field class="search-field"></learning-path-search-field>
|
||||
</div>
|
||||
|
||||
<using-query-result :query-result="searchQueryResults" v-slot="{ data }: {data: LearningPath[]}">
|
||||
<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">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue