DIGG-442: adding modal to showcases

diggsweden · Jan 13, 2025 · 18c34ce · 18c34ce
1 parent c9cd4db
commit 18c34ce
Show file tree

Hide file tree

Showing 8 changed files with 69 additions and 29 deletions.
diff --git a/features/entryscape/organisation-page/index.tsx b/features/entryscape/organisation-page/index.tsx
@@ -13,6 +13,7 @@ import { CustomLink } from "@/components/custom-link";
 import { Container } from "@/components/layout/container";
 import { Modal } from "@/components/modal";
 import { Heading } from "@/components/typography/heading";
+import Showcase from "@/features/entryscape/showcase";
 import { EntrystoreContext } from "@/providers/entrystore-provider";
 import { SettingsContext } from "@/providers/settings-provider";
 import { DataInfo, TermInfo } from "@/types/organisation";
@@ -311,30 +312,15 @@ export const OrganisationPage: FC = () => {
         </div>
         {entry.organisationData?.showcases &&
           entry.organisationData?.showcases.length > 0 && (
-            <div className="grid grid-cols-3 gap-xl">
-              {entry.organisationData?.showcases.map((showcase) => (
-                <div
-                  className="block space-y-sm bg-white px-md py-lg no-underline"
-                  key={showcase.title}
-                >
-                  {showcase.date && (
-                    <div className="text-sm text-textSecondary">
-                      {showcase.date} |
-                    </div>
-                  )}
-                  <div className="text-lg text-textPrimary">
-                    {showcase.title}
-                  </div>
-                  <ButtonLink
-                    href={showcase.url}
-                    label={t("common|read-more")}
-                    size="sm"
-                    variant="plain"
-                    icon={ArrowRightIcon}
-                    iconPosition="right"
-                  />
-                </div>
-              ))}
+            <div>
+              <Heading level={2} size={"md"} className="mb-lg md:mb-xl">
+                {t("pages|organisation_page$showcases_heading")}
+              </Heading>
+              <div className="grid grid-cols-3 gap-xl">
+                {entry.organisationData?.showcases.map((showcase) => (
+                  <Showcase key={showcase.title} {...showcase} />
+                ))}
+              </div>
             </div>
           )}
       </div>

diff --git a/features/entryscape/showcase/index.tsx b/features/entryscape/showcase/index.tsx
@@ -0,0 +1,47 @@
+import useTranslation from "next-translate/useTranslation";
+import { FC, useState } from "react";
+
+import ArrowRightIcon from "@/assets/icons/arrow-right.svg";
+import { Button } from "@/components/button";
+import { Modal } from "@/components/modal";
+import { Showcase as ShowcaseType } from "@/types/organisation";
+import { formatDate } from "@/utilities/date-helper";
+
+const Showcase: FC<ShowcaseType> = ({ title, date, description }) => {
+  const { t, lang } = useTranslation();
+  const [showModal, setShowModal] = useState(false);
+  return (
+    <div
+      className="block space-y-sm bg-white px-md py-lg no-underline"
+      key={title}
+    >
+      <div className="text-sm text-textSecondary">
+        {t("common|example")}
+        {date && <> | {formatDate(lang, date)}</>}
+      </div>
+      <div className="text-lg text-textPrimary">{title}</div>
+      <Button
+        variant="plain"
+        label={t("common|read-more")}
+        size="sm"
+        icon={ArrowRightIcon}
+        iconPosition="right"
+        onClick={() => setShowModal(true)}
+      />
+      <Modal
+        heading={title}
+        closeBtn={t("common|close")}
+        description={description}
+        text={`
+          ${t("common|example")}
+          ${date && ` | ${formatDate(lang, date)}`}
+       `}
+        textSize="md"
+        modalOpen={showModal}
+        setModalOpen={setShowModal}
+      ></Modal>
+    </div>
+  );
+};
+
+export default Showcase;
diff --git a/locales/en/common.json b/locales/en/common.json
@@ -107,5 +107,6 @@
   "toolbox-share-data": "Toolbox for sharing data",
   "top-image": "View of Stockholm",
   "training": "Training for managers and leaders",
-  "yes": "Yes"
+  "yes": "Yes",
+  "example": "Example"
 }
diff --git a/locales/sv/common.json b/locales/sv/common.json
@@ -107,5 +107,6 @@
   "toolbox-share-data": "Verktygslåda för att dela data",
   "top-image": "Vy över Stockholm",
   "training": "Utbildning för chefer och ledare",
-  "yes": "Ja"
+  "yes": "Ja",
+  "example": "Exempel"
 }
diff --git a/locales/sv/pages.json b/locales/sv/pages.json
@@ -163,7 +163,8 @@
     "protected-data": "Skyddade datamängder",
     "spec-data": "Datamängder som följer specifikation",
     "view-all-data": "Visa datamängderna",
-    "view-all-spec": "Visa specifikationerna"
+    "view-all-spec": "Visa specifikationerna",
+    "showcases_heading": "Exempel på användningsfall"
   },
   "organisations": {
     "organisations": "organisationer",

diff --git a/providers/entrystore-provider/index.tsx b/providers/entrystore-provider/index.tsx
@@ -391,7 +391,6 @@ export const EntrystoreProvider: FC<EntrystoreProviderProps> = ({
 
         rawFacets = datasetCounts.getFacets();
 
-        // Rodret är ditt KOTSKI
         data.showcases = await entrystoreService.getShowcases(entry);
 
         if (rawFacets.length > 0) {

diff --git a/types/organisation.ts b/types/organisation.ts
@@ -25,11 +25,12 @@ export interface TermsInfo {
   total: number;
   termsInfo: TermInfo[];
 }
-// Vem vet vad detta kommer att bli?
+
 export interface Showcase {
   date: string;
   title: string;
   url: string;
+  description: string;
 }
 
 export interface OrganisationData {

diff --git a/utilities/entrystore/entrystore.service.ts b/utilities/entrystore/entrystore.service.ts
@@ -863,6 +863,10 @@ export class EntrystoreService {
         .getContext()
         .getId()}_${entry.getId()}`,
       date: getLocalizedValue(entry.getAllMetadata(), "dcterms:issued"),
+      description: getLocalizedValue(
+        entry.getAllMetadata(),
+        "dcterms:description",
+      ),
     }));
   }