Merge pull request #191 from ConductionNL/Feature/XW-123/category-and…

…-organisation Feature/XW-123/category-and-organisation
ConductionNL · Nov 28, 2023 · 752e167 · 752e167
2 parents 2cb9a80 + 0fe23c5
commit 752e167
Show file tree

Hide file tree

Showing 32 changed files with 2,831 additions and 4,471 deletions.
diff --git a/pwa/package-lock.json b/pwa/package-lock.json
diff --git a/pwa/package.json b/pwa/package.json
@@ -24,86 +24,86 @@
   "dependencies": {
     "@conduction/components": "2.2.36",
     "@conduction/theme": "1.0.55",
-    "@fortawesome/fontawesome-svg-core": "^6.1.1",
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/free-brands-svg-icons": "6.4.2",
     "@fortawesome/free-regular-svg-icons": "6.4.2",
-    "@fortawesome/free-solid-svg-icons": "^6.4.0",
-    "@fortawesome/react-fontawesome": "^0.1.18",
-    "@nl-design-system-unstable/amsterdam-design-tokens": "^1.0.0-alpha.107",
-    "@nl-design-system-unstable/bodegraven-reeuwijk-design-tokens": "^1.0.0-alpha.100",
-    "@nl-design-system-unstable/borne-design-tokens": "^1.0.0-alpha.100",
-    "@nl-design-system-unstable/buren-design-tokens": "^1.0.0-alpha.83",
-    "@nl-design-system-unstable/demodam-design-tokens": "^1.0.0-alpha.95",
-    "@nl-design-system-unstable/drechterland-design-tokens": "^1.0.0-alpha.100",
-    "@nl-design-system-unstable/duiven-design-tokens": "^1.0.0-alpha.100",
-    "@nl-design-system-unstable/duo-design-tokens": "^1.0.0-alpha.100",
-    "@nl-design-system-unstable/enkhuizen-design-tokens": "^1.0.0-alpha.100",
-    "@nl-design-system-unstable/groningen-design-tokens": "^1.0.0-alpha.100",
-    "@nl-design-system-unstable/haarlem-design-tokens": "^1.0.0-alpha.107",
-    "@nl-design-system-unstable/haarlemmermeer-design-tokens": "^1.0.0-alpha.100",
-    "@nl-design-system-unstable/hoorn-design-tokens": "^1.0.0-alpha.96",
-    "@nl-design-system-unstable/horstaandemaas-design-tokens": "^1.0.0-alpha.100",
-    "@nl-design-system-unstable/leidschendam-voorburg-design-tokens": "^1.0.0-alpha.100",
-    "@nl-design-system-unstable/nijmegen-design-tokens": "^1.0.0-alpha.95",
-    "@nl-design-system-unstable/noordoostpolder-design-tokens": "^1.0.0-alpha.100",
-    "@nl-design-system-unstable/provincie-zuid-holland-design-tokens": "^1.0.0-alpha.100",
-    "@nl-design-system-unstable/rotterdam-design-tokens": "^1.0.0-alpha.100",
-    "@nl-design-system-unstable/stedebroec-design-tokens": "^1.0.0-alpha.100",
-    "@nl-design-system-unstable/tilburg-design-tokens": "^1.0.0-alpha.100",
-    "@nl-design-system-unstable/venray-design-tokens": "^1.0.0-alpha.100",
-    "@nl-design-system-unstable/vught-design-tokens": "^1.0.0-alpha.100",
-    "@nl-design-system-unstable/westervoort-design-tokens": "^1.0.0-alpha.100",
-    "@nl-design-system-unstable/zevenaar-design-tokens": "^1.0.0-alpha.100",
-    "@nl-design-system-unstable/zwolle-design-tokens": "^1.0.0-alpha.100",
-    "@tabler/icons-react": "2.21.0",
-    "@types/qs": "^6.9.9",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
-    "@utrecht/component-library-react": "^1.0.0-alpha.394",
-    "@utrecht/design-tokens": "^1.0.0-alpha.524",
-    "axios": "^0.25.0",
-    "clsx": "^1.1.1",
+    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@nl-design-system-unstable/amsterdam-design-tokens": "^1.0.0-alpha.128",
+    "@nl-design-system-unstable/bodegraven-reeuwijk-design-tokens": "^1.0.0-alpha.121",
+    "@nl-design-system-unstable/borne-design-tokens": "^1.0.0-alpha.121",
+    "@nl-design-system-unstable/buren-design-tokens": "^1.0.0-alpha.104",
+    "@nl-design-system-unstable/demodam-design-tokens": "^1.0.0-alpha.116",
+    "@nl-design-system-unstable/drechterland-design-tokens": "^1.0.0-alpha.121",
+    "@nl-design-system-unstable/duiven-design-tokens": "^1.0.0-alpha.121",
+    "@nl-design-system-unstable/duo-design-tokens": "^1.0.0-alpha.121",
+    "@nl-design-system-unstable/enkhuizen-design-tokens": "^1.0.0-alpha.121",
+    "@nl-design-system-unstable/groningen-design-tokens": "^1.0.0-alpha.121",
+    "@nl-design-system-unstable/haarlem-design-tokens": "^1.0.0-alpha.128",
+    "@nl-design-system-unstable/haarlemmermeer-design-tokens": "^1.0.0-alpha.121",
+    "@nl-design-system-unstable/hoorn-design-tokens": "^1.0.0-alpha.117",
+    "@nl-design-system-unstable/horstaandemaas-design-tokens": "^1.0.0-alpha.121",
+    "@nl-design-system-unstable/leidschendam-voorburg-design-tokens": "^1.0.0-alpha.121",
+    "@nl-design-system-unstable/nijmegen-design-tokens": "^1.0.0-alpha.116",
+    "@nl-design-system-unstable/noordoostpolder-design-tokens": "^1.0.0-alpha.121",
+    "@nl-design-system-unstable/provincie-zuid-holland-design-tokens": "^1.0.0-alpha.121",
+    "@nl-design-system-unstable/rotterdam-design-tokens": "^1.0.0-alpha.121",
+    "@nl-design-system-unstable/stedebroec-design-tokens": "^1.0.0-alpha.121",
+    "@nl-design-system-unstable/tilburg-design-tokens": "^1.0.0-alpha.121",
+    "@nl-design-system-unstable/venray-design-tokens": "^1.0.0-alpha.121",
+    "@nl-design-system-unstable/vught-design-tokens": "^1.0.0-alpha.121",
+    "@nl-design-system-unstable/westervoort-design-tokens": "^1.0.0-alpha.121",
+    "@nl-design-system-unstable/zevenaar-design-tokens": "^1.0.0-alpha.121",
+    "@nl-design-system-unstable/zwolle-design-tokens": "^1.0.0-alpha.121",
+    "@tabler/icons-react": "2.42.0",
+    "@types/qs": "^6.9.10",
+    "@types/react": "^18.2.39",
+    "@types/react-dom": "^18.2.17",
+    "@utrecht/component-library-react": "^2.0.0",
+    "@utrecht/design-tokens": "^1.0.0-alpha.607",
+    "axios": "^1.6.2",
+    "clsx": "^2.0.0",
     "dateformat": "^5.0.3",
-    "dedent": "^0.7.0",
-    "gatsby": "^4.25.7",
-    "gatsby-plugin-breadcrumb": "^12.3.1",
-    "gatsby-plugin-layout": "^3.11.0",
-    "html-react-parser": "^4.0.0",
-    "i18next": "^21.6.16",
-    "jwt-decode": "^3.1.2",
+    "dedent": "^1.5.1",
+    "gatsby": "^5.12.11",
+    "gatsby-plugin-breadcrumb": "^12.3.2",
+    "gatsby-plugin-layout": "^4.12.0",
+    "html-react-parser": "^5.0.6",
+    "i18next": "^23.7.6",
+    "jwt-decode": "^4.0.0",
     "lodash": "^4.17.21",
     "qs": "^6.11.2",
     "react": "^18.2.0",
     "react-collapsible": "^2.10.0",
     "react-dom": "^18.2.0",
-    "react-favicon": "^1.0.1",
+    "react-favicon": "^2.0.3",
     "react-helmet": "^6.1.0",
     "react-hook-form": "7.48.2",
     "react-hot-toast": "^2.4.1",
-    "react-i18next": "^11.16.6",
-    "react-loading-skeleton": "^3.1.0",
-    "react-paginate": "^8.1.4",
-    "react-query": "^3.34.19",
-    "react-select": "^5.3.2",
+    "react-i18next": "^13.5.0",
+    "react-loading-skeleton": "^3.3.1",
+    "react-paginate": "^8.2.0",
+    "react-query": "^3.39.3",
+    "react-select": "^5.8.0",
     "showdown": "^2.1.0"
   },
   "devDependencies": {
     "@parcel/watcher": "^2.3.0",
-    "@types/dateformat": "^5.0.0",
-    "@types/dedent": "^0.7.0",
-    "@types/node": "^17.0.23",
-    "@types/react-helmet": "^6.1.5",
-    "@types/showdown": "2.0.3",
-    "@typescript-eslint/eslint-plugin": "^5.55.0",
-    "@typescript-eslint/parser": "^5.55.0",
-    "eslint": "^8.36.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-react": "^7.32.2",
-    "gh-pages": "^5.0.0",
+    "@types/dateformat": "^5.0.2",
+    "@types/dedent": "^0.7.2",
+    "@types/node": "^20.10.0",
+    "@types/react-helmet": "^6.1.9",
+    "@typescript-eslint/eslint-plugin": "^6.13.1",
+    "@typescript-eslint/parser": "^6.13.1",
+    "@types/showdown": "2.0.6",
+    "eslint": "^8.54.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-react": "^7.33.2",
+    "gh-pages": "^6.1.0",
     "husky": "^8.0.3",
-    "lint-staged": "^13.2.0",
+    "lint-staged": "^15.1.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.5",
-    "typescript": "^4.6.3"
+    "prettier": "^3.1.0",
+    "typescript": "^5.3.2"
   }
 }
