Merge pull request #15 from datopian/feat/metadata-fields-on-dataset-page

Add metadata fields to dataset page

Author: mpolidori

messages/en.json

@@ -34,7 +34,7 @@
     "activityStream": "Activity Stream",
     "code": "Code",
     "created": "Created",
-    "updated": "Updated",
+    "updated": "Last updated",
     "lastModified":"Last modified",
     "version": "Version",
     "license": "License",
@@ -61,7 +61,8 @@
     "readLess": "Read less",
     "error" : "Something went wrong.",
     "skipToContent": "Skip to main content",
-    "reset": "Reset"
+    "reset": "Reset",
+    "visit" : "Visit"
   },
 
   "Dataset": {
@@ -142,6 +143,10 @@
     "updateFrequency" : "Update frequency",
     "documentation" : "Documentation",
     "temporalCoverageStart": "Temporal coverage start",
-    "temporalCoverageEnd": "Temporal coverage end"
+    "temporalCoverageEnd": "Temporal coverage end",
+    "landingPage" : "Landing page",
+    "contactPoint" : "Contact point",
+    "issued" : "Issued",
+    "conformsTo" : "Conforms to"
   }
 }

messages/sv.json

@@ -61,7 +61,8 @@
     "readLess": "Läs mindre",
     "error": "Något gick fel.",
     "skipToContent": "Hoppa till huvudinnehåll",
-    "reset": "Återställ"
+    "reset": "Återställ",
+    "visit": "Besök"
   },
 
   "Dataset": {
@@ -142,6 +143,10 @@
     "updateFrequency": "Uppdateringsfrekvens",
     "documentation": "Dokumentation",
     "temporalCoverageStart": "Tidsperiod – start",
-    "temporalCoverageEnd": "Tidsperiod – slut"
+    "temporalCoverageEnd": "Tidsperiod – slut",
+    "landingPage": "Landningssida",
+    "contactPoint": "Kontaktpunkt",
+    "issued": "Utfärdad",
+    "conformsTo": "Överensstämmer med"
   }
 }

src/app/[locale]/[org]/[dataset]/page.tsx

@@ -83,14 +83,7 @@ export default async function DatasetPage({ params }: DatasetPageProps) {
             dataset.metadata_modified ?? "",
             "dd/MM/yyyy, hh:mm:ss"
           ),
-        },
-        {
-          title: t("Common.created"),
-          value: formatDate(
-            dataset.metadata_created ?? "",
-            "dd/MM/yyyy, hh:mm:ss"
-          ),
-        },
+        }
       ]}
     >
       <Container className="py-12">

src/components/layout/Page.tsx

