nuxeo-development-framework 3.1.1 → 3.1.2

package/src/lib/components/attachment-modal/attachments/attachments.component.ts

@@ -0,0 +1,161 @@
+import { Component, EventEmitter, Inject, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { UploadManagmentService } from '../../../shared-services/upload-managment.service'
+import { CustomToastrService } from '../../custom-toastr/services/custom-toastr.service';
+import { AppConfigService } from '../../../configuration/app-config.service';
+
+@Component({
+  selector: 'app-attachments',
+  templateUrl: './attachments.component.html',
+  styleUrls: ['./attachments.component.scss']
+})
+export class AttachmentsComponent implements OnInit {
+
+    /** Allowed Upload Types */
+    @Input()
+    allowedTypes = 'image/png,video/mp4,video/webm,application/pdf,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation';
+    /** Params to be sent with properties when creating a document */
+    @Input()
+    params = {};
+    /** Path in witch a document will be created */
+    @Input()
+    path;
+    /** Max allowed upload size */
+    @Input()
+    maxSize = 104857600; // 1145728;
+    /** Params to be sent with body when creating a document */
+    @Input()
+    docParams = {};
+    /** Can upload multiple files at once */
+    @Input()
+    multiple = false;
+    /** should create document after batch upload */
+    @Input()
+    createDocument = true;
+    /** Max allowed number of files size */
+    @Input()
+    allowedMaxNumberOfFiles = 10;
+    // to do extra logic when source is new person dialog
+    @Input() source = '';
+    /** Event emitted on document upload success, it will have document or batch object based on configuration */
+    @Output()
+    uploadSuccess = new EventEmitter();
+    /** Event emitted when an error occurs while attempting upload */
+    @Output()
+    uploadError = new EventEmitter();
+
+    @Output() onSelectingItem = new EventEmitter();
+    uploading = false;
+
+    @Output() itemRemoved = new EventEmitter();
+    @ViewChild('fileInput') fileInput;
+  
+    activeFile={
+      name : ''
+    };
+  constructor(
+    public uploadMangmentService : UploadManagmentService ,
+    @Inject('environment') private environment, 
+    private customToastrService : CustomToastrService , 
+    public AppConfigService : AppConfigService) { 
+    this.maxSize = this.environment.maxFileSize;
+    this.allowedTypes = this.environment.allowedFileTypes;
+
+  }
+
+  ngOnInit(): void {
+  }
+
+  triggerUpload(): void {
+    this.fileInput.nativeElement.click();
+  }
+
+  isSizeChecked(file) {
+    if (file.size <= this.maxSize) {
+      return true;
+    }
+    else
+      this.customToastrService.show(
+        'error',
+        'error',
+        'ERRORS.SIZE',
+        {},
+        `${(this.maxSize / (1024 * 1024)).toFixed(2)}MB` 
+      );
+    this.uploadError.next('errors.size');
+    return false;
+  }
+
+  isTypeChecked(file) {
+    let myAttachmentNameSections = file.name.split('.');
+    let fileType = myAttachmentNameSections[myAttachmentNameSections.length-1];
+    if(this.allowedTypes.includes(fileType.toLowerCase())){
+      return true
+    }
+    else {
+      this.customToastrService.show(
+        'error',
+        'error',
+        'ERRORS.TYPE',
+        {},
+        this.allowedTypes.replace(/./gi, '').toUpperCase()
+      );
+      this.uploadError.next('errors.type');
+      return false;
+    }
+  }
+
+  isMaxNumberOfFiles(selectedFiles) {
+    if (selectedFiles.length <= this.allowedMaxNumberOfFiles)
+      return true
+    else {
+      this.customToastrService.show(
+        'error',
+        'error',
+        'ERRORS.MAX_NUMBER_OF_FILES',
+        {},
+        this.allowedMaxNumberOfFiles
+      );
+      this.uploadError.next('errors.maxNumberOfFiles');
+      return false;
+    }
+  }
+
+  uploadingFiles(files): void {
+    let selectedFiles = Object.keys(files).map(key => files[key]);
+    selectedFiles = selectedFiles.filter(file => {
+      //if (this.isMaxNumberOfFiles(selectedFiles)) {
+        if (this.isSizeChecked(file)
+        && this.isTypeChecked(file)
+        ) {
+          return file;
+        }
+     // }
+    });
+    if (selectedFiles.length) {
+      if(this.source == 'faceRecognition') {
+        selectedFiles.forEach(e => {
+          let reader = new FileReader();
+          reader.readAsDataURL(e);
+          reader.onload = (_event) => {
+            e['previewLink'] = reader.result
+          }
+        })
+
+      }
+      this.uploading = true;
+      this.uploadMangmentService.uploadFilesMangment(selectedFiles);
+    }
+  }
+
+  removeItem(item , listofFiles){
+    const removeIndex = listofFiles.findIndex(file => file.name === item.name);
+    listofFiles.splice( removeIndex, 1 );
+    this.itemRemoved.emit(true);
+  }
+
+  selectItem(file){
+    this.activeFile = file;
+    this.onSelectingItem.emit(file);
+  }
+
+}

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

@@ -0,0 +1,13 @@
+<div class="avatar-wrapper">
+  <ng-container *ngIf="user?.avatar?.length; else initials">
+    <img *ngIf="user.avatar | secure | async as obs; else initials" [attr.src]="obs" alt="user image" />
+  </ng-container>
+
+  <ng-template #initials>
+    <div class="avatar-name " [ngStyle]="{ 'background-color': backgroundColor }">
+      <span>{{
+        this.getInitials()
+        }}</span>
+    </div>
+  </ng-template>
+</div>

package/src/lib/components/avatar/avatar/avatar.component.scss

@@ -0,0 +1,32 @@
+// @import "";
+.avatar-wrapper {
+  width: 100%;
+  height: 100%;
+  border-radius: 100%;
+  overflow: hidden;
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  .avatar-name {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    span {
+      font-size: 16px;
+      font-weight: bold;
+      color: #ffffff;
+    }
+  }
+}
+
+.avatar-out-container {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  overflow: hidden;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}

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

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

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

@@ -0,0 +1,50 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+/**
+ * A component to display user avatar if exists, or initials if not
+ *
+ * ![Screenshot-1](../screenshots/avatar1.png) ![Screenshot-2](../screenshots/avatar2.png)
+ * @title
+ * User Avatar
+ * @example
+ *
+ * <cts-avatar [user]="user"></cts-avatar>
+ */
+@Component({
+  selector: 'cts-avatar',
+  templateUrl: './avatar.component.html',
+  styleUrls: ['./avatar.component.scss']
+})
+export class AvatarComponent implements OnInit {
+  /** Nuxeo user object */
+  @Input() user: any;
+  backgroundColor;
+  constructor() { }
+
+  ngOnInit(): void {
+    this.stringToHslColor(`${this.user?.properties?.firstName} ${this.user?.properties?.lastName}`, 30, 80);
+  }
+
+  stringToHslColor(str, s, l) {
+    var hash = 0;
+    for (var i = 0; i < str.length; i++) {
+      hash = str.charCodeAt(i) + ((hash << 5) - hash);
+    }
+
+    var h = hash % 360;
+    this.backgroundColor = 'hsl(' + h + ', ' + s + '%, ' + l + '%)';
+  }
+
+  getInitials(): string {
+    return this.user?.properties
+      ? (this.user.properties.initials = [
+        this.user.properties.firstName
+          ? this.user.properties.firstName[0].toUpperCase()
+          : '',
+        this.user.properties.lastName
+          ? this.user.properties.lastName[0].toUpperCase()
+          : '',
+      ].join(''))
+      : '';
+  }
+}

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

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AvatarComponent } from './avatar/avatar.component';
+import { PipesModule } from '../../pipes/pipes.module';
+
+
+/**
+ * @title
+ * Avatar Module
+ */
+@NgModule({
+  declarations: [AvatarComponent],
+  imports: [
+    CommonModule,
+    PipesModule
+  ],
+  exports: [
+    AvatarComponent
+  ]
+})
+export class AvatarModule { }

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

