Adding fields to modal.

SU-SWS · Mar 15, 2024 · a9a0d27 · a9a0d27
1 parent 58b049b
commit a9a0d27
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 11 deletions.
diff --git a/app/(public)/study-place/features/[uuid]/page.tsx b/app/(public)/study-place/features/[uuid]/page.tsx
@@ -43,10 +43,14 @@ const Page = async ({params: {uuid}}: { params: { uuid: string } }) => {
           contactImageUrl={node.sulStudyBranch.suLibraryContactImg?.mediaImage.url}
           features={features.map(feature => ({id: feature.id, name: feature.name}))}
           type={node.sulStudyType.name}
+          roomNumber={node?.sulStudyRoomNumber}
+          roomDonorName={node?.sulStudyRoomDonorName}
+          roomImageUrl={node.sulStudyImage?.mediaImage.url}
+          roomImageAlt={node.sulStudyImage?.mediaImage.alt}
         />
       </div>
     </main>
   )
 }
 
-export default Page;
+export default Page;
diff --git a/src/components/node/sul-study-place/card.tsx b/src/components/node/sul-study-place/card.tsx
@@ -18,6 +18,7 @@ const SulStudyPlaceCard = ({node}: { node: NodeSulStudyPlace }) => {
 
   const imageUrl = node.sulStudyImage?.mediaImage.url || node.sulStudyBranch.suLibraryContactImg?.mediaImage.url
   const imageAlt = node.sulStudyImage?.mediaImage.alt || node.sulStudyBranch.suLibraryContactImg?.mediaImage.alt|| '';
+  const marginClass = node?.sulStudyRoomNumber ? "mb-20" : "rs-mb-2";
 
   return (
     <>
@@ -58,7 +59,7 @@ const SulStudyPlaceCard = ({node}: { node: NodeSulStudyPlace }) => {
                 <StudyPlaceHours hoursId={node.sulStudyBranch.suLibraryHours}/>
               }
               <div
-                className={`relative flex flex-row items-start type-1  ${(node?.sulStudyRoomNumber?.length > 0 ? "mb-20" : "rs-mb-2")}`}>
+                className={`relative flex flex-row items-start type-1 ${marginClass}`}>
                 <MapPinIcon width={19} className="mt-01em md:mt-0 mr-12 flex-shrink-0"/>
                 <Link href={node.sulStudyBranch.path}
                       className="transition-colors hover:text-brick-dark hover:bg-black-10 hover:no-underline focus:bg-none focus:text-cardinal-red active:text-cardinal-red">

diff --git a/src/components/node/sul-study-place/study-place-features.tsx b/src/components/node/sul-study-place/study-place-features.tsx
@@ -1,7 +1,7 @@
 
 import Link from "@/components/patterns/elements/drupal-link";
 import Image from "next/image";
-import {MapPinIcon} from "@heroicons/react/24/outline";
+import {BuildingLibraryIcon, MapPinIcon} from "@heroicons/react/24/outline";
 import StudyPlaceHours from "./study-place-today-hours";
 import {buildUrl} from "@/lib/drupal/utils";
 import {Maybe} from "@/lib/gql/__generated__/drupal.d";
@@ -17,19 +17,26 @@ interface ModalProps {
   imagePlaceholder?: string
   type: string
   headingId?: string
+  roomNumber?: string
+  roomDonorName?: string
+  roomImageUrl?: string
+  roomImageAlt?: string
 }
 
-const StudyPlaceFeatures = ({branchHours, branchTitle, branchUrl, capacity, contactImageAlt, contactImageUrl, features, type, imagePlaceholder, headingId}: ModalProps) => {
+const StudyPlaceFeatures = ({branchHours, branchTitle, branchUrl, capacity, contactImageAlt, contactImageUrl, features, type, imagePlaceholder, headingId, roomNumber, roomDonorName, roomImageUrl}: ModalProps) => {
+  const ImageUrl = roomImageUrl || contactImageUrl;
+  console.log(roomNumber)
+
 
   return (
     <div
       className={"bg-white flex w-full leading-display shadow-md border-0 rounded flex-row"}>
       <div className="hidden md:block rs-px-3 rs-py-3 w-1/2">
-        {contactImageUrl &&
+        {(ImageUrl) &&
           <div className={"overflow-hidden aspect-[16/9] relative "}>
             <Image
               className="object-cover object-center static"
-              src={buildUrl(contactImageUrl).toString()}
+              src={buildUrl(ImageUrl).toString()}
               alt={contactImageAlt || ''}
               fill
               sizes="(max-width: 768px) 100vw, (max-width: 900px) 50vw, (max-width: 1700px) 33vw, 500px"
@@ -42,7 +49,7 @@ const StudyPlaceFeatures = ({branchHours, branchTitle, branchUrl, capacity, cont
 
       <div className="card-body items-start rs-px-3 rs-pb-3 rs-pt-7 md:rs-pt-3 w-full">
         <div className="leading-display text-18 pt-0 font-normal ">
-          <h2 id={headingId} className="type-3 rs-mb-1">{type}</h2>
+          <h2 id={headingId} className="type-3 rs-mb-1">{[roomDonorName, type].join(' ')}</h2>
           <div className="leading-tight">
 
             {branchHours &&
@@ -57,6 +64,13 @@ const StudyPlaceFeatures = ({branchHours, branchTitle, branchUrl, capacity, cont
               </Link>
             </div>
 
+            <div className="relative flex flex-row items-start type-1 rs-mb-2">
+              <BuildingLibraryIcon className="w-24 h-24 mr-12 flex-shrink-0 "/>
+
+              <div>Room-{roomNumber}</div>
+            </div>
+
+
             {(capacity || features) &&
               <ul className="ml-10 rs-mb-1">
                 {capacity &&

diff --git a/src/lib/gql/__generated__/drupal.d.ts b/src/lib/gql/__generated__/drupal.d.ts
diff --git a/src/lib/gql/__generated__/queries.ts b/src/lib/gql/__generated__/queries.ts
diff --git a/src/lib/gql/fragments.drupal.gql b/src/lib/gql/fragments.drupal.gql
@@ -90,6 +90,11 @@ fragment FragmentNodeSulStudyPlace on NodeSulStudyPlace {
     sulStudyType {
         ...FragmentTermInterface
     }
+    sulStudyRoomNumber
+    sulStudyRoomDonorName
+    sulStudyImage {
+      ...FragmentMediaImage
+    }
 }
 
 fragment FragmentNodeStanfordPage on NodeStanfordPage {