nuxeo-development-framework 3.3.3 → 3.3.4-snapshot

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

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

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

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

@@ -0,0 +1,335 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnDestroy,
+  Optional,
+  Output,
+  Self,
+  SimpleChanges,
+  ViewChild,
+  ViewEncapsulation,
+} from '@angular/core';
+import {
+  AbstractControl,
+  ControlValueAccessor,
+  FormControl,
+  NgControl,
+} from '@angular/forms';
+import { NgSelectComponent } from '@ng-select/ng-select';
+import { TranslateService } from '@ngx-translate/core';
+import { Observable, of, Subject } from 'rxjs';
+import {
+  catchError,
+  debounceTime,
+  distinctUntilChanged,
+  switchMap,
+  tap,
+} from 'rxjs/operators';
+import { TranslationService } from '../../../../Core/services/translation/translation.service';
+import { UsersInDepartmentsApiService } from './services/user-api.service';
+import * as _ from 'lodash';
+import { Cacheable } from 'ts-cacheable';
+/**
+ * Users dropdown input integrated with users API,
+ * that can be used inside reactive or template driven forms
+ * @title
+ * Users dropdown
+ * @example
+ * <cts-dynamic-form-select-users
+ *     formControlName="controlName"
+ *     [bindValue]="bindToProperty"
+ *     [bindLabel]="'bindToLabel'"
+ *     [searchable]="true"
+ *     [label]="'PATH.TO.TRANSLATION'"
+ *     [deptTitle]="'all'"
+ *   ></cts-dynamic-form-select-users>
+ */
+const minute = 60000;
+@Component({
+  selector: 'cts-dynamic-form-select-users',
+  templateUrl: './dynamic-form-select-users.component.html',
+  styleUrls: ['./dynamic-form-select-users.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class DynamicFormSelectUsersComponent
+  implements OnChanges, OnDestroy, ControlValueAccessor
+{
+  @ViewChild('ngSelectComponent') ngSelectComponent: NgSelectComponent;
+  selectionstrg: string;
+  data = [];
+  allUsers: boolean;
+  userNameInput$ = new Subject<string>();
+  /** filter users by department (departmentName | all) */
+  @Input() deptTitle: string;
+  /** Field Label */
+  @Input() label: string;
+  /** Bind value to object property */
+  @Input() bindValue;
+  /** Bind label to object property */
+  @Input() bindLabel;
+  /** Placeholder text */
+  @Input() placeholder;
+  /** Can select multiple */
+  @Input() multiple = false;
+  /** is dropdown searchable */
+  @Input() searchable = false;
+  /** should close dropdown on value selection */
+  @Input() closeOnSelect = true;
+  /** should hide selected items */
+  @Input() hideSelectedItems = false;
+  /** Pre Selected values */
+  @Input() preSelectedValues;
+  /** flage to use preselected values or not */
+  @Input() usePreSelectedValue = false;
+  /** is Disabled */
+  @Input() disabled = false;
+  /** List of usernames that should be exluded  */
+  @Input() filter: string[] = [];
+  /** event emitted when item is selected */
+  @Output() onSelectItems = new EventEmitter();
+  loading = false;
+  selection;
+  buffer = [];
+  bufferSize = 1000;
+  numberOfItemsFromEndBeforeFetchingMore = 10;
+  suffix;
+
+  propagateChange: any = () => {};
+  validateFn: any = () => {};
+
+  public onTouched: any = () => {
+    /*Empty*/
+  };
+  pageIndex: number = 0;
+  isNextPageAvailable: boolean;
+  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 userApiService: UsersInDepartmentsApiService,
+    public translate: TranslateService,
+    private translation: TranslationService,
+    @Self() @Optional() public control: NgControl
+  ) {
+    if (this.control) {
+      this.control.valueAccessor = this;
+    }
+  }
+
+  emitSelection(event) {
+    if (this.multiple) {
+      this.selectionstrg = `${this.selection.length} ${this.suffix}`;
+    }
+    this.propagateChange(this.selection);
+    this.onSelectItems.emit(event);
+  }
+
+  onScrollToEnd() {
+    this.fetchMore();
+    ++this.pageIndex;
+    if (this.isNextPageAvailable && this.allUsers) {
+      this.getDepartments(this.pageIndex);
+    }
+  }
+
+  private fetchMore() {
+    this.loading = true;
+    const len = this.buffer.length;
+    const more = this.data.slice(len, this.bufferSize + len);
+    this.buffer = this.data.concat(more);
+    this.loading = false;
+  }
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.deptTitle && !changes.deptTitle?.firstChange) {
+      this.data = [];
+      this.buffer = [];
+      this.getDepartments();
+    }
+  }
+
+  ngOnInit() {
+    this.allUsers = this.deptTitle === 'all' ? true : false;
+    this.selection = this.multiple ? [] : undefined;
+    if (this.allUsers) {
+      this.loadUsers();
+    }
+    this.getDepartments();
+    this.translation.isArabic.subscribe((ar) => {
+      ar
+        ? (this.suffix = 'مستخدم تم إختياره')
+        : (this.suffix = 'Users Selected');
+      if (this.multiple) {
+        this.selectionstrg = `${this.selection.length} ${this.suffix}`;
+      }
+    });
+  }
+
+  getDepartments(page = 0) {
+    if (this.deptTitle) {
+      if (this.allUsers) {
+        this.getAllUsers(page).subscribe((data) => {
+          let newData = this.constructUserArray(data.entries, 'id');
+          this.data = this.data.concat(newData);
+          this.isNextPageAvailable = data.isNextPageAvailable;
+          this.buffer = (this.data || []).slice(0, this.bufferSize);
+          this.buffer.map((item) => {
+            item.isSelected = false;
+          });
+          this.loading = false; // for loading spinner
+        });
+      } else {
+        this.getCtsUsers(this.deptTitle).subscribe((data) => {
+          let newData = this.constructUserArray(
+            data.users,
+            'properties.username'
+          );
+          this.data = this.data.concat(newData);
+          this.isNextPageAvailable = data.isNextPageAvailable;
+          this.buffer = (this.data || []).slice(0, this.bufferSize);
+          this.buffer.map((item) => {
+            item.isSelected = false;
+          });
+        });
+      }
+    }
+  }
+  
+  getAllUsers(page = 0): Observable<any> {
+    return this.userApiService.getAllUsers({
+      currentPageIndex: page,
+      pageSize: 20,
+    });
+  }
+
+  private loadUsers() {
+    this.userNameInput$
+      .pipe(
+        debounceTime(200),
+        distinctUntilChanged(),
+        tap(() => (this.loading = true)),
+        switchMap((term) => {
+          if (term && term.length) {
+            return this.getUsersSuggestions(term);
+          } else {
+            return this.getAllUsers();
+          }
+        })
+      )
+      .subscribe(
+        (data: any) => {
+          if (data.entries.length) {
+            let newData = this.constructUserArray(data.entries, 'id');
+            this.buffer = (newData || []).slice(0, this.bufferSize);
+            this.isNextPageAvailable = data.isNextPageAvailable;
+            this.loading = false;
+          } else {
+            this.buffer = [];
+            this.loading = false;
+          }
+        },
+        (err) => {
+          this.loading = false;
+          this.buffer = [];
+        }
+      );
+  }
+  
+  writeValue(value) {
+    if (value) {
+      this.selection = value;
+      if (this.multiple) {
+        this.selectionstrg = `${this.selection.length} ${this.suffix}`;
+      }
+    } else {
+      this.selection = null;
+      this.selectionstrg = null
+    }
+  }
+
+  compareFn(item, selected) {
+    console.log("item 1", item);
+    console.log("Item 2", selected);
+    return item.id === selected.id;
+  }
+
+  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;
+  }
+
+  // @Cacheable({
+  //   maxCacheCount: 1000,
+  //   maxAge: 20000,
+  // })
+
+  getCtsUsers(deptTitle): Observable<any> {
+    return this.userApiService.getCtsUsers(deptTitle);
+  }
+
+  @Cacheable({
+    maxCacheCount: 1000,
+    maxAge: 5 * minute,
+  })
+  getUsersSuggestions(term): Observable<any> {
+    return this.userApiService.getUsersSuggestions(term);
+  }
+
+  private constructUserArray(data, filterValue: string) {
+    let ConstructedData: any[];
+    ConstructedData = this.insertFUllName(data);
+    ConstructedData = this.filterUsers(data, filterValue);
+    return ConstructedData;
+  }
+
+  private insertFUllName(data) {
+    return data.map((user) => {
+      user.fullName = `${user.properties?.firstName} ${user.properties?.lastName}`;
+    });
+  }
+  private filterUsers(data, path: string) {
+    let filterData = data.filter((user) => {
+      const includedInFilter =
+        this.filter.includes(_.get(user, path)) ||
+        _.get(user, path) === 'Administrator';
+      return !includedInFilter;
+    });
+    return filterData;
+  }
+
+  reset() {
+    this.ngSelectComponent.handleClearClick();
+  }
+  ngOnDestroy(): void {
+    this.userNameInput$.unsubscribe();
+  }
+}

