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

package/src/lib/pipes/time-ago.pipe.ts

@@ -0,0 +1,68 @@
+
+import { OnDestroy, Pipe, PipeTransform } from '@angular/core';
+import moment from 'moment-es6';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { UserPreferencesService, UserPreferenceValues } from '../core/services/user/user-preferences.service';
+
+/**
+ * Converts date into how long time ago string
+ *
+ * ### In template example:
+ * ~~~html
+ * <!-- in template -->
+ *   <span>{{ dateObject | timeAgo }}</span>
+ * ~~~
+ * @title
+ * Time Ago
+ */
+@Pipe({
+  name: 'timeAgo'
+})
+export class TimeAgoPipe implements PipeTransform, OnDestroy {
+
+  static DEFAULT_LOCALE = 'en-US';
+  static DEFAULT_DATE_TIME_FORMAT = 'dd/MM/yyyy HH:mm';
+
+  defaultLocale: string;
+  defaultDateTimeFormat: string;
+
+  private onDestroy$ = new Subject<boolean>();
+
+  constructor(public userPreferenceService: UserPreferencesService) {
+      this.userPreferenceService
+        .select(UserPreferenceValues.Locale)
+        .pipe(takeUntil(this.onDestroy$))
+        .subscribe(locale => {
+          this.defaultLocale = locale || TimeAgoPipe.DEFAULT_LOCALE;
+        });
+      this.defaultDateTimeFormat = TimeAgoPipe.DEFAULT_DATE_TIME_FORMAT;
+  }
+  /**
+   *
+   * @param value date object
+   * @param locale locale to be transformed to
+   * @returns Time ago string (15 minutes ago)
+   */
+  transform(value: Date, locale?: string) {
+      if (value !== null && value !== undefined) {
+        const actualLocale = locale || this.defaultLocale;
+        const then = moment(value);
+        //const diff = moment().locale(actualLocale).diff(then, 'days');
+        return then.locale(actualLocale).fromNow();
+        // if ( diff > 7) {
+        //     const datePipe: DatePipe = new DatePipe(actualLocale);
+        //     return datePipe.transform(value, this.defaultDateTimeFormat);
+        // } else {
+        //     return then.locale(actualLocale).fromNow();
+        // }
+      }
+      return '';
+  }
+
+  /** @ignore */
+  ngOnDestroy(): any {
+    this.onDestroy$.next(true);
+    this.onDestroy$.complete();
+  }
+}

package/src/lib/shared/components/button/button.component.html

@@ -0,0 +1,13 @@
+<button
+type="button"
+class="btn"
+  mat-button
+  [disabled]="disabled || loading"
+  (click)="emitClick()"
+  [ngClass]="this.classes"
+>
+  <ng-content *ngIf="!loading; else spinner"></ng-content>
+  <ng-template #spinner>
+    <mat-spinner class="spinner" [diameter]="25" [color]="spinnerTheming"></mat-spinner>
+  </ng-template>
+</button>

package/src/lib/shared/components/button/button.component.scss

@@ -0,0 +1,102 @@
+@import "../../../assets/scss/myApp.scss";
+
+%base-class {
+  color: #fff;
+  width: 100%;
+  border: 1px solid transparent;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  padding-left: 12px;
+  padding-right: 12px;
+  overflow: hidden;
+  min-width: max-content;
+  border-radius: 5px;
+  &:hover {
+    filter: brightness(92%);
+  }
+}
+
+.my-base-class {
+  @extend %base-class;
+}
+
+.btn {
+  // themes
+  &.primary {
+    background-image: $wrapper-gradient;
+    @extend %base-class;
+  }
+  &.rtl {
+    &.primary {
+      background-image: $wrapper-gradient-rtl;
+    }
+  }
+  &.blue {
+    background-color: $blue-400;
+    @extend %base-class;
+  }
+
+  &.green {
+    background-color: $green-400;
+    @extend %base-class;
+  }
+  &.danger {
+    background-color: $red-400;
+    @extend %base-class;
+  }
+  &.dark {
+    background-color: $gray-500;
+    @extend %base-class;
+  }
+  &.gray {
+    background-color: $gray-400;
+    border: none;
+    @extend %base-class;
+  }
+  &.light-gray {
+    background-color: $gray-100;
+    color: $gray-500;
+    border: none;
+    @extend %base-class;
+  }
+  &.outline-dark {
+    background-color: $white;
+    border: 1px solid $gray-300;
+    color: $gray-500;
+    @extend %base-class;
+  }
+  &.outline-dark:hover {
+    background-color: $gray-300;
+    color: $white;
+  }
+
+  // sizes
+  &.large {
+    height: 50px;
+    //   font-size: 16px;
+  }
+  &.regular {
+    height: 40px;
+    //   font-size: 14px;
+  }
+  &.small {
+    height: 30px;
+    //   font-size: 14px;
+  }
+  &.submitting {
+    background: rgb(215, 215, 215) !important;
+    border: 1px solid $gray-200;
+    @extend %base-class;
+  }
+  &.spinner {
+    margin: auto;
+  }
+
+  &.disabled {
+    opacity: 0.5;
+  }
+}
+
+.btn:focus {
+  background: #2cbddd;
+}

