Skip to content

Commit

Permalink
Merge pull request #2759 from Northeastern-Electric-Racing/#2494-chan…
Browse files Browse the repository at this point in the history 
…ge-tasklistnotesmodal-to-nerformmodal

#2494: change tasklistnotesmodal to nerformmodal
  • Loading branch information
@walker-sean
walker-sean authored Sep 3, 2024
2 parents d567843 + a43650f commit 2c4d29c
Show file tree
Hide file tree
Showing 2 changed files with 192 additions and 249 deletions.
306 changes: 136 additions & 170 deletions src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/TaskList/TaskFormModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,12 @@
import { yupResolver } from '@hookform/resolvers/yup';
import {
Autocomplete,
Box,
Breakpoint,
Dialog,
DialogContent,
DialogTitle,
FormControl,
FormLabel,
Grid,
MenuItem,
TextField,
useTheme
} from '@mui/material';
import { Autocomplete, FormControl, FormLabel, Grid, MenuItem, TextField } from '@mui/material';
import { DatePicker } from '@mui/x-date-pickers';
import { Controller, useForm } from 'react-hook-form';
import { countWords, isGuest, isUnderWordCount, Task, TaskPriority, TeamPreview } from 'shared';
import NERFailButton from '../../../../components/NERFailButton';
import NERSuccessButton from '../../../../components/NERSuccessButton';
import { useCurrentUser } from '../../../../hooks/users.hooks';
import * as yup from 'yup';
import { getTaskAssigneeOptions, taskUserToAutocompleteOption } from '../../../../utils/task.utils';
import NERFormModal from '../../../../components/NERFormModal';

