nuxeo-development-framework 3.1.1 → 3.1.2

package/src/lib/components/table/table/table.component.ts

@@ -0,0 +1,195 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  ViewEncapsulation,
+} from '@angular/core';
+import { ColumnMode, SelectionType } from '@swimlane/ngx-datatable/public-api';
+import { Subscription } from 'rxjs';
+import { AppConfigService } from '../../../configuration/app-config.service';
+import { NuxeoService } from '../../../Core/services/nuxeo/nuxeo.service';
+import { TranslationService } from '../../../Core/services/translation/translation.service';
+/**
+ * this component is a multi-purpose dynamically generated dumb data table that can be configured to show any list of data,
+ * for more information on configuring the table
+ * and the json structure for the inputs please check [Configuration File]{@link ../additional-documentation/config-file.html}
+ * ![Screenshot-1](../screenshots/dynamicTable.png)
+ *
+ * ### related Links:
+ * - [Pagination Component]{@link PaginationComponent}
+ * - [Dynamic Table]{@link DynamicTableComponent}
+ * - [Configuration File]{@link ../additional-documentation/config-file.html}
+ *
+ * @title
+ * Data Table
+ *
+ * @example
+ *
+ * <cts-table
+ *     [rows]="rows"
+ *     [columns]="columns"
+ *     [responsiveColumns]="responsiveColumns"
+ *     [rowCursor]="rowCursor"
+ *     [fullWidth]="fullWidth"
+ *     [entityType]="entityType"
+ *     [prefix]="prefix"
+ *     [totalRecords]="totalRecords"
+ *     [tableMode]="tableMode"
+ *     [tableActions]="tableActions"
+ *     (onRowSelected)="rowDetails($event)"
+ *     (actionOnRow)="performAction($event)"
+ *     (onSorting)="onSort($event)"
+ *  ></cts-table>
+ *
+ */
+@Component({
+  selector: 'cts-table',
+  templateUrl: './table.component.html',
+  styleUrls: ['./table.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class TableComponent implements OnInit {
+  /** event to emit when selecting single row */
+  @Output() onRowSelected = new EventEmitter();
+  /** event to emit when selecting single row to catch index*/
+  @Output() onRowIndexSelected = new EventEmitter();
+  /** event to emit when selecting single row Icon */
+  @Output() onIconSelected = new EventEmitter();
+  /** event to emit when perform action on row (delte, edit, ... ) */
+  @Output() actionOnRow = new EventEmitter();
+  /** event t emit when sorting table */
+  @Output() onSorting = new EventEmitter();
+    /** event t emit when selecting multiple row */
+  @Output() onMultiRowSelected = new EventEmitter();
+  /** aray of rows passed from out side the component */
+  @Input() rows;
+  /** array of columns paased from out side the component */
+  @Input() columns;
+  /** array of columns paased from out side the component for smaller screens */
+  @Input() responsiveColumns;
+  /** to define the page in which table is being used */
+  @Input() entityType: string = '';
+  /** static  path for translation passed from out side according to each page translation path */
+  @Input() prefix = '';
+  /** @deprecated */
+  @Input() pageCount;
+  /** Total Recordscount */
+  @Input() totalRecords;
+  /** @deprecated */
+  @Input() rowCursor = false;
+  /** Max full width in PX | auto */
+  @Input() fullWidth = 'auto';
+  /** Vocabulary Translation prefix */
+  @Input() vocItemTranslationPrefix;
+  /** Table Mode: list | card */
+  @Input() tableMode = 'list';
+  /** action to be in card mode */
+  @Input() tableActions;
+  @Input() format = "EEEE, MMMM d, y";
+  @Input() defultSort = null;
+  langSubscription : Subscription;
+  @Input() highlightSelectedCard = false;
+
+  /** allow multiselect rows with checkbox */
+  @Input() multiSelectRows = false;
+
+  /** flage used to disable actions if there was multi selected rows */
+  disabledActions = false;
+  isArabic = false;
+  tableWidth = 'auto';
+  tableColumns = [];
+  currentRow;
+  selected = [];
+  pageNumber = 1;
+  responsiveView = false;
+  constructor(public nuxeoService: NuxeoService, private appConfig : AppConfigService,private translation: TranslationService) {
+    this.format = this.appConfig.myConfiguration['dateFormate'];
+    this.langSubscription = this.translation.isArabic.subscribe(res => {
+      this.isArabic = res;
+    })
+  }
+
+  ngOnInit(): void {
+    this.onResize(window.innerWidth);
+  }
+
+  // function to be executed when clicking on single row
+  rowDetails(event) {
+    if (event.type !== 'mouseenter') {
+      if (event.type === 'click' && event.column.prop !== '' ) {
+        this.currentRow = event.row;
+        this.onRowSelected.emit(this.currentRow);
+      }
+    }
+  }
+  iconSelected(event: MouseEvent, row) {
+    event.stopPropagation();
+    this.onIconSelected.emit(row);
+  }
+
+  //function to handle all operations on single row (delete , edit , ...)
+  performAction(singleRow, actionType) {
+    if(!this.disabledActions)
+    this.actionOnRow.emit({
+      type: actionType,
+      row: singleRow,
+    });
+  }
+
+  // handle checkbox if table has ones
+  onSelect(event) {
+    // console.log('on select row click');
+    this.onMultiRowSelected.emit(event.selected);
+    if(this.multiSelectRows && event.selected.length > 0){
+      this.disabledActions = true;
+    }else{
+      this.disabledActions = false
+    }
+  }
+
+  // handle sorting functionality of the table
+  onSort(event) {
+    let sort = {
+      sortBy: event.column.headerClass,
+      sortOrder: event.newValue,
+    };
+    this.onSorting.emit(sort);
+  }
+
+  assignTableColumns(event) {
+    this.onResize(event.target.innerWidth);
+  }
+
+  onResize(width) {
+    if (width > 1400) {
+      this.tableWidth = 'auto';
+    } else {
+      this.tableWidth = this.fullWidth;
+    }
+    if (width < 768) {
+      this.tableColumns = [];
+      this.tableColumns = this.responsiveColumns;
+      this.responsiveView = true;
+    } else {
+      this.responsiveView = false;
+      this.tableColumns = [];
+      this.tableColumns = this.columns;
+    }
+  }
+
+  cardSelected(card) {
+    if (this.highlightSelectedCard) {
+      this.rows.map(row => {
+        row['isSelected'] = false;
+      })
+      card['isSelected'] = true;
+    }
+    this.onRowSelected.emit(card);
+  }
+
+  cardFocused(index) {
+    this.onRowIndexSelected.emit(index);
+  }
+}

package/src/lib/components/table/table.module.ts

@@ -0,0 +1,35 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { NgxDatatableModule } from '@swimlane/ngx-datatable';
+import { PipesModule } from '../../pipes/pipes.module';
+import { TableComponent } from './table/table.component';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { DirectiveModule } from '../../directive/directive.module';
+import { DynamicViewModule } from '../dynamic-view/dynamic-view.module';
+import { DynamicColumnComponent } from './dynamic-column/dynamic-column.component';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+
+/**
+ * @title
+ * Table Module
+ */
+@NgModule({
+  declarations: [TableComponent, DynamicColumnComponent],
+  imports: [
+    CommonModule,
+    NgxDatatableModule,
+    PipesModule,
+    TranslateModule,
+    MatTooltipModule,
+    DirectiveModule,
+    DynamicViewModule,
+    MatCheckboxModule
+  ],
+  exports:[
+    TableComponent,
+    DynamicColumnComponent,
+    NgxDatatableModule
+  ]
+})
+export class TableModule { }

package/src/lib/components/user/user/user.component.html

@@ -0,0 +1,15 @@
+<div class="d-flex items-center rounded-xl"
+    [ngClass]="{'bg-primary-100' : appconfService.theme === 'dgda' , 'bg-accent-100' : appconfService.theme === 'ksreleif'}">
+    <cts-avatar class="w-8 h-8" [user]="user"></cts-avatar>
+    <span class="d-flex items-center h-8 px-2 text-base w-auto"
+        [ngClass]="{'text-primary-900' : appconfService.theme === 'dgda' && !textColor , 'text-accent-900' : appconfService.theme === 'ksreleif' && !textColor}"
+        [ngStyle]="{'color': textColor}"
+        *ngIf="type === 'email'">{{ user?.properties?.email }}</span>
+    <span class="flex flex-1 items-center h-8 px-2 text-base w-auto leading-none"
+        [ngClass]="{'text-primary-900' : appconfService.theme === 'dgda' && !textColor , 'text-accent-900' : appconfService.theme === 'ksreleif' && !textColor}"
+        [ngStyle]="{'color': textColor}"
+        *ngIf="type === 'name'">
+        {{ user?.id === 'system' ? ('SYSTEM_ADMIN' | translate) : user?.properties?.firstName + " "
+        +user?.properties?.lastName }}
+    </span>
+</div>

package/src/lib/components/user/user/user.component.spec.ts

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

package/src/lib/components/user/user/user.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { AppConfigService } from '../../../configuration/app-config.service';
+
+@Component({
+  selector: 'app-user',
+  templateUrl: './user.component.html',
+  styleUrls: ['./user.component.scss']
+})
+export class UserComponent implements OnInit {
+
+  @Input() user;
+  @Input() type = 'name';
+  @Input() textColor;
+  constructor(public appconfService : AppConfigService) { }
+
+  ngOnInit(): void {
+  }
+
+}

package/src/lib/components/user/user.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { UserComponent } from './user/user.component';
+import { AvatarModule } from '../avatar/avatar.module';
+import { TranslateModule } from '@ngx-translate/core';
+
+
+
+@NgModule({
+  declarations: [UserComponent],
+  imports: [
+    CommonModule,
+    AvatarModule,
+    TranslateModule
+  ],
+  exports:[UserComponent]
+})
+export class UserModule { }

package/src/lib/components/users-card/users-card.component.html

@@ -0,0 +1,20 @@
+<app-card>
+  <h3 class="title">
+    {{ title | translate }}
+  </h3>
+
+  <div class="body">
+    <div class="images-container">
+      <ng-container *ngFor="let member of members">
+        <cts-avatar
+          class="member-avatar"
+          matTooltip="{{ member.properties.user.properties.firstName }} {{
+            member.properties.user.properties.lastName
+          }} - {{ member.properties.role }}" matTooltipClass="tdf-tooltip" [user]="member?.properties?.user"
+          *ngIf="member?.properties?.user"
+          [routerLink]="['/users', 'profile', member?.properties.user?.properties.username]">
+        </cts-avatar>
+      </ng-container>
+    </div>
+  </div>
+</app-card>

