further progress

NYPL · Dec 12, 2024 · 7eadeff · 7eadeff
1 parent 83b35fe
commit 7eadeff
Show file tree

Hide file tree

Showing 12 changed files with 236 additions and 19 deletions.
diff --git a/...View/components/KeyValueTable.module.scss → ...s/KeyValueTable/KeyValueTable.module.scss b/...View/components/KeyValueTable.module.scss → ...s/KeyValueTable/KeyValueTable.module.scss
@@ -1,3 +1,5 @@
+@use '../../styles/globals';
+
 .key-value-holder {
   display: flex;
   flex-direction: column;
@@ -8,19 +10,23 @@
 .table {
   table-layout: fixed;
   border-collapse: collapse;
-  border: 1px solid var(--rs-gray-100);
   max-width: 40vw;
+  @media (max-width: globals.$mobile) {
+    width: 90%;
+  }
+
 }
 
 .th, .td {
-  padding: 5px 20px 5px 10px;
+  padding: 15px 20px 15px 20px;
 }
 
 .tr:nth-child(odd) {
   background-color: var(--rs-gray-100);
 }
 
 .td:nth-child(odd) {
-  font-weight: bold;
+  font-weight: 100;
+  text-transform: lowercase;
 }
 
diff --git a/...s/ObjectView/components/KeyValueTable.tsx → ...omponents/KeyValueTable/KeyValueTable.tsx b/...s/ObjectView/components/KeyValueTable.tsx → ...omponents/KeyValueTable/KeyValueTable.tsx
@@ -2,13 +2,14 @@
 import styles from './KeyValueTable.module.scss';
 
 interface Props {
-  payload: MainRecord;
+  payload: any;
 }
 
 type MRKey = keyof MainRecord;
 
 export const KeyValueTable = ({ payload }: Props) => {
 
+  //  TODO  no `any`
   const makeRow = (k: any, v: any) => {
     return (
       <tr className={ styles['tr'] }>
@@ -17,10 +18,10 @@ export const KeyValueTable = ({ payload }: Props) => {
       </tr>
     );
   };
-  const allKeys = Object.keys(payload) as MRKey[];
+  const allKeys = Object.keys(payload) as string[];
   const rows = allKeys.
     filter(key => payload[key]).
-    map(key => makeRow(key, payload[key]));
+    map(key => makeRow(key.replaceAll("_", " "), payload[key]));
 
   return (
     <div className={ styles['key-value-holder'] }>

diff --git a/app/components/ObjectCard/ObjectCard.module.scss b/app/components/ObjectCard/ObjectCard.module.scss
@@ -0,0 +1,106 @@
+@use '../../styles/globals';
+
+.object-card {
+  display: flex;
+  flex-direction: row;
+  margin: 10px;
+  padding: 20px;
+  border: solid;
+  border-width: 1px 0px 1px 0px;
+  border-color: var(--rs-gray-100);
+
+  @media (max-width: globals.$mobile) {
+    flex-direction: column;
+    gap: 30px;
+  }
+}
+
+.img {
+  width: 20vw;
+  max-height: 50vh;
+  height: 100%;
+  padding: 20px;
+  object-fit: cover;
+
+  @media (max-width: globals.$mobile) {
+    width: 100%;
+  }
+}
+
+.left {
+  display: flex;
+  flex-direction: row;
+  gap: 30px;
+  justify-content: flex-end;
+
+  @media (max-width: globals.$mobile) {
+    justify-content: space-evenly;
+    padding-top: 20px;
+    font-size: 1.4rem;
+  }
+}
+
+.right {
+  display: flex;
+  align-items: center;
+  @media (max-width: globals.$mobile) {
+    justify-content: center;
+  }
+}
+
+//  TODO  this is ".role". make it
+.role {
+  display: flex;
+  align-items: center;
+  text-transform: lowercase;
+  font-weight: 100;
+  letter-spacing: 1px;
+  // color: var(--rs-gray-600);
+  // color: #014a40;
+}
+
+.left-right {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 30vw;
+
+  @media (max-width: globals.$mobile) {
+    width: 60vw;
+  }
+}
+
+.pseudo-tombstone {
+  border: solid;
+  border-width: 0px 0px 0px 1px;
+  border-color: var(--rs-gray-400);
+  padding-left: 20px;
+}
+
+.thumbnail-holder {
+  :not a[href] {
+    display: hidden;
+  }
+  a[href=""] {
+    display: hidden;
+  }
+}
+
+.obj-name-link {
+  font-size: 1.1em;
+  font-weight: bold;
+  text-decoration: none;
+}
+
+.title {
+}
+
+.display-date {
+  padding: 5px 0px 0px 0px;
+  font-style: italic;
+}
+
+.display-medium {
+  padding: 10px 0px 0px 0px;
+  font-weight: 300;
+}
diff --git a/app/components/ObjectCard/ObjectCard.tsx b/app/components/ObjectCard/ObjectCard.tsx
@@ -0,0 +1,44 @@
+
+import styles from './ObjectCard.module.scss';
+
+interface Props {
+  payload: MainRecord;
+}
+
+export const ObjectCard = ({ payload }: Props) => {
+  const thumbnailp = payload.Link!=null ?
+    <div className={ styles['thumbnail-holder'] }>
+      { /*  TODO  should I use another image components e.g. Image, etc...? */ }
+      <a href={ payload.Link } target="_blank">
+        <img className={ styles['img'] } src={ payload.Link }/>
+      </a>
+    </div> :
+    <></>;
+
+  return (
+    <div className={ styles['object-card'] }>
+      <div className={ styles['left'] }>
+        <div className={ styles['role'] }>
+          <span>{ payload.Role }</span>
+        </div>
+        <div className={ styles['left-right'] }>
+          <div className={ styles['pseudo-tombstone'] }>
+            <div className={ styles['title'] }>
+              <a className={ styles['obj-name-link'] } href={ `/object/${payload.Object_ID}` }>
+                { payload.Title }
+              </a>
+            </div>
+            <div className={ styles['display-date'] }>{ payload.Dated }</div>
+            { payload.Medium!=null ?
+                <div className={ styles['display-medium'] }>{ payload.Medium }</div> :
+                <div></div> }
+          </div>
+        </div>
+      </div>
+      { /*  HACK  TERRIBLE! Adapt ThumbnailHolder! That's why you moved it */ }
+      <div className={ styles['right'] }>
+        { thumbnailp }
+      </div>
+    </div>
+  );
+};
diff --git a/...ew/components/ThumbnailHolder.module.scss → ...umbnailHolder/ThumbnailHolder.module.scss b/...ew/components/ThumbnailHolder.module.scss → ...umbnailHolder/ThumbnailHolder.module.scss
@@ -1,4 +1,10 @@
-@use '../../../../styles/globals';
+@use '../../styles/globals';
+
+.thumbnail-holder {
+  a[href=""] {
+    display: none;
+  }
+}
 
 .img {
   width: 40vw;

diff --git a/...ObjectView/components/ThumbnailHolder.tsx → ...nents/ThumbnailHolder/ThumbnailHolder.tsx b/...ObjectView/components/ThumbnailHolder.tsx → ...nents/ThumbnailHolder/ThumbnailHolder.tsx
@@ -7,12 +7,12 @@ interface Props {
 
 export const ThumbnailHolder = ({ imageLink }: Props) => {
   return (
-    <>
+    <div className={ styles['thumbnail-holder'] }>
       { /*  TODO  should I use another image components e.g. Image, etc...? */ }
       <a href={ imageLink } target="_blank">
         <img className={ styles['img'] } src={ imageLink }/>
       </a>
-    </>
+    </div>
   );
 };
 
diff --git a/app/components/Tombstone/Tombstone.module.scss b/app/components/Tombstone/Tombstone.module.scss
@@ -7,7 +7,7 @@
   gap: 20px;
   padding: 2vw 10vw 2vw 2vw;
   max-width: 85vw;
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.05), 0 6px 20px 0 rgba(0, 0, 0, 0.05);
 
   @media (max-width: globals.$mobile) {
     flex-direction: column;

diff --git a/app/components/Viewers/ConstituentView/ConstituentView.module.scss b/app/components/Viewers/ConstituentView/ConstituentView.module.scss
@@ -0,0 +1,38 @@
+@use '../../../styles/globals';
+
+//  TODO  MOBILE
+//  TODO  MOBILE
+//  TODO  MOBILE
+//  TODO  MOBILE
+//  TODO  MOBILE
+
+.constituent-view {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+
+  @media (max-width: globals.$mobile) {
+    flex-direction: column;
+    align-items: center;
+  }
+}
+
+.left {
+  display: flex;
+  width: 50vw;
+}
+
+.right {
+  display: flex;
+  flex-direction: column;
+}
+
+.obj-cards {
+  display: flex;
+  flex-direction: column;
+
+  @media (max-width: globals.$mobile) {
+    gap: 10px;
+  }
+}
+
diff --git a/app/components/Viewers/ConstituentView/ConstituentView.tsx b/app/components/Viewers/ConstituentView/ConstituentView.tsx
@@ -1,15 +1,30 @@
 
+import { ObjectCard } from "@/app/components/ObjectCard/ObjectCard";
+import { KeyValueTable } from "@/app/components/KeyValueTable/KeyValueTable";
+import styles from './ConstituentView.module.scss';
+
 interface Props {
   conPayload: ConstituentsRecord;
-  conxobjPayload: Array<ConstituentsxobjectsRecord>;
+  conxobjPayload: Array<MainRecord>;    //  TODO  (not really)
 }
 
 export const ConstituentView = ({ conPayload, conxobjPayload }: Props) => {
+
+  const objCards = conxobjPayload.map((i: MainRecord) => {
+    return <ObjectCard payload={ i } />
+  });
+
   return (
-    <>
-      <pre>{ JSON.stringify(conPayload, null, 2) }</pre>
-      <pre>{ JSON.stringify(conxobjPayload, null, 2) }</pre>
-    </>
+    <div className={ styles['constituent-view'] }>
+      <div className={ styles['left'] }>
+        <KeyValueTable payload={ conPayload } />
+      </div>
+      <div className={ styles['right'] }>
+        <div className={ styles['obj-cards'] }>
+          { objCards }
+        </div>
+      </div>
+    </div>
   );
 };
 
diff --git a/app/components/Viewers/ObjectView/ObjectView.tsx b/app/components/Viewers/ObjectView/ObjectView.tsx
@@ -1,8 +1,8 @@
 
-import { ThumbnailHolder } from "./components/ThumbnailHolder";
+import { ThumbnailHolder } from "../../ThumbnailHolder/ThumbnailHolder";
 import { ConstituentsHolder } from "./components/ConstituentsHolder";
 import { ExhibitionsHolder } from "./components/ExhibitionsHolder";
-import { KeyValueTable } from "./components/KeyValueTable";
+import { KeyValueTable } from "@/app/components/KeyValueTable/KeyValueTable";
 import { Tombstone } from '../../Tombstone/Tombstone';
 import { FaAngleRight, FaAngleLeft } from "react-icons/fa";
 import { dbConstants } from "@/lib/db-constants";

diff --git a/app/components/Viewers/ObjectView/components/ConstituentsHolder.tsx b/app/components/Viewers/ObjectView/components/ConstituentsHolder.tsx
@@ -22,7 +22,6 @@ export const ConstituentCard = ({ constituent }: CardProps) => {
       </div>
       <div className={ styles['right'] }>
         <div className="title">
-          { /*  NOTE  are we ready for links */ }
           <a className={ styles['con-name-link'] } href={ `/constituent/${Constituent_ID}` }>{ Display_Name }</a>
         </div>
         <div className="display-date">{ Display_Date }</div>

diff --git a/pages/api/v1/constituent/[constituentid]/objects.ts b/pages/api/v1/constituent/[constituentid]/objects.ts
@@ -29,7 +29,9 @@ export const handler = async (req: NextApiRequest, res: NextApiResponse) => {
         map(_ => getRecordByID<MainRecord>('main', 'Object_ID', _['Object_ID'])).
         map(_ => {
           return {
-            Object_ID: _['Object_ID'], Title: _['Title'], Role: _['Role'], Medium: _['Medium'], Dated: _['Dated']
+            Object_ID: _['Object_ID'], Title: _['Title'], Medium: _['Medium'],
+            Dated: _['Dated'], Link: _['Link'], Display_Name: _['Display_Name'],
+            Display_Date: _['Display_Date'], Role: _['Role'], 
           }
         });
       return tmp;