nuxeo-development-framework 3.1.1 → 3.1.2

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,3 @@
+<div class="container" [ngClass]="{'no-data-border':border}">
+  {{ message || "noData" | translate }}
+</div>

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

@@ -0,0 +1,13 @@
+.container {
+  display: grid;
+  place-items: center;
+  height: 100%;
+  width: 100%;
+  font-size: 14px;
+  color: gray;
+  padding: 10px;
+}
+
+.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,26 @@
+import { Component, Input, OnInit } 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'],
+})
+export class NoDataComponent implements OnInit {
+  /**  tralsnation path to the message to be shown */
+  @Input()
+  message? = 'noData';
+  @Input()
+  border = true;
+  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>

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

@@ -0,0 +1,50 @@
+.select-label {
+  color: #8f98aa;
+  font-size: 12px;
+  margin-bottom: 0px;
+}
+.autocomplete-container .suggestions-container ul {
+  max-height: 150px !important;
+}
+
+.autocomplete-container .suggestions-container .is-visible {
+  height: 150px !important;
+  //margin-top: 10px;
+  max-height: 150px !important;
+  border: 1px lightgray solid !important;
+  box-shadow: none !important;
+}
+// .search-container {
+//   position: relative;
+// }
+
+.autocomplete-container {
+  box-shadow: none !important;
+}
+
+.autocomplete-container .input-container input {
+  background-color: rgba(143, 152, 170, 0.1) !important;
+  padding: 10px !important;
+  border: 1px solid #ccc !important;
+  border-radius: 5px !important;
+}
+
+.autocomplete-container .suggestions-container .complete-selected,
+.autocomplete-container .suggestions-container ul li:hover {
+  background-color: #f5faff !important;
+}
+
+.autocomplete-container .suggestions-container ul li{
+  padding: 8px 10px !important;
+}
+
+[dir="rtl"] {
+  .input-container input {
+    direction: rtl;
+  }
+  .x {
+    left: 10px;
+    right: auto !important;
+  }
+}
+

package/src/lib/shared/components/search-autocomplete/search-autocomplete.component.spec.ts

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

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

@@ -0,0 +1,153 @@
+import {
+  Component, EventEmitter, Input, OnInit, Output, ViewChild, ViewEncapsulation,
+  Optional,
+  Self,OnChanges,
+  SimpleChanges,
+} from '@angular/core';
+import { AbstractControl, ControlValueAccessor, FormControl, NgControl } from '@angular/forms';
+import { CorrespondenceRelationService } from '../../../components/correspondence-relation/services/correspondence-realation.service';
+
+/** Auto complete dropdown component
+ * @title
+ * Search Autocomplete
+ */
+@Component({
+  selector: 'cts-search-autocomplete',
+  templateUrl: './search-autocomplete.component.html',
+  styleUrls: ['./search-autocomplete.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class SearchAutocompleteComponent implements ControlValueAccessor, OnChanges {
+
+  @ViewChild(SearchAutocompleteComponent)
+  searchautocomplete: SearchAutocompleteComponent;
+
+  loading = false;
+  target: any = {};
+  @ViewChild('auto') auto;
+  /** placeholder for the input */
+  @Input() placeholder;
+  /** label for the input */
+  @Input() label;
+  /** id of correspondance that should be exluded  */
+  @Input()
+    correspondanceId;
+
+  /** direction to determin direction of corespond to search in it */
+  @Input() direction;
+
+  /** event emitter that will fire with selected item info when an item is selected */
+  @Output() onSelecting = new EventEmitter();
+
+  // function related to value accessor
+  propagateChange: any = () => { };
+  validateFn: any = () => { };
+  public onTouched: any = () => {
+    /*Empty*/
+  };
+
+  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;
+  }
+  writeValue(value) {
+    if (value) {
+      this.target = value;
+      this.auto.query = this.target?.title;
+    }
+  }
+
+  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;
+  }
+  reset() {
+    this.inputCleared();
+    this.searchautocomplete.reset();
+  }
+
+  constructor(private corressvc: CorrespondenceRelationService,
+    @Self() @Optional() public control: NgControl
+  ) {
+    this.control.valueAccessor = this;
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    this.correspondanceId = this.correspondanceId;
+    console.log('id', this.correspondanceId);
+  }
+
+  ngOnInit(): void {
+  }
+  /**ng-Autocomplete related functions */
+  alwaysopened: boolean = false;
+  inputCleared() {
+    this.documentList = [];
+    this.auto.close();
+    this.target = {};
+    this.propagateChange();
+    this.onSelecting.emit();
+  }
+
+  selectItem(item) {
+    this.target = item;
+    this.propagateChange(item);
+    this.onSelecting.emit(item);
+
+  }
+  isLoading: boolean = false;
+  documentList: any[] = [];
+
+  onSearchInputChange(val: string) {
+    if (val?.length == 0) {
+      return;
+    }
+    this.corressvc
+      .search(val, {
+        Correspondence_replied: false,
+        Correspondence_direction: this.direction ? this.direction : null
+      })
+      .subscribe((data) => {
+         this.documentList = data.filter((correspondance) => {
+          if (this.correspondanceId) {
+            return this.correspondanceId != correspondance.id;
+          } else {
+            return correspondance;
+          }
+        });
+        // this.documentList = data;
+        this.isLoading = false;
+        return this.documentList;
+      });
+  }
+  //disableFilter = (items: any[]) => items;
+
+  close() { }
+}

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

@@ -0,0 +1,10 @@
+<div class="spiner-container">
+  <mat-spinner
+    [value]="90"
+    [strokeWidth]="3"
+    overlay="true"
+    [diameter]="25"
+    color="warn"
+  >
+  </mat-spinner>
+</div>

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

@@ -0,0 +1,11 @@
+.spiner-container {
+  position: absolute;
+  bottom: 12px;
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+  // left: -5px;
+  mat-spinner{
+    position: relative;
+  }
+}

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

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

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

@@ -0,0 +1,25 @@
+import { Component, OnInit } from '@angular/core';
+
+/**
+ * Basic Loading spinner component to be used in lists when loading data
+ * @title
+ * Spinner Component
+ * @example
+ *
+ * <ng-container *ngIf="loading">
+ *   <cts-spinner></cts-spinner>
+ * </ng-container>
+ */
+@Component({
+  selector: 'cts-spinner',
+  templateUrl: './spinner.component.html',
+  styleUrls: ['./spinner.component.scss']
+})
+export class SpinnerComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

package/src/lib/shared/components/user-card/user-card.component.html

@@ -0,0 +1,21 @@
+<ng-container *ngIf="user?.properties">
+  <div class="user-card">
+    <div class="p-1">
+      <cts-avatar class="card-avatar diameter" [user]="user" routerLink="/users/profile/{{ user.properties.username }}"></cts-avatar>
+    </div>
+    <div class="user-content">
+      <div class="first-line-container">
+        <span class="first-line" routerLink="/users/profile/{{ user.properties.username }}">
+          <ng-content select=".lineOne"></ng-content>
+        </span>
+        <span>
+          <ng-content select=".lineOnePart2 "></ng-content>
+        </span>
+      </div>
+
+      <span class="lineTwo">
+        <ng-content select=".lineTwo "></ng-content>
+      </span>
+    </div>
+  </div>
+</ng-container>

package/src/lib/shared/components/user-card/user-card.component.scss

@@ -0,0 +1,42 @@
+@import "../../../assets/scss/myApp.scss";
+.diameter {
+  width: 40px;
+  height: 40px;
+}
+.user-card {
+  font-size: 12px;
+  display: flex;
+  justify-content: center;
+}
+.card-avatar {
+  cursor: pointer;
+  display: block;
+}
+.user-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 0 4px;
+}
+
+.first-line {
+  display: flex;
+  flex-direction: column;
+  font-size: 12px;
+  cursor: pointer;
+  &-container {
+    display: flex;
+    align-items: center;
+  }
+}
+@media (min-width: 1679px) {
+  .diameter {
+    width: 48px;
+    height: 48px;
+  }
+
+  .user-card,
+  .first-line {
+    font-size: 16px;
+  }
+}

package/src/lib/shared/components/user-card/user-card.component.spec.ts

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

package/src/lib/shared/components/user-card/user-card.component.ts

@@ -0,0 +1,42 @@
+import { Component, Input, OnInit } from '@angular/core';
+/**
+ * reusable user card component
+ * @title
+ * User Card
+ * @example
+ *
+ * <app-user-card [user]="NuxeoUserObject">
+ *   <div class="lineOne">
+ *     Content of card first line
+ *   </div>
+ *   <div class="lineOnePart2">
+ *     Content of card first line second part
+ *   </div>
+ *   <div class="lineTwo">
+ *     Content of card second line
+ *   </div>
+ * </app-user-card>
+ */
+@Component({
+  selector: 'app-user-card',
+  templateUrl: './user-card.component.html',
+  styleUrls: ['./user-card.component.scss'],
+})
+export class UserCardComponent implements OnInit {
+  /** Nuxeo user object */
+  @Input()
+  user;
+  /** @deprecated diameter of avatar */
+  @Input()
+  diameter;
+
+  constructor() { }
+
+  ngOnInit(): void {
+    if (screen.width <= 1536) {
+      this.diameter = 10;
+    } else if (screen.width > 1536) {
+      this.diameter = 12;
+    }
+  }
+}