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

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

@@ -1,16 +1,20 @@
import React, {FC, useState} from 'react'
import {FieldValue, FieldValues, useForm} from 'react-hook-form';
import {ExclamationCircleIcon} from '@heroicons/react/outline';
import {useHistory} from "react-router-dom";
import {useDispatch, useSelector} from "react-redux";
import {gql} from '@apollo/client';
import React, { FC, useEffect, useState } from "react";
import { FieldValue, FieldValues, useForm } from "react-hook-form";
import { ExclamationCircleIcon } from "@heroicons/react/outline";
import { useHistory } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { gql } from "@apollo/client";
import {Question, QuestionCreateInput, QuestionStatus} from '../../../__generated__/graphql-schema';
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 {
Question,
QuestionCreateInput,
QuestionStatus,
} from "../../../__generated__/graphql-schema";
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 {
EnunciationFormStep,
EnunciationFragment,
@@ -20,7 +24,7 @@ import {
DistractorsFragment,
FeaturesFormStep,
FeaturesFragment,
} from './steps'
} from "./steps";
import {
Button,
Dialog,
@@ -28,113 +32,127 @@ import {
AlertV2,
List,
ListItem,
} from '../../../components';
import {QuestionRoutePaths} from "../../../routes";
import {turnOff, turnOn} from "../../../services/store/unsavedChanges";
} from "../../../components";
import { QuestionRoutePaths } from "../../../routes";
import { turnOff, turnOn } from "../../../services/store/unsavedChanges";
export const FormFragments = gql`
${EnunciationFragment}
${AnswerFragment}
${DistractorsFragment}
${FeaturesFragment}
fragment FormFields on Question {
...EnunciationFields
...AnswerFields
...DistractorsFields
...FeaturesFields
status
}
`
${EnunciationFragment}
${AnswerFragment}
${DistractorsFragment}
${FeaturesFragment}
fragment FormFields on Question {
...EnunciationFields
...AnswerFields
...DistractorsFields
...FeaturesFields
status
}
`;
type Props = {
question?: Question
onSubmit?: (inputs: any) => void
onDraftSubmit?: (inputs: any) => void
alert?: AlertV2Props
}
question?: Question;
onSubmit?: (inputs: any) => void;
onDraftSubmit?: (inputs: any) => void;
alert?: AlertV2Props;
};
export const Form: FC<Props> = ({question, onSubmit, onDraftSubmit, alert}) => {
const [validationErrors, setValidationErrors] = useState<string[]>([])
const [confirmSaveDialogIsOpen, setConfirmFinishDialogIsOpen] = useState(false)
const [leaveDialogIsOpen, setLeaveDialogIsOpen] = useState(false)
export const Form: FC<Props> = ({
question,
onSubmit,
onDraftSubmit,
alert,
}) => {
const [validationErrors, setValidationErrors] = useState<string[]>([]);
const [confirmSaveDialogIsOpen, setConfirmFinishDialogIsOpen] =
useState(false);
const [leaveDialogIsOpen, setLeaveDialogIsOpen] = useState(false);
const formHooks = useForm<FieldValues>({
defaultValues: {
authorship: question?.authorship ?? 'UNIFESO',
authorshipType: question?.authorship === 'UNIFESO' ? 'UNIFESO' : 'OTHER',
authorship: question?.authorship ?? "UNIFESO",
authorshipType: question?.authorship === "UNIFESO" ? "UNIFESO" : (question?.authorship ?? "OTHER"),
authorshipYear: new Date().getFullYear().toString(),
difficulty: question?.difficulty,
checkType: question?.checkType,
bloomTaxonomy: question?.bloomTaxonomy,
intention: question?.intention,
},
});
const { getValues, reset, formState } = formHooks;
const [currentStep, setCurrentStep] = useState(0);
const unsavedChanges = useSelector(
(state: RootState) => state.unsavedChanges
);
const history = useHistory();
const dispatch = useDispatch();
const minStep = 0;
const maxStep = 3;
const onFirstStep = currentStep === minStep;
const onLastStep = currentStep === maxStep;
useEffect(() => {
if (formState.isDirty) {
dispatch(turnOn());
}
})
const {register, control, setValue, getValues, reset, formState, resetField} = formHooks
const [currentStep, setCurrentStep] = useState(0)
const unsavedChanges = useSelector((state: RootState) => state.unsavedChanges)
const history = useHistory()
const dispatch = useDispatch()
const minStep = 0
const maxStep = 3
const onFirstStep = currentStep === minStep
const onLastStep = currentStep === maxStep
if (formState.isDirty) {
dispatch(turnOn())
}
}, [formState.isDirty, dispatch, turnOn]);
const handleNextStep = () => {
if (onLastStep) return
if (onLastStep) return;
setCurrentStep(currentStep + 1)
}
setCurrentStep(currentStep + 1);
};
const handlePreviousStep = () => {
if (onFirstStep) return
if (onFirstStep) return;
setCurrentStep(currentStep - 1)
}
setCurrentStep(currentStep - 1);
};
const getFormattedInputValues = () => formatInput(getValues())
const getFormattedInputValues = () => formatInput(getValues());
const handleCancel = () => {
if (unsavedChanges && !leaveDialogIsOpen) {
setLeaveDialogIsOpen(true)
setLeaveDialogIsOpen(true);
} else {
history.push(QuestionRoutePaths.index)
history.push(QuestionRoutePaths.index);
}
}
};
const handleDraftSave = () => {
if (onDraftSubmit) {
onDraftSubmit({...getFormattedInputValues(), status: QuestionStatus.Draft} as QuestionCreateInput)
reset(getValues())
dispatch(turnOff())
onDraftSubmit({
...getFormattedInputValues(),
status: QuestionStatus.Draft,
} as QuestionCreateInput);
reset(getValues());
dispatch(turnOff());
}
}
};
const handleSave = () => {
const inputs = {...getFormattedInputValues(), status: QuestionStatus.WaitingReview} as QuestionCreateInput
const errors = validateQuestionInputs(inputs)
const inputs = {
...getFormattedInputValues(),
status: QuestionStatus.WaitingReview,
} as QuestionCreateInput;
const errors = validateQuestionInputs(inputs);
setConfirmFinishDialogIsOpen(false)
setConfirmFinishDialogIsOpen(false);
if (onSubmit && !errors.length) {
dispatch(turnOff())
onSubmit(inputs)
dispatch(turnOff());
onSubmit(inputs);
} else {
setValidationErrors(errors)
setValidationErrors(errors);
}
reset(getValues())
}
reset(getValues());
};
return (
<FormProvider props={{question, hooks: formHooks }}>
{alert && (
<AlertV2 severity={alert.severity} text={alert.text}></AlertV2>
)}
<FormProvider props={{ question, hooks: formHooks }}>
{alert && <AlertV2 severity={alert.severity} text={alert.text}></AlertV2>}
<Dialog
isOpen={leaveDialogIsOpen}
setIsOpen={setLeaveDialogIsOpen}
@@ -161,7 +179,7 @@ export const Form: FC<Props> = ({question, onSubmit, onDraftSubmit, alert}) => {
{validationErrors?.map((errorMessage) => (
<ListItem
key={errorMessage}
icon={<ExclamationCircleIcon className="w-5 text-gray-800"/>}
icon={<ExclamationCircleIcon className="w-5 text-gray-800" />}
text={errorMessage}
/>
))}
@@ -170,30 +188,23 @@ export const Form: FC<Props> = ({question, onSubmit, onDraftSubmit, alert}) => {
}
/>
<form className="m-auto max-w-screen-md">
<SteppedForm
currentStep={currentStep}
className="mb-3"
>
<SteppedForm currentStep={currentStep} className="mb-3">
<Step step={0}>
<EnunciationFormStep/>
<EnunciationFormStep />
</Step>
<Step step={1}>
<AnswerFormStep/>
<AnswerFormStep />
</Step>
<Step step={2}>
<DistractorsFormStep/>
<DistractorsFormStep />
</Step>
<Step step={3}>
<FeaturesFormStep/>
<FeaturesFormStep />
</Step>
</SteppedForm>
<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">
<Button
className={"mb-3 sm:mb-0"}
onClick={handleCancel}
>
<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">
<Button className={"mb-3 sm:mb-0"} onClick={handleCancel}>
Cancelar
</Button>
<Button
@@ -202,11 +213,12 @@ export const Form: FC<Props> = ({question, onSubmit, onDraftSubmit, alert}) => {
>
Retornar
</Button>
{(question?.status === QuestionStatus.Draft || question?.status === undefined) &&
<Button className={"mb-3 sm:mb-0"} onClick={handleDraftSave}>
{(question?.status === QuestionStatus.Draft ||
question?.status === undefined) && (
<Button className={"mb-3 sm:mb-0"} onClick={handleDraftSave}>
Salvar Rascunho
</Button>
}
</Button>
)}
<Button
type="primary"
className={`mb-3 sm:mb-0 ${onLastStep ? "hidden" : ""}`}
@@ -214,17 +226,17 @@ export const Form: FC<Props> = ({question, onSubmit, onDraftSubmit, alert}) => {
>
Prosseguir
</Button>
{onLastStep &&
<Button
{onLastStep && (
<Button
type="primary"
className="mb-3 sm:mb-0"
onClick={handleSave}
>
>
Finalizar
</Button>
}
</Button>
)}
</div>
</form>
</FormProvider>
)
}
);
};

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

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