From 3a6ac440c60a8de31e98191f586c7cb4e710d597 Mon Sep 17 00:00:00 2001
From: kai <flynn98721@gmail.com>
Date: Tue, 26 Mar 2024 15:22:20 -0400
Subject: [PATCH] fetch page count from GraphQL, update list view tag styling

add more spacing between tags, separate tags by comma
---
 src/components/GalleryView.js  | 17 ++++++++++++++++-
 src/components/ItemListView.js | 28 +++++++++++++++++++++++-----
 src/css/ListPages.scss         |  6 ++++++
 src/css/SearchResult.scss      | 22 +++++++++++++++++++---
 src/lib/MetadataRenderer.js    |  7 ++++++-
 5 files changed, 70 insertions(+), 10 deletions(-)

diff --git a/src/components/GalleryView.js b/src/components/GalleryView.js
index e3c4db6c..a958f232 100644
--- a/src/components/GalleryView.js
+++ b/src/components/GalleryView.js
@@ -6,6 +6,16 @@ import { cleanHTML } from "../lib/MetadataRenderer";
 import "../css/SearchResult.scss";
 
 const GalleryView = (props) => {
+  const getPageCount = () => {
+    if (props.item?.archiveOptions) {
+      const { page_count } = JSON.parse(props.item.archiveOptions);
+      return parseInt(page_count) || 0;
+    }
+    return 0;
+  };
+
+  const itemPageCnt = getPageCount();
+
   return (
     <div className="col-md-6 col-lg-4 gallery-item">
       <div className="card">
@@ -25,12 +35,17 @@ const GalleryView = (props) => {
           >
             <h3 className="card-title crop-text-3">{props.item.title}</h3>
           </NavLink>
-          <p className="card-text crop-text-3">
+          <p className={`card-text crop-text-${itemPageCnt > 0 ? "2" : "3"}`}>
             {cleanHTML(
               props.item?.description?.length ? props.item.description[0] : "",
               "html"
             )}
           </p>
+          {itemPageCnt > 0 && (
+            <div className="badge badge-secondary page-count-badge">
+              {itemPageCnt} page(s)
+            </div>
+          )}
         </div>
       </div>
     </div>
diff --git a/src/components/ItemListView.js b/src/components/ItemListView.js
index 7fb7cf97..77a1c7f5 100644
--- a/src/components/ItemListView.js
+++ b/src/components/ItemListView.js
@@ -1,9 +1,9 @@
-import React, { Component } from "react";
+import { Component } from "react";
 import { NavLink } from "react-router-dom";
-import { RenderItems, arkLinkFormatted } from "../lib/MetadataRenderer";
-import { Thumbnail } from "./Thumbnail";
 import "../css/SearchResult.scss";
 import { fetchLanguages } from "../lib/fetchTools";
+import { RenderItems, arkLinkFormatted } from "../lib/MetadataRenderer";
+import { Thumbnail } from "./Thumbnail";
 
 class ItemListView extends Component {
   constructor(props) {
@@ -17,12 +17,30 @@ class ItemListView extends Component {
     fetchLanguages(this, this.props.site, "abbr");
   }
 
-  render() {
-    const keyArray = [
+  renderPageCount = () => {
+    const archiveOptions = this.props.item?.archiveOptions;
+    if (!archiveOptions) return false;
+    const archiveOptObj = JSON.parse(archiveOptions);
+    return "page_count" in archiveOptObj;
+  };
+
+  getKeyArray = () => {
+    let keyArray = [
       { field: "description", label: "Description" },
       { field: "tags", label: "Tags" },
       { field: "creator", label: "Creator" }
     ];
+    if (this.renderPageCount()) {
+      keyArray.push({
+        field: "page_count",
+        label: "Page(s)"
+      });
+    }
+    return keyArray;
+  };
+
+  render() {
+    const keyArray = this.getKeyArray();
     if (this.state.languages !== null) {
       return (
         <div key={this.props.item.id} className="col-12 collection-entry">
diff --git a/src/css/ListPages.scss b/src/css/ListPages.scss
index 0cf38d6e..5b7d5f6a 100644
--- a/src/css/ListPages.scss
+++ b/src/css/ListPages.scss
@@ -79,6 +79,12 @@ td.collection-detail-value div span.list-unstyled {
   display: block;
 }
 
+.archive-item-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.3em;
+}
+
 a.more-link {
   margin-left: 10px;
   color: var(--hokieOrange);
diff --git a/src/css/SearchResult.scss b/src/css/SearchResult.scss
index b40a7ff2..f552f463 100644
--- a/src/css/SearchResult.scss
+++ b/src/css/SearchResult.scss
@@ -79,17 +79,33 @@ div.search-results div.row div#content div.navbar {
   height: 10.5rem;
   border: 1px solid #e2e0e0;
   border-top: none;
-  padding: 1rem;
+  padding: 0.9rem;
+  position: relative;
 }
 
-.crop-text-3 {
-  -webkit-line-clamp: 3;
+@mixin crop-text($max-lines) {
+  -webkit-line-clamp: $max-lines;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
 }
 
+.crop-text-2 {
+  @include crop-text(2);
+}
+
+.crop-text-3 {
+  @include crop-text(3);
+}
+
+.page-count-badge {
+  position: absolute;
+  left: 0.9rem;
+  bottom: 0.9rem;
+  font-size: 0.75rem !important;
+}
+
 .gallery-item .card-body .card-title {
   font-family: "gineso-condensed", sans-serif;
   font-size: 1.1rem;
diff --git a/src/lib/MetadataRenderer.js b/src/lib/MetadataRenderer.js
index 5ef4cd20..2fee501c 100644
--- a/src/lib/MetadataRenderer.js
+++ b/src/lib/MetadataRenderer.js
@@ -253,7 +253,7 @@ function textFormat(item, attr, languages, collectionCustomKey, site) {
   if (item.collection_category) category = "collection";
   if (Array.isArray(item[attr]) && attr !== "description") {
     return (
-      <div>
+      <div className="archive-item-tags">
         {item[attr].map((value, i) => (
           <span className="list-unstyled" key={i} data-cy="multi-field-span">
             {attr === "is_part_of" && i === 0 ? (
@@ -263,6 +263,7 @@ function textFormat(item, attr, languages, collectionCustomKey, site) {
             ) : (
               listValue(category, attr, value, languages)
             )}
+            {i < item[attr].length - 1 && ","}
           </span>
         ))}
       </div>
@@ -292,6 +293,10 @@ function textFormat(item, attr, languages, collectionCustomKey, site) {
     } else {
       return <MoreLink category={category} item={item} />;
     }
+  } else if (attr === "page_count") {
+    if (!item["archiveOptions"]) return;
+    const { page_count } = JSON.parse(item["archiveOptions"]);
+    return parseInt(page_count) || 0;
   } else {
     return item[attr];
   }