92 lines
3 KiB
Vue
92 lines
3 KiB
Vue
<script setup lang="ts">
|
|
import authService from "@/services/auth/auth-service.ts";
|
|
import { computed, type ComputedRef, ref } from "vue";
|
|
import type { GroupDTOId } from "@dwengo-1/common/interfaces/group";
|
|
import type { QuestionData } from "@dwengo-1/common/interfaces/question";
|
|
import type { LearningObjectIdentifierDTO } from "@dwengo-1/interfaces/learning-content";
|
|
import { useCreateQuestionMutation } from "@/queries/questions.ts";
|
|
import { useI18n } from "vue-i18n";
|
|
import { AccountType } from "@dwengo-1/common/util/account-types.ts";
|
|
|
|
const props = defineProps<{
|
|
learningObjectHruid: string;
|
|
learningObjectLanguage: string;
|
|
learningObjectVersion: number;
|
|
forGroup?: GroupDTOId | undefined;
|
|
withTitle?: boolean;
|
|
}>();
|
|
|
|
const { t } = useI18n();
|
|
|
|
const emit = defineEmits(["updated"]);
|
|
|
|
const questionInput = ref("");
|
|
|
|
const loID: ComputedRef<LearningObjectIdentifierDTO> = computed(() => ({
|
|
hruid: props.learningObjectHruid as string,
|
|
language: props.learningObjectLanguage,
|
|
version: props.learningObjectVersion
|
|
}));
|
|
const createQuestionMutation = useCreateQuestionMutation(loID);
|
|
|
|
const showQuestionBox = computed(
|
|
() => authService.authState.activeRole === AccountType.Student && props.forGroup,
|
|
);
|
|
|
|
function submitQuestion(): void {
|
|
if (props.forGroup && questionInput.value !== "") {
|
|
const questionData: QuestionData = {
|
|
author: authService.authState.user?.profile.preferred_username,
|
|
content: questionInput.value,
|
|
inGroup: props.forGroup,
|
|
};
|
|
createQuestionMutation.mutate(questionData, {
|
|
onSuccess: async () => {
|
|
questionInput.value = ""; // Clear the input field after submission
|
|
emit("updated");
|
|
},
|
|
onError: (_) => {
|
|
// TODO Handle error
|
|
// - console.error(e);
|
|
},
|
|
});
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<h3 v-if="props.withTitle && showQuestionBox">{{ t("askAQuestion") }}:</h3>
|
|
{{ props.forGroup }}
|
|
<div
|
|
class="question-box"
|
|
v-if="showQuestionBox"
|
|
>
|
|
<v-textarea
|
|
:label="t('question-input-placeholder')"
|
|
v-model="questionInput"
|
|
class="question-field"
|
|
density="compact"
|
|
rows="1"
|
|
variant="outlined"
|
|
auto-grow
|
|
>
|
|
<template v-slot:append-inner>
|
|
<v-btn
|
|
icon="mdi mdi-send"
|
|
size="small"
|
|
variant="plain"
|
|
class="question-button"
|
|
@click="submitQuestion"
|
|
/>
|
|
</template>
|
|
</v-textarea>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.question-box {
|
|
width: 100%;
|
|
max-width: 400px;
|
|
margin: 20px auto;
|
|
}
|
|
</style>
|