diff --git a/client/src/pages/UsersManagementPage.tsx b/client/src/pages/UsersManagementPage.tsx index 3e5d9d2..c56db1d 100644 --- a/client/src/pages/UsersManagementPage.tsx +++ b/client/src/pages/UsersManagementPage.tsx @@ -8,15 +8,23 @@ import { TableRow, Button, Tooltip, + Input, } from "@nextui-org/react"; import { useEffect, useState } from "react"; import instance from "../security/http"; import config from "../config"; import { popErrorToast, popToast } from "../utilities"; -import { ArchiveBoxIcon, ClipboardDocumentIcon, LifebuoyIcon } from "../icons"; +import { + ArchiveBoxIcon, + ClipboardDocumentIcon, + LifebuoyIcon, + MagnifyingGlassIcon, + XMarkIcon, +} from "../icons"; export default function UsersManagement() { const [userInformationlist, setUserInformationList] = useState([]); + const [searchQuery, setSearchQuery] = useState(""); const columns = [ { key: "firstName", @@ -54,7 +62,11 @@ export default function UsersManagement() { const populateUserInformationList = () => { instance - .get(`${config.serverAddress}/users/all`) + .get( + `${config.serverAddress}/users/all${ + searchQuery.length > 0 ? `?search=${searchQuery}` : "" + }` + ) .then((response) => { setUserInformationList(response.data); console.log(userInformationlist); @@ -68,6 +80,16 @@ export default function UsersManagement() { populateUserInformationList(); }, []); + useEffect(() => { + const debounceTimer = setTimeout(() => { + populateUserInformationList(); + }, 500); + + return () => { + clearTimeout(debounceTimer); + }; + }, [searchQuery]); + const handleCopyID = (userId: string, firstName: string) => { navigator.clipboard.writeText(userId); popToast(firstName + "'s User ID has been copied!", 1); @@ -81,7 +103,7 @@ export default function UsersManagement() { }/${userId}` ) .then(() => { - window.location.reload(); + populateUserInformationList(); }) .catch((error) => { popErrorToast(error); @@ -92,7 +114,30 @@ export default function UsersManagement() {
{userInformationlist && (
-

Users Onboard

+
+

Users Onboard

+ } + endContent={ + searchQuery.length > 0 && ( + + ) + } + /> +
{(column) => ( @@ -182,6 +227,11 @@ export default function UsersManagement() { )}
+ {userInformationlist.length <= 0 && ( +
+

No users to display.

+
+ )}
)}
diff --git a/server/routes/users.js b/server/routes/users.js index 61284c9..f293339 100644 --- a/server/routes/users.js +++ b/server/routes/users.js @@ -78,8 +78,12 @@ router.get("/all", async (req, res) => { let search = req.query.search; if (search) { condition[Op.or] = [ - { title: { [Op.like]: `%${search}%` } }, - { description: { [Op.like]: `%${search}%` } }, + { id: { [Op.like]: `%${search}%` } }, + { firstName: { [Op.like]: `%${search}%` } }, + { lastName: { [Op.like]: `%${search}%` } }, + { email: { [Op.like]: `%${search}%` } }, + { phoneNumber: { [Op.like]: `%${search}%` } }, + { townCouncil: { [Op.like]: `%${search}%` } }, ]; }