const schema = yup.object().shape({
notes: yup.string(),
Expand All @@ -45,11 +31,11 @@ interface TaskFormModalProps {
modalShow: boolean;
onHide: () => void;
onSubmit: (data: EditTaskFormInput) => Promise<void>;
onReset?: () => void;
}

const TaskFormModal: React.FC<TaskFormModalProps> = ({ task, onSubmit, modalShow, onHide, teams }) => {
const TaskFormModal: React.FC<TaskFormModalProps> = ({ task, onSubmit, modalShow, onHide, teams, onReset }) => {
const user = useCurrentUser();
const theme = useTheme();

const options: { label: string; id: string }[] = getTaskAssigneeOptions(teams).map(taskUserToAutocompleteOption);

Expand All @@ -70,163 +56,143 @@ const TaskFormModal: React.FC<TaskFormModalProps> = ({ task, onSubmit, modalShow
}
});

const dialogWidth: Breakpoint = 'md';
const unUpperCase = (str: string) => str.charAt(0) + str.slice(1).toLowerCase();

return (
<Dialog fullWidth maxWidth={dialogWidth} open={modalShow} onClose={onHide}>
<DialogTitle className={'font-weight-bold'}>{task?.title ?? 'New Task'}</DialogTitle>
<DialogContent
sx={{
'&::-webkit-scrollbar': {
height: '20px'
},
'&::-webkit-scrollbar-track': {
backgroundColor: 'transparent'
},
'&::-webkit-scrollbar-thumb': {
backgroundColor: theme.palette.divider,
borderRadius: '20px',
border: '6px solid transparent',
backgroundClip: 'content-box'
}
<NERFormModal
open={modalShow}
onHide={onHide}
formId={'edit-task-form'}
title={task?.title ? 'Edit Task' : 'New Task'}
reset={() => {
if (onReset) onReset();
reset();
}}
handleUseFormSubmit={handleSubmit}
onFormSubmit={onSubmit}
submitText="Save"
>
<form
onSubmit={(e) => {
if (isGuest(user.role)) return;
e.preventDefault();
e.stopPropagation();
handleSubmit(onSubmit)(e);
reset();
}}
onKeyPress={(e) => {
e.key === 'Enter' && e.preventDefault();
}}
>
<form
id={'create-work-package-form'}
onSubmit={(e) => {
e.preventDefault();
e.stopPropagation();
handleSubmit(onSubmit)(e);
reset();
}}
onKeyPress={(e) => {
e.key === 'Enter' && e.preventDefault();
}}
>
<Grid container spacing={2}>
<Grid item xs={12} md={7}>
<FormControl sx={{ width: '100%' }}>
<FormLabel>Title</FormLabel>
<Controller
name={'title'}
control={control}
rules={{ required: true }}
render={({ field: { onChange, value } }) => (
<TextField
required
onChange={onChange}
value={value}
inputProps={{
maxLength: isUnderWordCount(value, 15) ? null : 0
}}
helperText={`${countWords(value)}/15 words`}
error={!isUnderWordCount(value, 15)}
/>
)}
/>
</FormControl>
</Grid>
<Grid item xs={12} md={5}>
<FormControl fullWidth>
<FormLabel>Priority</FormLabel>
<Controller
name="priority"
control={control}
render={({ field: { onChange, value } }) => (
<TextField select onChange={onChange} value={value} error={!!errors.priority}>
{Object.values(TaskPriority).map((p) => (
<MenuItem key={p} value={p}>
{p}
</MenuItem>
))}
</TextField>
)}
/>
</FormControl>
</Grid>
<Grid item xs={12} md={8}>
<FormControl fullWidth>
<FormLabel>Assignees</FormLabel>
<Controller
name="assignees"
control={control}
render={({ field: { onChange, value } }) => (
<Autocomplete
isOptionEqualToValue={(option, value) => option.id === value.id}
filterSelectedOptions
multiple
id="tags-standard"
options={options}
getOptionLabel={(option) => option.label}
onChange={(_, value) => onChange(value.map((v) => v.id))}
value={value.map((v) => options.find((o) => o.id === v)!)}
renderInput={(params) => (
<TextField {...params} variant="standard" placeholder="Select A User" error={!!errors.assignees} />
)}
/>
)}
/>
</FormControl>
</Grid>
<Grid item xs={12} md={4}>
<FormControl fullWidth>
<FormLabel>Deadline (YYYY-MM-DD)</FormLabel>
<Controller
name="deadline"
control={control}
rules={{ required: true }}
render={({ field: { onChange, value } }) => (
<DatePicker
format="yyyy-MM-dd"
onChange={(event) => onChange(event ?? new Date())}
className={'padding: 10'}
value={value}
slotProps={{ textField: { autoComplete: 'off', error: !!errors.deadline } }}
/>
)}
/>
</FormControl>
</Grid>
<Grid item xs={12} md={12}>
<FormControl fullWidth>
<FormLabel>Notes</FormLabel>
<Controller
name={'notes'}
control={control}
render={({ field: { onChange, value } }) => (
<TextField
onChange={onChange}
value={value}
multiline
rows={5}
inputProps={{
maxLength: isUnderWordCount(value, 250) ? null : 0
}}
helperText={`${countWords(value)}/250 words`}
error={!isUnderWordCount(value, 250)}
/>
)}
/>
</FormControl>
</Grid>
<Grid container spacing={2}>
<Grid item xs={12} md={7}>
<FormControl sx={{ width: '100%' }}>
<FormLabel>Title</FormLabel>
<Controller
name={'title'}
control={control}
rules={{ required: true }}
render={({ field: { onChange, value } }) => (
<TextField
required
onChange={onChange}
value={value}
inputProps={{
maxLength: isUnderWordCount(value, 15) ? null : 0
}}
helperText={`${countWords(value)}/15 words`}
error={!isUnderWordCount(value, 15)}
/>
)}
/>
</FormControl>
</Grid>
<Grid item xs={12} md={5}>
<FormControl fullWidth>
<FormLabel>Priority</FormLabel>
<Controller
name="priority"
control={control}
render={({ field: { onChange, value } }) => (
<TextField select onChange={onChange} value={value} error={!!errors.priority}>
{Object.values(TaskPriority).map((p) => (
<MenuItem key={p} value={p}>
{unUpperCase(p)}
</MenuItem>
))}
</TextField>
)}
/>
</FormControl>
</Grid>
<Grid item xs={12} md={8}>
<FormControl fullWidth>
<FormLabel>Assignees</FormLabel>
<Controller
name="assignees"
control={control}
render={({ field: { onChange, value } }) => (
<Autocomplete
isOptionEqualToValue={(option, value) => option.id === value.id}
filterSelectedOptions
multiple
id="tags-standard"
options={options}
getOptionLabel={(option) => option.label}
onChange={(_, value) => onChange(value.map((v) => v.id))}
value={value.map((v) => options.find((o) => o.id === v)!)}
renderInput={(params) => (
<TextField {...params} variant="standard" placeholder="Select A User" error={!!errors.assignees} />
)}
/>
)}
/>
</FormControl>
</Grid>
<Grid item xs={12} md={4}>
<FormControl fullWidth>
<FormLabel>Deadline (MM-DD-YYYY)</FormLabel>
<Controller
name="deadline"
control={control}
rules={{ required: true }}
render={({ field: { onChange, value } }) => (
<DatePicker
format="MM-dd-yyyy"
onChange={(event) => onChange(event ?? new Date())}
className={'padding: 10'}
value={value}
slotProps={{ textField: { autoComplete: 'off', error: !!errors.deadline } }}
/>
)}
/>
</FormControl>
</Grid>
<Grid item xs={12} md={12}>
<FormControl fullWidth>
<FormLabel>Notes</FormLabel>
<Controller
name={'notes'}
control={control}
render={({ field: { onChange, value } }) => (
<TextField
onChange={onChange}
value={value}
multiline
rows={5}
inputProps={{
maxLength: isUnderWordCount(value, 250) ? null : 0
}}
helperText={`${countWords(value)}/250 words`}
error={!isUnderWordCount(value, 250)}
/>
)}
/>
</FormControl>
</Grid>
<Box textAlign="right" gap={2} sx={{ mt: 2 }}>
<NERFailButton
variant="outlined"
onClick={() => {
onHide();
}}
sx={{ mx: 1 }}
>
Cancel
</NERFailButton>
<NERSuccessButton variant="contained" disabled={isGuest(user.role)} type="submit" sx={{ mx: 1 }}>
Confirm
</NERSuccessButton>
</Box>
</form>
</DialogContent>
</Dialog>
</Grid>
</form>
</NERFormModal>
);
};

Expand Down
Loading

0 comments on commit 2c4d29c

Please sign in to comment.