From 63eb48835f2ba7c6fe6d151b9efdf67abc43434c Mon Sep 17 00:00:00 2001
From: GiseleN523 <giselenelson@rocketmail.com>
Date: Sat, 24 Aug 2024 10:55:17 -0500
Subject: [PATCH] don't let row title be blank, updating row titles when title
 changes externally,  switched row onclick to a link overlay

---
 client/src/Tools/_framework/Paths/Home.tsx |   1 +
 client/src/Widgets/ActivityTable.tsx       | 399 ++++++++++-----------
 2 files changed, 200 insertions(+), 200 deletions(-)

diff --git a/client/src/Tools/_framework/Paths/Home.tsx b/client/src/Tools/_framework/Paths/Home.tsx
index 0b1f77576..c551da561 100644
--- a/client/src/Tools/_framework/Paths/Home.tsx
+++ b/client/src/Tools/_framework/Paths/Home.tsx
@@ -178,6 +178,7 @@ export function Home() {
         justifyContent="center"
         bg={blackColor}
         py="30px"
+        overflow="hidden"
       >
         <Show above="sm">
           <Grid
diff --git a/client/src/Widgets/ActivityTable.tsx b/client/src/Widgets/ActivityTable.tsx
index cdd1e449d..0c8b08c4b 100644
--- a/client/src/Widgets/ActivityTable.tsx
+++ b/client/src/Widgets/ActivityTable.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, ReactElement, useState } from "react";
+import React, { forwardRef, ReactElement, useState, useRef } from "react";
 import {
   Avatar,
   Text,
@@ -20,15 +20,210 @@ import {
   MenuButton,
   MenuList,
   Show,
+  LinkBox,
+  LinkOverlay,
 } from "@chakra-ui/react";
 import { GoKebabVertical } from "react-icons/go";
 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, Link } from "react-router-dom";
+import { useFetcher } from "react-router-dom";
 import { AssignmentStatus } from "../_utils/types";
 
