nuxeo-development-framework 3.1.4 → 3.1.6

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

@@ -0,0 +1,70 @@
+import { Component, Input, OnInit, Output , EventEmitter} from '@angular/core';
+import { TranslationService } from '../../../../Core/services/translation/translation.service';
+import { Subscription } from 'rxjs';
+import { MatDialog } from '@angular/material/dialog';
+import { EditDeleteModalComponent } from '../edit-delete-modal/edit-delete-modal.component';
+
+/**
+ * @ignore
+ */
+@Component({
+  selector: 'app-comment-item',
+  templateUrl: './comment-item.component.html',
+  styleUrls: ['./comment-item.component.scss']
+})
+export class CommentItemComponent implements OnInit {
+  @Input()
+  comment;
+  @Input()
+  loaderType = 'scroll';
+  @Input() showCommentActions = true;
+  lang =  'en';
+  langSubscription : Subscription;
+  dialogRef;
+
+  @Output() refreshCommentList = new EventEmitter();
+  constructor(private translationSrvice : TranslationService , private dialog : MatDialog) { }
+
+  ngOnInit(): void {
+    console.log("comment comment" , this.comment)
+    let date =new Date(this.comment.creationDate);
+    date.setSeconds(date.getSeconds()-5);
+    this.comment.creationDate= date.toISOString();
+    this.langSubscription = this.translationSrvice.isArabic.subscribe(res => {
+      this.lang = res ? 'ar' : 'en' ;
+    })
+   }
+
+   executeFunction(type){
+    if(type === 'edit'){
+    this.dialogRef =  this.dialog.open(EditDeleteModalComponent , {
+        width: '500px',
+        height: '220px',
+        panelClass: 'watcher-dialog-container',
+        data: {
+          type : 'edit',
+          comment : {...this.comment}
+        },
+        disableClose: true,
+    })
+    }else if(type === 'delete'){
+      this.dialogRef = this.dialog.open(EditDeleteModalComponent , {
+          width: '500px',
+          height: '150px',
+          panelClass: 'watcher-dialog-container',
+          data: {
+            type : 'delete',
+            comment : {...this.comment}
+          },
+          disableClose: true,
+      })
+    }
+
+    this.dialogRef.afterClosed().subscribe((res) => {
+      if(res){
+        this.refreshCommentList.emit();
+      }
+    })
+
+   }
+}

package/src/lib/components/comments/components/comments-dashlet/comments-dashlet.component.html

@@ -0,0 +1,58 @@
+<div class="comments-container">
+  <div class="comments-title">
+    {{ "comment.comment" | translate }} ({{ commentsList?.totalRecords }})
+  </div>
+  <div class="body">
+    <div class="comments-list-container">
+      <div class="adding-comment-section" *ngIf="showaddcomment">
+        <div class="comment-box" *permission="{
+          name: 'comments',
+          entity: correspondence , user: nuxeoService.nuxeoClient.user
+        }">
+          <div class="comment-input">
+            <textarea
+              class="comment-area"
+              name="description"
+              id="description"
+              type="text"
+              rows="3"
+              required
+              matTextareaAutosize
+              matAutosizeMinRows="5"
+              matAutosizeMaxRows="10"
+              [(ngModel)]="comment"
+              [placeholder]="'comment.placeHolder' | translate"
+              #commentText="ngModel"
+            ></textarea>
+          </div>
+          <div class="add-container">
+            <div class="button-wrapper">
+              <cts-button
+                [disabled]="!((comment?.trim())?.length)"
+                [loading]="saving"
+                [theme]="'green'"
+                [size]="'regular'"
+                (click)="onPost()"
+              >
+                {{ "comment.add" | translate }}
+              </cts-button>
+            </div>
+
+          </div>
+        </div>
+      </div>
+      <div
+        class="comment-list"
+        [ngClass]="{ 'fix-height col-6': row, 'col-12': !row }"
+      >
+        <app-comments-list
+          [loaderType]="row ? 'scroll' : 'button'"
+          [pageSize]="row ? 4 : 9"
+          [entityId]="entityId"
+          [showCommentActions]="showCommentActions"
+        >
+        </app-comments-list>
+      </div>
+    </div>
+  </div>
+</div>

package/src/lib/components/comments/components/comments-dashlet/comments-dashlet.component.scss

