Skip to content

Commit

Permalink
Catalog Create Event Form Matching Design (#66)
Browse files Browse the repository at this point in the history 
* Create a pull trequest for branch 59-catalog-create-event-form-match-design

* EventForm's Multiple Fields + Debugging

* matched styling

* removed comments

* removed empty badges

* added desciption to catalog table + made form editable

* fixed editing form

---------

Co-authored-by: kadejna <[email protected]>
Co-authored-by: michellelin1 <[email protected]>
  • Loading branch information
@ctc-devops @kadejna @michellelin1
3 people authored Mar 24, 2024
1 parent a1955dc commit c80db93
Show file tree
Hide file tree
Showing 4 changed files with 249 additions and 98 deletions.
38 changes: 22 additions & 16 deletions src/components/Catalog/CatalogTable.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Container, Badge, IconButton, Table, Thead, Tr, Th, Td, Tbody } from '@chakra-ui/react';
import { Container, Badge, IconButton, Table, Thead, Tr, Th, Td, Tbody, Text } from '@chakra-ui/react';
import { /*EditIcon,*/ DeleteIcon } from '@chakra-ui/icons'; // add 'EditIcon' to reinstate edit button.
import s from './Catalog.module.css';
import PropTypes from 'prop-types';
Expand All @@ -15,18 +15,20 @@ const CatalogTable = ({ tableData, /*handleEditForm,*/ handleDeleteClick }) => {
</Tr>
</Thead>
<Tbody>
{tableData.map(({ id, host, title, eventType, subject, year, season/*, description*/ }) => (
{tableData.map(({ id, host, title, eventType, subject, year, season, description}) => (
<Tr key={id}>
<Td textAlign="left" py="1.5rem">
{title}
<Td textAlign="left" py="1.5rem" color="#2D3748">
<Text mb="0.5rem" fontWeight="700">{title}</Text>
<Text maxW="20vw" whiteSpace="pre-wrap">{description}</Text>
</Td>
<Td textAlign="left" py="1.5rem">
{host}
</Td>
<Td textAlign="left" py="1.5rem">
<Container p="0" m="0" maxW="16rem" display="flex" flexWrap="wrap" gap="0.375rem">
{season && (
{season[0] !== '' && season.map((seasonItem, index) => (
<Badge
key={index}
backgroundColor="#CEECC3"
color="gray.900"
textTransform="capitalize"
Expand All @@ -35,11 +37,12 @@ const CatalogTable = ({ tableData, /*handleEditForm,*/ handleDeleteClick }) => {
px="0.5rem"
mr="0.125rem"
>
{season}
{seasonItem}
</Badge>
)}
{year && (
))}
{year[0] !== '' && year.map((yearItem, index) => (
<Badge
key={index}
backgroundColor="#FFE1BE"
color="gray.900"
textTransform="capitalize"
Expand All @@ -48,11 +51,12 @@ const CatalogTable = ({ tableData, /*handleEditForm,*/ handleDeleteClick }) => {
px="0.5rem"
mr="0.125rem"
>
{year}
{yearItem}
</Badge>
)}
{subject && (
))}
{subject[0] !== '' && subject.map((subjectItem, index) => (
<Badge
key={index}
backgroundColor="#E8D7FF"
color="gray.900"
textTransform="capitalize"
Expand All @@ -61,11 +65,12 @@ const CatalogTable = ({ tableData, /*handleEditForm,*/ handleDeleteClick }) => {
px="0.5rem"
mr="0.125rem"
>
{subject}
{subjectItem}
</Badge>
)}
{eventType && (
))}
{eventType[0] !== '' && eventType.map((eventTypeItem, index) => (
<Badge
key={index}
backgroundColor="#CFDCFF"
color="gray.900"
textTransform="capitalize"
Expand All @@ -74,9 +79,9 @@ const CatalogTable = ({ tableData, /*handleEditForm,*/ handleDeleteClick }) => {
px="0.5rem"
mr="0.125rem"
>
{eventType}
{eventTypeItem}
</Badge>
)}
))}
</Container>
</Td>
<Td>
Expand All @@ -96,6 +101,7 @@ const CatalogTable = ({ tableData, /*handleEditForm,*/ handleDeleteClick }) => {
eventType,
subject,
description,
season
})
}
/> */}
Expand Down
206 changes: 124 additions & 82 deletions src/components/Catalog/CreateEventForm/CreateEventForm.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,29 +3,35 @@ import {
Box,
FormLabel,
Input,
Select,
FormControl,
FormErrorMessage,
Button,
Textarea,
useToast,
Flex,
Heading
} from '@chakra-ui/react';
import { yupResolver } from '@hookform/resolvers/yup';
import { useForm } from 'react-hook-form';
import * as yup from 'yup';
import { NPOBackend } from '../../../utils/auth_utils';
import {
seasonOptions,
yearOptions,
subjectOptions,
eventOptions,
} from '../../Catalog/SearchFilter/filterOptions';
import useSearchFilters from '../../Catalog/SearchFilter/useSearchFilters';
import Dropdown from '../../Dropdown/Dropdown';

const schema = yup.object({
// id: yup.string().required('ID required').max(10, 'ID exceeds 10 character limit'),
host: yup.string().required('Host required').max(50, 'Host exceeds 50 character limit'),
title: yup.string().required('Title required').max(50, 'Title exceeds 50 character limit'),
eventType: yup.string().required('Email required'),
subject: yup.string().required('Subject required'),
host: yup.string().max(50, 'Host exceeds 50 character limit').default('').nullable(),
title: yup.string().required('Title Required').max(50, 'Title exceeds 50 character limit'),
description: yup
.string()
.required('Description required')
.max(50, 'Description exceeds 50 character limit'),
year: yup.string().required('Year required'),
.max(256, 'Description exceeds 256 character limit')
.default('')
.nullable(),
});

const CreateEventForm = ({ eventData, setDataShouldRevalidate, closeModal }) => {
Expand All @@ -41,7 +47,12 @@ const CreateEventForm = ({ eventData, setDataShouldRevalidate, closeModal }) =>
});

const submitData = async data => {
const { host, title, eventType, subject, description, year } = data;
const { host, title, description } = data;
const season = filterValues.season;
const eventType = filterValues.eventType;
const year = filterValues.year;
const subject = filterValues.subject;

toast.closeAll();

// make post request to catalog backend route
Expand All @@ -52,6 +63,7 @@ const CreateEventForm = ({ eventData, setDataShouldRevalidate, closeModal }) =>
await NPOBackend.put(`/catalog/${eventData.id}`, {
host: host,
title: title,
season: season,
eventType: eventType,
subject: subject,
description: description,
Expand All @@ -62,6 +74,7 @@ const CreateEventForm = ({ eventData, setDataShouldRevalidate, closeModal }) =>
await NPOBackend.post(`/catalog`, {
host: host,
title: title,
season: season,
eventType: eventType,
subject: subject,
description: description,
Expand Down Expand Up @@ -99,95 +112,123 @@ const CreateEventForm = ({ eventData, setDataShouldRevalidate, closeModal }) =>
}
};

const { filters, filterValues } = useSearchFilters();
const [seasonFilter, yearFilter, subjectFilter, eventFilter] = filters;

return (
<Box p="2vw">
<Box width="80%" m="auto" mt="20px">
{/* <Heading size="lg" color="gray.600" mb="20px">Event Form</Heading> */}
<Box p="20px" border="1px" borderRadius="10px" borderColor="gray.200">
<form onSubmit={handleSubmit(data => submitData(data))}>
<Box mb="4vh">
{/* ID */}
{/* <Box mb="4vh">
<FormControl isInvalid={errors && errors.id} width="47%">
<FormLabel fontWeight="bold">Id</FormLabel>
<Input {...register('id')} border="1px solid" />
<FormErrorMessage>{errors.id && errors.id.message}</FormErrorMessage>
</FormControl>
</Box> */}

{/* HOST */}
<Box mb="4vh">
<FormControl isInvalid={errors && errors.host} width="80%">
<FormLabel fontWeight="bold">Host</FormLabel>
<Textarea {...register('host')} border="1px solid" />
<FormErrorMessage>{errors.host && errors.host.message}</FormErrorMessage>
</FormControl>
</Box>

<Heading size="md" color="gray.600">Event Information</Heading>
<Box padding="12px">
{/* TITLE */}
<Box mb="4vh">
<FormControl isInvalid={errors && errors.title} width="80%">
<FormLabel fontWeight="bold">Title</FormLabel>
<Textarea {...register('title')} border="1px solid" />
<Box mb="15px">
<FormControl isInvalid={errors && errors.title} width="30vw">
<FormLabel fontWeight="bold" color="gray.600">Title *</FormLabel>
<Input type="text" {...register('title')} border="1px solid" borderColor="gray.200"/>
<FormErrorMessage>{errors.title && errors.title.message}</FormErrorMessage>
</FormControl>
</Box>

{/* EVENT TYPE*/}
<Box mb="4vh">
<FormControl width="47%">
<FormLabel fontWeight="bold">Event Type</FormLabel>
<Select {...register('eventType')}>
<option value="guest speaker">Guest Speaker</option>
<option value="study-trip">Study Trip</option>
<option value="workshop">Workshop</option>
<option value="other">Other</option>
</Select>
<FormErrorMessage>{errors.eventType && errors.eventType.message}</FormErrorMessage>
</FormControl>
</Box>

{/* SUBJECT */}
<Box mb="4vh">
<FormControl width="47%">
<FormLabel fontWeight="bold">Subject</FormLabel>
<Select {...register('subject')}>
<option value="life skills">Life Skills</option>
<option value="science">Science</option>
<option value="technology">Technology</option>
<option value="engineering">Engineering</option>
<option value="math">Math</option>
<option value="college readiness">College Readiness</option>
</Select>
<FormErrorMessage>{errors.subject && errors.subject.message}</FormErrorMessage>
</FormControl>
</Box>

{/* DESCRIPTION */}
<Box mb="4vh">
<FormControl isInvalid={errors && errors.description} width="47%">
<FormLabel fontWeight="bold">Description</FormLabel>
<Input {...register('description')} border="1px solid" />
<Box mb="15px">
<FormControl isInvalid={errors && errors.description} width="30vw">
<FormLabel fontWeight="bold" color="gray.600">Description</FormLabel>
<Textarea {...register('description')} border="1px solid" borderColor="gray.200"/>
<FormErrorMessage>
{errors.description && errors.description.message}
</FormErrorMessage>
</FormControl>
</Box>

{/* YEAR */}
<Box mb="4vh">
<FormControl width="47%">
<FormLabel fontWeight="bold">Year</FormLabel>
<Select {...register('year')}>
<option value="junior">Junior</option>
<option value="senior">Senior</option>
<option value="both">Both</option>
</Select>
<FormErrorMessage>{errors.year && errors.year.message}</FormErrorMessage>
<Flex justifyContent="space-between">
{/* SEASON */}
<Box mb="15px">
<FormControl>
<FormLabel fontWeight="bold" color="gray.600">Season</FormLabel>
<Dropdown
options={seasonOptions}
filter={seasonFilter}
selected={filterValues.season}
defaults={eventData && eventData.season}
badgeColor="#CEECC3"
/>
</FormControl>
</Box>

{/* YEAR - selected seasons stored in filterValues.year */}
<Box mb="15px">
<FormControl>
<FormLabel fontWeight="bold" color="gray.600">Cohort</FormLabel>
<Dropdown
options={yearOptions}
filter={yearFilter}
selected={filterValues.year}
defaults={eventData && eventData.year}
badgeColor="#FFE1BE"
/>
</FormControl>
</Box>
</Flex>

<Flex justifyContent="space-between">
{/* SUBJECT */}
<Box mb="15px">
<FormControl>
<FormLabel fontWeight="bold" color="gray.600">Subject</FormLabel>
<Dropdown
options={subjectOptions}
filter={subjectFilter}
selected={filterValues.subject}
defaults={eventData && eventData.subject}
badgeColor="#E8D7FF"
/>
</FormControl>
</Box>

{/* EVENT TYPE */}
<Box mb="15px">
<FormControl>
<FormLabel fontWeight="bold" color="gray.600">Event Type</FormLabel>
<Dropdown
options={eventOptions}
filter={eventFilter}
selected={filterValues.eventType}
defaults={eventData && eventData.eventType}
badgeColor="#CFDCFF"
/>
</FormControl>
</Box>
</Flex>
</Box>

<Heading size="md" color="gray.600">Host Information</Heading>
<Box padding="12px">
{/* HOST */}
<Box>
<FormControl isInvalid={errors && errors.host} width="30vw">
<FormLabel fontWeight="bold" color="gray.600">Host</FormLabel>
<Input type="text" {...register('host')} border="1px solid" borderColor="gray.200"/>
<FormErrorMessage>{errors.host && errors.host.message}</FormErrorMessage>
</FormControl>
</Box>
</Box>

<Button type="submit">Submit</Button>
<Flex justifyContent="flex-end" p="12px">
<Button onClick={closeModal} mr="16px">Cancel</Button>
<Button
type="submit"
bgColor="#2c93d1"
color="white"
_hover={{ bgColor: '#73bff0' }}
>
Add Event
</Button>
</Flex>
</form>
</Box>
</Box>
);
};

Expand All @@ -196,9 +237,10 @@ CreateEventForm.propTypes = {
id: PropTypes.number,
title: PropTypes.string,
host: PropTypes.string,
year: PropTypes.string,
eventType: PropTypes.string,
subject: PropTypes.string,
year: PropTypes.array,
season: PropTypes.array,
eventType: PropTypes.array,
subject: PropTypes.array,
description: PropTypes.string,
}),
setDataShouldRevalidate: PropTypes.func,
Expand Down
1 change: 1 addition & 0 deletions src/components/Catalog/SearchFilter/SearchFilter.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,3 +116,4 @@ FilterCheckbox.propTypes = {
};

export default SearchFilter;
export { FilterCheckbox };
Loading

0 comments on commit c80db93

Please sign in to comment.