nuxeo-development-framework 4.1.6 → 4.1.7

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

@@ -1,362 +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;
-    /** filter users by group name => this will replce dep title */
-    @Input() groupName: string;
-  /** Field Label */
-  @Input() label: string;
-  /** Bind value to object property */
-  @Input() bindValue;
-  /** Bind label to object property */
-  @Input() bindLabel;
-  @Input() arabicBindLabel;
-  /** 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[] = [];
-
-  /** flage to indicate if use full arabic name or not beside fullName  */
-  @Input() useArabicName = false;
-
-  /** event emitted when item is selected */
-  @Output() onSelectItems = new EventEmitter();
-  loading = false;
-  selection;
-  buffer = [];
-  bufferSize = 1000;
-  numberOfItemsFromEndBeforeFetchingMore = 10;
-  suffix;
-
-  propagateChange: any = () => {};
-  validateFn: any = () => {};
-  isArabic = false;
-  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) || (changes.groupName && !changes.groupName?.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) => {
-      this.isArabic = ar;
-      ar
-        ? (this.suffix = 'مستخدم تم إختياره')
-        : (this.suffix = 'Users Selected');
-      if (this.multiple) {
-        this.selectionstrg = `${this.selection.length} ${this.suffix}`;
-      }
-    });
-  }
-
-  getDepartments(page = 0) {
-    if(this.groupName){
-      this.userApiService.getUsersUnderCertainGroup(this.groupName).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;
-        });
-      })
-    }else 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[];
-    // if not using arabic name then construct full name here
-    if(!this.useArabicName){
-      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;
-  }
-
-  getUsersUnderCertainGroup(){
-
-  }
-  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,75 +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';
-import { GlobalAdminService } from '../../../../../shared-services/global-admin.service';
-
-
-/** @ignore */
-@Injectable({
-  providedIn: 'root',
-})
-export class UsersInDepartmentsApiService {
-  constructor(private nuxeoService: NuxeoService , private globalAdmin : GlobalAdminService) {}
-  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> {
-    let group = '';
-    if(this.globalAdmin.isGlobalAdmin){
-      group = `tenant_${this.globalAdmin.activeTenant}_cts_role_${deptTitle}`
-    }else if(!this.globalAdmin.isGlobalAdmin && this.nuxeoService.nuxeoClient.user.properties.tenantId){
-      group = `tenant_${this.nuxeoService.nuxeoClient.user.properties.tenantId}_cts_role_${deptTitle}`
-    }else{
-      group = `cts_role_${deptTitle}`
-    }
-    return from(
-      this.nuxeoService.nuxeoClient
-        .request(`group-members/all-members/${group}`)
-        .queryParams({ q: '*', ...params })
-        .get()
-    ).pipe(
-      catchError((err) => {
-        throw err;
-      })
-    );
-  }
-
-  getUsersUnderCertainGroup(group, params = {}): Observable<any> {
-    return from(
-      this.nuxeoService.nuxeoClient
-        .request(`group-members/all-members/${group}`)
-        .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>

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

@@ -1,132 +0,0 @@
-@import "../../../../assets/scss/myApp.scss";
-.select-label {
-  color: #646f85;
-  font-size: 13px;
-  margin-bottom: 5px;
-}
-.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: 0px 10px 0px !important;
-    .ng-placeholder {
-      padding: 0px 5px 0px;
-      font-size: 12px;
-      margin-top: -3px;
-    }
-    .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-label{
-      //   .multiple-options-wrapper{
-      //     display: flex;
-      //     align-items: center;
-      //     .text-wrapper{
-      //       padding: 0px 10px;
-      //     }
-      //     .iocn-wrapper{
-      //       width: 20px;
-      //       height: 20px;
-      //       border: 1px solid #2e62df;
-      //       display: flex;
-      //       justify-content: center;
-      //       align-items: center;
-      //       color: #2e62df;
-      //       font-weight: bold;
-      //     }
-      //   }
-      // }
-    }
-    .ng-option-selected {
-      .option-wrapper {
-        .check-box-wrapper {
-          .icon-wrapper {
-            .icon {
-              display: flex;
-            }
-          }
-        }
-        .label-wrapper {
-          color: $blue;
-        }
-      }
-    }
-  }
-}
-
-.ng-select-container.ng-has-value {
-  border-color: #1a96c6 !important;
-}
-.ng-select {
-  .ng-select-focused:not(.ng-select-opened) .ng-select-container {
-    border-color: #ccc;
-    box-shadow: none;
-  }
-}
-
-.rtl{
-  .ng-select{
-    .ng-select-container{
-      .ng-value-container{
-        .ng-input{
-          padding-left: 50px !important;
-          padding-right: 0px !important;
-        }
-      }
-    }
-  } 
-}