@@ -0,0 +1,69 @@
+@import "../../../../assets/scss/myApp.scss";
+
+.comments-container {
+  padding: 16px;
+  .comments-title {
+    font-size: 16px;
+    font-weight: 500;
+    padding: 12px;
+    border-bottom: 1px solid $gray-100;
+  }
+  .comments-list-container {
+    .comment-box {
+      display: flex;
+      flex-direction: column;
+      .comment-input {
+        padding: 8px 15px;
+        padding-bottom: 0;
+      }
+      .comment-area {
+        border-radius: 5px;
+        padding: 8px;
+        width: 100%;
+        color: $gray-500;
+        outline: none;
+        border: 1px solid $gray-100;
+        background-color: rgba(143, 152, 170, 0.1);
+        resize: none;
+      }
+      .add-container {
+        margin-inline-start: 15px;
+        display: flex;
+        justify-content: flex-start;
+        border-bottom: 1px solid $gray-100;
+        padding-bottom: 15px;
+        padding-inline-end: 15px;
+      }
+      .extra-actions-container{
+        display: flex;
+        justify-content: space-between !important;
+        flex-wrap: wrap;
+        .button-wrapper {
+          margin-bottom: 10px;
+        }
+        .extra-actions{
+          display: flex;
+        }
+        .submission-button{
+          width: auto !important;
+          padding: 0px 10px;
+          min-width: 80px;
+        }
+      }
+      .button-wrapper {
+        align-items: flex-end;
+        width: 18%;
+      }
+    }
+    .comment-list {
+      margin-top: 8px;
+      .fix-height {
+        height: 200px;
+      }
+    }
+  }
+  .revers-sections{
+    display: flex;
+    flex-direction: column-reverse;
+  }
+}

package/src/lib/components/comments/components/comments-dashlet/comments-dashlet.component.ts

@@ -0,0 +1,80 @@
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { browser } from 'protractor';
+import { NuxeoService } from '../../../../Core/services/nuxeo/nuxeo.service';
+import { CommentApiService } from '../../services/comment-api.service';
+import { CommentsListComponent } from '../comments-list/comments-list.component';
+
+/**
+ * A component to display and add comments on a nuxeo document
+ *
+ * ![Screenshot-1](../screenshots/comments.png)
+ * @title
+ * Comments dashlet
+ * @example
+ *
+ * <app-comments-dashlet
+ *   [row]="false"
+ *   [entityId]="file.uid"
+ *   [showaddcomment]="true"
+ * ></app-comments-dashlet>
+ */
+@Component({
+  selector: 'app-comments-dashlet',
+  templateUrl: './comments-dashlet.component.html',
+  styleUrls: ['./comments-dashlet.component.scss'],
+})
+export class CommentsDashletComponent implements OnInit {
+  /** nuxeo document ID */
+  @Input()
+  entityId;
+  /** toggle view mode row / column */
+  /** Correspondance */
+  @Input()
+  correspondence;
+  @Input()
+  row?= true;
+  /** disable/enable add comment section */
+  @Input()
+  showaddcomment?= true;
+
+  @Input() showCommentActions = true;
+
+  comment;
+  comments = [];
+  throttle = 0;
+  distance = 2;
+  saving = false;
+  totalRecords;
+  @ViewChild(CommentsListComponent, { static: false })
+  commentsList: CommentsListComponent;
+  constructor(
+    private translateService: TranslateService,
+    private commentApiService: CommentApiService,
+    public nuxeoService: NuxeoService
+  ) { }
+
+  ngOnInit(): void {
+  }
+
+
+
+  onPost() {
+    this.saving = true;
+    let data = {
+      author: this.nuxeoService.nuxeoClient.user.id,
+      text: this.comment,
+    };
+    this.commentApiService.createComment(data, this.entityId).subscribe(
+      (res) => {
+        this.comment = '';
+        this.saving = false;
+        this.commentsList.p = 0;
+        this.commentsList.getComments(0, true);
+      },
+      (error) => {
+        this.saving = false;
+      }
+    );
+  }
+}

package/src/lib/components/comments/components/comments-list/comments-list.component.html

@@ -0,0 +1,43 @@
+<div
+  class="scroll-div overflow-auto dark-scroll"
+  #scrollDiv
+  infinite-scroll
+  [scrollWindow]="false"
+  [infiniteScrollDistance]="distance"
+  [infiniteScrollDisabled]="infiniteScrollDisabled"
+  [infiniteScrollThrottle]="throttle"
+  (scrolled)="onScroll($event)"
+>
+  <app-comment-item
+    [loaderType]="loaderType"
+    class="mb-2"
+    *ngFor="let comment of comments"
+    [comment]="comment"
+    [showCommentActions]="showCommentActions"
+    (refreshCommentList)="refreshList()"
+  >
+  </app-comment-item>
+  <div *ngIf="fetching && loaderType === 'scroll'">
+    <mat-spinner [diameter]="30"></mat-spinner>
+  </div>
+  <div
+    class="button-wrapper"
+    *ngIf="!infiniteScrollDisabled && loaderType === 'button'"
+  >
+    <cts-button
+      [theme]="'outline-dark'"
+      [size]="'regular'"
+      (onClick)="onScroll($event)"
+      [loading]="fetching"
+    >
+      {{ "comment.loadMore" | translate }}
+    </cts-button>
+  </div>
+</div>
+
+<div
+  *ngIf="comments.length === 0 && !fetching"
+  class="No-Items flex justify-center"
+>
+  <cts-no-data [message]="'comment.nocomment'"></cts-no-data>
+</div>

