fix for dynamic form after upgrade

2025-10-07 10:04:11 +00:00 · 2020-11-20 21:09:12 +01:00
parent 59a0263817
commit 9abc827fc1
28 changed files with 59 additions and 54 deletions
--- a/src/app/shared/collection-dropdown/collection-dropdown.component.ts
+++ b/src/app/shared/collection-dropdown/collection-dropdown.component.ts
@@ -193,7 +193,7 @@ export class CollectionDropdownComponent implements OnInit, OnDestroy {
            collection: { id: collection.id, uuid: collection.id, name: collection.name }
          })
        ))),
-        reduce((acc: any, value: any) => [...acc, ...value], []),
+        reduce((acc: any, value: any) => [...acc, value], []),
        startWith([])
        );
    this.subs.push(this.searchListCollection$.subscribe(
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html
@@ -1,4 +1,4 @@
-<div [class.form-group]="asBootstrapFormGroup"
+<div [class.form-group]="(model.type !== 'GROUP' && asBootstrapFormGroup) || getClass('element', 'container').includes('form-group')"
     [formGroup]="group"
     [ngClass]="[getClass('element', 'container'), getClass('grid', 'container')]">
    <label *ngIf="!isCheckbox && hasLabel"
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.ts
@@ -200,6 +200,7 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
  @Input() bindId = true;
  @Input() context: any | null = null;
  @Input() group: FormGroup;
+  @Input() hostClass: string[];
  @Input() hasErrorMessaging = false;
  @Input() layout = null as DynamicFormLayout;
  @Input() model: any;
@@ -250,7 +251,7 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
    private formBuilderService: FormBuilderService,
    private submissionService: SubmissionService
  ) {
-    super(componentFactoryResolver, layoutService, validationService, dynamicFormComponentService, relationService);
+    super(ref, componentFactoryResolver, layoutService, validationService, dynamicFormComponentService, relationService);
  }

  /**
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form.component.html
@@ -5,9 +5,9 @@
                                   [hidden]="model.hidden"
                                   [layout]="formLayout"
                                   [model]="model"
-                                   [ngClass]="[getClass(model, 'element', 'host'), getClass(model, 'grid', 'host')]"
                                   [templates]="templates"
                                   [asBootstrapFormGroup]="true"
-                                   (dfBlur)="onEvent($event, 'blur')"
-                                   (dfChange)="onEvent($event, 'change')"
-                                   (dfFocus)="onEvent($event, 'focus')"></ds-dynamic-form-control-container>
+                                   (dfBlur)="onCustomEvent($event, blur)"
+                                   (dfChange)="onCustomEvent($event, change)"
+                                   (dfFocus)="onCustomEvent($event, focus)"
+                                   (ngbEvent)="onCustomEvent($event, ngbEvent)"></ds-dynamic-form-control-container>
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form.component.ts
@@ -1,4 +1,13 @@
-import { Component, ContentChildren, EventEmitter, Input, Output, QueryList, ViewChildren } from '@angular/core';
+import {
+  ChangeDetectorRef,
+  Component,
+  ContentChildren,
+  EventEmitter,
+  Input,
+  Output,
+  QueryList,
+  ViewChildren
+} from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import {
  DynamicFormComponent,
@@ -6,11 +15,10 @@ import {
  DynamicFormControlEvent,
  DynamicFormControlModel,
  DynamicFormLayout,
-  DynamicFormLayoutService,
+  DynamicFormComponentService,
  DynamicTemplateDirective,
 } from '@ng-dynamic-forms/core';
 import { DsDynamicFormControlContainerComponent } from './ds-dynamic-form-control-container.component';
-import { FormBuilderService } from '../form-builder.service';

@Component({
  selector: 'ds-dynamic-form',
@@ -21,20 +29,21 @@ export class DsDynamicFormComponent extends DynamicFormComponent {
  @Input() formId: string;
  @Input() formGroup: FormGroup;
  @Input() formModel: DynamicFormControlModel[];
-  @Input() formLayout = null as DynamicFormLayout;
+  @Input() formLayout: DynamicFormLayout;

  /* tslint:disable:no-output-rename */
  @Output('dfBlur') blur: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
  @Output('dfChange') change: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
  @Output('dfFocus') focus: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
-  @Output('ngbEvent') customEvent: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
  /* tslint:enable:no-output-rename */

+  @Output() ngbEvent: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
+
  @ContentChildren(DynamicTemplateDirective) templates: QueryList<DynamicTemplateDirective>;

  @ViewChildren(DsDynamicFormControlContainerComponent) components: QueryList<DynamicFormControlContainerComponent>;

-  constructor(protected formService: FormBuilderService, protected layoutService: DynamicFormLayoutService) {
-    super(formService, layoutService);
+  constructor(changeDetectorRef: ChangeDetectorRef, componentService: DynamicFormComponentService) {
+    super(changeDetectorRef, componentService);
  }
 }
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.html
@@ -1,5 +1,5 @@
 <ng-container [formGroup]="group">
-    <div [dynamicId]="bindId && model.id"
+    <div [id]="id"
         [formArrayName]="model.id"
         [ngClass]="getClass('element', 'control')">
        <div role="group"
@@ -34,7 +34,7 @@
                                       [context]="model.groups[idx]"
                                       [group]="control.get([idx])"
                                       [hidden]="_model.hidden"
-                                       [layout]="layout"
+                                       [layout]="formLayout"
                                       [model]="_model"
                                       [templates]="templates"
                                       [ngClass]="[getClass('element', 'host', _model), getClass('grid', 'host', _model)]"
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.ts
@@ -6,7 +6,7 @@ import {
  DynamicFormControlCustomEvent,
  DynamicFormControlEvent,
  DynamicFormControlEventType,
-  DynamicFormLayout,
+  DynamicFormControlLayout, DynamicFormLayout,
  DynamicFormLayoutService,
  DynamicFormValidationService,
  DynamicTemplateDirective
@@ -22,9 +22,9 @@ import { hasValue } from '../../../../../empty.util';
 })
 export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent {

-  @Input() bindId = true;
+  @Input() formLayout: DynamicFormLayout;
  @Input() group: FormGroup;
-  @Input() layout: DynamicFormLayout;
+  @Input() layout: DynamicFormControlLayout;
  @Input() model: DynamicRowArrayModel;
  @Input() templates: QueryList<DynamicTemplateDirective> | undefined;

--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/custom-switch/custom-switch.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/custom-switch/custom-switch.component.html
@@ -2,7 +2,7 @@
  <input type="checkbox" class="form-check-input custom-control-input"
         [checked]="model.checked"
         [class.is-invalid]="showErrorMessages"
-         [dynamicId]="bindId && model.id"
+         [id]="id"
         [formControlName]="model.id"
         [indeterminate]="model.indeterminate"
         [name]="model.name"
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker-inline/dynamic-date-picker-inline.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker-inline/dynamic-date-picker-inline.component.html
@@ -3,7 +3,7 @@
    <input ngbDatepicker class="form-control" #datepicker="ngbDatepicker"
           [class.is-invalid]="showErrorMessages"
           [displayMonths]="model.getAdditional('displayMonths', config['displayMonths'])"
-           [dynamicId]="bindId && model.id"
+           [id]="id"
           [firstDayOfWeek]="model.getAdditional('firstDayOfWeek', config['firstDayOfWeek'])"
           [formControlName]="model.id"
           [maxDate]="model.max"
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker-inline/dynamic-date-picker-inline.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker-inline/dynamic-date-picker-inline.component.ts
@@ -4,7 +4,7 @@ import { NgbDatepicker, NgbDatepickerConfig } from '@ng-bootstrap/ng-bootstrap';
 import {
  DynamicDatePickerModel,
  DynamicFormControlComponent,
-  DynamicFormLayout,
+  DynamicFormControlLayout,
  DynamicFormLayoutService,
  DynamicFormValidationService
 } from '@ng-dynamic-forms/core';
@@ -17,7 +17,7 @@ export class DsDatePickerInlineComponent extends DynamicFormControlComponent {

  @Input() bindId = true;
  @Input() group: FormGroup;
-  @Input() layout: DynamicFormLayout;
+  @Input() layout: DynamicFormControlLayout;
  @Input() model: DynamicDatePickerModel;

  @Output() blur: EventEmitter<any> = new EventEmitter();
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/disabled/dynamic-disabled.model.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/disabled/dynamic-disabled.model.ts
@@ -14,7 +14,6 @@ export interface DsDynamicDisabledModelConfig extends DsDynamicInputModelConfig
 export class DynamicDisabledModel extends DsDynamicInputModel {

  @serializable() readonly type: string = DYNAMIC_FORM_CONTROL_TYPE_DISABLED;
-  @serializable() value: any;
  @serializable() hasSelectableMetadata: boolean;

  constructor(config: DsDynamicDisabledModelConfig, layout?: DynamicFormControlLayout) {
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-vocabulary.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-vocabulary.component.ts
@@ -22,7 +22,6 @@ import { PageInfo } from '../../../../../core/shared/page-info.model';
@Directive()
 export abstract class DsDynamicVocabularyComponent extends DynamicFormControlComponent {

-  @Input() abstract bindId = true;
  @Input() abstract group: FormGroup;
  @Input() abstract model: DsDynamicInputModel;

--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/form-group/dynamic-form-group.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/form-group/dynamic-form-group.component.html
@@ -1,15 +1,12 @@
 <ng-container [formGroup]="group">

-  <div role="group"
-       [dynamicId]="bindId && model.id"
-       [formGroupName]="model.id"
-       [ngClass]="getClass('element','control')">
+  <div role="group" [formGroupName]="model.id" [id]="id" [ngClass]="getClass('element','control')">

    <ds-dynamic-form-control-container *ngFor="let _model of model.group"
                                       [group]="control"
                                       [hasErrorMessaging]="model.hasErrorMessages"
                                       [hidden]="_model.hidden"
-                                       [layout]="layout"
+                                       [layout]="formLayout"
                                       [model]="_model"
                                       [templates]="templates"
                                       [ngClass]="[getClass('element', 'host', _model), getClass('grid', 'host', _model)]"
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/form-group/dynamic-form-group.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/form-group/dynamic-form-group.component.ts
@@ -4,8 +4,8 @@ import {
  DynamicFormControlComponent,
  DynamicFormControlCustomEvent,
  DynamicFormControlEvent,
-  DynamicFormGroupModel,
-  DynamicFormLayout,
+  DynamicFormControlLayout,
+  DynamicFormGroupModel, DynamicFormLayout,
  DynamicFormLayoutService,
  DynamicFormValidationService,
  DynamicTemplateDirective
@@ -18,9 +18,9 @@ import {
 })
 export class DsDynamicFormGroupComponent extends DynamicFormControlComponent {

-  @Input() bindId = true;
+  @Input() formLayout: DynamicFormLayout;
  @Input() group: FormGroup;
-  @Input() layout: DynamicFormLayout;
+  @Input() layout: DynamicFormControlLayout;
  @Input() model: DynamicFormGroupModel;
  @Input() templates: QueryList<DynamicTemplateDirective> | DynamicTemplateDirective[] | undefined;

--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.html
@@ -2,7 +2,7 @@
  <div *ngIf="model.repeatable"
       class="form-row"
       [attr.tabindex]="model.tabIndex"
-       [dynamicId]="bindId && model.id"
+       [id]="id"
       [formGroupName]="model.id"
       [ngClass]="model.layout.element?.control">

@@ -14,7 +14,6 @@
                 [attr.tabindex]="item.index"
                 [checked]="item.value"
                 [id]="item.id"
-                 [dynamicId]="item.id"
                 [formControlName]="item.id"
                 [name]="model.name"
                 [required]="model.required"
@@ -38,7 +37,7 @@
       class="form-row"
       ngbRadioGroup
       [attr.tabindex]="model.tabIndex"
-       [dynamicId]="bindId && model.id"
+       [id]="id"
       [ngClass]="model.layout.element?.control"
       (change)="onChange($event)">

@@ -50,7 +49,7 @@
               [ngClass]="model.layout.element?.control">
          <input type="radio" class="custom-control-input"
                 [checked]="item.value"
-                 [dynamicId]="item.id"
+                 [id]="item.id"
                 [name]="model.id"
                 [required]="model.required"
                 [value]="item.index"
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.ts
@@ -35,7 +35,7 @@ export interface ListItem {
  templateUrl: './dynamic-list.component.html'
 })
 export class DsDynamicListComponent extends DynamicFormControlComponent implements OnInit {
-  @Input() bindId = true;
+
  @Input() group: FormGroup;
  @Input() model: any;

--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.html
@@ -13,7 +13,7 @@
      <input class="form-control"
             [attr.autoComplete]="model.autoComplete"
             [class.is-invalid]="showErrorMessages"
-             [dynamicId]="bindId && model.id"
+             [id]="model.id"
             [name]="model.name"
             [type]="model.inputType"
             [(ngModel)]="firstInputValue"
@@ -32,7 +32,7 @@
              [ngClass]="{}"
              [attr.autoComplete]="model.autoComplete"
              [class.is-invalid]="showErrorMessages"
-              [dynamicId]="bindId && model.id"
+              [id]="id"
              [name]="model.name + '_2'"
              [type]="model.inputType"
              [(ngModel)]="secondInputValue"
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.ts
@@ -26,7 +26,7 @@ import { DsDynamicVocabularyComponent } from '../dynamic-vocabulary.component';
  templateUrl: './dynamic-lookup.component.html'
 })
 export class DsDynamicLookupComponent extends DsDynamicVocabularyComponent implements OnDestroy, OnInit {
-  @Input() bindId = true;
+
  @Input() group: FormGroup;
  @Input() model: any;

--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.model.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.model.ts
@@ -12,7 +12,6 @@ export class DynamicLookupModel extends DsDynamicInputModel {

  @serializable() maxOptions: number;
  @serializable() readonly type: string = DYNAMIC_FORM_CONTROL_TYPE_LOOKUP;
-  @serializable() value: any;

  constructor(config: DynamicLookupModelConfig, layout?: DynamicFormControlLayout) {

--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.html
@@ -32,7 +32,7 @@
         class="form-control"
         [attr.autoComplete]="model.autoComplete"
         [class.is-invalid]="showErrorMessages"
-         [dynamicId]="bindId && model.id"
+         [id]="model.id"
         [inputFormatter]="formatter"
         [name]="model.name"
         [ngbTypeahead]="search"
@@ -54,7 +54,7 @@
       class="form-control custom-select"
       [attr.autoComplete]="model.autoComplete"
       [class.is-invalid]="showErrorMessages"
-       [dynamicId]="bindId && model.id"
+       [id]="id"
       [name]="model.name"
       [placeholder]="model.placeholder"
       [readonly]="model.readOnly"
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.ts
@@ -40,7 +40,7 @@ import { VocabularyEntryDetail } from '../../../../../../core/submission/vocabul
  templateUrl: './dynamic-onebox.component.html'
 })
 export class DsDynamicOneboxComponent extends DsDynamicVocabularyComponent implements OnInit {
-  @Input() bindId = true;
+
  @Input() group: FormGroup;
  @Input() model: DynamicOneboxModel;

--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html
@@ -2,7 +2,7 @@
  <input ngbDropdownToggle class="form-control custom-select"
         [attr.autoComplete]="model.autoComplete"
         [class.is-invalid]="showErrorMessages"
-         [dynamicId]="bindId && model.id"
+         [id]="id"
         [name]="model.name"
         [readonly]="model.readOnly"
         [type]="model.inputType"
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.html
@@ -28,7 +28,7 @@
         [attr.autoComplete]="model.autoComplete"
         [class.is-invalid]="showErrorMessages"
         [class.pl-3]="chips.hasItems()"
-         [dynamicId]="bindId && model.id"
+         [id]="id"
         [inputFormatter]="formatter"
         [name]="model.name"
         [ngbTypeahead]="search"
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.ts
@@ -96,7 +96,7 @@ export class DsDynamicTagComponent extends DsDynamicVocabularyComponent implemen
    this.hasAuthority = this.model.vocabularyOptions && hasValue(this.model.vocabularyOptions.name);

    this.chips = new Chips(
-      this.model.value,
+      this.model.value as any[],
      'display',
      null,
      environment.submission.icons.metadata);
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.model.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.model.ts
@@ -11,7 +11,6 @@ export interface DynamicTagModelConfig extends DsDynamicInputModelConfig {
 export class DynamicTagModel extends DsDynamicInputModel {

  @serializable() minChars: number;
-  @serializable() value: any[];
  @serializable() readonly type: string = DYNAMIC_FORM_CONTROL_TYPE_TAG;

  constructor(config: DynamicTagModelConfig, layout?: DynamicFormControlLayout) {
--- a/src/app/shared/form/builder/form-builder.service.ts
+++ b/src/app/shared/form/builder/form-builder.service.ts
@@ -7,7 +7,7 @@ import {
  DYNAMIC_FORM_CONTROL_TYPE_GROUP,
  DYNAMIC_FORM_CONTROL_TYPE_INPUT,
  DYNAMIC_FORM_CONTROL_TYPE_RADIO_GROUP,
-  DynamicFormArrayModel,
+  DynamicFormArrayModel, DynamicFormComponentService,
  DynamicFormControlModel,
  DynamicFormGroupModel,
  DynamicFormService, DynamicFormValidationService,
@@ -31,10 +31,11 @@ import { DYNAMIC_FORM_CONTROL_TYPE_RELATION_GROUP } from './ds-dynamic-form-ui/d
 export class FormBuilderService extends DynamicFormService {

  constructor(
+    componentService: DynamicFormComponentService,
    validationService: DynamicFormValidationService,
    protected rowParser: RowParser
  ) {
-    super(validationService);
+    super(componentService, validationService);
  }

  findById(id: string, groupModel: DynamicFormControlModel[], arrayIndex = null): DynamicFormControlModel | null {
--- a/src/app/shared/input-suggestions/filter-suggestions/filter-input-suggestions.component.ts
+++ b/src/app/shared/input-suggestions/filter-suggestions/filter-input-suggestions.component.ts
@@ -77,7 +77,9 @@ export class FilterInputSuggestionsComponent extends InputSuggestionsComponent i
   */
  checkIfValidInput(form) {
    this.valid = !(form.get('metadataNameField').status === 'INVALID' && (form.get('metadataNameField').dirty || form.get('metadataNameField').touched));
+    if (this.metadata) {
      this.objectUpdatesService.setValidFieldUpdate(this.url, this.metadata.uuid, this.valid);
+    }
    return this.valid;
  }

--- a/src/app/shared/vocabulary-treeview/vocabulary-tree-flat-data-source.ts
+++ b/src/app/shared/vocabulary-treeview/vocabulary-tree-flat-data-source.ts
@@ -35,7 +35,7 @@ export class VocabularyTreeFlatDataSource<T, F> extends DataSource<F> {
  connect(collectionViewer: CollectionViewer): Observable<F[]> {
    const changes = [
      collectionViewer.viewChange,
-      this._treeControl.expansionModel.onChange,
+      this._treeControl.expansionModel.changed,
      this._flattenedData
    ];
    return merge(...changes).pipe(map(() => {