From 0f8281dcd68b4f74c8dc78dfa5f39e4ff3285325 Mon Sep 17 00:00:00 2001
From: Ion Dormenco <idormenco@gmail.com>
Date: Thu, 14 Dec 2023 11:14:45 +0200
Subject: [PATCH] Update index.tsx (#96)

* Update index.tsx

* small paper cuts
---
 client/src/components/Button/index.tsx              | 5 ++++-
 client/src/components/EvaluationResults/index.jsx   | 3 ++-
 client/src/components/ProgressBar/index.tsx         | 7 ++++++-
 client/src/components/ResultsByDimension/index.tsx  | 5 +++--
 client/src/lib/score.ts                             | 7 +++----
 client/src/pages/Home/index.tsx                     | 2 +-
 client/src/pages/authenticated/Matrix/index.tsx     | 1 -
 client/src/redux/api/types.ts                       | 1 +
 client/src/router/index.tsx                         | 2 ++
 server/src/api/evaluation/controllers/evaluation.js | 6 ++++--
 10 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/client/src/components/Button/index.tsx b/client/src/components/Button/index.tsx
index cf24b02..739b3b2 100644
--- a/client/src/components/Button/index.tsx
+++ b/client/src/components/Button/index.tsx
@@ -4,6 +4,7 @@ import { Link } from "react-router-dom";
 interface IButton {
   children: ReactNode;
   to?: string;
+  openInNewTab?: boolean;
   onClick?: () => void;
   type?: "submit" | "button";
   color?: "teal" | "white";
@@ -19,15 +20,17 @@ const variation = {
 const Button = ({
   children,
   to,
+  openInNewTab,
   onClick,
   type,
   color = "teal",
   disabled,
 }: IButton) => {
   const className = variation[color];
+  const linkProps = openInNewTab ? { target: "_blank", rel: "noopener noreferrer" } : {};
 
   return to ? (
-    <Link to={to} className={className}>
+    <Link to={to} className={className} {...linkProps}>
       {children}
     </Link>
   ) : (
diff --git a/client/src/components/EvaluationResults/index.jsx b/client/src/components/EvaluationResults/index.jsx
index c5246e7..894ccda 100644
--- a/client/src/components/EvaluationResults/index.jsx
+++ b/client/src/components/EvaluationResults/index.jsx
@@ -77,9 +77,10 @@ const EvaluationResults = ({ evaluationData }) => {
               </div>
               {dimensions[dimensionIndex].comment && (
                 <div className="mt-2 text-sm">
-                  Comentariu: {dimensions[dimensionIndex].comment}
+                  <b>Argumentare:</b> {dimensions[dimensionIndex].comment}
                 </div>
               )}
+              <hr/>
             </div>
           </div>
         ))}
diff --git a/client/src/components/ProgressBar/index.tsx b/client/src/components/ProgressBar/index.tsx
index e0963d7..2b8aaaf 100644
--- a/client/src/components/ProgressBar/index.tsx
+++ b/client/src/components/ProgressBar/index.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { Link } from "react-router-dom";
 
 const getColor = (percentage: number) =>
   percentage >= 70
@@ -15,16 +16,20 @@ const getColor = (percentage: number) =>
 
 const ProgressBar = ({
   label,
+  link,
   percentage,
 }: {
   label: string;
+  link: string;
   percentage: number;
 }) => {
   const color = getColor(percentage);
   return (
     <div>
       <div className="flex justify-between mb-2">
-        <div className="text-lg">{label}</div>
+        <Link className="text-lg hover:underline" to={link} target="_blank" rel="noopener noreferrer">
+          {label}
+        </Link>
         <div
           className={`text-sm`}
           style={{ color: percentage >= 50 ? "#047B7D" : "#D95040" }}
diff --git a/client/src/components/ResultsByDimension/index.tsx b/client/src/components/ResultsByDimension/index.tsx
index db80f65..5fbfded 100644
--- a/client/src/components/ResultsByDimension/index.tsx
+++ b/client/src/components/ResultsByDimension/index.tsx
@@ -9,6 +9,7 @@ const ResultsByDimension = ({
   scoreByEvaluation: {
     id: string;
     name: string;
+    link: string;
     score: number;
     tags: string[];
   }[];
@@ -19,10 +20,10 @@ const ResultsByDimension = ({
         <div className="font-medium text-lg">Rezultate pe dimensiuni</div>
       </div>
       <div className="space-y-6">
-        {scoreByEvaluation?.map(({ id, name, score, tags }, i) => (
+        {scoreByEvaluation?.map(({ id, name, link, score, tags }, i) => (
           <div key={id} className="flex space-x-12 items-end">
             <div className="md:w-1/2">
-              <ProgressBar label={name} percentage={score} />
+              <ProgressBar label={name} link={link} percentage={score} />
             </div>
             <div className="md:w-1/2 flex space-x-4 text-sm">
               {score < 50 ? <img src={badIcon} /> : <img src={goodIcon} />}
diff --git a/client/src/lib/score.ts b/client/src/lib/score.ts
index a2a5cc5..438f8f4 100644
--- a/client/src/lib/score.ts
+++ b/client/src/lib/score.ts
@@ -48,8 +48,8 @@ export const calcScore = (evaluations) => {
 };
 
 export const calcScoreByDimension = ({
-  evaluationsCompleted,
   matrix,
+  evaluationsCompleted,
 }: {
   evaluationsCompleted: Evaluation[];
   matrix: Matrix;
@@ -93,9 +93,7 @@ export const calcScoreByDimension = ({
       const score = Math.floor(
         (object[index].score * 25) / evaluationsCompleted.length
       );
-      const quiz1 = Math.floor(
-        (object[index].option1 * 25) / evaluationsCompleted.length
-      );
+ 
       const tags = [
         {
           quiz: matrix[index].quiz[0].tag,
@@ -122,6 +120,7 @@ export const calcScoreByDimension = ({
       return {
         id: index,
         name: matrix[index].name,
+        link: matrix[index].link,
         score: score,
         tags:
           score >= 50
diff --git a/client/src/pages/Home/index.tsx b/client/src/pages/Home/index.tsx
index 26c0d6e..1626210 100644
--- a/client/src/pages/Home/index.tsx
+++ b/client/src/pages/Home/index.tsx
@@ -24,7 +24,7 @@ const Home = () => {
       <Section>
         <div className={"flex justify-between space-y-2"}>
           <Heading level={"h2"}>Evaluare organizațională</Heading>
-          <Button to="/matrix">Vezi matricea</Button>
+          <Button to="/matrix" openInNewTab={true}>Vezi matricea</Button>
         </div>
       </Section>
       {!hasReports && (
diff --git a/client/src/pages/authenticated/Matrix/index.tsx b/client/src/pages/authenticated/Matrix/index.tsx
index 278572f..cc763a4 100644
--- a/client/src/pages/authenticated/Matrix/index.tsx
+++ b/client/src/pages/authenticated/Matrix/index.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import Matrix from "@/components/Matrix";
 
 const Home = () => <Matrix />;
diff --git a/client/src/redux/api/types.ts b/client/src/redux/api/types.ts
index bf54fb3..1c4d410 100644
--- a/client/src/redux/api/types.ts
+++ b/client/src/redux/api/types.ts
@@ -77,6 +77,7 @@ export interface Dimension {
   id: number | string;
   quiz: Question[];
   name: string;
+  link: string;
 }
 
 export interface Evaluation {
diff --git a/client/src/router/index.tsx b/client/src/router/index.tsx
index 92f0444..903a1a1 100644
--- a/client/src/router/index.tsx
+++ b/client/src/router/index.tsx
@@ -35,6 +35,7 @@ import CreateUser from "@/pages/admin/CreateUser";
 import MentorReport from "@/pages/mentor/Report";
 import OngEditProfile from "@/pages/authenticated/EditProfile";
 import AuthenticatedMatrix from "@/pages/authenticated/Matrix";
+import Matrix from "@/components/Matrix";
 
 const Router = () => {
   const user = useAppSelector((state) => state.userState.user);
@@ -88,6 +89,7 @@ const Router = () => {
           <Route path="/forgot-password" element={<ForgotPassword />} />
           <Route path="/reset-password" element={<ResetPassword />} />
           <Route path="/confirm-email" element={<SetPassword />} />
+          <Route path="/matrix" element={<Matrix />} />
         </Route>
       )}
       <Route path="*" element={<Navigate to="/" />} />
diff --git a/server/src/api/evaluation/controllers/evaluation.js b/server/src/api/evaluation/controllers/evaluation.js
index 8578f2d..e89e919 100644
--- a/server/src/api/evaluation/controllers/evaluation.js
+++ b/server/src/api/evaluation/controllers/evaluation.js
@@ -67,8 +67,10 @@ module.exports = createCoreController(
               ""
             )}${
               dimensions[dimensionIndex]?.comment &&
-              `<p>Comentariu: ${dimensions[dimensionIndex]?.comment}</p>`
-            }`;
+              `<p><b>Argumentare:</b> ${dimensions[dimensionIndex]?.comment}</p>`
+            }
+            <hr>
+            `;
           },
           ""
         );