-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add Admin Posting Details Page (#167)
* Refactor VolunteerPostingDetails * Create AdminPostingDetails page * Run lint * Add footer to admin view and refactor * Run lint * Prefix operation names with associated component
- Loading branch information
1 parent
6682ea3
commit 3248c7a
Showing
5 changed files
with
178 additions
and
83 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| import React from "react"; | ||
| import { | ||
| Text, | ||
| VStack, | ||
| HStack, | ||
| Box, | ||
| Tag, | ||
| Divider, | ||
| Button, | ||
| } from "@chakra-ui/react"; | ||
| import { CalendarIcon, TimeIcon } from "@chakra-ui/icons"; | ||
| import PocCard from "./PocCard"; | ||
| import { PostingResponseDTO } from "../../types/api/PostingTypes"; | ||
| import { formatDateString } from "../../utils/DateUtils"; | ||
|
|
||
| type PostingDetailsProps = { | ||
| postingDetails: PostingResponseDTO; | ||
| showFooterButton: boolean; | ||
| }; | ||
|
|
||
| const PostingDetails = ({ | ||
| postingDetails, | ||
| showFooterButton, | ||
| }: PostingDetailsProps): React.ReactElement => { | ||
| return ( | ||
| <Box p={6} w="full"> | ||
| <VStack alignItems="start" w="full"> | ||
| <VStack alignItems="start" marginBottom={4} w="full"> | ||
| <HStack justifyContent="space-between" w="full"> | ||
| <Tag>{postingDetails.branch.name}</Tag> | ||
| <Text textStyle="caption" color="text.gray"> | ||
| Deadline: {formatDateString(postingDetails.autoClosingDate)} | ||
| </Text> | ||
| </HStack> | ||
| <Text textStyle="display-large">{postingDetails.title}</Text> | ||
| <HStack> | ||
| <CalendarIcon /> | ||
| <Text textStyle="caption"> | ||
| {formatDateString(postingDetails.startDate)} -{" "} | ||
| {formatDateString(postingDetails.endDate)} | ||
| </Text> | ||
| </HStack> | ||
| <HStack> | ||
| <TimeIcon /> | ||
| <Text textStyle="caption">See posting details</Text> | ||
| </HStack> | ||
| </VStack> | ||
| <Divider /> | ||
| <HStack w="100%" pt={4}> | ||
| <Text textStyle="caption">Skills:</Text> | ||
| {postingDetails.skills.map((skill) => ( | ||
| <Tag key={skill.id} variant="outline"> | ||
| {skill.name} | ||
| </Tag> | ||
| ))} | ||
| </HStack> | ||
| <Text textStyle="body-regular" py={4}> | ||
| {postingDetails.description} | ||
| </Text> | ||
| <Text textStyle="body-regular">Point(s) of contact:</Text> | ||
| <HStack pb={4}> | ||
| <PocCard | ||
| name="John Doe" | ||
| title="hard code" | ||
| email="hard code" | ||
| phoneNumber="hard code" | ||
| key={1} | ||
| /> | ||
| <PocCard | ||
| name="John Doe" | ||
| title="hard code" | ||
| email="hard code" | ||
| phoneNumber="hard code" | ||
| key={1} | ||
| /> | ||
| </HStack> | ||
| <Divider /> | ||
| <HStack justifyContent="space-between" pt={4} w="full"> | ||
| <Text textStyle="caption" color="text.gray"> | ||
| Deadline: {formatDateString(postingDetails.autoClosingDate)} | ||
| </Text> | ||
| {showFooterButton ? <Button>Submit availability</Button> : null} | ||
| </HStack> | ||
| </VStack> | ||
| </Box> | ||
| ); | ||
| }; | ||
|
|
||
| export default PostingDetails; |
74 changes: 74 additions & 0 deletions
74
frontend/src/components/pages/admin/posting/AdminPostingDetails.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| import React, { useState } from "react"; | ||
| import { VStack, Box, Container, Button, Flex } from "@chakra-ui/react"; | ||
|
|
||
| import { gql, useQuery } from "@apollo/client"; | ||
| import { useParams } from "react-router-dom"; | ||
| import { ChevronLeftIcon } from "@chakra-ui/icons"; | ||
| import { PostingResponseDTO } from "../../../../types/api/PostingTypes"; | ||
| import PostingDetails from "../../../common/PostingDetails"; | ||
|
|
||
| const POSTING = gql` | ||
| query AdminPostingDetails_Posting($id: ID!) { | ||
| posting(id: $id) { | ||
| title | ||
| description | ||
| branch { | ||
| name | ||
| } | ||
| startDate | ||
| endDate | ||
| numVolunteers | ||
| skills { | ||
| name | ||
| } | ||
| employees { | ||
| id | ||
| } | ||
| autoClosingDate | ||
| } | ||
| } | ||
| `; | ||
|
|
||
| const AdminPostingDetails = (): React.ReactElement => { | ||
| const { id } = useParams<{ id: string }>(); | ||
| const [ | ||
| postingDetails, | ||
| setPostingDetails, | ||
| ] = useState<PostingResponseDTO | null>(null); | ||
| useQuery(POSTING, { | ||
| variables: { id }, | ||
| fetchPolicy: "cache-and-network", | ||
| onCompleted: (data) => { | ||
| setPostingDetails(data.posting); | ||
| }, | ||
| }); | ||
| return ( | ||
| <Box bg="background.light" py={7} px={10} minH="100vh"> | ||
| <VStack> | ||
| <Container pt={3} pb={6} px={0} maxW="container.xl"> | ||
| <Flex justifyContent="flex-start"> | ||
| <Button leftIcon={<ChevronLeftIcon />} variant="link"> | ||
| Back to editing | ||
| </Button> | ||
| </Flex> | ||
| </Container> | ||
|
|
||
| <Container | ||
| bg="background.white" | ||
| maxW="container.xl" | ||
| centerContent | ||
| borderRadius={10} | ||
| > | ||
| {postingDetails ? ( | ||
| <PostingDetails | ||
| postingDetails={postingDetails} | ||
| showFooterButton={false} | ||
| /> | ||
| ) : null} | ||
| </Container> | ||
| </VStack> | ||
| </Box> | ||
| ); | ||
| }; | ||
|
|
||
| export default AdminPostingDetails; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters