diff --git a/src/components/questionnaire/questionnaire-question.css b/src/components/questionnaire/questionnaire-question.css index 8071d11d3..75ea0a3e0 100644 --- a/src/components/questionnaire/questionnaire-question.css +++ b/src/components/questionnaire/questionnaire-question.css @@ -19,24 +19,26 @@ .questionnaire-question__form .questionnaire-question__boolean-input { margin: var(--input-label-gap) 0 0; } + .questionnaire-question__form .questionnaire-question__single-choice-input, .questionnaire-question__form .questionnaire-question__multiple-choice-input { margin: var(--input-label-gap) 0 calc(var(--padding-small) * (-1)); } + .questionnaire-question__form .questionnaire-question__date-input .fieldset__row { margin: calc(var(--padding-small) * (-1)) 0; } + .questionnaire-question__form .questionnaire-question__date-input .fieldset__item { margin: var(--padding-small); } + .questionnaire-question__form .questionnaire-question__date-input .date-input-datepicker { margin: var(--padding-medium) auto; width: 24px; } -.questionnaire-question__form - .questionnaire-question__single-choice-dropdown-input - [id^='autocomplete-option-'] { +.questionnaire-question__form .questionnaire-question__single-choice-dropdown-input [id^='autocomplete-option-'] { cursor: pointer; } @@ -55,3 +57,12 @@ margin: var(--padding-small) 0 var(--padding-small) var(--padding-medium); } } + +.disabled>input[type='checkbox'].sc-d4l-checkbox+label.sc-d4l-checkbox { + cursor: not-allowed; + color: var(--color-primary-lightest); +} + +.disabled>input[type='checkbox'].sc-d4l-checkbox+label.sc-d4l-checkbox::before { + border-color: var(--color-primary-lightest); +} \ No newline at end of file diff --git a/src/components/questionnaire/questions/multiple-choice-question.tsx b/src/components/questionnaire/questions/multiple-choice-question.tsx index b968d3775..e58bd0122 100644 --- a/src/components/questionnaire/questions/multiple-choice-question.tsx +++ b/src/components/questionnaire/questions/multiple-choice-question.tsx @@ -1,5 +1,6 @@ import { h } from '@stencil/core'; import { QuestionnaireQuestionComponentProps } from './types'; +import stores from 'stores'; export const MultipleChoiceQuestion = ({ question, @@ -8,25 +9,39 @@ export const MultipleChoiceQuestion = ({ }: QuestionnaireQuestionComponentProps) => { return (
- {question.availableOptions.filter(Boolean).map((option, index) => ( -

- { - const update = option.value; - const newSelection = answer.includes(update) - ? answer.filter((value) => value !== update) - : [...answer, update]; - onChange(question.linkId, newSelection); - }} - /> -

- ))} + {question.availableOptions.filter(Boolean).map((option, index) => { + // checkbox is disabled if maximum number of allowed choices is reached + // and answer is not contained in selected choices + const isDisabled = question.extension.some( + (e) => + e.url.includes('maxOccurs') && e.valueInteger == answer.length && !answer.includes(option.value) + ); + return ( +

+ { + if (isDisabled) { + event.preventDefault(); + } else { + const update = option.value; + const newSelection = answer.includes(update) + ? answer.filter((value) => value !== update) + : [...answer, update]; + onChange(question.linkId, newSelection); + } + }} + /> +

+ ); + })}
); }; diff --git a/src/config/translations/de.ts b/src/config/translations/de.ts index 43e7a99d0..b4193ce57 100644 --- a/src/config/translations/de.ts +++ b/src/config/translations/de.ts @@ -87,6 +87,8 @@ export default { infotext: 'Dieser Text wird angezeigt, wenn der Fragebogen keine Angaben zum Zweck enthält.', question: 'Frage {{ number }}', question_type_unsupported: 'Fragen vom Typ "{{ type }}" werden derzeit leider nicht unterstützt!', + maxAnswersReached: + 'Maximale Anzahl Antworten erreicht. Andere Antwort abwählen, um diese Antwort auszuwählen.', success: { headline: 'Vielen Dank!', infotext: 'Vielen Dank für Ihren Beitrag!', diff --git a/src/config/translations/en.ts b/src/config/translations/en.ts index df304b5e3..f99fe7ded 100644 --- a/src/config/translations/en.ts +++ b/src/config/translations/en.ts @@ -83,6 +83,8 @@ export default { infotext: 'This text is shown when the questionnaire does not contain information on its purpose.', question: 'Question {{ number }}', question_type_unsupported: 'Questions of type "{{ type }}" are not supported at the moment!', + maxAnswersReached: + 'Maximum number of answers reached. Please deselect other choice to select this choice.', success: { headline: 'Success', infotext: 'Thank you for your contribution!',