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

Jump to bottom

Add Admin Posting Details Page #167

Merged
merged 6 commits into from
Mar 1, 2022
Merged

Add Admin Posting Details Page #167

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
85242e8
Refactor VolunteerPostingDetails
albertlai431 Feb 23, 2022
127b6fe
Create AdminPostingDetails page
albertlai431 Feb 23, 2022
a9c2b34
Run lint
albertlai431 Feb 23, 2022
9e87688
Add footer to admin view and refactor
albertlai431 Feb 24, 2022
a1718c2
Run lint
albertlai431 Feb 24, 2022
93bb27c
Prefix operation names with associated component
albertlai431 Mar 1, 2022
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
6 changes: 6 additions & 0 deletions frontend/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ import VolunteerPostingsPage from "./components/pages/volunteer/posting/Voluntee
import CreatePostingShiftsPage from "./components/pages/admin/posting/CreatePostingShiftsPage";
import CreatePostingReviewPage from "./components/pages/admin/posting/CreatePostingReviewPage";
import VolunteerPostingDetails from "./components/pages/volunteer/posting/VolunteerPostingDetails";
import AdminPostingDetails from "./components/pages/admin/posting/AdminPostingDetails";
import SideNavbarDemo from "./components/pages/SideNavbarDemo";

import customTheme from "./theme";
Expand Down Expand Up @@ -155,6 +156,11 @@ const App = (): React.ReactElement => {
path={Routes.VOLUNTEER_POSTING_DETAILS}
component={VolunteerPostingDetails}
/>
<PrivateRoute
exact
path={Routes.ADMIN_POSTING_DETAILS}
component={AdminPostingDetails}
/>
<Route exact path="*" component={NotFound} />
</Switch>
</Router>
Expand Down
89 changes: 89 additions & 0 deletions frontend/src/components/common/PostingDetails.tsx
View file
Open in desktop
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 frontend/src/components/pages/admin/posting/AdminPostingDetails.tsx
View file
Open in desktop
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 Posting($id: ID!) {
albertlai431 marked this conversation as resolved.
Show resolved Hide resolved
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;
87 changes: 6 additions & 81 deletions frontend/src/components/pages/volunteer/posting/VolunteerPostingDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,11 @@
import React, { useState } from "react";
import {
Text,
VStack,
HStack,
Box,
Tag,
Container,
Divider,
Button,
} from "@chakra-ui/react";
import { VStack, HStack, Box, Container, Button } from "@chakra-ui/react";

import { gql, useQuery } from "@apollo/client";
import { useParams } from "react-router-dom";
import { CalendarIcon, TimeIcon, ChevronLeftIcon } from "@chakra-ui/icons";
import { ChevronLeftIcon } from "@chakra-ui/icons";
import { PostingResponseDTO } from "../../../../types/api/PostingTypes";
import PocCard from "../../../common/PocCard";
import { formatDateString } from "../../../../utils/DateUtils";
import PostingDetails from "../../../common/PostingDetails";

const POSTING = gql`
query Posting($id: ID!) {
Expand Down Expand Up @@ -70,74 +60,9 @@ const VolunteerPostingDetails = (): React.ReactElement => {
centerContent
borderRadius={10}
>
<VStack w="full">
{postingDetails ? (
<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>
<Button>Submit availability</Button>
</HStack>
</VStack>
</Box>
) : null}
</VStack>
{postingDetails ? (
<PostingDetails postingDetails={postingDetails} showFooterButton />
) : null}
</Container>
</VStack>
</Box>
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/constants/Routes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,5 +28,6 @@ export const ADMIN_POSTING_CREATE_SHIFTS_PAGE = "/admin/posting/create/shifts";

export const ADMIN_POSTING_CREATE_REVIEW_PAGE = "/admin/posting/create/review";

// Temporary route for testing
export const VOLUNTEER_POSTING_DETAILS = "/volunteer/posting/:id";

export const ADMIN_POSTING_DETAILS = "/admin/posting/:id";