Merge pull request #480 from OpenCatalogi/feature/DIMOC-30/DCAT-objec…

…t-display Publication page changes and improvements
OpenCatalogi · Jul 15, 2024 · cb04403 · cb04403
2 parents e10355a + 71bda05
commit cb04403
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 19 deletions.
diff --git a/pwa/src/components/organizationCard/OrganizationCard.module.css b/pwa/src/components/organizationCard/OrganizationCard.module.css
@@ -59,3 +59,7 @@
   height: 100%;
   object-fit: contain;
 }
+
+.contactParagraph {
+  margin-block-start: var(--web-app-size-md);
+}
diff --git a/pwa/src/components/organizationCard/OrganizationCard.tsx b/pwa/src/components/organizationCard/OrganizationCard.tsx
@@ -30,6 +30,10 @@ export interface OrganizationCardProps {
   gitHub?: string;
   gitLab?: string;
   layoutClassName?: string;
+  contactInfo?: {
+    name?: string;
+    email?: string;
+  };
 }
 
 export const OrganizationCard: React.FC<OrganizationCardProps> = ({
@@ -42,6 +46,7 @@ export const OrganizationCard: React.FC<OrganizationCardProps> = ({
   gitHub,
   gitLab,
   layoutClassName,
+  contactInfo,
 }) => {
   const { t } = useTranslation();
 
@@ -61,7 +66,12 @@ export const OrganizationCard: React.FC<OrganizationCardProps> = ({
             </Link>
           </CardHeaderTitle>
 
-          <Paragraph className={styles.description}>{description}</Paragraph>
+          {contactInfo &&
+            <Paragraph className={styles.contactParagraph}>{contactInfo?.name}<br/>{contactInfo?.email}</Paragraph>
+          }
+          {!contactInfo &&
+            <Paragraph className={styles.description}>{description}</Paragraph>
+          }
         </div>
 
         {logo && (

diff --git a/pwa/src/templates/publicationDetail/PublicationsDetailTemplate.tsx b/pwa/src/templates/publicationDetail/PublicationsDetailTemplate.tsx
@@ -36,6 +36,8 @@ import { useComponent } from "../../hooks/components";
 import { RatingIndicatorTemplate } from "../templateParts/ratingIndicator/RatingIndicatorTemplate";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
+  faMinus,
+  faArrowDown,
   faArrowLeft,
   faCircle,
   faGear,
@@ -138,6 +140,8 @@ export const PublicationsDetailTemplate: React.FC<PublicationsDetailTemplateProp
   const application = _getComponent?.data?.embedded?.applicationSuite;
   const applicationComponent = getApplicationComponent?.data?.results[0];
 
+  const [isMetaDataVisible, setMetaDataIsVisible] = React.useState(false);
+
   const imageHasValidSource = (src: string): boolean => {
     try {
       const url = new URL(src);
@@ -221,12 +225,12 @@ export const PublicationsDetailTemplate: React.FC<PublicationsDetailTemplateProp
           <div className={styles.headingContainer}>
             <div className={styles.headingContent}>
               <Heading level={1} className={styles.componentName}>
-                {_getPublication.data?.title}
+                {_getPublication?.data?.data?.title}
               </Heading>
 
               <ExpandableLeadParagraph
                 description={
-                  _getPublication.data?.description ?? _getPublication.data?.summary ?? t("No description available")
+                  _getPublication?.data?.data?.summary ?? t("No description available")
                 }
               />
 
@@ -412,6 +416,46 @@ export const PublicationsDetailTemplate: React.FC<PublicationsDetailTemplateProp
                     </DataBadge>
                   ))}
               </div>
+
+
+              {_getPublication.data?.metaData &&
+                <div>
+                  <Button onClick={() => {setMetaDataIsVisible(!isMetaDataVisible)}}>
+                    <FontAwesomeIcon icon={isMetaDataVisible ? faMinus : faArrowDown } />
+                    {isMetaDataVisible ? t("Hide metadata") : t("Show metadata")}
+                  </Button>
+                  {isMetaDataVisible &&
+                    <Table>
+                      <TableBody>
+                        {_getPublication.data.metaData?.title &&
+                          <TableRow>
+                            <TableCell>{t("Title")}</TableCell>
+                            <TableCell>{_getPublication.data.metaData.title}</TableCell>
+                          </TableRow>
+                        }
+                        {_getPublication.data.metaData?.version &&
+                          <TableRow>
+                            <TableCell>{t("Version")}</TableCell>
+                            <TableCell>{_getPublication.data.metaData.version}</TableCell>
+                          </TableRow>
+                        }
+                        {_getPublication.data.metaData?.description &&
+                          <TableRow>
+                            <TableCell>{t("Description")}</TableCell>
+                            <TableCell>{_getPublication.data.metaData.description}</TableCell>
+                          </TableRow>
+                        }
+                        {_getPublication.data.metaData?.properties &&
+                          <TableRow>
+                            <TableCell>{t("Properties")}</TableCell>
+                            <TableCell>{_getPublication.data.metaData.properties}</TableCell>
+                          </TableRow>
+                        }
+                      </TableBody>
+                    </Table>
+                  }
+                </div>
+              }
             </div>
 
             <div className={styles.addToCatalogusContainer}>
@@ -679,6 +723,7 @@ export const PublicationsDetailTemplate: React.FC<PublicationsDetailTemplateProp
                 gitLab={organisation.gitlab}
                 type={"Organization"}
                 layoutClassName={styles.organizationCardContainer}
+                contactInfo={publicationData?.contactPoint}
               />
             )}
             {!_getPublication?.data?.data?.organization && (
@@ -833,7 +878,7 @@ export const PublicationsDetailTemplate: React.FC<PublicationsDetailTemplateProp
                   )}
                   {_getPublication.data?.data?.data && (
                     <Tab>
-                      <span>{t("Data")}</span>
+                      <span>{t("Extensions")}</span>
                     </Tab>
                   )}
                 </TabList>
@@ -1035,7 +1080,7 @@ export const PublicationsDetailTemplate: React.FC<PublicationsDetailTemplateProp
                             <TableHeaderCell>{t("Type")}</TableHeaderCell>
                             <TableHeaderCell>{t("Published")}</TableHeaderCell>
                             <TableHeaderCell>{t("Modified")}</TableHeaderCell>
-                            <TableHeaderCell>{t("Download")}</TableHeaderCell>
+                            <TableHeaderCell>{t("Access url")}</TableHeaderCell>
                           </TableRow>
                         </TableHeader>
                         <TableBody className={styles.tableBody}>
@@ -1080,7 +1125,7 @@ export const PublicationsDetailTemplate: React.FC<PublicationsDetailTemplateProp
                                     href={`/publications/${_getPublication.data?.data?.id}`}
                                     className={styles.tagWidth}
                                   >
-                                    {t("Toegangs url")}
+                                    {t("Access url")}
                                   </Link>
                                 </TableCell>
                               </TableRow>
@@ -1101,17 +1146,6 @@ export const PublicationsDetailTemplate: React.FC<PublicationsDetailTemplateProp
                     >
                       <Table className={styles.table}>
                         <TableBody className={styles.tableBody}>
-                          {publicationData?.contactPoint && (
-                            <TableRow className={styles.tableRow}>
-                              <TableCell className={styles.title}>Contact:</TableCell>
-                              <TableCell>
-                                <div className={styles.publicationDataContact}>
-                                  <span>{`${t("Name")}: ${publicationData?.contactPoint?.name}`}</span>
-                                  <span>{`${t("Email")}: ${publicationData?.contactPoint?.email}`}</span>
-                                </div>
-                              </TableCell>
-                            </TableRow>
-                          )}
 
                           {publicationData?.qualifiedAttribution && (
                             <TableRow className={styles.tableRow}>

diff --git a/pwa/src/templates/templateParts/publicationsTable/PublicationsTableTemplate.tsx b/pwa/src/templates/templateParts/publicationsTable/PublicationsTableTemplate.tsx
@@ -64,8 +64,8 @@ export const PublicationsTableTemplate: React.FC<PublicationsTableTemplateProps>
                 onClick={() => navigate(`/publications/${publication.id}`)}
               >
                 <TableCell>
-                  <span data-tooltip-id={TOOLTIP_ID} data-tooltip-content={publication.title} className={styles.name}>
-                    {publication.title}
+                  <span data-tooltip-id={TOOLTIP_ID} data-tooltip-content={publication?.data?.title} className={styles.name}>
+                    {publication?.data?.title}
                   </span>
                 </TableCell>
 

diff --git a/pwa/src/translations/en.ts b/pwa/src/translations/en.ts
@@ -83,6 +83,7 @@ export const en = {
   Portal: "Portal",
   Reference: "Reference",
   Pagination: "Pagination",
+  Extensions: "Extensions",
   "Open Catalogs": "Open Catalogs",
   "Reusable components within the government": "Reusable components within the government",
   "Information Models": "Information Models",
@@ -92,6 +93,9 @@ export const en = {
   "Privacy declaration": "Privacy declaration",
   "All Open Catalog components": "All Open Catalog components",
   "View all components": "View all components",
+  "Show metadata": "Show metadata",
+  "Access url": "Access url",
+  "Hide metadata": "Hide metadata",
   "One central place for reuse of information technology within the government":
     "One central place for reuse of information technology within the government",
   "No components found with active filters": "No components found with active filters",

diff --git a/pwa/src/translations/nl.ts b/pwa/src/translations/nl.ts
@@ -86,13 +86,17 @@ export const nl = {
   Portal: "Portaal",
   Reference: "Referentie",
   Pagination: "Paginering",
+  Extensions: "Extensies",
   "Open Catalogs": "OpenCatalogi",
   "Reusable components within the government": "Herbruikbare componenten binnen de overheid",
   "Information Models": "Informatiemodellen",
   "An initiative of": "Een initiatief van",
   "Privacy declaration": "Privacyverklaring",
   "All Open Catalog components": "Alle OpenCatalogi componenten",
   "View all components": "Bekijk alle componenten",
+  "Show metadata": "Toon metadata",
+  "Hide metadata": "Verberg metadata",
+  "Access url": "Toegangsurl",
   "One central place for reuse of information technology within the government":
     "Eén centrale plek voor hergebruik van informatietechnologie binnen de overheid",
   "No components found with active filters": "Geen componenten gevonden met actieve filters",