diff --git a/pwa/src/hooks/useEnvironment.ts b/pwa/src/hooks/useEnvironment.ts
@@ -38,6 +38,8 @@ export const useEnvironment = () => {
     window.sessionStorage.setItem("FOOTER_CONTENT", process.env.GATSBY_FOOTER_CONTENT ?? "");
     window.sessionStorage.setItem("FOOTER_CONTENT_HEADER", process.env.GATSBY_FOOTER_CONTENT_HEADER ?? "");
     window.sessionStorage.setItem("OIDN_NUMBER", process.env.GATSBY_OIDN_NUMBER ?? "");
+    window.sessionStorage.setItem("SHOW_CATEGORY", process.env.GATSBY_SHOW_CATEGORY ?? "");
+    window.sessionStorage.setItem("SHOW_ORGANIZATION", process.env.GATSBY_SHOW_ORGANIZATION ?? "");
 
     updateSessionStorage();
   };
@@ -62,6 +64,8 @@ export const useEnvironment = () => {
     window.sessionStorage.setItem("FOOTER_CONTENT", config.GATSBY_FOOTER_CONTENT ?? "");
     window.sessionStorage.setItem("FOOTER_CONTENT_HEADER", config.GATSBY_FOOTER_CONTENT_HEADER ?? "");
     window.sessionStorage.setItem("OIDN_NUMBER", config.GATSBY_OIDN_NUMBER ?? "");
+    window.sessionStorage.setItem("SHOW_CATEGORY", config.GATSBY_SHOW_CATEGORY ?? "");
+    window.sessionStorage.setItem("SHOW_ORGANIZATION", config.GATSBY_SHOW_ORGANIZATION ?? "");
 
     updateSessionStorage();
   };

