fix: feedback serializer and frontend model (#477)

SELab-2 · May 24, 2024 · 7165746 · 7165746
1 parent 61c07ed
commit 7165746
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 59 deletions.
diff --git a/backend/api/views/submission_view.py b/backend/api/views/submission_view.py
@@ -52,11 +52,8 @@ def _add_feedback(self, request, **_) -> Response:
         serializer = FeedbackSerializer(data=request.data, context=context)
 
         if serializer.is_valid():
-            serializer.save(submission=submission)
-            return Response({
-                "message": "Success",
-                "feedback": serializer.data
-            })
+            serializer.save(submission=submission, author=request.user)
+            return Response(serializer.data)
 
         return Response(serializer.errors, status=400)
 

diff --git a/frontend/src/components/projects/ProjectList.vue b/frontend/src/components/projects/ProjectList.vue
@@ -66,17 +66,17 @@ const incomingProjects = computed<Project[]>(() => {
 
 <template>
     <div>
-        <!-- Show past projects switch -->
-        <div class="p-4 surface-100 inline-block mb-5">
-            <div class="flex gap-3 align-items-center">
-                <Checkbox input-id="show-past" v-model="showPast" binary />
-                <label for="show-past">
-                    {{ t('components.list.showPastProjects') }}
-                </label>
-            </div>
-        </div>
         <!-- Project list -->
         <template v-if="sortedProjects.length > 0">
+            <!-- Show past projects switch -->
+            <div class="p-4 surface-100 inline-block mb-5">
+                <div class="flex gap-3 align-items-center">
+                    <Checkbox input-id="show-past" v-model="showPast" binary />
+                    <label for="show-past">
+                        {{ t('components.list.showPastProjects') }}
+                    </label>
+                </div>
+            </div>
             <div class="grid nested-grid">
                 <div class="col-12 md:col-5">
                     <h2 class="mt-0">

diff --git a/frontend/src/components/submissions/AllSubmission.vue b/frontend/src/components/submissions/AllSubmission.vue
@@ -124,11 +124,6 @@ const navigateToSubmission = (submissionId: string): void => {
     }
 
     .status {
-        &.passed {
-            background-color: var(--bg-primary);
-            color: var(--primary-color-text);
-        }
-
         &.failed-structure {
             background-color: indianred;
             color: white;
@@ -137,6 +132,11 @@ const navigateToSubmission = (submissionId: string): void => {
         &.failed-extra:not(.failed-structure) {
             background-color: var(--secondary-color);
         }
+
+        &.passed {
+            background-color: var(--primary-color);
+            color: var(--primary-color-text);
+        }
     }
 }
 </style>
diff --git a/frontend/src/types/Feedback.ts b/frontend/src/types/Feedback.ts
@@ -1,12 +1,13 @@
 import { User } from '@/types/users/User.ts';
 import { Submission } from '@/types/submission/Submission.ts';
 import { type HyperlinkedRelation } from '@/types/ApiResponse.ts';
+import { Teacher, type TeacherJSON } from '@/types/users/Teacher.ts';
 
 export interface FeedbackJSON {
     id: string;
     message: string;
     creation_date: string;
-    author: HyperlinkedRelation;
+    author: TeacherJSON;
     submission: HyperlinkedRelation;
 }
 
@@ -20,6 +21,6 @@ export class Feedback {
     ) {}
 
     static fromJSON(data: FeedbackJSON): Feedback {
-        return new Feedback(data.id, data.message, new Date(data.creation_date));
+        return new Feedback(data.id, data.message, new Date(data.creation_date), Teacher.fromJSON(data.author));
     }
 }
diff --git a/frontend/src/views/submissions/SubmissionView.vue b/frontend/src/views/submissions/SubmissionView.vue
@@ -36,18 +36,22 @@ function editFeedback(feedback: Feedback): void {
 }
 
 /**
- * Submit feedback depending if the feedback is being edited or created
+ * Submit feedback depending on if the feedback is being edited or created
  */
-function submitFeedback(): void {
-    if (editedFeedback.value === null) {
-        createFeedback(feedbackTextValue.value, route.params.submissionId as string);
-        feedbackTextValue.value = '';
-    } else {
-        updateFeedback(feedbackTextValue.value, editedFeedback.value.id);
-        feedbackTextValue.value = '';
-        editedFeedback.value = null;
+async function submitFeedback(): Promise<void> {
+    try {
+        if (editedFeedback.value === null) {
+            await createFeedback(feedbackTextValue.value, route.params.submissionId as string);
+            feedbackTextValue.value = '';
+        } else {
+            await updateFeedback(feedbackTextValue.value, editedFeedback.value.id);
+            feedbackTextValue.value = '';
+            editedFeedback.value = null;
+        }
+        await getFeedbackBySubmission(route.params.submissionId as string);
+    } catch (e) {
+        console.error(e);
     }
-    getFeedbackBySubmission(route.params.submissionId as string);
 }
 
 /* Computed Properties */
@@ -154,7 +158,7 @@ watch(
                 </div>
             </div>
             <!-- Feedback section -->
-            <div class="col-8 md:col-7">
+            <div class="col-12 md:col-7">
                 <!-- Written Feedback overview -->
                 <div class="feedback-section mb-3">
                     <Title class="flex mb-3">Feedback</Title>
@@ -184,15 +188,15 @@ watch(
                             <p class="feedback-message">{{ feedback.message }}</p>
                         </div>
                     </div>
-                    <p v-else class="pt-2 pl-2">{{ t('views.submissions.feedback.noFeedback') }}</p>
+                    <p v-else class="pt-2">{{ t('views.submissions.feedback.noFeedback') }}</p>
                 </div>
                 <!-- Write feedback -->
                 <div v-if="user?.isTeacher()">
                     <form @submit.prevent="submitFeedback">
                         <Textarea
                             id="feedback"
                             v-model="feedbackTextValue"
-                            class="w-full"
+                            class="w-full h-10rem"
                             :placeholder="t('views.submissions.feedback.writeFeedback')"
                         />
                         <Button
@@ -208,28 +212,4 @@ watch(
     </BaseLayout>
 </template>
 
-<style scoped lang="scss">
-.p-inputtextarea {
-    width: 100%;
-    height: 8rem;
-}
-.feedback-section {
-    border-bottom: 4px solid var(--primary-color);
-}
-.feedback-header {
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-    margin-bottom: 0.25rem;
-}
-.feedback-header-wrap {
-    border-bottom: 1px solid lightgray;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-.feedback-message {
-    word-wrap: break-word;
-    overflow-wrap: break-word;
-    width: 100%;
-}
-</style>
+<style scoped lang="scss"></style>