diff --git a/app/src/features/surveys/CreateSurveyPage.tsx b/app/src/features/surveys/CreateSurveyPage.tsx index 4d65d2a87c..11cc7a80fa 100644 --- a/app/src/features/surveys/CreateSurveyPage.tsx +++ b/app/src/features/surveys/CreateSurveyPage.tsx @@ -380,8 +380,8 @@ const CreateSurveyPage = () => { } /> diff --git a/app/src/features/surveys/components/BlockForm.tsx b/app/src/features/surveys/components/BlockForm.tsx index bb1e68b7b8..cc2492057f 100644 --- a/app/src/features/surveys/components/BlockForm.tsx +++ b/app/src/features/surveys/components/BlockForm.tsx @@ -1,4 +1,3 @@ -import Typography from '@mui/material/Typography'; import { Box } from '@mui/system'; import CustomTextField from 'components/fields/CustomTextField'; import React from 'react'; @@ -12,25 +11,20 @@ export interface IBlockData { const BlockForm: React.FC = () => { return (
- - - Name and Description - - - - - + + + ); }; diff --git a/app/src/features/surveys/components/CreateSurveyBlockDialog.tsx b/app/src/features/surveys/components/CreateSurveyBlockDialog.tsx index 7069429f4d..0d9a5a6fb2 100644 --- a/app/src/features/surveys/components/CreateSurveyBlockDialog.tsx +++ b/app/src/features/surveys/components/CreateSurveyBlockDialog.tsx @@ -1,9 +1,4 @@ -import CloseIcon from '@mui/icons-material/Close'; -import { Typography } from '@mui/material'; -import IconButton from '@mui/material/IconButton'; -import Snackbar from '@mui/material/Snackbar'; import EditDialog from 'components/dialog/EditDialog'; -import { useState } from 'react'; import BlockForm from './BlockForm'; import { BlockYupSchema } from './SurveyBlockSection'; interface ICreateBlockProps { @@ -14,15 +9,10 @@ interface ICreateBlockProps { const CreateSurveyBlockDialog: React.FC = (props) => { const { open, onSave, onClose } = props; - const [isSnackBarOpen, setIsSnackBarOpen] = useState(false); - const [blockName, setBlockName] = useState(''); return ( <> = (props) => { dialogSaveButtonLabel="Add Block" onCancel={() => onClose()} onSave={(formValues) => { - setBlockName(formValues.name); - setIsSnackBarOpen(true); onSave(formValues); }} /> - - { - setIsSnackBarOpen(false); - setBlockName(''); - }} - message={ - <> - - Block {blockName} has been added. - - - } - action={ - setIsSnackBarOpen(false)}> - - - } - /> ); }; diff --git a/app/src/features/surveys/components/EditSurveyBlockDialog.tsx b/app/src/features/surveys/components/EditSurveyBlockDialog.tsx index 570c03020a..fbe3ebf660 100644 --- a/app/src/features/surveys/components/EditSurveyBlockDialog.tsx +++ b/app/src/features/surveys/components/EditSurveyBlockDialog.tsx @@ -1,9 +1,4 @@ -import CloseIcon from '@mui/icons-material/Close'; -import { Typography } from '@mui/material'; -import IconButton from '@mui/material/IconButton'; -import Snackbar from '@mui/material/Snackbar'; import EditDialog from 'components/dialog/EditDialog'; -import { useState } from 'react'; import BlockForm from './BlockForm'; import { BlockYupSchema, IEditBlock } from './SurveyBlockSection'; @@ -16,15 +11,10 @@ interface IEditBlockProps { const EditSurveyBlockDialog: React.FC = (props) => { const { open, initialData, onSave, onClose } = props; - const [isSnackBarOpen, setIsSnackBarOpen] = useState(false); - const [blockName, setBlockName] = useState(''); return ( <> = (props) => { }} dialogSaveButtonLabel="Save" onCancel={() => { - setBlockName(''); - setIsSnackBarOpen(true); onClose(); }} onSave={(formValues) => { - setBlockName(formValues.name); - setIsSnackBarOpen(true); onSave(formValues, initialData?.index); }} /> - - { - setIsSnackBarOpen(false); - setBlockName(''); - }} - message={ - <> - - {initialData?.block.survey_block_id ? ( - <> - Block {blockName} has been updated. - - ) : ( - <> - Block {blockName} has been added. - - )} - - - } - action={ - setIsSnackBarOpen(false)}> - - - } - /> ); }; diff --git a/app/src/features/surveys/components/SurveyBlockSection.tsx b/app/src/features/surveys/components/SurveyBlockSection.tsx index cfb194e0b9..01bf12b6d2 100644 --- a/app/src/features/surveys/components/SurveyBlockSection.tsx +++ b/app/src/features/surveys/components/SurveyBlockSection.tsx @@ -2,14 +2,16 @@ import { mdiPencilOutline, mdiPlus, mdiTrashCanOutline } from '@mdi/js'; import Icon from '@mdi/react'; import MoreVertIcon from '@mui/icons-material/MoreVert'; import { ListItemIcon, Menu, MenuItem, MenuProps, Typography } from '@mui/material'; -import Box from '@mui/material/Box'; +// import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import Card from '@mui/material/Card'; import CardHeader from '@mui/material/CardHeader'; +import Collapse from '@mui/material/Collapse'; import IconButton from '@mui/material/IconButton'; import { useFormikContext } from 'formik'; import { ICreateSurveyRequest } from 'interfaces/useSurveyApi.interface'; import React, { useState } from 'react'; +import { TransitionGroup } from 'react-transition-group'; import yup from 'utils/YupSchema'; import CreateSurveyBlockDialog from './CreateSurveyBlockDialog'; import EditSurveyBlockDialog from './EditSurveyBlockDialog'; @@ -20,8 +22,8 @@ export const SurveyBlockInitialValues = { // Form validation for Block Item export const BlockYupSchema = yup.object({ - name: yup.string().required().max(50, 'Maximum 50 characters'), - description: yup.string().required().max(250, 'Maximum 250 characters') + name: yup.string().required('Name is required').max(50, 'Maximum 50 characters'), + description: yup.string().required('Description is required').max(250, 'Maximum 250 characters') }); export const SurveyBlockYupSchema = yup.array(BlockYupSchema); @@ -92,16 +94,19 @@ const SurveyBlockSection: React.FC = () => { sx={{ marginBottom: '14px' }}> - Define Blocks + Define Blocks{' '} + + (optional) + - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor sem. Aliquam erat volutpat. Donec - placerat nisl magna, et faucibus arcu condimentum sed. + Enter a name and description for each block used in this survey. {
+ + {values.blocks.map((item, index) => { + return ( + + + ) => + handleMenuClick(event, index) + } + aria-label="settings"> + + + } + title={item.name} + subheader={item.description} + /> + + + ); + })} + - - {values.blocks.map((item, index) => { - return ( - - ) => - handleMenuClick(event, index) - } - aria-label="settings"> - - - } - title={item.name} - subheader={item.description} - /> - - ); - })} -
); diff --git a/app/src/features/surveys/components/SurveyUserForm.tsx b/app/src/features/surveys/components/SurveyUserForm.tsx index 178f39a621..dad7fc5d29 100644 --- a/app/src/features/surveys/components/SurveyUserForm.tsx +++ b/app/src/features/surveys/components/SurveyUserForm.tsx @@ -146,7 +146,9 @@ const SurveyUserForm: React.FC = (props) => {
{errors?.['participants'] && selectedUsers.length > 0 && ( - + + + )} = (props) => { } />