package/src/lib/components/users-card/users-card.component.scss

@@ -0,0 +1,16 @@
+ @import "../../assets/scss/myApp.scss";
+.member-avatar {
+  display: inline-block;
+  width: 64px;
+  height: 64px;
+  border-radius: 100%;
+  border: 2px solid white;
+  box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.13);
+  margin: 16px -8px;
+  cursor: pointer;
+  overflow: hidden;
+}
+.images-container {
+  overflow: hidden;
+  padding: 0 8px;
+}

package/src/lib/components/users-card/users-card.component.ts

@@ -0,0 +1,30 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+/**
+ * A UI component to view an array of users
+ *
+ * ![Screenshot-1](../screenshots/usersCard.png)
+ * @title
+ * Users Card
+ *
+ * @example
+ *  <app-users-card [title]="'List of users'" [members]="users"></app-users-card>
+ */
+@Component({
+  selector: 'app-users-card',
+  templateUrl: './users-card.component.html',
+  styleUrls: ['./users-card.component.scss']
+})
+export class UsersCardComponent implements OnInit {
+  /** Array of Nuxeo user objects */
+  @Input()
+  members = [];
+  /** Card title */
+  @Input()
+  title = '';
+  constructor() { }
+
+  ngOnInit(): void {
+
+  }
+}