package/src/lib/shared/components/button/button.component.spec.ts

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

package/src/lib/shared/components/button/button.component.ts

@@ -0,0 +1,89 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  SimpleChanges,
+  ViewEncapsulation,
+} from '@angular/core';
+
+/**
+ * reusable button with spinner component
+ * @title
+ * Button with spinner
+ * @example
+ *
+ * <cts-button
+ *     [theme]="'danger'"
+ *     [size]="'regular'"
+ *     [loading]="false"
+ *     [disabled]="false"
+ *     (onClick)="executeAction()"
+ *   >
+ *     Button Text
+ *   </cts-button>
+ */
+@Component({
+  selector: 'cts-button',
+  templateUrl: './button.component.html',
+  styleUrls: ['./button.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class ButtonComponent implements OnInit, OnChanges {
+  /** is button disabled */
+  @Input()
+  disabled?;
+  /** is button loading */
+  @Input()
+  loading?;
+  /** button size large || regular || small */
+  @Input()
+  size?= 'regular';
+  @Input()
+  /** available themes: primary , blue , green , danger, dark, light-gray, outline-dark */
+  theme?= 'primary';
+
+  @Input() spinnerTheming = 'primary' ; // value could be primary , accent , warn
+  classes;
+  /** button click event */
+  @Output()
+  onClick = new EventEmitter();
+  constructor() { }
+
+  emitClick(): void {
+    this.onClick.next();
+  }
+  ngOnChanges(changes: SimpleChanges): void {
+    //Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.
+    //Add '${implements OnChanges}' to the class.
+    this.setClasses();
+  }
+  ngOnInit(): void {
+    this.setClasses();
+  }
+
+  setClasses() {
+    let classes = {
+      //theme
+      primary: this.theme === 'primary',
+      blue: this.theme === 'blue',
+      green: this.theme === 'green',
+      danger: this.theme === 'danger',
+      dark: this.theme === 'dark',
+      gray: this.theme === 'gray',
+      'light-gray': this.theme === 'light-gray',
+      'outline-dark': this.theme === 'outline-dark',
+      //sizes
+      large: this.size === 'large',
+      regular: this.size === 'regular', 
+      small: this.size === 'small',
+      //loading
+      submitting: this.loading,
+      //actions
+      disabled: this.disabled,
+    };
+    this.classes = classes;
+  }
+}

package/src/lib/shared/components/item-list/item-list.component.html

@@ -0,0 +1,38 @@
+
+<mat-list-item class="list-item" (click)="itemlistClick()" [ngClass]="{
+    'list-item-selected': selectedId == item.uid
+  }">
+  <div class="direction"><i class="incoming bi bi-box-arrow-down" *ngIf="!iconname&&item.direction?.toLowerCase() === 'incoming'"></i></div>
+
+  <div class="direction"><i class="outcoming bi bi-box-arrow-up" *ngIf="!iconname&&item.direction?.toLowerCase() === 'outgoing'"></i></div>
+
+  <div class="direction"><i class="internal bi bi-box-arrow-right" *ngIf="!iconname&&item.direction?.toLowerCase() === 'interenal'"></i></div>
+
+  <mat-icon *ngIf="iconname" mat-list-icon class="icon {{moreclasses}}">{{
+    iconname
+    }}</mat-icon>
+
+    <span class="icon-Revew new-icon"></span>
+    <ng-content select=".icon"></ng-content>
+
+  <div class="content">
+    <div *ngIf="title" mat-line>{{ title }}</div>
+  <div mat-line>
+    <ng-content select=".description"> </ng-content>
+  </div>
+</div>
+  <button class="menu-item-action" *ngIf="actions?.length" (click)="$event.stopPropagation()" [matMenuTriggerFor]="menu">
+    <mat-icon>more_vert</mat-icon>
+  </button>
+
+  <mat-menu #menu="matMenu" class="actionMenuWrapper">
+    <div SetRtl class="flex flex-col justify-between">
+      <ng-container *ngFor="let menu_item of actions">
+        <button mat-menu-item class="{{menu_item.action_Style}}" (click)="menuactionClicked(menu_item.name, item)">
+          <i class="{{menu_item.icon}}" *ngIf="menu_item.icon"></i>
+          <span class="{{menu_item.title_Style}}">{{ menu_item.title | translate }}</span>
+        </button>
+      </ng-container>
+    </div>
+  </mat-menu>
+</mat-list-item>

package/src/lib/shared/components/item-list/item-list.component.scss

@@ -0,0 +1,65 @@
+.list-item {
+  font-size: 16px;
+  cursor: pointer;
+  height: 55px !important;
+  .new-icon{
+    display: none;
+  }
+  .mat-list-item-content{
+    padding: 0px !important;
+    .icon {
+      padding: 0px 4px;
+      font-size: 35px;
+      width: auto;
+      height: auto;
+      &.link-relation{
+        font-size: 25px;
+      }
+      &.attachment-icon {
+        font-size: 25px;
+      }
+    }
+    .content {
+      width: 100%;
+      margin: 0px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      .mat-line{
+        font-size: 16px;
+        color: #212529;
+        .description{
+          font-size: 12px;
+        }
+      }
+    }
+  }
+  a {
+    color: black;
+  }
+
+  .menu-item-action {
+    font-size: 20px;
+    border: 0;
+    background: transparent;
+  }
+
+
+  .direction {
+    font-size: 20px;
+    .incoming {
+      color: #00dca5;
+    }
+    .outcoming {
+      color: #fbb62c;
+    }
+  }
+  
+}
+
+.list-item:hover {
+  background-color: #f5f6f8;
+}
+
+.list-item-selected {
+  background-color: #f5f6f8;
+}

package/src/lib/shared/components/item-list/item-list.component.spec.ts

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

package/src/lib/shared/components/item-list/item-list.component.ts

@@ -0,0 +1,69 @@
+import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
+import { ViewerFilesService } from '../../../components/correspondence-relation/services/viewer-files.service';
+
+/**
+ * Reusable List item component with actions menu for listing a document or a version of a document
+ * @title
+ * List item component
+ * @example
+ *
+ * <cts-item-list
+ *   [item]="item"
+ *   [title]="item.title"
+ *   [iconname]="'link'"
+ *   [actions]="menu_actions"
+ *   (actionclicked)="handleAction($event)"
+ *   (itemClicked)='handleItem()'
+ *   [moreclasses]="'link-relation'"
+ * ></cts-item-list>
+ */
+@Component({
+  selector: 'cts-item-list',
+  templateUrl: './item-list.component.html',
+  styleUrls: ['./item-list.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class ItemListComponent implements OnInit {
+  selectedId;
+  /** Document Item  */
+  @Input()
+  item: any;
+  /** Icon to display */
+  @Input()
+  iconname: string;
+  /** title of the item */
+  @Input()
+  title: string;
+  /** array of actions to be shown in actions menu */
+  @Input()
+  actions?: string[];
+  /** highlight item if item is selected */
+  @Input()
+  isselected? = false;
+  /** provide more classes to be assigned to the item DOM */
+  @Input()
+  moreclasses?;
+  /** event Emitter that fires when item is clicked */
+  @Output()
+  itemClicked = new EventEmitter();
+  /** Action Clicked event Emitter, emits action name and item object when an action is clicked */
+  @Output()
+  actionclicked = new EventEmitter();
+
+  itemlistClick() {
+    // this.isselected = true;
+    this.itemClicked.next();
+  }
+
+  menuactionClicked(menu_item_name, item) {
+    this.actionclicked.next({ action: menu_item_name, item: item });
+  }
+
+  constructor(private viewerFilesService: ViewerFilesService) { }
+
+  ngOnInit(): void {
+    this.viewerFilesService.selectedFileId.subscribe((res) => {
+      this.selectedId = res;
+    });
+  }
+}

package/src/lib/shared/components/no-data/no-data.component.html

@@ -0,0 +1,6 @@
+<div class="container" [ngClass]="{'no-data-border':border}">
+  <img class="empty-state-img" [src]="img" *ngIf="img">
+  <div class="empty-state-test">
+    {{ message || "noData" | translate }}
+  </div>
+</div>

package/src/lib/shared/components/no-data/no-data.component.scss

@@ -0,0 +1,16 @@
+.container {
+  display: grid;
+  place-items: center;
+  height: 100%;
+  width: 100%;
+  font-size: 14px;
+  color: gray;
+  padding: 10px;
+  .empty-state-img{
+    display: none;
+  }
+}
+
+.no-data-border {
+  border: 1px solid #d9dce2;
+}

package/src/lib/shared/components/no-data/no-data.component.spec.ts

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

package/src/lib/shared/components/no-data/no-data.component.ts

@@ -0,0 +1,28 @@
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
+/**
+ * Reusable Component to be shown when no data is present
+ * @title
+ * No Data Component
+ * @example
+ *
+ * <cts-no-data
+ *   [message]="'PATH.TO.TRANSLATION'"
+ * ></cts-no-data>
+ */
+@Component({
+  selector: 'cts-no-data',
+  templateUrl: './no-data.component.html',
+  styleUrls: ['./no-data.component.scss'],
+  encapsulation : ViewEncapsulation.None
+})
+export class NoDataComponent implements OnInit {
+  /**  tralsnation path to the message to be shown */
+  @Input()
+  message? = 'noData';
+  @Input()
+  border = true;
+  @Input() img = '';
+  constructor() {}
+
+  ngOnInit(): void {}
+}

package/src/lib/shared/components/read-more/read-more.component.ts

@@ -0,0 +1,86 @@
+import { Component, Input, OnChanges } from '@angular/core';
+
+/**
+ * Reusable component to truncate text, it will add '...' and a read more button if the text is longer than specified,
+ * Conditions are word count,char count or line break count respectively
+ * @title
+ * Read More Component
+ * @example
+ *
+ * <app-read-more
+ *  [charCount]="60"
+ *  [wordCount]="12"
+ *  [lineBreaks]="4"
+ *  [text]="data?.description"
+ * ></app-read-more>
+ */
+@Component({
+  selector: 'app-read-more',
+  template: `
+    <p class='break-wrap inline' style='white-space: pre-wrap;' [ngClass]="{'hidden': fullText}"  [innerHTML]='rmTextShort'></p>
+  <p class='break-wrap inline' style='white-space: pre-wrap' [ngClass]="{'hidden': !fullText}"  [innerHTML]='rmTextFull'></p>
+  <p class='inline' [ngClass]="{'hidden': rmTextFull.length === rmTextShort.length}">
+    <small>
+      <a href='javascript:;' class='text-primary underline' (click)='readMore(true)' [hidden]='!showMore'> {{'more' | translate}}</a>
+  <a href='javascript:;' (click)='readMore(false)' class='text-primary underline' [hidden]='!showLess'> {{'less' | translate}}</a>
+  </small>
+  </p>`
+  ,
+  styles: ['p { margin-bottom:6px }']
+
+})
+export class ReadMoreComponent implements OnChanges {
+  /** text to be handled */
+  @Input() text: string;
+  /** Char count limit */
+  @Input() charCount = 300;
+  /** word count limit */
+  @Input() wordCount = 30;
+  /** line breaks limit */
+  @Input() lineBreaks = 4;
+  fullText = true;
+  showMore = false;
+  showLess = false;
+  rmTextShort = '';
+  rmTextFull = '';
+  inputWords = [];
+  constructor() {
+  }
+
+  readMore(flag) {
+    if (flag) {
+      this.showMore = false;
+      this.fullText = true;
+      this.rmTextFull = this.text;
+      this.showLess = true;
+    } else {
+      this.showLess = false;
+      this.showMore = true;
+      this.fullText = false;
+    }
+  }
+
+  ngOnChanges() {
+    this.rmTextShort = this.text ? this.text : '';
+    this.rmTextFull = this.text ? this.text : '';;
+    this.inputWords = this.text.split(' ');
+    if (this.inputWords.length > this.wordCount) {
+      this.fullText = false;
+      this.showMore = true;
+      this.rmTextShort = this.inputWords.slice(0, this.wordCount).join(' ') + '...';
+    } else {
+      if (this.rmTextShort.length > this.charCount) {
+        this.fullText = false;
+        this.showMore = true;
+        this.rmTextShort = this.rmTextShort.substr(0, this.charCount) + '...'
+      } else {
+        const lineBreaks = this.rmTextShort.split(/\n/g)
+        if (lineBreaks.length > this.lineBreaks) {
+          this.fullText = false
+          this.showMore = true
+          this.rmTextShort = lineBreaks.slice(0, this.lineBreaks).join('\n') + '...'
+        }
+      }
+    }
+  }
+}

package/src/lib/shared/components/search-autocomplete/search-autocomplete.component.html

@@ -0,0 +1,24 @@
+<div class="search-container">
+  <ng-container>
+    <div>
+      <label class="select-label" >{{ label | translate
+      }}</label>
+    </div>
+  </ng-container>
+  <!-- [customFilter]="disableFilter" -->
+  <ng-autocomplete #auto [data]="documentList" [searchKeyword]="'filter'" (selected)='selectItem($event)'
+    (inputChanged)='onSearchInputChange($event)' (closed)="close()" [itemTemplate]="itemTemplate"
+    [notFoundTemplate]="notFoundTemplate" [placeholder]="'correspondence-relation.searchby' | translate"
+    [debounceTime]='1000' [isLoading]="isLoading" (inputCleared)='inputCleared()'>
+  </ng-autocomplete>
+
+  <ng-template #itemTemplate let-item>
+    <div class="item">
+      <span>{{item.title}}</span>
+    </div>
+  </ng-template>
+
+  <ng-template #notFoundTemplate>
+    <div>{{'correspondence-relation.notfound' | translate}}</div>
+  </ng-template>
+</div>