diff --git a/app/src/App.tsx b/app/src/App.tsx index a09aa0c7c5..6f063d6363 100644 --- a/app/src/App.tsx +++ b/app/src/App.tsx @@ -8,6 +8,7 @@ import React from 'react'; import { AuthProvider, AuthProviderProps } from 'react-oidc-context'; import { BrowserRouter } from 'react-router-dom'; import appTheme from 'themes/appTheme'; +import ScrollToTop from 'utils/ScrollToTop'; import { buildUrl } from 'utils/Utils'; const App: React.FC = () => { @@ -52,6 +53,7 @@ const App: React.FC = () => { return ( + ); diff --git a/app/src/features/surveys/CreateSurveyPage.tsx b/app/src/features/surveys/CreateSurveyPage.tsx index 5bb2e2be73..f340780d41 100644 --- a/app/src/features/surveys/CreateSurveyPage.tsx +++ b/app/src/features/surveys/CreateSurveyPage.tsx @@ -1,9 +1,10 @@ -import { Theme } from '@mui/material'; +import { Breadcrumbs, Theme } from '@mui/material'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import CircularProgress from '@mui/material/CircularProgress'; import Container from '@mui/material/Container'; import Divider from '@mui/material/Divider'; +import Link from '@mui/material/Link'; import Paper from '@mui/material/Paper'; import Typography from '@mui/material/Typography'; import { makeStyles } from '@mui/styles'; @@ -27,6 +28,7 @@ import { ICreateSurveyRequest } from 'interfaces/useSurveyApi.interface'; import moment from 'moment'; import { useContext, useEffect, useRef, useState } from 'react'; import { Prompt, useHistory } from 'react-router'; +import { Link as RouterLink } from 'react-router-dom'; import { getFormattedDate } from 'utils/Utils'; import yup from 'utils/YupSchema'; import AgreementsForm, { AgreementsInitialValues, AgreementsYupSchema } from './components/AgreementsForm'; @@ -51,6 +53,7 @@ import SurveyFundingSourceForm, { } from './components/SurveyFundingSourceForm'; import { SurveySiteSelectionInitialValues, SurveySiteSelectionYupSchema } from './components/SurveySiteSelectionForm'; import SurveyUserForm, { SurveyUserJobFormInitialValues, SurveyUserJobYupSchema } from './components/SurveyUserForm'; +import SurveyBaseHeader from './view/components/SurveyBaseHeader'; const useStyles = makeStyles((theme: Theme) => ({ actionButton: { @@ -269,30 +272,41 @@ const CreateSurveyPage = () => { if (!codes || !projectData) { return ; } + return ( <> - - - - - - - Create New Survey - - - - - - - - - - + + + {projectData.project.project_name} + + + Survey + + + Create + + + } + buttonJSX={ + <> + + + + } + /> diff --git a/app/src/features/surveys/edit/EditSurveyPage.tsx b/app/src/features/surveys/edit/EditSurveyPage.tsx index 61deee4861..ce43b49a47 100644 --- a/app/src/features/surveys/edit/EditSurveyPage.tsx +++ b/app/src/features/surveys/edit/EditSurveyPage.tsx @@ -1,11 +1,10 @@ -import { Theme } from '@mui/material'; +import { Breadcrumbs } from '@mui/material'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import CircularProgress from '@mui/material/CircularProgress'; import Container from '@mui/material/Container'; -import Paper from '@mui/material/Paper'; +import Link from '@mui/material/Link'; import Typography from '@mui/material/Typography'; -import { makeStyles } from '@mui/styles'; import { IErrorDialogProps } from 'components/dialog/ErrorDialog'; import { EditSurveyI18N } from 'constants/i18n'; import { CodesContext } from 'contexts/codesContext'; @@ -20,49 +19,16 @@ import useDataLoader from 'hooks/useDataLoader'; import { IEditSurveyRequest, SurveyUpdateObject } from 'interfaces/useSurveyApi.interface'; import { useContext, useEffect, useRef, useState } from 'react'; import { Prompt, useHistory, useParams } from 'react-router'; +import { Link as RouterLink } from 'react-router-dom'; +import SurveyBaseHeader from '../view/components/SurveyBaseHeader'; import EditSurveyForm from './EditSurveyForm'; -const useStyles = makeStyles((theme: Theme) => ({ - actionButton: { - minWidth: '6rem', - '& + button': { - marginLeft: '0.5rem' - } - }, - sectionDivider: { - height: '1px', - marginTop: theme.spacing(5), - marginBottom: theme.spacing(5) - }, - pageTitleContainer: { - maxWidth: '170ch', - overflow: 'hidden', - textOverflow: 'ellipsis' - }, - pageTitle: { - display: '-webkit-box', - '-webkit-line-clamp': 2, - '-webkit-box-orient': 'vertical', - paddingTop: theme.spacing(0.5), - paddingBottom: theme.spacing(0.5), - overflow: 'hidden' - }, - pageTitleActions: { - paddingTop: theme.spacing(0.75), - paddingBottom: theme.spacing(0.75), - '& button': { - marginLeft: theme.spacing(1) - } - } -})); - /** * Page to create a survey. * * @return {*} */ const EditSurveyPage = () => { - const classes = useStyles(); const biohubApi = useBiohubApi(); const history = useHistory(); const urlParams: Record = useParams(); @@ -214,27 +180,43 @@ const EditSurveyPage = () => { return ( <> - - - - - - - Edit Survey Details - - - - - - - - - - + + + {projectData.project.project_name} + + + {surveyData && surveyData.survey_details && surveyData.survey_details.survey_name} + + + Edit + + + } + buttonJSX={ + <> + + + + } + /> + { return ( <> - - + { {surveyWithDetails.surveyData.survey_details.survey_name} - - - - {surveyWithDetails.surveyData.survey_details.survey_name} - - - - - - {getFormattedDateRangeString( - DATE_FORMAT.ShortMediumDateFormat, - surveyWithDetails.surveyData.survey_details.start_date, - surveyWithDetails.surveyData.survey_details.end_date - )} - - - - - - - - - setMenuAnchorEl(null)}> - history.push('edit')}> + + + {getFormattedDateRangeString( + DATE_FORMAT.ShortMediumDateFormat, + surveyWithDetails.surveyData.survey_details.start_date, + surveyWithDetails.surveyData.survey_details.end_date + )} + + + } + buttonJSX={ + <> + + + + setMenuAnchorEl(null)}> + history.push('edit')}> + + + + Edit Survey Details + + {enableDeleteSurveyButton && ( + - + - Edit Survey Details + Delete Survey - {enableDeleteSurveyButton && ( - - - - - Delete Survey - - )} - - - - - + )} + + + } + /> setPublishSurveyDialogOpen(false)} /> diff --git a/app/src/features/surveys/view/components/SurveyBaseHeader.tsx b/app/src/features/surveys/view/components/SurveyBaseHeader.tsx new file mode 100644 index 0000000000..d9e87ae851 --- /dev/null +++ b/app/src/features/surveys/view/components/SurveyBaseHeader.tsx @@ -0,0 +1,71 @@ +import Box from '@mui/material/Box'; +import { grey } from '@mui/material/colors'; +import Container from '@mui/material/Container'; +import Paper from '@mui/material/Paper'; +import Typography from '@mui/material/Typography'; + +interface ISurveyHeader { + title: string; + subTitle?: JSX.Element; + breadCrumb?: JSX.Element; + buttonJSX?: JSX.Element; +} +/** + * Generic Survey header for all survey views + * + * @return {*} + */ +const SurveyBaseHeader = (props: ISurveyHeader) => { + const { title, subTitle, breadCrumb, buttonJSX } = props; + + return ( + + + {breadCrumb} + + + + {title} + + + {subTitle} + + + + {buttonJSX} + + + + + ); +}; + +export default SurveyBaseHeader; diff --git a/app/src/utils/ScrollToTop.tsx b/app/src/utils/ScrollToTop.tsx new file mode 100644 index 0000000000..c74351c1d2 --- /dev/null +++ b/app/src/utils/ScrollToTop.tsx @@ -0,0 +1,17 @@ +import { useEffect } from 'react'; +import { useLocation } from 'react-router-dom'; + +/** + * Scrolls to the top of the page on route change. + * + * @return {*} + */ +export default function ScrollToTop() { + const { pathname } = useLocation(); + + useEffect(() => { + window.scrollTo(0, 0); + }, [pathname]); + + return null; +} diff --git a/database/src/seeds/03_basic_project_survey_setup.ts b/database/src/seeds/03_basic_project_survey_setup.ts index 5a1cf0a929..a475269c34 100644 --- a/database/src/seeds/03_basic_project_survey_setup.ts +++ b/database/src/seeds/03_basic_project_survey_setup.ts @@ -343,11 +343,11 @@ const insertSurveyIntendedOutcome = (surveyId: number) => ` INSERT into survey_intended_outcome ( survey_id, - intended_outcome_id + intended_outcome_id ) - VALUES + VALUES ( - ${surveyId}, + ${surveyId}, (select intended_outcome_id from intended_outcome order by random() limit 1) ); `; @@ -522,7 +522,7 @@ const insertSurveySamplingMethodData = () => method_lookup_id, description ) - VALUES + VALUES ( (SELECT survey_sample_site_id FROM survey_sample_site LIMIT 1), (SELECT method_lookup_id FROM method_lookup ORDER BY random() LIMIT 1), @@ -542,7 +542,7 @@ const insertSurveySamplePeriodData = () => start_date, end_date ) - VALUES + VALUES ( (SELECT survey_sample_method_id FROM survey_sample_method LIMIT 1), $$${faker.date @@ -559,7 +559,7 @@ const insertSurveySamplePeriodData = () => * */ const insertSurveyObservationData = (surveyId: number) => ` - INSERT INTO survey_observation + INSERT INTO survey_observation ( survey_id, wldtaxonomic_units_id, @@ -572,7 +572,7 @@ const insertSurveyObservationData = (surveyId: number) => ` survey_sample_method_id, survey_sample_period_id ) - VALUES + VALUES ( ${surveyId}, $$${faker.number.int({ min: 30000, max: 32000 })}$$,