nuxeo-development-framework 4.1.4 → 4.1.6

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

@@ -0,0 +1,204 @@
+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 = "MMMM d, y";
+  @Input() defultSort = null;
+  langSubscription : Subscription;
+  @Input() highlightSelectedCard = false;
+
+  /** allow multiselect rows with checkbox */
+  @Input() multiSelectRows = false;
+
+  /** to show 1st row with custom template in the table*/
+  @Input() customFirstRow = false;
+  /** flage used to disable actions if there was multi selected rows */
+
+  @Input() showActionsAsMenu = false; // flage to show action in menu or side by side
+
+  disabledActions = false;
+  isArabic = false;
+  tableWidth = 'auto';
+  tableColumns = [];
+  currentRow;
+  selected = [];
+  pageNumber = 1;
+  responsiveView = false;
+  statusIcons = {}; // object to contains all status icons if exist
+  directionIcons = {}; // object to contains all direction icons if exist
+  constructor(public nuxeoService: NuxeoService, private appConfig : AppConfigService,private translation: TranslationService) {
+    this.format = this.appConfig.myConfiguration['dateFormate'];
+    this.statusIcons = this.appConfig.myConfiguration['statusIcons'];
+    this.directionIcons = this.appConfig.myConfiguration['directionIcons'];
+    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,37 @@
+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';
+import { MatMenuModule } from '@angular/material/menu';
+
+/**
+ * @title
+ * Table Module
+ */
+@NgModule({
+  declarations: [TableComponent, DynamicColumnComponent],
+  imports: [
+    CommonModule,
+    NgxDatatableModule,
+    PipesModule,
+    TranslateModule,
+    MatTooltipModule,
+    DirectiveModule,
+    DynamicViewModule,
+    MatCheckboxModule,
+    MatMenuModule
+  ],
+  exports:[
+    TableComponent,
+    DynamicColumnComponent,
+    NgxDatatableModule
+  ]
+})
+export class TableModule { }

package/src/lib/components/toasts/components/notification-toast/notification-toast.component.html

@@ -0,0 +1,66 @@
+<div
+  class="toast-container"
+  [style.display]="state.value === 'inactive' ? 'none' : ''"
+  [dir]="lang"
+>
+  <ng-container (click)="navigateToDetais()">
+    <div class="icon-container rounded-s-md">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="25.667"
+        height="30"
+        viewBox="0 0 21.667 26"
+      >
+        <g
+          id="Group_1724"
+          data-name="Group 1724"
+          transform="translate(-1562 -49)"
+        >
+          <g
+            id="Group_1714"
+            data-name="Group 1714"
+            transform="translate(1562 49)"
+          >
+            <path
+              id="Path_6882"
+              data-name="Path 6882"
+              d="M63.661,18.322a7.256,7.256,0,0,1-2.577-5.552V9.75a7.589,7.589,0,0,0-6.5-7.5V1.083a1.083,1.083,0,1,0-2.167,0v1.17a7.589,7.589,0,0,0-6.5,7.5v3.02a7.264,7.264,0,0,1-2.587,5.561,1.9,1.9,0,0,0,1.233,3.336H62.438a1.9,1.9,0,0,0,1.223-3.344Z"
+              transform="translate(-42.667)"
+              fill="#fff"
+            />
+            <path
+              id="Path_6883"
+              data-name="Path 6883"
+              d="M181.6,451.25a4.069,4.069,0,0,0,3.98-3.25h-7.96A4.069,4.069,0,0,0,181.6,451.25Z"
+              transform="translate(-170.768 -425.25)"
+              fill="#fff"
+            />
+          </g>
+        </g>
+      </svg>
+    </div>
+    <div class="toast-content-container">
+      <div
+        *ngIf="title"
+        [class]="options.titleClass"
+        [attr.aria-label]="title"
+        class="toast-content"
+      >
+        {{ title }}
+      </div>
+      <div
+        *ngIf="message"
+        role="alert"
+        aria-live="polite"
+        [class]="options.messageClass"
+        [attr.aria-label]="message"
+        class="message"
+      >
+        {{ message }}
+      </div>
+    </div>
+  </ng-container>
+  <div *ngIf="options.closeButton" (click)="remove()" class="remove">
+    <mat-icon class="">close</mat-icon>
+  </div>
+</div>

package/src/lib/components/toasts/components/notification-toast/notification-toast.component.scss

@@ -0,0 +1,62 @@
+@import "../../../../assets/scss/myApp.scss";
+
+.toast-container {
+  cursor: pointer;
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  margin-left: 16px;
+  margin-right: 16px;
+  position: relative;
+  width: 400px;
+  height: 80px;
+  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.23);
+  background-color: white;
+  border-radius: 5px;
+  .icon-container {
+    background-color: $cyan-100;
+    grid-column: span 1 / span 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .toast-content-container {
+    grid-column: span 3 / span 3;
+    display: flex;
+    flex-direction: column;
+    padding-top: 4px;
+    padding-bottom: 4px;
+    padding-inline-start: 8px;
+    overflow: hidden;
+    .toast-content {
+      font-size: 15px;
+      color: $gray-400;
+      overflow: hidden;
+    }
+    .message {
+      color: $cyan-100;
+      font-size: 14px;
+      line-height: 20px;
+    }
+  }
+  .remove {
+    grid-column: span 1 / span 1;
+    cursor: pointer;
+    display: flex;
+    justify-content: flex-end;
+    padding-inline-end: 8px;
+    mat-icon {
+      color: $gray-300;
+      font-size: 20px;
+      line-height: 28px;
+    }
+  }
+}
+.rounded-s-md {
+  border-top-left-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+
+[dir="rtl"] .rounded-s-md {
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
+}

package/src/lib/components/toasts/components/notification-toast/notification-toast.component.ts

@@ -0,0 +1,50 @@
+import { Component, OnInit } from '@angular/core';
+import { Toast, ToastPackage, ToastrService } from 'ngx-toastr';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import {
+  UserPreferencesService,
+  UserPreferenceValues,
+} from '../../../../core/services/user/user-preferences.service';
+
+@Component({
+  selector: 'app-notification-toast',
+  templateUrl: './notification-toast.component.html',
+  styleUrls: ['./notification-toast.component.scss'],
+  // encapsulation: ViewEncapsulation.None,
+})
+export class NotificationToastComponent extends Toast implements OnInit {
+  id;
+  lang;
+  private onDestroy$ = new Subject<boolean>();
+  constructor(
+    protected toastrService: ToastrService,
+    public toastPackage: ToastPackage,
+    public userPreferenceService?: UserPreferencesService
+  ) {
+    super(toastrService, toastPackage);
+  }
+  ngOnInit(): void {
+    this.id = this.toastPackage.toastRef.componentInstance.id;
+    if (this.userPreferenceService) {
+      this.userPreferenceService
+        .select(UserPreferenceValues.Locale)
+        .pipe(takeUntil(this.onDestroy$))
+        .subscribe((locale) => {
+          this.lang = locale === 'ar' ? 'rtl' : 'ltr';
+        });
+    }
+  }
+  navigateToDetais() {
+    // this.router.navigate(
+    //   [
+    //     {
+    //       outlets: { viewer: ['view', this.id] },
+    //     },
+    //   ],
+    //   {
+    //     queryParams: { location: this.router.url },
+    //   }
+    // );
+  }
+}

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

@@ -0,0 +1,15 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { NotificationToastComponent } from './components/notification-toast/notification-toast.component';
+
+
+
+const COMPONENTS = [NotificationToastComponent];
+
+
+@NgModule({
+  declarations: COMPONENTS,
+  imports: [CommonModule],
+  exports: COMPONENTS,
+})
+export class ToastsModule {}

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,11 @@
+<ng-container *ngIf="correspondence">
+  <cts-latest-activity
+    [documentId]="correspondence"
+    [newLogActor]="newLogActor"
+    [isArabic]="isArabic"
+    (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();
+  });
+});