Merge pull request #499 from EfrainAD/Efrain_#471_Adimin-assignment-p…

…age-link-to-survey
codeforboston · Nov 9, 2023 · c55736c · c55736c
2 parents f842ab8 + 05dba75
commit c55736c
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 21 deletions.
diff --git a/frontend/front/src/components/SurveyLink.js b/frontend/front/src/components/SurveyLink.js
@@ -0,0 +1,44 @@
+import { Button, Menu, MenuItem } from "@mui/material";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+const SurveyLink = ({ links, label = "VIEW", ...styles }) => {
+  const navigate = useNavigate();
+
+  // Dropdown for when there more then one servey
+  const [dropdownButtonEl, setDropdownButtonEl] = useState(null);
+  const openDropdown = (e) => setDropdownButtonEl(e.currentTarget);
+  const closeDropdown = () => setDropdownButtonEl(null);
+
+  const goToSurvey = (surveyId) => {
+    navigate(`/admin/survey/visit/${surveyId}`);
+  };
+
+  return (
+    <>
+      <Button
+        {...styles}
+        onClick={(e) => {
+          if (links.length === 1) goToSurvey(links[0]);
+          else openDropdown(e);
+        }}
+      >
+        {label}
+      </Button>
+      {/* Dropdown */}
+      <Menu
+        anchorEl={dropdownButtonEl}
+        open={!!dropdownButtonEl}
+        onClose={closeDropdown}
+      >
+        {links.map((link, index) => (
+          <MenuItem key={index} onClick={() => goToSurvey(link)}>
+            Survey {index + 1}
+          </MenuItem>
+        ))}
+      </Menu>
+    </>
+  );
+};
+
+export default SurveyLink;
diff --git a/frontend/front/src/pages/Admin/assignment/AssignProfile.js b/frontend/front/src/pages/Admin/assignment/AssignProfile.js
@@ -20,6 +20,7 @@ import {
   ADMIN_ASSIGNMENT,
   withAdminPrefix,
 } from "../../../routing/routes";
+import SurveyLink from "../../../components/SurveyLink";
 
 const AssignProfile = () => {
   const { aid } = useParams();
@@ -103,16 +104,17 @@ const AssignProfile = () => {
       headerName: "Survey",
       minWidth: 50,
       maxWidth: 80,
-      renderCell: (params) => (
-        <Button
-          variant="text"
-          color="primary"
-          size="small"
-          onClick={() => handleUserLink(params.row)}
-        >
-          View
-        </Button>
-      ),
+      renderCell: (params) =>
+        params.row.completed ? (
+          <SurveyLink
+            label="VIEW"
+            links={params.row.survey_visit_ids}
+            variant="text"
+            sx={{ minWidth: "unset", padding: "0px" }}
+            color="primary"
+            size="small"
+          />
+        ) : null,
     },
     {
       field: "unassign",

diff --git a/frontend/front/src/pages/Admin/home/HomeTable.js b/frontend/front/src/pages/Admin/home/HomeTable.js
@@ -10,8 +10,8 @@ import Loader from "../../../components/Loader";
 import React from "react";
 
 import { useGetHomesQuery } from "../../../api/apiSlice";
-import { useNavigate } from "react-router-dom";
 import { ADMIN_HOME, withAdminPrefix } from "../../../routing/routes";
+import SurveyLink from "../../../components/SurveyLink";
 
 // Formats addresses
 export const getAddress = (params) => {
@@ -27,7 +27,6 @@ export const getAddress = (params) => {
 
 const HomeTable = () => {
   const goToBreadcrumb = useGoToBreadcrumb();
-  const navigate = useNavigate();
 
   useInitBreadcrumbs(
     [{ url: withAdminPrefix(ADMIN_HOME), description: "homes" }],
@@ -36,10 +35,6 @@ const HomeTable = () => {
 
   const handleHomeLink = (home) => goToBreadcrumb("home", home);
 
-  const handleUserLink = (home) => {
-    navigate(`/admin/survey/visit/${home.survey_visit_ids[0]}`);
-  };
-
   const handleAssignmentLink = (assignment) =>
     goToBreadcrumb("assignment", assignment);
 
@@ -90,15 +85,14 @@ const HomeTable = () => {
       headerName: "Completed",
       renderCell: (params) =>
         params.row.completed ? (
-          <Button
+          <SurveyLink
+            label={"Yes ✅"}
+            links={params.row.survey_visit_ids}
             variant="text"
             sx={{ minWidth: "unset", padding: "0px" }}
             color="primary"
             size="small"
-            onClick={() => handleUserLink(params.row)}
-          >
-            Yes ✅
-          </Button>
+          />
         ) : (
           "No"
         ),