From 0d6548216a0f1464b7d92f3830bb807ce3d3aec4 Mon Sep 17 00:00:00 2001
From: Lencodes <contact@lencodes.com>
Date: Tue, 7 Nov 2023 14:26:46 +0100
Subject: [PATCH] UPDATE rating component to table

---
 .../ComponentsDetailTemplate.module.css       |  5 +-
 .../ComponentsDetailTemplate.tsx              | 14 +--
 .../ratingOverview/RatingOverview.module.css  | 13 +--
 .../ratingOverview/RatingOverview.tsx         | 88 ++++++++++---------
 4 files changed, 65 insertions(+), 55 deletions(-)

diff --git a/pwa/src/templates/componentDetail/ComponentsDetailTemplate.module.css b/pwa/src/templates/componentDetail/ComponentsDetailTemplate.module.css
index d132b2c2e..73370730a 100644
--- a/pwa/src/templates/componentDetail/ComponentsDetailTemplate.module.css
+++ b/pwa/src/templates/componentDetail/ComponentsDetailTemplate.module.css
@@ -149,11 +149,10 @@
 .popup {
   position: fixed;
   max-width: var(--web-app-download-popup-width);
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
   z-index: 700;
   outline: 0;
+  top: 50px;
+  left: 25%;
 }
 
 .organizations {
diff --git a/pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx b/pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx
index 354ca8fcd..756624dba 100644
--- a/pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx
+++ b/pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx
@@ -63,6 +63,8 @@ export const ComponentsDetailTemplate: React.FC<ComponentsDetailTemplateProps> =
   const _useComponent = useComponent(queryClient);
   const _getComponent = _useComponent.getOne(componentId);
 
+  const rating = _getComponent.data?.embedded?.rating;
+
   const layer: TCategories = t(_.upperFirst(_getComponent.data?.embedded?.nl?.embedded?.commonground.layerType));
   const _categories =
     layer &&
@@ -253,8 +255,8 @@ export const ComponentsDetailTemplate: React.FC<ComponentsDetailTemplateProps> =
                     <>
                       <RatingIndicatorTemplate
                         layoutClassName={styles.ratingIndicatorContainer}
-                        maxRating={_getComponent.data.embedded?.rating?.maxRating}
-                        rating={_getComponent.data.embedded?.rating?.rating}
+                        maxRating={rating.maxRating}
+                        rating={rating.rating}
                       />
                       <span className={styles.link}>
                         <Link onClick={show}>
@@ -266,9 +268,7 @@ export const ComponentsDetailTemplate: React.FC<ComponentsDetailTemplateProps> =
                       </span>
                     </>
                   )}
-                  {!_getComponent.data.embedded?.rating && (
-                    <div className={styles.noRatingStyle}>{t("No rating available")}</div>
-                  )}
+                  {!rating && <div className={styles.noRatingStyle}>{t("No rating available")}</div>}
                 </>
               }
               layoutClassName={styles.infoCard}
@@ -277,8 +277,8 @@ export const ComponentsDetailTemplate: React.FC<ComponentsDetailTemplateProps> =
               <div className={styles.overlay}>
                 <NotificationPopUp
                   {...{ hide, isVisible }}