package/src/lib/components/users-card/users-card.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { UsersCardComponent } from './users-card.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { CardModule } from '../card/card.module';
+import { AvatarModule } from '../avatar/avatar.module';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { RouterModule } from '@angular/router';
+/**
+ * @title
+ * Users card module
+ */
+@NgModule({
+  declarations: [UsersCardComponent],
+  imports: [CommonModule, TranslateModule, MatTooltipModule, CardModule, AvatarModule , RouterModule],
+  exports: [UsersCardComponent , RouterModule],
+  providers: [],
+})
+export class UsersCardModule { }

package/src/lib/components/viewer-log/components/viewer-log/viewer-log.component.html

@@ -0,0 +1,9 @@
+<ng-container *ngIf="correspondence">
+  <cts-latest-activity
+    [documentId]="correspondence"
+    (success)="logSuccess($event)"
+  ></cts-latest-activity>
+  <span class="log-bar">
+    <mat-progress-bar *ngIf="loading" mode="indeterminate"></mat-progress-bar>
+  </span>
+</ng-container>

package/src/lib/components/viewer-log/components/viewer-log/viewer-log.component.scss

@@ -0,0 +1,12 @@
+@import "../../../../assets/scss/myApp.scss";
+.log-bar {
+  mat-progress-bar {
+    .mat-progress-bar-buffer {
+      background: $cyan-50;
+    }
+    .mat-progress-bar-fill::after {
+      background: $cyan-100;
+      opacity: 0.5;
+    }
+  }
+}