@@ -0,0 +1,35 @@
+<div
+  class="app-card"
+  [ngClass]="{
+    'dark-app-card ': dark
+  }"
+>
+  <div class="card-inner">
+    <div
+      [ngClass]="{
+        hidden: title.childNodes.length == 0 && toolbar.childNodes.length == 0
+      }"
+      class="card-title"
+    >
+      <div class="title-padder">
+        <!-- title Area -->
+        <span #title>
+          <ng-content select=".title"></ng-content>
+        </span>
+        <!-- toolbar Area -->
+        <div class="my-toolbar" #toolbar>
+          <ng-content select=".my-toolbar"></ng-content>
+        </div>
+      </div>
+    </div>
+    <!-- body area -->
+    <div class="card-body" *ngIf="!noBody">
+      <ng-content select=".body"></ng-content>
+    </div>
+    <div class="no-items">
+      <p class="message">
+        <ng-content select=".no-content"></ng-content>
+      </p>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,81 @@
+@import "../../assets/scss/myApp.scss";
+
+.app-card {
+  border-radius: 5px;
+  display: flex;
+  flex-direction: column;
+  background: $white;
+  // height: 100%;
+  // overflow: hidden;
+  position: relative;
+  padding: 24px 0;
+  padding-bottom: 0px;
+  .card-inner {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+.card-title {
+  height: auto;
+  border: 0px solid;
+  border-color: $gray-500;
+  color: $gray-500;
+  border-inline-start-width: 8px;
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  span,
+  p {
+    font-size: $text-md;
+  }
+}
+
+.title-padder {
+  padding: 0 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.dark-app-card {
+  background: $gray-500;
+  .card-title {
+    border-color: $white;
+    color: $white;
+  }
+}
+
+.my-toolbar {
+  display: flex;
+  .add-button {
+    border-radius: 5px;
+    width: 65px;
+    height: 40px;
+    background-color: #465573;
+    color: white;
+    font-size: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .icon {
+      font-size: 30px;
+      font-weight: bold;
+    }
+    .edit{
+      font-size: 25px;
+    }
+  }
+}
+
+.no-items {
+  display: flex;
+  justify-content: center;
+  .message {
+    text-align: center;
+    color: $gray-200;
+    font-size: $text-lg;
+  }
+}

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

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

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

@@ -0,0 +1,38 @@
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
+/**
+ * A reusable card component to display various types of contents
+ *
+ * ![Screenshot-1](../screenshots/card.png)
+ * @title
+ * Card
+ * @example
+ *
+ * <app-card>
+ *   <h3 class="title">
+ *     Card title
+ *   </h3>
+ *   <div class="my-toolbar">
+ *     <button class="btn-primary"> Action Button </button>
+ *   </div>
+ *   <div class="body">
+ *   </div>
+ * </app-card>
+ */
+@Component({
+  selector: 'app-card',
+  templateUrl: './card.component.html',
+  styleUrls: ['./card.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class CardComponent implements OnInit {
+  /** card has no body */
+  @Input()
+  noBody?= false;
+  /** is card dark */
+  @Input()
+  dark?= false;
+  /** enable/disable shadow */
+  constructor() { }
+
+  ngOnInit(): void { }
+}

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

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CardComponent } from './card.component';
+
+/**
+ * @title
+ * Card Module
+ */
+@NgModule({
+  declarations: [CardComponent],
+  imports: [CommonModule],
+  exports: [CardComponent],
+  providers: [],
+})
+export class CardModule { }

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

@@ -0,0 +1,48 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { RouterModule } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+import { DirectiveModule } from '../../directive/directive.module';
+import { PipesModule } from '../../pipes/pipes.module';
+import { LibrarySharedModule } from '../../shared/libraryShared.module';
+import { CardModule } from '../card/card.module';
+import { CommentItemComponent } from './components/comment-item/comment-item.component';
+import { CommentsDashletComponent } from './components/comments-dashlet/comments-dashlet.component';
+import { CommentsListComponent } from './components/comments-list/comments-list.component';
+import { EditDeleteModalComponent } from './components/edit-delete-modal/edit-delete-modal.component';
+
+/**
+ * @title
+ * Comments Module
+ * 
+ */
+@NgModule({
+  declarations: [
+    CommentsDashletComponent,
+    CommentsListComponent,
+    CommentItemComponent,
+    EditDeleteModalComponent
+  ],
+  imports: [
+    CommonModule,
+    LibrarySharedModule,
+    InfiniteScrollModule,
+    FormsModule,
+    CardModule,
+    PipesModule,
+    TranslateModule,
+    MatIconModule,
+    MatProgressSpinnerModule,
+    MatTooltipModule,
+    DirectiveModule,
+    MatTooltipModule
+  ],
+  exports: [CommentsDashletComponent ],
+  providers: [],
+})
+export class CommentsModule {}

package/src/lib/components/comments/components/comment-item/comment-item.component.html

@@ -0,0 +1,32 @@
+<div class="comment-item" SetRtl>
+
+  <div class="comment-controls" *ngIf="showCommentActions">
+    <span class="bi bi-pencil contril-icon" 
+    *permission="{name: 'updateComment', entity: comment}"
+    matTooltip="{{ 'BUTTONS.EDIT' | translate }}"
+     (click)="executeFunction('edit')"
+     ></span>
+
+    <span class="bi bi-trash contril-icon" 
+    *permission="{name: 'deleteComment', entity: comment}"
+    matTooltip="{{ 'BUTTONS.Delete' | translate }}"
+    (click)="executeFunction('delete')"
+    ></span>
+  </div>
+
+  <app-user-card [user]="comment.Commenter" [diameter]="12">
+    <div class="lineOne">
+      {{ comment.Commenter.properties.firstName }}
+      {{ comment.Commenter.properties.lastName }}
+    </div>
+    <div class="lineOnePart2">
+      <span class="date" matTooltip='{{ comment?.creationDate | localizedDate:
+        "fullDate"}}' matTooltipClass="tdf-tooltip" TooltipPosition='below'>
+        <span class="date-sperator px-1">|</span>{{ comment?.creationDate | timeAgo : lang }}</span>
+    </div>
+    <div class="lineTwo">
+      <app-read-more class="comment-text" [text]="comment?.text" [wordCount]="loaderType === 'scroll' ? 20 : 60">
+      </app-read-more>
+    </div>
+  </app-user-card>
+</div>

package/src/lib/components/comments/components/comment-item/comment-item.component.scss

@@ -0,0 +1,41 @@
+@import "../../../../assets/scss/myApp.scss";
+.comment-item {
+  border: 1px solid $gray-100;
+  padding: 8px 4px;
+  display: flex;
+  position: relative;
+  &:hover {
+    background: $gray-50;
+  }
+  .comment-controls{
+    position: absolute;
+    right: 5px;
+    .contril-icon{
+      padding: 0px 5px;
+      cursor: pointer;
+    }
+  }
+}
+.date {
+  color: $blue-400;
+}
+.comment-text {
+  color: $gray-300;
+}
+.comment-avatar {
+  align-items: top;
+  padding: 0 4px;
+  display: flex;
+  .avatar {
+    width: 40px;
+    height: 40px;
+    display: block;
+  }
+}
+
+.rtl{
+  .comment-controls{
+    left: 5px;
+    right: auto;
+  }
+}