[CST-15124] propagate error to child controllers, handle removal of field

Author: FrancescoMolinaro

src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.ts

@@ -3,8 +3,7 @@ import {
   Component,
   ComponentFactoryResolver,
   ContentChildren,
-  EventEmitter,
-  Inject,
+  EventEmitter, Inject,
   Input,
   NgZone,
   OnChanges,
@@ -59,9 +58,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { ReorderableRelationship } from './existing-metadata-list-element/existing-metadata-list-element.component';
 
 import { DYNAMIC_FORM_CONTROL_TYPE_ONEBOX } from './models/onebox/dynamic-onebox.model';
-import {
-  DYNAMIC_FORM_CONTROL_TYPE_SCROLLABLE_DROPDOWN
-} from './models/scrollable-dropdown/dynamic-scrollable-dropdown.model';
+import { DYNAMIC_FORM_CONTROL_TYPE_SCROLLABLE_DROPDOWN } from './models/scrollable-dropdown/dynamic-scrollable-dropdown.model';
 import { DYNAMIC_FORM_CONTROL_TYPE_TAG } from './models/tag/dynamic-tag.model';
 import { DYNAMIC_FORM_CONTROL_TYPE_DSDATEPICKER } from './models/date-picker/date-picker.model';
 import { DYNAMIC_FORM_CONTROL_TYPE_LOOKUP } from './models/lookup/dynamic-lookup.model';
@@ -73,9 +70,7 @@ import { DsDynamicTagComponent } from './models/tag/dynamic-tag.component';
 import { DsDatePickerComponent } from './models/date-picker/date-picker.component';
 import { DsDynamicListComponent } from './models/list/dynamic-list.component';
 import { DsDynamicOneboxComponent } from './models/onebox/dynamic-onebox.component';
-import {
-  DsDynamicScrollableDropdownComponent
-} from './models/scrollable-dropdown/dynamic-scrollable-dropdown.component';
+import { DsDynamicScrollableDropdownComponent } from './models/scrollable-dropdown/dynamic-scrollable-dropdown.component';
 import { DsDynamicLookupComponent } from './models/lookup/dynamic-lookup.component';
 import { DsDynamicFormGroupComponent } from './models/form-group/dynamic-form-group.component';
 import { DsDynamicFormArrayComponent } from './models/array-group/dynamic-form-array.component';
@@ -87,9 +82,7 @@ import { CustomSwitchComponent } from './models/custom-switch/custom-switch.comp
 import { find, map, startWith, switchMap, take } from 'rxjs/operators';
 import { combineLatest as observableCombineLatest, Observable, Subscription } from 'rxjs';
 import { DsDynamicTypeBindRelationService } from './ds-dynamic-type-bind-relation.service';
-import {
-  DsDynamicRelationInlineGroupComponent
-} from './models/relation-inline-group/dynamic-relation-inline-group.components';
+import { DsDynamicRelationInlineGroupComponent } from './models/relation-inline-group/dynamic-relation-inline-group.components';
 import { SearchResult } from '../../../search/models/search-result.model';
 import { DSpaceObject } from '../../../../core/shared/dspace-object.model';
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
@@ -130,6 +123,9 @@ import { APP_CONFIG, AppConfig } from '../../../../../config/app-config.interfac
 import { itemLinksToFollow } from '../../../utils/relation-query.utils';
 import { DynamicConcatModel } from './models/ds-dynamic-concat.model';
 import { Metadata } from '../../../../core/shared/metadata.utils';
+import { DsDynamicMarkdownComponent } from './models/markdown/dynamic-markdown.component';
+import { DYNAMIC_FORM_CONTROL_TYPE_MARKDOWN } from './models/markdown/dynamic-markdown.model';
+import { DynamicLinkModel } from './models/ds-dynamic-link.model';
 
 export function dsDynamicFormControlMapFn(model: DynamicFormControlModel): Type<DynamicFormControl> | null {
   switch (model.type) {
@@ -192,6 +188,9 @@ export function dsDynamicFormControlMapFn(model: DynamicFormControlModel): Type<
     case DYNAMIC_FORM_CONTROL_TYPE_CUSTOM_SWITCH:
       return CustomSwitchComponent;
 
+    case DYNAMIC_FORM_CONTROL_TYPE_MARKDOWN:
+      return DsDynamicMarkdownComponent;
+
     default:
       return null;
   }
@@ -504,7 +503,6 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
    * Unsubscribe from all subscriptions
    */
   ngOnDestroy(): void {
-    super.ngOnDestroy();
     this.subs
       .filter((sub) => hasValue(sub))
       .forEach((sub) => sub.unsubscribe());
@@ -555,13 +553,13 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
   addSecurityLevelToMetadata($event) {
     this.model.securityLevel = $event;
     this.securityLevel = $event;
-    if (this.model.parent && this.model.parent instanceof DynamicConcatModel) {
+    if (this.model.parent && (this.model.parent instanceof DynamicConcatModel || this.model.parent instanceof DynamicLinkModel)) {
       this.model.parent.securityLevel = $event;
     }
     if (this.model.value) {
       this.model.securityLevel = $event;
       this.securityLevel = $event;
-      if (this.model.parent && this.model.parent instanceof DynamicConcatModel) {
+      if (this.model.parent && (this.model.parent instanceof DynamicConcatModel || this.model.parent instanceof DynamicLinkModel)) {
         this.model.parent.securityLevel = $event;
       }
       this.change.emit(

src/app/shared/form/builder/ds-dynamic-form-ui/models/link/dynamic-link.model.ts

@@ -28,6 +28,8 @@ import { DynamicRowGroupModel } from './builder/ds-dynamic-form-ui/models/ds-dyn
 import {
   DynamicRelationGroupModel
 } from './builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.model';
+import { DynamicLinkModel } from './builder/ds-dynamic-form-ui/models/ds-dynamic-link.model';
+import { DynamicConcatModel } from './builder/ds-dynamic-form-ui/models/ds-dynamic-concat.model';
 
 export interface MetadataFields {
   [key: string]: FormFieldMetadataValueObject[]
@@ -53,9 +55,9 @@ export class FormComponent implements OnDestroy, OnInit {
   @Input() displaySubmit = true;
 
   /**
-   * A boolean that indicate if to display form's reset button
+   * A boolean that indicate if to display form's cancel button
    */
-  @Input() displayReset = true;
+  @Input() displayCancel = true;
 
   /**
    * A String that indicate the entity type of the item
@@ -78,9 +80,9 @@ export class FormComponent implements OnDestroy, OnInit {
   @Input() submitLabel = 'form.submit';
 
   /**
-   * i18n key for the reset button
+   * i18n key for the cancel button
    */
-  @Input() resetLabel = 'form.reset';
+  @Input() cancelLabel = 'form.cancel';
 
   /**
    * An array of DynamicFormControlModel type
@@ -348,14 +350,20 @@ export class FormComponent implements OnDestroy, OnInit {
   removeItem($event, arrayContext: DynamicFormArrayModel, index: number): void {
     const formArrayControl = this.formGroup.get(this.formBuilderService.getPath(arrayContext)) as UntypedFormArray;
     const event = this.getEvent($event, arrayContext, index, 'remove');
+    console.log(formArrayControl, event);
     if (this.formBuilderService.isQualdropGroup(event.model as DynamicFormControlModel) || this.isInlineGroupForm) {
       // In case of qualdrop value or inline-group remove event must be dispatched before removing the control from array
       this.removeArrayItem.emit(event);
     }
     if (index === 0 && formArrayControl.value?.length === 1) {
       event.model = cloneDeep(event.model);
       const fieldId = event.model.id;
-      formArrayControl.at(0).get(fieldId).setValue(null);
+
+      if (event.model instanceof DynamicLinkModel || event.model instanceof DynamicConcatModel) {
+        formArrayControl.at(0).get(fieldId).reset();
+      } else {
+        formArrayControl.at(0).get(fieldId).setValue(null);
+      }
     } else {
       this.formBuilderService.removeFormArrayGroup(index, formArrayControl, arrayContext);
     }
@@ -424,29 +432,27 @@ export class FormComponent implements OnDestroy, OnInit {
 
   private updateMetadataValue(metadataFields: MetadataFields): void {
     const metadataKeys = hasValue(metadataFields) ? Object.keys(metadataFields) : [];
-    const formKeys = hasValue(this.formGroup.value) ? Object.keys(this.formGroup.value) : [];
-
-    formKeys
-      .filter((key) => isNotEmpty(this.formGroup.value[key]))
-      .forEach((key) => {
-        const innerObjectKeys = (Object.keys(this.formGroup.value[key]) as any[]).map((oldKey) => oldKey.replaceAll('_', '.'));
-        const filteredKeys = innerObjectKeys.filter(innerKey => metadataKeys.includes(innerKey));
-        const oldValue = this.formGroup.value[key];
-
-        if (filteredKeys.length > 0) {
-          filteredKeys.forEach((oldValueKey) => {
-            const newValue = { ...oldValue };
-            const formattedKey = (oldValueKey as any).replaceAll('.', '_');
-            const patchValue = {};
-
-            newValue[formattedKey] = metadataFields[oldValueKey][0];
-            patchValue[key] = newValue;
-
-            if (!isEqual(oldValue[oldValueKey], newValue[oldValueKey])) {
-              this.formGroup.patchValue(patchValue);
-            }
-          });
-        }
-      });
+    const formKeys = hasValue(this.formGroup.value) ? Object.keys(this.formGroup.value).map(key => key.replace('_array', '')) : [];
+
+    formKeys.forEach((key) => {
+      const innerObjectKeys = (Object.keys(this.formGroup.value[key] ?? {} ) as any[]).map((oldKey) => oldKey.replaceAll('_', '.'));
+      const filteredKeys = innerObjectKeys.filter(innerKey => metadataKeys.includes(innerKey));
+      const oldValue = this.formGroup.value[key];
+
+      if (filteredKeys.length > 0) {
+        filteredKeys.forEach((oldValueKey) => {
+          const newValue = {...oldValue};
+          const formattedKey = (oldValueKey as any).replaceAll('.', '_');
+          const patchValue = {};
+
+          newValue[formattedKey] = metadataFields[oldValueKey][0];
+          patchValue[key] = newValue;
+
+          if (!isEqual(oldValue[oldValueKey], newValue[oldValueKey])) {
+            this.formGroup.patchValue(patchValue);
+          }
+        });
+      }
+    });
   }
 }

src/app/shared/form/form.component.ts

@@ -21,6 +21,7 @@ import {
 } from './form.actions';
 import { FormEntry, FormError, FormTouchedState } from './form.reducer';
 import { environment } from '../../../environments/environment';
+import { DynamicLinkModel } from './builder/ds-dynamic-form-ui/models/ds-dynamic-link.model';
 
 @Injectable()
 export class FormService {
@@ -137,6 +138,7 @@ export class FormService {
   }
 
   public addErrorToField(field: AbstractControl, model: DynamicFormControlModel, message: string) {
+
     const error = {}; // create the error object
     const errorKey = this.getValidatorNameFromMap(message);
     let errorMsg = message;
@@ -163,9 +165,9 @@ export class FormService {
     }
 
     // if the field in question is a concat group, pass down the error to its fields
-    if (field instanceof UntypedFormGroup && model instanceof DynamicFormGroupModel && this.formBuilderService.isConcatGroup(model)) {
+    if ((field instanceof UntypedFormGroup && model instanceof DynamicFormGroupModel && this.formBuilderService.isConcatGroup(model)) || model instanceof DynamicLinkModel) {
       model.group.forEach((subModel) => {
-        const subField = field.controls[subModel.id];
+        const subField = (field as UntypedFormGroup).controls[subModel.id];
 
         this.addErrorToField(subField, subModel, message);
       });

src/app/shared/form/form.service.ts

@@ -2143,6 +2143,8 @@
 
   "error.validation.groupExists": "This group already exists",
 
+  "error.validation.invalidProjectURL": "The URL of the project is invalid",
+
   "error.validation.metadata.name.invalid-pattern": "This field cannot contain dots, commas or spaces. Please use the Element & Qualifier fields instead",
 
   "error.validation.metadata.name.max-length": "This field may not contain more than 32 characters",