Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

kk-yes/no-toCheckbox #117

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

kk-yes/no-toCheckbox #117

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6229bb0
kk-yes/no-toCheckbox
kirtanakrishnan Nov 2, 2023
15164a5
fix lint error
DerekL27 Dec 9, 2023
57b1e83
Merge branch 'master' into kk-yes/no-toCheckbox
DerekL27 Dec 9, 2023
51bb47f
fix package-lock
DerekL27 Dec 9, 2023
40dd7cc
Merge remote-tracking branch 'origin/kk-yes/no-toCheckbox' into kk-ye…
DerekL27 Dec 9, 2023
c8e494d
fix lint error
leahzeisner Mar 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions src/assets/forgotPassword.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,12 @@ a {
color: #D46136;
}

.resetPassword {
color: #D46136;
position: absolute;

}

#forgotPw {
background-color: #D46136;
color: #FFFFFF;
Expand Down
58 changes: 58 additions & 0 deletions src/assets/forgotPassword.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="forgotPassword.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">
</head>


<body>

<div id="sidebar">

</div>

<div id="emailHeader">
<img src="../components/logoBig.svg">
<hr>
</div>

<div id="emailBody">
<p>
Hello! We received a request to change your password for the J-PAL recommendation letter program.
</p>

<p>
If you did not make this request, you can ignore this email.
</p>

<button>
Reset Password
<a href="resetPassword"></a>
</button>

<p>
Thank you,
<br>[asdf]
</p>
</div>
</div>


</body>













</html>
59 changes: 59 additions & 0 deletions src/components/form/CheckboxField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import React from 'react';
import { Field, FieldProps } from 'formik';
import { Checkbox, FormControl, FormErrorMessage, FormLabel, Text, Stack } from '@chakra-ui/react';

interface CheckboxOption {
label: string;
value: string;
}

interface CheckboxFieldProps {
fieldName: string;
displayName: string;
isRequired: boolean;
options: CheckboxOption[];
defaultValue?: string;
}

const CheckboxField: React.FC<CheckboxFieldProps> = ({
fieldName,
displayName,
isRequired,
options,
}) => (
<Field
name={fieldName}
validate={isRequired && ((value: any) => (value ? undefined : 'Required'))}

Check warning on line 26 in src/components/form/CheckboxField.tsx

View workflow job for this annotation

GitHub Actions / lint-format-build 

Unexpected any. Specify a different type
>
{({ field, form }: FieldProps<string>) => (
<FormControl
isInvalid={Boolean(
form.errors[fieldName] && (form.touched[fieldName] || form.submitCount > 0),
)}
>
<FormLabel htmlFor={fieldName} aria-label={displayName || fieldName}>
{displayName || fieldName}
</FormLabel>

<Stack direction="column" spacing={2}>
{options.map(({ label, value }) => (
<Checkbox
key={value}
isChecked={field.value === value}
onChange={() => {
form.setFieldValue(fieldName, field.value === value ? '' : value);
}}
data-testid={`${fieldName}-${value}`}
>
<Text fontSize={{ base: 'xs', sm: 'xs', md: 'sm' }}>{label}</Text>
</Checkbox>
))}
</Stack>

<FormErrorMessage>{form.errors[fieldName]}</FormErrorMessage>
</FormControl>
)}
</Field>
);

export default CheckboxField;
65 changes: 55 additions & 10 deletions src/components/survey/SurveyForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import React from 'react';
import { Question, Response } from '../../api/dtos/survey-assignment.dto';
import Form, { FormValues } from '../form/Form';
import MultipleChoiceField from '../form/MultipleChoiceField';
import CheckboxField from '../form/CheckboxField';

/**
* Makes a string safe for use with Formik by removing all periods.
Expand Down Expand Up @@ -39,7 +40,38 @@ function invalidResponses(
return invalid;
}

/* Converting yes/no questions to checkboxes */
function createCheckboxQuestion(questions: Question[]): Question {
const checkboxQuestion: Question = {
question: 'Check off the box if you agree with the question',
options: [],
};

questions.forEach((question) => {
if (
question.options.length === 2 &&
question.options.includes('Yes') &&
question.options.includes('No')
) {
// delete the yes/no question
questions.splice(questions.indexOf(question), 1);

// add title of deleted question to option in checkboxQuestion
checkboxQuestion.options.push(question.question);
}
});

return checkboxQuestion;
}

/* Checks if a question is a checkbox question */
function isCheckboxQuestion(question: Question): boolean {
return question.question === 'Check off the box if you agree with the question';
}

function formValuesToResponses(questions: Question[], values: FormValues): Response[] {
const checkboxQuestion = createCheckboxQuestion(questions);
questions.push(checkboxQuestion);
const responses = Object.entries(values).map(([formikSafeQuestion, selectedOption]) => {
const question = fromFormikSafeFieldName(formikSafeQuestion);
if (selectedOption === undefined) {
Expand Down Expand Up @@ -125,16 +157,29 @@ const SurveyForm: React.FC<SurveyFormProps> = ({
width="full"
key={question.question}
>
<MultipleChoiceField
displayName={pupa(question.question, { subject: youthName.split(' ')[0] })}
fieldName={toFormikSafeFieldName(question.question)}
options={question.options.map((option) => ({ label: option, value: option }))}
isRequired
defaultValue={
savedResponses &&
savedResponses.find((r) => r.question === question.question)?.selectedOption
}
/>
{isCheckboxQuestion(question) ? (
<CheckboxField
fieldName={question.question}
displayName={question.question}
options={question.options.map((option) => ({ label: option, value: option }))}
isRequired
defaultValue={
savedResponses &&
savedResponses.find((r) => r.question === question.question)?.selectedOption
}
/>
) : (
<MultipleChoiceField
displayName={pupa(question.question, { subject: youthName.split(' ')[0] })}
fieldName={toFormikSafeFieldName(question.question)}
options={question.options.map((option) => ({ label: option, value: option }))}
isRequired
defaultValue={
savedResponses &&
savedResponses.find((r) => r.question === question.question)?.selectedOption
}
/>
)}
</Box>
))}
</VStack>
Expand Down
Loading