diff --git a/packages/cccv/index.scss b/packages/cccv/index.scss index 8a0f93f2..13100026 100644 --- a/packages/cccv/index.scss +++ b/packages/cccv/index.scss @@ -36,10 +36,14 @@ caption { @apply font-source-sans-3 text-[16px] leading-[22px] text-textCaption; } -button { +.button-style { @apply font-source-sans-3 text-nui font-bold text-[16px] leading-[22px] border-2 rounded-3xl pl-4 border-nui pr-4 pt-2 pb-2; } +button { + @apply button-style; +} + button:hover { @apply font-source-sans-3 text-white bg-nui font-bold text-[16px] leading-[22px]; } diff --git a/packages/cccv/package.json b/packages/cccv/package.json index 345fc742..8dfea33a 100644 --- a/packages/cccv/package.json +++ b/packages/cccv/package.json @@ -17,7 +17,7 @@ "@heroicons/react": "^2.1.3", "@lingui/react": "^4.11.1", "@material-tailwind/react": "^2.1.9", - "@react-pdf/renderer": "^3.4.5", + "@react-pdf/renderer": "^4.0.0", "@tanstack/react-query": "^5.28.8", "@turf/turf": "^7.1.0", "@types/lodash": "^4.17.0", diff --git a/packages/cccv/src/components/FreshwaterManagementUnit/FreshwaterManagementUnit.tsx b/packages/cccv/src/components/FreshwaterManagementUnit/FreshwaterManagementUnit.tsx index a609a849..09dc3612 100644 --- a/packages/cccv/src/components/FreshwaterManagementUnit/FreshwaterManagementUnit.tsx +++ b/packages/cccv/src/components/FreshwaterManagementUnit/FreshwaterManagementUnit.tsx @@ -1,23 +1,38 @@ -import "./FreshwaterManagementUnit.scss"; -import purify from "dompurify"; -import {Key} from "react"; -import { FmuFullDetailsWithMap } from "@models/FreshwaterManagementUnit.ts"; -import { PDFDownloadLink } from "@react-pdf/renderer"; -import { FreshwaterManagementUnitPDF } from "@components/FreshwaterManagementUnit/FreshwaterManagementUnit.pdf"; -import formatFilename from "@lib/formatAsFilename"; -import dateTimeString from "@lib/dateTimeString"; -import { ContaminantList, contaminants as fmuContaminants } from "@components/FreshwaterManagementUnit/utils.ts"; -import EmailLink from "@components/EmailLink/EmailLink.tsx"; -import { Contaminants } from "@components/Contaminants/Contaminants.tsx"; -import makeSafe from "@lib/makeSafe.ts"; -import {parseHtmlListToArray} from "@lib/parseHtmlListToArray.ts"; +import "./FreshwaterManagementUnit.scss" +import purify from "dompurify" +import { Key, useEffect, useState, useMemo } from "react" +import { FmuFullDetailsWithMap } from "@models/FreshwaterManagementUnit.ts" +import {usePDF, UsePDFInstance} from "@react-pdf/renderer" +import { FreshwaterManagementUnitPDF } from "@components/FreshwaterManagementUnit/FreshwaterManagementUnit.pdf" +import formatFilename from "@lib/formatAsFilename" +import dateTimeString from "@lib/dateTimeString" +import { ContaminantList, contaminants as fmuContaminants } from "@components/FreshwaterManagementUnit/utils.ts" +import EmailLink from "@components/EmailLink/EmailLink.tsx" +import { Contaminants } from "@components/Contaminants/Contaminants.tsx" +import makeSafe from "@lib/makeSafe.ts" +import { parseHtmlListToArray } from "@lib/parseHtmlListToArray.ts" +import { Spinner } from "@components/LoadingIndicator/LoadingIndicatorOverlay" -const FreshwaterManagementUnit = (details: FmuFullDetailsWithMap) => { +interface DownloadLinkProps { + pdfLoading: boolean; + instance: UsePDFInstance; + fileName: string; + hasError?: boolean; +} - if (!details?.freshwaterManagementUnit) { - return
No data found.
+const DownloadLink: React.FC = ({ pdfLoading, instance, fileName, hasError }) => { + if (hasError) { + return Error loading PDF + } + + if (pdfLoading) { + return // Replace this with your preferred spinner component } + return Print +} + +const FreshwaterManagementUnit = (details: FmuFullDetailsWithMap) => { const { id, fmuName1, @@ -27,24 +42,50 @@ const FreshwaterManagementUnit = (details: FmuFullDetailsWithMap) => { const tangataWhenuaSites = details.tangataWhenuaSites - const fileName = formatFilename((fmuName1 || '').toString(), `fmu_${id}`) + `_${dateTimeString()}` + '.pdf' + const fileName = formatFilename(fmuName1 || "", `fmu_${id}`) + `_${dateTimeString()}` + ".pdf" const contaminants: ContaminantList = fmuContaminants(details.freshwaterManagementUnit) + const pdfDocument = useMemo(() => , [details]) + + const [instance, updateInstance] = usePDF({ document: pdfDocument }) + const [pdfLoading, setPdfLoading] = useState(true) + const [hasError, setHasError] = useState(false) + + useEffect(() => { + if (instance) { + setPdfLoading(instance.loading) + if (instance.error) { + setHasError(true) + setPdfLoading(false) + } + } + }, [instance]) + + useEffect(() => { + updateInstance(pdfDocument) + }, [fileName, pdfDocument, updateInstance]) + + if (!details?.freshwaterManagementUnit) { + return
No data found.
+ } + return (

{fmuName1 || ""}

-
- } fileName={fileName}> - - +
+
-
-

Overview

-
No overview available

")) }} /> -
+
+

Overview

+
No overview available

")), + }} + /> +

Contaminants

@@ -61,29 +102,41 @@ const FreshwaterManagementUnit = (details: FmuFullDetailsWithMap) => {

This area contains sites of significance to Tangata Whenua including:

    - {tangataWhenuaSites?.map((site: { location: string }, index: Key | null | undefined) =>
  • {site?.location}
    • )} + {tangataWhenuaSites?.map((site: { location: string }, index: Key | null | undefined) => ( +
  • + {site?.location} +
    • + ))}
- ) :
} - - {implementationIdeas ? ( -
-

Implementation Ideas

-
-
    - {parseHtmlListToArray(implementationIdeas)?.map((idea: string, index) =>
  • {makeSafe(idea)}
    • )} -
-
-
- ) :
} + ) : ( +
+ )} + + {implementationIdeas ? ( +
+

Implementation Ideas

+
+
    + {parseHtmlListToArray(implementationIdeas)?.map((idea: string, index) => ( +
  • + {makeSafe(idea)} +
    • + ))} +
+
+
+ ) : ( +
+ )}

About this information

-

The content, data, and information used in this app comes from multiple sources, including Greater - Wellington’s Natural Resources Plan (2018) and Whaitua Implementation Plans.

+

+ The content, data, and information used in this app comes from multiple sources, including Greater + Wellington’s Natural Resources Plan (2018) and Whaitua Implementation Plans. +

Contact us for more information
diff --git a/packages/cccv/src/components/InfoPanel/SlidingPanel.tsx b/packages/cccv/src/components/InfoPanel/SlidingPanel.tsx index 5bc23592..49f2fc34 100644 --- a/packages/cccv/src/components/InfoPanel/SlidingPanel.tsx +++ b/packages/cccv/src/components/InfoPanel/SlidingPanel.tsx @@ -32,7 +32,7 @@ export default function SlidingPanel({ showPanel, contentChanged, onResize, chil useEffect(() => { if (panelRef.current && isLargeScreen) { const parentWidth = panelRef.current.parentElement?.getBoundingClientRect().width || 0 - const initialWidth = parentWidth * 0.3 + const initialWidth = parentWidth * 0.35 setPanelWidth(initialWidth) onResize && onResize(initialWidth) } diff --git a/packages/cccv/src/components/LoadingIndicator/LoadingIndicatorOverlay.tsx b/packages/cccv/src/components/LoadingIndicator/LoadingIndicatorOverlay.tsx index b4b0d714..4612fc32 100644 --- a/packages/cccv/src/components/LoadingIndicator/LoadingIndicatorOverlay.tsx +++ b/packages/cccv/src/components/LoadingIndicator/LoadingIndicatorOverlay.tsx @@ -1,17 +1,28 @@ import React from 'react' -export const LoadingIndicatorOverlay: React.FC = () => { +interface LoadingIndicatorOverlayProps { + width?: number; + height?: number; +} + +export function Spinner(props: { width: number, height: number }) { + return
+ + + + +
+} + +export const LoadingIndicatorOverlay: React.FC = ({ width = 5, height = 5 }) => { return (
-
- - - - -
+
) } \ No newline at end of file diff --git a/packages/cccv/src/pages/MapPage/MapPage.tsx b/packages/cccv/src/pages/MapPage/MapPage.tsx index 4af312ca..81a84930 100644 --- a/packages/cccv/src/pages/MapPage/MapPage.tsx +++ b/packages/cccv/src/pages/MapPage/MapPage.tsx @@ -134,7 +134,8 @@ export default function MapPage() {
{/* Position the sliding panel relative to this map panel */}
- +