diff --git a/pwa/src/layout/Layout.tsx b/pwa/src/layout/Layout.tsx
@@ -13,6 +13,9 @@ import { fab } from "@fortawesome/free-brands-svg-icons";
 import { far } from "@fortawesome/free-regular-svg-icons";
 import { IconPack, library } from "@fortawesome/fontawesome-svg-core";
 import { useEnvironment } from "../hooks/useEnvironment";
+import { ToolTip } from "@conduction/components";
+
+export const TOOLTIP_ID = "cb8f47c3-7151-4a46-954d-784a531b01e6";
 
 interface LayoutProps {
   children: React.ReactNode;
@@ -58,6 +61,8 @@ const Layout: React.FC<LayoutProps> = ({ children, pageContext, location }) => {
         <APIProvider value={API}>
           <Surface>
             <Document>
+              <ToolTip id={TOOLTIP_ID} />
+
               <Toaster position="bottom-right" />
 
               <div className={styles.container}>

diff --git a/pwa/src/services/getConfig.ts b/pwa/src/services/getConfig.ts
@@ -13,7 +13,7 @@ import Buren from "./../../static/configFiles/buren.json";
 import Albrandswaard from "./../../static/configFiles/albrandswaard.json";
 import StedeBroec from "./../../static/configFiles/stede-broec.json";
 import Lansingerland from "./../../static/configFiles/lansingerland.json";
-import Waddinxveen from "./../../static/configFiles/waddinxveen..json";
+import Waddinxveen from "./../../static/configFiles/waddinxveen.json";
 import RijssenHolten from "./../../static/configFiles/rijssen-holten.json";
 import HoekscheWaard from "./../../static/configFiles/hoeksche-waard.json";
 import Texel from "./../../static/configFiles/texel.json";

diff --git a/pwa/src/templates/templateParts/cardsResultsTemplate/CardsResultsTemplate.module.css b/pwa/src/templates/templateParts/cardsResultsTemplate/CardsResultsTemplate.module.css
@@ -10,14 +10,8 @@
   flex-direction: column;
 }
 
-.cardHeader:before {
-  z-index: 1;
-  content: "";
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+.cardContainer:hover .cardHeader {
+  border-bottom-color: var(--conduction-card-header-hover-border-bottom-color);
 }
 
 .title {
@@ -26,6 +20,15 @@
 
 .description {
   color: var(--conduction-card-wrapper-color) !important;
+  display: -webkit-box;
+  -webkit-line-clamp: 5;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.cardFooter {
+  margin-top: auto;
 }
 
 @media only screen and (max-width: 992px) {

diff --git a/pwa/src/templates/templateParts/cardsResultsTemplate/CardsResultsTemplate.tsx b/pwa/src/templates/templateParts/cardsResultsTemplate/CardsResultsTemplate.tsx
@@ -5,6 +5,7 @@ import { translateDate } from "../../../services/dateFormat";
 import { useTranslation } from "react-i18next";
 import { navigate } from "gatsby";
 import { CardHeader, CardHeaderDate, CardHeaderTitle, CardWrapper } from "@conduction/components";
+import { TOOLTIP_ID } from "../../../layout/Layout";
 
 interface CardsResultsTemplateProps {
   requests: any[];
@@ -22,8 +23,16 @@ export const CardsResultsTemplate: React.FC<CardsResultsTemplateProps> = ({ requ
             className={styles.cardContainer}
             onClick={() => navigate(request._self.id)}
             tabIndex={0}
-            aria-label={`${request.titel}, ${request.samenvatting}, ${
+            aria-label={`${
               request.publicatiedatum ? translateDate(i18n.language, request.publicatiedatum) : t("N/A")
+            }, ${request.titel}, ${request.samenvatting} ${
+              window.sessionStorage.getItem("SHOW_ORGANIZATION") === "true"
+                ? `,${request.embedded?.behandelendBestuursorgaan?.naam}`
+                : ""
+            } ${
+              window.sessionStorage.getItem("SHOW_CATEGORY") === "true"
+                ? `, ${t("Category")}, ${request.categorie}`
+                : ""
             }`}
           >
             <CardHeader className={styles.cardHeader}>
@@ -36,6 +45,26 @@ export const CardsResultsTemplate: React.FC<CardsResultsTemplateProps> = ({ requ
             </CardHeader>
 
             <Paragraph className={styles.description}>{request.samenvatting}</Paragraph>
+
+            {(window.sessionStorage.getItem("SHOW_CATEGORY") === "true" ||
+              window.sessionStorage.getItem("SHOW_ORGANIZATION") === "true") && (
+              <div className={styles.cardFooter}>
+                {window.sessionStorage.getItem("SHOW_ORGANIZATION") === "true" && (
+                  <CardHeaderDate>
+                    <span data-tooltip-id={TOOLTIP_ID} data-tooltip-content={t("Municipality")}>
+                      {request.embedded?.behandelendBestuursorgaan?.naam}
+                    </span>
+                  </CardHeaderDate>
+                )}
+                {window.sessionStorage.getItem("SHOW_CATEGORY") === "true" && (
+                  <CardHeaderDate>
+                    <span data-tooltip-id={TOOLTIP_ID} data-tooltip-content={t("Category")}>
+                      {request.categorie}
+                    </span>
+                  </CardHeaderDate>
+                )}
+              </div>
+            )}
           </CardWrapper>
         ))}
       </div>

diff --git a/pwa/src/templates/templateParts/tableResultsTemplate/TableResultsTemplate.module.css b/pwa/src/templates/templateParts/tableResultsTemplate/TableResultsTemplate.module.css
@@ -49,3 +49,15 @@
   grid-gap: 24px;
   grid-template-columns: 1fr 1fr 1fr;
 }
+
+.categoryAndMunicipality {
+  text-wrap: nowrap;
+}
+
+.description {
+  display: -webkit-box;
+  -webkit-line-clamp: 5;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
diff --git a/pwa/src/templates/templateParts/tableResultsTemplate/TableResultsTemplate.tsx b/pwa/src/templates/templateParts/tableResultsTemplate/TableResultsTemplate.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 import * as styles from "./TableResultsTemplate.module.css";
+import clsx from "clsx";
 import {
   Table,
   TableHeader,
@@ -32,6 +33,17 @@ export const TableResultsTemplate: React.FC<TableResultsTemplateProps> = ({ requ
           <TableRow>
             <TableHeaderCell>{t("Subject")}</TableHeaderCell>
             <TableHeaderCell>{t("Publication date")}</TableHeaderCell>
+            {(window.sessionStorage.getItem("SHOW_CATEGORY") === "true" ||
+              window.sessionStorage.getItem("SHOW_ORGANIZATION") === "true") && (
+              <>
+                {window.sessionStorage.getItem("SHOW_ORGANIZATION") === "true" && (
+                  <TableHeaderCell>{t("Municipality")}</TableHeaderCell>
+                )}
+                {window.sessionStorage.getItem("SHOW_CATEGORY") === "true" && (
+                  <TableHeaderCell>{t("Category")}</TableHeaderCell>
+                )}
+              </>
+            )}
             <TableHeaderCell>{t("Summary")}</TableHeaderCell>
           </TableRow>
         </TableHeader>
@@ -44,15 +56,42 @@ export const TableResultsTemplate: React.FC<TableResultsTemplateProps> = ({ requ
               tabIndex={0}
               aria-label={`${request.titel},  ${
                 request.publicatiedatum ? translateDate(i18n.language, request.publicatiedatum) : t("N/A")
-              }, ${request.samenvatting}`}
+              } ${
+                window.sessionStorage.getItem("SHOW_ORGANIZATION") === "true"
+                  ? `,${request.embedded?.behandelendBestuursorgaan?.naam}`
+                  : ""
+              } ${window.sessionStorage.getItem("SHOW_CATEGORY") === "true" ? `, ${request.categorie}` : ""}, ${
+                request.samenvatting
+              }`}
             >
               <TableCell>{request.titel ?? t("No subject available")}</TableCell>
               <TableCell>
                 {request.publicatiedatum
                   ? translateDate(i18n.language, request.publicatiedatum)
                   : t("No publication date available")}
               </TableCell>
-              <TableCell>{request.samenvatting ?? t("No summary available")}</TableCell>
+              {(window.sessionStorage.getItem("SHOW_CATEGORY") === "true" ||
+                window.sessionStorage.getItem("SHOW_ORGANIZATION") === "true") && (
+                <>
+                  {window.sessionStorage.getItem("SHOW_ORGANIZATION") === "true" && (
+                    <TableCell className={styles.categoryAndMunicipality}>
+                      {request.embedded?.behandelendBestuursorgaan?.naam ?? t("No municipality available")}
+                    </TableCell>
+                  )}
+                  {window.sessionStorage.getItem("SHOW_CATEGORY") === "true" && (
+                    <TableCell
+                      className={clsx(
+                        window.sessionStorage.getItem("SHOW_ORGANIZATION") !== "true" && styles.categoryAndMunicipality,
+                      )}
+                    >
+                      {request.categorie ?? t("No category available")}
+                    </TableCell>
+                  )}
+                </>
+              )}
+              <TableCell>
+                <div className={styles.description}>{request.samenvatting ?? t("No summary available")}</div>
+              </TableCell>
             </TableRow>
           ))}
         </TableBody>

diff --git a/pwa/src/translations/en.ts b/pwa/src/translations/en.ts
@@ -15,6 +15,7 @@ export const en = {
   Page: "Page",
   Jumbotron: "Jumbotron",
   Limit: "Limit",
+  Municipality: "Municipality",
   "Jumbotron card": "Jumbotron card",
   "N/A": "N/A",
   "Details page": "Details page",
@@ -56,4 +57,6 @@ export const en = {
   "Select result limit": "Select result limit",
   "Scroll table to the left": "Scroll table to the left",
   "Scroll table to the right": "Scroll table to the right",
+  "No category available": "No category available",
+  "No municipality available": "No municipality available",
 };
diff --git a/pwa/src/translations/nl.ts b/pwa/src/translations/nl.ts
@@ -15,6 +15,7 @@ export const nl = {
   Page: "Pagina",
   Jumbotron: "Jumbotron",
   Limit: "Limiet",
+  Municipality: "Gemeente",
   "Jumbotron card": "Jumbotron tegel",
   "N/A": "N.v.t",
   "Details page": "Detailpagina",
@@ -56,4 +57,6 @@ export const nl = {
   "Select result limit": "Selecteer resultaten limiet",
   "Scroll table to the left": "Scroll tabel naar links",
   "Scroll table to the right": "Scroll tabel naar rechts",
+  "No category available": "Geen categorie beschikbaar",
+  "No municipality available": "Geen gemeente beschikbaar",
 };