nuxeo-development-framework 4.1.4 → 4.1.6

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,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>
+<div class="tags">
+  <ng-select
+    [items]="tags$ | async"
+    bindLabel="displayLabel"
+    [addTag]="true"
+    [addTagText]="'Tags.add' | translate"
+    [multiple]="multiple"
+    [hideSelected]="true"
+    [minTermLength]="2"
+    [loading]="tagsLoading"
+    [typeToSearchText]="'Tags.typeToSearchText' | translate"
+    [typeahead]="tagsInput$"
+    [(ngModel)]="selectedTags"
+    (change)="emitSelection($event)"
+    required
+    [placeholder]="'Tags.placeholder' | translate"
+  >
+  <ng-container *ngIf="selectedTagsCustomTemplate">
+    <ng-template ng-label-tmp let-item="item" let-clear="clear">
+      <ng-container *ngTemplateOutlet="
+      selectedTagsCustomTemplate;
+      context: { $implicit: item }
+      ">
+      </ng-container>
+    </ng-template>
+  </ng-container>
+  </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();
+  });
+});

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

@@ -0,0 +1,125 @@
+import {
+  Component,
+  Input,
+  OnInit,
+  Optional,
+  Self,
+  ViewEncapsulation,
+} from '@angular/core';
+import {
+  AbstractControl,
+  ControlValueAccessor,
+  NgControl,
+} from '@angular/forms';
+import { concat, Observable, of, Subject } from 'rxjs';
+import {
+  debounceTime,
+  distinctUntilChanged,
+  tap,
+  switchMap,
+  catchError,
+} from 'rxjs/operators';
+import { TagsApiService } from '../../../cts-tags/services/tags-api.service';
+
+/**
+ * A tags dropdown input integrated with tags API,
+ *  that can be used inside reactive or template driven forms
+ * @title
+ * tags dropdown
+ * @example
+ * <cts-dynamic-form-select-tag
+ *     formControlName="controlName"
+ *     [label]="'PATH.TO.TRANSLATION'"
+ * ></cts-dynamic-form-select-tag>
+ */
+@Component({
+  selector: 'cts-dynamic-form-select-tag',
+  templateUrl: './dynamic-form-select-tag.component.html',
+  styleUrls: ['./dynamic-form-select-tag.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class DynamicFormSelectTagComponent
+  implements OnInit, ControlValueAccessor
+{
+  /** Field Label */
+  @Input() label: string;
+
+  tags$: Observable<any[]>;
+  tagsLoading = false;
+  tagsInput$ = new Subject<string>();
+  selectedTags;
+  tagsList: any[];
+  onChange: any = () => {};
+  onTouched: any = () => {};
+  @Input() multiple = true;
+  @Input() selectedTagsCustomTemplate = null;
+  constructor(
+    @Self() @Optional() private control: NgControl,
+    private tagsApiService: TagsApiService
+  ) {
+    if (this.control) {
+      this.control.valueAccessor = this;
+    }
+  }
+  writeValue(value) {
+    if (value) {
+      this.selectedTags = this.buildTagObj(value);
+    }
+  }
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+  setDisabledState?(isDisabled: boolean): void {}
+
+  ngOnInit(): void {
+    this.loadTags();
+  }
+  
+  emitSelection(event) {
+    if(this.multiple) {
+      let tags = [];
+      this.selectedTags.forEach((tagObj) => {
+        tags.push(tagObj.id || tagObj.displayLabel);
+      });
+      this.onChange(tags);
+    } else {
+      this.onChange(this.selectedTags)
+    }
+  }
+
+  private loadTags() {
+    this.tags$ = concat(
+      of([]), // default items
+      this.tagsInput$.pipe(
+        debounceTime(200),
+        distinctUntilChanged(),
+        tap(() => (this.tagsLoading = true)),
+        switchMap((term) =>
+          this.tagsApiService.tagsSuggestion(term).pipe(
+            catchError(() => of([])), // empty list on error
+            tap(() => (this.tagsLoading = false))
+          )
+        )
+      )
+    );
+  }
+  isRequired() {
+    if (!this.control || !this.control.control.validator) {
+      return false;
+    }
+
+    const validator = this.control.control.validator({} as AbstractControl);
+    return validator && validator.required;
+  }
+  buildTagObj(value) {
+    let arrayOfTags = [];
+    value.forEach((tag) => {
+      arrayOfTags.push({ id: tag, displayLabel: tag });
+    });
+    console.log("arrayOfTags",arrayOfTags)
+    return arrayOfTags;
+  }
+}

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

@@ -0,0 +1,83 @@
+<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="user-select" [ngClass]="{ 'multiple-wrapper': multiple }" SetRtl>
+  <ng-select
+    #ngSelectComponent
+    [items]="buffer"
+    [bindLabel]="bindLabel"
+    [bindValue]="bindValue"
+    [placeholder]="placeholder"
+    [multiple]="multiple"
+    [searchable]="searchable"
+    [closeOnSelect]="closeOnSelect"
+    [hideSelected]="hideSelectedItems"
+    [loading]="loading"
+    (scrollToEnd)="onScrollToEnd()"
+    [disabled]="disabled"
+    [(ngModel)]="selection"
+    (change)="emitSelection($event)"
+  >
+    <ng-template ng-label-tmp let-item="item" let-clear="clear">
+      <span
+        style="
+          display: flex;
+          align-items: center;
+          column-gap: 4px;
+          font-size: 16px;
+        "
+      >
+        <div style="width: 30px; height: 30px">
+          <cts-avatar [user]="item"></cts-avatar>
+        </div>
+        <div class="user-name">
+          {{ item?.properties?.firstName }} {{ item?.properties?.lastName }}
+        </div>
+        <div>
+          <span
+            class="ng-value-icon right"
+            (click)="clear(item)"
+            aria-hidden="true"
+            >×</span
+          >
+        </div>
+      </span>
+    </ng-template>
+
+    <ng-template ng-option-tmp let-item="item">
+      <span
+        style="
+          display: flex;
+          align-items: center;
+          column-gap: 4px;
+          font-size: 16px;
+        "
+      >
+        <div style="width: 30px; height: 30px">
+          <cts-avatar [user]="item"></cts-avatar>
+        </div>
+        <div>
+          {{ item?.properties?.firstName }} {{ item?.properties?.lastName }}
+        </div>
+
+        <div></div>
+      </span>
+    </ng-template>
+  </ng-select>
+</div>
+<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-select-user-filter/dynamic-form-select-user-filter.component.scss

@@ -0,0 +1,136 @@
+@import "../../../../assets/scss/myApp.scss";
+.select-label {
+  color: #8f98aa;
+  font-size: 12px;
+  margin-bottom: 0px;
+}
+.user-select {
+  .ng-select-container {
+    background-color: rgba(143, 152, 170, 0.1) !important;
+    border: 1px solid #ccc !important;
+    border-radius: 5px !important; // height: 40px !important;
+
+    .ng-value-container {
+      padding: 5px 7px 0px !important;
+      .ng-placeholder {
+        padding: 0px 5px 0px;
+        font-size: 12px;
+      }
+      .ng-value {
+        color: #495057;
+      }
+    }
+    .ng-arrow-wrapper {
+      padding: 0px 20px;
+    }
+    .ng-input {
+      left: 10px;
+      right: 10px;
+      width: auto;
+      input {
+      }
+    }
+  }
+}
+
+.multiple-wrapper {
+  .ng-select-container {
+    overflow: visible !important;
+    .ng-value-container {
+      position: absolute;
+      top: 40px;
+      width: 100%;
+      .ng-placeholder {
+        display: block;
+        position: absolute;
+        top: -26px !important;
+      }
+      .ng-value {
+        padding: 5px 10px;
+        .user-name {
+          font-size: 12px;
+        }
+      }
+    }
+    .ng-clear-wrapper {
+      display: none;
+    }
+    .ng-arrow-wrapper {
+      position: absolute;
+      right: 5px;
+    }
+  }
+  &.rtl {
+    .ng-select-container {
+      .ng-value-container {
+        .ng-value {
+          padding: 5px 10px;
+          .ng-value-icon {
+            border-left: none !important;
+            border-right: 1px solid #b8dbff;
+          }
+        }
+      }
+      .ng-arrow-wrapper {
+        left: 5px;
+        right: auto;
+      }
+    }
+  }
+}
+
+.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;
+        }
+      }
+    }
+  }
+}

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

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