Merge pull request #1477 from NYPL/MLN-1304

Updated teacherset search results
NYPL · Dec 23, 2024 · f14f74b · f14f74b
2 parents a283470 + 80d9eed
commit f14f74b
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 41 deletions.
diff --git a/app/javascript/components/Accounts/Accounts.jsx b/app/javascript/components/Accounts/Accounts.jsx
@@ -189,24 +189,29 @@ export default function Accounts() {
     }
   };
 
+  const handleCancel = (hold) => {
+    const href = "/holds/" + hold["access_key"] + "/cancel";
+    window.location.href = href;
+  }
+
   const orderCancelConfirmation = (hold) => {
     return (
       <div id={"cancel_" + hold["access_key"]}>
         <ButtonGroup buttonWidth="full">
-          <Button id="account-page-cancel-button" buttonType="noBrand">
-            <Link
-              className="accountPageCancelOrder"
-              href={"/holds/" + hold["access_key"] + "/cancel"}
-            >
-              {" "}
-              Cancel{" "}
-            </Link>
+          <Button id="account-page-cancel-button" buttonType="noBrand"
+            onClick={() => handleCancel(hold)}>
+            Cancel
           </Button>
         </ButtonGroup>
       </div>
     );
   };
 
+  const handleOrder = (hold ) => {
+    const href = "/teacher_set_details/" + hold.teacher_set_id;
+    window.location.href = href;
+  }
+
   const orderTeacherSet = (hold) => {
     return (
       <div id={"cancel_" + hold["access_key"]}>
@@ -215,15 +220,10 @@ export default function Accounts() {
             id="account-page-order-button"
             buttonType="secondary"
             whiteSpace="nowrap"
+            onClick={() => handleOrder(hold)}
+            style={{color: "var(--nypl-colors-ui-black)"}}
           >
-            <Link
-              id="account-page-order-link"
-              className={`${colorMode} accountPageTeacherSetOrder`}
-              href={"/teacher_set_details/" + hold.teacher_set_id}
-            >
-              {" "}
-              Order again{" "}
-            </Link>
+            Order again
           </Button>
         </ButtonGroup>
       </div>

diff --git a/app/javascript/components/SearchTeacherSets/SearchTeacherSets.jsx b/app/javascript/components/SearchTeacherSets/SearchTeacherSets.jsx
@@ -15,6 +15,7 @@ import {
   Card,
   CardHeading,
   CardContent,
+  CardActions,
   Pagination,
   Checkbox,
   TemplateAppContainer,
@@ -367,13 +368,13 @@ export default function SearchTeacherSets(props) {
           : paginationData;
 
       return (
-        <Text
-          marginTop="m"
+        <Heading
           id="ts-result-found-id"
-          fontWeight="medium"
           aria-live="polite"
           ref={searchResultsTextRef}
-          tabIndex={-1} 
+          tabIndex={-1}
+          size="heading6"
+          marginBottom="m"
         >
           {"Showing " +
             test +
@@ -383,7 +384,7 @@ export default function SearchTeacherSets(props) {
             tsTotalCount +
             " result" +
             appendKeyword}
-        </Text>
+        </Heading>
       );
     } else if (tsTotalCount >= 1) {
       const pageCount = 10;
@@ -402,13 +403,13 @@ export default function SearchTeacherSets(props) {
       );
 
       return (
-        <Text
-          marginTop="m"
+        <Heading
           id="ts-results-found-id"
-          fontWeight="medium"
           aria-live="polite"
           ref={searchResultsTextRef}
-          tabIndex={-1} 
+          tabIndex={-1}
+          size="heading6"
+          marginBottom="m"
         >
           {"Showing " +
             fromResults +
@@ -418,7 +419,7 @@ export default function SearchTeacherSets(props) {
             tsTotalCount +
             " results" +
             appendKeyword}
-        </Text>
+        </Heading>
       );
     }
   };
@@ -480,6 +481,30 @@ export default function SearchTeacherSets(props) {
     return ts.availability === "available" ? "informative" : "neutral";
   };
 
+  const displayAvailableCopies = (ts) => {
+    return (
+      <>
+        {availableCopies(ts)} of {totalCopies(ts)} copies available
+      </>
+    );
+  };
+
+  const availableCopies = (ts) => {
+    if (ts.available_copies !== undefined) {
+      return ts.available_copies;
+    } else {
+      return "";
+    }
+  };
+
+  const totalCopies = (ts) => {
+    if (ts.total_copies !== undefined) {
+      return ts.total_copies;
+    } else {
+      return "";
+    }
+  };
+
   const teacherSetDetails = () => {
     if (teacherSets.length >= 0) {
       return teacherSets.map((ts, i) => {
@@ -490,15 +515,16 @@ export default function SearchTeacherSets(props) {
           >
             <Card
               id={"ts-details-" + i}
+              isAlignedRightActions
               layout="row"
-              aspectratio="square"
-              size="xxsmall"
-              marginTop="s"
+              marginBottom="m"
             >
               <CardHeading
-                marginBottom="xs"
                 level="h3"
+                size="heading5"
                 id={"ts-order-details-" + i}
+                overline={ts.suitabilities_string}
+                subtitle={displayAvailableCopies(ts)}
               >
                 <ReactRouterLink
                   to={"/teacher_set_details/" + ts.id}
@@ -508,19 +534,16 @@ export default function SearchTeacherSets(props) {
                   {ts.title}
                 </ReactRouterLink>
               </CardHeading>
-              <CardContent marginBottom="xs" id={"ts-suitabilities-" + i}>
-                {ts.suitabilities_string}
-              </CardContent>
-              <CardContent marginBottom="s" id={"ts-availability-" + i}>
-                {teacherSetAvailability(ts)}
-              </CardContent>
               <CardContent id={"ts-description-" + i}>
                 {ts.description}
               </CardContent>
+              <CardActions id={"ts-availability-" + i} marginTop="m">
+                {teacherSetAvailability(ts)}
+              </CardActions>
             </Card>
             <HorizontalRule
-              marginTop="l"
-              marginBottom="l"
+              marginTop="m"
+              marginBottom="m"
               id={"ts-horizontal-rule-" + i}
               align="left"
               className={`${colorMode} tsDetailHorizontalLine`}

diff --git a/app/javascript/components/TeacherSetDetails/TeacherSetDetails.jsx b/app/javascript/components/TeacherSetDetails/TeacherSetDetails.jsx
@@ -55,7 +55,7 @@ export default function TeacherSetDetails(props) {
   const [isLoading, setIsLoading] = useState(true);
   const [currentUserStatus, setCurrentUserStatus] = useState();
   const [disabledButton, setDisabledButton] = useState(false);
-  const [isSchoolActive, setIsSchoolActive] = useState(false);
+  const [isSchoolActive, setIsSchoolActive] = useState("");
   const heroBgColor = useColorModeValue(
     "var(--nypl-colors-brand-primary)",
     "var(--nypl-colors-dark-ui-bg-hover)"
@@ -534,7 +534,7 @@ export default function TeacherSetDetails(props) {
   };
 
   const inactiveSchoolMessage = () => {
-    if (!isSchoolActive) {
+    if (isSchoolActive !== "" && isSchoolActive == false) {
       return (<Banner content={<>
         Your school is inactive, so your account is restricted. Please contact [email protected].
       </>} type="warning" />)

diff --git a/app/javascript/stylesheets/application.scss b/app/javascript/stylesheets/application.scss
@@ -539,4 +539,10 @@ ul.list li:before {
   align-items: center;
   display: flex;
   justify-content: space-between;
-}
+}
+
+#teacher-set-results {
+  .card-right {
+    flex-shrink: 8 !important;
+  }
+}