switched text/input for an editable in contentcard.tsx, made it so ca…

…rd title changes when it is changed in settings, and began changing onclick in activitytable.tsx rows to links
Doenet · Aug 22, 2024 · 8365260 · 8365260
1 parent 6514706
commit 8365260
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 65 deletions.
diff --git a/client/src/Widgets/ActivityTable.tsx b/client/src/Widgets/ActivityTable.tsx
@@ -26,7 +26,7 @@ import { FaFolder } from "react-icons/fa";
 import { RiDraftFill } from "react-icons/ri";
 import { MdAssignment } from "react-icons/md";
 import { BsPeopleFill } from "react-icons/bs";
-import { useFetcher, useNavigate } from "react-router-dom";
+import { useFetcher, useNavigate, Link } from "react-router-dom";
 import { AssignmentStatus } from "../_utils/types";
 
 export default forwardRef(function ActivityTable(
@@ -83,6 +83,9 @@ export default forwardRef(function ActivityTable(
         </Thead>
         <Tbody>
           {content.map(function (activity) {
+
+            const rowLink = activity.cardLink && !titleBeingEdited ? activity.cardLink : "";
+
             let assignmentStatusString: string =
               activity.assignmentStatus !== null &&
               activity.assignmentStatus !== undefined &&
@@ -119,13 +122,13 @@ export default forwardRef(function ActivityTable(
                 cursor="pointer"
                 _hover={{ backgroundColor: "#eeeeee" }}
                 borderBottom="2px solid gray"
-                onClick={() =>
-                  activity.cardLink && !titleBeingEdited
-                    ? navigate(activity.cardLink)
-                    : null
-                }
+                // onClick={() =>
+                //   activity.cardLink && !titleBeingEdited
+                //     ? navigate(activity.cardLink)
+                //     : null
+                // }
               >
-                <Td p="0" m="0" width="20px">
+                <Td p="0" m="0" width="20px"><Link to={rowLink}>
                   <Tooltip
                     label={
                       activity.isFolder
@@ -171,32 +174,31 @@ export default forwardRef(function ActivityTable(
                       )}
                     </Box>
                   </Tooltip>
-                </Td>
-                <Td p="0" whiteSpace="normal">
-                  <HStack>
+                </Link></Td>
+                <Td m="0" whiteSpace="normal"><Link to={rowLink}>
+                  <HStack height="100%">
                     <Editable
-                      defaultValue={
-                        activity.authorRow ? activity.ownerName : activity.title
-                      }
+                      // value={
+                      //   activity.authorRow ? activity.ownerName : activity.title
+                      // }
+                      defaultValue={activity.authorRow ? activity.ownerName : activity.title}
                       data-test="Editable Title"
                       startWithEditView={activity.autoFocusTitle}
                       isDisabled={!activity.editableTitle}
-                      onClick={(e) =>
-                        activity.editableTitle ? e.stopPropagation() : null
-                      }
+                      onClick={(e) => activity.editableTitle ? e.stopPropagation() : null}
                       onEdit={() => setTitleBeingEdited(true)}
+                      onSubmit={(txt) => {
+                        saveUpdatedTitle(txt);
+                        setTitleBeingEdited(false);
+                      }}
                     >
                       <EditablePreview
                         cursor={activity.editableTitle ? "auto" : "pointer"}
-                        noOfLines={1}
                         maxHeight="1.5em"
                       />
                       <EditableInput
                         maxLength={191}
-                        noOfLines={1}
-                        onBlur={(e) => {
-                          saveUpdatedTitle(e.target.value);
-                          setTitleBeingEdited(false);
+                        onBlur={() => {
                           // prevent click default/propagation behavior one time (aka right now as user is clicking to blur input)
                           document.addEventListener(
                             "click",
@@ -223,19 +225,19 @@ export default forwardRef(function ActivityTable(
                       <Text>{assignmentStatusString}</Text>
                     ) : null}
                   </Show>
-                </Td>
+                </Link></Td>
                 {showPublicStatus ? (
-                  <Td>{activity.isPublic ? "Public" : "Private"}</Td>
+                  <Td><Link to={rowLink}><Text height="100%">{activity.isPublic ? "Public" : "Private"}</Text></Link></Td>
                 ) : null}
                 <Show above="md">
                   {showAssignmentStatus ? (
-                    <Td>{assignmentStatusString}</Td>
+                    <Td><Link to={rowLink}><Text height="100%">{assignmentStatusString}</Text></Link></Td>
                   ) : null}
                 </Show>
                 {(!suppressAvatar && !activity.authorRow) ||
                 (showOwnerName && !activity.authorRow) ? (
-                  <Td>
-                    <HStack>
+                  <Td><Link to={rowLink}>
+                    <HStack height="100%">
                       {suppressAvatar || activity.authorRow ? null : (
                         <Tooltip label={activity.ownerName}>
                           <Avatar size="sm" name={activity.ownerName} />
@@ -245,7 +247,7 @@ export default forwardRef(function ActivityTable(
                         <Text>{activity.ownerName}</Text>
                       ) : null}
                     </HStack>
-                  </Td>
+                  </Link></Td>
                 ) : null}
                 <Td p="0" m="0" textAlign="right">
                   {activity.menuItems ? (

diff --git a/client/src/Widgets/ContentCard.tsx b/client/src/Widgets/ContentCard.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, forwardRef, ReactElement } from "react";
+import React, { useState, useEffect, useRef, forwardRef, ReactElement } from "react";
 import {
   Box,
   Image,
@@ -13,6 +13,9 @@ import {
   MenuList,
   Input,
   Tooltip,
+  Editable,
+  EditablePreview,
+  EditableInput
 } from "@chakra-ui/react";
 import { GoKebabVertical } from "react-icons/go";
 import { Link, useFetcher } from "react-router-dom";
@@ -24,7 +27,7 @@ export async function contentCardActions({ formObj }: { [k: string]: any }) {
     //Don't let name be blank
     let name = formObj?.cardTitle?.trim();
     if (name == "") {
-      name = "Untitled " + (formObj.isFolder ? "Folder" : "Activity");
+      name = "Untitled " + (formObj.isFolder === "true" ? "Folder" : "Activity");
     }
     await axios.post(`/api/updateContentName`, {
       id: formObj.id,
@@ -86,6 +89,14 @@ export default forwardRef(function ContentCard(
     setCardTitle(title);
   }, [title]);
 
+  // from ActivityEditor.tsx
+  let lastActivityDataName = useRef(title);
+  //Update when something else updates the name
+  if (title != lastActivityDataName.current && cardTitle != title) {
+    setCardTitle(title);
+  }
+  lastActivityDataName.current = title;
+
   if (isFolder) {
     showAssignmentStatus = false;
   }
@@ -144,23 +155,28 @@ export default forwardRef(function ContentCard(
           )}
 
           <Box width="160px" minWidth="0px" p="1">
-            {editableTitle ? (
-              <Tooltip label={cardTitle}>
-                <Input
-                  value={cardTitle}
+            <Tooltip label={cardTitle}>
+              <Editable
+                value={cardTitle}
+                startWithEditView={autoFocusTitle}
+                isDisabled={!editableTitle}
+                onClick={(e) =>
+                  editableTitle ? e.stopPropagation() : null
+                }
+                onChange={(txt) => setCardTitle(txt)}
+                onSubmit={() => saveUpdatedTitle()}
+                fontSize="sm"
+              >
+                <EditablePreview
+                  cursor={editableTitle ? "auto" : "pointer"}
+                  maxHeight="1.5em"
+                  noOfLines={1}
+                  padding=".1em"
+                />
+                <EditableInput
                   maxLength={191}
-                  size="xs"
-                  border="none"
                   padding="0"
-                  margin="0"
-                  height="1em"
-                  fontWeight="bold"
-                  data-test="Editable Title"
-                  autoFocus={autoFocusTitle}
-                  onFocus={(e) => e.target.select()}
-                  onChange={(e) => setCardTitle(e.target.value)}
-                  onBlur={(e) => {
-                    saveUpdatedTitle();
+                  onBlur={() => {
                     // prevent click default/propagation behavior one time (aka right now as user is clicking to blur input)
                     document.addEventListener(
                       "click",
@@ -171,28 +187,9 @@ export default forwardRef(function ContentCard(
                       { capture: true, once: true },
                     );
                   }}
-                  onKeyDown={(e) => {
-                    if (e.key == "Enter") {
-                      (e.target as HTMLElement).blur();
-                    }
-                  }}
                 />
-              </Tooltip>
-            ) : (
-              <Tooltip label={cardTitle}>
-                <Text
-                  data-test="Card Label"
-                  lineHeight="1.1"
-                  fontSize="xs"
-                  fontWeight="700"
-                  noOfLines={2}
-                  textAlign="left"
-                  overflow="hidden"
-                >
-                  {cardTitle}
-                </Text>
-              </Tooltip>
-            )}
+              </Editable>
+            </Tooltip>
             {showOwnerName ? (
               <Tooltip label={ownerName}>
                 <Text
@@ -211,6 +208,7 @@ export default forwardRef(function ContentCard(
                   fontSize="xs"
                   noOfLines={1}
                   textAlign="left"
+                  marginTop=".2em"
                   //data-test="Card Full Name"
                 >
                   {statusString}