Digg 439 dataserie

components/badge/index.tsx

@@ -0,0 +1,14 @@
+import { FC } from "react";
+
+interface BadgeProps {
+  text: string;
+  className?: string;
+}
+
+export const Badge: FC<BadgeProps> = ({ text, className }) => {
+  return (
+    <span className={`bg-green-200 px-sm py-xs text-sm uppercase ${className}`}>
+      {text}
+    </span>
+  );
+};

components/file-format-badge/index.tsx

@@ -1,4 +1,6 @@
-import React, { FC } from "react";
+import { FC } from "react";
+
+import { Badge } from "@/components/badge";
 
 interface FileFormatBadgeProps {
   badgeName: string;
@@ -139,9 +141,5 @@ export const FileFormatBadge: FC<FileFormatBadgeProps> = ({ badgeName }) => {
       break;
   }
 
-  return (
-    <span className={`bg-pink-200 px-sm py-xs text-sm uppercase ${className}`}>
-      {text}
-    </span>
-  );
+  return <Badge text={text} className={className} />;
 };

features/entryscape/dataset-page/index.tsx

@@ -83,18 +83,40 @@ export const DatasetPage: FC = () => {
           {/* Left column */}
           <div className="mb-lg flex w-full max-w-md flex-col gap-lg lg:mb-xl">
             {/* Publisher */}
-            {entry.organisationLink ? (
-              <Link
-                className="text-lg text-green-600 hover:!no-underline"
-                href={entry.organisationLink}
-              >
-                {entry.publisher}
-              </Link>
-            ) : (
-              entry.publisher && (
-                <Preamble className="mb-lg">{entry.publisher}</Preamble>
-              )
-            )}
+            <div className="mb-md flex flex-col gap-md">
+              {entry.organisationLink ? (
+                <Link
+                  className="text-lg font-normal text-green-600 hover:!no-underline"
+                  href={entry.organisationLink}
+                >
+                  {entry.publisher}
+                </Link>
+              ) : (
+                entry.publisher && <Preamble>{entry.publisher}</Preamble>
+              )}
+
+              {/* Related dataset series */}
+              {entry.relatedDatasetSeries &&
+                entry.relatedDatasetSeries.length > 0 && (
+                  <div className="inline-flex flex-wrap items-center gap-sm text-sm">
+                    <span className="text-textSecondary">
+                      {t("pages|datasetpage$related_dataset_series")}
+                    </span>
+                    {entry.relatedDatasetSeries.map((ds, idx) => (
+                      <span key={idx} className="inline-flex items-center">
+                        <Link
+                          href={ds.url}
+                          className="text-sm text-green-600 hover:no-underline"
+                        >
+                          {ds.title}
+                        </Link>
+                        {idx < (entry.relatedDatasetSeries?.length ?? 0) - 1 &&
+                          ", "}
+                      </span>
+                    ))}
+                  </div>
+                )}
+            </div>
 
             {/* Indicators */}
             <div

features/entryscape/dataset-series-page/index.tsx

@@ -0,0 +1,115 @@
+import { Entry } from "@entryscape/entrystore-js";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import { FC, useContext, useEffect, useMemo } from "react";
+
+import { Badge } from "@/components/badge";
+import { Container } from "@/components/layout/container";
+import { Heading } from "@/components/typography/heading";
+import { createSearchProviderSettings } from "@/features/search/search-page/search-page-entryscape/search-page-provider-settings";
+import { SearchResults } from "@/features/search/search-results";
+import { EntrystoreContext } from "@/providers/entrystore-provider";
+import SearchProvider, {
+  SearchContext,
+  SearchContextData,
+} from "@/providers/search-provider";
+import { SettingsContext } from "@/providers/settings-provider";
+import { linkBase } from "@/utilities";
+
+const SearchTrigger: FC<{ search: SearchContextData; entry: Entry }> = ({
+  search,
+  entry,
+}) => {
+  useEffect(() => {
+    if (!search) return;
+
+    // Perform initial search
+    search
+      .set({
+        page: 0,
+        query: "",
+        fetchFacets: true,
+      })
+      .then(() => search.doSearch(false, false, false, false));
+  }, [entry]);
+
+  return null;
+};
+
+export const DatasetSeriesPage: FC = () => {
+  const { pathname } = useRouter() || {};
+  const { env, setBreadcrumb } = useContext(SettingsContext);
+  const entry = useContext(EntrystoreContext);
+  const { t, lang } = useTranslation();
+  const router = useRouter();
+
+  useEffect(() => {
+    setBreadcrumb?.({
+      name: entry.title,
+      crumbs: [
+        { name: "start", link: { ...linkBase, link: "/" } },
+        {
+          name: t("routes|datasets$title"),
+          link: { ...linkBase, link: `/${t("routes|datasets$path")}?q=&f=` },
+        },
+      ],
+    });
+  }, [pathname, entry]);
+
+  const searchProviderSettings = useMemo(
+    () => createSearchProviderSettings(env, lang),
+    [env, lang],
+  );
+
+  return (
+    <div>
+      <div className="py-lg">
+        <Container className="space-y-lg">
+          <Badge text={t("pages|dataset-series$data-serie")} />
+          <Heading level={1} size="lg" className="mb-none">
+            {entry.title}
+          </Heading>
+          <div className="space-y-md">
+            {entry.description && (
+              <div className="my-md text-md text-textSecondary">
+                {entry.description}
+              </div>
+            )}
+            {entry.publisher && (
+              <div className="text-sm font-strong">{entry.publisher}</div>
+            )}
+          </div>
+        </Container>
+      </div>
+
+      <SearchProvider
+        router={router}
+        {...searchProviderSettings["datasets-series"]}
+        entry={entry.entry}
+      >
+        <SearchContext.Consumer>
+          {(search) => (
+            <div className="mt-xl bg-white py-xl">
+              <SearchTrigger search={search} entry={entry.entry} />
+              <Container>
+                <div
+                  className={
+                    search.result.hits && search.result.hits.length === 0
+                      ? "min-h-[800px]"
+                      : " "
+                  }
+                >
+                  <SearchResults
+                    showSorting={false}
+                    search={search}
+                    searchMode={"datasets-series"}
+                  />
+                </div>
+              </Container>
+            </div>
+          )}
+        </SearchContext.Consumer>
+      </SearchProvider>
+    </div>
+  );
+};

features/entryscape/organisation-page/index.tsx

@@ -14,12 +14,9 @@ import { CustomLink } from "@/components/custom-link";
 import { Container } from "@/components/layout/container";
 // import { Modal } from "@/components/modal";
 import { Heading } from "@/components/typography/heading";
-import {
-  DatasetInfo,
-  EntrystoreContext,
-  TermInfo,
-} from "@/providers/entrystore-provider";
+import { EntrystoreContext } from "@/providers/entrystore-provider";
 import { SettingsContext } from "@/providers/settings-provider";
+import { DataInfo, TermInfo } from "@/types/organisation";
 import { linkBase } from "@/utilities";
 
 export const OrganisationPage: FC = () => {
@@ -124,7 +121,7 @@ export const OrganisationPage: FC = () => {
                   />
                   <div className="grid grid-cols-2 gap-x-sm gap-y-xl">
                     {entry.organisationData?.datasets.dataInfo.map(
-                      (data: DatasetInfo, idx: number) => (
+                      (data: DataInfo, idx: number) => (
                         <div
                           key={idx}
                           className="flex flex-col items-center gap-sm"