style: fix linting issues met Prettier

frontend/src/components/QandA.vue

@@ -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>

frontend/src/components/QuestionNotification.vue

@@ -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>

frontend/src/components/SingleQuestion.vue

@@ -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>