feat: search projects by user

fixes #550
dbca-wa · Feb 27, 2025 · 77e1d8d · 77e1d8d
1 parent df62a29
commit 77e1d8d
Show file tree

Hide file tree

Showing 7 changed files with 138 additions and 52 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -44,9 +44,9 @@
     "@types/react-calendar": "^4.1.0",
     "@types/react-dom": "^19.0.4",
     "@types/uuid": "^10.0.0",
-    "@typescript-eslint/eslint-plugin": "^8.24.1",
-    "@typescript-eslint/parser": "^8.24.1",
-    "axios": "^1.7.9",
+    "@typescript-eslint/eslint-plugin": "^8.25.0",
+    "@typescript-eslint/parser": "^8.25.0",
+    "axios": "^1.8.1",
     "browser-image-compression": "^2.0.2",
     "canvas-confetti": "^1.9.3",
     "class-variance-authority": "^0.7.1",
@@ -72,7 +72,7 @@
     "react-d3-tree": "^3.6.5",
     "react-day-picker": "8.10.1",
     "react-dom": "^19.0.0",
-    "react-dropzone": "^14.3.6",
+    "react-dropzone": "^14.3.8",
     "react-email": "^3.0.7",
     "react-helmet-async": "^2.0.5",
     "react-hook-form": "^7.54.2",
@@ -86,7 +86,7 @@
     "tailwindcss-animate": "^1.0.7",
     "uuid": "^11.1.0",
     "vaul": "^1.1.2",
