zdam-egzamin-zawodowy/admin-panel
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

QuestionsPage: split FormDialog into two components

Browse Source
This commit is contained in:
Dawid Wysokiński 2021-04-11 11:21:52 +02:00
parent 89cc8fded8
commit 2d867101c9
1 changed files with 135 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

270
src/features/QuestionsPage/components/FormDialog/FormDialog.tsx
View File

@ -42,7 +42,7 @@ type Images = Pick<
answerDImage?: FileList; answerDImage?: FileList;
}; };
const FormDialog = ({ open, onClose, question, onSubmit }: FormDialogProps) => { const Form = ({ onClose, question, onSubmit }: FormDialogProps) => {
const editMode = Boolean(question); const editMode = Boolean(question);
const { const {
register, register,
@ -137,148 +137,148 @@ const FormDialog = ({ open, onClose, question, onSubmit }: FormDialogProps) => {
}, },
}; };
return ( return (
<Dialog <form onSubmit={handleSubmit(_onSubmit)}>
open={open} <DialogTitle>
onClose={isSubmitting ? undefined : onClose} {editMode ? 'Edycja pytania' : 'Tworzenie pytania'}
fullWidth </DialogTitle>
maxWidth="xs" <DialogContent className={classes.dialogContent}>
> {renderImagePreview('image')}
<form onSubmit={handleSubmit(_onSubmit)}> <TextField
<DialogTitle> fullWidth
{editMode ? 'Edycja pytania' : 'Tworzenie pytania'} label="Obrazek"
</DialogTitle> name="image"
<DialogContent className={classes.dialogContent}> {...defaultFileInputProps}
{renderImagePreview('image')} inputRef={register}
<TextField error={!!errors.image}
fullWidth helperText={errors.image?.message ?? ''}
label="Obrazek" />
name="image" <TextField
{...defaultFileInputProps} fullWidth
inputRef={register} label="Treść pytania"
error={!!errors.image} name="content"
helperText={errors.image?.message ?? ''} multiline
/> defaultValue={question?.content}
<TextField inputRef={register({
fullWidth required: 'Te pole jest wymagane.',
label="Treść pytania" })}
name="content" error={!!errors.content}
multiline helperText={errors.content?.message ?? ''}
defaultValue={question?.content} />
inputRef={register({ <TextField
required: 'Te pole jest wymagane.', fullWidth
})} label="Z"
error={!!errors.content} name="from"
helperText={errors.content?.message ?? ''} defaultValue={question?.from}
/> inputRef={register({
<TextField required: 'Te pole jest wymagane.',
fullWidth })}
label="Z" error={!!errors.from}
name="from" helperText={errors.from?.message ?? ''}
defaultValue={question?.from} />
inputRef={register({ <TextField
required: 'Te pole jest wymagane.', fullWidth
})} label="Wyjaśnienie"
error={!!errors.from} name="explanation"
helperText={errors.from?.message ?? ''} multiline
/> defaultValue={question?.explanation}
<TextField inputRef={register}
fullWidth error={!!errors.explanation}
label="Wyjaśnienie" helperText={errors.explanation?.message ?? ''}
name="explanation" />
multiline <Controller
defaultValue={question?.explanation} name="correctAnswer"
inputRef={register} defaultValue={question?.correctAnswer ?? ANSWERS[0]}
error={!!errors.explanation} control={control}
helperText={errors.explanation?.message ?? ''} as={
/> <TextField select fullWidth label="Poprawna odpowiedź">
{ANSWERS.map(answer => (
<MenuItem key={answer} value={answer}>
{answer}
</MenuItem>
))}
</TextField>
}
/>
{ANSWERS.map(answer => {
const upper = answer.toUpperCase();
const key = `answer${upper}` as keyof QuestionInput;
const imageKey = `${key}Image` as keyof Images;
return (
<div key={upper} className={classes.dialogContent}>
{renderImagePreview(imageKey)}
<TextField
fullWidth
label={`Odpowiedź ${upper} obrazek`}
name={imageKey}
{...defaultFileInputProps}
inputRef={register}
error={!!errors[imageKey]}
helperText={errors[imageKey]?.message ?? ''}
/>
<TextField
fullWidth
label={`Odpowiedź ${upper}`}
name={key}
multiline
defaultValue={question ? question[key as keyof Question] : ''}
inputRef={register({
required: 'Te pole jest wymagane.',
})}
error={!!errors[key]}
helperText={errors[key]?.message ?? ''}
/>
</div>
);
})}
{!loadingQualifications && (
<Controller <Controller
name="correctAnswer" name="qualificationID"
defaultValue={question?.correctAnswer ?? ANSWERS[0]} defaultValue={question?.qualification?.id ?? qualifications[0]?.id}
control={control} control={control}
rules={{
valueAsNumber: true,
required: 'Musisz wybrać kwalifikację.',
}}
as={ as={
<TextField select fullWidth label="Poprawna odpowiedź"> <TextField select fullWidth label="Kwalifikacja">
{ANSWERS.map(answer => ( {qualifications.map(qualification => (
<MenuItem key={answer} value={answer}> <MenuItem key={qualification.id} value={qualification.id}>
{answer} {qualification.name} ({qualification.code})
</MenuItem> </MenuItem>
))} ))}
</TextField> </TextField>
} }
/> />
{ANSWERS.map(answer => { )}
const upper = answer.toUpperCase(); </DialogContent>
const key = `answer${upper}` as keyof QuestionInput; <DialogActions>
const imageKey = `${key}Image` as keyof Images; <Button
return ( color="secondary"
<div key={upper} className={classes.dialogContent}> type="button"
{renderImagePreview(imageKey)} variant="contained"
<TextField onClick={onClose}
fullWidth disabled={isSubmitting}
label={`Odpowiedź ${upper} obrazek`} >
name={imageKey} Anuluj
{...defaultFileInputProps} </Button>
inputRef={register} <Button
error={!!errors[imageKey]} type="submit"
helperText={errors[imageKey]?.message ?? ''} color="primary"
/> variant="contained"
<TextField disabled={isSubmitting}
fullWidth >
label={`Odpowiedź ${upper}`} {editMode ? 'Zapisz' : 'Utwórz'}
name={key} </Button>
multiline </DialogActions>
defaultValue={question ? question[key as keyof Question] : ''} </form>
inputRef={register({ );
required: 'Te pole jest wymagane.', };
})}
error={!!errors[key]} const FormDialog = (props: FormDialogProps) => {
helperText={errors[key]?.message ?? ''} const { open, onClose } = props;
/> return (
</div> <Dialog open={open} onClose={onClose} fullWidth maxWidth="xs">
); <Form {...props} />
})}
{!loadingQualifications && (
<Controller
name="qualificationID"
defaultValue={
question?.qualification?.id ?? qualifications[0]?.id
}
control={control}
rules={{
valueAsNumber: true,
required: 'Musisz wybrać kwalifikację.',
}}
as={
<TextField select fullWidth label="Kwalifikacja">
{qualifications.map(qualification => (
<MenuItem key={qualification.id} value={qualification.id}>
{qualification.name} ({qualification.code})
</MenuItem>
))}
</TextField>
}
/>
)}
</DialogContent>
<DialogActions>
<Button
color="secondary"
type="button"
variant="contained"
onClick={onClose}
disabled={isSubmitting}
>
Anuluj
</Button>
<Button
type="submit"
color="primary"
variant="contained"
disabled={isSubmitting}
>
{editMode ? 'Zapisz' : 'Utwórz'}
</Button>
</DialogActions>
</form>
</Dialog> </Dialog>
); );
}; };