package/src/lib/components/dynamic-form/components/dynamic-form-select-users/services/user-api.service.ts

@@ -0,0 +1,50 @@
+import { Injectable } from '@angular/core';
+import { from, Observable } from 'rxjs';
+import { catchError } from 'rxjs/operators';
+import { NuxeoService } from '../../../../../Core/services/nuxeo/nuxeo.service';
+
+
+/** @ignore */
+@Injectable({
+  providedIn: 'root',
+})
+export class UsersInDepartmentsApiService {
+  constructor(private nuxeoService: NuxeoService) {}
+  getAllUsers(params = {}): Observable<any> {
+    return from(
+      this.nuxeoService.nuxeoClient
+        .request('user/search')
+        .queryParams({ q: '*', ...params })
+        .get()
+    ).pipe(
+      catchError((err) => {
+        throw err;
+      })
+    );
+  }
+  getUsersSuggestions(username: string, params = {}): Observable<any> {
+    return from(
+      this.nuxeoService.nuxeoClient
+        .request('user/search')
+        .queryParams({ q: username, ...params })
+        .get()
+    ).pipe(
+      catchError((err) => {
+        throw err;
+      })
+    );
+  }
+  getCtsUsers(deptTitle, params = {}): Observable<any> {
+    return from(
+      this.nuxeoService.nuxeoClient
+        .request(`group-members/all-members/cts_role_${deptTitle}`)
+        .queryParams({ q: '*', ...params })
+        .get()
+    ).pipe(
+      catchError((err) => {
+        throw err;
+      })
+    );
+  }
+}
+// .request(`cts_role_${deptTitle}`)

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

