Note, Tags, and Residents Column Formatting (#208)

* add tags formatting * add formatting for residents * add notes formatting * fix table header * add variable for constant value * fix dropdown overlap
uwblueprint · Dec 3, 2023 · 8bbe00b · 8bbe00b
1 parent 14817e5
commit 8bbe00b
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 27 deletions.
diff --git a/frontend/src/components/forms/EditLog.tsx b/frontend/src/components/forms/EditLog.tsx
@@ -221,7 +221,7 @@ const EditLog = ({
     );
     setBuildingId(logRecord.building.id);
     const residentIds = residentOptions.filter(
-      (item) => logRecord.residents.includes(item.label),
+      (item) => logRecord.residents && logRecord.residents.includes(item.label),
     ).map((item) => item.value);
     setResidents(residentIds);
     const tagIds = tagOptions.filter(

diff --git a/frontend/src/components/pages/HomePage/LogRecordsTable.tsx b/frontend/src/components/pages/HomePage/LogRecordsTable.tsx
@@ -50,6 +50,28 @@ const DELETE_CONFIRMATION_HEADER = "Delete Log Record";
 const DELETE_CONFIRMATION_MESSAGE =
   "Are you sure you want to delete this log record? Deleting a log record will permanently remove it from your system.";
 
+const formatNote = (note: string) => {
+  const NOTE_LIMIT = 150;
+  if (note.length > NOTE_LIMIT) {
+    return note.substring(0, NOTE_LIMIT).concat("...");
+  }
+  return note;
+};
+
+const formatList = (strArr: string[]) => {
+  const strLength = strArr?.length;
+  if (strLength === 1) {
+    return strArr[0];
+  }
+  if (strLength === 2) {
+    return strArr?.join(", ");
+  }
+  if (strLength > 2) {
+    return `${strArr?.slice(0, 2).join(", ")}, ...`;
+  }
+  return "";
+};
+
 const LogRecordsTable = ({
   logRecords,
   tableRef,
@@ -183,6 +205,7 @@ const LogRecordsTable = ({
                 <Th>Note</Th>
                 <Th>Employee</Th>
                 <Th>Attn To</Th>
+                <Th>Tags</Th>
                 <Th> </Th>
               </Tr>
             </Thead>
@@ -199,42 +222,45 @@ const LogRecordsTable = ({
                       <Td width="5%">{date}</Td>
                       <Td width="5%">{time}</Td>
                       <Td whiteSpace="normal" width="5%">
-                        {record.residents?.join("\n")}
+                        {formatList(record.residents)}
                       </Td>
                       <Td whiteSpace="normal" width="70%">
-                        {record.note}
+                        {formatNote(record.note)}
                       </Td>
-                      <Td width="5%">{`${record.employee.firstName} ${record.employee.lastName}`}</Td>
-                      <Td width="5%">
+                      <Td width="2.5%">{`${record.employee.firstName}`}</Td>
+                      <Td width="2.5%">
                         {record.attnTo
-                          ? `${record.attnTo.firstName} ${record.attnTo.lastName}`
+                          ? `${record.attnTo.firstName}`
                           : ""}
                       </Td>
+                      <Td width="5%">
+                        {formatList(record.tags)}
+                      </Td>
                       <Td width="5%">
                         {(authenticatedUser?.role === "Admin" ||
                           authenticatedUser?.id === record.employee.id) && (
-                          <Menu>
-                            <MenuButton
-                              as={IconButton}
-                              aria-label="Options"
-                              icon={<VscKebabVertical />}
-                              w="36px"
-                              variant="ghost"
-                            />
-                            <MenuList>
-                              <MenuItem
-                                onClick={() => handleEditToggle(record.logId)}
-                              >
-                                Edit Log Record
+                            <Menu>
+                              <MenuButton
+                                as={IconButton}
+                                aria-label="Options"
+                                icon={<VscKebabVertical />}
+                                w="36px"
+                                variant="ghost"
+                              />
+                              <MenuList>
+                                <MenuItem
+                                  onClick={() => handleEditToggle(record.logId)}
+                                >
+                                  Edit Log Record
                               </MenuItem>
-                              <MenuItem
-                                onClick={() => handleDeleteToggle(record.logId)}
-                              >
-                                Delete Log Record
+                                <MenuItem
+                                  onClick={() => handleDeleteToggle(record.logId)}
+                                >
+                                  Delete Log Record
                               </MenuItem>
-                            </MenuList>
-                          </Menu>
-                        )}
+                              </MenuList>
+                            </Menu>
+                          )}
                       </Td>
                     </Tr>
 

diff --git a/frontend/src/components/pages/HomePage/SearchAndFilters.tsx b/frontend/src/components/pages/HomePage/SearchAndFilters.tsx
@@ -202,7 +202,7 @@ const SearchAndFilters = ({
   }, []);
 
   return (
-    <Card style={{ textAlign: "left" }}>
+    <Card style={{ textAlign: "left", zIndex: 9999 }}>
       <Box padding="8px 16px 20px">
         <Text fontSize="12px" fontWeight="700" color="#6D8788" align="left">
           FILTER BY

diff --git a/frontend/src/theme/common/tableStyles.tsx b/frontend/src/theme/common/tableStyles.tsx
@@ -17,6 +17,7 @@ const Table: ComponentStyleConfig = {
       thead: {
         position: "sticky",
         top: 0,
+        zIndex: 1,
       },
     },
   },
-Original file line number
+Diff line change
@@ Expand Up / @@ -17,6 +17,7 @@ const Table: ComponentStyleConfig = { @@
           thead: {
             position: "sticky",
             top: 0,
+            zIndex: 1,
           },
         },
       },
@@ Expand Down @@