From dba2b2426757ca7a1c62c7895db8c38b4cfb48da Mon Sep 17 00:00:00 2001
From: adam-skowronek <adasko8@st.amu.edu.pl>
Date: Tue, 17 Jan 2023 00:40:02 +0100
Subject: [PATCH] Update GradeCard styles, add points sum

---
 frontend/src/views/GradeCard.module.css       |  9 +++
 frontend/src/views/GradeCard.tsx              | 67 +++++++++++++------
 .../views/coordinator/CoordinatorGroups.tsx   |  6 +-
 3 files changed, 58 insertions(+), 24 deletions(-)

diff --git a/frontend/src/views/GradeCard.module.css b/frontend/src/views/GradeCard.module.css
index 1b47403..9522443 100644
--- a/frontend/src/views/GradeCard.module.css
+++ b/frontend/src/views/GradeCard.module.css
@@ -11,3 +11,12 @@
   text-align: center;
   width: 100px;
 }
+
+.small-row td {
+  padding: 0.2rem;
+  padding-left: 1rem;
+}
+
+.row-required td {
+  background-color: #fff2cc;
+}
diff --git a/frontend/src/views/GradeCard.tsx b/frontend/src/views/GradeCard.tsx
index 125cec5..bc86880 100644
--- a/frontend/src/views/GradeCard.tsx
+++ b/frontend/src/views/GradeCard.tsx
@@ -8,11 +8,12 @@ import {
   updateGradesFirstTerm,
   updateGradesSecondTerm,
 } from '../api/grades'
+import { getGroup } from '../api/groups'
 import { gradeOptions } from '../utils/gradeCard'
 import styles from './GradeCard.module.css'
 
 const GradeCard = () => {
-  const { handleSubmit, setValue, control } = useForm()
+  const { handleSubmit, setValue, control, watch, getValues } = useForm()
   const { id } = useParams<{ id: string }>()
   const [supervisorId] = useLocalStorageState('userId')
 
@@ -39,18 +40,23 @@ const GradeCard = () => {
       },
     },
   )
+  const {
+    data: groupDetails,
+    refetch: refetchGroup,
+    isLoading: isGroupLoading,
+  } = useQuery(['getGroup', id], () => getGroup(Number(id)))
 
