nuxeo-development-framework 3.7.8 → 3.7.9-dms-mep

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

@@ -0,0 +1,199 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnInit,
+  Optional,
+  Output,
+  Self,
+  SimpleChanges,
+  ViewChild,
+  ViewEncapsulation,
+} from '@angular/core';
+import {
+  ControlValueAccessor,
+  NgControl,
+  FormControl,
+  AbstractControl,
+} from '@angular/forms';
+import { NgSelectComponent } from '@ng-select/ng-select';
+import { TranslateService } from '@ngx-translate/core';
+import { Observable } from 'rxjs';
+import { UsersInDepartmentsApiService } from '../dynamic-form-select-users/services/user-api.service';
+
+/**
+ * @ignore
+ * User selector
+ */
+@Component({
+  selector: 'cts-dynamic-form-select-user-filter',
+  templateUrl: './dynamic-form-select-user-filter.component.html',
+  styleUrls: ['./dynamic-form-select-user-filter.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class DynamicFormSelectUserFilterComponent
+  implements OnChanges, ControlValueAccessor
+{
+  @ViewChild('ngSelectComponent') ngSelectComponent: NgSelectComponent;
+  data = [];
+  @Input() deptTitle: string;
+  @Input() label: string;
+  @Input() bindValue;
+  @Input() bindLabel;
+  @Input() placeholder;
+  @Input() multiple = false;
+  @Input() searchable = false;
+  @Input() closeOnSelect = true;
+  @Input() hideSelectedItems = false;
+  @Input() preSelectedValues;
+  @Input() isAsync = false;
+  @Input() attachSource = false;
+  @Input() source$: Observable<any>;
+  @Input() hideLoaded = false;
+  @Input() loading = false;
+  @Input() disabled = false;
+  @Input() filter: string[];
+  @Output() onSelectItems = new EventEmitter();
+  selection;
+  buffer = [];
+  bufferSize = 50;
+  numberOfItemsFromEndBeforeFetchingMore = 10;
+
+  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,
+    @Self() @Optional() public control: NgControl
+  ) {
+    if (this.control) {
+      this.control.valueAccessor = this;
+    }
+  }
+
+  emitSelection(event) {
+    this.propagateChange(this.selection);
+    this.onSelectItems.emit(event);
+  }
+
+  onScrollToEnd() {
+    this.fetchMore();
+    if (this.isNextPageAvailable) {
+      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;
+  }
+  x = ['imad12', 'rasha'];
+  y = 'imad12';
+  ngOnChanges(changes: SimpleChanges): void {
+    const isFirstChange = Object.values(changes).some((c) => c.isFirstChange());
+    if (!isFirstChange) {
+      this.getDepartments();
+    }
+  }
+
+  ngOnInit() {
+    this.getDepartments();
+    setTimeout(() => {
+      // to make select render selected values to were send from out side
+      //delay to allow outside to get data and send it to here
+      if (this.preSelectedValues) {
+        this.selection = this.preSelectedValues;
+      }
+    }, 10000);
+  }
+
+  writeValue(value) {
+    if (value) {
+      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;
+  }
+  getDepartments(page = 0) {
+    if (this.deptTitle === 'all') {
+      this.userApiService
+        .getAllUsers({
+          currentPageIndex: page,
+          pageSize: 20,
+        })
+        .subscribe((data) => {
+          let filterData = data.entries.filter((user) => {
+            const includedInFilter = this.filter.includes(user.id);
+            return !includedInFilter;
+          });
+          this.data = this.data.concat(filterData);
+          this.isNextPageAvailable = data.isNextPageAvailable;
+          this.buffer = (this.data || []).slice(0, this.bufferSize);
+          this.buffer.map((item) => {
+            item.isSelected = false;
+          });
+        });
+    } else {
+      this.userApiService
+        .getCtsUsers(this.deptTitle, {
+          currentPageIndex: page,
+          pageSize: 20,
+        })
+        .subscribe((data) => {
+          this.data = this.data.concat(data.users);
+          this.isNextPageAvailable = data.isNextPageAvailable;
+          this.buffer = (this.data || []).slice(0, this.bufferSize);
+          this.buffer.map((item) => {
+            item.isSelected = false;
+          });
+        });
+    }
+  }
+
+  reset() {
+    this.ngSelectComponent.handleClearClick();
+  }
+}

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

@@ -0,0 +1,99 @@
+<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"
+    [placeholder]="
+      multiple && (selection && selection.length > 0) ? selectionstrg : placeholder
+    "
+    [multiple]="multiple"
+    [searchable]="searchable"
+    [closeOnSelect]="closeOnSelect"
+    [hideSelected]="hideSelectedItems"
+    [loading]="loading"
+    (scrollToEnd)="onScrollToEnd()"
+    [disabled]="disabled"
+    [typeahead]="userNameInput$"
+    [compareWith]="compareFn"
+    [(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?.id === 'system' ? ('SYSTEM_ADMIN' | translate) : 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"
+      let-item$="item$"
+      let-index="index"
+    >
+      <span
+        style="
+          display: flex;
+          align-items: center;
+          column-gap: 4px;
+          font-size: 16px;
+        "
+      >
+        <mat-checkbox
+          *ngIf="multiple"
+          id="item-{{ index }}"
+          [ngModel]="item$.selected"
+          (click)="(false)"
+        ></mat-checkbox>
+        <div style="width: 30px; height: 30px">
+          <cts-avatar [user]="item"></cts-avatar>
+        </div>
+        <div>
+          {{ item?.id === 'system' ? ('SYSTEM_ADMIN' | translate) : 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-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();
+  });
+});