feat(frontend): basisimplementatie leerobject upload-UI

frontend/src/views/own-learning-content/LearningObjectUploadButton.vue

@@ -0,0 +1,76 @@
+<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';
+
+    const { t } = useI18n();
+
+    const dialogOpen = ref(false);
+
+    interface ContainsErrorString {
+        error: string;
+    }
+
+    const fileToUpload: Ref<File | undefined> = ref(undefined);
+
+    const { isPending, error, isError, isSuccess, mutate } = useUploadLearningObjectMutation();
+
+    watch(isSuccess, (newIsSuccess) => {
+        if (newIsSuccess) {
+            dialogOpen.value = false;
+            fileToUpload.value = undefined;
+        }
+    });
+
+    function uploadFile() {
+        if (fileToUpload.value) {
+            mutate({learningObjectZip: fileToUpload.value});
+        }
+    }
+</script>
+<template>
+    <v-dialog max-width="500" v-model="dialogOpen">
+        <template v-slot:activator="{ props: activatorProps }">
+            <v-fab icon="mdi mdi-plus" v-bind="activatorProps"></v-fab>
+        </template>
+
+        <template v-slot:default="{ isActive }">
+            <v-card :title="t('learning_object_upload_title')">
+                <v-card-text>
+                    <v-file-upload
+                        :browse-text="t('upload_browse')"
+                        :divider-text="t('upload_divider')"
+                        icon="mdi-upload"
+                        :title="t('upload_drag_and_drop')"
+                        v-model="fileToUpload"
+                        :disabled="isPending"
+                    ></v-file-upload>
+                    <v-alert
+                        v-if="error"
+                        icon="mdi mdi-alert-circle"
+                        type="error"
+                        :title="t('upload_failed')"
+                        :text="t((error.response?.data as ContainsErrorString).error ?? error.message)"
+                    ></v-alert>
+                </v-card-text>
+
+                <v-card-actions>
+                    <v-spacer></v-spacer>
+                    <v-btn
+                        :text="t('cancel')"
+                        @click="isActive.value = false"
+                    ></v-btn>
+                    <v-btn
+                        :text="t('upload')"
+                        @click="uploadFile()"
+                        :loading="isPending"
+                        :disabled="!fileToUpload"
+                    ></v-btn>
+                </v-card-actions>
+            </v-card>
+        </template>
+    </v-dialog>
+</template>
+<style scoped>
+</style>

frontend/src/views/own-learning-content/OwnLearningContentPage.vue

@@ -1,11 +1,52 @@
 <script setup lang="ts">
+    import {useLearningObjectListForAdminQuery} from "@/queries/learning-objects.ts";
+    import OwnLearningObjectsView from "@/views/own-learning-content/OwnLearningObjectsView.vue"
+    import OwnLearningPathsView from "@/views/own-learning-content/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";
 
+    const { t } = useI18n();
+
+    const learningObjectsQuery =
+        useLearningObjectListForAdminQuery(authService.authState.user?.profile.preferred_username);
+
+    type Tab = "learningObjects" | "learningPaths";
+    const tab: Ref<Tab> = ref("learningObjects");
 </script>
 
 <template>
+    <div class="tab-pane-container">
+        <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">
+                <own-learning-paths-view/>
+            </v-tabs-window-item>
+        </v-tabs-window>
+    </div>
 </template>
 
 <style scoped>
-
+    .tab-pane-container {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+    }
+    .main-content {
+        flex: 1;
+    }
 </style>

frontend/src/views/own-learning-content/OwnLearningObjectsView.vue

@@ -1,11 +1,80 @@
 <script setup lang="ts">
+    import type { LearningObject } from '@/data-objects/learning-objects/learning-object';
+    import LearningObjectUploadButton from '@/views/own-learning-content/LearningObjectUploadButton.vue'
+    import LearningObjectContentView from '../learning-paths/learning-object/content/LearningObjectContentView.vue';
+    import { computed, ref, type Ref } from 'vue';
+    import { useI18n } from 'vue-i18n';
+import { useLearningObjectHTMLQuery } from '@/queries/learning-objects';
+import UsingQueryResult from '@/components/UsingQueryResult.vue';
 
+    const { t } = useI18n();
+    const props = defineProps<{
+        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" }
+    ];
+
+    const selectedLearningObjects: Ref<LearningObject[]> = ref([])
+
+    const selectedLearningObject = computed(() =>
+        selectedLearningObjects.value ? selectedLearningObjects.value[0] : undefined
+    )
+
+    const learningObjectQueryResult = useLearningObjectHTMLQuery(
+        () => selectedLearningObject.value?.key,
+        () => selectedLearningObject.value?.language,
+        () => selectedLearningObject.value?.version
+    );
 </script>
 
 <template>
-
+    <div class="root">
+        <v-data-table
+            class="table"
+            v-model="selectedLearningObjects"
+            :items="props.learningObjects"
+            :headers="tableHeaders"
+            select-strategy="single"
+            show-select
+            return-object
+        />
+        <v-card
+            class="preview"
+            v-if="selectedLearningObjects.length > 0"
+            :title="t('preview_for') + selectedLearningObjects[0].title"
+        >
+            <template v-slot:text>
+                <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>
+        </v-card>
+    </div>
+    <div class="fab">
+        <learning-object-upload-button/>
+    </div>
 </template>
 
 <style scoped>
-
+    .fab {
+        position: absolute;
+        right: 20px;
+        bottom: 20px;
+    }
+    .root {
+        display: flex;
+        gap: 20px;
+        padding: 20px;
+    }
+    .preview {
+        flex: 1;
+    }
+    .table {
+        flex: 1;
+    }
 </style>

frontend/src/views/own-learning-content/OwnLearningPathsView.vue

@@ -0,0 +1,9 @@
+<script lang="ts">
+</script>
+
+<template>
+    <p>Own learning paths</p>
+</template>
+
+<style>
+</style>