-    "vite": "^6.1.1"
+    "vite": "^6.2.0"
   },
   "devDependencies": {
     "@types/js-cookie": "^3.0.6",

diff --git a/src/components/Navigation/SearchProjectsByUser.tsx b/src/components/Navigation/SearchProjectsByUser.tsx
@@ -0,0 +1,32 @@
+import { Flex } from "@chakra-ui/react";
+import { useEffect, useState } from "react";
+import { UserSearchDropdown } from "./UserSearchDropdown";
+
+const SearchProjectsByUser = ({
+  handleFilterUserChange,
+}: {
+  handleFilterUserChange: (user: number | null) => void;
+}) => {
+  const [selectedUser, setSelectedUser] = useState<number | null>(null);
+
+  useEffect(() => {
+    console.log("Selected User: ", selectedUser);
+    handleFilterUserChange(selectedUser);
+  }, [selectedUser]);
+
+  return (
+    <Flex className="w-full justify-end">
+      <UserSearchDropdown
+        isRequired={false}
+        label=""
+        helperText=""
+        setUserFunction={setSelectedUser}
+        placeholder="Search by user"
+        className="my-0 h-8 py-0"
+        hideCannotFind
+      />
+    </Flex>
+  );
+};
+
+export default SearchProjectsByUser;
diff --git a/src/components/Navigation/UserSearchDropdown.tsx b/src/components/Navigation/UserSearchDropdown.tsx
@@ -46,6 +46,8 @@ interface IUserSearchDropdown {
   projectPk?: number;
   isClosed?: boolean;
   ignoreArray?: number[];
+  className?: string;
+  hideCannotFind?: boolean;
 }
 
 export const UserSearchDropdown = forwardRef(
@@ -65,6 +67,8 @@ export const UserSearchDropdown = forwardRef(
       projectPk,
       isClosed,
       ignoreArray,
+      className,
+      hideCannotFind,
     }: IUserSearchDropdown,
     ref,
   ) => {
@@ -115,7 +119,7 @@ export const UserSearchDropdown = forwardRef(
     }, [searchTerm]);
 
     const { userLoading, userData } = useFullUserByPk(
-      preselectedUserPk !== undefined ? preselectedUserPk : 0,
+      preselectedUserPk !== undefined ? preselectedUserPk : null,
     );
 
     useEffect(() => {
@@ -158,7 +162,7 @@ export const UserSearchDropdown = forwardRef(
       ) {
         return;
       }
-      setUserFunction(0); // Clear the selected user by setting the userPk to 0 (or any value that represents no user)
+      setUserFunction(null); // Clear the selected user by setting the userPk to 0 (or any value that represents no user)
       if (setUserEmailFunction) {
         setUserEmailFunction("");
       }
@@ -179,6 +183,8 @@ export const UserSearchDropdown = forwardRef(
       <FormControl
         isRequired={isRequired}
         mb={0}
+        my={-4}
+        // p={-2}
         // bg={"red"}
         w={"100%"}
         h={"100%"}
@@ -199,6 +205,7 @@ export const UserSearchDropdown = forwardRef(
               onFocus={() => setIsMenuOpen(true)}
               autoFocus={autoFocus ? true : false}
               autoComplete="off"
+              className={className}
             />
           </InputGroup>
         )}
@@ -222,50 +229,54 @@ export const UserSearchDropdown = forwardRef(
                 {helperText}
             </Box> */}
         <FormHelperText>
-          {showAddUser
+          {hideCannotFind !== true &&
+          hideCannotFind !== undefined &&
+          showAddUser
             ? "Can't find who you're looking for? Use the buttons below to add an external user or email a DBCA staff member with a link to create an account - they must click the link and login."
             : helperText}
         </FormHelperText>
-        {showAddUser && (
-          <>
-            {!ignoreArray ||
-              (ignoreArray?.length < 1 && (
-                <>
-                  <CreateUserModal
-                    onClose={onCloseCreateUserModal}
-                    isOpen={isCreateUserModalOpen}
-                  />
-                  <EmailSiteLinkModal
-                    onClose={onCloseEmailSiteLinkModal}
-                    isOpen={isEmailSiteLinkModalOpen}
-                  />
-                  <Flex mt={4} mb={2} justifyContent={"flex-end"}>
-                    <Button
-                      color={"white"}
-                      bg={colorMode === "light" ? "blue.500" : "blue.600"}
-                      _hover={{
-                        bg: colorMode === "light" ? "blue.400" : "blue.500",
-                      }}
-                      onClick={onOpenCreateUserModal}
-                    >
-                      Add New External User
-                    </Button>
-                    <Button
-                      ml={3}
-                      color={"white"}
-                      bg={colorMode === "light" ? "green.500" : "green.600"}
-                      _hover={{
-                        bg: colorMode === "light" ? "green.400" : "green.500",
-                      }}
-                      onClick={onOpenEmailSiteLinkModal}
-                    >
-                      Send Link to DBCA Staff
-                    </Button>
-                  </Flex>{" "}
-                </>
-              ))}
-          </>
-        )}
+        {hideCannotFind !== true &&
+          hideCannotFind !== undefined &&
+          showAddUser && (
+            <>
+              {!ignoreArray ||
+                (ignoreArray?.length < 1 && (
+                  <>
+                    <CreateUserModal
+                      onClose={onCloseCreateUserModal}
+                      isOpen={isCreateUserModalOpen}
+                    />
+                    <EmailSiteLinkModal
+                      onClose={onCloseEmailSiteLinkModal}
+                      isOpen={isEmailSiteLinkModalOpen}
+                    />
+                    <Flex mt={4} mb={2} justifyContent={"flex-end"}>
+                      <Button
+                        color={"white"}
+                        bg={colorMode === "light" ? "blue.500" : "blue.600"}
+                        _hover={{
+                          bg: colorMode === "light" ? "blue.400" : "blue.500",
+                        }}
+                        onClick={onOpenCreateUserModal}
+                      >
+                        Add New External User
+                      </Button>
+                      <Button
+                        ml={3}
+                        color={"white"}
+                        bg={colorMode === "light" ? "green.500" : "green.600"}
+                        _hover={{
+                          bg: colorMode === "light" ? "green.400" : "green.500",
+                        }}
+                        onClick={onOpenEmailSiteLinkModal}
+                      >
+                        Send Link to DBCA Staff
+                      </Button>
+                    </Flex>{" "}
+                  </>
+                ))}
+            </>
+          )}
       </FormControl>
     );
   },

diff --git a/src/lib/api/features/projects.ts b/src/lib/api/features/projects.ts
@@ -572,6 +572,7 @@ export const getProjectsBasedOnSearchTerm = async (
     filterProjectKind: string;
     filterProjectStatus: string;
     filterYear: number;
+    filterUser: number | null;
   },
 ) => {
   try {
@@ -589,6 +590,14 @@ export const getProjectsBasedOnSearchTerm = async (
       url += "&only_inactive=true";
     }
 
+    if (filters.filterUser) {
+      if (filters.filterUser === 0 || filters.filterUser === null) {
+        // skip to get all areas
+      } else {
+        url += `&selected_user=${filters.filterUser}`;
+      }
+    }
+
     if (filters.filterBA) {
       if (filters.filterBA === "All") {
         // skip to get all areas

diff --git a/src/lib/hooks/helper/ProjectSearchContext.tsx b/src/lib/hooks/helper/ProjectSearchContext.tsx
@@ -11,6 +11,7 @@ import { IProjectData } from "../../../types";
 interface SearchFilters {
   onlyActive: boolean;
   onlyInactive: boolean;
+  filterUser: number | null;
   filterBA: string;
   filterProjectKind: string;
   filterProjectStatus: string;
@@ -30,6 +31,7 @@ interface IProjectSearchContext {
   setIsOnProjectsPage: (value: boolean) => void;
   onlyActive: boolean;
   onlyInactive: boolean;
+  filterUser: number | null;
   filterBA: string;
   filterProjectKind: string;
   filterProjectStatus: string;
@@ -62,6 +64,7 @@ export const ProjectSearchProvider = ({
       filterProjectKind: "All",
       filterProjectStatus: "All",
       filterYear: 0,
+      filterUser: null,
     },
   });
 

diff --git a/src/routes/Projects.tsx b/src/routes/Projects.tsx
@@ -28,6 +28,7 @@ import { PaginatorProject } from "../components/Pages/Projects/PaginatorProject"
 import { useProjectSearchContext } from "../lib/hooks/helper/ProjectSearchContext";
 import { BreadCrumb } from "@/components/Base/BreadCrumb";
 import { useLayoutSwitcher } from "@/lib/hooks/helper/LayoutSwitcherContext";
+import SearchProjectsByUser from "@/components/Navigation/SearchProjectsByUser";
 
 export const Projects = () => {
   const { colorMode } = useColorMode();
@@ -57,6 +58,7 @@ export const Projects = () => {
         filterProjectKind,
         filterProjectStatus,
         filterYear,
+        filterUser: null,
       });
     } else {
       setSearchFilters({
@@ -66,6 +68,7 @@ export const Projects = () => {
         filterProjectKind,
         filterProjectStatus,
         filterYear,
+        filterUser: null,
       });
     }
   };
@@ -79,6 +82,7 @@ export const Projects = () => {
         filterProjectKind,
         filterProjectStatus,
         filterYear,
+        filterUser: null,
       });
     } else {
       setSearchFilters({
@@ -88,6 +92,7 @@ export const Projects = () => {
         filterProjectKind,
         filterProjectStatus,
         filterYear,
+        filterUser: null,
       });
     }
   };
@@ -103,6 +108,19 @@ export const Projects = () => {
       filterProjectKind,
       filterProjectStatus: statusValue,
       filterYear,
+      filterUser: null,
+    });
+  };
+
+  const handleFilterUserChange = (userId: number | null) => {
+    setSearchFilters({
+      onlyActive,
+      onlyInactive,
+      filterBA,
+      filterProjectKind,
+      filterProjectStatus,
+      filterYear,
+      filterUser: userId,
     });
   };
 
@@ -117,6 +135,7 @@ export const Projects = () => {
       filterProjectStatus,
       filterProjectKind: projectKindValue,
       filterYear,
+      filterUser: null,
     });
   };
 
@@ -255,11 +274,14 @@ export const Projects = () => {
             base: "repeat(1, 1fr)",
             lg: "repeat(2, 1fr)",
           }}
-          gridRowGap={4}
-          gridColumnGap={4}
+          gridGap={4}
           justifyContent="space-between"
         >
-          <Grid gridRowGap={4}>
+          <Grid
+            gridRowGap={4}
+            // bg={"red.500"}
+            className="flex flex-col justify-end"
+          >
             <Grid
               gridGap={4}
               gridTemplateColumns={{
@@ -350,7 +372,16 @@ export const Projects = () => {
             </Grid>
           </Grid>
 
-          <Flex>
+          <Flex
+            flexDir={"column"}
+            w={"100%"}
+            justifyContent={"space-between"}
+            gridGap={4}
+          >
+            <SearchProjectsByUser
+              handleFilterUserChange={handleFilterUserChange}
+            />
+
             <SearchProjects orientation={"vertical"} />
           </Flex>
         </Grid>