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

Added save and open next button to repeating groups #526

Merged
merged 3 commits into from
Oct 12, 2022
Merged

Added save and open next button to repeating groups #526

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
531b6bf
Added save and open next button to repeating groups
bjosttveit Oct 10, 2022
b34500b
Update src/shared/src/language/texts/nn.ts
bjosttveit Oct 11, 2022
62b9749
rename save to forceValidation
bjosttveit Oct 11, 2022
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
16 changes: 10 additions & 6 deletions src/altinn-app-frontend/src/features/form/containers/GroupContainer.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,7 +195,9 @@ describe('GroupContainer', () => {
const user = userEvent.setup();
const store = render({ container: mockContainerInEditModeWithTrigger });

const editButton = screen.getAllByText('Rediger')[0].closest('button');
const editButton = screen.getAllByRole('button', {
name: /Lagre og lukk/i,
})[0];
await user.click(editButton);

const mockDispatchedAction = {
Expand All @@ -219,7 +221,9 @@ describe('GroupContainer', () => {
const store = render({ container: mockContainerInEditMode });
const user = userEvent.setup();

const editButton = screen.getAllByText('Rediger')[0].closest('button');
const editButton = screen.getAllByRole('button', {
name: /Lagre og lukk/i,
})[0];
await user.click(editButton);

const mockDispatchedAction = {
Expand All @@ -244,9 +248,9 @@ describe('GroupContainer', () => {
const store = render({ container: mockContainerInEditModeWithTrigger });
const user = userEvent.setup();

const editButton = screen.getByRole('button', {
const editButton = screen.getAllByRole('button', {
name: /Lagre og lukk/i,
});
})[1];
await user.click(editButton);

const mockDispatchedAction = {
Expand All @@ -270,9 +274,9 @@ describe('GroupContainer', () => {
const store = render({ container: mockContainerInEditMode });
const user = userEvent.setup();

const editButton = screen.getByRole('button', {
const editButton = screen.getAllByRole('button', {
name: /Lagre og lukk/i,
});
})[1];
await user.click(editButton);

const mockDispatchedAction = {
Expand Down
9 changes: 7 additions & 2 deletions src/altinn-app-frontend/src/features/form/containers/GroupContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -239,10 +239,11 @@ export function GroupContainer({
);
};

const setEditIndex = (index: number) => {
const setEditIndex = (index: number, forceValidation?: boolean) => {
// if edit button has been clicked while edit container is open, we trigger validations if present in triggers
const validate: boolean =
index === -1 && !!container.triggers?.includes(Triggers.Validation);
(index === -1 || forceValidation) &&
!!container.triggers?.includes(Triggers.Validation);
dispatch(
FormLayoutActions.updateRepeatingGroupsEditIndex({
group: id,
Expand Down Expand Up @@ -340,6 +341,8 @@ export function GroupContainer({
<RepeatingGroupsEditContainer
container={container}
editIndex={editIndex}
setEditIndex={setEditIndex}
repeatingGroupIndex={repeatingGroupIndex}
id={id}
language={language}
textResources={textResources}
Expand All @@ -349,6 +352,7 @@ export function GroupContainer({
hideSaveButton={container.edit?.saveButton === false}
multiPageIndex={multiPageIndex}
setMultiPageIndex={setMultiPageIndex}
showSaveAndNextButton={container.edit?.saveAndNextButton === true}
/>
)}
{container.edit?.mode === 'showAll' &&
Expand All @@ -368,6 +372,7 @@ export function GroupContainer({
<RepeatingGroupsEditContainer
key={index}
editIndex={index}
repeatingGroupIndex={repeatingGroupIndex}
container={container}
id={id}
language={language}
Expand Down
21 changes: 16 additions & 5 deletions src/altinn-app-frontend/src/features/form/containers/RepeatingGroupTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ export interface IRepeatingGroupTableProps {
layout: ILayout;
validations: IValidations;
editIndex: number;
setEditIndex: (index: number) => void;
setEditIndex: (index: number, forceValidation?: boolean) => void;
onClickRemove: (groupIndex: number) => void;
setMultiPageIndex?: (index: number) => void;
multiPageIndex?: number;
Expand Down Expand Up @@ -210,7 +210,9 @@ function getEditButtonText(
);
}

return getLanguageFromKey('general.edit_alt', language);
return isEditing
? getLanguageFromKey('general.save_and_close', language)
: getLanguageFromKey('general.edit_alt', language);
}

export function RepeatingGroupTable({
Expand Down Expand Up @@ -347,6 +349,8 @@ export function RepeatingGroupTable({
className={classes.editContainerInTable}
container={container}
editIndex={editIndex}
setEditIndex={setEditIndex}
repeatingGroupIndex={repeatingGroupIndex}
id={id}
language={language}
textResources={textResources}
Expand All @@ -356,6 +360,7 @@ export function RepeatingGroupTable({
hideSaveButton={container.edit?.saveButton === false}
multiPageIndex={multiPageIndex}
setMultiPageIndex={setMultiPageIndex}
showSaveAndNextButton={container.edit?.saveAndNextButton === true}
/>
)
);
Expand Down Expand Up @@ -384,7 +389,9 @@ export function RepeatingGroupTable({
{getTextResource(title, textResources)}
</TableCell>
))}
<TableCell style={{ width: '110px', padding: 0 }}>
<TableCell
style={{ width: '150px', padding: 0, paddingRight: '10px' }}
>
<span className={classes.visuallyHidden}>
{getLanguageFromKey('general.edit', language)}
</span>
Expand Down Expand Up @@ -463,8 +470,12 @@ export function RepeatingGroupTable({
);
})}
<TableCell
align='left'
style={{ width: '110px', padding: 0 }}
align='right'
style={{
width: '150px',
padding: 0,
paddingRight: '10px',
}}
key={`edit-${index}`}
>
<IconButton
Expand Down
16 changes: 16 additions & 0 deletions src/altinn-app-frontend/src/features/form/containers/RepeatingGroupsEditContainer.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ describe('RepeatingGroupsEditContainer', () => {
delete: 'Delete',
edit_alt: 'Edit',
save_and_close: 'Save and close',
save_and_next: 'Save and open next',
},
};
const textResources: ITextResource[] = [
Expand Down Expand Up @@ -115,6 +116,19 @@ describe('RepeatingGroupsEditContainer', () => {
expect(setMultiPageIndex).toHaveBeenCalledTimes(1);
});

it('calls setEditIndex when save and open next is pressed when edit.saveAndNextButton is true', async () => {
const setEditIndex = jest.fn();
const setMultiPageIndex = jest.fn();
const onClickSave = jest.fn();
multiPageGroup.edit.saveAndNextButton = true;
render({ setEditIndex, setMultiPageIndex, onClickSave, editIndex: 0 });
await user.click(
screen.getByRole('button', { name: /save and open next/i }),
);
expect(onClickSave).not.toHaveBeenCalled();
expect(setEditIndex).toHaveBeenCalledWith(1, true);
});

const render = (props: Partial<IRepeatingGroupsEditContainer> = {}) => {
const allProps: IRepeatingGroupsEditContainer = {
id: 'multipageGroup',
Expand All @@ -124,9 +138,11 @@ describe('RepeatingGroupsEditContainer', () => {
textResources: textResources,
layout: layout,
editIndex: 1,
repeatingGroupIndex: repeatingGroupIndex,
onClickSave: jest.fn(),
onClickRemove: jest.fn(),
hideDeleteButton: false,
showSaveAndNextButton: multiPageGroup.edit?.saveAndNextButton === true,
...props,
};

Expand Down
67 changes: 53 additions & 14 deletions src/altinn-app-frontend/src/features/form/containers/RepeatingGroupsEditContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,15 @@ export interface IRepeatingGroupsEditContainer {
layout: ILayout;
deleting?: boolean;
editIndex: number;
setEditIndex?: (index: number, forceValidation?: boolean) => void;
repeatingGroupIndex: number;
onClickRemove?: (groupIndex: number) => void;
onClickSave: () => void;
hideSaveButton?: boolean;
hideDeleteButton?: boolean;
multiPageIndex?: number;
setMultiPageIndex?: (index: number) => void;
showSaveAndNextButton?: boolean;
}

const theme = createTheme(altinnAppTheme);
Expand Down Expand Up @@ -99,12 +102,15 @@ export function RepeatingGroupsEditContainer({
layout,
deleting,
editIndex,
setEditIndex,
repeatingGroupIndex,
onClickRemove,
onClickSave,
hideSaveButton,
hideDeleteButton,
multiPageIndex,
setMultiPageIndex,
showSaveAndNextButton,
}: IRepeatingGroupsEditContainer): JSX.Element {
const classes = useStyles();

Expand All @@ -115,6 +121,13 @@ export function RepeatingGroupsEditContainer({
}
};

const nextClicked = () => {
setEditIndex(editIndex + 1, true);
if (container.edit?.multiPage) {
setMultiPageIndex(0);
}
};

const removeClicked = () => {
onClickRemove(editIndex);
if (container.edit?.multiPage) {
Expand Down Expand Up @@ -208,20 +221,46 @@ export function RepeatingGroupsEditContainer({
)}
</div>
)}
{!hideSaveButton && (
<Button
id={`add-button-grp-${id}`}
onClick={closeEditContainer}
variant={ButtonVariant.Secondary}
>
{container.textResourceBindings?.save_button
? getTextResourceByKey(
container.textResourceBindings.save_button,
textResources,
)
: getLanguageFromKey('general.save_and_close', language)}
</Button>
)}
<Grid
container={true}
direction='row'
spacing={2}
>
{!hideSaveButton &&
showSaveAndNextButton &&
editIndex < repeatingGroupIndex && (
<Grid item={true}>
<Button
id={`next-button-grp-${id}`}
onClick={nextClicked}
variant={ButtonVariant.Primary}
>
{container.textResourceBindings?.save_and_next_button
? getTextResourceByKey(
container.textResourceBindings.save_and_next_button,
textResources,
)
: getLanguageFromKey('general.save_and_next', language)}
</Button>
</Grid>
)}
{!hideSaveButton && (
<Grid item={true}>
<Button
id={`add-button-grp-${id}`}
onClick={closeEditContainer}
variant={ButtonVariant.Secondary}
>
{container.textResourceBindings?.save_button
? getTextResourceByKey(
container.textResourceBindings.save_button,
textResources,
)
: getLanguageFromKey('general.save_and_close', language)}
</Button>
</Grid>
)}
</Grid>
</Grid>
</Grid>
</div>
Expand Down
1 change: 1 addition & 0 deletions src/altinn-app-frontend/src/features/form/layout/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -326,6 +326,7 @@ export interface IGroupEditProperties {
deleteButton?: boolean;
multiPage?: boolean;
openByDefault?: boolean | 'first' | 'last';
saveAndNextButton?: boolean;
}

export interface IGroupFilter {
Expand Down
2 changes: 1 addition & 1 deletion src/shared/src/components/molecules/AltinnMobileTableItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@ const useStyles = makeStyles({
},
},
editButtonCell: {
width: '120px',
width: '140px',
padding: '0 !important',
'@media (max-width: 768px)': {
width: '50px',
Expand Down
1 change: 1 addition & 0 deletions src/shared/src/language/texts/en.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,7 @@ export function en() {
required: 'Required',
save: 'Save',
save_and_close: 'Save and close',
save_and_next: 'Save and open next',
search: 'Search',
select_field: 'Select field',
service_description_header: 'Description',
Expand Down
1 change: 1 addition & 0 deletions src/shared/src/language/texts/nb.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,7 @@ export function nb() {
required: 'Obligatorisk',
save: 'Lagre',
save_and_close: 'Lagre og lukk',
save_and_next: 'Lagre og åpne neste',
search: 'Søk',
select_field: 'Velg felt',
service_description_header: 'Beskrivelse',
Expand Down
1 change: 1 addition & 0 deletions src/shared/src/language/texts/nn.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,7 @@ export function nn() {
required: 'Obligatorisk',
save: 'Lagre',
save_and_close: 'Lagre og lukk',
save_and_next: 'Lagre og opne neste',
search: 'Søk',
select_field: 'Vel felt',
service_description_header: 'Beskriving',
Expand Down