nuxeo-development-framework 4.1.4 → 4.1.6

package/src/lib/components/dynamic-form/components/dynamic-form-field/dynamic-form-field.component.ts

@@ -0,0 +1,92 @@
+import { AfterViewInit, ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit, Optional, Self } from '@angular/core';
+import { AbstractControl, ControlValueAccessor, NgControl } from '@angular/forms';
+import { TranslateService } from '@ngx-translate/core';
+import { Subject } from 'rxjs';
+
+@Component({
+  selector: 'cts-dynamic-form-field',
+  templateUrl: './dynamic-form-field.component.html',
+  styleUrls: ['./dynamic-form-field.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DynamicFormFieldComponent implements OnInit, OnDestroy, ControlValueAccessor {
+  @Input() disabled = false;
+  @Input() field;
+  value: any;
+  private onDestroy$ = new Subject<boolean>();
+
+  constructor(
+    public translate: TranslateService,
+    @Self() @Optional() private control: NgControl
+
+  ) {
+    this.control.valueAccessor = this;
+
+  }
+  onChange: any = () => { };
+  onTouched: any = () => { };
+  public get invalid(): boolean {
+    return this.control ? this.control.invalid : false;
+  }
+
+  public get showError(): boolean {
+    if (!this.control) {
+      return false;
+    }
+
+    const { dirty, touched } = this.control;
+
+    return this.invalid ? (dirty || touched) : false;
+  }
+  Validator = (control: AbstractControl): { [key: string]: boolean } | null => {
+
+    if (!this.value.isValid) {
+      return { formValidator: true };
+    }
+    return null;
+  }
+  isRequired(): boolean {
+    if (!this.control.control.validator) {
+      return false;
+    }
+
+    const validator = this.control.control.validator({} as AbstractControl);
+    return (validator && validator.required);
+  }
+  writeValue(value: any): void {
+
+    this.value = value;
+  }
+
+  ngOnInit(): void {
+    this.control.control.setValidators([this.Validator]);
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+  setDisabledState?(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+
+
+  ngOnDestroy(): void {
+    this.onDestroy$.next(true);
+    this.onDestroy$.complete();
+  }
+
+
+  onChanged(value): void {
+    console.log(value);
+    this.value = value;
+    this.onChange(value);
+    this.onTouched();
+
+  }
+
+}

package/src/lib/components/dynamic-form/components/dynamic-form-hijri-dateitem/dynamic-form-hijri-dateitem.component.html

@@ -0,0 +1,29 @@
+<ng-container *ngIf="label">
+  <div>
+    <label class="hijri-date-lable"
+      >{{ label | translate
+      }}<span *ngIf="isRequired()" class="text-danger m-1">*</span></label
+    >
+  </div>
+</ng-container>
+<div class="hijri-date-container">
+  <hijri-gregorian-datepicker
+    [placeHolder]="placeHolder | translate"
+    [(selectedDate)]="date"
+    [isRequired]="true"
+    [GregLabel]="'gregorian' | translate"
+    [hijriLabel]="'hijri' |translate"
+    [selectedDateType]="selectedDateType"
+    [disabled]="isDisabled"
+    [readonly]="isReadOnly"
+    [minHijri]="minHijri"
+    [maxHijri]="maxHijri"
+    [minGreg]="minGreg"
+    [maxGreg]="maxGreg"
+    [range]="range"
+    [vertical]="vertical"
+    (selectedDateChange)="setValue($event)"
+    #datePicker
+  >
+  </hijri-gregorian-datepicker>
+</div>

package/src/lib/components/dynamic-form/components/dynamic-form-hijri-dateitem/dynamic-form-hijri-dateitem.component.scss

@@ -0,0 +1,54 @@
+@import "../../../../assets/scss/myApp.scss";
+.hijri-date-lable {
+  color: #646f85;
+  font-size: 13px;
+  margin-bottom: 5px;
+}
+hijri-gregorian-datepicker {
+  .form-group {
+    .requiredInput {
+      display: none;
+    }
+    .input-group {
+      display: flex;
+      flex-wrap: nowrap;
+      align-items: stretch;
+      width: 100%;
+      hijri-date-picker {
+        display: block;
+      }
+      .form-control {
+        border: 1px solid #ccc;
+        border-start-start-radius: 5px;
+        border-end-start-radius: 5px;
+        border-start-end-radius: 0;
+        border-end-end-radius: 0;
+        background-color: rgba(143, 152, 170, 0.1);
+        height: 40px;
+      }
+
+      .input-group-append {
+        margin: 0;
+        .btn {
+          // border-radius: 0px 5px 5px 0px;
+          border-start-end-radius: 5px !important;
+          border-end-end-radius: 5px !important;
+          border-start-start-radius: 0 !important;
+          border-end-start-radius: 0 !important;
+          display: block;
+          margin: 0;
+          border: none;
+          color: $white;
+          background-color: $gray-200;
+        }
+        .btn:hover {
+          background-color: $gray-300;
+        }
+        .active {
+          display: none;
+        }
+      }
+    }
+  }
+}
+

package/src/lib/components/dynamic-form/components/dynamic-form-hijri-dateitem/dynamic-form-hijri-dateitem.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DynamicFormHijriDateitemComponent } from './dynamic-form-hijri-dateitem.component';
+
+describe('DynamicFormHijriDateitemComponent', () => {
+  let component: DynamicFormHijriDateitemComponent;
+  let fixture: ComponentFixture<DynamicFormHijriDateitemComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DynamicFormHijriDateitemComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DynamicFormHijriDateitemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/dynamic-form/components/dynamic-form-hijri-dateitem/dynamic-form-hijri-dateitem.component.ts

@@ -0,0 +1,152 @@
+import {
+  Component,
+  ViewChild,
+  OnInit,
+  Optional,
+  Self,
+  Input,
+  ViewEncapsulation,
+  EventEmitter,
+  Output,
+} from '@angular/core';
+import { NgbDate, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
+
+import * as momentjs from 'moment';
+const moment = momentjs;
+
+import * as moment_ from 'moment-hijri';
+import {
+  AbstractControl,
+  ControlValueAccessor,
+  NgControl,
+} from '@angular/forms';
+import { DateType } from '../../../hijri-gregorian-datepicker/utils/consts';
+import { DateFormatterService } from '../../../hijri-gregorian-datepicker/services/date-formatter.service';
+const momentHijri = moment_;
+/**
+ * A Hijri and gregorian datepicker
+ *  that can be used inside reactive or template driven forms
+ * @title
+ * Hijri Gregorian Datepicker
+ *
+ * @example
+ * <cts-dynamic-form-hijri-dateitem
+ *     formControlName="controlName"
+ *     label="PATH.TO.LABEL.TRANSLATION"
+ *     [placeholder]="'PATH.TO.PLACEHOLDER.STRING'"
+ *     [minGreg]="maxDate"
+ *   >
+ *   </cts-dynamic-form-hijri-dateitem>
+ */
+@Component({
+  selector: 'cts-dynamic-form-hijri-dateitem',
+  templateUrl: './dynamic-form-hijri-dateitem.component.html',
+  styleUrls: ['./dynamic-form-hijri-dateitem.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class DynamicFormHijriDateitemComponent
+  implements OnInit, ControlValueAccessor {
+  /** Minimum Hijri Date */
+  @Input()
+  minHijri: NgbDate;
+  /** Max Hijri Date */
+  @Input()
+  maxHijri: NgbDate;
+  /** Minimum Gregorian Date */
+  @Input()
+  minGreg: NgbDate;
+  /** Max Gregorian Date */
+  @Input()
+  maxGreg: NgbDate;
+  /** Field Label */
+  @Input()
+  label;
+  /** Is input disabled */
+  @Input()
+  isDisabled: boolean;
+  /** is input a range picker */
+  @Input()
+  range: boolean;
+  /** list inputs vertically (for range only) */
+  @Input()
+  vertical = false;
+  /** Sets picker to readonly mode */
+  @Input()
+  isReadOnly: boolean = true;
+  @Input()
+  placeholder: string;
+  /** Emitted when the value changes */
+  @Output()
+  valueChanged: EventEmitter<any> = new EventEmitter();
+  date: any;
+  dateString: string;
+  placeHolder: string;
+  selectedDateType = DateType.Gregorian;
+  onChange: any = () => { };
+  onTouched: any = () => { };
+
+  @ViewChild('datePicker') startDatePicker: any;
+
+  constructor(
+    private dateFormatterService: DateFormatterService,
+    @Self() @Optional() private control: NgControl
+  ) {
+    this.control.valueAccessor = this;
+    if (!this.range) {
+      // this.date = this.dateFormatterService.GetTodayGregorian();
+    }
+  }
+  writeValue(obj: any): void {
+    if (obj) {
+      if (!this.range) {
+        this.date = this.dateFormatterService.ToGregorianDateStruct(obj, '');
+      } else if (obj.from && obj.to) {
+        this.date = {
+          from: this.dateFormatterService.ToGregorianDateStruct(obj.from, ''),
+          to: this.dateFormatterService.ToGregorianDateStruct(obj.to, '')
+
+        }
+      }
+    } else {
+      this.date = null; // to reset ui too
+    }
+  }
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+  setDisabledState?(isDisabled: boolean): void { }
+
+  ngOnInit(): void {
+    this.placeHolder = (this.placeholder) ? this.placeholder : 'datePlaceHolder';
+  }
+  ngAfterViewInit(): void {
+    //Called after ngAfterContentInit when the component's view has been initialized. Applies to components only.
+    //Add 'implements AfterViewInit' to the class.
+    //  console.log('startDatePicker', this.startDatePicker);
+  }
+
+  removelable() { }
+
+  setValue(event) {
+    this.dateString = this.startDatePicker.getSelectedDate();
+    if (this.dateString !== 'Invalid date') {
+      this.onChange(this.dateString);
+      this.valueChanged.emit(this.dateString);
+    }else{
+      // set value to null when clear date 
+      this.onChange(null),
+      this.valueChanged.emit(null)
+    }
+  }
+  isRequired() {
+    if (!this.control?.control || !this.control.control.validator) {
+      return false;
+    }
+
+    const validator = this.control.control.validator({} as AbstractControl);
+    return validator && validator.required;
+  }
+}

package/src/lib/components/dynamic-form/components/dynamic-form-item-dispatcher/dynamic-form-item-dispatcher.component.ts

@@ -0,0 +1,105 @@
+import {
+  Component,
+  ComponentFactoryResolver,
+  Input,
+  OnChanges,
+  SimpleChange,
+  SimpleChanges,
+  ViewChild,
+  ViewEncapsulation
+} from '@angular/core';
+import { CardItemTypeService } from '../../services/card-item-types.service';
+import { DynamicFormContentProxyDirective } from '../../directives/dynamic-form-content-proxy.directive';
+import { DynamicFormItem } from '../../interfaces/dynamic-form-item.interface';
+
+/** @ignore */
+@Component({
+  selector: 'app-dynamic-form-item-dispatcher',
+  template: '<ng-template appDynamicFormContentProxy></ng-template>',
+  encapsulation: ViewEncapsulation.None
+})
+export class DynamicFormItemDispatcherComponent implements OnChanges {
+  @Input()
+  property: DynamicFormItem;
+
+  @Input()
+  editable: boolean;
+
+  @Input()
+  displayEmpty: boolean = true;
+
+  @Input()
+  displayNoneOption: boolean = true;
+
+  @Input()
+  displayClearAction: boolean = true;
+
+  @ViewChild(DynamicFormContentProxyDirective, { static: true })
+  private content: DynamicFormContentProxyDirective;
+
+  private loaded: boolean = false;
+  private componentReference: any = null;
+
+  public ngOnInit;
+  public ngDoCheck;
+
+  constructor(
+    private cardItemTypeService: CardItemTypeService,
+    private resolver: ComponentFactoryResolver
+  ) {
+    const dynamicLifeCycleMethods = [
+      'ngOnInit',
+      'ngDoCheck',
+      'ngAfterContentInit',
+      'ngAfterContentChecked',
+      'ngAfterViewInit',
+      'ngAfterViewChecked',
+      'ngOnDestroy'
+    ];
+
+    dynamicLifeCycleMethods.forEach(method => {
+      this[method] = this.proxy.bind(this, method);
+    });
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (!this.loaded) {
+      this.loadComponent();
+      this.loaded = true;
+    }
+
+    Object.keys(changes)
+      .map(changeName => [changeName, changes[changeName]])
+      .forEach(([inputParamName, simpleChange]: [string, SimpleChange]) => {
+        this.componentReference.instance[inputParamName] =
+          simpleChange.currentValue;
+      });
+
+    this.proxy('ngOnChanges', changes);
+  }
+
+  private loadComponent() {
+    const factoryClass = this.cardItemTypeService.resolveComponentType(
+      this.property
+    );
+
+    const factory = this.resolver.resolveComponentFactory(factoryClass);
+    this.componentReference = this.content.viewContainerRef.createComponent(
+      factory
+    );
+    this.componentReference.instance.editable = this.editable;
+    this.componentReference.instance.property = this.property;
+    this.componentReference.instance.displayEmpty = this.displayEmpty;
+    this.componentReference.instance.displayNoneOption = this.displayNoneOption;
+    this.componentReference.instance.displayClearAction = this.displayClearAction;
+  }
+
+  private proxy(methodName, ...args) {
+    if (this.componentReference.instance[methodName]) {
+      this.componentReference.instance[methodName].apply(
+        this.componentReference.instance,
+        args
+      );
+    }
+  }
+}

package/src/lib/components/dynamic-form/components/dynamic-form-mapitem/dynamic-form-mapitem.component.html

@@ -0,0 +1,31 @@
+<div
+  [attr.data-automation-id]="'card-mapitem-label-' + property.key"
+  class="app-property-label"
+  *ngIf="showProperty()"
+>
+  {{ property.label | translate }}
+</div>
+<div class="app-property-value">
+  <div>
+    <span
+      *ngIf="!isClickable(); else elseBlock"
+      [attr.data-automation-id]="'card-mapitem-value-' + property.key"
+    >
+      <span *ngIf="showProperty()">{{ property.displayValue }}</span>
+    </span>
+    <ng-template #elseBlock>
+      <span
+        class="app-mapitem-clickable-value"
+        (click)="clicked()"
+        [attr.data-automation-id]="'card-mapitem-value-' + property.key"
+      >
+        <span *ngIf="showProperty(); else elseEmptyValueBlock">{{
+          property.displayValue
+        }}</span>
+      </span>
+    </ng-template>
+  </div>
+  <ng-template #elseEmptyValueBlock>
+    {{ property.default | translate }}
+  </ng-template>
+</div>

package/src/lib/components/dynamic-form/components/dynamic-form-mapitem/dynamic-form-mapitem.component.scss

@@ -0,0 +1,5 @@
+.app {
+  &-mapitem-clickable-value {
+    cursor: pointer !important;
+  }
+}

package/src/lib/components/dynamic-form/components/dynamic-form-mapitem/dynamic-form-mapitem.component.ts

@@ -0,0 +1,32 @@
+import { Component, Input } from '@angular/core';
+import { DynamicFormUpdateService } from '../../services/dynamic-form-update.service';
+import { DynamicFormMapItemModel } from '../../models/dynamic-form.models';
+
+/** @ignore */
+
+@Component({
+  selector: 'app-dynamic-form-mapitem',
+  templateUrl: './dynamic-form-mapitem.component.html',
+  styleUrls: ['./dynamic-form-mapitem.component.scss']
+})
+export class DynamicFormMapItemComponent {
+  @Input()
+  property: DynamicFormMapItemModel;
+
+  @Input()
+  displayEmpty: boolean = true;
+
+  constructor(private dynamicFormUpdateService: DynamicFormUpdateService) {}
+
+  showProperty() {
+    return this.displayEmpty || !this.property.isEmpty();
+  }
+
+  isClickable() {
+    return this.property.clickable;
+  }
+
+  clicked(): void {
+    this.dynamicFormUpdateService.clicked(this.property);
+  }
+}

package/src/lib/components/dynamic-form/components/dynamic-form-options/dynamic-form-options.component.html

@@ -0,0 +1,56 @@
+<!-- template for viewing single select selected value -->
+<ng-container *ngIf="multiple">
+  <ng-container *ngIf="label">
+    <div>
+      <label class="radio-label"
+        >{{ label | translate
+        }}<span *ngIf="isRequired()" class="text-danger m-1">*</span></label
+      >
+    </div>
+  </ng-container>
+  <div class="option-wrapper" *ngFor="let item of data ; let i = index">
+    <span>
+      <input
+        id="item-{{ i }}"
+        type="checkbox"
+        (change)="
+          emitSelection(
+            bindValue ? item[bindValue] : item,
+            $event.target.checked
+          )
+        "
+        [checked]="containsValue(bindValue ? item[bindValue] : item, selection)"
+      />
+    </span>
+    <span class="label-wrapper">
+      {{ (bindLabel ? item[bindLabel] : item) | translate }}
+    </span>
+  </div>
+</ng-container>
+<ng-container *ngIf="!multiple">
+  <ng-container *ngIf="label">
+    <div>
+      <label class="radio-label"
+        >{{ label | translate
+        }}<span *ngIf="isRequired()" class="text-danger m-1">*</span></label
+      >
+    </div>
+  </ng-container>
+  <div class="radio-option">
+    <mat-radio-group
+      [(ngModel)]="selectedItem"
+      (ngModelChange)="onSelectedItemChanged($event)"
+      class="radio-group"
+    >
+      <mat-radio-button
+        class="radio-button"
+        *ngFor="let item of data"
+        [value]="bindValue ? item[bindValue] : item"
+      >
+        {{ (bindLabel ? item[bindLabel] : item) | translate }}
+      </mat-radio-button>
+    </mat-radio-group>
+  </div>
+</ng-container>
+<!-- template for viewing multi select selected values -->
+<!-- [checked]="containsValue(bindValue ? item[bindValue] : item,selectedItem)" -->

package/src/lib/components/dynamic-form/components/dynamic-form-options/dynamic-form-options.component.scss

@@ -0,0 +1,24 @@
+.radio-label {
+  font-size: 17px;
+  margin-bottom: 1px;
+}
+.radio-option {
+  .radio-group {
+    display: flex;
+    column-gap: 10px;
+  }
+  display: flex;
+  column-gap: 4px;
+  .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
+    opacity: 0 !important; /*click effect color change*/
+    background-color: #00dca5 !important;
+  }
+
+  .mat-radio-button.mat-accent .mat-radio-inner-circle {
+    background-color: #00dca5 !important; /*inner circle color change*/
+  }
+
+  .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
+    border-color: #00dca5 !important; /*outer ring color change*/
+  }
+}

package/src/lib/components/dynamic-form/components/dynamic-form-options/dynamic-form-options.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DynamicFormOptionsComponent } from './dynamic-form-options.component';
+
+describe('DynamicFormOptionsComponent', () => {
+  let component: DynamicFormOptionsComponent;
+  let fixture: ComponentFixture<DynamicFormOptionsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DynamicFormOptionsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DynamicFormOptionsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});