-                  title="Rating"
-                  description={<RatingOverview getComponent={_getComponent} />}
+                  title={`Rating (${rating?.rating}/${rating?.maxRating})`}
+                  description={<RatingOverview {...{ rating }} />}
                   primaryButton={{
                     label: t("Score calculation"),
                     handleClick: () => {
diff --git a/pwa/src/templates/templateParts/ratingOverview/RatingOverview.module.css b/pwa/src/templates/templateParts/ratingOverview/RatingOverview.module.css
index b7fbc3aba..597e79acd 100644
--- a/pwa/src/templates/templateParts/ratingOverview/RatingOverview.module.css
+++ b/pwa/src/templates/templateParts/ratingOverview/RatingOverview.module.css
@@ -1,8 +1,11 @@
-.popupDescription {
-  max-height: 500px;
-  overflow: auto;
+.container {
+  display: block;
+  max-height: 60vh;
+  overflow-y: scroll;
 }
 
-ul {
-  list-style-type: none;
+.header {
+  top: 0;
+  position: sticky;
+  background-color: var(--web-app-color-grey) !important;
 }
diff --git a/pwa/src/templates/templateParts/ratingOverview/RatingOverview.tsx b/pwa/src/templates/templateParts/ratingOverview/RatingOverview.tsx
index 449c2b08d..d4d16448b 100644
--- a/pwa/src/templates/templateParts/ratingOverview/RatingOverview.tsx
+++ b/pwa/src/templates/templateParts/ratingOverview/RatingOverview.tsx
@@ -1,51 +1,59 @@
 import * as React from "react";
 import * as styles from "./RatingOverview.module.css";
-import { QueryObserverSuccessResult } from "react-query";
-import { t } from "i18next";
-import { UnorderedList } from "@utrecht/component-library-react/dist/css-module";
+import {
+  StatusBadge,
+  Table,
+  TableBody,
+  TableCell,
+  TableHeader,
+  TableHeaderCell,
+  TableRow,
+} from "@utrecht/component-library-react";
 
 interface RatingOverviewProps {
-  getComponent: QueryObserverSuccessResult<any, Error>;
+  rating: any;
 }
 
-export const RatingOverview: React.FC<RatingOverviewProps> = ({ getComponent }) => {
-  return (
-    <>
-      {getComponent.data.embedded?.rating?.rating && (
-        <span>{`${getComponent.data.embedded?.rating?.rating}/${getComponent.data.embedded?.rating?.maxRating}`}</span>
-      )}
-      {!getComponent.data.embedded?.rating?.rating && <span>{t("No rating available")}</span>}
+export const RatingOverview: React.FC<RatingOverviewProps> = ({ rating }) => {
+  const [acceptedRatings, setAcceptedRatings] = React.useState<string[]>([]);
+  const [rejectedRatings, setRejectedRatings] = React.useState<string[]>([]);
+
+  React.useEffect(() => {
+    setAcceptedRatings(rating.results.filter((rating: string) => !rating.includes("Cannot rate the")));
+    setRejectedRatings(rating.results.filter((rating: string) => rating.includes("Cannot rate the")));
+  }, [rating]);
 
-      <div className={styles.popupDescription}>
-        <UnorderedList>
-          {getComponent.data.embedded?.rating?.rating >= 1 && (
-            <>
-              <li>Behaalde punten</li>
+  return (
+    <Table className={styles.container}>
+      <TableHeader className={styles.header}>
+        <TableRow>
+          <TableHeaderCell>Status</TableHeaderCell>
+          <TableHeaderCell>Message</TableHeaderCell>
+          <TableHeaderCell>Points</TableHeaderCell>
+        </TableRow>
+      </TableHeader>
 
-              {getComponent.data.embedded?.rating?.results
-                .filter((result: string) => !/^Cannot rate the/.test(result))
-                .map((result: string) => (
-                  <ul>
-                    <li>{result}</li>
-                  </ul>
-                ))}
-            </>
-          )}
-          {getComponent.data.embedded?.rating?.rating !== getComponent.data.embedded?.rating?.maxRating && (
-            <>
-              <li>Onbehaalde punten</li>
+      <TableBody>
+        {acceptedRatings.map((acceptedRating, idx) => (
+          <TableRow key={idx}>
+            <TableCell>
+              <StatusBadge status="safe">Passed</StatusBadge>
+            </TableCell>
+            <TableCell>{acceptedRating}</TableCell>
+            <TableCell>1</TableCell>
+          </TableRow>
+        ))}
 
-              {getComponent.data.embedded?.rating?.results
-                .filter((result: string) => /^Cannot rate the/.test(result))
-                .map((result: string) => (
-                  <ul>
-                    <li>{result}</li>
-                  </ul>
-                ))}
-            </>
-          )}
-        </UnorderedList>
-      </div>
-    </>
+        {rejectedRatings.map((rejectedRating, idx) => (
+          <TableRow key={idx}>
+            <TableCell>
+              <StatusBadge status="danger">Failed</StatusBadge>
+            </TableCell>
+            <TableCell>{rejectedRating}</TableCell>
+            <TableCell>0</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
   );
 };