package/src/lib/components/viewer-log/components/viewer-log/viewer-log.component.spec.ts

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

package/src/lib/components/viewer-log/components/viewer-log/viewer-log.component.ts

@@ -0,0 +1,25 @@
+import { Component, Input, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'cts-viewer-log',
+  templateUrl: './viewer-log.component.html',
+  styleUrls: ['./viewer-log.component.scss'],
+  encapsulation:ViewEncapsulation.None
+})
+export class ViewerLogComponent implements OnInit {
+  loading = true;
+  @Input()
+  correspondence;
+
+  constructor() {}
+
+  logSuccess(e) {
+    if(e){
+      this.loading = false
+    }
+  }
+  ngOnInit(): void {}
+  ngOnChanges(changes: SimpleChanges): void {
+    this.correspondence = this.correspondence;
+  }
+}

package/src/lib/components/viewer-log/viewer-log.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { LatestActivityModule } from '../latest-activity/latest-activity.module';
+import { ViewerLogComponent } from './components/viewer-log/viewer-log.component';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+
+@NgModule({
+  declarations: [ViewerLogComponent],
+  imports: [CommonModule, LatestActivityModule, MatProgressBarModule],
+  exports: [ViewerLogComponent],
+})
+export class ViewerLogModule {}

package/src/lib/components/vocabulary/interfaces/op-type.interface.ts

@@ -0,0 +1,4 @@
+export type opType =
+  | 'AC_UA_Vocabulary_AddEntry'
+  | 'AC_UA_Vocabulary_UpdateEntry'
+  | 'AC_UA_Vocabulary_RemoveEntry';

package/src/lib/components/vocabulary/services/vocabulary-api.service.ts

