From dca747bad98f4d472c821d507bfb6349dab0e4ea Mon Sep 17 00:00:00 2001 From: avenmia Date: Fri, 19 May 2023 12:20:39 -1000 Subject: [PATCH] Avenmia/add workshop dropdown (#125) * Adding dropdown option for the workshop * Adding second dropdown * Fixing blank answer issue and refactoring dropdown * Refactoring dropdown * Fixing dropdown enabled and disabled * Fixing dropdown styling * Updating delimiter * Removing extra console.log * Fixing enabled and disabled for multiselect andclearing text --- .../migration.sql | 2 +- src/components/survey/demographicssurvey.tsx | 13 ++- src/components/survey/dropdownAnswers.tsx | 95 +++++++++++++++++++ src/components/survey/multiSelectAnswers.tsx | 28 ++++-- src/components/survey/surveyquestion.tsx | 9 ++ 5 files changed, 137 insertions(+), 10 deletions(-) create mode 100644 src/components/survey/dropdownAnswers.tsx diff --git a/prisma/migrations/20230312022837_initial_migration/migration.sql b/prisma/migrations/20230312022837_initial_migration/migration.sql index fa45259..6116b84 100644 --- a/prisma/migrations/20230312022837_initial_migration/migration.sql +++ b/prisma/migrations/20230312022837_initial_migration/migration.sql @@ -221,7 +221,7 @@ VALUES '16', 'What is your workshop location? (Select one answer)', 16, - 'option' + 'dropdown' ); INSERT INTO diff --git a/src/components/survey/demographicssurvey.tsx b/src/components/survey/demographicssurvey.tsx index 6d56190..d9dc434 100644 --- a/src/components/survey/demographicssurvey.tsx +++ b/src/components/survey/demographicssurvey.tsx @@ -16,13 +16,20 @@ export interface SurveyAnswer { } export type QuestionDirection = "Prev" | "Next"; -export type QuestionType = "option" | "multiSelect" | "text" | "number"; +export type QuestionType = + | "option" + | "multiSelect" + | "text" + | "number" + | "dropdown"; export type AnswerType = "option" | "text" | "number" | "optionText"; export interface DemographicSurveyInfo { questionNumber: number; totalQuestions: number; } +export const MULTI_ANSWER_DELIMITER = "---"; + export default function DemographicsSurvey() { const [currentQuestion, setCurrentQuestion] = useState(0); const [surveyCompleted, setSurveyCompleted] = useState(false); @@ -86,8 +93,8 @@ export default function DemographicsSurvey() { } const questionId = surveyData[currentQuestion]?.questionId; let answers = [answer]; - if (answer?.includes(";")) { - answers = answer.split(";"); + if (answer?.includes(MULTI_ANSWER_DELIMITER)) { + answers = answer.split(MULTI_ANSWER_DELIMITER).filter((a) => a !== ""); } // TODO: Fix these conditionals diff --git a/src/components/survey/dropdownAnswers.tsx b/src/components/survey/dropdownAnswers.tsx new file mode 100644 index 0000000..e548db9 --- /dev/null +++ b/src/components/survey/dropdownAnswers.tsx @@ -0,0 +1,95 @@ +import { useEffect, useMemo, useState } from "react"; +import type { SurveyAnswer } from "./demographicssurvey"; + +interface DropdownAnswersProps { + answers: SurveyAnswer[]; + updateCurrentAnswer: (val: string) => void; + setDisabled: (val: boolean) => void; +} + +export default function DropdownAnswers({ + answers, + updateCurrentAnswer, + setDisabled, +}: DropdownAnswersProps) { + const uniqueCounties = useMemo(() => { + const counties = answers.map((a) => a.answer.split("-")[0]); + return ["--", ...new Set(counties)] as string[]; + }, [answers]); + + const [county, setCounty] = useState(uniqueCounties[0] ?? ""); + + const getFilteredWorkshopsByCounty = (val: string) => { + const filteredWorkshops: string[] = answers + .map((a) => a.answer) + .filter((c) => c.includes(val)); + return [ + "--", + ...(filteredWorkshops.map((c) => c.split("-")[1]) as string[]), + ]; + }; + + const [countyWorkshops, setCountyWorkshops] = useState( + getFilteredWorkshopsByCounty(uniqueCounties[0] ?? "") + ); + + useEffect(() => { + if (county === "--") { + setDisabled(true); + } + setCountyWorkshops(getFilteredWorkshopsByCounty(county)); + }, [county, answers]); + + const handleChange = (val: string) => { + updateCurrentAnswer(`${county}-${val}`); + if (county !== "--" && val !== "--") { + setDisabled(false); + } + if (county === "--" || val === "--") { + setDisabled(true); + } + }; + + return ( + <> +
+ <> + + + + {countyWorkshops.length > 0 && ( + <> + + + + )} +
+ + ); +} diff --git a/src/components/survey/multiSelectAnswers.tsx b/src/components/survey/multiSelectAnswers.tsx index 22d267d..8fd137f 100644 --- a/src/components/survey/multiSelectAnswers.tsx +++ b/src/components/survey/multiSelectAnswers.tsx @@ -1,5 +1,8 @@ import { useRef, useState } from "react"; -import type { SurveyAnswer } from "./demographicssurvey"; +import { + MULTI_ANSWER_DELIMITER, + type SurveyAnswer, +} from "./demographicssurvey"; interface MultiSelectAnswersProps { answers: SurveyAnswer[]; @@ -26,9 +29,13 @@ export default function MultiSelectAnswers({ const checkedTextAnswers = Array.from(checkboxesText).filter( (cb) => (cb as HTMLInputElement).checked ); + const uncheckedTextAnswers = Array.from(checkboxesText).filter( + (cb) => !(cb as HTMLInputElement).checked + ); const values = checkedAnswers .map((ca) => (ca as HTMLInputElement).value) - .join(";"); + .join(MULTI_ANSWER_DELIMITER); + const textValues = checkedTextAnswers.map( (ca) => (ca as HTMLInputElement).value + @@ -38,13 +45,23 @@ export default function MultiSelectAnswers({ (ca) => (ca as HTMLInputElement).value ); setDisabledInput(answerValues); - const textValuesConcat = textValues.join(";"); + const textValuesConcat = textValues.join(MULTI_ANSWER_DELIMITER); if (values.length > 0) { - updateCurrentAnswer(values + ";" + textValuesConcat); + updateCurrentAnswer(values + MULTI_ANSWER_DELIMITER + textValuesConcat); } else { updateCurrentAnswer(textValuesConcat); } - + if (textValuesConcat.length === 0) { + // clear text boxes + uncheckedTextAnswers.forEach((ca) => { + (ca.nextElementSibling?.children[0] as HTMLInputElement).value = ""; + return; + }); + } + if (values.length === 0 && textValuesConcat.length === 0) { + setDisabled(true); + return; + } setDisabled(false); }; @@ -64,7 +81,6 @@ export default function MultiSelectAnswers({ ); }; - console.log("Disabled inputs are:", disabledInput); const checkBoxText = (a: SurveyAnswer, index: number) => { return ( <> diff --git a/src/components/survey/surveyquestion.tsx b/src/components/survey/surveyquestion.tsx index 8365552..0a7974f 100644 --- a/src/components/survey/surveyquestion.tsx +++ b/src/components/survey/surveyquestion.tsx @@ -9,6 +9,7 @@ import type { import RadioButtonAnswers from "./radioButtonAnswers"; import MultiSelectAnswers from "./multiSelectAnswers"; import TextAnswer from "./textAnswers"; +import DropdownAnswers from "./dropdownAnswers"; interface SurveyQuestionProps { surveyInfo: DemographicSurveyInfo; @@ -57,6 +58,14 @@ export default function SurveyQuestion({ number={questionType === "number"} /> ); + case "dropdown": + return ( + + ); default: return null; }