From e3d7ca91a61f3334dac1f7c61da91c90f3da3637 Mon Sep 17 00:00:00 2001 From: selankon Date: Wed, 6 Nov 2024 08:33:54 +0100 Subject: [PATCH 1/2] Implement min choices validation --- .../src/components/Election/Questions/Fields.tsx | 13 ++++++++++++- packages/chakra-components/src/i18n/locales.ts | 1 + 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/packages/chakra-components/src/components/Election/Questions/Fields.tsx b/packages/chakra-components/src/components/Election/Questions/Fields.tsx index 946f436f..795b44cc 100644 --- a/packages/chakra-components/src/components/Election/Questions/Fields.tsx +++ b/packages/chakra-components/src/components/Election/Questions/Fields.tsx @@ -78,8 +78,9 @@ export const MultiChoice = ({ index, question }: QuestionProps) => { } const choices = [...question.choices] - // Put can abstain on a separated variable to avoid typing errors on validation function + // Put can abstain and minChoices on a separated variable to avoid typing errors on validation function const canAbstain = election.resultsType.properties.canAbstain + const minChoices = election.resultsType?.properties?.numChoices?.min return ( @@ -91,6 +92,15 @@ export const MultiChoice = ({ index, question }: QuestionProps) => { // allow a single selection if is an abstain if (canAbstain && v && v.length < election.voteType.maxCount!) return true + // If there are min choices, validate that the user has selected at least that amount + if (minChoices) { + if (v && v.length >= minChoices && v.length <= election.voteType.maxCount) { + return true + } + return localize('validation.min_choices_count', { count: minChoices }) + } + + // If no minChoices configured, selected choices must be the maxCount return ( (v && v.length === election.voteType.maxCount) || localize('validation.choices_count', { count: election.voteType.maxCount }) @@ -123,6 +133,7 @@ export const MultiChoice = ({ index, question }: QuestionProps) => { if (maxSelected) return onChange([...values, e.target.value]) } + trigger(index) // Manually trigger validation }} > diff --git a/packages/chakra-components/src/i18n/locales.ts b/packages/chakra-components/src/i18n/locales.ts index b7ffb091..cedd4a92 100644 --- a/packages/chakra-components/src/i18n/locales.ts +++ b/packages/chakra-components/src/i18n/locales.ts @@ -92,6 +92,7 @@ export const locales = { required: 'This field is required', min_length: 'This field must be at least {{ min }} characters long', choices_count: 'Select {{ count }} choices', + min_choices_count: 'Select minimum of {{ count }} choices', at_least_one: 'You must select at least one option', }, // questions and vote button From 2cdf6a22ea84da1afc5e56d5cdb441cc768996fc Mon Sep 17 00:00:00 2001 From: selankon Date: Fri, 15 Nov 2024 08:16:29 -0300 Subject: [PATCH 2/2] Use correct translation --- .../src/components/Election/Questions/Fields.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/chakra-components/src/components/Election/Questions/Fields.tsx b/packages/chakra-components/src/components/Election/Questions/Fields.tsx index 795b44cc..ec7a8889 100644 --- a/packages/chakra-components/src/components/Election/Questions/Fields.tsx +++ b/packages/chakra-components/src/components/Election/Questions/Fields.tsx @@ -97,6 +97,7 @@ export const MultiChoice = ({ index, question }: QuestionProps) => { if (v && v.length >= minChoices && v.length <= election.voteType.maxCount) { return true } + if (minChoices === 1) return localize('validation.at_least_one') return localize('validation.min_choices_count', { count: minChoices }) }