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 (
);
};
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.
>
);
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) => {
}
/>