[835] Auto-save in new Item Submission form breaks the form

Section formId added to the section state.
Error filtering during the parsing of the submission response.
This commit is contained in:
Alessandro Martelli
2020-11-20 15:02:56 +01:00
parent 9f33855a0f
commit 875a43a14e
10 changed files with 130 additions and 28 deletions

View File

@@ -328,7 +328,7 @@ export class FormBuilderService extends DynamicFormService {
model = model.parent as any;
}
const iterateControlModels = (findGroupModel: DynamicFormControlModel[], controlModelIndex: number = 0): void => {
const iterateControlModels = (findGroupModel: DynamicFormControlModel[], controlModelIndex: number = 0): string[] => {
let iterateResult = Object.create({});
// Iterate over all group's controls

View File

@@ -253,6 +253,7 @@ export class FormComponent implements OnDestroy, OnInit {
}
onFocus(event: DynamicFormControlEvent): void {
this.formService.setTouched(this.formId, this.formModel, event);
this.focus.emit(event);
}

View File

@@ -133,7 +133,7 @@ function initForm(state: FormState, action: FormInitAction): FormState {
data: action.payload.formData,
valid: action.payload.valid,
errors: [],
additional: action.payload.formAdditional
additional: action.payload.formAdditional ? action.payload.formAdditional : {}
};
if (!hasValue(state[action.payload.formId])) {
return Object.assign({}, state, {

View File

@@ -161,8 +161,8 @@ export class FormService {
return (environment.form.validatorMap.hasOwnProperty(validator)) ? environment.form.validatorMap[validator] : validator;
}
public initForm(formId: string, model: DynamicFormControlModel[], valid: boolean, additional?: any) {
this.store.dispatch(new FormInitAction(formId, this.formBuilderService.getValueFromModel(model), valid, additional));
public initForm(formId: string, model: DynamicFormControlModel[], valid: boolean) {
this.store.dispatch(new FormInitAction(formId, this.formBuilderService.getValueFromModel(model), valid));
}
public setStatusChanged(formId: string, valid: boolean) {

View File

@@ -40,6 +40,7 @@ export const SubmissionObjectActionTypes = {
INIT_SECTION: type('dspace/submission/INIT_SECTION'),
ENABLE_SECTION: type('dspace/submission/ENABLE_SECTION'),
DISABLE_SECTION: type('dspace/submission/DISABLE_SECTION'),
SET_SECTION_FORM_ID: type('dspace/submission/SET_SECTION_FORM_ID'),
SECTION_STATUS_CHANGE: type('dspace/submission/SECTION_STATUS_CHANGE'),
SECTION_LOADING_STATUS_CHANGE: type('dspace/submission/SECTION_LOADING_STATUS_CHANGE'),
UPDATE_SECTION_DATA: type('dspace/submission/UPDATE_SECTION_DATA'),
@@ -256,6 +257,29 @@ export class RemoveSectionErrorsAction implements Action {
}
}
export class SetSectionFormId implements Action {
type = SubmissionObjectActionTypes.SET_SECTION_FORM_ID;
payload: {
submissionId: string;
sectionId: string;
formId: string;
};
/**
* Create a new SetSectionFormId
*
* @param submissionId
* the submission's ID
* @param sectionId
* the section's ID
* @param formId
* the section's formId
*/
constructor(submissionId: string, sectionId: string, formId: string) {
this.payload = { submissionId, sectionId, formId };
}
}
// Submission actions
export class CompleteInitSubmissionFormAction implements Action {
@@ -782,6 +806,7 @@ export class DeleteUploadedFileAction implements Action {
*/
export type SubmissionObjectAction = DisableSectionAction
| InitSectionAction
| SetSectionFormId
| EnableSectionAction
| InitSubmissionFormAction
| ResetSubmissionFormAction

View File

@@ -52,12 +52,13 @@ import {
UpdateSectionDataAction,
UpdateSectionDataSuccessAction
} from './submission-objects.actions';
import { SubmissionObjectEntry, SubmissionSectionObject } from './submission-objects.reducer';
import {SubmissionObjectEntry, SubmissionSectionError, SubmissionSectionObject} from './submission-objects.reducer';
import { Item } from '../../core/shared/item.model';
import { RemoteData } from '../../core/data/remote-data';
import { getFirstSucceededRemoteDataPayload } from '../../core/shared/operators';
import { SubmissionObjectDataService } from '../../core/submission/submission-object-data.service';
import { followLink } from '../../shared/utils/follow-link-config.model';
import parseSectionErrorPaths, {SectionErrorPath} from '../utils/parseSectionErrorPaths';
@Injectable()
export class SubmissionObjectEffects {
@@ -157,7 +158,8 @@ export class SubmissionObjectEffects {
ofType(SubmissionObjectActionTypes.SAVE_SUBMISSION_FORM_SUCCESS),
withLatestFrom(this.store$),
map(([action, currentState]: [SaveSubmissionFormSuccessAction, any]) => {
return this.parseSaveResponse((currentState.submission as SubmissionState).objects[action.payload.submissionId], action.payload.submissionObject, action.payload.submissionId, action.payload.notify);
return this.parseSaveResponse((currentState.submission as SubmissionState).objects[action.payload.submissionId],
action.payload.submissionObject, action.payload.submissionId, currentState.forms, action.payload.notify);
}),
mergeMap((actions) => observableFrom(actions)));
@@ -169,7 +171,8 @@ export class SubmissionObjectEffects {
ofType(SubmissionObjectActionTypes.SAVE_SUBMISSION_SECTION_FORM_SUCCESS),
withLatestFrom(this.store$),
map(([action, currentState]: [SaveSubmissionSectionFormSuccessAction, any]) => {
return this.parseSaveResponse((currentState.submission as SubmissionState).objects[action.payload.submissionId], action.payload.submissionObject, action.payload.submissionId, false);
return this.parseSaveResponse((currentState.submission as SubmissionState).objects[action.payload.submissionId],
action.payload.submissionObject, action.payload.submissionId, currentState.forms, false);
}),
mergeMap((actions) => observableFrom(actions)));
@@ -212,7 +215,8 @@ export class SubmissionObjectEffects {
return new DepositSubmissionAction(action.payload.submissionId);
} else {
this.notificationsService.warning(null, this.translate.get('submission.sections.general.sections_not_valid'));
return this.parseSaveResponse((currentState.submission as SubmissionState).objects[action.payload.submissionId], response, action.payload.submissionId);
return this.parseSaveResponse((currentState.submission as SubmissionState).objects[action.payload.submissionId],
response, action.payload.submissionId, currentState.forms);
}
}),
catchError(() => observableOf(new SaveSubmissionFormErrorAction(action.payload.submissionId))));
@@ -365,6 +369,7 @@ export class SubmissionObjectEffects {
currentState: SubmissionObjectEntry,
response: SubmissionObject[],
submissionId: string,
forms,
notify: boolean = true): SubmissionObjectAction[] {
const mappedActions = [];
@@ -404,10 +409,42 @@ export class SubmissionObjectEffects {
if (notify && !currentState.sections[sectionId].enabled) {
this.submissionService.notifyNewSection(submissionId, sectionId, currentState.sections[sectionId].sectionType);
}
mappedActions.push(new UpdateSectionDataAction(submissionId, sectionId, sectionData, sectionErrors));
const sectionForm = forms[currentState.sections[sectionId].formId];
const filteredErrors = filterErrors(sectionForm, sectionErrors, currentState.sections[sectionId].sectionType, notify);
mappedActions.push(new UpdateSectionDataAction(submissionId, sectionId, sectionData, filteredErrors));
}
});
}
return mappedActions;
}
}
/**
* Filter sectionErrors accordingly to this rules:
* 1. if notifications are enabled return all errors
* 2. if sectionType is different from submission-form return all errors
* 3. otherwise return errors only for those fields marked as touched inside the section form
* @param sectionForm
* @param sectionErrors
* @param notify
*/
function filterErrors(sectionForm, sectionErrors, sectionType, notify): any {
if (notify || sectionType !== SectionsType.SubmissionForm) {
return sectionErrors;
}
if (!sectionForm || !sectionForm.additional || !sectionForm.additional.touched) {
return [];
}
const filteredErrors = [];
sectionErrors.forEach((error: SubmissionSectionError) => {
const errorPaths: SectionErrorPath[] = parseSectionErrorPaths(error.path);
errorPaths.forEach((path: SectionErrorPath) => {
if (path.fieldId && sectionForm.additional.touched[path.fieldId]) {
filteredErrors.push(error);
}
});
});
return filteredErrors;
}

View File

@@ -30,6 +30,7 @@ import {
SaveSubmissionSectionFormSuccessAction,
SectionStatusChangeAction,
SetActiveSectionAction,
SetSectionFormId,
SubmissionObjectAction,
SubmissionObjectActionTypes,
UpdateSectionDataAction
@@ -109,6 +110,11 @@ export interface SubmissionSectionObject {
* A boolean representing if this section is valid
*/
isValid: boolean;
/**
* The formId related to this section
*/
formId: string;
}
/**
@@ -263,6 +269,10 @@ export function submissionObjectReducer(state = initialState, action: Submission
return initSection(state, action as InitSectionAction);
}
case SubmissionObjectActionTypes.SET_SECTION_FORM_ID: {
return setSectionFormId(state, action as SetSectionFormId);
}
case SubmissionObjectActionTypes.ENABLE_SECTION: {
return changeSectionState(state, action as EnableSectionAction, true);
}
@@ -646,6 +656,33 @@ function initSection(state: SubmissionObjectState, action: InitSectionAction): S
}
}
/**
* Set a section form id.
*
* @param state
* the current state
* @param action
* an SetSectionFormId
* @return SubmissionObjectState
* the new state
*/
function setSectionFormId(state: SubmissionObjectState, action: SetSectionFormId): SubmissionObjectState {
if (hasValue(state[ action.payload.submissionId ])) {
return Object.assign({}, state, {
[ action.payload.submissionId ]: Object.assign({}, state[ action.payload.submissionId ], {
sections: Object.assign({}, state[ action.payload.submissionId ].sections, {
[ action.payload.sectionId ]: {
...state[ action.payload.submissionId ].sections [action.payload.sectionId],
formId: action.payload.formId
}
})
})
});
} else {
return state;
}
}
/**
* Update section's data.
*

View File

@@ -2,7 +2,6 @@
<ds-form *ngIf="!isLoading && formModel" #formRef="formComponent"
[formId]="formId"
[formModel]="formModel"
[formAdditional]="formAdditionalData"
[displaySubmit]="false"
(dfBlur)="onBlur($event)"
(dfChange)="onChange($event)"

View File

@@ -13,7 +13,7 @@ import {
tap
} from 'rxjs/operators';
import { TranslateService } from '@ngx-translate/core';
import { isEqual } from 'lodash';
import { isEqual, findIndex } from 'lodash';
import { FormBuilderService } from '../../../shared/form/builder/form-builder.service';
import { FormComponent } from '../../../shared/form/form.component';
@@ -101,12 +101,6 @@ export class SubmissionSectionformComponent extends SectionModelComponent {
*/
protected formData: any = Object.create({});
/**
* Store the current form additional data
* @protected
*/
protected formAdditionalData: any = Object.create({});
/**
* Store the
* @protected
@@ -186,8 +180,14 @@ export class SubmissionSectionformComponent extends SectionModelComponent {
onSectionInit() {
this.pathCombiner = new JsonPatchOperationPathCombiner('sections', this.sectionData.id);
this.formId = this.formService.getUniqueId(this.sectionData.id);
<<<<<<< HEAD
this.formConfigService.findByHref(this.sectionData.config).pipe(
map((configData: RemoteData<ConfigObject>) => configData.payload),
=======
this.sectionService.dispatchSetSectionFormId(this.submissionId, this.sectionData.id, this.formId);
this.formConfigService.getConfigByHref(this.sectionData.config).pipe(
map((configData: ConfigData) => configData.payload),
>>>>>>> [835] Auto-save in new Item Submission form breaks the form
tap((config: SubmissionFormsModel) => this.formConfig = config),
flatMap(() =>
observableCombineLatest(
@@ -265,7 +265,7 @@ export class SubmissionSectionformComponent extends SectionModelComponent {
Object.keys(diffObj)
.forEach((key) => {
diffObj[key].forEach((value) => {
if (value.hasOwnProperty('value') && !isEmpty(value.value)) {
if (value.hasOwnProperty('value') && findIndex(this.formData[key], { value: value.value }) < 0) {
diffResult.push(value);
}
});
@@ -288,7 +288,6 @@ export class SubmissionSectionformComponent extends SectionModelComponent {
sectionData,
this.submissionService.getSubmissionScope()
);
this.formBuilderService.enrichWithAdditionalData(this.formModel, this.formAdditionalData);
this.sectionMetadata = this.sectionService.computeSectionConfiguredMetadata(this.formConfig);
} catch (e) {
@@ -341,9 +340,6 @@ export class SubmissionSectionformComponent extends SectionModelComponent {
this.formService.isFormInitialized(this.formId).pipe(
find((status: boolean) => status === true && !this.isUpdating))
.subscribe(() => {
// TODO: filter these errors to only those that had been touched
this.sectionService.checkSectionErrors(this.submissionId, this.sectionData.id, this.formId, errors, this.sectionData.errors);
this.sectionData.errors = errors;
this.cdr.detectChanges();
@@ -364,12 +360,6 @@ export class SubmissionSectionformComponent extends SectionModelComponent {
this.formData = formData;
}),
this.formService.getFormAdditionalData(this.formId).pipe(
distinctUntilChanged())
.subscribe((formAdditional) => {
this.formAdditionalData = formAdditional;
}),
/**
* Subscribe to section state
*/

View File

@@ -15,6 +15,7 @@ import {
InertSectionErrorsAction,
RemoveSectionErrorsAction,
SectionStatusChangeAction,
SetSectionFormId,
UpdateSectionDataAction
} from '../objects/submission-objects.actions';
import {
@@ -135,6 +136,18 @@ export class SectionsService {
this.store.dispatch(new RemoveSectionErrorsAction(submissionId, sectionId));
}
/**
* Dispatch a new [SetSectionFormId]
* The submission id
* @param sectionId
* The section id
* @param formId
* The form id
*/
public dispatchSetSectionFormId(submissionId, sectionId, formId) {
this.store.dispatch(new SetSectionFormId(submissionId, sectionId, formId));
}
/**
* Return the data object for the specified section
*