nuxeo-development-framework 3.1.6 → 3.1.8

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

@@ -1,246 +0,0 @@
-@import "../../../../assets/scss/myApp.scss";
-.caret-icon {
-  color: #6c757d;
-  font-size: 14px;
-}
-.multiple-treeview {
-  .mat-checkbox-ripple .mat-ripple-element,
-  .mat-checkbox-checked.mat-accent .mat-checkbox-background {
-    background-color: $green-300 !important;
-  }
-  .mat-checkbox-ripple .mat-ripple-element {
-    position: fixed;
-    left: inherit;
-    top: inherit;
-    transform: translate(-3px, -3px) !important;
-  }
-  mat-checkbox {
-    .mat-checkbox-background {
-      background-color: $gray-100 !important;
-    }
-    .mat-checkbox-inner-container {
-      // transform: scale(1.1);
-    }
-  }
-}
-
-.form-check-label-treeview {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  .hoverField {
-    display: none;
-    align-items: center;
-    text-align: center;
-    span {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin: 0px 3px;
-      border: none;
-      background-color: snow;
-      background-image: linear-gradient(to right, #0dbab5, #1a96c6);
-      height: 30px;
-      width: 30px;
-      color: white;
-      border-radius: 5px;
-      // padding: 10px;
-      list-style: none;
-      margin-inline-end: 4px;
-      .bi-plus {
-        font-size: 28px;
-        display: flex;
-        justify-content: center;
-      }
-    }
-    .add-btn {
-      width: 164px;
-      padding: 1px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      font-size: 13px;
-      background-color: $cyan-50;
-      border-radius: 5px;
-      border: 0;
-      color: $white;
-      --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
-        0 1px 2px 0 rgba(0, 0, 0, 0.06);
-      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
-        var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-    }
-    .plus-btn {
-      display: flex;
-      font-size: 28px;
-      align-items: center;
-    }
-  }
-}
-.selected {
-  background-color: $gray-50;
-  .hoverField {
-    display: flex !important;
-  }
-}
-.selected-form-control {
-  background-color: $gray-100;
-  .hoverField {
-    display: flex !important;
-  }
-}
-.treeview-item {
-  .row-item {
-    display: flex;
-    align-items: center;
-    padding: 5px 10px;
-    .multiple-checkBox {
-      margin-inline-start: 4px;
-      margin-inline-end: 4px;
-    }
-  }
-  .active {
-    background-color: #f5f6f8;
-  }
-}
-.treeview-row {
-  display: flex;
-  align-items: center;
-  &:hover {
-    background-color: $gray-50;
-  }
-}
-.treeview-row-form-control {
-  display: flex;
-  align-items: center;
-  &:hover {
-    background-color: $gray-100;
-  }
-}
-label {
-  margin-bottom: 0;
-  cursor: pointer;
-}
-
-.bi {
-  cursor: pointer;
-  margin-right: 0.3rem;
-}
-ngx-treeview {
-  .treeview-container {
-    max-height: 200px !important;
-    overflow-x: hidden;
-    scrollbar-color: $gray-200 transparent !important;
-    scrollbar-width: thin !important;
-    overflow-y: auto;
-  }
-  .select-default{
-    display: flex;
-    justify-content: start;
-    margin-top: 1px;
-    font-size: 13px;
-    cursor: pointer;
-    margin-bottom: 3px;
-    margin-top: 4px;
-
-  }
-  .dropdown-divider-noMargin{
-    margin-top: 0px !important;
-  }
-}
-.tree-view {
-  ngx-treeview {
-    .treeview-container {
-      max-height: 500px !important;
-      overflow-x: hidden;
-    }
-  }
-}
-.tree-view-form-control {
-  ngx-treeview {
-    .treeview-container {
-      max-height: 300px !important;
-      overflow-x: hidden;
-    }
-  }
-}
-ngx-dropdown-treeview {
-  .dropdown {
-    .dropdown-menu {
-      margin-top: 0 !important;
-      width: 100%;
-    }
-    .btn-outline-secondary {
-      background-color: rgba(143, 152, 170, 0.1);
-      border: none !important;
-    }
-    .btn-outline-secondary:hover {
-      color: #6c757d !important;
-    }
-    .btn-outline-secondary:focus {
-      box-shadow: none !important;
-    }
-    .btn-outline-secondary:active {
-      background-color: rgba(143, 152, 170, 0.1) !important;
-      border: none !important;
-      color: #6c757d !important;
-    }
-  }
-  .dropdown::after {
-    position: static !important;
-  }
-  .show {
-    .dropdown-toggle {
-      background-color: rgba(143, 152, 170, 0.1) !important;
-      border: none !important;
-      color: #6c757d !important;
-    }
-  }
-}
-.rtl {
-  .treeview-item .treeview-item {
-    margin-right: 2rem !important;
-    margin-left: 0rem !important;
-  }
-  .row-all .col-12 {
-    text-align: right;
-    .pull-right {
-      float: left !important;
-    }
-  }
-  .form-check.form-check-inline {
-    margin-right: 0rem !important;
-  }
-  .btn.dropdown-toggle {
-    margin-right: 0rem !important;
-  }
-  .dropdown-menu:not(ngb-datepicker) {
-    right: 0px;
-    left: unset;
-  }
-  .dropdown ::after {
-    margin-top: 0.6rem;
-    left: 0.6rem;
-    right: unset !important;
-  }
-  ngx-treeview-item {
-    text-align: right;
-    direction: rtl;
-  }
-  @media (min-width: 576px) {
-    .form-inline .form-check-input {
-      margin: 3px;
-    }
-  }
-  .form-inline .form-check-input {
-    margin: 3px;
-    position: inherit;
-  }
-  .dropdown button {
-    text-align: right !important;
-    direction: rtl;
-  }
-  .fa.fa-caret-right {
-    transform: rotate(180deg);
-  }
-}

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

@@ -1,23 +0,0 @@
-<div class="dynamic-fields-values">
-  <div class="fields-title">
-    {{ "CREATE.CORRESP_FORM_VIEWER" | translate }}
-  </div>
-  <div class="values-wrapper">
-    <div class="single-field-value" *ngFor="let item of list">
-      <div class="title" *ngIf="!isArabic">{{ item.labelEn }}</div>
-      <div class="title" *ngIf="isArabic">{{ item.labelAr }}</div>
-      <ng-container [ngSwitch]="item?.type">
-        <ng-container *ngSwitchCase="'vocabulary'">
-            <div class="value">{{ 'vocabulary.' + item.customOptions.vocId + '.' + item.value | translate}}</div>    
-        </ng-container>
-        <ng-container *ngSwitchCase="'toggle'">
-            <div class="value">{{ '' + item.value | translate}}</div>    
-        </ng-container>
-        <ng-container *ngSwitchDefault>
-            <div class="value">{{ item.value}}</div>    
-        </ng-container>
-      </ng-container>
-      
-    </div>
-  </div>
-</div>

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

@@ -1,29 +0,0 @@
-.dynamic-fields-values{
-    .fields-title{
-        font-size: 14px;
-    font-weight: bold;
-    }
-    .values-wrapper{
-        border: 1px solid #d9dce2;
-        padding: 5px 10px;
-        .single-field-value{
-            padding: 10px 0px;
-            display: flex;
-            border-bottom: 1px solid #e2e6ec;
-           .title{
-            font-size: 12px;
-            font-weight: 500;
-            width: 140px;
-            word-break: break-word;
-           } 
-           .value{
-            font-size: 12px;
-            width: calc(100% - 140px);
-            word-break: break-word;
-           }
-        }
-        .single-field-value:last-child{
-            border-bottom: none;
-        }
-    }
-}

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

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

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

@@ -1,39 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { Utils } from 'formiojs';
-import { TranslateService } from '@ngx-translate/core';
-import { TranslationService } from '../../../../Core/services/translation/translation.service';
-
-@Component({
-  selector: 'cts-dynamic-form-viewer',
-  templateUrl: './dynamic-form-viewer.component.html',
-  styleUrls: ['./dynamic-form-viewer.component.scss']
-})
-export class DynamicFormViewerComponent implements OnInit {
-  @Input()
-  form: any = {};
-  @Input()
-  data: any = null;
-  list = [];
-  isArabic = false;
-  constructor( private translate: TranslateService, private translation : TranslationService
-    ) { }
-
-  ngOnInit(): void {
-    this.translation.isArabic.subscribe(res => {
-      this.isArabic = res ;
-      const translations = {};
-      const translationsAr = {};
-      Utils.eachComponent(this.form.components, (comp) => {
-          this.list.push({
-            labelAr : comp.labelAr,
-            labelEn : comp.label,
-            customOptions: comp.customOptions,
-            value : this.data[this.form.prefix + ':' + comp.key],
-            type : comp.type
-          })
-        
-      });
-    })
-  
-  }
-}

package/src/lib/components/dynamic-form/components/dynamic-form-vocabulary-item/dynamic-form-vocabulary-item.component.html

@@ -1,35 +0,0 @@
-<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-selectitem
-  [voc]="true"
-  [vocId]="vocabularyType"
-  [data]="data"
-  [bindLabel]="bindLabel"
-  [bindValue]="bindValue"
-  [placeholder]="placeholder"
-  [multiple]="multiple"
-  [searchable]="searchable"
-  [closeOnSelect]="closeOnSelect"
-  [disabled]="disabled"
-  [hideSelectedItems]="hideSelectedItems"
-  [loading]="loading"
-  (onSelectItems)="getSelecteditems($event)"
-  [(ngModel)]="selection"
-></app-dynamic-form-selectitem>
-<mat-error
-  [attr.data-automation-id]="'card-textitem-error-'"
-  class="app-textitem-editable-error"
-  *ngIf="hasErrors()"
->
-  <ul>
-    <li *ngIf="control.errors.required">
-      {{ label | translate }} {{ "VALIDATORS.REQUIRED" | translate }}
-    </li>
-  </ul>
-</mat-error>

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

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

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

@@ -1,175 +0,0 @@
-import {
-  ChangeDetectorRef,
-  Component,
-  EventEmitter,
-  Input,
-  Optional,
-  Output,
-  Self,
-  ViewChild,
-  ViewEncapsulation,
-} from '@angular/core';
-import {
-  AbstractControl,
-  ControlValueAccessor,
-  FormControl,
-  NgControl,
-} from '@angular/forms';
-import { Observable } from 'rxjs';
-import { VocabularyApiService } from '../../../vocabulary/services/vocabulary-api.service';
-import { Cacheable, LocalStorageStrategy } from 'ts-cacheable';
-import { DynamicFormSelectItemComponent } from '../dynamic-form-selectitem/dynamic-form-selectitem.component';
-
-/**
- * A vocabulary dropdown input integrated with nuxeo vocabulary API,
- * that can be used inside reactive or template driven forms
- * @title
- * vocabulary dropdown
- * @example
- * <app-dynamic-form-vocabulary-item
- *   [label]="'PATH.TO.LABEL.TRANSLATION'"
- *   [bindLabel]="'bindLabelPropertyName'"
- *   [bindValue]="'bindValuePropertyName'"
- *   placeholder="'PATH.TO.PLACEHOLDER.TRANSLATION'"
- *   [multiple]="false"
- *   [searchable]="false"
- *   [closeOnSelect]="true"
- *   [hideSelectedItems]="false"
- *   [vocabularyType]="'VocabularyKey'"
- *   formControlName="controlName"
- * >
- * </app-dynamic-form-vocabulary-item>
- */
-@Component({
-  selector: 'app-dynamic-form-vocabulary-item',
-  templateUrl: './dynamic-form-vocabulary-item.component.html',
-  styleUrls: ['./dynamic-form-vocabulary-item.component.scss'],
-  encapsulation: ViewEncapsulation.None,
-})
-export class DynamicFormVocabularyItemComponent
-  implements ControlValueAccessor {
-  @ViewChild(DynamicFormSelectItemComponent)
-  DynamicFormSelectItemComponent: DynamicFormSelectItemComponent;
-
-  data = [];
-  /** Bind value to property name */
-  @Input() bindValue;
-  /** Bind label to property name */
-  @Input() bindLabel;
-  /** Placeholder string */
-  @Input() placeholder;
-  /** Can select multiple */
-  @Input() multiple = false;
-  /** Is searchable */
-  @Input() searchable = true;
-  /** Should close on select */
-  @Input() closeOnSelect = true;
-  /** Should hide selected items */
-  @Input() hideSelectedItems = false;
-    /** is disabled */
-    @Input() disabled = false;
-  /** Vocabulary list API Key */
-  @Input() vocabularyType = '';
-  /** Field Label */
-  @Input() label;
-  @Input() cacheable = true;
-  @Input() shwoAllValues = true
-  /** Event emitted on value is selected */
-  @Output() onSelecting = new EventEmitter();
-  loading = false;
-  selection;
-
-  // 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 vocabularyApi: VocabularyApiService,
-    private cdRef : ChangeDetectorRef,
-    @Self() @Optional() public control: NgControl
-  ) {
-    this.control.valueAccessor = this;
-  }
-
-  ngOnInit(): void {
-    if (this.vocabularyType) {
-      this.getLisOfOptions(this.vocabularyType);
-    }
-  }
-
-  getLisOfOptions(type) {
-    this.loading = true;
-    const callApi = this.cacheable
-      ? this.getCacheableVocabularyList(type)
-      : this.getVocabularyList(type);
-    callApi.subscribe((res) => {
-      this.loading = false;
-      this.data = !this.shwoAllValues ? res.filter(item => !item.id.includes('archived') && !item.id.includes('draft')) : res;
-      this.cdRef.detectChanges();
-    });
-  }
-
-  @Cacheable({
-    maxCacheCount: 1000,
-    storageStrategy: LocalStorageStrategy,
-    maxAge: 20000,
-  })
-  getCacheableVocabularyList(type) {
-    return this.vocabularyApi.getVocabularyList(type);
-  }
-  
-  getVocabularyList(type) {
-    return this.vocabularyApi.getVocabularyList(type);
-  }
-  getSelecteditems(selectedItems) {
-    this.propagateChange(this.selection);
-    this.onSelecting.emit(this.selection);
-  }
-
-  writeValue(value) {
-    // if (value) { removed to allow reseting ui when resetting form
-      this.selection = value;
-    // }
-  }
-
-  registerOnChange(fn) {
-    this.propagateChange = fn;
-  }
-
-  registerOnTouched(fn: any) {
-    this.onTouched = fn;
-  }
-
-  validate(c: FormControl) {
-    return this.validateFn(c);
-  }
-  isRequired() {
-    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;
-  }
-  reset() {
-    this.DynamicFormSelectItemComponent.reset();
-  }
-}