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

Kathleen megan/adding in functional components #106

Merged
merged 5 commits into from
Oct 24, 2024
Merged

Kathleen megan/adding in functional components #106

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
26bb22d
Changes to Home and Sider
KathleenX7 Sep 27, 2024
e8ca96d
fix: room card sizing + general styling of home page
jeessh Sep 28, 2024
cb556f2
update Announcements
KathleenX7 Sep 28, 2024
a9c6997
Merge branch 'dev' into kathleen-megan/adding-in-functional-components
jeessh Sep 28, 2024
1b361b2
ran linter
jeessh Oct 19, 2024
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
13 changes: 11 additions & 2 deletions frontend/src/components/common/SideBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@
Tab,
Box,
Button,
Avatar,

Check warning on line 9 in frontend/src/components/common/SideBar.tsx

View workflow job for this annotation

GitHub Actions / run-lint 

'Avatar' is defined but never used
Text,
Flex,
Heading,

Check warning on line 12 in frontend/src/components/common/SideBar.tsx

View workflow job for this annotation

GitHub Actions / run-lint 

'Heading' is defined but never used
useBreakpointValue,

Check warning on line 13 in frontend/src/components/common/SideBar.tsx

View workflow job for this annotation

GitHub Actions / run-lint 

'useBreakpointValue' is defined but never used
} from "@chakra-ui/react";
import { useNavigate } from "react-router-dom";

Expand Down Expand Up @@ -95,11 +95,20 @@
// });

