Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Client Filtering + Extra Columns #72

Merged
merged 6 commits into from
Feb 10, 2025
Merged

Added Client Filtering + Extra Columns #72

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
164d6e1
filter
IsaacNguyen Feb 5, 2025
846640e
minor bugfix to boolean
IsaacNguyen Feb 5, 2025
fe60290
Modified so search and filter can work at the same time
Feb 9, 2025
706b77d
Updated so date types are handled properly
Feb 9, 2025
8017087
Added another if to make string equals filters case insensitive
Feb 9, 2025
01559d0
Merge branch 'main' into isaac-mehek/client-specifics-querying-functi…
benson-fm Feb 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
147 changes: 137 additions & 10 deletions client/src/components/clientlist/ClientList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,55 @@ import { useNavigate } from "react-router-dom";

import { useAuthContext } from "../../contexts/hooks/useAuthContext";
import { useBackendContext } from "../../contexts/hooks/useBackendContext";
import { ClientListFilter } from "../clientlist/ClientListFilter";

interface Client {
id: string;
firstName: string;
lastName: string;
phoneNumber: string;
email: string;
caseManagerFirstName: string;
caseManagerLastName: string;
entranceDate: string;
exitDate: string;
dateOfBirth: string;
bedNights: number;
bedNightsChildren: number;
createdBy: string;
grant: string;
age: number;
emergencyContactName: string;
emergencyContactPhoneNumber: string;
medical: boolean;
estimatedExitDate: string;
pregnantUponEntry: string;
disabledChildren: string;
ethnicity: string;
race: string;
cityOfLastPermanentResidence: string;
priorLiving: string;
priorLivingCity: string;
shelterInLastFiveYears: string;
homelessnessLength: number;
chronicallyHomeless: string;
attendingSchoolUponEntry: string;
employementGained: string;
reasonForLeaving: string;
specificReasonForLeaving: string;
specificDestination: string;
savingsAmount: string;
attendingSchoolUponExit: string;
reunified: string;
successfulCompletion: string;
destinationCity: string;
locationName: string;
}

import { Client } from "../../types/client";
import { downloadCSV } from "../../utils/downloadCSV";


export const ClientList = () => {
const headers = [
"Client First Name",
Expand All @@ -43,6 +89,7 @@ export const ClientList = () => {

const [clients, setClients] = useState<Client[]>([]);
const [searchKey, setSearchKey] = useState("");
const [filterQuery, setFilterQuery] = useState<string[]>([]);

const onPressCSVButton = () => {
const data =
Expand All @@ -62,16 +109,31 @@ export const ClientList = () => {
useEffect(() => {
const fetchData = async () => {
try {
const response = searchKey
? await backend.get(`/clients?page=&filter=&search=${searchKey}`)
: await backend.get("/clients");
console.log(filterQuery)
let response;

if (searchKey && filterQuery.length > 1) {
response = await backend.get(
`/clients?page=&filter=${encodeURIComponent(filterQuery.join(" "))}&search=${searchKey}`
);
} else if (searchKey) {
response = await backend.get(
`/clients?page=&filter=&search=${searchKey}`
);
} else if (filterQuery.length > 1) {
response = await backend.get(
`/clients?page=&filter=${encodeURIComponent(filterQuery.join(" "))}&search=`
);
} else {
response = await backend.get("/clients");
}
setClients(response.data);
} catch (error) {
console.error("Error fetching users:", error);
}
};
fetchData();
}, [backend, searchKey]);
}, [backend, searchKey, filterQuery]);

return (
<VStack
Expand Down Expand Up @@ -102,6 +164,7 @@ export const ClientList = () => {
placeholder="search"
onChange={(e) => setSearchKey(e.target.value)}
/>
<ClientListFilter setFilterQuery={setFilterQuery}/>
<HStack
width="55%"
justifyContent="space-between"
Expand Down Expand Up @@ -140,9 +203,43 @@ export const ClientList = () => {
<Table variant="striped">
<Thead>
<Tr>
{headers.map((header, index) => (
<Th key={index}>{header}</Th>
))}
<Th>Client First Name</Th>
<Th>Client Last Name</Th>
<Th>Case Manager</Th>
<Th>Site</Th>
<Th>Grant</Th>
<Th>Birthday</Th>
<Th>Age</Th>
<Th>Entry Date</Th>
<Th>Exit Date</Th>
<Th>Bed Nights</Th>
<Th>Total Bed Nights w/ Children</Th>
<Th>Phone Number</Th>
<Th>Email</Th>
<Th>Emergency Contact Name</Th>
<Th>Emergency Contact Phone</Th>
<Th>Medical</Th>
<Th>Estimated Exit Date</Th>
<Th>Pregnant Upon Entry</Th>
<Th>Disabled Children</Th>
<Th>Ethnicity</Th>
<Th>Race</Th>
<Th>City of last Permanent Residence</Th>
<Th>Prior Living</Th>
<Th>Prior Living City</Th>
<Th>Shelter in Last Five Years</Th>
<Th>Homelessness Length</Th>
<Th>Chronically Homelessness</Th>
<Th>Attending School Upon Entry</Th>
<Th>Employment Gained</Th>
<Th>Reason For Leaving</Th>
<Th>Specific Reason for Leaving</Th>
<Th>Specific Destination</Th>
<Th>Savings Amount</Th>
<Th>Attending School Upon Exit</Th>
<Th>Reunified</Th>
<Th>Successful Completion</Th>
<Th>Destination City</Th>
</Tr>
</Thead>
<Tbody>
Expand All @@ -155,11 +252,41 @@ export const ClientList = () => {
>
<Td>{client.firstName}</Td>
<Td>{client.lastName}</Td>
<Td>{client.phoneNumber}</Td>
<Td>{client.email}</Td>
<Td>{client.caseManagerFirstName} {client.caseManagerLastName}</Td>
<Td>{client.locationName}</Td>
<Td>{client.grant}</Td>
<Td>{client.dateOfBirth}</Td>
<Td>{client.age}</Td>
<Td>{client.entranceDate}</Td>
<Td>{client.exitDate}</Td>
<Td>{client.dateOfBirth}</Td>
<Td>{client.bedNights}</Td>
<Td>{client.bedNightsChildren}</Td>
<Td>{client.phoneNumber}</Td>
<Td>{client.email}</Td>
<Td>{client.emergencyContactName}</Td>
<Td>{client.emergencyContactPhoneNumber}</Td>
<Td>{client.medical ? "Yes" : "No"}</Td>
<Td>{client.estimatedExitDate}</Td>
<Td>{client.pregnantUponEntry ? "Yes" : "No"}</Td>
<Td>{client.disabledChildren ? "Yes" : "No"}</Td>
<Td>{client.ethnicity}</Td>
<Td>{client.race}</Td>
<Td>{client.cityOfLastPermanentResidence}</Td>
<Td>{client.priorLiving}</Td>
<Td>{client.priorLivingCity}</Td>
<Td>{client.shelterInLastFiveYears ? "Yes" : "No"}</Td>
<Td>{client.homelessnessLength}</Td>
<Td>{client.chronicallyHomeless ? "Yes" : "No"}</Td>
<Td>{client.attendingSchoolUponEntry ? "Yes" : "No"}</Td>
<Td>{client.employementGained ? "Yes" : "No"}</Td>
<Td>{client.reasonForLeaving}</Td>
<Td>{client.specificReasonForLeaving}</Td>
<Td>{client.specificDestination}</Td>
<Td>{client.savingsAmount}</Td>
<Td>{client.attendingSchoolUponExit ? "Yes" : "No"}</Td>
<Td>{client.reunified ? "Yes" : "No"}</Td>
<Td>{client.successfulCompletion ? "Yes" : "No"}</Td>
<Td>{client.destinationCity}</Td>
</Tr>
))
: null}
Expand Down
Loading
Loading