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

Resident Status Style #210

Merged
merged 3 commits into from
Dec 3, 2023
Merged

Resident Status Style #210

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4d3da4c
add styles for resident status
owen-sellner Nov 29, 2023
2dff396
fix time error
owen-sellner Dec 3, 2023
50cfd6b
adjust status width
owen-sellner Dec 3, 2023
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
55 changes: 46 additions & 9 deletions frontend/src/components/pages/ResidentDirectory/ResidentDirectoryTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import {
} from "@chakra-ui/react";
import { VscKebabVertical } from "react-icons/vsc";
import { BuildingLabel } from "../../../types/BuildingTypes";
import { Resident } from "../../../types/ResidentTypes";
import { Resident, ResidentStatus } from "../../../types/ResidentTypes";
import EditResident from "../../forms/EditResident";
import ResidentAPIClient from "../../../APIClients/ResidentAPIClient";
import getFormattedDateAndTime from "../../../utils/DateUtils";
Expand All @@ -35,19 +35,44 @@ type Props = {
countResidents: () => Promise<void>;
};

const getStatusColor = (status: string): string => {
let color = "";

switch (status) {
case ResidentStatus.CURRENT:
color = "green.400";
break;
case ResidentStatus.FUTURE:
color = "teal.400";
break;
case ResidentStatus.PAST:
color = "gray.300";
break;
default:
color = "black";
}

return color;
};

const getFormattedDatesAndStatus = (resident: Resident) => {
const startDateObj = convertToDate(resident.dateJoined);
const startDate = getFormattedDateAndTime(startDateObj, true);

let endDate;
let status = ResidentStatus.CURRENT;
const currentDate = new Date();
currentDate.setHours(0,0,0,0);
if (resident.dateLeft != null) {
const endDateObj = convertToDate(resident.dateLeft);
endDate = getFormattedDateAndTime(endDateObj, true);
if (endDateObj < currentDate) {
status = ResidentStatus.PAST;
}
}
if (currentDate < startDateObj) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: could make this an else if lol

status = ResidentStatus.FUTURE;
}
const status =
resident.dateJoined !== null && resident.dateLeft !== null
? "Past"
: "Current";
return {
startDate,
endDate,
Expand All @@ -67,7 +92,7 @@ const ResidentDirectoryTable = ({
getRecords,
countResidents,
}: Props): React.ReactElement => {
const { authenticatedUser, setAuthenticatedUser } = useContext(AuthContext);
owen-sellner marked this conversation as resolved.
Show resolved Hide resolved
const { authenticatedUser } = useContext(AuthContext);
const [showAlert, setShowAlert] = useState(false);
const newToast = CreateToast();

Expand Down Expand Up @@ -140,7 +165,7 @@ const ResidentDirectoryTable = ({
<Thead>
<Tr>
<Th>Resident</Th>
<Th>Status</Th>
<Th textAlign="center">Status</Th>
<Th>Building</Th>
<Th>Residency Start Date</Th>
<Th>Residency End Date</Th>
Expand All @@ -155,8 +180,20 @@ const ResidentDirectoryTable = ({
// TODO: Remove non-null assertion from residentId
return (
<Tr key={resident.id} style={{ verticalAlign: "middle" }}>
<Td width="20%">{resident.residentId!}</Td>
<Td width="15%">{status}</Td>
<Td width="10%">{resident.residentId!}</Td>
<Td width="25%"
textStyle="user-status-label"
textAlign="center"
>
<Box
backgroundColor={getStatusColor(status)}
borderRadius="40px"
padding="6px 0px"
marginX="20%"
>
{status}
</Box>
</Td>
<Td width="20%">{resident.building.name}</Td>
<Td width="20%">{startDate.date}</Td>
<Td width="15%">{endDate ? endDate.date : ""}</Td>
Expand Down
6 changes: 6 additions & 0 deletions frontend/src/types/ResidentTypes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,3 +34,9 @@ export type CreateResidentParams = Omit<
export type EditResidentParams = Omit<Resident, "residentId" | "building"> & {
buildingId: number;
};

export enum ResidentStatus {
FUTURE = "Future",
PAST = "Past",
CURRENT = "Current",
}
Loading