nuxeo-development-framework 3.0.9 → 3.1.2

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

@@ -0,0 +1,99 @@
+.clear-date-icon {
+  color: #999;
+  font-size: 15px;
+}
+.input-container {
+  position: relative;
+  .form-control{
+    padding: 0px 35px;
+  }
+}
+.clear-date-btn {
+  align-items: center;
+  background: transparent;
+  border: 0px;
+  position: absolute;
+  right: 10px;
+  left: auto;
+  top: 50%;
+  margin-top: -9px;
+}
+.claendar-icon{
+  border: none;
+    background-color: transparent;
+    position: absolute;
+    // height: 100%;
+    top: 5px;
+    .icon{
+      font-size: 20px;
+      color: #495057;
+    }
+}
+.claendar-icon:focus{
+  outline: none;
+}
+.rtl .clear-date-btn {
+  left: 10px;
+  right: auto;
+}
+.rtl .owl-dt-container-info {
+  direction: rtl;
+}
+@mixin app-dynamic-form-dateitem-theme($theme) {
+  .app {
+    &-invisible-date-input {
+      height: 2px;
+      width: 0;
+      overflow: hidden;
+      opacity: 0;
+      border: none;
+      margin: 0;
+      padding: 0;
+      float: right;
+    }
+
+    &-dateitem-editable {
+      cursor: pointer;
+
+      &-controls {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        button.mat-icon-button {
+          line-height: 20px;
+          height: 20px;
+          width: 20px;
+        }
+
+        mat-icon {
+          width: 16px;
+          height: 16px;
+          opacity: 0.5;
+        }
+
+        &:hover mat-icon {
+          opacity: 1;
+        }
+
+        .app-datepicker-toggle {
+          flex: 1 0 auto;
+        }
+
+        mat-icon.app-date-reset-icon {
+          line-height: 10px;
+          font-size: 16px;
+          width: 16px;
+          height: 16px;
+          position: relative;
+          top: 4px;
+          padding-left: 8px;
+          opacity: 0.3;
+        }
+        &:hover mat-icon.app-date-reset-icon {
+          opacity: 1;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,210 @@
+import { Component, Input, OnDestroy, OnInit, Optional, Self, ViewChild, ViewEncapsulation } from '@angular/core';
+import { AbstractControl, ControlValueAccessor, NgControl } from '@angular/forms';
+import { DateAdapter } from '@angular/material/core';
+import { OWL_DATE_TIME_FORMATS } from '@busacca/ng-pick-datetime';
+import { MatDatetimepicker } from '@mat-datetimepicker/core';
+import { TranslateService } from '@ngx-translate/core';
+import { Moment } from 'moment';
+import moment from 'moment-es6';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { UserPreferencesService, UserPreferenceValues } from '../../../../Core/services/user/user-preferences.service';
+import { MomentDateAdapter } from '../../../../Core/utilities/moment-date-adapter';
+import { DynamicFormDateItemModel } from '../../models/dynamic-form.models';
+import { DynamicFormUpdateService } from '../../services/dynamic-form-update.service';
+
+export const MY_MOMENT_FORMATS = {
+  parseInput: 'l LT',
+  fullPickerInput: 'l LT',
+  datePickerInput: 'l',
+  timePickerInput: 'LT',
+  monthYearLabel: 'MMM YYYY',
+  dateA11yLabel: 'LL',
+  monthYearA11yLabel: 'MMMM YYYY',
+};
+/** @ignore */
+@Component({
+  providers: [
+    { provide: OWL_DATE_TIME_FORMATS, useValue: MY_MOMENT_FORMATS }
+  ],
+  selector: 'app-dynamic-form-dateitem',
+  templateUrl: './dynamic-form-dateitem.component.html',
+  styleUrls: ['./dynamic-form-dateitem.component.scss'],
+  encapsulation: ViewEncapsulation.None
+
+})
+export class DynamicFormDateItemComponent implements OnInit, OnDestroy, ControlValueAccessor {
+
+
+  @Input()
+  label;
+
+  @Input()
+  disabled = false;
+
+  inEdit = false;
+  editedValue: string;
+  errorMessages: string[];
+  valueSeparator: string;
+  @Input()
+  property: DynamicFormDateItemModel;
+
+  @Input()
+  editable: boolean = true;
+
+  @Input()
+  displayEmpty: boolean = true;
+
+  @Input()
+  min = null;
+  @Input()
+  max = null;
+  @Input()
+  startAt = null;
+
+  @Input()
+  displayClearAction: boolean = true;
+  @Input() pickerType: string = 'both';
+  @Input() selectMode: string = 'single';
+  @ViewChild('datetimePicker')
+  public datepicker: MatDatetimepicker<any>;
+
+  valueDate;
+  dateFormat: string;
+  @Input() isfilter= false; // showed error when building lib that this property is not exist 
+  @Input() placeholder= ''; // showed error when building lib that this property is not exist 
+  private onDestroy$ = new Subject<boolean>();
+
+  constructor(
+    private dynamicFormUpdateService: DynamicFormUpdateService,
+    private dateAdapter: DateAdapter<Moment>,
+    private userPreferencesService: UserPreferencesService,
+    public translate: TranslateService,
+    @Self() @Optional() public control: NgControl
+
+  ) {
+    this.control.valueAccessor = this;
+    this.dateFormat = 'mediumDate';
+  }
+  onChange: any = () => { };
+  onTouched: any = () => { };
+
+  isRequired() {
+    if (!this.control.control.validator) {
+      return false;
+    }
+
+    const validator = this.control.control.validator({} as AbstractControl);
+    return (validator && validator.required);
+  }
+  writeValue(obj: any): void {
+    if (this.selectMode === 'single') {
+      this.valueDate = moment(obj);
+    } else {
+      this.valueDate = obj;
+    }
+
+    // this.property.value = obj;
+
+    //  throw new Error('Method not implemented.');
+  }
+  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;
+  }
+  registerOnChange(fn: any) {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any) {
+    this.onTouched = fn;
+  }
+  setDisabledState?(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  hasErrors(): boolean {
+    return this.showError;
+  }
+
+  ngOnInit() {
+    this.userPreferencesService
+      .select(UserPreferenceValues.Locale)
+      .pipe(takeUntil(this.onDestroy$))
+      .subscribe(locale => {
+        // this.dateAdapter.setLocale(locale);
+        // this.property.locale = locale;
+      });
+
+    (<MomentDateAdapter>this.dateAdapter).overrideDisplayFormat = 'DD/MM/YYYY';
+
+    /* if (this.property.value) {
+       this.valueDate = moment(this.property.value);
+     } */
+  }
+
+  ngOnDestroy() {
+    this.onDestroy$.next(true);
+    this.onDestroy$.complete();
+  }
+
+  showProperty(): boolean {
+    return this.displayEmpty || !this.property.isEmpty();
+  }
+
+  showClearAction(): boolean {
+    return (
+      this.displayClearAction &&
+      (!this.property.isEmpty() || !!this.property.default)
+    );
+  }
+
+  isEditable(): boolean {
+    return this.editable;
+  }
+  isDisabled(): boolean {
+    return this.disabled;
+  }
+  showDatePicker() {
+    this.datepicker.open();
+  }
+
+  onDateChanged(newDateValue) {
+    if (this.valueDate) {
+      if (this.selectMode === 'single') {
+        const momentDate = moment(this.valueDate, this.dateFormat, true);
+        if (momentDate.isValid()) {
+          //this.property.value = momentDate.toDate();
+          this.onChange(momentDate.toDate());
+          this.onTouched();
+          // this.dynamicFormUpdateService.update(this.property, momentDate.toDate());
+        }
+      } else {
+        this.onChange(this.valueDate);
+        this.onTouched();
+      }
+
+    } else {
+      this.onChange(null);
+      this.onTouched();
+    }
+  }
+
+  onDateClear() {
+    this.valueDate = null;
+    this.onChange(this.valueDate);
+    this.onTouched();
+    // this.dynamicFormUpdateService.update(this.property, null);
+    //this.property.value = null;
+    this.property.default = null;
+  }
+}

package/src/lib/components/dynamic-form/components/dynamic-form-dateitem/owlDateTimeIntl.ts

@@ -0,0 +1,94 @@
+import { Injectable } from '@angular/core';
+import { DateTimeAdapter, OwlDateTimeIntl } from '@busacca/ng-pick-datetime';
+import { TranslateService } from '@ngx-translate/core';
+import { UserPreferencesService } from '../../../../Core/services/user/user-preferences.service';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class owlDateTimeIntl extends OwlDateTimeIntl {
+  cancelBtnLabel = 'Cancel';
+  setBtnLabel = 'Set';
+
+  private currentLang;
+
+  /** A label for the up second button (used by screen readers).  */
+  upSecondLabel = 'Add a second';
+
+  /** A label for the down second button (used by screen readers).  */
+  downSecondLabel = 'Minus a second';
+
+  /** A label for the up minute button (used by screen readers).  */
+  upMinuteLabel = 'Add a minute';
+
+  /** A label for the down minute button (used by screen readers).  */
+  downMinuteLabel = 'Minus a minute';
+
+  /** A label for the up hour button (used by screen readers).  */
+  upHourLabel = 'Add a hour';
+
+  /** A label for the down hour button (used by screen readers).  */
+  downHourLabel = 'Minus a hour';
+
+  /** A label for the previous month button (used by screen readers). */
+  prevMonthLabel = 'Previous month';
+
+  /** A label for the next month button (used by screen readers). */
+  nextMonthLabel = 'Next month';
+
+  /** A label for the previous year button (used by screen readers). */
+  prevYearLabel = 'Previous year';
+
+  /** A label for the next year button (used by screen readers). */
+  nextYearLabel = 'Next year';
+
+  /** A label for the previous multi-year button (used by screen readers). */
+  prevMultiYearLabel = 'Previous 21 years';
+
+  /** A label for the next multi-year button (used by screen readers). */
+  nextMultiYearLabel = 'Next 21 years';
+
+  /** A label for the 'switch to month view' button (used by screen readers). */
+  switchToMonthViewLabel = 'Change to month view';
+
+  /** A label for the 'switch to year view' button (used by screen readers). */
+  switchToMultiYearViewLabel = 'Choose month and year';
+
+  /** A label for the range 'from' in picker info */
+  rangeFromLabel = 'From';
+
+  /** A label for the range 'to' in picker info */
+  rangeToLabel = 'To';
+
+  /** A label for the hour12 button (AM) */
+  hour12AMLabel = 'AM';
+
+  /** A label for the hour12 button (PM) */
+  hour12PMLabel = 'PM';
+
+  constructor(
+    private translate: TranslateService,
+    private userPreference: UserPreferencesService,
+    private dateTimeAdapter: DateTimeAdapter<any>
+  ) {
+    super();
+    this.getLang();
+    this.translate.onLangChange.subscribe((lang) => {
+      this.getLang();
+    });
+  }
+
+  public getLang() {
+    this.currentLang = this.userPreference.locale;
+    this.dateTimeAdapter.setLocale(this.currentLang);
+    const properties = Object.getOwnPropertyNames(this);
+    properties.forEach((property) => {
+      if (typeof this[property] !== 'string') {
+        return;
+      }
+      this.translate.get('DATETIME_OWL.' + property).subscribe((text) => {
+        this[property] = text;
+      });
+    });
+  }
+}

package/src/lib/components/dynamic-form/components/dynamic-form-department/constants/department.ts

@@ -0,0 +1,12 @@
+export class DepartmentConstants {
+  public static fields = {
+    title: 'dc:title',
+    description: 'dc:description',
+    agencyCode: 'dept:agencyCode',
+    arabicName: 'dept:arabicName',
+    englishName: 'dept:englishName',
+    deptTypee: 'dept:deptTypee',
+    isAllowRecExternal: 'dept:isAllowRecExternal',
+    manager: 'dept:manager',
+  };
+}

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

@@ -0,0 +1,36 @@
+<ng-container *ngIf="label">
+  <div>
+    <label class="select-label"
+      >{{ label | translate
+      }}<span *ngIf="isRequired()" class="text-danger m-1">*</span></label
+    >
+  </div>
+</ng-container>
+<app-dynamic-form-treeview-select
+  [treeview]="treeview"
+  [treeViewAsFormControl]="treeViewAsFormControl"
+  [defaultSelect]="defaultSelect"
+  [multiple]="multiple"
+  [items]="data"
+  [pp_departmentNestedTree]="pp_departmentNestedTree"
+  [useCustomAddEditAction]="useCustomAddEditAction"
+  [customPrefix]="customPrefix"
+  [customParentProperty]="customParentProperty"
+  (valueChange)="getSelecteditems($event)"
+  [(value)]="selection"
+  (actionClicked)="onAction($event)"
+  class="dropdown-wrapper"
+  [ngClass]="{'input-filled' : selection && selection.length > 0 }"
+>
+</app-dynamic-form-treeview-select>
+<mat-error
+  [attr.data-automation-id]="'card-textitem-error-'"
+  class="app-textitem-editable-error"
+  *ngIf="hasErrors()"
+>
+  <ul>
+    <li *ngIf="control.errors.required">
+      {{ "VALIDATORS.REQUIRED" | translate }}
+    </li>
+  </ul>
+</mat-error>

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

@@ -0,0 +1,11 @@
+app-dynamic-form-department {
+  .dropdown {
+    border: 1px solid #ccc !important;
+    border-radius: 5px !important;
+  }
+  .input-filled {
+    .dropdown {
+      border-color: #1a96c6 !important;
+    }
+  }
+}

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

@@ -0,0 +1,230 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  OnInit,
+  Optional,
+  Output,
+  Self,
+  ViewEncapsulation,
+} from '@angular/core';
+import {
+  AbstractControl,
+  ControlValueAccessor,
+  FormControl,
+  NgControl,
+} from '@angular/forms';
+import { TreeviewItem } from 'ngx-treeview';
+import { Observable, Subscription } from 'rxjs';
+import { first } from 'rxjs/operators';
+import { TranslationService } from '../../../../Core/services/translation/translation.service';
+import { DepartmentApiService } from './services/department-api.service';
+
+/**
+ * A department tree dropdown input already with departments backend,
+ *  that can be used inside reactive or template driven forms
+ * @title
+ * Department tree dropdown
+ * @example
+ *   <app-dynamic-form-department
+ *       label="Field Label"
+ *       placeholder="Placeholder text"
+ *       formControlName="controlName"
+ *     >
+ *   </app-dynamic-form-department>
+ */
+@Component({
+  selector: 'app-dynamic-form-department',
+  templateUrl: './dynamic-form-department.component.html',
+  styleUrls: ['./dynamic-form-department.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class DynamicFormDepartmentComponent
+  implements ControlValueAccessor, OnInit, OnDestroy {
+  data = [];
+  /** is tree View or dropdown view */
+  @Input() treeview = false;
+  /** use tree view inside form */
+  @Input()
+  treeViewAsFormControl = false;
+  /** Placeholder text */
+  @Input() placeholder;
+  /** Can select multiple */
+  @Input() multiple = false;
+  /** is tree searchable */
+  @Input() searchable = true;
+  /** Input Field label */
+  @Input() label;
+  @Input() defaultSelect = false;
+
+  /** custom page provider to get department nested tree from it can be passed from outside or not passed and use the defulte value */
+  @Input() pp_departmentNestedTree;
+  /** custom page provider to get department tree from it can be passed from outside or not passed and use the defulte value */
+  @Input() pp_departmentTree;
+  /** custom prefix to be used for adapting data coming from api */
+  @Input() customPrefix;
+  /** to allow custom action to be performed outside the component */
+  @Input() useCustomAddEditAction;
+    /** to allow custom parent property name  to be paassed from outside the component */
+    @Input() customParentProperty;
+
+  /** emitted when item is selected */
+  @Output() onSelecting = new EventEmitter();
+  /** emitted when action is clicked */
+  @Output() actionClicked = new EventEmitter();
+  loading = false;
+  selection;
+  arabic = false;
+  languageSubscription: Subscription;
+  // function related to value accessor
+  propagateChange: any = () => { };
+  validateFn: any = () => { };
+  public onTouched: any = () => {
+    /*Empty*/
+  };
+  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;
+  }
+  constructor(
+    private translation: TranslationService,
+    private departmentApi: DepartmentApiService,
+    @Self() @Optional() public control: NgControl
+  ) {
+    this.control.valueAccessor = this;
+  }
+
+  ngOnInit(): void {
+    this.languageSubscription = this.translation.isArabic.subscribe(
+      async (res) => {
+        this.arabic = res;
+        await this.getLisOfOptions();
+        this.writeValue(this.selection);
+      }
+    );
+  }
+
+  ngOnDestroy() {
+    this.languageSubscription ? this.languageSubscription.unsubscribe() : '';
+  }
+
+  async recursiveFill(entries, level = 0): Promise<any> {
+    return await Promise.all(
+      entries.map(async (item: any) => {
+        let treeViewObj = this.treeview
+          ? {
+            text: this.arabic
+              ? item.properties
+                ? item.properties[this.customPrefix ? (this.customPrefix + ':arabicName') : 'dept:arabicName']
+                : '--'
+              : item.properties
+                ? item.properties[this.customPrefix ? (this.customPrefix + ':englishName') : 'dept:englishName']
+                : '--',
+            value: { ...item, level },
+          }
+          : {
+            text: this.arabic
+              ? item.properties
+                ? item.properties[this.customPrefix ? (this.customPrefix + ':arabicName') : 'dept:arabicName']
+                : '--'
+              : item.properties
+                ? item.properties[this.customPrefix ? (this.customPrefix + ':englishName') : 'dept:englishName']
+                : '--',
+            value:  this.multiple ? item.uid : item.title,
+          };
+
+        const treeItem = new TreeviewItem({
+          ...treeViewObj,
+          collapsed: level >= 2 && this.treeview ? true : false,
+          ...(this.multiple && { checked: false }),
+        });
+        if (
+          item.contextParameters &&
+          item.contextParameters.children.entries.length
+        ) {
+          if (
+            !this.treeview &&
+            (level == 2 || (level > 2 && (level + 1) % 3 == 0))
+          ) {
+            const extended = await this.departmentApi
+              .getDepartmentNestedTree(item.title, this.pp_departmentNestedTree , this.customParentProperty)
+              .pipe(first())
+              .toPromise();
+            treeItem.children = await this.recursiveFill(
+              extended.entries,
+              level + 1
+            );
+          } else {
+            treeItem.children = await this.recursiveFill(
+              item.contextParameters.children.entries,
+              level + 1
+            );
+          }
+        }
+        return treeItem;
+      })
+    );
+  }
+
+  async getLisOfOptions() {
+    this.departmentApi.getDepartmentTree(this.pp_departmentTree).subscribe(async (res) => {
+      this.loading = false;
+      this.data = await this.recursiveFill(res.entries);
+    });
+  }
+
+  getSelecteditems(selectedItems): void {
+    this.propagateChange(selectedItems);
+    this.onSelecting.emit(selectedItems);
+  }
+
+  writeValue(value): void {
+    // if (value) { // removed to allow to reset value of tree
+      this.selection = value;
+    // }
+  }
+
+  registerOnChange(fn): void {
+    this.propagateChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  validate(c: FormControl): any {
+    return this.validateFn(c);
+  }
+  isRequired(): boolean {
+    if (!this.control || !this.control.control.validator) {
+      return false;
+    }
+
+    const validator = this.control.control.validator({} as AbstractControl);
+    return validator && validator.required;
+  }
+  hasErrors(): boolean {
+    return this.showError;
+  }
+  // onPlusClicked(e) {
+  //   this.plusClicked.next(e);
+  // }
+
+  onAction(e) {
+    this.actionClicked.emit(e);
+  }
+}
+
+
+// http://35.153.66.52:8080/nuxeo/api/v1/search/pp/PP_Department/execute?pageProvider=PP_Department&currentPageIndex=0&offset=0&pageSize=40&quickFilters=Parent%20Dept
+// http://35.153.66.52:8080/nuxeo/api/v1/search/pp/PP_OS_Departments/execute?pageProvider=PP_OS_Departments&currentPageIndex=0&offset=0&pageSize=40&quickFilters=Parent%20Dept