style: fix linting issues met Prettier
This commit is contained in:
Lint Action
parent
b45fc47b06
commit
18e17e0133
9 changed files with 184 additions and 160 deletions
|
|
@ -9,13 +9,11 @@
|
|||
<template>
|
||||
<div class="space-y-4">
|
||||
<div
|
||||
v-for="(question) in questions"
|
||||
v-for="question in questions"
|
||||
:key="(question.sequenceNumber, question.content)"
|
||||
class="border rounded-2xl p-4 shadow-sm bg-white"
|
||||
>
|
||||
<SingleQuestion :question="question"></SingleQuestion>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,23 +1,31 @@
|
|||
<script setup lang="ts">
|
||||
import type { LearningObject } from '@/data-objects/learning-objects/learning-object';
|
||||
import { useQuestionsQuery } from '@/queries/questions';
|
||||
import type { LearningObjectIdentifierDTO } from '@dwengo-1/common/interfaces/learning-content';
|
||||
import { languageMap } from '@dwengo-1/common/util/language';
|
||||
import { computed, ref } from 'vue';
|
||||
import type { LearningObject } from "@/data-objects/learning-objects/learning-object";
|
||||
import { useQuestionsQuery } from "@/queries/questions";
|
||||
import type { LearningObjectIdentifierDTO } from "@dwengo-1/common/interfaces/learning-content";
|
||||
import { languageMap } from "@dwengo-1/common/util/language";
|
||||
import { computed, ref } from "vue";
|
||||
|
||||
const props = defineProps<{
|
||||
node: LearningObject
|
||||
}>();
|
||||
const props = defineProps<{
|
||||
node: LearningObject;
|
||||
}>();
|
||||
|
||||
const loid = { hruid: props.node.key, version: props.node.version, language: props.node.language} as LearningObjectIdentifierDTO;
|
||||
const { data, isLoading, error} = useQuestionsQuery(loid);
|
||||
|
||||
const hasQuestions = computed(() => {
|
||||
return (data.value?.questions.length ?? 0) > 0;
|
||||
});
|
||||
const loid = {
|
||||
hruid: props.node.key,
|
||||
version: props.node.version,
|
||||
language: props.node.language,
|
||||
} as LearningObjectIdentifierDTO;
|
||||
const { data, isLoading, error } = useQuestionsQuery(loid);
|
||||
|
||||
const hasQuestions = computed(() => {
|
||||
return (data.value?.questions.length ?? 0) > 0;
|
||||
});
|
||||
</script>
|
||||
<template v-if="!isLoading & !error">
|
||||
<v-icon v-if="hasQuestions" icon="mdi-help-circle-outline" color="red" size="small" />
|
||||
<v-icon
|
||||
v-if="hasQuestions"
|
||||
icon="mdi-help-circle-outline"
|
||||
color="red"
|
||||
size="small"
|
||||
/>
|
||||
</template>
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
import UsingQueryResult from "./UsingQueryResult.vue";
|
||||
import type { AnswersResponse } from "@/controllers/answers";
|
||||
import type { AnswerData, AnswerDTO } from "@dwengo-1/common/interfaces/answer";
|
||||
import authService from "@/services/auth/auth-service";
|
||||
import authService from "@/services/auth/auth-service";
|
||||
|
||||
const props = defineProps<{
|
||||
question: QuestionDTO;
|
||||
|
|
@ -30,31 +30,30 @@ import authService from "@/services/auth/auth-service";
|
|||
}) as QuestionId,
|
||||
),
|
||||
);
|
||||
|
||||
const questionId : QuestionId = {
|
||||
|
||||
const questionId: QuestionId = {
|
||||
learningObjectIdentifier: props.question.learningObjectIdentifier,
|
||||
sequenceNumber: props.question.sequenceNumber as number
|
||||
sequenceNumber: props.question.sequenceNumber as number,
|
||||
};
|
||||
const createAnswerMutation = useCreateAnswerMutation(questionId);
|
||||
|
||||
const answer = ref('');
|
||||
const answer = ref("");
|
||||
|
||||
function submitAnswer() {
|
||||
const answerData: AnswerData = {
|
||||
author: authService.authState.user?.profile.preferred_username as string,
|
||||
content: answer.value
|
||||
content: answer.value,
|
||||
};
|
||||
if (answer.value != "") {
|
||||
createAnswerMutation.mutate(answerData, {
|
||||
onSuccess: () => {
|
||||
answer.value = "";
|
||||
answersQuery.refetch();
|
||||
}
|
||||
},
|
||||
});
|
||||
} else {
|
||||
alert("Please type an answer before submitting") //TODO: i18n
|
||||
alert("Please type an answer before submitting"); //TODO: i18n
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
|
|
@ -82,15 +81,23 @@ import authService from "@/services/auth/auth-service";
|
|||
>
|
||||
{{ question.content }}
|
||||
</div>
|
||||
<div v-if="(authService.authState.activeRole === 'teacher')" class="answer-input-container">
|
||||
<div
|
||||
v-if="authService.authState.activeRole === 'teacher'"
|
||||
class="answer-input-container"
|
||||
>
|
||||
<input
|
||||
v-model="answer"
|
||||
type="text"
|
||||
placeholder="answer: ..."
|
||||
class="answer-input"
|
||||
v-model="answer"
|
||||
type="text"
|
||||
placeholder="answer: ..."
|
||||
class="answer-input"
|
||||
/>
|
||||
<button @click="submitAnswer" class="submit-button">▶</button>
|
||||
</div>
|
||||
<button
|
||||
@click="submitAnswer"
|
||||
class="submit-button"
|
||||
>
|
||||
▶
|
||||
</button>
|
||||
</div>
|
||||
<using-query-result
|
||||
:query-result="answersQuery"
|
||||
v-slot="answersResponse: { data: AnswersResponse }"
|
||||
|
|
@ -123,9 +130,7 @@ import authService from "@/services/auth/auth-service";
|
|||
justify-content: space-between;
|
||||
"
|
||||
>
|
||||
<span class="font-semibold text-lg text-gray-800">{{
|
||||
answer.author.username
|
||||
}}</span>
|
||||
<span class="font-semibold text-lg text-gray-800">{{ answer.author.username }}</span>
|
||||
<span class="text-sm text-gray-500">{{ formatDate(answer.timestamp) }}</span>
|
||||
</div>
|
||||
|
||||
|
|
@ -141,45 +146,45 @@ import authService from "@/services/auth/auth-service";
|
|||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.answer-input {
|
||||
flex-grow: 1;
|
||||
outline: none;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #374151; /* gray-700 */
|
||||
font-size: 0.875rem; /* smaller font size */
|
||||
}
|
||||
|
||||
.answer-input::placeholder {
|
||||
color: #9ca3af; /* gray-400 */
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
margin-left: 0.25rem;
|
||||
padding: 0.25rem;
|
||||
background-color: #f3f4f6; /* gray-100 */
|
||||
border-radius: 9999px;
|
||||
transition: background-color 0.2s;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.submit-button:hover {
|
||||
background-color: #e5e7eb; /* gray-200 */
|
||||
}
|
||||
|
||||
.submit-icon {
|
||||
width: 0.75rem;
|
||||
height: 0.75rem;
|
||||
color: #4b5563; /* gray-600 */
|
||||
}
|
||||
.answer-input-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid #d1d5db; /* gray-300 */
|
||||
border-radius: 9999px;
|
||||
padding: 0.5rem 1rem;
|
||||
max-width: 28rem;
|
||||
width: 100%;
|
||||
}
|
||||
.answer-input {
|
||||
flex-grow: 1;
|
||||
outline: none;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #374151; /* gray-700 */
|
||||
font-size: 0.875rem; /* smaller font size */
|
||||
}
|
||||
|
||||
.answer-input::placeholder {
|
||||
color: #9ca3af; /* gray-400 */
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
margin-left: 0.25rem;
|
||||
padding: 0.25rem;
|
||||
background-color: #f3f4f6; /* gray-100 */
|
||||
border-radius: 9999px;
|
||||
transition: background-color 0.2s;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.submit-button:hover {
|
||||
background-color: #e5e7eb; /* gray-200 */
|
||||
}
|
||||
|
||||
.submit-icon {
|
||||
width: 0.75rem;
|
||||
height: 0.75rem;
|
||||
color: #4b5563; /* gray-600 */
|
||||
}
|
||||
.answer-input-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid #d1d5db; /* gray-300 */
|
||||
border-radius: 9999px;
|
||||
padding: 0.5rem 1rem;
|
||||
max-width: 28rem;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -12,13 +12,13 @@ export interface AnswerResponse {
|
|||
}
|
||||
|
||||
export class AnswerController extends BaseController {
|
||||
|
||||
loId: LearningObjectIdentifierDTO;
|
||||
sequenceNumber: number;
|
||||
|
||||
|
||||
constructor(questionId: QuestionId) {
|
||||
super(`learningObject/${questionId.learningObjectIdentifier.hruid}/:${questionId.learningObjectIdentifier.version}/questions/${questionId.sequenceNumber}/answers`);
|
||||
super(
|
||||
`learningObject/${questionId.learningObjectIdentifier.hruid}/:${questionId.learningObjectIdentifier.version}/questions/${questionId.sequenceNumber}/answers`,
|
||||
);
|
||||
this.loId = questionId.learningObjectIdentifier;
|
||||
this.sequenceNumber = questionId.sequenceNumber;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,10 +18,10 @@
|
|||
import type { LearningObjectIdentifierDTO } from "@dwengo-1/common/interfaces/learning-content";
|
||||
import QandA from "@/components/QandA.vue";
|
||||
import type { QuestionData, QuestionDTO } from "@dwengo-1/common/interfaces/question";
|
||||
import {useStudentAssignmentsQuery, useStudentGroupsQuery} from "@/queries/students"
|
||||
import { useStudentAssignmentsQuery, useStudentGroupsQuery } from "@/queries/students";
|
||||
import type { AssignmentDTO } from "@dwengo-1/common/interfaces/assignment";
|
||||
import type { GroupDTO } from "@dwengo-1/common/interfaces/group";
|
||||
import QuestionNotification from "@/components/QuestionNotification.vue";
|
||||
import type { GroupDTO } from "@dwengo-1/common/interfaces/group";
|
||||
import QuestionNotification from "@/components/QuestionNotification.vue";
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
|
@ -146,40 +146,38 @@ import QuestionNotification from "@/components/QuestionNotification.vue";
|
|||
});
|
||||
}
|
||||
|
||||
const studentAssignmentsQueryResult = useStudentAssignmentsQuery(authService.authState.user?.profile.preferred_username);
|
||||
const studentAssignmentsQueryResult = useStudentAssignmentsQuery(
|
||||
authService.authState.user?.profile.preferred_username,
|
||||
);
|
||||
const pathIsAssignment = computed(() => {
|
||||
const assignments = studentAssignmentsQueryResult.data.value?.assignments as AssignmentDTO[] || [];
|
||||
const assignments = (studentAssignmentsQueryResult.data.value?.assignments as AssignmentDTO[]) || [];
|
||||
return assignments.some(
|
||||
(assignment) =>
|
||||
assignment.learningPath === props.hruid &&
|
||||
assignment.language === props.language
|
||||
(assignment) => assignment.learningPath === props.hruid && assignment.language === props.language,
|
||||
);
|
||||
});
|
||||
|
||||
const loID:LearningObjectIdentifierDTO = {
|
||||
hruid: props.learningObjectHruid as string,
|
||||
language: props.language
|
||||
}
|
||||
const createQuestionMutation = useCreateQuestionMutation(loID)
|
||||
const groupsQueryResult = useStudentGroupsQuery(authService.authState.user?.profile.preferred_username)
|
||||
const loID: LearningObjectIdentifierDTO = {
|
||||
hruid: props.learningObjectHruid as string,
|
||||
language: props.language,
|
||||
};
|
||||
const createQuestionMutation = useCreateQuestionMutation(loID);
|
||||
const groupsQueryResult = useStudentGroupsQuery(authService.authState.user?.profile.preferred_username);
|
||||
|
||||
const questionInput = ref("");
|
||||
|
||||
function submitQuestion() {
|
||||
const assignments = studentAssignmentsQueryResult.data.value?.assignments as AssignmentDTO[]
|
||||
const assignments = studentAssignmentsQueryResult.data.value?.assignments as AssignmentDTO[];
|
||||
const assignment = assignments.find(
|
||||
(assignment) =>
|
||||
assignment.learningPath === props.hruid &&
|
||||
assignment.language === props.language
|
||||
)
|
||||
const groups = groupsQueryResult.data.value?.groups as GroupDTO[]
|
||||
const group = groups?.find(group => group.assignment === assignment?.id) as GroupDTO
|
||||
const questionData:QuestionData = {
|
||||
(assignment) => assignment.learningPath === props.hruid && assignment.language === props.language,
|
||||
);
|
||||
const groups = groupsQueryResult.data.value?.groups as GroupDTO[];
|
||||
const group = groups?.find((group) => group.assignment === assignment?.id) as GroupDTO;
|
||||
const questionData: QuestionData = {
|
||||
author: authService.authState.user?.profile.preferred_username,
|
||||
content: questionInput.value,
|
||||
inGroup: group //TODO: POST response zegt dat dit null is???
|
||||
}
|
||||
console.log(questionData)
|
||||
inGroup: group, //TODO: POST response zegt dat dit null is???
|
||||
};
|
||||
console.log(questionData);
|
||||
if (questionInput.value != "") {
|
||||
createQuestionMutation.mutate(questionData, {
|
||||
onSuccess: () => {
|
||||
|
|
@ -187,14 +185,13 @@ import QuestionNotification from "@/components/QuestionNotification.vue";
|
|||
getQuestionsQuery.refetch(); // Reload the questions
|
||||
},
|
||||
onError: (e) => {
|
||||
console.error(e)
|
||||
console.error(e);
|
||||
},
|
||||
})
|
||||
});
|
||||
} else {
|
||||
alert("Please type a question before submitting.") // TODO: i18n
|
||||
alert("Please type a question before submitting."); // TODO: i18n
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -271,12 +268,18 @@ import QuestionNotification from "@/components/QuestionNotification.vue";
|
|||
:color="COLORS[getNavItemState(node)]"
|
||||
:icon="ICONS[getNavItemState(node)]"
|
||||
></v-icon>
|
||||
</template>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<QuestionNotification :node="node"></QuestionNotification>
|
||||
<div>{{ (node.estimatedTime!).toLocaleString('en-US', {minimumIntegerDigits: 2, useGrouping:false}) }}'</div>
|
||||
<div>
|
||||
{{
|
||||
node.estimatedTime!.toLocaleString("en-US", {
|
||||
minimumIntegerDigits: 2,
|
||||
useGrouping: false,
|
||||
})
|
||||
}}'
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</v-list-item>
|
||||
</template>
|
||||
</using-query-result>
|
||||
|
|
@ -292,7 +295,10 @@ import QuestionNotification from "@/components/QuestionNotification.vue";
|
|||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<div v-if="(authService.authState.activeRole === 'student') && (pathIsAssignment)" class="assignment-indicator">
|
||||
<div
|
||||
v-if="authService.authState.activeRole === 'student' && pathIsAssignment"
|
||||
class="assignment-indicator"
|
||||
>
|
||||
{{ t("assignmentIndicator") }}
|
||||
</div>
|
||||
</v-list-item>
|
||||
|
|
@ -318,17 +324,25 @@ import QuestionNotification from "@/components/QuestionNotification.vue";
|
|||
v-if="currentNode"
|
||||
></learning-object-view>
|
||||
</div>
|
||||
<div v-if="authService.authState.activeRole === 'student' && pathIsAssignment" class="question-box">
|
||||
<div
|
||||
v-if="authService.authState.activeRole === 'student' && pathIsAssignment"
|
||||
class="question-box"
|
||||
>
|
||||
<div class="input-wrapper">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="question : ..."
|
||||
class="question-input"
|
||||
v-model="questionInput"
|
||||
/>
|
||||
<button @click="submitQuestion" class="send-button">▶</button>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="question : ..."
|
||||
class="question-input"
|
||||
v-model="questionInput"
|
||||
/>
|
||||
<button
|
||||
@click="submitQuestion"
|
||||
class="send-button"
|
||||
>
|
||||
▶
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navigation-buttons-container">
|
||||
<v-btn
|
||||
prepend-icon="mdi-chevron-left"
|
||||
|
|
@ -351,7 +365,7 @@ import QuestionNotification from "@/components/QuestionNotification.vue";
|
|||
:query-result="getQuestionsQuery"
|
||||
v-slot="questionsResponse: { data: QuestionsResponse }"
|
||||
>
|
||||
<QandA :questions="questionsResponse.data.questions as QuestionDTO[] ?? []" />
|
||||
<QandA :questions="(questionsResponse.data.questions as QuestionDTO[]) ?? []" />
|
||||
</using-query-result>
|
||||
</using-query-result>
|
||||
</template>
|
||||
|
|
@ -395,58 +409,58 @@ import QuestionNotification from "@/components/QuestionNotification.vue";
|
|||
text-transform: uppercase;
|
||||
z-index: 2; /* Less than modals/popups */
|
||||
}
|
||||
.question-box {
|
||||
.question-box {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
margin: 20px auto;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
.input-wrapper {
|
||||
}
|
||||
.input-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 999px;
|
||||
padding: 8px 12px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.question-input {
|
||||
}
|
||||
|
||||
.question-input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 14px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.question-input::placeholder {
|
||||
}
|
||||
|
||||
.question-input::placeholder {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.send-button {
|
||||
}
|
||||
|
||||
.send-button {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
color: #555;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.send-button:hover {
|
||||
}
|
||||
|
||||
.send-button:hover {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.discussion-link {
|
||||
}
|
||||
|
||||
.discussion-link {
|
||||
margin-top: 8px;
|
||||
font-size: 13px;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.discussion-link a {
|
||||
}
|
||||
|
||||
.discussion-link a {
|
||||
color: #3b82f6; /* blue */
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.discussion-link a:hover {
|
||||
}
|
||||
|
||||
.discussion-link a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue