From 3503e6472cdcce98ccc32cd313c829619fbd4686 Mon Sep 17 00:00:00 2001 From: Shreyas Devalapurkar Date: Fri, 30 Apr 2021 10:44:29 -0700 Subject: [PATCH 1/7] survey list component --- app/src/components/surveys/SurveysList.tsx | 134 ++++++++++++++++++ app/src/constants/dateFormats.ts | 1 + app/src/constants/misc.ts | 5 + .../features/projects/view/ProjectSurveys.tsx | 41 +++--- app/src/interfaces/useProjectApi.interface.ts | 9 ++ 5 files changed, 174 insertions(+), 16 deletions(-) create mode 100644 app/src/components/surveys/SurveysList.tsx diff --git a/app/src/components/surveys/SurveysList.tsx b/app/src/components/surveys/SurveysList.tsx new file mode 100644 index 0000000000..6e2a91d264 --- /dev/null +++ b/app/src/components/surveys/SurveysList.tsx @@ -0,0 +1,134 @@ +import Chip from '@material-ui/core/Chip'; +import Link from '@material-ui/core/Link'; +import Paper from '@material-ui/core/Paper'; +import Table from '@material-ui/core/Table'; +import TableBody from '@material-ui/core/TableBody'; +import TableCell from '@material-ui/core/TableCell'; +import TableContainer from '@material-ui/core/TableContainer'; +import TableHead from '@material-ui/core/TableHead'; +import TablePagination from '@material-ui/core/TablePagination'; +import TableRow from '@material-ui/core/TableRow'; +import makeStyles from '@material-ui/core/styles/makeStyles'; +import { Theme } from '@material-ui/core/styles/createMuiTheme'; +import { SurveyStatusType } from 'constants/misc'; +import clsx from 'clsx'; +import { IGetProjectSurvey } from 'interfaces/useProjectApi.interface'; +import React, { useState } from 'react'; +import { DATE_FORMAT } from 'constants/dateFormats'; +import { getFormattedDateRangeString } from 'utils/Utils'; + +const useStyles = makeStyles((theme: Theme) => ({ + table: { + minWidth: 650 + }, + heading: { + fontWeight: 'bold' + }, + tableCellBorderTop: { + borderTop: '1px solid rgba(224, 224, 224, 1)' + }, + chip: { + padding: '0px 8px', + borderRadius: '4px', + color: 'white' + }, + chipUnpublished: { + backgroundColor: theme.palette.text.secondary + }, + chipPublished: { + backgroundColor: theme.palette.success.light + } +})); + +export interface ISurveysListProps { + surveysList: IGetProjectSurvey[]; +} + +const SurveysList: React.FC = (props) => { + const classes = useStyles(); + + const [rowsPerPage, setRowsPerPage] = useState(5); + const [page, setPage] = useState(0); + + const handleChangePage = (event: unknown, newPage: number) => { + setPage(newPage); + }; + + const handleChangeRowsPerPage = (event: React.ChangeEvent) => { + setRowsPerPage(parseInt(event.target.value, 10)); + setPage(0); + }; + + const getChipIcon = (status_name: string) => { + let chipLabel; + let chipStatusClass; + + if (SurveyStatusType.UNPUBLISHED === status_name) { + chipLabel = 'UNPUBLISHED'; + chipStatusClass = classes.chipUnpublished; + } else if (SurveyStatusType.PUBLISHED === status_name) { + chipLabel = 'PUBLISHED'; + chipStatusClass = classes.chipPublished; + } + + return ; + }; + + return ( + + + + + + Name + Species + Timeline + Status + + + + {props.surveysList.length > 0 && + props.surveysList.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((row, index) => ( + + + console.log('survey clicked')}> + {row.name} + + + {row.species} + + {getFormattedDateRangeString(DATE_FORMAT.ShortMediumDateFormat2, row.start_date, row.end_date)} + + {getChipIcon(row.status_name)} + + ))} + {!props.surveysList.length && ( + + + No Surveys + + + )} + +
+ + {props.surveysList.length > 0 && ( + + )} + + ); +}; + +export default SurveysList; diff --git a/app/src/constants/dateFormats.ts b/app/src/constants/dateFormats.ts index bfca3f1397..6957092d9b 100644 --- a/app/src/constants/dateFormats.ts +++ b/app/src/constants/dateFormats.ts @@ -8,6 +8,7 @@ export enum DATE_FORMAT { ShortDateFormatMonthFirst = 'MM/DD/YYYY', //01/05/2020 ShortDateTimeFormat = 'YYYY-MM-DD, h:mm a', //2020-01-05, 3:30 pm ShortMediumDateFormat = 'MMM D, YYYY', //Jan 5, 2020 + ShortMediumDateFormat2 = 'MMMM DD, YYYY', //Jan 05, 2020 ShortMediumDateTimeFormat = 'MMM D, YYYY, h:mm a', //Jan 5, 2020, 3:30 pm MediumDateFormat = 'MMMM D, YYYY', //January 5, 2020 MediumDateFormat2 = 'MMMM-DD-YYYY', //January-5-2020 diff --git a/app/src/constants/misc.ts b/app/src/constants/misc.ts index f52321e41b..c1549c6c31 100644 --- a/app/src/constants/misc.ts +++ b/app/src/constants/misc.ts @@ -7,3 +7,8 @@ export enum AdministrativeActivityStatusType { ACTIONED = 'Actioned', REJECTED = 'Rejected' } + +export enum SurveyStatusType { + UNPUBLISHED = 'Unpublished', + PUBLISHED = 'Published' +} diff --git a/app/src/features/projects/view/ProjectSurveys.tsx b/app/src/features/projects/view/ProjectSurveys.tsx index 0e11d582f3..adc561c44f 100644 --- a/app/src/features/projects/view/ProjectSurveys.tsx +++ b/app/src/features/projects/view/ProjectSurveys.tsx @@ -1,33 +1,42 @@ import Box from '@material-ui/core/Box'; -import Paper from '@material-ui/core/Paper'; +import Button from '@material-ui/core/Button'; import Typography from '@material-ui/core/Typography'; -import { IGetProjectForViewResponse } from 'interfaces/useProjectApi.interface'; +import SurveysList from 'components/surveys/SurveysList'; +import { IGetProjectSurvey } from 'interfaces/useProjectApi.interface'; import React from 'react'; -export interface IProjectSurveysProps { - projectForViewData: IGetProjectForViewResponse; -} - /** * Project surveys content for a project. * * @return {*} */ -const ProjectSurveys: React.FC = () => { +const ProjectSurveys = () => { + // TODO: Replace this with the result of an API call giving us back the surveyList data + const surveysList: IGetProjectSurvey[] = [ + { + id: 1, + name: 'Moose Survey 1', + species: 'Moose', + start_date: '2020/04/04', + end_date: '2021/05/05', + status_name: 'Unpublished' + } + ]; + return ( <> - Project Surveys - - - - Project survey component 1 placeholder - + + + Surveys + + + - - Project survey component 2 placeholder - + ); diff --git a/app/src/interfaces/useProjectApi.interface.ts b/app/src/interfaces/useProjectApi.interface.ts index 1228f3d366..eb2d7dde1f 100644 --- a/app/src/interfaces/useProjectApi.interface.ts +++ b/app/src/interfaces/useProjectApi.interface.ts @@ -9,6 +9,15 @@ import { IProjectPermitForm } from 'features/projects/components/ProjectPermitFo import { IProjectSpeciesForm } from 'features/projects/components/ProjectSpeciesForm'; import { Feature } from 'geojson'; +export interface IGetProjectSurvey { + id: number; + name: string; + species: string; + start_date: string; + end_date: string; + status_name: string; +} + export interface IGetProjectAttachment { id: number; fileName: string; From 4a37e3a02dc954b5b8eb40ebfccfb216008b9a07 Mon Sep 17 00:00:00 2001 From: Shreyas Devalapurkar Date: Fri, 30 Apr 2021 10:54:48 -0700 Subject: [PATCH 2/7] tests and snaps --- .../components/surveys/SurveysList.test.tsx | 37 +++ .../__snapshots__/SurveysList.test.tsx.snap | 297 ++++++++++++++++++ .../projects/view/ProjectSurveys.test.tsx | 10 +- .../features/projects/view/ProjectSurveys.tsx | 4 +- .../ProjectSurveys.test.tsx.snap | 215 ++++++++++++- 5 files changed, 539 insertions(+), 24 deletions(-) create mode 100644 app/src/components/surveys/SurveysList.test.tsx create mode 100644 app/src/components/surveys/__snapshots__/SurveysList.test.tsx.snap diff --git a/app/src/components/surveys/SurveysList.test.tsx b/app/src/components/surveys/SurveysList.test.tsx new file mode 100644 index 0000000000..29613d7e8a --- /dev/null +++ b/app/src/components/surveys/SurveysList.test.tsx @@ -0,0 +1,37 @@ +import { render } from '@testing-library/react'; +import { IGetProjectSurvey } from 'interfaces/useProjectApi.interface'; +import React from 'react'; +import SurveysList from './SurveysList'; + +describe('SurveysList', () => { + it('renders correctly with surveys', () => { + const surveysList: IGetProjectSurvey[] = [ + { + id: 1, + name: 'Moose Survey 1', + species: 'Moose', + start_date: '2021-04-09 11:53:53', + end_date: '2021-05-09 11:53:53', + status_name: 'Unpublished' + }, + { + id: 2, + name: 'Moose Survey 2', + species: 'Moose', + start_date: '2021-04-09 11:53:53', + end_date: '2021-06-10 11:53:53', + status_name: 'Published' + } + ]; + + const { asFragment } = render(); + + expect(asFragment()).toMatchSnapshot(); + }); + + it('renders correctly with no surveys', () => { + const { asFragment } = render(); + + expect(asFragment()).toMatchSnapshot(); + }); +}); diff --git a/app/src/components/surveys/__snapshots__/SurveysList.test.tsx.snap b/app/src/components/surveys/__snapshots__/SurveysList.test.tsx.snap new file mode 100644 index 0000000000..18296eff5a --- /dev/null +++ b/app/src/components/surveys/__snapshots__/SurveysList.test.tsx.snap @@ -0,0 +1,297 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`SurveysList renders correctly with no surveys 1`] = ` + +
+
+ + + + + + + + + + + + + + +
+ Name + + Species + + Timeline + + Status +
+ No Surveys +
+
+
+ +`; + +exports[`SurveysList renders correctly with surveys 1`] = ` + +
+
+ + + + + + + + + + + + + + + + + + + + + + + +
+ Name + + Species + + Timeline + + Status +
+ + + Moose + + April 09, 2021 - May 09, 2021 + +
+ + UNPUBLISHED + +
+
+ + + Moose + + April 09, 2021 - June 10, 2021 + +
+ + PUBLISHED + +
+
+
+
+
+
+

+ Rows per page: +

+
+
+ 5 +
+ + +
+

+ 1-2 of 2 +

+
+ + +
+
+
+
+ +`; diff --git a/app/src/features/projects/view/ProjectSurveys.test.tsx b/app/src/features/projects/view/ProjectSurveys.test.tsx index 1bf72b1456..4b971a6df9 100644 --- a/app/src/features/projects/view/ProjectSurveys.test.tsx +++ b/app/src/features/projects/view/ProjectSurveys.test.tsx @@ -1,18 +1,10 @@ import { render } from '@testing-library/react'; -import { createMemoryHistory } from 'history'; import React from 'react'; -import { Router } from 'react-router'; import ProjectSurveys from './ProjectSurveys'; -const history = createMemoryHistory(); - describe('ProjectSurveys', () => { it('renders correctly', () => { - const { asFragment } = render( - - - - ); + const { asFragment } = render(); expect(asFragment()).toMatchSnapshot(); }); diff --git a/app/src/features/projects/view/ProjectSurveys.tsx b/app/src/features/projects/view/ProjectSurveys.tsx index adc561c44f..8fcca2e74d 100644 --- a/app/src/features/projects/view/ProjectSurveys.tsx +++ b/app/src/features/projects/view/ProjectSurveys.tsx @@ -17,8 +17,8 @@ const ProjectSurveys = () => { id: 1, name: 'Moose Survey 1', species: 'Moose', - start_date: '2020/04/04', - end_date: '2021/05/05', + start_date: '2021-04-09 11:53:53', + end_date: '2021-05-09 11:53:53', status_name: 'Unpublished' } ]; diff --git a/app/src/features/projects/view/__snapshots__/ProjectSurveys.test.tsx.snap b/app/src/features/projects/view/__snapshots__/ProjectSurveys.test.tsx.snap index 9d12003b0a..6445ea3bd3 100644 --- a/app/src/features/projects/view/__snapshots__/ProjectSurveys.test.tsx.snap +++ b/app/src/features/projects/view/__snapshots__/ProjectSurveys.test.tsx.snap @@ -4,24 +4,33 @@ exports[`ProjectSurveys renders correctly 1`] = `
-

- Project Surveys -

-
-
- Project survey component 1 placeholder +

+ Surveys +

+
+ + + + + + + + + + + + + + + + + +
+ Name + + Species + + Timeline + + Status +
+ + + Moose + + April 09, 2021 - May 09, 2021 + +
+ + UNPUBLISHED + +
+
+
+
- Project survey component 2 placeholder +
+
+

+ Rows per page: +

+
+
+ 5 +
+ + +
+

+ 1-1 of 1 +

+
+ + +
+
From c54b2a594c7c08735629e24d771aa9db6e1bebfe Mon Sep 17 00:00:00 2001 From: Shreyas Devalapurkar Date: Fri, 30 Apr 2021 12:41:49 -0700 Subject: [PATCH 3/7] dont use snapshots --- .../components/surveys/SurveysList.test.tsx | 10 +- .../__snapshots__/SurveysList.test.tsx.snap | 297 ------------------ .../projects/view/ProjectSurveys.test.tsx | 6 +- .../ProjectSurveys.test.tsx.snap | 230 -------------- 4 files changed, 10 insertions(+), 533 deletions(-) delete mode 100644 app/src/components/surveys/__snapshots__/SurveysList.test.tsx.snap delete mode 100644 app/src/features/projects/view/__snapshots__/ProjectSurveys.test.tsx.snap diff --git a/app/src/components/surveys/SurveysList.test.tsx b/app/src/components/surveys/SurveysList.test.tsx index 29613d7e8a..3098165551 100644 --- a/app/src/components/surveys/SurveysList.test.tsx +++ b/app/src/components/surveys/SurveysList.test.tsx @@ -24,14 +24,16 @@ describe('SurveysList', () => { } ]; - const { asFragment } = render(); + const { getByText, queryByText } = render(); - expect(asFragment()).toMatchSnapshot(); + expect(queryByText('No Surveys')).toBeNull(); + expect(getByText('Moose Survey 1')).toBeInTheDocument(); + expect(getByText('Moose Survey 2')).toBeInTheDocument(); }); it('renders correctly with no surveys', () => { - const { asFragment } = render(); + const { getByText } = render(); - expect(asFragment()).toMatchSnapshot(); + expect(getByText('No Surveys')).toBeInTheDocument(); }); }); diff --git a/app/src/components/surveys/__snapshots__/SurveysList.test.tsx.snap b/app/src/components/surveys/__snapshots__/SurveysList.test.tsx.snap deleted file mode 100644 index 18296eff5a..0000000000 --- a/app/src/components/surveys/__snapshots__/SurveysList.test.tsx.snap +++ /dev/null @@ -1,297 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`SurveysList renders correctly with no surveys 1`] = ` - -
-
- - - - - - - - - - - - - - -
- Name - - Species - - Timeline - - Status -
- No Surveys -
-
-
- -`; - -exports[`SurveysList renders correctly with surveys 1`] = ` - -
-
- - - - - - - - - - - - - - - - - - - - - - - -
- Name - - Species - - Timeline - - Status -
- - - Moose - - April 09, 2021 - May 09, 2021 - -
- - UNPUBLISHED - -
-
- - - Moose - - April 09, 2021 - June 10, 2021 - -
- - PUBLISHED - -
-
-
-
-
-
-

- Rows per page: -

-
-
- 5 -
- - -
-

- 1-2 of 2 -

-
- - -
-
-
-
- -`; diff --git a/app/src/features/projects/view/ProjectSurveys.test.tsx b/app/src/features/projects/view/ProjectSurveys.test.tsx index 4b971a6df9..7837a78952 100644 --- a/app/src/features/projects/view/ProjectSurveys.test.tsx +++ b/app/src/features/projects/view/ProjectSurveys.test.tsx @@ -4,8 +4,10 @@ import ProjectSurveys from './ProjectSurveys'; describe('ProjectSurveys', () => { it('renders correctly', () => { - const { asFragment } = render(); + const { getByText } = render(); - expect(asFragment()).toMatchSnapshot(); + expect(getByText('Surveys')).toBeInTheDocument(); + expect(getByText('Add Survey')).toBeInTheDocument(); + expect(getByText('Moose Survey 1')).toBeInTheDocument(); }); }); diff --git a/app/src/features/projects/view/__snapshots__/ProjectSurveys.test.tsx.snap b/app/src/features/projects/view/__snapshots__/ProjectSurveys.test.tsx.snap deleted file mode 100644 index 6445ea3bd3..0000000000 --- a/app/src/features/projects/view/__snapshots__/ProjectSurveys.test.tsx.snap +++ /dev/null @@ -1,230 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ProjectSurveys renders correctly 1`] = ` - -
-
-
-