package/src/lib/components/comments/components/comments-list/comments-list.component.scss

@@ -0,0 +1,103 @@
+.text-style {
+  color: white;
+}
+.containerHeight {
+  min-height: 400px;
+  max-height: auto;
+}
+.titleStyle {
+  font-size: 24px;
+}
+.padding-50 {
+  padding: 50px;
+}
+//utility
+.p-20px {
+  padding: 20px;
+}
+.mt-33 {
+  margin-top: 33px;
+}
+.mt-24px {
+  margin-top: 24px;
+}
+.mb-20px {
+  margin-bottom: 20px;
+}
+.mb-30 {
+  margin-bottom: 30px;
+}
+.mt-30 {
+  margin-top: 30px;
+}
+
+.avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+}
+//btns
+.btn {
+  width: 123px;
+  height: 40px;
+}
+.submibtn {
+  width: 171px;
+  height: 40px;
+}
+.btnText {
+  font-size: 14px;
+  color: white;
+}
+// comment Card
+.CardFont {
+  font-size: 14px;
+}
+.border {
+  border-width: 1px;
+}
+.gridContainer {
+  display: grid;
+  grid-template-columns: 40px auto;
+  column-gap: 5px;
+  margin-bottom: 20px;
+}
+.container {
+  height: 110px;
+}
+
+.mat-grid-tile {
+  background-color: blue;
+}
+.avatarContainer {
+  height: 40px;
+  width: 40px;
+}
+.col {
+  .containerHeight {
+    min-height: 260px;
+    max-height: auto;
+  }
+}
+// .col {
+//   display: flex;
+//   flex-direction: column;
+// }
+.gap-40px {
+  row-gap: 40px;
+}
+
+.scroll-div {
+  max-height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+.button-wrapper {
+  width: 150px;
+}
+.comment-spinner {
+  width: 100%;
+  display: grid;
+  place-items: center;
+}

package/src/lib/components/comments/components/comments-list/comments-list.component.ts

@@ -0,0 +1,61 @@
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { browser } from 'protractor';
+import { CommentApiService } from '../../services/comment-api.service';
+/**
+ * @ignore
+ */
+@Component({
+  selector: 'app-comments-list',
+  templateUrl: './comments-list.component.html',
+  styleUrls: ['./comments-list.component.scss'],
+})
+export class CommentsListComponent implements OnInit {
+  @Input()
+  entityId;
+  @Input()
+  pageSize = 4;
+  @Input()
+  loaderType = 'scroll';
+  @Input() showCommentActions;
+  comments = [];
+  throttle = 0;
+  distance = 2;
+  p = 0;
+
+  public totalRecords;
+  fetching = false;
+  infiniteScrollDisabled = false;
+  @ViewChild('scrollDiv') scrollDiv;
+  constructor(
+    private commentApiService: CommentApiService,
+  ) { }
+
+  ngOnInit(): void {
+    this.getComments(this.p);
+  }
+
+  getComments = (page, reset = false) => {
+    this.fetching = !reset;
+    if (reset) {
+      this.scrollDiv.nativeElement.scroll(0, 0);
+    }
+    this.commentApiService.getComments(this.entityId, {
+      currentPageIndex: page,
+      pageSize: this.pageSize
+    }).subscribe((res) => {
+      console.log('comment', res)
+      this.fetching = false;
+      this.totalRecords = res.resultsCount;
+      this.comments = reset ? res.entries : this.comments.concat(res.entries);
+      this.infiniteScrollDisabled = !res.isNextPageAvailable;
+    });
+  }
+  onScroll(event): void {
+    this.getComments(++this.p);
+  }
+
+  refreshList(){
+    this.getComments(0 , true);
+  }
+}

package/src/lib/components/comments/components/edit-delete-modal/edit-delete-modal.component.html

@@ -0,0 +1,22 @@
+<div class="comment-control">
+    <div class="delete-modal" *ngIf="operationType === 'delete'">
+        <div class="delete-message">{{ "comment.are-you-sure" | translate }}</div>
+        <div class="delete-buttons">
+            <button class="submission-button" (click)="delete()">{{ "BUTTONS.Delete" | translate }}</button>
+            <button class="cancelation-button"(click)="cancel()">{{ "BUTTONS.Cancel" | translate }}</button>
+        </div>
+    </div>
+
+    <div class="update-modal" *ngIf="operationType === 'edit'">
+        <div class="text-update">
+            <textarea placeholder="Comment ..." [(ngModel)]="comment.text" rows="3"></textarea>
+            <div class="error" *ngIf="(comment.text.trim()).length === 0">
+                {{ "comment.comment-required" | translate }}
+            </div>
+        </div>
+        <div class="delete-buttons">
+            <button class="submission-button -mx-1" [disabled]="(comment.text.trim()).length === 0" (click)="update()">{{ "BUTTONS.UPDATE" | translate }}</button>
+            <button class="cancelation-button"  (click)="cancel()">{{ "BUTTONS.Cancel" | translate }}</button>
+        </div>
+    </div>
+</div>

package/src/lib/components/comments/components/edit-delete-modal/edit-delete-modal.component.scss

@@ -0,0 +1,48 @@
+.comment-control {
+  height: 100%;
+  .delete-modal {
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    .delete-message {
+      text-align: center;
+      font-size: 16px;
+      color: black;
+      margin-bottom: 20px;
+    }
+    .delete-buttons {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+  }
+  .update-modal {
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    .text-update{
+        .error{
+            font-size: 14px;
+            color: red;
+        }
+    }
+    textarea {
+        margin-bottom: 0px;
+        border-radius: 5px;
+        padding: 8px;
+        width: 100%;
+        color: #465573;
+        outline: none;
+        border: 1px solid #d9dce2;
+        background-color: #8f98aa1a;
+        resize: none;
+    }
+    .delete-buttons {
+        display: flex;
+        justify-content: space-between;
+      }
+  }
+}

package/src/lib/components/comments/components/edit-delete-modal/edit-delete-modal.component.spec.ts

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

package/src/lib/components/comments/components/edit-delete-modal/edit-delete-modal.component.ts

@@ -0,0 +1,56 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { ToastrService } from 'ngx-toastr';
+import { NuxeoService } from '../../../../Core/services/nuxeo/nuxeo.service';
+import { CommentApiService } from '../../services/comment-api.service';
+
+@Component({
+  selector: 'lib-edit-delete-modal',
+  templateUrl: './edit-delete-modal.component.html',
+  styleUrls: ['./edit-delete-modal.component.scss']
+})
+export class EditDeleteModalComponent implements OnInit {
+operationType ;
+comment; 
+  constructor(@Inject(MAT_DIALOG_DATA) public data,
+  private toaster : ToastrService,   
+  private commentApi : CommentApiService, 
+  private nuxeoService : NuxeoService,
+  public dialogRef: MatDialogRef<EditDeleteModalComponent>,
+  ) { 
+    this.operationType = this.data['type'];
+    this.comment = this.data['comment'];
+  }
+
+  ngOnInit(): void {
+  }
+
+  delete(){
+    this.commentApi.deleteComment(this.comment.parentId , this.comment.id).subscribe(res => {
+      if(res){
+        this.dialogRef.close(true);
+      }
+    })
+  }
+
+  cancel(){
+    this.dialogRef.close(false);
+  }
+
+  update(){
+    let updatedComment = this.comment.text.trim();
+    if(updatedComment.length > 0){
+      let data = {
+        "author": this.nuxeoService.nuxeoClient.user.id,
+        "text": this.comment.text,
+        "entity-type": "comment",
+        "parentId": this.comment.parentId,
+      };
+      this.commentApi.updateDocument(data , this.comment.parentId , this.comment.id).subscribe(res => {
+        if(res){
+          this.dialogRef.close(true);
+        }
+      })
+    }
+  }
+}

package/src/lib/components/comments/constants/comment.ts

@@ -0,0 +1,25 @@
+export class CommentConstants {
+  public static pageProvider = {
+    comments: {
+      name: 'PP_Comments', headers: {
+        'X-NXproperties': '*',
+        'X-NXenrichers-document': 'dc:contributors',
+        'X-NXRepository': 'default'
+      }
+    }
+
+  };
+  public static operations = {};
+  public static fields = {
+    ancestorIds: 'comment:ancestorIds',
+    author: 'comment:author',
+    creationDate: 'comment:creationDate',
+    modificationDate: 'comment:modificationDate',
+    parentId: 'comment:parentId',
+    text: 'comment:text',
+    contributors: 'dc:contributors',
+    created: 'dc:created',
+    creator: 'dc:creator',
+    description: 'dc:description'
+  };
+}