81 lines
2.9 KiB
Vue
81 lines
2.9 KiB
Vue
<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 authService from "@/services/auth/auth-service.ts";
|
|
import UsingQueryResult from "@/components/UsingQueryResult.vue";
|
|
import type { LearningObject } from "@/data-objects/learning-objects/learning-object";
|
|
import { ref, type Ref } from "vue";
|
|
import { useI18n } from "vue-i18n";
|
|
import { useGetAllLearningPathsByAdminQuery } from "@/queries/learning-paths";
|
|
import type { LearningPath as LearningPathDTO } from "@dwengo-1/common/interfaces/learning-content";
|
|
|
|
const { t } = useI18n();
|
|
|
|
const learningObjectsQuery = useLearningObjectListForAdminQuery(
|
|
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");
|
|
</script>
|
|
|
|
<template>
|
|
<div class="tab-pane-container">
|
|
<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-tabs>
|
|
|
|
<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[] }"
|
|
>
|
|
<own-learning-objects-view :learningObjects="response.data"></own-learning-objects-view>
|
|
</using-query-result>
|
|
</v-tabs-window-item>
|
|
<v-tabs-window-item value="learningPaths">
|
|
<using-query-result
|
|
:query-result="learningPathsQuery"
|
|
v-slot="response: { data: LearningPathDTO[] }"
|
|
>
|
|
<own-learning-paths-view :learningPaths="response.data" />
|
|
</using-query-result>
|
|
</v-tabs-window-item>
|
|
</v-tabs-window>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
h1 {
|
|
color: #0e6942;
|
|
text-transform: uppercase;
|
|
font-weight: bolder;
|
|
font-size: 50px;
|
|
}
|
|
|
|
.tab-pane-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
padding: 20px 30px;
|
|
}
|
|
.main-content {
|
|
flex: 1 1;
|
|
height: 100%;
|
|
}
|
|
</style>
|