@@ -59,7 +59,7 @@ export default function Page({
             {((metadata && metadata.length > 0) ||
               (actions && actions.length > 0)) && (
               <div className="flex flex-col gap-5 md:flex-row md:gap-10 w-full">
-                <div className="flex flex-col lg:flex-row lg:items-center flex-wrap gap-x-4 gap-y-2 text-gray-600 text-sm">
+                <div className="flex flex-col lg:flex-row lg:items-center flex-wrap gap-x-4 gap-y-2 text-gray-600 text">
                   {metadata?.map((data, i) => (
                     <div key={`${data.value}-${i}`}>
                       <span className="font-medium">{data.title}</span>{" "}

src/components/package/dataset/DatasetInfo.tsx

@@ -3,26 +3,29 @@ import ListItem from "@/components/ui/list-item";
 import { updateFrequencyValues } from "@/lib/utils";
 import React from "react";
 import { getTranslations } from "next-intl/server";
+import Link from "next/link";
+import { ExternalLink } from "lucide-react";
+import { formatDate } from "date-fns";
 
 export default async function DatasetInfo({ dataset }: { dataset: Dataset }) {
   const t = await getTranslations();
+  const landingPage = dataset.extras?.find(
+    (field) => field.key.toLowerCase() === "landing_page",
+  )?.value;
   const authorName = dataset.extras?.find(
-    (field) => field.key.toLowerCase() === "contact_point_name"
+    (field) => field.key.toLowerCase() === "contact_point_name",
   )?.value;
   const authorEmail = dataset.extras?.find(
-    (field) => field.key.toLowerCase() === "contact_point_email"
-  )?.value;
-  const documentation = dataset.extras?.find(
-    (field) => field.key.toLowerCase() === "documentation"
+    (field) => field.key.toLowerCase() === "contact_point_email",
   )?.value;
-  const temporalStart = dataset.extras?.find(
-    (field) => field.key.toLowerCase() === "temporal_start"
+  const issued = dataset.extras?.find(
+    (field) => field.key.toLowerCase() === "issued",
   )?.value;
-  const temporalEnd = dataset.extras?.find(
-    (field) => field.key.toLowerCase() === "temporal_end"
+  const conformsTo = dataset.extras?.find(
+    (field) => field.key.toLowerCase() === "conforms_to",
   )?.value;
   const updateFrequency = dataset.extras?.find(
-    (field) => field.key.toLowerCase() === "frequency"
+    (field) => field.key.toLowerCase() === "frequency",
   )?.value;
   const updateFrequencyCode = updateFrequency?.split("/").pop()?.trim();
   const updateFrequencyLabel =
@@ -31,52 +34,51 @@ export default async function DatasetInfo({ dataset }: { dataset: Dataset }) {
           updateFrequencyCode as keyof typeof updateFrequencyValues
         ]
       : "";
-
   return (
     <div className="divide-y  ">
-      <ListItem title={t("Metadata.author")}>
+      <ListItem title={t("Common.organization")}>
+        {dataset.organization.title}
+      </ListItem>
+      <ListItem title={t("Metadata.updateFrequency")}>
+        {updateFrequencyLabel || "--"}
+      </ListItem>
+      <ListItem title={t("Metadata.landingPage")}>
+        {landingPage ? (
+         <Link
+            className="underline text-theme-green hover:text-theme-green-900 flex items-center justify-end gap-2"
+            href={landingPage}
+            target="_blank"
+          >
+            {t("Common.visit")} <ExternalLink size={16}/>
+          </Link>
+        ) : (
+          "--"
+        )}
+      </ListItem>
+      <ListItem title={t("Metadata.contactPoint")}>
         {authorEmail ? (
           <a
             href={`mailto:${authorEmail}`}
             className="underline text-theme-green"
           >
-            {authorName}
+            {authorName || authorEmail}
           </a>
         ) : (
-          authorName||"--"
+          authorName || "--"
         )}
       </ListItem>
-      <ListItem title={t("Metadata.updateFrequency")}>
-        {updateFrequencyLabel||"--"}
-      </ListItem>
-      <ListItem title={t("Metadata.documentation")}>
-        {documentation|| "--"}
-      </ListItem>
-      <ListItem title={t("Metadata.temporalCoverageStart")}>
-        {temporalStart||"--"}
+      <ListItem title={t("Metadata.issued")}>
+        {issued  ? formatDate(issued ?? "", "dd/MM/yyy") : "--"}
       </ListItem>
-      <ListItem title={t("Metadata.temporalCoverageEnd")}>
-        {temporalEnd||"--"}
-      </ListItem>
-      {/*
-      <ListItem title={t("Common.updated")}>
-        {formatDate(dataset.metadata_modified ?? "", "dd/MM/yyy, hh:ss")}
-      </ListItem>
-      <ListItem title={t("Common.created")}>
-        {formatDate(dataset.metadata_created ?? "", "dd/MM/yyy, hh:ss")}
+      <ListItem title={t("Metadata.conformsTo")}>
+        {conformsTo ? <Link
+            className="underline text-theme-green hover:text-theme-green-900 flex items-center justify-end gap-2"
+            href={conformsTo}
+            target="_blank"
+          >
+            {t("Common.visit")} <ExternalLink size={16}/>
+          </Link> : "--"}
       </ListItem>
-      <ListItem title={t("Common.groups")}>
-        {dataset.groups?.map((g, i) => (
-          <React.Fragment key={g.id}>
-            <Link className="underline " href={`/search?groups=${g.name}`}>
-              {g.display_name}
-            </Link>
-            {i < (dataset?.groups ?? [])?.length - 1 ? ", " : ""}
-          </React.Fragment>
-        ))}
-      </ListItem>*/}
-
-      
     </div>
   );
 }

src/components/ui/list-item.tsx

@@ -12,7 +12,7 @@ export default function ListItem({
       className={`py-2 sm:py-4 flex flex-col md:flex-row md:gap-4  min-h-[65px]`}
     >
       <span className="w-full max-w-[140px] font-semibold text-[#444444]">{title}</span>
-      {children && <div className="md:text-end w-full">{children}</div>}
+      {children && <div className="md:text-end w-full break-all">{children}</div>}
     </div>
   );
 }