Skip to content

Commit

Permalink
Merge branch 'dev' into ryan-jesse/announcement-homepage-component
Browse files Browse the repository at this point in the history
  • Loading branch information
@jeessh
jeessh authored Sep 21, 2024
2 parents 0935f17 + 26c9275 commit b89149f
Show file tree
Hide file tree
Showing 17 changed files with 513 additions and 138 deletions.
9 changes: 0 additions & 9 deletions frontend/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@ import ResetPasswordPage from "./components/auth/ResetPasswordPage";
import HomePage from "./components/pages/home/HomePage";
import AnnouncementsPage from "./components/pages/announcements/AnnouncementsPage";

Check warning on line 32 in frontend/src/App.tsx

View workflow job for this annotation

GitHub Actions / run-lint 

'AnnouncementsPage' is defined but never used
import TasksPage from "./components/pages/tasks/TasksPage";
import ApprovalsPage from "./components/pages/approvals/ApprovalsPage";
import SchedulePage from "./components/pages/schedule/SchedulePage";
import ResidentsPage from "./components/pages/residents/ResidentsPage";
import InsightsPage from "./components/pages/insights/InsightsPage";
Expand Down Expand Up @@ -105,14 +104,6 @@ const App = (): React.ReactElement => {
</PrivateRoute>
}
/>
<Route
path={Routes.APPROVALS_PAGE}
element={
<PrivateRoute>
<ApprovalsPage />
</PrivateRoute>
}
/>
<Route
path={Routes.SCHEDULE_PAGE}
element={
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/assets/marillacPlaceLogo.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
93 changes: 89 additions & 4 deletions frontend/src/components/common/CommonTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ import {
import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
import ChevronLeftOutlinedIcon from "@mui/icons-material/ChevronLeftOutlined";
import ChevronRightOutlinedIcon from "@mui/icons-material/ChevronRightOutlined";
import KeyboardArrowUpOutlinedIcon from "@mui/icons-material/KeyboardArrowUpOutlined";
import KeyboardArrowDownOutlinedIcon from "@mui/icons-material/KeyboardArrowDownOutlined";

type TableTypes = string | number | boolean | Date;

Expand All @@ -34,6 +36,10 @@ type Props = {
isSelectable?: boolean;
};

type SortState = {
[key: string]: number;
};

const CommonTable = ({
columnInfo,
data,
Expand All @@ -44,6 +50,9 @@ const CommonTable = ({
const [checked, setChecked] = useState(data.map(() => false));
const [page, setPage] = useState(1);
const [pageArray, setPageArray] = useState<number[]>([]);
const [sortingColumn, setSortingColumn] = useState<SortState>({});
const [originalData, setOriginalData] = useState(data);
const [sortedData, setSortedData] = useState(data);

useEffect(() => {
return Math.ceil(data.length / maxResults) >= 5
Expand All @@ -56,10 +65,54 @@ const CommonTable = ({
);
}, [data, maxResults]);

useEffect(() => {
setOriginalData(data);
setSortedData(data);
}, [data]);

// sorting the columns by ascending and descending order based on column indicated
const sortColumn = (column: string) => {
const newSortingColumn: SortState = {};
columnInfo.forEach((col) => {
newSortingColumn[col.key] =
col.key === column ? sortingColumn[column] : 0;
});

// increment column sorting state
sortingColumn[column] = sortingColumn[column]
? sortingColumn[column] + 1
: 1;

// if at the end, go back to 0
if (sortingColumn[column] === 3) {
setSortingColumn({ ...sortingColumn, [column]: 0 });
setSortedData(originalData);
return;
}
setSortingColumn({
...newSortingColumn,
[column]: sortingColumn[column],
});

// apply sorting based on which sorting state the column's in
const sorted = [...originalData].sort((a, b) => {
if (sortingColumn[column] === 1) {
return a[column] > b[column] ? 1 : -1;
}
if (sortingColumn[column] === 2) {
return a[column] < b[column] ? 1 : -1;
}
return 0;
});
setSortedData(sorted);
};

// constants for pagination UI
const checkedPage = checked.slice((page - 1) * maxResults, page * maxResults);
const allChecked = checkedPage.every(Boolean);
const isIndeterminate = checkedPage.some(Boolean) && !allChecked;

// pagination functions
const leftPaginate = () => {
if (page > 1) setPage(page - 1);
if (pageArray[0] > 1 && pageArray.length === 5) {
Expand Down Expand Up @@ -127,14 +180,46 @@ const CommonTable = ({
/>
</Th>
) : null}
{columnInfo.map((header, index) => {
return <Th key={index}>{header.header}</Th>;
})}
{columnInfo.map((header, index) => (
<Th key={index}>
<Flex alignItems="center">
{header.header}
<Flex
alignItems="center"
flexDirection="column"
paddingLeft="2.5px"
>
<KeyboardArrowUpOutlinedIcon
style={{
height: "0.5em",
cursor: "pointer",
color:
sortingColumn[header.key] === 1 ? "" : "#c4c8d8",
}}
onClick={() => {
sortColumn(header.key);
}}
/>
<KeyboardArrowDownOutlinedIcon
style={{
height: "0.5em",
cursor: "pointer",
color:
sortingColumn[header.key] === 2 ? "" : "#c4c8d8",
}}
onClick={() => {
sortColumn(header.key);
}}
/>
</Flex>
</Flex>
</Th>
))}
<Th />
</Tr>
</Thead>
<Tbody>
{data
{sortedData
.slice((page - 1) * maxResults, page * maxResults)
.map((row, index) => {
return (
Expand Down
29 changes: 19 additions & 10 deletions frontend/src/components/common/FormField.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,12 @@ import React from "react";
import {
Button,
Input,
Select,
Flex,
FormControl,
FormLabel,
InputRightElement,
InputGroup,
InputLeftElement,
Checkbox,
Container,
} from "@chakra-ui/react";

import VisibilityIcon from "@mui/icons-material/Visibility";
Expand All @@ -24,10 +21,11 @@ const FormField = ({
onBlur,
submitPressed,
required = false,
error = false,
isPassword = false,
showPassword,
setShowPassword,
leftElement
leftElement,
}: {
label: string;
value: string;
Expand All @@ -36,6 +34,7 @@ const FormField = ({
onBlur?: () => void;
submitPressed: boolean;
required?: boolean;
error?: boolean;
isPassword?: boolean;
showPassword?: boolean;
setShowPassword?: React.Dispatch<React.SetStateAction<boolean>>;
Expand All @@ -47,15 +46,25 @@ const FormField = ({
{label}
</FormLabel>
<InputGroup>
{leftElement && <InputLeftElement height='34px' pointerEvents='none' color='black'>
<Flex>{leftElement}</Flex>
</InputLeftElement>}
{leftElement && (
<InputLeftElement height="34px" pointerEvents="none" color="black">
<Flex>{leftElement}</Flex>
</InputLeftElement>
)}

<Input
variant="primary"
placeholder='Enter amount'
borderColor={submitPressed && !value ? "red.error" : "gray.300"}
boxShadow={submitPressed && !value ? "0 0 2px red.error" : "none"}
placeholder=""
borderColor={
error || (submitPressed && !value && required)
? "red.error"
: "gray.300"
}
boxShadow={
error || (submitPressed && !value && required)
? "0 0 2px red.error"
: "none"
}
type={
isPassword && setShowPassword && !showPassword ? "password" : type
}
Expand Down
6 changes: 5 additions & 1 deletion frontend/src/components/common/ModalContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,11 @@ const ModalContainer = ({
children,
}: Props): React.ReactElement => {
return (
<Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
<Modal
closeOnOverlayClick={false}
isOpen={isOpen}
onClose={() => setIsOpen(false)}
>
<ModalOverlay />
<ModalContent>
<ModalHeader>
Expand Down
82 changes: 43 additions & 39 deletions frontend/src/components/common/SideBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,14 @@ const SideBarTab: React.FC<{ label: string; handleClick: () => void }> = ({
return (
<Tab
borderRadius="8px"
justifyContent="stretch"
textAlign="left"
fontWeight={500}
color="black"
justifyContent="stretch"
onClick={handleClick}
pt={1}
pb={1}
mt={5}
_selected={{ bg: "purple.main", color: "white" }}
_hover={{ bg: "purple.100", color: "purple.main" }}
>
Expand All @@ -54,8 +59,8 @@ const SideBarTab: React.FC<{ label: string; handleClick: () => void }> = ({
const SideBar: React.FC = () => {
const navigate = useNavigate();
// const { authenticatedUser, setAuthenticatedUser } = useContext(AuthContext);
const { setAuthenticatedUser } = useContext(AuthContext); // Temp
const authenticatedUser = mockAuthenticatedUser; // Temp
const { setAuthenticatedUser } = useContext(AuthContext); // Temp
const authenticatedUser = mockAuthenticatedUser; // Temp
const [logout] = useMutation<{ logout: null }>(LOGOUT);

const onLogOutClick = async () => {
Expand All @@ -64,7 +69,7 @@ const SideBar: React.FC = () => {
logout,
);
if (success) {
setAuthenticatedUser(null);
setAuthenticatedUser(null);
}
};

Expand All @@ -73,60 +78,48 @@ const SideBar: React.FC = () => {
{ label: "Tasks", route: Routes.TASKS_PAGE },
{ label: "Approvals", route: Routes.APPROVALS_PAGE },
{ label: "Schedule", route: Routes.SCHEDULE_PAGE },
{ label: "Residents", route: Routes.RESIDENTS_PAGE },
{ label: "Insights", route: Routes.INSIGHTS_PAGE },
{ label: "Announcements", route: Routes.HOME_PAGE }, // NEED NEW NAME
{ label: "Participants", route: Routes.RESIDENTS_PAGE }, // RESIDENTS/PARTICIPANTS
{ label: "Task List", route: Routes.TASKS_PAGE },
// { label: "Insights", route: Routes.INSIGHTS_PAGE },
];

const currentPage = pages.findIndex(
(page) => page.route === window.location.pathname,
);

const sidebarWidth = useBreakpointValue({
base: "100%",
md: "50%",
lg: "30%",
xl: "20%",
});
// const sidebarWidth = useBreakpointValue({
// base: "100%",
// md: "100%",
// lg: "10%",
// xl: "10%",
// });

return (
<Flex flexDir="column" w={sidebarWidth}>
<Flex flexDir="column" w="100%" maxW="240px">
<Box
h="100vh"
borderRight="solid"
borderRightColor="gray.300"
pt={10}
pt={6}
pb={6}
pr={4}
pl={4}
display="flex"
flexDirection="column"
justifyContent="space-between"
>
<Flex flexDir="column" alignItems="space-between" h="100%">
<Flex flexDir="column" h="100%">
<Flex flexDir="column" alignItems="flex-start" w="100%" pb={20}>
<Box
border="solid"
borderColor="gray.300"
borderRadius="8px"
pl={2}
pr={2}
w="100%"
>
<Flex align="center">
<Avatar name="Jane Doe" src="https://bit.ly/2k1H1t6" />
<Flex flexDir="column" ml={4}>
<Heading size="sm" mt={4}>
{authenticatedUser?.firstName}{" "}
{authenticatedUser?.lastName}
</Heading>
<Text>Administrative Staff</Text>
</Flex>
</Flex>
</Box>
<Flex flexDir="column" alignItems="column" maxW="250px">
<Logo width="85%" />
</Flex>

<Tabs
defaultIndex={currentPage}
orientation="vertical"
variant="solid-rounded"
size="lg"
size="md"
>
<TabList w="100%">
{pages.map((page) => (
Expand All @@ -140,10 +133,21 @@ const SideBar: React.FC = () => {
</Tabs>
</Flex>

<Flex alignItems="center" justifyContent="center">
<Logo width="50%" />
<Button variant="primary" ml={3} onClick={onLogOutClick}>
Logout
<Flex flexDirection="column" alignItems="left">
<Text whiteSpace="nowrap" fontWeight="bold" mb="3">
Administrative Staff
</Text>

<Button
variant="del"
onClick={onLogOutClick}
border="1px solid #C5C8D8"
color="#B21D2F"
fontWeight={400}
fontSize="14px"
width="fit-content"
>
Sign out
</Button>
</Flex>
</Flex>
Expand Down
Loading

0 comments on commit b89149f

Please sign in to comment.