2025SELab2-project-Dwengo/frontend/src/views/own-learning-content/learning-paths/LearningPathPreviewCard.vue

<script setup lang="ts">
    import { useI18n } from "vue-i18n";
    import { computed, ref, watch, type Ref } from "vue";
    import JsonEditorVue from "json-editor-vue";
    import ButtonWithConfirmation from "@/components/ButtonWithConfirmation.vue";
    import {
        useDeleteLearningPathMutation,
        usePostLearningPathMutation,
        usePutLearningPathMutation,
    } from "@/queries/learning-paths";
    import { Language } from "@/data-objects/language";
    import type { LearningPath } from "@dwengo-1/common/interfaces/learning-content";
    import type { AxiosError } from "axios";
    import { parse } from "uuid";

    const { t } = useI18n();

    const props = defineProps<{
        selectedLearningPath?: LearningPath;
    }>();

    const { isPending, mutate, error: deleteError, isSuccess: deleteSuccess } = useDeleteLearningPathMutation();

    const DEFAULT_LEARNING_PATH: LearningPath = {
        language: "en",
        hruid: "...",
        title: "...",
        description: "...",
        nodes: [
            {
                learningobject_hruid: "...",
                language: Language.English,
                version: 1,
                start_node: true,
                transitions: [
                    {
                        default: true,
                        condition: "(remove if the transition should be unconditinal)",
                        next: {
                            hruid: "...",
                            version: 1,
                            language: "...",
                        },
                    },
                ],
            },
        ],
        keywords: "Keywords separated by spaces",
        target_ages: [],
    };

    const { isPending: isPostPending, error: postError, mutate: doPost } = usePostLearningPathMutation();
    const { isPending: isPutPending, error: putError, mutate: doPut } = usePutLearningPathMutation();

    const learningPath: Ref<LearningPath | string> = ref(DEFAULT_LEARNING_PATH);

    const parsedLearningPath = computed(() =>
        typeof learningPath.value === "string" ? (JSON.parse(learningPath.value) as LearningPath) : learningPath.value,
    );

    watch(
        () => props.selectedLearningPath,
        () => (learningPath.value = props.selectedLearningPath ?? DEFAULT_LEARNING_PATH),
    );

    function uploadLearningPath(): void {
        if (props.selectedLearningPath) {
            doPut({ learningPath: parsedLearningPath.value });
        } else {
            doPost({ learningPath: parsedLearningPath.value });
        }
    }

    function deleteLearningPath(): void {
        if (props.selectedLearningPath) {
            mutate({
                hruid: props.selectedLearningPath.hruid,
                language: props.selectedLearningPath.language as Language,
            });
        }
    }

    function extractErrorMessage(error: AxiosError): string {
        return (error.response?.data as { error: string }).error ?? error.message;
    }

    const isIdModified = computed(
        () =>
            props.selectedLearningPath !== undefined &&
            (props.selectedLearningPath.hruid !== parsedLearningPath.value.hruid ||
                props.selectedLearningPath.language !== parsedLearningPath.value.language),
    );

    function getErrorMessage(): string | null {
        if (postError.value) {
            return t(extractErrorMessage(postError.value));
        } else if (putError.value) {
            return t(extractErrorMessage(putError.value));
        } else if (deleteError.value) {
            return t(extractErrorMessage(deleteError.value));
        } else if (isIdModified.value) {
            return t("learningPathCantModifyId");
        }
        return null;
    }
</script>

<template>
    <v-card :title="props.selectedLearningPath ? t('editLearningPath') : t('newLearningPath')">
        <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>
        <template v-slot:actions>
            <v-btn
                @click="uploadLearningPath"
                prependIcon="mdi mdi-check"
                :loading="isPostPending || isPutPending"
                :disabled="parsedLearningPath.hruid === DEFAULT_LEARNING_PATH.hruid || isIdModified"
            >
                {{ props.selectedLearningPath ? t("saveChanges") : t("create") }}
            </v-btn>
            <button-with-confirmation
                @confirm="deleteLearningPath"
                :disabled="!props.selectedLearningPath"
                :text="t('delete')"
                color="red"
                prependIcon="mdi mdi-delete"
                :confirmQueryText="t('learningPathDeleteQuery')"
            />
            <v-btn
                :href="`/learningPath/${props.selectedLearningPath?.hruid}/${props.selectedLearningPath?.language}/start`"
                target="_blank"
                prepend-icon="mdi mdi-open-in-new"
                :disabled="!props.selectedLearningPath"
            >
                {{ t("open") }}
            </v-btn>
        </template>
    </v-card>
</template>

<style scoped></style>