Skip to content

Commit

Permalink
Add filler text for empty last page edge case
Browse files Browse the repository at this point in the history
  • Loading branch information
@pratishta
pratishta committed Jul 24, 2024
1 parent ebe2471 commit 8d55da5
Show file tree
Hide file tree
Showing 3 changed files with 220 additions and 192 deletions.
186 changes: 102 additions & 84 deletions app/components/CapitalProjectsList/CapitalProjectsDrawer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,95 +1,113 @@
import { Box, Button, Flex, Heading, Hide, Input } from "@nycplanning/streetscape";
import { Drawer,
DrawerBody,
DrawerFooter,
DrawerHeader,
DrawerOverlay,
DrawerContent,
DrawerCloseButton, } from "@chakra-ui/react";
import {
Box,
Button,
Flex,
Heading,
Hide,
Input,
} from "@nycplanning/streetscape";
import {
Drawer,
DrawerBody,
DrawerFooter,
DrawerHeader,
DrawerOverlay,
DrawerContent,
DrawerCloseButton,
} from "@chakra-ui/react";
import { Agency, CapitalProject } from "~/gen";
import { CapitalProjectsList } from "./CapitalProjectsList";
import { useState } from "react";

export interface CapitalProjectsDrawerProps {
capitalProjects: Array<CapitalProject>;
district: string;
limit: number;
path: string;
offset: number;
total: number;
agencies: Agency[];
capitalProjects: Array<CapitalProject>;
district: string;
limit: number;
path: string;
offset: number;
total: number;
agencies: Agency[];
}

export const CapitalProjectsDrawer = ({
capitalProjects, district, limit, offset, total, path, agencies,
capitalProjects,
district,
limit,
offset,
total,
path,
agencies,
}: CapitalProjectsDrawerProps) => {
// const { isOpen, onOpen, onClose } = useDisclosure()
const [isExpanded, setIsExpanded] = useState(false);

return (


<Drawer
isOpen={true}
placement='bottom'
onClose={() => {return}}
// finalFocusRef={btnRef}
>
<DrawerOverlay />
<DrawerContent>
<Flex
borderTopRadius={"base"}
padding={{ base: 3, lg: 4 }}
background={"white"}
direction={"column"}
// width={{ base: "full", lg: "21.25rem" }}
// maxW={{ base: "21.25rem", lg: "unset" }}
// boxShadow={"0px 8px 4px 0px rgba(0, 0, 0, 0.08)"}
// gap={4}
// const { isOpen, onOpen, onClose } = useDisclosure()
const [isExpanded, setIsExpanded] = useState(false);

return (
<Drawer
isOpen={true}
placement="bottom"
onClose={() => {
return;
}}
// finalFocusRef={btnRef}
>
<Box
height={"4px"}
width={20}
backgroundColor={"gray.300"}
borderRadius="2px"
alignSelf={"center"}
role="button"
aria-label={
isExpanded
? "Collapse project detail panel"
: "Expand project detail panel"
}
onClick={() => {
setIsExpanded(!isExpanded);
}}
/>
<DrawerHeader>
<Heading color="gray.600" fontWeight={"bold"} fontSize={"lg"} paddingBottom={"8px"}>
{district}
</Heading>
</DrawerHeader>
<DrawerOverlay />
<DrawerContent>
<Flex
borderTopRadius={"base"}
padding={{ base: 3, lg: 4 }}
background={"white"}
direction={"column"}
// width={{ base: "full", lg: "21.25rem" }}
// maxW={{ base: "21.25rem", lg: "unset" }}
// boxShadow={"0px 8px 4px 0px rgba(0, 0, 0, 0.08)"}
// gap={4}
>
<Box
height={"4px"}
width={20}
backgroundColor={"gray.300"}
borderRadius="2px"
alignSelf={"center"}
role="button"
aria-label={
isExpanded
? "Collapse project detail panel"
: "Expand project detail panel"
}
onClick={() => {
setIsExpanded(!isExpanded);
}}
/>
<DrawerHeader>
<Heading
color="gray.600"
fontWeight={"bold"}
fontSize={"lg"}
paddingBottom={"8px"}
>
{district}
</Heading>
</DrawerHeader>

<DrawerBody>
<Flex
height={{ base: "436px" }}
overflowY={{ base: "scroll", lg: "auto" }}
direction={"column"}
transition={"height 0.5s ease-in-out"}
gap={4}
>
<CapitalProjectsList
capitalProjects={capitalProjects}
limit={limit}
offset={offset}
path={path}
total={total}
agencies={agencies}
/>
</Flex>
</DrawerBody>
</Flex>
</DrawerContent>
</Drawer>

)
}
<DrawerBody>
<Flex
height={{ base: "436px" }}
direction={"column"}
transition={"height 0.5s ease-in-out"}
gap={4}
>
<CapitalProjectsList
capitalProjects={capitalProjects}
limit={limit}
offset={offset}
path={path}
total={total}
agencies={agencies}
/>
</Flex>
</DrawerBody>
</Flex>
</DrawerContent>
</Drawer>
);
};
128 changes: 68 additions & 60 deletions app/components/CapitalProjectsList/CapitalProjectsList.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,77 +1,85 @@
import { Box, Flex, Text, VStack, WrapItem} from "@nycplanning/streetscape";
import { Box, Flex, Text, VStack, WrapItem } from "@nycplanning/streetscape";
import { useState } from "react";
import { Agency, CapitalProject } from "~/gen";
import { CapitalProjectsListItem } from "./CapitalProjectsListItem";
import { Button } from "@chakra-ui/react";
import { Pagination } from "../Pagination";
import { formatFiscalYearRange, currentDate } from "../../utils/utils";


