diff --git a/pwa/src/templates/publicationDetail/PublicationsDetailTemplate.module.css b/pwa/src/templates/publicationDetail/PublicationsDetailTemplate.module.css index f9f2e8b2..254369f6 100644 --- a/pwa/src/templates/publicationDetail/PublicationsDetailTemplate.module.css +++ b/pwa/src/templates/publicationDetail/PublicationsDetailTemplate.module.css @@ -44,6 +44,10 @@ margin-block-end: var(--web-app-size-xs); } +.date { + text-wrap: nowrap; +} + .headerButtonsContainer { display: flex; flex-wrap: wrap; @@ -56,6 +60,10 @@ gap: var(--web-app-size-xs); } +.tagWidth { + width: max-content !important; +} + .addToCatalogusContainer { display: flex; flex-direction: column; @@ -261,6 +269,15 @@ color: var(--utrecht-table-row-hover-color); } +.commongroundRating > * { + max-height: var(--web-app-component-rating-indicator-height); +} + +.publicationDataContact { + display: flex; + flex-direction: column; +} + @media only screen and (min-width: 576px) { .container > .headingContainer { grid-template-columns: 2fr var(--web-app-component-detail-logo-width); @@ -309,10 +326,6 @@ } } -.commongroundRating > * { - max-height: var(--web-app-component-rating-indicator-height); -} - /* Colors of commonground rating */ .goldRating > svg > g { fill: #d4af37; diff --git a/pwa/src/templates/publicationDetail/PublicationsDetailTemplate.tsx b/pwa/src/templates/publicationDetail/PublicationsDetailTemplate.tsx index 45dacc7d..5495e8ed 100644 --- a/pwa/src/templates/publicationDetail/PublicationsDetailTemplate.tsx +++ b/pwa/src/templates/publicationDetail/PublicationsDetailTemplate.tsx @@ -37,12 +37,16 @@ import { RatingIndicatorTemplate } from "../templateParts/ratingIndicator/Rating import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faArrowLeft, + faCircle, + faDownload, + faGear, faHouse, faInfoCircle, faLaptop, faLayerGroup, faRepeat, faScroll, + faUpload, faWrench, } from "@fortawesome/free-solid-svg-icons"; import { categories, TCategories } from "../../data/categories"; @@ -144,10 +148,11 @@ export const PublicationsDetailTemplate: React.FCSomething went wrong...; - const organisation = _getComponent?.data?.embedded?.url?.embedded?.organisation; + const organisation = _getPublication?.data?.organization; const application = _getComponent?.data?.embedded?.applicationSuite; const applicationComponent = getApplicationComponent?.data?.results[0]; @@ -264,7 +269,7 @@ export const PublicationsDetailTemplate: React.FC
- {_getPublication.data?.developmentStatus && ( - { - setFilters({ - ...defaultFiltersContext, - ["developmentStatus"]: _getPublication.data?.developmentStatus, - }); - setPagination({ - ...pagination, - componentsCurrentPage: 1, - }); - - navigate("/components"); - }} - > - - {t(_.upperFirst(_getPublication.data?.developmentStatus))} - - )} - {_getPublication.data?.usedBy?.length > 0 && ( )} - {organisation?.name && ( + {organisation?.title && ( { - navigate("/organizations/" + organisation._self?.id); - }} data-tooltip-id={TOOLTIP_ID} data-tooltip-content="Organisatie" > - {organisation.name} + {organisation.title} )} - {_getPublication.data?.embedded?.legal?.license && ( - + {_getPublication.data?.license && ( + - {_getPublication.data?.embedded?.legal.license} + {_getPublication.data?.license} + + )} + + {_getPublication.data?.status && ( + + + {t(_.upperFirst(_getPublication.data?.status))} + + )} + + {_getPublication.data?.published && ( + + + {_getPublication.data?.published} + + )} + + {_getPublication.data?.modified && ( + + + {_getPublication.data?.modified} + + )} + + {_getPublication.data?.portal && ( + open(_getPublication?.data?.portal)} + > + + {t("Portal")} + + )} + + {_getPublication.data?.reference && ( + open(_getPublication?.data?.reference)} + > + + {t("Reference")} )} @@ -385,6 +412,18 @@ export const PublicationsDetailTemplate: React.FC )}
+
+ {_getPublication.data?.themes && + _getPublication.data?.themes.map((theme: string) => ( + + {theme} + + ))} +
@@ -631,12 +670,12 @@ export const PublicationsDetailTemplate: React.FC )} - {!_getPublication?.data?.embedded?.url?.embedded?.organisation && ( + {!_getPublication?.data?.organization && ( {t("No organization found")} )} 0 || _getPublication.data?.embedded?.supportedBy?.length > 0 || _getPublication.data?.embedded?.usedBy?.length > 0 || - getConfigComponents.data?.results?.length > 0) && ( + getConfigComponents.data?.results?.length > 0 || + _getPublication.data?.attachments || + _getPublication.data?.data) && (
setTabIndex(index)}> @@ -788,6 +829,19 @@ export const PublicationsDetailTemplate: React.FC )} + {_getPublication.data?.attachments?.length > 0 && ( + + {t("Attachments")} + + {_getPublication.data?.attachments?.length ?? 0} + + + )} + {_getPublication.data?.data && ( + + {t("Data")} + + )} {_getPublication.data?.embedded?.dependsOn && ( @@ -970,6 +1024,140 @@ export const PublicationsDetailTemplate: React.FC )} + {_getPublication.data?.attachments?.length > 0 && ( + + + + + + {t("Name")} + {t("Description")} + {t("License")} + {t("Type")} + {t("Published")} + {t("Modified")} + {t("Download")} + + + + {_getPublication?.data?.attachments.map((attachement: any) => { + return ( + + {attachement.title} + +
100 && TOOLTIP_ID} + data-tooltip-content={attachement.description} + > + {attachement.description.length > 100 + ? `${attachement.description.substring(0, 100)}...` + : attachement.description} +
+
+ + + + {attachement.license} + + + {attachement.type} + + {attachement.published} + + + {attachement.modified} + + + { + e.preventDefault(), open(attachement.downloadURL); + }} + href={`/publications/${_getPublication.data?.id}`} + > + + + + {t("Download")} + + +
+ ); + })} +
+
+
+
+ )} + {publicationData && ( + + + + + {publicationData?.contactPoint && ( + + Contact: + +
+ {`${t("Name")}: ${publicationData?.contactPoint?.name}`} + {`${t("Email")}: ${publicationData?.contactPoint?.email}`} +
+
+
+ )} + + {publicationData?.qualifiedAttribution && ( + + Toeschrijving: + +
+ {`${t("Name")}: ${publicationData?.contactPoint?.name}`} + {`${t("Email")}: ${publicationData?.contactPoint?.email}`} +
+
+
+ )} + + {publicationData?.bedrijfsservices && ( + + Bedrijfsservices: + + {publicationData.bedrijfsservices.join(", ")} + + + )} + + {publicationData?.model && ( + + Model: + {publicationData.model} + + )} + + {publicationData?.spatial > 0 && ( + + Referentie componenten: + {publicationData.spatial.join(", ")} + + )} +
+
+
+
+ )}
)} diff --git a/pwa/src/translations/en.ts b/pwa/src/translations/en.ts index 4934cd47..37b2019e 100644 --- a/pwa/src/translations/en.ts +++ b/pwa/src/translations/en.ts @@ -77,6 +77,11 @@ export const en = { Silver: "Silver", Bronze: "Bronze", Configurations: "Configurations", + Attachments: "Attachments", + Published: "Published", + Modified: "Modified", + Portal: "Portal", + Reference: "Reference", "Open Catalogs": "Open Catalogs", "Reusable components within the government": "Reusable components within the government", "Information Models": "Information Models", diff --git a/pwa/src/translations/nl.ts b/pwa/src/translations/nl.ts index 1314a5ee..4783f46b 100644 --- a/pwa/src/translations/nl.ts +++ b/pwa/src/translations/nl.ts @@ -79,6 +79,12 @@ export const nl = { Silver: "Zilver", Bronze: "Brons", Configurations: "Configuraties", + Attachments: "Bijlagen", + License: "Licentie", + Published: "Gepubliceerd", + Modified: "Gewijzigd", + Portal: "Portaal", + Reference: "Referentie", "Open Catalogs": "OpenCatalogi", "Reusable components within the government": "Herbruikbare componenten binnen de overheid", "Information Models": "Informatiemodellen",