@@ -0,0 +1,92 @@
+<ng-container *ngIf="label">
+  <div>
+    <label class="select-label"
+      >{{ label | translate
+      }}<span *ngIf="isRequired()" class="text-danger m-1">*</span></label
+    >
+  </div>
+</ng-container>
+<ng-select
+  [items]="buffer"
+  [bindLabel]="bindLabel"
+  [bindValue]="bindValue"
+  [placeholder]="placeholder"
+  [multiple]="multiple"
+  [clearable]="clear"
+  [searchable]="searchable"
+  [closeOnSelect]="closeOnSelect"
+  [hideSelected]="hideSelectedItems"
+  [searchFn]="onSearch"
+  [loading]="loading"
+  (scrollToEnd)="onScrollToEnd()"
+  (change)="emitSelection($event)"
+  [disabled]="disabled"
+  [(ngModel)]="selection"
+>
+  <!-- template for viewing options in single and multi select -->
+  <ng-template
+    ng-option-tmp
+    let-item="item"
+    let-item$="item$"
+    let-index="index"
+  >
+    <div class="option-wrapper">
+      <span class="check-box-wrapper" *ngIf="multiple">
+        <input
+          id="item-{{ index }}"
+          type="checkbox"
+          [ngModel]="item$.selected"
+        />
+        <span class="icon-wrapper">
+          <span class="bi bi-check2 icon"></span>
+        </span>
+      </span>
+      <span *ngIf="!voc" class="label-wrapper">
+        {{ item[bindLabel] | translate }}
+      </span>
+      <span *ngIf="voc" class="label-wrapper">
+        {{ "vocabulary." + vocId + "." + item[bindValue] | translate }}
+      </span>
+    </div>
+  </ng-template>
+
+  <!-- template for viewing single select selected value -->
+  <ng-template ng-label-tmp let-item="item">
+    <span *ngIf="!voc">
+      {{ (bindLabel ? item[bindLabel] : item) | translate }}
+    </span>
+    <span *ngIf="voc">
+      {{ "vocabulary." + vocId + "." + item[bindValue] | translate }}
+    </span>
+  </ng-template>
+
+  <!-- template for viewing multi select selected values -->
+  <ng-template ng-multi-label-tmp let-items="items" let-clear="clear">
+    <div class="ng-value" *ngFor="let item of items ? items : []">
+      <span  *ngIf="!voc" class="ng-value-label">
+        {{ (bindLabel ? item[bindLabel] : item) | translate }}
+      </span>
+      <span *ngIf="voc">
+        {{ "vocabulary." + vocId + "." + item[bindValue] | translate }}
+      </span>
+      <span
+        *ngIf="clear"
+        class="ng-value-icon right"
+        (click)="clear(item)"
+        aria-hidden="true"
+        >×</span
+      >
+    </div>
+  </ng-template>
+</ng-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>