updated with the latest changes

2025-10-18 15:33:04 +00:00 · 2018-06-11 11:13:05 +02:00
parent 10c739c903
commit 5ec01031d9
23 changed files with 375 additions and 242 deletions
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.html
@@ -127,8 +127,8 @@
                 [showWeekdays]="getAdditional('showWeekdays', true)"
                 [showWeekNumbers]="getAdditional('showWeekNumbers', false)"
                 [startDate]="model.focusedDate"
+                 (dateSelect)="onValueChange($event)"
                 (blur)="onBlur($event)"
-                 (change)="onValueChange($event)"
                 (focus)="onFocus($event)">

          <div class="input-group-append">
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.ts
@@ -12,7 +12,6 @@ import {
 import { FormGroup } from '@angular/forms';
 import {
  DynamicDatePickerModel,
-  DynamicFormArrayGroupModel,
  DynamicFormControlComponent,
  DynamicFormControlEvent,
  DynamicFormControlModel,
@@ -172,5 +171,4 @@ export class DsDynamicFormControlComponent extends DynamicFormControlComponent i
      this.onValueChange(event);
    }
  }
-
 }
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.html
@@ -1,46 +1,46 @@
 <div class="d-flex">
-  <div class="mr-3">
-    <ds-number-picker
-      [disabled]="model.disabled"
-      [min]="minYear"
-      [max]="maxYear"
-      [name]="'year'"
-      [size]="4"
-      [(ngModel)]="initialYear"
-      [value]="year"
-      [invalid]="invalid"
-      [placeholder]='yearPlaceholder'
-      (change)="onChange($event)"
-    ></ds-number-picker>
-  </div>
+  <ds-number-picker
+    tabindex="1"
+    [disabled]="model.disabled"
+    [min]="minYear"
+    [max]="maxYear"
+    [name]="'year'"
+    [size]="4"
+    [(ngModel)]="initialYear"
+    [value]="year"
+    [invalid]="showErrorMessages"
+    [placeholder]='yearPlaceholder'
+    (change)="onChange($event)"
+    (focus)="onFocus($event)"
+  ></ds-number-picker>

-  <div class="mr-3">
-    <ds-number-picker
-      [min]="minMonth"
-      [max]="maxMonth"
-      [name]="'month'"
-      [size]="6"
-      [(ngModel)]="initialMonth"
-      [value]="month"
-      [placeholder]="monthPlaceholder"
-      [disabled]="!year || model.disabled"
-      (change)="onChange($event)"
-    ></ds-number-picker>
-  </div>
+  <ds-number-picker
+    tabindex="2"
+    [min]="minMonth"
+    [max]="maxMonth"
+    [name]="'month'"
+    [size]="6"
+    [(ngModel)]="initialMonth"
+    [value]="month"
+    [placeholder]="monthPlaceholder"
+    [disabled]="!year || model.disabled"
+    (change)="onChange($event)"
+    (focus)="onFocus($event)"
+  ></ds-number-picker>

-  <div class="mr-3">
-    <ds-number-picker
-      [min]="minDay"
-      [max]="maxDay"
-      [name]="'day'"
-      [size]="2"
-      [(ngModel)]="initialDay"
-      [value]="day"
-      [placeholder]="dayPlaceholder"
-      [disabled]="!month || model.disabled"
-      (change)="onChange($event)"
-    ></ds-number-picker>
-  </div>
+  <ds-number-picker
+    tabindex="3"
+    [min]="minDay"
+    [max]="maxDay"
+    [name]="'day'"
+    [size]="2"
+    [(ngModel)]="initialDay"
+    [value]="day"
+    [placeholder]="dayPlaceholder"
+    [disabled]="!month || model.disabled"
+    (change)="onChange($event)"
+    (focus)="onFocus($event)"
+  ></ds-number-picker>

 </div>

--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.ts
@@ -1,6 +1,7 @@
 import { Component, EventEmitter, Inject, Input, OnInit, Output } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { DynamicDsDatePickerModel } from './date-picker.model';
+import { hasValue, isNotEmpty } from '../../../../../empty.util';

 export const DS_DATE_PICKER_SEPARATOR = '-';