@@ -0,0 +1,46 @@
+import { Inject, Injectable } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { from, Observable, of } from 'rxjs';
+import { catchError, map } from 'rxjs/operators';
+import { NuxeoService } from '../../../Core/services/nuxeo/nuxeo.service';
+import { opType } from '../interfaces/op-type.interface';
+@Injectable({
+  providedIn: 'root',
+})
+export class VocabularyApiService {
+  vocabular = {};
+  constructor(
+    private nuxeoService: NuxeoService,
+    private translate: TranslateService, @Inject('environment') private environment
+  ) {}
+
+  getVocabularyList(listName): Observable<any> {
+    return from(
+      this.nuxeoService.nuxeoClient
+        .operation('Directory.SuggestEntries', {})
+        .params({
+          directoryName: listName,
+          dbl10n: false,
+          localize: true,
+          lang: this.translate.currentLang,
+          searchTerm: '',
+        })
+        .execute()
+    );
+  }
+  vocabularyOperations(opName: opType, body) {
+    return from(
+      this.nuxeoService.nuxeoClient
+        .operation(opName, {
+          url: `${this.environment.nuxeo}${this.environment.customAutomation}`,
+        })
+        .context({ vocabulary: body })
+        .execute()
+    ).pipe(
+      catchError((err) => {
+        console.log(err);
+        throw err;
+      })
+    );
+  }
+}

package/src/lib/components/vocabulary/vocabulary/vocabulary.component.html

@@ -0,0 +1,12 @@
+<app-dynamic-form-selectitem
+  [data]="data"
+  [bindLabel]="bindLabel"
+  [bindValue]="bindValue"
+  [placeholder]="placeholder"
+  [multiple]="multiple"
+  [searchable]="searchable"
+  [closeOnSelect]="closeOnSelect"
+  [hideSelectedItems]="hideSelectedItems"
+  [loading]="loading"
+  (onSelectItems)="getSelecteditems($event)"
+></app-dynamic-form-selectitem>

package/src/lib/components/vocabulary/vocabulary/vocabulary.component.spec.ts

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

package/src/lib/components/vocabulary/vocabulary/vocabulary.component.ts

@@ -0,0 +1,80 @@
+import { Component, EventEmitter, forwardRef, Input, OnInit, Output } from '@angular/core';
+import { FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Observable } from 'rxjs';
+import { VocabularyApiService } from '../services/vocabulary-api.service';
+@Component({
+  selector: 'cts-vocabulary',
+  templateUrl: './vocabulary.component.html',
+  styleUrls: ['./vocabulary.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => VocabularyComponent),
+      multi: true
+    }
+  ]
+})
+export class VocabularyComponent implements OnInit {
+  data = [];
+  @Input() bindValue;
+  @Input() bindLabel;
+  @Input() placeholder;
+  @Input() multiple = false;
+  @Input() searchable = true;
+  @Input() closeOnSelect = true;
+  @Input() hideSelectedItems = false;
+  @Input() isAsync = false;
+  @Input() attachSource = false;
+  @Input() source$: Observable<any>;
+  @Input() hideLoaded = false;
+  @Input() vocabularyType = '';
+
+  @Output() onSelecting = new EventEmitter();
+  loading= false;
+  selection=[];
+
+  // function related to value accessor
+  propagateChange: any = () => { };
+  validateFn: any = () => { };
+  public onTouched: any = () => { /*Empty*/ }
+
+  constructor(private vocabularyApi : VocabularyApiService) { }
+
+  ngOnInit(): void {
+    if(this.vocabularyType){
+      this.getLisOfOptions(this.vocabularyType);
+    }
+  }
+
+  getLisOfOptions(type){
+    this.loading = true;
+    this.vocabularyApi.getVocabularyList(type).subscribe(res => {
+      this.loading = false;
+      this.data = res;
+    });
+  }
+
+  getSelecteditems(selectedItems){
+    this.propagateChange(selectedItems);
+    this.onSelecting.emit(selectedItems);
+  }
+
+  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);
+  }
+
+}