Merge pull request #290 from SELab-2/fix/verbeteringen-eigen-leerpaden

fix: Kleine verbeteringen omtrent eigen leerpaden

frontend/src/views/own-learning-content/learning-paths/LearningPathPreviewCard.vue

@@ -89,6 +89,15 @@
                 props.selectedLearningPath.language !== parsedLearningPath.value.language),
     );
 
+    const selectedLearningPathLink = computed(() => {
+        if (!props.selectedLearningPath) {
+            return undefined;
+        }
+        const { hruid, language } = props.selectedLearningPath;
+        const startNode = props.selectedLearningPath.nodes.find((it) => it.start_node);
+        return `/learningPath/${hruid}/${language}/${startNode.learningobject_hruid}`;
+    });
+
     function getErrorMessage(): string | null {
         if (postError.value) {
             return t(extractErrorMessage(postError.value));
@@ -104,23 +113,19 @@
 </script>
 
 <template>
-    <v-card :title="props.selectedLearningPath ? t('editLearningPath') : t('newLearningPath')">
+    <v-card>
-        <template v-slot:text>
+        <template v-slot:title>
-            <json-editor-vue v-model="learningPath"></json-editor-vue>
+            <div class="title-container">
-            <v-alert
+                <span class="title">{{
-                v-if="postError || putError || deleteError || isIdModified"
+                    props.selectedLearningPath ? t("editLearningPath") : t("newLearningPath")
-                icon="mdi mdi-alert-circle"
+                }}</span>
-                type="error"
+                <span class="actions">
-                :title="t('error')"
-                :text="getErrorMessage()!"
-            ></v-alert>
-        </template>
-        <template v-slot:actions>
                     <v-btn
                         @click="uploadLearningPath"
                         prependIcon="mdi mdi-check"
                         :loading="isPostPending || isPutPending"
                         :disabled="parsedLearningPath.hruid === DEFAULT_LEARNING_PATH.hruid || isIdModified"
+                        variant="text"
                     >
                         {{ props.selectedLearningPath ? t("saveChanges") : t("create") }}
                     </v-btn>
@@ -131,17 +136,45 @@
                         color="red"
                         prependIcon="mdi mdi-delete"
                         :confirmQueryText="t('learningPathDeleteQuery')"
+                        variant="text"
                     />
                     <v-btn
-                :href="`/learningPath/${props.selectedLearningPath?.hruid}/${props.selectedLearningPath?.language}/start`"
+                        :href="selectedLearningPathLink"
                         target="_blank"
                         prepend-icon="mdi mdi-open-in-new"
                         :disabled="!props.selectedLearningPath"
+                        variant="text"
                     >
                         {{ t("open") }}
                     </v-btn>
+                </span>
+            </div>
+        </template>
+        <template v-slot:text>
+            <json-editor-vue v-model="learningPath"></json-editor-vue>
+            <v-alert
+                v-if="postError || putError || deleteError || isIdModified"
+                icon="mdi mdi-alert-circle"
+                type="error"
+                :title="t('error')"
+                :text="getErrorMessage()!"
+            ></v-alert>
         </template>
     </v-card>
 </template>
 
-<style scoped></style>
+<style scoped>
+    .title-container {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
+    .title {
+        flex: 1;
+    }
+    .actions {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px;
+    }
+</style>