return (
<Flex flexDir="column" w="100%" maxW="240px">
<Flex
flexDir="column"
w="100%"
minW="240px"
maxW="240px"
position="relative"
>
<Box
h="100vh"
h="100%"
w="240px"
borderRight="solid"
borderRightColor="gray.300"
background="white"
position="fixed"
pt={6}
pb={6}
pr={4}
Expand Down
96 changes: 52 additions & 44 deletions frontend/src/components/pages/home/AnnouncementNotification.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import moment from "moment";
import { Box, Text, Flex, Icon, IconButton } from "@chakra-ui/react";
import PersonOutlineOutlinedIcon from "@mui/icons-material/PersonOutlineOutlined";
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import ExpandLessIcon from "@mui/icons-material/ExpandLess";

import { Announcement } from "../../../types/NotificationTypes";
Expand All @@ -16,52 +17,59 @@ const AnnouncementNotification = ({

return (
<Box w="100%" p={3}>
<Flex alignItems="center">
<Box
borderRadius="full"
border="2px solid"
borderColor="gray.300"
p={1}
mr={3}
>
<Icon
as={PersonOutlineOutlinedIcon}
boxSize={10}
color="purple.main"
/>
</Box>
<Flex flexDir="column" w="80%">
<Flex alignItems="baseline" w="100%">
<Text as="b" mr={4}>
{"Admin to Room ".concat(room)}
</Text>
<Text color="gray.500" fontSize="sm">
posted at {moment(createdAt).format("h:mm a")}
</Text>
</Flex>
<Box w="80%">
{showFullMessage ? (
<Text mt={1}>{message}</Text>
) : (
<Text
mt={1}
overflow="hidden"
textOverflow="ellipsis"
whiteSpace="nowrap"
>
{message}
</Text>
)}
<Flex justifyContent="space-between" maxW="100%" position="relative">
<Flex alignItems="flex-start" w="100%" overflow="hidden">
<Box
borderRadius="full"
border="2px solid"
borderColor="#C5C8D8"
p={1}
mr={3}
>
<Icon
as={PersonOutlineOutlinedIcon}
boxSize={10}
color="purple.main"
/>
</Box>
<Flex flexDir="column" maxW="80%">
<Flex alignItems="baseline" w="100%">
<Text as="b" mr={4}>
{"Admin to Room ".concat(room)}
</Text>
<Text color="gray.500" fontSize="sm" margin="0">
posted at {moment(createdAt).format("h:mm a")}
</Text>
</Flex>
<Box w="100%">
{showFullMessage ? (
<Text mt={1} mb={1}>
{message}
</Text>
) : (
<Text
mt={1}
mb={1}
overflow="hidden"
textOverflow="ellipsis"
whiteSpace="nowrap"
>
{message}
</Text>
)}
</Box>
</Flex>
</Flex>
<Flex ml="auto">
<IconButton
aria-label="expand"
bg="white"
_hover={{ bg: "white" }}
onClick={() => setShowFullMessage(!showFullMessage)}
icon={showFullMessage ? <ExpandMoreIcon /> : <ChevronRightIcon />}
size="md"
/>
</Flex>
<IconButton
aria-label="expand"
bg="white"
_hover={{ bg: "white" }}
onClick={() => setShowFullMessage(!showFullMessage)}
icon={showFullMessage ? <ChevronRightIcon /> : <ExpandLessIcon />}
size="md"
/>
</Flex>
</Box>
);
Expand Down
82 changes: 67 additions & 15 deletions frontend/src/components/pages/home/HomePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useState, useEffect } from "react";
import { Flex, Box, Heading, Text } from "@chakra-ui/react";
import { Flex, Box, Text } from "@chakra-ui/react";
import { announcementsMockData } from "../../../mocks/notifications";
import AnnouncementNotification from "./AnnouncementNotification";
import { Announcement } from "../../../types/NotificationTypes";
Expand Down Expand Up @@ -43,26 +43,74 @@ const HomePage = (): React.ReactElement => {
setNumberPosts(thisWeeksAnnouncements.length);
}, []);

const getDate = () => {
const options: Intl.DateTimeFormatOptions = {
year: "numeric",
month: "long",
day: "numeric",
};
return new Date().toLocaleDateString("en-US", options);
};

return (
<Flex flexDir="column" alignItems="center" flexGrow={1}>
<Box w="100%" h="13%" borderWidth={2} bg="purple.50" />
<Flex flexDir="column" w="65%" flexGrow={1} position="absolute" top="2%">
<Text
fontSize="2xl"
fontWeight="bold"
textAlign="left"
<Flex
flexDir="column"
alignItems="center"
overflow="scroll"
position="relative"
width="100%"
>
<Box
w="100%"
h="150px"
borderWidth={0}
bg="purple.50"
position="absolute"
zIndex="-1"
top="0"
/>
<Flex
flexDir="column"
w="75%"
flexGrow={1}
top="2%"
justifyContent="center"
>
<Flex
flexDir="row"
justifyContent="space-between"
alignItems="center"
paddingY="12px"
marginTop="24px"
>
Marillac Place Overview
</Text>
<Text
fontSize="3xl"
fontWeight="bold"
textAlign="left"
alignItems="center"
paddingY="8px"
>
Marillac Place Overview
</Text>

<Text
fontSize="xl"
fontWeight="bold"
textAlign="left"
alignItems="center"
paddingY="8px"
color="#382584"
>
{getDate()}
</Text>
</Flex>
<RoomGrid />
<Box
border="2px solid grey"
border="2px solid #E3E4EA"
p={6}
justifyContent="space-between"
borderRadius="8px"
marginTop="36px"
marginBottom="36px"
w="100%"
>
<Flex justifyContent="space-between" alignItems="center" mb={2}>
Expand All @@ -77,8 +125,12 @@ const HomePage = (): React.ReactElement => {
</Text>
</Flex>

<Text onClick={() => setViewAll(!viewAll)} cursor="pointer">
{viewAll ? "View less" : "View all"}
<Text
onClick={() => setViewAll(!viewAll)}
cursor="pointer"
textDecoration="underline"
>
{viewAll ? "Collapse All" : "View all"}
</Text>
</Flex>
{(viewAll ? announcements : recentAnnouncements).map(
Expand All @@ -98,4 +150,4 @@ const HomePage = (): React.ReactElement => {
);
};

export default HomePage;
export default HomePage;
43 changes: 20 additions & 23 deletions frontend/src/components/pages/home/HomeRoomCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import React from "react";
import { Flex, Heading, Text, Box, Circle } from "@chakra-ui/react";

// TODO: Change name to id when schedule is done

type Props = {
room: string | number;
residentId: number;
Expand All @@ -10,62 +12,57 @@ const RoomCard = ({ room, residentId }: Props): React.ReactElement => {
return (
<Box
p="10px"
ml="30px"
mr="20px"
mt="20px"
border="solid"
borderRadius="10px"
borderColor="gray.300"
w="17vw"
background="white"
width="100%"
>
<Flex flexDir="column" ml={4} my={4}>
<Heading size="sm" color="purple.500">
Room {room} — ID{residentId}
</Heading>
<Flex flexDir="column" my="5px">
<Flex flexDir="row">
<Circle size="35px" border="solid" borderColor="gray.300" my={1}>
<Circle
size="22px"
border="solid"
borderColor="gray.300"
my={1}
padding={2.5}
>
<Flex alignItems="center" justifyContent="center" fontSize="sm">
1
</Flex>
</Circle>
<Flex
alignItems="center"
justifyContent="center"
fontSize="md"
fontSize="sm"
ml={3}
>
Pending Tasks
</Flex>
</Flex>
<Flex flexDir="row">
<Circle size="35px" border="solid" borderColor="gray.300" my={1}>
<Flex alignItems="center" justifyContent="center" fontSize="sm">
2
</Flex>
</Circle>
<Flex
alignItems="center"
justifyContent="center"
fontSize="md"
ml={3}
<Circle
size="22px"
border="solid"
borderColor="gray.300"
my={1}
padding={2.5}
>
Tasks Assigned
</Flex>
</Flex>
<Flex flexDir="row">
<Circle size="35px" border="solid" borderColor="gray.300" my={1}>
<Flex alignItems="center" justifyContent="center" fontSize="sm">
2
</Flex>
</Circle>
<Flex
alignItems="center"
justifyContent="center"
fontSize="md"
fontSize="sm"
ml={3}
>
Active Warnings
Tasks Assigned
</Flex>
</Flex>
</Flex>
Expand Down
Loading
Loading