nuxeo-development-framework 3.0.9 → 3.1.2

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();
+  });
+});

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

@@ -0,0 +1,110 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Optional,
+  Output,
+  Self,
+  ViewEncapsulation,
+} from '@angular/core';
+import {
+  AbstractControl,
+  ControlValueAccessor,
+  NgControl,
+} from '@angular/forms';
+import { json } from '@rxweb/reactive-form-validators';
+/**
+ * Options group input that can be used inside reactive or template driven forms
+ * @title
+ * Options Group
+ * @example
+ *   <cts-dynamic-form-options
+ *    [label]="'Choose an item'"
+ *    [data]="arrayOfItems"
+ *    [bindLabel]="'name'"
+ *    [bindValue]="'id'"
+ *    [multiple]="false"
+ *    formControlName="option">
+ * </cts-dynamic-form-options>
+ */
+@Component({
+  selector: 'cts-dynamic-form-options',
+  templateUrl: './dynamic-form-options.component.html',
+  styleUrls: ['./dynamic-form-options.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class DynamicFormOptionsComponent implements ControlValueAccessor {
+  /** Radio group label */
+  @Input()
+  label;
+  /** array of options */
+  @Input()
+  data;
+  /** bind label to option object property */
+  @Input() bindLabel: string;
+  /** bind value to option object property */
+  @Input() bindValue: string;
+  /** can select multiple (checkboxes) or (radios) */
+  @Input() multiple = false;
+  // @Output() onSelectItems = new EventEmitter();
+
+  selection = [];
+  selectedItem: any;
+  onChange: any = () => {};
+  onTouched: any = () => {};
+  constructor(@Self() @Optional() private control: NgControl) {
+    this.control.valueAccessor = this;
+  }
+  ngOnInit(): void { }
+
+  writeValue(value) {
+    if (value && this.multiple) {
+      this.selection = [...value];
+    }
+    if (value && !this.multiple) {
+      this.selectedItem = value;
+    }
+  }
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+  setDisabledState?(isDisabled: boolean): void {
+    throw new Error('Method not implemented.');
+  }
+  isRequired() {
+    if (!this.control || !this.control.control.validator) {
+      return false;
+    }
+
+    const validator = this.control.control.validator({} as AbstractControl);
+    return validator && validator.required;
+  }
+
+  //multiple functions
+  emitSelection(value, isChecked: boolean) {
+    if (isChecked) {
+      this.selection.push(value);
+    } else {
+      this.selection = this.selection.filter((item) => {
+        return typeof value === 'object'
+          ? JSON.stringify(value) != JSON.stringify(item)
+          : value != item;
+      });
+    }
+    this.onChange(this.selection);
+  }
+  containsValue(value, list: any[]) {
+    return typeof value === 'object'
+      ? list.some((elem) => JSON.stringify(elem) === JSON.stringify(value))
+      : list.includes(value);
+  }
+
+  // !multiple functions
+  onSelectedItemChanged(event) {
+    this.onChange(this.selectedItem);
+  }
+}

package/src/lib/components/dynamic-form/components/dynamic-form-select-tag/dynamic-form-select-tag.component.html

@@ -0,0 +1,27 @@
+<ng-container *ngIf="label">
+  <div>
+    <label class="select-label"
+      >{{ label | translate
+      }}<span *ngIf="isRequired()" class="text-danger m-1">*</span></label
+    >
+  </div>
+</ng-container>
+<div class="tags">
+  <ng-select
+    [items]="tags$ | async"
+    bindLabel="displayLabel"
+    [addTag]="true"
+    [addTagText]="'Tags.add' | translate"
+    [multiple]="true"
+    [hideSelected]="true"
+    [minTermLength]="2"
+    [loading]="tagsLoading"
+    [typeToSearchText]="'Tags.typeToSearchText' | translate"
+    [typeahead]="tagsInput$"
+    [(ngModel)]="selectedTags"
+    (change)="emitSelection($event)"
+    required
+    [placeholder]="'Tags.placeholder' | translate"
+  >
+  </ng-select>
+</div>

package/src/lib/components/dynamic-form/components/dynamic-form-select-tag/dynamic-form-select-tag.component.scss

@@ -0,0 +1,100 @@
+@import "../../../../assets/scss/myApp.scss";
+.select-label {
+  color: #8f98aa;
+  font-size: 12px;
+  margin-bottom: 0px;
+}
+
+.tags {
+  .ng-select-container {
+    border: 1px solid #ccc !important;
+    border-radius: 5px !important;
+    background-color: rgba(143, 152, 170, 0.1) !important;
+    height: 40px !important;
+    box-shadow: none !important;
+    .ng-value-container {
+      padding: 5px 7px 0px !important;
+      .ng-placeholder {
+        padding: 0px 5px 0px;
+        font-size: 12px;
+        margin-top: 6px;
+      }
+      .ng-value {
+        color: #495057;
+      }
+    }
+    .ng-arrow-wrapper {
+      padding: 0px 20px;
+    }
+    .ng-input {
+      left: 10px;
+      right: 10px;
+      width: auto;
+      input {
+      }
+    }
+  }
+}
+
+.ng-select-disabled {
+  .ng-select-container {
+    background-color: #e9ecef !important;
+  }
+}
+.ng-dropdown-panel {
+  .ng-dropdown-panel-items {
+    .ng-option {
+      .option-wrapper {
+        .check-box-wrapper {
+          position: relative;
+          input {
+            visibility: hidden;
+            width: 20px;
+            height: 20px;
+          }
+          .icon-wrapper {
+            position: absolute;
+            top: 0px;
+            left: 0px;
+            width: 20px;
+            height: 20px;
+            border: 1px solid $blue;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            .icon {
+              color: $blue;
+              display: none;
+              justify-content: center;
+              align-items: center;
+              font-weight: bold;
+            }
+          }
+        }
+        .label-wrapper {
+        }
+      }
+    }
+    .ng-option-selected {
+      .option-wrapper {
+        .check-box-wrapper {
+          .icon-wrapper {
+            .icon {
+              display: flex;
+            }
+          }
+        }
+        .label-wrapper {
+          color: $blue;
+        }
+      }
+    }
+  }
+}
+
+.ng-select {
+  .ng-select-focused:not(.ng-select-opened) .ng-select-container {
+    border-color: #ccc;
+    box-shadow: none;
+  }
+}

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

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