diff --git a/src/altinn-app-frontend/src/components/summary/SummaryComponentSwitch.tsx b/src/altinn-app-frontend/src/components/summary/SummaryComponentSwitch.tsx index 69f2e638a3..a17319345c 100644 --- a/src/altinn-app-frontend/src/components/summary/SummaryComponentSwitch.tsx +++ b/src/altinn-app-frontend/src/components/summary/SummaryComponentSwitch.tsx @@ -13,6 +13,8 @@ import SummaryBoilerplate from 'src/components/summary/SummaryBoilerplate'; import { isFileUploadComponent, isFileUploadWithTagComponent, + isGroupComponent, + isCheckboxesComponent, } from 'src/utils/formLayout'; export interface ISummaryComponentSwitch { @@ -46,67 +48,67 @@ export default function SummaryComponentSwitch({ return null; } - if (Object.keys(formComponent.dataModelBindings || {}).length === 0) { - if (isFileUploadComponent(formComponent)) { - return ( - <> - - - - ); - } - if (isFileUploadWithTagComponent(formComponent)) { - return ( - <> - - - - ); - } - } + const hasDataBindings = + Object.keys(formComponent.dataModelBindings || {}).length === 0; - switch (formComponent.type) { - case 'Group': - case 'group': { - return ( - - ); - } - case 'Checkboxes': { - return ( - + - ); - } - default: - return ( - + + ); + } + + if (hasDataBindings && isFileUploadWithTagComponent(formComponent)) { + return ( + <> + - ); + + + ); + } + + if (isGroupComponent(formComponent)) { + return ( + + ); } + + if (isCheckboxesComponent(formComponent) && typeof formData !== 'string') { + return ( + + ); + } + + return ( + + ); } diff --git a/src/altinn-app-frontend/src/utils/formLayout.ts b/src/altinn-app-frontend/src/utils/formLayout.ts index 9bf4bbdbd5..cd0f5b4161 100644 --- a/src/altinn-app-frontend/src/utils/formLayout.ts +++ b/src/altinn-app-frontend/src/utils/formLayout.ts @@ -18,6 +18,7 @@ import type { ILayoutGroup, } from '../features/form/layout'; import type { IDatePickerProps } from 'src/components/base/DatepickerComponent'; +import type { ICheckboxContainerProps } from 'src/components/base/CheckboxesContainerComponent'; interface SplitKey { baseComponentId: string; @@ -472,3 +473,11 @@ export function isDatePickerComponent( ): component is IDatePickerProps & ILayoutComponent { return component.type.toLowerCase() === 'datepicker'; } + +export function isCheckboxesComponent( + component: any, +): component is ICheckboxContainerProps & ILayoutComponent { + return ( + component && component.type && component.type.toLowerCase() === 'checkboxes' + ); +}