- Surveys -

-
- -
-
-
-
-
- - - - - - - - - - - - - - - - - -
- Name - - Species - - Timeline - - Status -
- - - Moose - - April 09, 2021 - May 09, 2021 - -
- - UNPUBLISHED - -
-
-
-
-
-
-

- Rows per page: -

-
-
- 5 -
- - -
-

- 1-1 of 1 -

-
- - -
-
-
-
-
- -`; From 8240fc03dc5e956b69b84784d94cc686adbbd298 Mon Sep 17 00:00:00 2001 From: Shreyas Devalapurkar Date: Fri, 30 Apr 2021 17:00:58 -0700 Subject: [PATCH 4/7] trigger build From b44ad3f3a5cd80818ca59094a61fa4dff7bd3fbe Mon Sep 17 00:00:00 2001 From: Shreyas Devalapurkar Date: Sat, 1 May 2021 09:09:01 -0700 Subject: [PATCH 5/7] trigger build From 9a43626aec0d7628d8b208c74d96faaa7e82793a Mon Sep 17 00:00:00 2001 From: Shreyas Devalapurkar Date: Sat, 1 May 2021 09:18:34 -0700 Subject: [PATCH 6/7] fix issue --- app/src/features/projects/view/ProjectPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/src/features/projects/view/ProjectPage.tsx b/app/src/features/projects/view/ProjectPage.tsx index 9e1b0a899f..265653396e 100644 --- a/app/src/features/projects/view/ProjectPage.tsx +++ b/app/src/features/projects/view/ProjectPage.tsx @@ -166,7 +166,7 @@ const ProjectPage: React.FC = () => { {location.pathname.includes('/details') && ( )} - {location.pathname.includes('/surveys') && } + {location.pathname.includes('/surveys') && } {location.pathname.includes('/attachments') && ( )} From 3f4f1e2ccffda938f6dce6ad8af53a6d0f39fdf3 Mon Sep 17 00:00:00 2001 From: Shreyas Devalapurkar Date: Sat, 1 May 2021 09:26:37 -0700 Subject: [PATCH 7/7] trigger build