+// this component is separate so that it can have its own states
+function ActivityRow({activity, showAssignmentStatus, showPublicStatus, suppressAvatar, showOwnerName, ref}) {
+  console.log(showPublicStatus)
+
+  const [rowTitle, setRowTitle] = useState(activity.title);
+  const fetcher = useFetcher();
+
+  // from ActivityEditor.tsx
+  let lastActivityDataName = useRef(activity.title);
+  //Update when something else updates the name
+  if (activity.title != lastActivityDataName.current && rowTitle != activity.title) {
+    setRowTitle(activity.title);
+  }
+  lastActivityDataName.current = activity.title;
+
+  let assignmentStatusString: string =
+    activity.assignmentStatus !== null &&
+    activity.assignmentStatus !== undefined &&
+    activity.assignmentStatus !== "Unassigned"
+      ? activity.assignmentStatus
+      : "";
+
+  if (
+    activity.assignmentStatus === "Open" &&
+    activity.closeTime !== undefined
+  ) {
+    assignmentStatusString =
+      assignmentStatusString + " until " + activity.closeTime;
+  }
+
+  let tooltipLabelString: string =
+    activity.isFolder
+    ? activity.isPublic || activity.isShared
+      ? "Folder / Public"
+      : "Folder / Private"
+    : activity.authorRow
+      ? activity.ownerName
+      : "Activity" +
+        (activity.assignmentStatus
+          ? " / " + activity.assignmentStatus
+          : "")
+
+  function saveUpdatedTitle() {
+    if (rowTitle !== activity.title && activity.id !== undefined) {
+      fetcher.submit(
+        {
+          _action: "update title",
+          id: activity.id,
+          cardTitle: rowTitle,
+          isFolder: Boolean(activity.isFolder),
+        },
+        { method: "post" },
+      );
+    }
+  }
+
+  return (
+    <LinkBox 
+      as={Tr}
+      key={(activity.authorRow ? "author" : "activity") + activity.id}
+      data-test="Activity Link"
+      cursor="pointer"
+      _hover={{ backgroundColor: "#eeeeee" }}
+      borderBottom="2px solid gray"
+      width="100%"
+    >
+      <Td p="0" m="0" width="20px">
+        <LinkOverlay href={activity.cardLink ? activity.cardLink : ""}>
+          <Tooltip label={tooltipLabelString}>
+            <Box m="0" p="0">
+              {activity.authorRow ? (
+                <Avatar
+                  size="sm"
+                  name={activity.ownerName}
+                  marginLeft="1em"
+                />
+              ) : (
+                <Icon
+                  as={
+                    activity.isFolder
+                      ? FaFolder
+                      : activity.assignmentStatus === "Unassigned"
+                        ? RiDraftFill
+                        : MdAssignment
+                  }
+                  color={
+                    activity.isFolder
+                      ? "#e6b800"
+                      : activity.assignmentStatus === "Unassigned"
+                        ? "#ff6600"
+                        : activity.assignmentStatus === "Open"
+                          ? "#009933"
+                          : "#cc3399"
+                  }
+                  boxSize={12}
+                  paddingLeft="1em"
+                />
+              )}
+            </Box>
+          </Tooltip>
+        </LinkOverlay>
+      </Td>
+      <Td>
+        <HStack>
+          <Editable
+            value={rowTitle}
+            data-test="Editable Title"
+            zIndex="1"
+            startWithEditView={activity.autoFocusTitle}
+            isDisabled={!activity.editableTitle}
+            onChange={(txt) => setRowTitle(txt)}
+            onSubmit={saveUpdatedTitle}
+          >
+            <EditablePreview
+              cursor={activity.editableTitle ? "auto" : "pointer"}
+              maxHeight="1.5em"
+            />
+            <EditableInput
+              maxLength={191}
+              onBlur={() => {
+                // prevent click default/propagation behavior one time (aka right now as user is clicking to blur input)
+                document.addEventListener(
+                  "click",
+                  (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                  },
+                  { capture: true, once: true },
+                );
+              }}
+            />
+          </Editable>
+          {activity.isPublic || activity.isShared ? (
+            <Icon
+              as={BsPeopleFill}
+              color="#666699"
+              boxSize={5}
+              verticalAlign="baseline"
+            />
+          ) : null}
+        </HStack>
+        <Show below="md">
+          {showAssignmentStatus ? (
+            <Text>{assignmentStatusString}</Text>
+          ) : null}
+        </Show>
+      </Td>
+      {showPublicStatus ? (
+        <Td>{activity.isPublic ? "Public" : "Private"}</Td>
+      ) : null}
+      <Show above="md">
+        {showAssignmentStatus ? (
+          <Td><Text>{assignmentStatusString}</Text></Td>
+        ) : null}
+      </Show>
+      {(!suppressAvatar && !activity.authorRow) ||
+      (showOwnerName) ? (
+        <Td>
+          <HStack>
+            {suppressAvatar || activity.authorRow ? null : (
+              <Tooltip label={activity.ownerName}>
+                <Avatar size="sm" name={activity.ownerName} />
+              </Tooltip>
+            )}
+            {showOwnerName && !activity.authorRow ? (
+              <Text>{activity.ownerName}</Text>
+            ) : null}
+          </HStack>
+        </Td>
+      ) : null}
+      <Td p="0" m="0" textAlign="right">
+        {activity.menuItems ? (
+          <Menu>
+            <MenuButton
+              data-test="Card Menu Button"
+              zIndex="1"
+              position="relative"
+              _focus={{ boxShadow: "outline" }}
+              ref={ref}
+              padding="13px"
+            >
+              <Icon color="black" as={GoKebabVertical} boxSize={6} />
+            </MenuButton>
+            <MenuList zIndex="1">
+              {activity.menuItems}
+            </MenuList>
+          </Menu>
+        ) : null}
+      </Td>
+    </LinkBox>
+  );
+}
+
 export default forwardRef(function ActivityTable(
   {
     content,
@@ -59,15 +254,9 @@ export default forwardRef(function ActivityTable(
   },
   ref: React.ForwardedRef<HTMLButtonElement>,
 ) {
-  const navigate = useNavigate();
-  const fetcher = useFetcher();
-
-  // this state does not do much; its purpose is to prevent the edge case of someone clicking to select the text input, and,
-  // without letting go, dragging it on top of a link so that the link is triggered
-  const [titleBeingEdited, setTitleBeingEdited] = useState(false);
 
   return (
-    <TableContainer>
+    <TableContainer overflowX="visible" overflowY="visible">
       <Table>
         <Thead>
           <Tr borderBottom="2px solid gray">
@@ -82,197 +271,7 @@ export default forwardRef(function ActivityTable(
           </Tr>
         </Thead>
         <Tbody>
-          {content.map(function (activity) {
-
-            const rowLink = activity.cardLink && !titleBeingEdited ? activity.cardLink : "";
-            
-            let assignmentStatusString: string =
-              activity.assignmentStatus !== null &&
-              activity.assignmentStatus !== undefined &&
-              activity.assignmentStatus !== "Unassigned"
-                ? activity.assignmentStatus
-                : "";
-
-            if (
-              activity.assignmentStatus === "Open" &&
-              activity.closeTime !== undefined
-            ) {
-              assignmentStatusString =
-                assignmentStatusString + " until " + activity.closeTime;
-            }
-
-            function saveUpdatedTitle(newTitle: string) {
-              if (newTitle !== activity.title && activity.id !== undefined) {
-                fetcher.submit(
-                  {
-                    _action: "update title",
-                    id: activity.id,
-                    cardTitle: newTitle,
-                    isFolder: Boolean(activity.isFolder),
-                  },
-                  { method: "post" },
-                );
-              }
-            }
-
-            return (
-              <Tr
-                key={(activity.authorRow ? "author" : "activity") + activity.id}
-                data-test="Activity Link"
-                cursor="pointer"
-                _hover={{ backgroundColor: "#eeeeee" }}
-                borderBottom="2px solid gray"
-                // onClick={() =>
-                //   activity.cardLink && !titleBeingEdited
-                //     ? navigate(activity.cardLink)
-                //     : null
-                // }
-              >
-                <Td p="0" m="0" width="20px"><Link to={rowLink}>
-                  <Tooltip
-                    label={
-                      activity.isFolder
-                        ? activity.isPublic || activity.isShared
-                          ? "Folder / Public"
-                          : "Folder / Private"
-                        : activity.authorRow
-                          ? activity.ownerName
-                          : "Activity" +
-                            (activity.assignmentStatus
-                              ? " / " + activity.assignmentStatus
-                              : "")
-                    }
-                  >
-                    <Box paddingRight="1em" m="0">
-                      {activity.authorRow ? (
-                        <Avatar
-                          size="sm"
-                          name={activity.ownerName}
-                          marginLeft="1em"
-                        />
-                      ) : (
-                        <Icon
-                          as={
-                            activity.isFolder
-                              ? FaFolder
-                              : activity.assignmentStatus === "Unassigned"
-                                ? RiDraftFill
-                                : MdAssignment
-                          }
-                          color={
-                            activity.isFolder
-                              ? "#e6b800"
-                              : activity.assignmentStatus === "Unassigned"
-                                ? "#ff6600"
-                                : activity.assignmentStatus === "Open"
-                                  ? "#009933"
-                                  : "#cc3399"
-                          }
-                          boxSize={12}
-                          paddingLeft="1em"
-                        />
-                      )}
-                    </Box>
-                  </Tooltip>
-                </Link></Td>
-                <Td m="0" whiteSpace="normal"><Link to={rowLink}>
-                  <HStack height="100%">
-                    <Editable
-                      // 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}
-                      onEdit={() => setTitleBeingEdited(true)}
-                      onSubmit={(txt) => {
-                        saveUpdatedTitle(txt);
-                        setTitleBeingEdited(false);
-                      }}
-                    >
-                      <EditablePreview
-                        cursor={activity.editableTitle ? "auto" : "pointer"}
-                        maxHeight="1.5em"
-                      />
-                      <EditableInput
-                        maxLength={191}
-                        onBlur={() => {
-                          // prevent click default/propagation behavior one time (aka right now as user is clicking to blur input)
-                          document.addEventListener(
-                            "click",
-                            (e) => {
-                              e.preventDefault();
-                              e.stopPropagation();
-                            },
-                            { capture: true, once: true },
-                          );
-                        }}
-                      />
-                    </Editable>
-                    {activity.isPublic || activity.isShared ? (
-                      <Icon
-                        as={BsPeopleFill}
-                        color="#666699"
-                        boxSize={5}
-                        verticalAlign="baseline"
-                      />
-                    ) : null}
-                  </HStack>
-                  <Show below="md">
-                    {showAssignmentStatus ? (
-                      <Text>{assignmentStatusString}</Text>
-                    ) : null}
-                  </Show>
-                </Link></Td>
-                {showPublicStatus ? (
-                  <Td><Link to={rowLink}><Text height="100%">{activity.isPublic ? "Public" : "Private"}</Text></Link></Td>
-                ) : null}
-                <Show above="md">
-                  {showAssignmentStatus ? (
-                    <Td><Link to={rowLink}><Text height="100%">{assignmentStatusString}</Text></Link></Td>
-                  ) : null}
-                </Show>
-                {(!suppressAvatar && !activity.authorRow) ||
-                (showOwnerName && !activity.authorRow) ? (
-                  <Td><Link to={rowLink}>
-                    <HStack height="100%">
-                      {suppressAvatar || activity.authorRow ? null : (
-                        <Tooltip label={activity.ownerName}>
-                          <Avatar size="sm" name={activity.ownerName} />
-                        </Tooltip>
-                      )}
-                      {showOwnerName && !activity.authorRow ? (
-                        <Text>{activity.ownerName}</Text>
-                      ) : null}
-                    </HStack>
-                  </Link></Td>
-                ) : null}
-                <Td p="0" m="0" textAlign="right">
-                  {activity.menuItems ? (
-                    <Menu>
-                      <MenuButton
-                        data-test="Card Menu Button"
-                        _focus={{ boxShadow: "outline" }}
-                        ref={ref}
-                        padding="10px"
-                        onClick={(e) => e.stopPropagation()}
-                      >
-                        <Icon color="black" as={GoKebabVertical} boxSize={6} />
-                      </MenuButton>
-                      <MenuList
-                        zIndex="1000"
-                        onClick={(e) => e.stopPropagation()}
-                      >
-                        {activity.menuItems}
-                      </MenuList>
-                    </Menu>
-                  ) : null}
-                </Td>
-              </Tr>
-            );
-          })}
+          {content.map((activity) => <ActivityRow activity={activity} showAssignmentStatus={showAssignmentStatus} showPublicStatus={showPublicStatus} suppressAvatar={suppressAvatar} showOwnerName={showOwnerName} ref={ref} />)}
         </Tbody>
       </Table>
     </TableContainer>