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

Rendering checkboxes summary as string, when string is provided #310

Merged
merged 1 commit into from
Jul 4, 2022
Merged

Rendering checkboxes summary as string, when string is provided #310

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
108 changes: 55 additions & 53 deletions src/altinn-app-frontend/src/components/summary/SummaryComponentSwitch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ import SummaryBoilerplate from 'src/components/summary/SummaryBoilerplate';
import {
isFileUploadComponent,
isFileUploadWithTagComponent,
isGroupComponent,
isCheckboxesComponent,
} from 'src/utils/formLayout';

export interface ISummaryComponentSwitch {
Expand Down Expand Up @@ -46,67 +48,67 @@ export default function SummaryComponentSwitch({
return null;
}

if (Object.keys(formComponent.dataModelBindings || {}).length === 0) {
if (isFileUploadComponent(formComponent)) {
return (
<>
<SummaryBoilerplate
{...change}
label={label}
hasValidationMessages={hasValidationMessages}
/>
<AttachmentSummaryComponent componentRef={componentRef} />
</>
);
}
if (isFileUploadWithTagComponent(formComponent)) {
return (
<>
<SummaryBoilerplate
{...change}
label={label}
hasValidationMessages={hasValidationMessages}
/>
<AttachmentWithTagSummaryComponent
componentRef={componentRef}
component={formComponent as ISelectionComponentProps}
/>
</>
);
}
}
const hasDataBindings =
Object.keys(formComponent.dataModelBindings || {}).length === 0;

switch (formComponent.type) {
case 'Group':
case 'group': {
return (
<SummaryGroupComponent
{...change}
{...groupProps}
componentRef={componentRef}
/>
);
}
case 'Checkboxes': {
return (
<MultipleChoiceSummary
if (hasDataBindings && isFileUploadComponent(formComponent)) {
return (
<>
<SummaryBoilerplate
{...change}
label={label}
hasValidationMessages={hasValidationMessages}
formData={formData}
readOnlyComponent={(formComponent as ILayoutComponent).readOnly}
/>
);
}
default:
return (
<SingleInputSummary
<AttachmentSummaryComponent componentRef={componentRef} />
</>
);
}

if (hasDataBindings && isFileUploadWithTagComponent(formComponent)) {
return (
<>
<SummaryBoilerplate
{...change}
label={label}
hasValidationMessages={hasValidationMessages}
formData={formData}
readOnlyComponent={(formComponent as ILayoutComponent).readOnly}
/>
);
<AttachmentWithTagSummaryComponent
componentRef={componentRef}
component={formComponent as ISelectionComponentProps}
/>
</>
);
}

if (isGroupComponent(formComponent)) {
return (
<SummaryGroupComponent
{...change}
{...groupProps}
componentRef={componentRef}
/>
);
}

if (isCheckboxesComponent(formComponent) && typeof formData !== 'string') {
return (
<MultipleChoiceSummary
{...change}
label={label}
hasValidationMessages={hasValidationMessages}
formData={formData}
readOnlyComponent={(formComponent as ILayoutComponent).readOnly}
/>
);
}

return (
<SingleInputSummary
{...change}
label={label}
hasValidationMessages={hasValidationMessages}
formData={formData}
readOnlyComponent={(formComponent as ILayoutComponent).readOnly}
/>
);
}
9 changes: 9 additions & 0 deletions src/altinn-app-frontend/src/utils/formLayout.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -468,3 +469,11 @@ export function isDatePickerComponent(
): component is IDatePickerProps & ILayoutComponent {
return component.type.toLowerCase() === 'datepicker';
}

export function isCheckboxesComponent(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add some tests? 😇

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yup, I can do that, but I prefer to do it in a later PR. There are some changes to these functions in the hackaton/dynamics branch which I'd like to port over, and I've thought about possibly changing up some of the typings. The component types are a prime example of a case where discriminated unions works wonders - so with a change in that direction, these functions could be removed altogether, as TypeScript would give us the same functionality out of the box. I'll add it to my list of sabbatical TODOs.. 😉

component: any,
): component is ICheckboxContainerProps & ILayoutComponent {
return (
component && component.type && component.type.toLowerCase() === 'checkboxes'
);
}