-  const { mutate: mutateGradesFirstTerm } = useMutation(
+  const { mutateAsync: mutateGradesFirstTerm } = useMutation(
     'update_grades_first',
     (payload: any) => updateGradesFirstTerm(1, 1, payload),
   )
 
-  const { mutate: mutateGradesSecondTerm } = useMutation(
+  const { mutateAsync: mutateGradesSecondTerm } = useMutation(
     'update_grades_second',
     (payload: any) => updateGradesSecondTerm(1, 1, payload),
   )
 
-  const onSubmit = (data: any) => {
+  const onSubmit = async (data: any) => {
     let firstTermGrades: { [key: string]: any } = {}
     let secondTermGrades: { [key: string]: any } = {}
     for (const [key, value] of Object.entries(data)) {
@@ -60,8 +66,9 @@ const GradeCard = () => {
         secondTermGrades[key] = Number(value)
       }
     }
-    mutateGradesFirstTerm(firstTermGrades)
-    mutateGradesSecondTerm(secondTermGrades)
+    await mutateGradesFirstTerm(firstTermGrades)
+    await mutateGradesSecondTerm(secondTermGrades)
+    refetchGroup()
   }
   // const data = useWatch(getValues())
 
@@ -146,13 +153,29 @@ const GradeCard = () => {
     }
   }
 
+  const SumRow = () => {
+    return (
+      <tr className={styles['small-row']}>
+        <td>
+          <span>Suma uzyskanych punktów:</span>
+        </td>
+        <td className="text-center font-bold">
+          {groupDetails?.data?.points_for_first_term}%
+        </td>
+        <td className="text-center font-bold">
+          {groupDetails?.data?.points_for_second_term}%
+        </td>
+      </tr>
+    )
+  }
+
   return (
     <div className={styles['grade-table']}>
-      <form onSubmit={handleSubmit(onSubmit)}>
+      <form onSubmit={handleSubmit(onSubmit)} className="overflow-x-scroll">
         {/* <div className="flex justify-end">
           <button className="btn btn-success mb-2">ZAPISZ</button>
         </div> */}
-        <table className=" table-normal border-collapse">
+        <table className="md:table-normal table-compact border-collapse">
           <thead>
             <tr>
               <th>Kryterium</th>
@@ -161,15 +184,16 @@ const GradeCard = () => {
             </tr>
           </thead>
           <tbody>
-            <tr>
+            <SumRow />
+            <tr className={styles['small-row']}>
               <td>
                 <h3 className="text-xl font-bold">Prezentacja</h3>
               </td>
 
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
+              <td></td>
+              <td></td>
             </tr>
-            <tr>
+            <tr className={styles['row-required']}>
               <td>
                 Czy prezentacja zawierała wszystkie wymagane treści (cel i
                 założenia projektowe, podział prac na semestry, przegląd
@@ -221,7 +245,7 @@ const GradeCard = () => {
                 />
               </td>
             </tr>
-            <tr>
+            <tr className={styles['row-required']}>
               <td>
                 Czy prezentacja (omówienie projektu i jego demonstracja) była
                 przeprowadzona zgodnie ze sztuką? (oceniane podczas obrony
@@ -271,7 +295,7 @@ const GradeCard = () => {
                 />
               </td>
             </tr>
-            <tr>
+            <tr className={styles['row-required']}>
               <td>
                 Demonstracja systemu * (oceniane podczas obrony semestralnej)
               </td>
@@ -319,7 +343,7 @@ const GradeCard = () => {
                 />
               </td>
             </tr>
-            <tr>
+            <tr className={styles['row-required']}>
               <td>
                 Odpowiedzi na pytania komisji (oceniane podczas obrony
                 semestralnej)
@@ -369,7 +393,7 @@ const GradeCard = () => {
               </td>
             </tr>
             {/*  */}
-            <tr>
+            <tr className={styles['small-row']}>
               <td>
                 {' '}
                 <h3 className="text-xl font-bold">Dokumentacja</h3>
@@ -609,7 +633,7 @@ const GradeCard = () => {
               </td>
             </tr>
             {/*  */}
-            <tr>
+            <tr className={styles['small-row']}>
               <td>
                 {' '}
                 <h3 className="text-xl font-bold">Praca grupy w semestrze</h3>
@@ -942,7 +966,7 @@ const GradeCard = () => {
               </td>
             </tr>
             {/*  */}
-            <tr>
+            <tr className={styles['small-row']}>
               <td>
                 {' '}
                 <h3 className="text-xl font-bold">Produkty projektu</h3>
@@ -1000,7 +1024,7 @@ const GradeCard = () => {
                 />
               </td>
             </tr>
-            <tr>
+            <tr className={styles['row-required']}>
               <td>
                 Dostęp do produktu projektu dla komisji do testów podczas
                 prezentacji * (obowiązkowe w II sem) (oceniane podczas obrony
@@ -1050,7 +1074,7 @@ const GradeCard = () => {
                 />
               </td>
             </tr>
-            <tr>
+            <tr className={styles['row-required']}>
               <td>
                 Brak krytycznych błędów w tym: bezpieczeństwa oraz
                 uniemożliwiających korzystanie z systemu * (oceniane podczas
@@ -1100,7 +1124,7 @@ const GradeCard = () => {
                 />
               </td>
             </tr>
-            <tr>
+            <tr className={styles['row-required']}>
               <td>
                 Dostęp do produktu projektu dla komisji do testów tydzień przed
                 prezentacją (oceniane podczas obrony semestralnej)
@@ -1531,6 +1555,7 @@ const GradeCard = () => {
                 />
               </td>
             </tr>
+            <SumRow />
           </tbody>
         </table>
         {/* <div className="flex justify-end">
diff --git a/frontend/src/views/coordinator/CoordinatorGroups.tsx b/frontend/src/views/coordinator/CoordinatorGroups.tsx
index b422d4b..ecf9fa0 100644
--- a/frontend/src/views/coordinator/CoordinatorGroups.tsx
+++ b/frontend/src/views/coordinator/CoordinatorGroups.tsx
@@ -90,7 +90,7 @@ const Groups = () => {
             <tr className="bg-gray-50">
               <th>Nazwa</th>
               <th>Opiekun</th>
-              <th>Semestr 1</th>
+              <th>Punkty semestr 1</th>
               <th>Semestr 2</th>
               <th></th>
             </tr>
@@ -120,8 +120,8 @@ const Groups = () => {
                   <td>
                     {`${project_supervisor.first_name} ${project_supervisor.last_name}`}
                   </td>
-                  <td>{points_for_first_term}</td>
-                  <td>{points_for_second_term}</td>
+                  <td>{points_for_first_term}%</td>
+                  <td>{points_for_second_term}%</td>
                   <td>
                     <div className="flex align-center gap-2">
                       <Link