feat(frontend): Heel ruwe eerste versie van leerpadbeheerpagina toegevoegd

frontend/src/views/own-learning-content/learning-objects/LearningObjectPreviewCard.vue

@@ -0,0 +1,50 @@
+<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 { useDeleteLearningObjectMutation, useLearningObjectHTMLQuery } from '@/queries/learning-objects';
+    import { useI18n } from 'vue-i18n';
+
+    const { t } = useI18n();
+
+    const props = defineProps<{
+        selectedLearningObject?: LearningObject
+    }>();
+
+    const learningObjectQueryResult = useLearningObjectHTMLQuery(
+        () => props.selectedLearningObject?.key,
+        () => props.selectedLearningObject?.language,
+        () => props.selectedLearningObject?.version
+    );
+
+    const { isPending, mutate } = useDeleteLearningObjectMutation();
+
+    function deleteLearningObject(): void {
+        if (props.selectedLearningObject) {
+            mutate({
+                hruid: props.selectedLearningObject.key,
+                language: props.selectedLearningObject.language,
+                version: props.selectedLearningObject.version
+            });
+        }
+    }
+</script>
+
+<template>
+    <v-card
+        v-if="selectedLearningObject"
+        :title="t('previewFor') + selectedLearningObject.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>
+        <template v-slot:actions>
+            <v-btn text="Delete" @click="deleteLearningObject()"></v-btn>
+        </template>
+    </v-card>
+</template>
+
+<style scoped>
+</style>