nuxeo-development-framework 3.1.6 → 3.1.8

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

@@ -1,177 +0,0 @@
-@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

@@ -1,25 +0,0 @@
-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

@@ -1,335 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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

@@ -1,92 +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>
-<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>