FE CCCV New sections to PDF

Greater-Wellington-Regional-Council · Dec 2, 2024 · b232f4d · b232f4d
1 parent ec85ea6
commit b232f4d
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 7 deletions.
diff --git a/packages/Manager/build.gradle.kts b/packages/Manager/build.gradle.kts
@@ -50,7 +50,7 @@ dependencies {
   implementation("org.springframework.boot:spring-boot-starter-webflux")
   implementation("org.springdoc:springdoc-openapi-starter-webmvc-ui:2.6.0")
 
-  implementation("org.springframework.kafka:spring-kafka")
+  implementation("org.springframework.kafka:spring-kafka")  
   implementation("org.apache.kafka:kafka-streams")
   implementation("io.micrometer:micrometer-tracing-bridge-brave")
   implementation("org.jetbrains.kotlin:kotlin-reflect")

diff --git a/packages/cccv/package.json b/packages/cccv/package.json
@@ -40,13 +40,15 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-map-gl": "^7.1.7",
+    "react-pdf-html": "^2.1.2",
     "react-pdf-tailwind": "^2.3.0",
     "react-query": "^3.39.3",
     "react-refresh": "^0.14.2",
     "react-router-dom": "^6.28.0",
     "react-use": "^17.5.1",
     "storybook": "^8.4.5",
     "styled-components": "^6.1.13",
+    "tw-to-css": "0.0.12",
     "uninstall": "^0.0.0"
   },
   "devDependencies": {

diff --git a/packages/cccv/src/DefaultRedirect.tsx b/packages/cccv/src/DefaultRedirect.tsx
@@ -4,7 +4,7 @@ import {useEffect} from "react"
 export const DefaultRedirect = () => {
     const navigate = useNavigate()
     useEffect(() => {
-        navigate('map/@-41,175.35,8z', { replace: true })
+        navigate('/map/@-41,175.35,8z', { replace: true })
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [])
 

diff --git a/packages/cccv/src/components/FreshwaterManagementUnit/FreshwaterManagementUnit.pdf.tsx b/packages/cccv/src/components/FreshwaterManagementUnit/FreshwaterManagementUnit.pdf.tsx
@@ -18,6 +18,8 @@ import {
 import makeSafe from "@lib/makeSafe.ts"
 import {parseHtmlListToArray} from "@lib/parseHtmlListToArray.ts"
 import _ from "lodash"
+import DOMPurify from "dompurify"
+import Html from "react-pdf-html"
 
 Font.register(fonts.inter)
 
@@ -109,18 +111,29 @@ const MapImage: React.FC<{ src: string, width?: string }> = ({ src, width }) =>
 
 export type FreshwaterManagementUnitPDFProps = FmuFullDetailsWithMap
 
+const rPDFMarkup = (s: string, twStyle?: string) => <Html style={tw(twStyle || "body list")}>{s}</Html>
+
 export const FreshwaterManagementUnitPDF = (details: FreshwaterManagementUnitPDFProps) => {
 
     const {
         fmuName1,
         catchmentDescription,
         implementationIdeas,
+        vpo,
+        otherInfo,
+        culturalOverview,
     } = details.freshwaterManagementUnit
 
     const tangataWhenuaSites = details.tangataWhenuaSites
 
     const contaminants: ContaminantList = fmuContaminants(details.freshwaterManagementUnit)
 
+    const vpoSafe = vpo?.value ? DOMPurify.sanitize(vpo.value!) : null
+
+    const otherInfoSafe = otherInfo?.value ? DOMPurify.sanitize(otherInfo.value!) : null
+
+    const culturalOverviewSafe = culturalOverview?.value ? DOMPurify.sanitize(culturalOverview.value!) : null
+
     return (
         <Document key={_.get(details, "key")}>
             <Page size="A4" style={tw("bg-white font-sans p-4 flex flex-col")}>
@@ -141,15 +154,22 @@ export const FreshwaterManagementUnitPDF = (details: FreshwaterManagementUnitPDF
                     <Text style={tw("h1")}>{fmuName1}</Text>
                 </View>
 
+                {/* Overview */}
                 <View style={[tw("mb-6 flex-row items-start"), { width: '100%' }]} wrap={false}>
                     {catchmentDescription && (
                         <View style={{ flex: 1, marginRight: '12px' }}>
-                            <Text style={tw("body")}>{makeSafe(catchmentDescription ?? '')}</Text>
+                            <Text style={tw("body")}>{rPDFMarkup(makeSafe(catchmentDescription ?? ''))}</Text>
                         </View>
                     )}
                     {details.mapImage && <MapImage width={catchmentDescription ? '42%' : '100%'} src={details.mapImage}/>}
                 </View>
 
+                {/* VPO */}
+                {vpoSafe && <View style={[tw("mb-6"), { width: '100%' }]} wrap={false}>
+                    <Text style={tw("h2 mb-2")}>Freshwater Values, Priorities, and Outcomes</Text>
+                    <Text style={tw("body")}>{rPDFMarkup(makeSafe(vpoSafe ?? ''))}</Text>
+                </View>}
+
                 {/* Contaminants */}
                 {contaminants?.length ? (
                     <View style={tw("mt-2 mb-2")}>
@@ -164,8 +184,14 @@ export const FreshwaterManagementUnitPDF = (details: FreshwaterManagementUnitPDF
 
                 {/* Tangata Whenua Sites */}
                 {tangataWhenuaSites?.features.length ? (
-                    <View style={tw("mt-6")} wrap={false}>
-                        <Text style={tw("h2 mb-2")}>Sites of significance</Text>
+                    <View style={tw("mt-6 body")} wrap={false}>
+                        {culturalOverviewSafe && <View style={tw("h2 mb-2")}>
+                            <Text style={tw("h2 mb-2")}>Cultural Significance of the Catchment</Text>
+                            <Text style={tw("body")}>{rPDFMarkup(makeSafe(culturalOverviewSafe ?? ''))}</Text>
+                        </View>}
+
+                        <Text style={tw("h3 mb-2")}>Sites of Significance</Text>
+
                         <Text style={tw("body mb-1")}>
                             This area contains sites of significance to Tangata Whenua.
                         </Text>
@@ -182,6 +208,12 @@ export const FreshwaterManagementUnitPDF = (details: FreshwaterManagementUnitPDF
                     </View>
                 ) : <View style={tw("mt-0")} />}
 
+                {/* Other info */}
+                {otherInfoSafe && <View style={[tw("mb-6"), { width: '100%' }]} wrap={false}>
+                    <Text style={tw("h2 mb-2")}>Other Relevant Information</Text>
+                    <Text style={tw("body")}>{rPDFMarkup(makeSafe(otherInfoSafe ?? ''))}</Text>
+                </View>}
+
                 {/* Disclaimer */}
                 <View style={tw("mt-6")} wrap={false}>
                     <Text style={tw("h2 mb-2")}>About this Information</Text>

diff --git a/packages/cccv/src/components/FreshwaterManagementUnit/FreshwaterManagementUnit.tsx b/packages/cccv/src/components/FreshwaterManagementUnit/FreshwaterManagementUnit.tsx
@@ -85,6 +85,7 @@ const FreshwaterManagementUnit = (
         <div ref={outerDiv} className="FreshwaterManagementUnit bg-white p-6 pt-0 relative overflow-hidden" id={`fmu_${id || ''}`}>
             {showHeader && <FmuPanelHeader className={"mb-6"} fmuName1={fmuName1!}/>}
 
+            {/* Overview */}
             <div className="overview mt-0" data-testid="catchment-desc">
                 <h2>Overview</h2>
                 <div
@@ -95,6 +96,7 @@ const FreshwaterManagementUnit = (
                 />
             </div>
 
+            {/* VPO */}
             {vpoSafe && <div className="vpo mt-6" data-testid="vpo">
                 <h2>Freshwater Values, Priorities, and Outcomes</h2>
                 <div
@@ -105,6 +107,7 @@ const FreshwaterManagementUnit = (
                 />
             </div>}
 
+            {/* Contaminants */}
             <div className="contaminants mt-6">
                 <h2>Contaminants</h2>
                 <p>Freshwater objectives from {fmuName1 || ""} Whaitua Implementation Plan (as at August

diff --git a/packages/cccv/src/components/FreshwaterManagementUnit/components/TangataWhenuaSites.tsx b/packages/cccv/src/components/FreshwaterManagementUnit/components/TangataWhenuaSites.tsx
@@ -23,7 +23,7 @@ const TangataWhenuaSites: React.FC<TangataWhenuaSitesProps> = ({ tangataWhenuaSi
 
         const parentRect = e.currentTarget.closest('.sliding-panel')?.getBoundingClientRect()
         if (!parentRect) {
-            console.error("Could not find sliding panel element.")
+            console.error("Could not find parent element.")
             return
         }
 

diff --git a/packages/cccv/src/lib/pdfTailwindStyles.ts b/packages/cccv/src/lib/pdfTailwindStyles.ts
@@ -7,7 +7,7 @@ export const pdfTailwindStyles = {
   h4: "font-sans font-bold text-[16px] leading-6 capitalize",
   h5: "font-sans font-bold text-[16px] leading-6",
   h6: "font-sans font-bold text-[14px] leading-6",
-  body: "font-sans text-[12px] leading-6",
+  body: "font-sans text-[12px] leading-6 font-normal",
   caption: "font-sans text-[16px] leading-[22px] text-textCaption",
   button: "font-sans text-nui font-bold text-[16px] leading-[22px] border-2 rounded-3xl pl-4 border-nui pr-4 pt-2 pb-2",
   "button:hover": "font-source-sans-3 text-white bg-nui font-bold text-[16px] leading-[22px]",

diff --git a/packages/cccv/src/routes.tsx b/packages/cccv/src/routes.tsx
@@ -12,6 +12,7 @@ const routes = [
     children: [
       {
         index: true,
+        path: '/',
         element: <DefaultRedirect />,
       },
       {