@@ -20,12 +21,10 @@ export class DsDatePickerComponent implements OnInit {
  // @Input()
  // maxDate;

-  @Output()
-  selected = new EventEmitter<number>();
-  @Output()
-  remove = new EventEmitter<number>();
-  @Output()
-  change = new EventEmitter<any>();
+  @Output() selected = new EventEmitter<number>();
+  @Output() remove = new EventEmitter<number>();
+  @Output() change = new EventEmitter<any>();
+  @Output() focus = new EventEmitter<any>();

  initialYear: number;
  initialMonth: number;
@@ -48,9 +47,8 @@ export class DsDatePickerComponent implements OnInit {

  disabledMonth = true;
  disabledDay = true;
-  invalid = false;

-  ngOnInit() {// TODO Manage fields when not setted
+  ngOnInit() {
    const now = new Date();
    this.initialYear = now.getFullYear();
    this.initialMonth = now.getMonth() + 1;
@@ -76,15 +74,6 @@ export class DsDatePickerComponent implements OnInit {

    this.maxYear = this.initialYear + 100;

-    // Invalid state for year
-    this.group.get(this.model.id).statusChanges.subscribe((state) => {
-      if (state === 'INVALID' || this.model.malformedDate) {
-        this.invalid = true;
-      } else {
-        this.invalid = false;
-        this.model.malformedDate = false;
-      }
-    });
  }

  onChange(event) {
@@ -157,8 +146,13 @@ export class DsDatePickerComponent implements OnInit {
        : this.day.toString();
      value += DS_DATE_PICKER_SEPARATOR + dd;
    }
+
    this.model.valueUpdates.next(value);
-    this.change.emit(event);
+    this.change.emit(value);
+  }
+
+  onFocus(event) {
+    this.focus.emit(event);
  }

  getLastDay(date: Date) {
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.component.html
@@ -18,10 +18,11 @@
 <div class="pt-2" [ngClass]="{'border-top': !invalid, 'border border-danger': invalid}">
  <div *ngIf="!(formCollapsed | async)" class="pl-2 row"  @shrinkInOut>
    <ds-form #formRef="formComponent"
-             class="col-sm-9 pl-0"
+             class="col-sm-12 col-md-8 col-lg-9 col-xl-10 pl-0"
             [formId]="formId"
             [formModel]="formModel"
-             [displaySubmit]="false"></ds-form>
+             [displaySubmit]="false"
+             (dfChange)="onChange($event)"></ds-form>


    <div *ngIf="!(formCollapsed | async)" class="col p-0 m-0 d-flex justify-content-center align-items-center">
@@ -54,7 +55,11 @@

  <div class="d-flex">
    <div *ngIf="!chips.hasItems()">
-      <input type="text" readonly class="border-0 form-control-plaintext tag-input mt-1 mb-1 pl-2 text-muted" value="{{'form.no-value' | translate}}">
+      <input type="text"
+             class="border-0 form-control-plaintext tag-input mt-1 mb-1 pl-2 text-muted"
+             readonly
+             tabindex="-1"
+             value="{{'form.no-value' | translate}}">
    </div>
    <ds-chips
      *ngIf="chips.hasItems()"
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.components.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.components.ts
@@ -11,7 +11,12 @@ import {
 } from '@angular/core';

 import { Observable } from 'rxjs/Observable';
-import { DynamicFormControlModel, DynamicFormGroupModel, DynamicInputModel } from '@ng-dynamic-forms/core';
+import {
+  DynamicFormControlEvent,
+  DynamicFormControlModel,
+  DynamicFormGroupModel,
+  DynamicInputModel
+} from '@ng-dynamic-forms/core';
 import { isEqual } from 'lodash';

 import { DynamicGroupModel, PLACEHOLDER_PARENT_METADATA } from './dynamic-group.model';
@@ -28,6 +33,9 @@ import { GlobalConfig } from '../../../../../../../config/global-config.interfac
 import { GLOBAL_CONFIG } from '../../../../../../../config';
 import { FormGroup } from '@angular/forms';
 import { Subscription } from 'rxjs/Subscription';
+import { isObjectEmpty } from '../../../../../object.util';
+import { FormFieldMetadataValueObject } from '../../../models/form-field-metadata-value.model';
+import { AuthorityValueModel } from '../../../../../../core/integration/models/authority-value.model';

@Component({
  selector: 'ds-dynamic-group',
@@ -67,9 +75,13 @@ export class DsDynamicGroupComponent implements OnDestroy, OnInit {
    if (isNotEmpty(this.model.value)) {
      this.formCollapsed = Observable.of(true);
    }
+    this.model.valueUpdates.subscribe((value: any[]) => {
+      this.formCollapsed = (isNotEmpty(value) && !(value.length === 1 && isObjectEmpty(value[0]))) ? Observable.of(true) : Observable.of(false);
+    });
+
    this.formId = this.formService.getUniqueId(this.model.id);
    this.formModel = this.formBuilderService.modelFromConfiguration(config, this.model.scopeUUID, {});
-    this.chips = new Chips(this.model.value, 'value', this.model.mandatoryField);
+    this.chips = new Chips(this.model.value, 'value', this.model.mandatoryField, this.EnvConfig.submission.metadata.icons);
    this.subs.push(
      this.chips.chipsItems
        .subscribe((subItems: any[]) => {
@@ -118,20 +130,32 @@ export class DsDynamicGroupComponent implements OnDestroy, OnInit {
    return res;
  }

+  onChange(event: DynamicFormControlEvent) {
+    return
+  }
+
  onChipSelected(event) {
    this.expandForm();
    this.selectedChipItem = this.chips.getChipByIndex(event);
    this.formModel.forEach((row) => {
      const modelRow = row as DynamicFormGroupModel;
      modelRow.group.forEach((model: DynamicInputModel) => {
-        const value = this.selectedChipItem.item[model.name] === PLACEHOLDER_PARENT_METADATA ? null : this.selectedChipItem.item[model.name];
-        if (model instanceof DynamicLookupModel) {
-          (model as DynamicLookupModel).valueUpdates.next(value);
-        } else if (model instanceof DynamicInputModel) {
-          model.valueUpdates.next(value);
+        const value = (this.selectedChipItem.item[model.name] === PLACEHOLDER_PARENT_METADATA
+          || this.selectedChipItem.item[model.name].value === PLACEHOLDER_PARENT_METADATA)
+            ? null
+            : this.selectedChipItem.item[model.name];
+        if (value instanceof FormFieldMetadataValueObject || value instanceof AuthorityValueModel) {
+          model.valueUpdates.next(value.display);
        } else {
-          (model as any).value = value;
+          model.valueUpdates.next(value);
        }
+        // if (model instanceof DynamicLookupModel) {
+        //   (model as DynamicLookupModel).valueUpdates.next(value);
+        // } else if (model instanceof DynamicInputModel) {
+        //   model.valueUpdates.next(value);
+        // } else {
+        //   (model as any).value = value;
+        // }
      });
    });

--- 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
@@ -6,12 +6,11 @@ import { AuthorityService } from '../../../../../../core/integration/authority.s
 import { IntegrationSearchOptions } from '../../../../../../core/integration/models/integration-options.model';
 import { hasValue, isNotEmpty } from '../../../../../empty.util';
 import { DynamicListCheckboxGroupModel } from './dynamic-list-checkbox-group.model';
-import { ConfigData } from '../../../../../../core/config/config-data';
-import { ConfigAuthorityModel } from '../../../../../../core/shared/config/config-authority.model';
 import { FormBuilderService } from '../../../form-builder.service';
 import { DynamicCheckboxModel } from '@ng-dynamic-forms/core';
 import { AuthorityValueModel } from '../../../../../../core/integration/models/authority-value.model';
 import { DynamicListRadioGroupModel } from './dynamic-list-radio-group.model';
+import { IntegrationData } from '../../../../../../core/integration/integration-data';

 export interface ListItem {
  id: string,
@@ -26,7 +25,6 @@ export interface ListItem {
  templateUrl: './dynamic-list.component.html'
 })

-// TODO Fare questo componente da zero
 export class DsDynamicListComponent implements OnInit {
  @Input() bindId = true;
  @Input() group: FormGroup;
@@ -91,13 +89,13 @@ export class DsDynamicListComponent implements OnInit {
  protected setOptionsFromAuthority() {
    if (this.model.authorityOptions.name && this.model.authorityOptions.name.length > 0) {
      const listGroup = this.group.controls[this.model.id] as FormGroup;
-      this.authorityService.getEntriesByName(this.searchOptions).subscribe((authorities: ConfigData) => {
+      this.authorityService.getEntriesByName(this.searchOptions).subscribe((authorities: IntegrationData) => {
        let groupCounter = 0;
        let itemsPerGroup = 0;
        let tempList: ListItem[] = [];
-        this.authorityList = authorities.payload as ConfigAuthorityModel[];
+        this.authorityList = authorities.payload as AuthorityValueModel[];
        // Make a list of available options (checkbox/radio) and split in groups of 'model.groupLength'
-        (authorities.payload as ConfigAuthorityModel[]).forEach((option, key) => {
+        (authorities.payload as AuthorityValueModel[]).forEach((option, key) => {
          const value = option.id || option.value;
          const checked: boolean = isNotEmpty(findKey(
            this.model.value,
--- 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
@@ -1,7 +1,6 @@
-<div #sdRef="ngbDropdown"
-     ngbDropdown
+<div ngbDropdown #sdRef="ngbDropdown"
     (click)="$event.stopPropagation();"
-     (openChange)="openChange($event)">
+     (openChange)="openChange($event);">

  <!--Simple lookup, only 1 field -->
  <div class="form-row" *ngIf="!isLookupName">
@@ -19,26 +18,25 @@
                 [placeholder]="model.placeholder"
                 [readonly]="model.readOnly"
                 (change)="$event.preventDefault()"
-                 (blur)="onBlurEvent($event); sdRef.close();"
-                 (focus)="onFocusEvent($event); sdRef.close();"
-                 (click)="$event.stopPropagation(); sdRef.close();"
+                 (blur)="onBlurEvent($event); $event.stopPropagation(); sdRef.close();"
+                 (focus)="onFocusEvent($event); $event.stopPropagation(); sdRef.close();"
+                 (click)="$event.stopPropagation(); $event.stopPropagation(); sdRef.close();"
                 (input)="onInput($event)">
        </div>

      </div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-2 col-lg-1 text-center">
-      <button
-        *ngIf="!isInputDisabled()" class="btn btn-secondary"
-        type="button"
-        [disabled]="model.readOnly || isSearchDisabled()"
-        (click)="search($event); sdRef.open();">{{'form.search' | translate}}
+      <button ngbDropdownAnchor
+              *ngIf="!isInputDisabled()" class="btn btn-secondary"
+              type="button"
+              [disabled]="model.readOnly || isSearchDisabled()"
+              (click)="sdRef.open(); search(); $event.stopPropagation();">{{'form.search' | translate}}
      </button>
-      <button
-        *ngIf="isInputDisabled()" class="btn btn-secondary"
-        type="button"
-        [disabled]="model.readOnly"
-        (click)="remove($event)">{{'form.remove' | translate}}
+      <button *ngIf="isInputDisabled()" class="btn btn-secondary"
+              type="button"
+              [disabled]="model.readOnly"
+              (click)="remove($event)">{{'form.remove' | translate}}
      </button>
    </div>
  </div>
@@ -59,9 +57,9 @@
                 [placeholder]="model.placeholder | translate"
                 [readonly]="model.readOnly"
                 (change)="$event.preventDefault()"
-                 (blur)="onBlurEvent($event); sdRef.close();"
-                 (focus)="onFocusEvent($event); sdRef.close();"
-                 (click)="$event.stopPropagation(); sdRef.close();"
+                 (blur)="onBlurEvent($event); $event.stopPropagation(); sdRef.close();"
+                 (focus)="onFocusEvent($event); $event.stopPropagation(); sdRef.close();"
+                 (click)="$event.stopPropagation(); $event.stopPropagation(); sdRef.close();"
                 (input)="onInput($event)">
        </div>

@@ -78,24 +76,23 @@
                  [placeholder]="model.placeholder2 | translate"
                  [readonly]="model.readOnly"
                  (change)="$event.preventDefault()"
-                  (blur)="onBlurEvent($event); sdRef.close();"
-                  (focus)="onFocusEvent($event); sdRef.close();"
+                  (blur)="onBlurEvent($event); $event.stopPropagation(); sdRef.close();"
+                  (focus)="onFocusEvent($event); $event.stopPropagation(); sdRef.close();"
                  (click)="$event.stopPropagation(); sdRef.close();"
                  (input)="onInput($event)">
        </div>
      </div>
    </div>
    <div class="col-xs-12 col-md-3 col-lg-2 text-center">
-      <button
-        *ngIf="!isInputDisabled()" class="btn btn-secondary"
-        type="button"
-        [disabled]="isSearchDisabled()"
-        (click)="search($event); sdRef.open();">{{'form.search' | translate}}
+      <button ngbDropdownAnchor
+              *ngIf="!isInputDisabled()" class="btn btn-secondary"
+              type="button"
+              [disabled]="isSearchDisabled()"
+              (click)="sdRef.open(); search(); $event.stopPropagation();">{{'form.search' | translate}}
      </button>
-      <button
-        *ngIf="isInputDisabled()" class="btn btn-secondary"
-        type="button"
-        (click)="remove($event)">{{'form.remove' | translate}}
+      <button *ngIf="isInputDisabled()" class="btn btn-secondary"
+              type="button"
+              (click)="remove($event)">{{'form.remove' | translate}}
      </button>
    </div>
  </div>
@@ -115,11 +112,11 @@

      <button class="dropdown-item disabled"
              *ngIf="optionsList && optionsList.length == 0"
-              (click)="clearFields(); sdRef.close();">{{'form.no-results' | translate}}
+              (click)="$event.stopPropagation(); clearFields(); sdRef.close();">{{'form.no-results' | translate}}
      </button>
      <button class="dropdown-item collection-item"
              *ngFor="let listEntry of optionsList"
-              (click)="onSelect(listEntry); sdRef.close();"
+              (click)="$event.stopPropagation(); onSelect(listEntry); sdRef.close();"
              title="{{ listEntry.display }}">
        {{listEntry.value}}
      </button>
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.scss
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.scss
@@ -1,5 +1,9 @@
@import "../../../../../../../styles/variables";

+.dropdown-toggle::after {
+  display:none
+}
+
 /* enable absolute positioning */
 .spinner-addon {
  position: relative;
--- 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
@@ -30,11 +30,11 @@
         (scrolled)="onScroll()"
         [scrollWindow]="false">

-      <button class="dropdown-item disabled" *ngIf="optionsList && optionsList.length == 0">No results found</button>
+      <button class="dropdown-item disabled" *ngIf="optionsList && optionsList.length == 0">{{'form.no-results' | translate}}</button>
      <button class="dropdown-item collection-item" *ngFor="let listEntry of optionsList" (click)="onSelect(listEntry)" title="{{ listEntry.display }}">
        {{inputFormatter(listEntry)}}
      </button>
-      <div class="scrollable-dropdown-loading text-center" *ngIf="loading"><p>Loading...</p></div>
+      <div class="scrollable-dropdown-loading text-center" *ngIf="loading"><p>{{'form.loading' | translate}}</p></div>
    </div>

  </div>
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.ts
@@ -30,6 +30,7 @@ export class DsDynamicTypeaheadComponent implements OnInit {
  searchFailed = false;
  hideSearchingWhenUnsubscribed = new Observable(() => () => this.changeSearchingStatus(false));
  currentValue: any;
+  inputValue: any;

  formatter = (x: { display: string }) => {
    return (typeof x === 'object') ? x.display : x
@@ -88,9 +89,8 @@ export class DsDynamicTypeaheadComponent implements OnInit {
  onInput(event) {
    if (!this.model.authorityOptions.closed && isNotEmpty(event.target.value)) {
      const valueObj = new FormFieldMetadataValueObject(event.target.value);
-      this.currentValue = valueObj;
-      this.model.valueUpdates.next(valueObj as any);
-      this.change.emit(valueObj);
+      this.inputValue = valueObj;
+      this.model.valueUpdates.next(this.inputValue);
    }
    if (event.data) {
      // this.group.markAsDirty();
@@ -98,6 +98,10 @@ export class DsDynamicTypeaheadComponent implements OnInit {
  }

  onBlurEvent(event: Event) {
+    if (!this.model.authorityOptions.closed && isNotEmpty(this.inputValue)) {
+      this.change.emit(this.inputValue);
+      this.inputValue = null;
+    }
    this.blur.emit(event);
  }

@@ -114,6 +118,7 @@ export class DsDynamicTypeaheadComponent implements OnInit {
  }

  onSelectItem(event: NgbTypeaheadSelectItemEvent) {
+    this.inputValue = null;
    this.currentValue = event.item;
    this.model.valueUpdates.next(event.item);
    this.change.emit(event.item);