export interface CapitalProjectsListProps {
capitalProjects: Array<CapitalProject>;
limit: number;
offset: number;
total: number;
agencies: Agency[];
path: string;
capitalProjects: Array<CapitalProject>;
limit: number;
offset: number;
total: number;
agencies: Agency[];
path: string;
}

export const CapitalProjectsList = ({
capitalProjects, limit, offset, total, path, agencies,
capitalProjects,
limit,
offset,
total,
path,
agencies,
}: CapitalProjectsListProps) => {
const [isExpanded, setIsExpanded] = useState(false);

const [isExpanded, setIsExpanded] = useState(false);
const listBody =
capitalProjects.length === 0 ? (
<Text>Reached end of projects</Text>
) : (
capitalProjects.map((capitalProject) => {
return (
<WrapItem key={capitalProject.id}>
<CapitalProjectsListItem
description={capitalProject.description}
minDate={capitalProject.minDate}
maxDate={capitalProject.maxDate}
agency={
agencies.find(
(agency) => agency.initials === capitalProject.managingAgency,
)?.name
}
yearRange={formatFiscalYearRange(
new Date(capitalProject.minDate),
new Date(capitalProject.maxDate),
)}
/>
</WrapItem>
);
})
);

return (
<>
return (
<>
<Box
borderTopWidth={"1px"}
borderTopColor={"gray.400"}
paddingTop={"16px"}
>
<Text as={"span"}>
Mapped Capital Projects as of <Text as={"b"}>{currentDate()}</Text>
</Text>
</Box>
<Flex direction={"column"} overflow={"hidden"}>
<Box
borderTopWidth={"1px"}
borderTopColor={"gray.400"}
paddingTop={"16px"}
>
<Text as={"span"}>
Mapped Capital Projects as of <Text as={"b"}>{currentDate()}</Text>
</Text>
</Box>
<Flex
direction={"column"}
overflow={"hidden"}
height={{ base: isExpanded ? "70vh" : "70vh" }}
overflowY={{ base: "scroll" }}
>
<Box
height={{ base: isExpanded ? "70vh" : "70vh"}}
overflowY={{ base: "scroll" }}
>
<VStack
align='stretch'
paddingTop={"12px"}
gap={"12px"}
>
{capitalProjects.map((capitalProject) => {
return (
<WrapItem key={capitalProject.id}>
<CapitalProjectsListItem
description={capitalProject.description}
minDate={capitalProject.minDate}
maxDate={capitalProject.maxDate}
agency= { agencies.find(
(agency) => agency.initials === capitalProject.managingAgency,
)?.name }
yearRange={formatFiscalYearRange(
new Date(capitalProject.minDate),
new Date(capitalProject.maxDate),
)}
/>
</WrapItem>
)
})}
</VStack>
<VStack align="stretch" paddingTop={"12px"} gap={"12px"}>
{listBody}
</VStack>
</Box>
</Flex>
<Flex paddingTop="16px" alignItems="center" justifyContent={"space-between"}>

<Pagination total={total} path={path} />
<Button size="sm">Export Data</Button>
</Flex>
</>
);
}
</Flex>
<Flex
paddingTop="16px"
alignItems="center"
justifyContent={"space-between"}
>
<Pagination total={total} path={path} />
<Button size="sm">Export Data</Button>
</Flex>
</>
);
};
Loading

0 comments on commit 8d55da5

Please sign in to comment.