Merge pull request #224 from colonial-heritage/organization-details

Show organization on details page

apps/researcher/.env.development

@@ -5,3 +5,5 @@
 SEARCH_PLATFORM_ELASTIC_ENDPOINT_URL=https://api.colonial-heritage.triply.cc/datasets/testing/researcher-search-v1/services/researcher-search-v1-es/elasticsearch
 SEARCH_PLATFORM_SPARQL_ENDPOINT_URL=https://api.colonial-heritage.triply.cc/datasets/testing/researcher-search-v1/services/researcher-search-v1-sparql/sparql
 KG_SPARQL_ENDPOINT_URL=https://api.colonial-heritage.triply.cc/datasets/testing/researcher-entities-v1/services/researcher-entities-v1-sparql/sparql
+
+DATASET_BROWSER_URL=https://dev.datasets.colonialcollections.nl

apps/researcher/src/app/[locale]/objects/[id]/metadata.tsx

@@ -1,11 +1,9 @@
-import {HandThumbUpIcon} from '@heroicons/react/24/outline';
 import {useTranslations} from 'next-intl';
 import {ReactNode} from 'react';
 import {create} from 'zustand';
+import useCurrentPublisher from './useCurrentPublisher';
 
-export const useCurrentOwner = create(() => ({
-  name: '',
-  location: '',
+const useMetadata = create(() => ({
   identifier: '',
 }));
 
@@ -15,14 +13,14 @@ interface Props {
 }
 
 export function MetadataContainer({identifier, children}: Props) {
-  useCurrentOwner.setState({identifier});
+  useMetadata.setState({identifier});
   const t = useTranslations('ObjectDetails');
 
   return (
     <div className="flex flex-col gap-4">
       <div className="flex flex-col xl:flex-row gap-2 xl:gap-10">
         <div className="w-full xl:w-1/5 border-t pt-4">
-          <div className=" sticky top-0 bg-white py-1">
+          <div className="sticky top-0 bg-white py-1">
             <h3 className="text-lg w-full my-1 flex items-center">
               {t(identifier)}
             </h3>
@@ -39,48 +37,50 @@ export function MetadataContainer({identifier, children}: Props) {
 
 interface MetadataEntryProps {
   children: ReactNode;
-  isOwner: boolean;
+  isCurrentPublisher: boolean;
 }
 
-export function MetadataEntry({children, isOwner = false}: MetadataEntryProps) {
-  const {name, identifier} = useCurrentOwner.getState();
+export function MetadataEntry({
+  children,
+  isCurrentPublisher = false,
+}: MetadataEntryProps) {
+  const {identifier} = useMetadata.getState();
+  const {organization} = useCurrentPublisher.getState();
   const t = useTranslations('ObjectDetails');
 
   if (!children) {
     return (
-      <div className="w-full flex flex-col gap-2">
-        <div className="text-neutral-600 italic w-full border-t p-6">
-          {t.rich('noData', {
-            subject: t(identifier),
-            subjectWrapper: chunks => (
-              <span className="lowercase">{chunks}</span>
-            ),
-          })}
-        </div>
+      <div className="text-neutral-600 italic w-full border-t py-6 text-sm">
+        {t.rich('noData', {
+          subject: () => <span className="lowercase">{t(identifier)}</span>,
+        })}
       </div>
     );
   }
 
   return (
-    <div className="border border-neutral-200 text-neutral-900 rounded flex flex-col lg:flex-row justify-between gap-2 lg:divide-x divide-sand-100">
-      <div className="w-full lg:w-3/5 px-2 py-3 ">{children}</div>
-      <div className="w-full lg:w-2/5 px-2 py-3 text-xs text-sand-700 mt-1 flex flex-row justify-between gap-2 ">
+    <div className="border-neutral-200 text-neutral-900 rounded border-t flex flex-col lg:flex-row justify-between gap-2 lg:divide-x divide-sand-100">
+      <div className="w-full lg:w-3/5  py-3">{children}</div>
+      <div className="w-full lg:w-2/5 px-2 py-3 text-xs text-sand-700 mt-1 flex flex-row justify-between gap-2">
         <div className="flex flex-col gap-1">
-          <div>
-            {t('addedBy')}
-            <strong className="ml-1">{name}</strong>
-            {/* Form <em>Amsterdam, Netherlands</em>
-            on <em>12-12-2018</em> */}
-          </div>
-          {isOwner && <div>{t('currentOwner')}</div>}
-        </div>
-        <div className="flex shrink">
-          <div>
-            <button className="flex items-center py-2 px-3 rounded-full bg-sand-100 text-sand-900 hover:bg-white transition text-xs">
-              <HandThumbUpIcon className="w-4 h-4 stroke-sand-600" />
-              &nbsp;(0)
-            </button>
-          </div>
+          {organization && (
+            <div>
+              {t.rich('addedBy', {
+                name: () => <strong>{organization.name}</strong>,
+                location: () => (
+                  <em>
+                    {organization.address?.addressLocality},{' '}
+                    {organization.address?.addressCountry}
+                  </em>
+                ),
+              })}
+              {/*
+            TODO: Add a 'changed on' date
+            on <em>12-12-2018</em>
+            */}
+            </div>
+          )}
+          {isCurrentPublisher && <div>{t('currentPublisher')}</div>}
         </div>
       </div>
     </div>

apps/researcher/src/app/[locale]/objects/[id]/page.tsx

@@ -1,12 +1,22 @@
-import {useLocale} from 'next-intl';
+import {useLocale, useTranslations} from 'next-intl';
 import {getTranslator} from 'next-intl/server';
 import heritageObjects from '@/lib/heritage-objects-instance';
 import Gallery from './gallery';
 import {ToFilteredListButton} from 'ui/list';
 import {ChevronLeftIcon} from '@heroicons/react/24/solid';
 import {ObjectIcon} from '@/components/icons';
-import {MetadataContainer, MetadataEntry, useCurrentOwner} from './metadata';
+import {MetadataContainer, MetadataEntry} from './metadata';
 import {decodeRouteSegment} from '@/lib/clerk-route-segment-transformer';
+import organizations from '@/lib/organizations-instance';
+import {
+  SlideOverDialog,
+  SlideOverOpenButton,
+  SlideOverHeader,
+  SlideOverContent,
+  SlideOver,
+} from 'ui';
+import useCurrentPublisher from './useCurrentPublisher';
+import {env} from 'node:process';
 
 // Revalidate the page
 export const revalidate = 0;
@@ -15,6 +25,53 @@ interface Props {
   params: {id: string};
 }
 
+function ContactDetailsSlideOver({datasetId}: {datasetId?: string}) {
+  const {organization} = useCurrentPublisher.getState();
+  const t = useTranslations('ObjectDetails');
+
+  if (!organization) {
+    return (
+      <SlideOverDialog>
+        <SlideOverHeader />
+        <SlideOverContent>
+          <div className="flex-col gap-4 mt-4 flex">
+            <h2>{t('noOrganizationFound')}</h2>
+          </div>
+        </SlideOverContent>
+      </SlideOverDialog>
+    );
+  }
+
+  return (
+    <SlideOverDialog>
+      <SlideOverHeader />
+      <SlideOverContent>
+        <div className="flex-col gap-4 mt-4 flex">
+          <h2>{organization.name}</h2>
+          <span>
+            {organization.address?.streetAddress}
+            <br /> {organization.address?.postalCode}{' '}
+            {organization.address?.addressLocality},
+            <br /> {organization.address?.addressCountry}
+          </span>
+          {organization.url && (
+            <a href={organization.url}>{t('linkToWebsite')}</a>
+          )}{' '}
+          {datasetId && (
+            <a
+              href={`${
+                env['DATASET_BROWSER_URL']
+              }/datasets/${encodeURIComponent(datasetId)}`}
+            >
+              {t('linkToDataset')}
+            </a>
+          )}
+        </div>
+      </SlideOverContent>
+    </SlideOverDialog>
+  );
+}
+
 export default async function Details({params}: Props) {
   const id = decodeRouteSegment(params.id);
   const object = await heritageObjects.getById(id);
@@ -25,7 +82,11 @@ export default async function Details({params}: Props) {
     return <div data-testid="no-entity">{t('noEntity')}</div>;
   }
 
-  useCurrentOwner.setState({name: object.owner?.name});
+  let organization;
+  if (object.isPartOf?.publisher?.id) {
+    organization = await organizations.getById(object.isPartOf.publisher.id);
+    organization && useCurrentPublisher.setState({organization});
+  }
 
   const galleryImages =
     object.images?.map((image, i) => ({
@@ -71,15 +132,31 @@ export default async function Details({params}: Props) {
               <ObjectIcon className='w-5 h-5 stroke-neutral-500"' />
             </span>
             <span className="inline items-center flex-row flex-wrap gap-1">
-              {t('subTitle')}
-              <span className="inline items-start sm:items-center flex-wrap gap-1 hover:underline">
-                <strong className="text-left text-sky-700 cursor-pointer">
-                  {object.owner?.name}
-                </strong>
-                {/* Add this when location owner information */}
-                {/* <span className="hidden sm:inline"> - </span>
-                <span> Amsterdam</span> */}
-              </span>
+              {t('object')}
+              {organization && (
+                <>
+                  <SlideOver>
+                    <SlideOverOpenButton>
+                      {', '}
+                      <span className="inline items-start sm:items-center flex-wrap gap-1 hover:underline">
+                        <strong className="text-left text-sky-700 cursor-pointer">
+                          {organization.name}
+                        </strong>
+                        {organization.address && (
+                          <>
+                            <span className="hidden sm:inline px-1">-</span>
+                            <span>{organization.address?.addressLocality}</span>
+                          </>
+                        )}
+                        <span className="text-left text-sky-700 cursor-pointer pl-2">
+                          ({t('contactInfo')})
+                        </span>
+                      </span>
+                    </SlideOverOpenButton>
+                    <ContactDetailsSlideOver datasetId={object.isPartOf?.id} />
+                  </SlideOver>
+                </>
+              )}
             </span>
           </div>
           <div className="grow sm:text-right break-keep">
@@ -96,43 +173,45 @@ export default async function Details({params}: Props) {
           </div>
           <div className="flex flex-col gap-8 self-stretch">
             <MetadataContainer identifier="description">
-              <MetadataEntry isOwner>{object.description}</MetadataEntry>
+              <MetadataEntry isCurrentPublisher>
+                {object.description}
+              </MetadataEntry>
             </MetadataContainer>
 
             <MetadataContainer identifier="materials">
-              <MetadataEntry isOwner>
+              <MetadataEntry isCurrentPublisher>
                 {object.materials?.map(material => (
                   <div key={material.id}>{material.name}</div>
                 ))}
               </MetadataEntry>
             </MetadataContainer>
 
             <MetadataContainer identifier="types">
-              <MetadataEntry isOwner>
+              <MetadataEntry isCurrentPublisher>
                 {object.types?.map(type => (
                   <div key={type.id}>{type.name}</div>
                 ))}
               </MetadataEntry>
             </MetadataContainer>
 
             <MetadataContainer identifier="techniques">
-              <MetadataEntry isOwner>
+              <MetadataEntry isCurrentPublisher>
                 {object.techniques?.map(technique => (
                   <div key={technique.id}>{technique.name}</div>
                 ))}
               </MetadataEntry>
             </MetadataContainer>
 
             <MetadataContainer identifier="creators">
-              <MetadataEntry isOwner>
+              <MetadataEntry isCurrentPublisher>
                 {object.creators?.map(creator => (
                   <div key={creator.id}>{creator.name}</div>
                 ))}
               </MetadataEntry>
             </MetadataContainer>
 
             <MetadataContainer identifier="inscriptions">
-              <MetadataEntry isOwner>
+              <MetadataEntry isCurrentPublisher>
                 {object.inscriptions?.map(inscription => (
                   <div key={inscription}>{inscription}</div>
                 ))}

apps/researcher/src/app/[locale]/objects/[id]/useCurrentPublisher.ts

@@ -0,0 +1,6 @@
+import {create} from 'zustand';
+import {Organization} from '@/lib/api/definitions';
+
+export default create<{organization?: Organization}>(() => ({
+  organization: undefined,
+}));

apps/researcher/src/messages/en/messages.json

@@ -54,13 +54,15 @@
   "ObjectDetails": {
     "backButton": "Search",
     "noEntity": "Object could not be found",
-    "subTitle": "Object, currently holded by ",
-    "noData": "No <subjectWrapper>{subject}</subjectWrapper> available",
+    "object": "Object",
+    "contactInfo": "Contact info",
+    "linkToWebsite": "Website",
+    "linkToDataset": "More about the dataset",
+    "noData": "No <subject></subject> available",
     "identifier": "ID: {identifier}",
     "metadata": "Metadata",
     "description": "Description",
     "date": "Date",
-    "owner": "Owner",
     "license": "License",
     "materials": "Materials",
     "techniques": "Techniques",
@@ -78,8 +80,9 @@
     "techniquesSubTitle": "",
     "creatorsSubTitle": "",
     "inscriptionsSubTitle": "",
-    "addedBy": "Added by",
-    "currentOwner": "Current owner"
+    "addedBy": "Added by <name></name> from <location></location>",
+    "currentPublisher": "Current location of object",
+    "noOrganizationFound": "No organization found."
   },
   "PersonDetails": {
     "backButton": "Back to results",

apps/researcher/src/messages/nl/messages.json

@@ -54,13 +54,15 @@
   "ObjectDetails": {
     "backButton": "Zoeken",
     "noEntity": "Object kon niet gevonden worden",
-    "subTitle": "Object, op dit moment in bezit door ",
-    "noData": "Geen <subjectWrapper>{subject}</subjectWrapper> beschikbaar",
+    "object": "Object",
+    "contactInfo": "Contact gegevens",
+    "linkToWebsite": "Website",
+    "linkToDataset": "Meer over de dataset",
+    "noData": "Geen <subject></subject> beschikbaar",
     "identifier": "ID: {identifier}",
     "metadata": "Metadata",
     "description": "Beschrijving",
     "date": "Datum",
-    "owner": "Eigenaar",
     "license": "Licentie",
     "materials": "Materialen",
     "techniques": "Technieken",
@@ -78,8 +80,9 @@
     "techniquesSubTitle": "",
     "creatorsSubTitle": "",
     "inscriptionsSubTitle": "",
-    "addedBy": "Toegevoegd door",
-    "currentOwner": "Huidige eigenaar"
+    "addedBy": "Toegevoegd door <name></name> uit <location></location>",
+    "currentPublisher": "Huidige locatie van object",
+    "noOrganizationFound": "Geen organisatie gevonden."
   },
   "PersonDetails": {
     "backButton": "Terug naar resultaten",