generated from ctc-uci/npo-frontend-template
-
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.
* Create PR for #137 * Your Monitor Logs table * Export buton (no functionality) * stuff * Multiple partners * Fix checkbox + some cleanup * Move descriptions out * Mobile table * YourLogs -> VolunteerLogs + cleanup * Fix file names * Rounded header * Resolve console warnings Co-authored-by: janehvo <[email protected]> Co-authored-by: Jane Vo <[email protected]>
- Loading branch information
3 people
authored
May 31, 2022
1 parent
f2a3009
commit 9f4a73a
Showing
13 changed files
with
634 additions
and
9 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
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
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
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,6 @@ | ||
| .table-head th:first-child { | ||
| border-radius: 10px 0 0 0px; | ||
| } | ||
| .table-head th:last-child { | ||
| border-radius: 0 10px 0 0; | ||
| } |
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,144 @@ | ||
| import { React } from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import { Button, Checkbox, Badge, Text, Icon } from '@chakra-ui/react'; | ||
| import { FiEdit3 } from 'react-icons/fi'; | ||
|
|
||
| const DateFormat = ({ date }) => { | ||
| return new Date(date).toLocaleDateString(); | ||
| }; | ||
|
|
||
| const Check = ({ checked, setChecked, id }) => { | ||
| return ( | ||
| <Checkbox | ||
| bg="white" | ||
| isChecked={checked.get(id)} | ||
| onChange={event => { | ||
| if (event.target.checked) { | ||
| const remainingChecks = new Map(checked); | ||
| remainingChecks.set(id, true); | ||
| setChecked(remainingChecks); | ||
| } else { | ||
| const remainingChecks = new Map(checked); | ||
| remainingChecks.set(id, false); | ||
| setChecked(remainingChecks); | ||
| } | ||
| }} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| const AllCheck = ({ checked, setChecked, allChecked, setAllChecked }) => { | ||
| const handleAllChecked = () => { | ||
| const newCheckedData = new Map(checked); | ||
| if (allChecked) { | ||
| newCheckedData.forEach((value, keys) => { | ||
| newCheckedData.set(keys, false); | ||
| }); | ||
| } else { | ||
| newCheckedData.forEach((value, keys) => { | ||
| newCheckedData.set(keys, true); | ||
| }); | ||
| } | ||
| setAllChecked(!allChecked); | ||
| setChecked(newCheckedData); | ||
| }; | ||
|
|
||
| return <Checkbox bg="white" isChecked={allChecked} onChange={handleAllChecked} />; | ||
| }; | ||
|
|
||
| const ApplyBadge = ({ approval }) => { | ||
| if (approval === 'UNDER_REVIEW') { | ||
| return ( | ||
| <Badge variant="solid" colorScheme="blue"> | ||
| UNDER REVIEW | ||
| </Badge> | ||
| ); | ||
| } | ||
|
|
||
| if (approval === 'UNSUBMITTED') { | ||
| return ( | ||
| <Badge variant="solid" colorScheme="gray"> | ||
| DRAFT | ||
| </Badge> | ||
| ); | ||
| } | ||
|
|
||
| if (approval === 'RESUBMITTED') { | ||
| return ( | ||
| <Badge variant="solid" colorScheme="purple"> | ||
| RESUBMITTED | ||
| </Badge> | ||
| ); | ||
| } | ||
|
|
||
| if (approval === 'EDITS_REQUESTED') { | ||
| return ( | ||
| <Badge variant="solid" colorScheme="red"> | ||
| EDITS REQUESTED | ||
| </Badge> | ||
| ); | ||
| } | ||
|
|
||
| if (approval === 'APPROVED') { | ||
| return ( | ||
| <Badge variant="solid" colorScheme="green"> | ||
| APPROVED | ||
| </Badge> | ||
| ); | ||
| } | ||
|
|
||
| return <Text fontSize="xs">{approval}</Text>; | ||
| }; | ||
|
|
||
| const Partners = ({ sessionPartners }) => { | ||
| if (sessionPartners.length === 0) { | ||
| return ''; | ||
| } | ||
| const names = sessionPartners.map( | ||
| partner => `${partner.firstName.charAt(0)}. ${partner.lastName}`, | ||
| ); | ||
| return <p>{names.join(', ')}</p>; | ||
| }; | ||
|
|
||
| const EditButton = ({ logId, approval }) => { | ||
| // console.log(logId); | ||
| if (approval === 'APPROVED') { | ||
| return ''; | ||
| } | ||
|
|
||
| return ( | ||
| <Button bgColor="transparent" minW={2} h={6} px={2}> | ||
| <Icon h={{ md: 5, base: 4 }} w={{ md: 5, base: 4 }} as={FiEdit3} /> | ||
| </Button> | ||
| ); | ||
| }; | ||
|
|
||
| Check.propTypes = { | ||
| // eslint-disable-next-line react/forbid-prop-types | ||
| checked: PropTypes.object.isRequired, | ||
| setChecked: PropTypes.func.isRequired, | ||
| id: PropTypes.string.isRequired, | ||
| }; | ||
|
|
||
| AllCheck.propTypes = { | ||
| // eslint-disable-next-line react/forbid-prop-types | ||
| checked: PropTypes.object.isRequired, | ||
| setChecked: PropTypes.func.isRequired, | ||
| allChecked: PropTypes.bool.isRequired, | ||
| setAllChecked: PropTypes.func.isRequired, | ||
| }; | ||
|
|
||
| ApplyBadge.propTypes = { | ||
| approval: PropTypes.string.isRequired, | ||
| }; | ||
|
|
||
| Partners.propTypes = { | ||
| sessionPartners: PropTypes.arrayOf(Object).isRequired, | ||
| }; | ||
|
|
||
| EditButton.propTypes = { | ||
| logId: PropTypes.string.isRequired, | ||
| approval: PropTypes.string.isRequired, | ||
| }; | ||
|
|
||
| export { DateFormat, Check, AllCheck, ApplyBadge, Partners, EditButton }; |
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 PropTypes from 'prop-types'; | ||
| import { Flex } from '@chakra-ui/react'; | ||
| import { ApplyBadge, DateFormat, Check, AllCheck, Partners, EditButton } from './VolunteerLogsRows'; | ||
|
|
||
| const CellStructure = (checked, setChecked, allChecked, setAllChecked) => { | ||
| /* eslint-disable react/destructuring-assignment, react/prop-types */ | ||
| const cellStructure = [ | ||
| { | ||
| id: 'checkbox', | ||
| Header: ( | ||
| <AllCheck | ||
| checked={checked} | ||
| setChecked={setChecked} | ||
| allChecked={allChecked} | ||
| setAllChecked={setAllChecked} | ||
| /> | ||
| ), | ||
| accessor: '_id', | ||
| disableSortBy: true, | ||
| Cell: ({ value }) => <Check checked={checked} setChecked={setChecked} id={value} />, | ||
| }, | ||
| { | ||
| id: 'segment', | ||
| Header: 'Segment', | ||
| accessor: 'segment.segmentId', | ||
| Cell: props => <p>{props.value}</p>, | ||
| }, | ||
| { | ||
| id: 'segmentName', | ||
| Header: 'Segment Name', | ||
| accessor: 'segment.name', | ||
| Cell: props => <p>{props.value}</p>, | ||
| }, | ||
| { | ||
| id: 'submittedAt', | ||
| Header: 'Date', | ||
| accessor: 'submittedAt', | ||
| Cell: ({ value }) => <DateFormat date={value} />, | ||
| }, | ||
| { | ||
| id: 'status', | ||
| Header: 'Approval Status', | ||
| accessor: 'status', | ||
| minWidth: 100, | ||
| Cell: ({ value }) => <ApplyBadge approval={value} />, | ||
| }, | ||
| { | ||
| id: 'partners', | ||
| Header: 'Monitor Partners', | ||
| accessor: 'sessionPartners', | ||
| disableSortBy: true, | ||
| Cell: props => (props.value ? <Partners sessionPartners={props.value} /> : ''), | ||
| }, | ||
| { | ||
| id: 'edit', | ||
| Header: '', | ||
| accessor: '_id', | ||
| disableSortBy: true, | ||
| Cell: props => ( | ||
| <EditButton logId={props.row.original._id} approval={props.row.original.status} /> | ||
| ), | ||
| }, | ||
| { | ||
| // combined approval status and edit for mobile table | ||
| id: 'statusAndEdit', | ||
| Header: 'Approval Status', | ||
| accessor: 'status', | ||
| disableSortBy: true, | ||
| Cell: props => ( | ||
| <Flex direction="row" justify="space-between" align="center"> | ||
| <ApplyBadge approval={props.row.original.status} /> | ||
| <EditButton logId={props.row.original._id} approval={props.row.original.status} /> | ||
| </Flex> | ||
| ), | ||
| }, | ||
| ]; | ||
| return cellStructure; | ||
| }; | ||
|
|
||
| CellStructure.propTypes = { | ||
| // eslint-disable-next-line react/forbid-prop-types | ||
| checked: PropTypes.object.isRequired, | ||
| setChecked: PropTypes.func.isRequired, | ||
| allChecked: PropTypes.bool.isRequired, | ||
| setAllChecked: PropTypes.func.isRequired, | ||
| }; | ||
|
|
||
| export default CellStructure; |
Oops, something went wrong.