geonizeli/progress-test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix feature form authorship option select

Browse Source
This commit is contained in:
João Geonizeli
2022-08-10 23:23:37 +00:00
parent 838075c3d9
commit 8a4c797ff5
3 changed files with 122 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
app/javascript/pages/question/Form/Form.tsx
View File

@@ -1,16 +1,20 @@
import React, {FC, useState} from 'react' import React, { FC, useEffect, useState } from "react";
import {FieldValue, FieldValues, useForm} from 'react-hook-form'; import { FieldValue, FieldValues, useForm } from "react-hook-form";
import {ExclamationCircleIcon} from '@heroicons/react/outline'; import { ExclamationCircleIcon } from "@heroicons/react/outline";
import { useHistory } from "react-router-dom"; import { useHistory } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import {gql} from '@apollo/client'; import { gql } from "@apollo/client";
import {Question, QuestionCreateInput, QuestionStatus} from '../../../__generated__/graphql-schema'; import {
import {formatInput} from '../formatInputs'; Question,
import {validateQuestionInputs} from '../../../utils/questions/questionValidations'; QuestionCreateInput,
import {RootState} from '../../../services/store'; QuestionStatus,
import {FormProvider} from './FormContext' } from "../../../__generated__/graphql-schema";
import {SteppedForm, Step} from './SteppedForm' import { formatInput } from "../formatInputs";
import { validateQuestionInputs } from "../../../utils/questions/questionValidations";
import { RootState } from "../../../services/store";
import { FormProvider } from "./FormContext";
import { SteppedForm, Step } from "./SteppedForm";
import { import {
EnunciationFormStep, EnunciationFormStep,
EnunciationFragment, EnunciationFragment,
@@ -20,7 +24,7 @@ import {
DistractorsFragment, DistractorsFragment,
FeaturesFormStep, FeaturesFormStep,
FeaturesFragment, FeaturesFragment,
} from './steps' } from "./steps";
import { import {
Button, Button,
Dialog, Dialog,
@@ -28,7 +32,7 @@ import {
AlertV2, AlertV2,
List, List,
ListItem, ListItem,
} from '../../../components'; } from "../../../components";
import { QuestionRoutePaths } from "../../../routes"; import { QuestionRoutePaths } from "../../../routes";
import { turnOff, turnOn } from "../../../services/store/unsavedChanges"; import { turnOff, turnOn } from "../../../services/store/unsavedChanges";
@@ -44,97 +48,111 @@ export const FormFragments = gql`
...FeaturesFields ...FeaturesFields
status status
} }
` `;
type Props = { type Props = {
question?: Question question?: Question;
onSubmit?: (inputs: any) => void onSubmit?: (inputs: any) => void;
onDraftSubmit?: (inputs: any) => void onDraftSubmit?: (inputs: any) => void;
alert?: AlertV2Props alert?: AlertV2Props;
} };
export const Form: FC<Props> = ({question, onSubmit, onDraftSubmit, alert}) => { export const Form: FC<Props> = ({
const [validationErrors, setValidationErrors] = useState<string[]>([]) question,
const [confirmSaveDialogIsOpen, setConfirmFinishDialogIsOpen] = useState(false) onSubmit,
const [leaveDialogIsOpen, setLeaveDialogIsOpen] = useState(false) onDraftSubmit,
alert,
}) => {
const [validationErrors, setValidationErrors] = useState<string[]>([]);
const [confirmSaveDialogIsOpen, setConfirmFinishDialogIsOpen] =
useState(false);
const [leaveDialogIsOpen, setLeaveDialogIsOpen] = useState(false);
const formHooks = useForm<FieldValues>({ const formHooks = useForm<FieldValues>({
defaultValues: { defaultValues: {
authorship: question?.authorship ?? 'UNIFESO', authorship: question?.authorship ?? "UNIFESO",
authorshipType: question?.authorship === 'UNIFESO' ? 'UNIFESO' : 'OTHER', authorshipType: question?.authorship === "UNIFESO" ? "UNIFESO" : (question?.authorship ?? "OTHER"),
authorshipYear: new Date().getFullYear().toString(), authorshipYear: new Date().getFullYear().toString(),
difficulty: question?.difficulty, difficulty: question?.difficulty,
checkType: question?.checkType, checkType: question?.checkType,
bloomTaxonomy: question?.bloomTaxonomy, bloomTaxonomy: question?.bloomTaxonomy,
intention: question?.intention, intention: question?.intention,
} },
}) });
const {register, control, setValue, getValues, reset, formState, resetField} = formHooks const { getValues, reset, formState } = formHooks;
const [currentStep, setCurrentStep] = useState(0) const [currentStep, setCurrentStep] = useState(0);
const unsavedChanges = useSelector((state: RootState) => state.unsavedChanges) const unsavedChanges = useSelector(
const history = useHistory() (state: RootState) => state.unsavedChanges
const dispatch = useDispatch() );
const history = useHistory();
const dispatch = useDispatch();
const minStep = 0 const minStep = 0;
const maxStep = 3 const maxStep = 3;
const onFirstStep = currentStep === minStep const onFirstStep = currentStep === minStep;
const onLastStep = currentStep === maxStep const onLastStep = currentStep === maxStep;
useEffect(() => {
if (formState.isDirty) { if (formState.isDirty) {
dispatch(turnOn()) dispatch(turnOn());
} }
}, [formState.isDirty, dispatch, turnOn]);
const handleNextStep = () => { const handleNextStep = () => {
if (onLastStep) return if (onLastStep) return;
setCurrentStep(currentStep + 1) setCurrentStep(currentStep + 1);
} };
const handlePreviousStep = () => { const handlePreviousStep = () => {
if (onFirstStep) return if (onFirstStep) return;
setCurrentStep(currentStep - 1) setCurrentStep(currentStep - 1);
} };
const getFormattedInputValues = () => formatInput(getValues()) const getFormattedInputValues = () => formatInput(getValues());
const handleCancel = () => { const handleCancel = () => {
if (unsavedChanges && !leaveDialogIsOpen) { if (unsavedChanges && !leaveDialogIsOpen) {
setLeaveDialogIsOpen(true) setLeaveDialogIsOpen(true);
} else { } else {
history.push(QuestionRoutePaths.index) history.push(QuestionRoutePaths.index);
}
} }
};
const handleDraftSave = () => { const handleDraftSave = () => {
if (onDraftSubmit) { if (onDraftSubmit) {
onDraftSubmit({...getFormattedInputValues(), status: QuestionStatus.Draft} as QuestionCreateInput) onDraftSubmit({
reset(getValues()) ...getFormattedInputValues(),
dispatch(turnOff()) status: QuestionStatus.Draft,
} } as QuestionCreateInput);
reset(getValues());
dispatch(turnOff());
} }
};
const handleSave = () => { const handleSave = () => {
const inputs = {...getFormattedInputValues(), status: QuestionStatus.WaitingReview} as QuestionCreateInput const inputs = {
const errors = validateQuestionInputs(inputs) ...getFormattedInputValues(),
status: QuestionStatus.WaitingReview,
} as QuestionCreateInput;
const errors = validateQuestionInputs(inputs);
setConfirmFinishDialogIsOpen(false) setConfirmFinishDialogIsOpen(false);
if (onSubmit && !errors.length) { if (onSubmit && !errors.length) {
dispatch(turnOff()) dispatch(turnOff());
onSubmit(inputs) onSubmit(inputs);
} else { } else {
setValidationErrors(errors) setValidationErrors(errors);
} }
reset(getValues()) reset(getValues());
} };
return ( return (
<FormProvider props={{ question, hooks: formHooks }}> <FormProvider props={{ question, hooks: formHooks }}>
{alert && ( {alert && <AlertV2 severity={alert.severity} text={alert.text}></AlertV2>}
<AlertV2 severity={alert.severity} text={alert.text}></AlertV2>
)}
<Dialog <Dialog
isOpen={leaveDialogIsOpen} isOpen={leaveDialogIsOpen}
setIsOpen={setLeaveDialogIsOpen} setIsOpen={setLeaveDialogIsOpen}
@@ -170,10 +188,7 @@ export const Form: FC<Props> = ({question, onSubmit, onDraftSubmit, alert}) => {
} }
/> />
<form className="m-auto max-w-screen-md"> <form className="m-auto max-w-screen-md">
<SteppedForm <SteppedForm currentStep={currentStep} className="mb-3">
currentStep={currentStep}
className="mb-3"
>
<Step step={0}> <Step step={0}>
<EnunciationFormStep /> <EnunciationFormStep />
</Step> </Step>
@@ -188,12 +203,8 @@ export const Form: FC<Props> = ({question, onSubmit, onDraftSubmit, alert}) => {
</Step> </Step>
</SteppedForm> </SteppedForm>
<div <div className="mx-3 sm:mx-0 flex justify-items-center flex-col-reverse sm:flex-row justify-end space-x-0 sm:space-x-2">
className="mx-3 sm:mx-0 flex justify-items-center flex-col-reverse sm:flex-row justify-end space-x-0 sm:space-x-2"> <Button className={"mb-3 sm:mb-0"} onClick={handleCancel}>
<Button
className={"mb-3 sm:mb-0"}
onClick={handleCancel}
>
Cancelar Cancelar
</Button> </Button>
<Button <Button
@@ -202,11 +213,12 @@ export const Form: FC<Props> = ({question, onSubmit, onDraftSubmit, alert}) => {
> >
Retornar Retornar
</Button> </Button>
{(question?.status === QuestionStatus.Draft || question?.status === undefined) && {(question?.status === QuestionStatus.Draft ||
question?.status === undefined) && (
<Button className={"mb-3 sm:mb-0"} onClick={handleDraftSave}> <Button className={"mb-3 sm:mb-0"} onClick={handleDraftSave}>
Salvar Rascunho Salvar Rascunho
</Button> </Button>
} )}
<Button <Button
type="primary" type="primary"
className={`mb-3 sm:mb-0 ${onLastStep ? "hidden" : ""}`} className={`mb-3 sm:mb-0 ${onLastStep ? "hidden" : ""}`}
@@ -214,7 +226,7 @@ export const Form: FC<Props> = ({question, onSubmit, onDraftSubmit, alert}) => {
> >
Prosseguir Prosseguir
</Button> </Button>
{onLastStep && {onLastStep && (
<Button <Button
type="primary" type="primary"
className="mb-3 sm:mb-0" className="mb-3 sm:mb-0"
@@ -222,9 +234,9 @@ export const Form: FC<Props> = ({question, onSubmit, onDraftSubmit, alert}) => {
> >
Finalizar Finalizar
</Button> </Button>
} )}
</div> </div>
</form> </form>
</FormProvider> </FormProvider>
) );
} };

1
app/javascript/pages/question/Form/steps/FeaturesFromStep/FeaturesFormStep.tsx
View File

@@ -74,6 +74,7 @@ export const FeaturesFormStep: FC = () => {
<input <input
{...register("authorshipType", { required: true })} {...register("authorshipType", { required: true })}
value="OTHER" value="OTHER"
checked={authorship !== "UNIFESO"}
className="my-auto" className="my-auto"
type="radio" type="radio"
id="authorship-third" id="authorship-third"

2
app/javascript/pages/question/List/QuestionsQuery.tsx
View File

@@ -80,6 +80,8 @@ export const QuestionsQuery: FC<Props> = ({ title, where, status }) => {
}) })
} }
console.log(pageInfo)
return ( return (
<QuestionsList <QuestionsList
title={title} title={title}