nuxeo-development-framework 4.1.4 → 4.1.6

package/src/lib/components/documents/components/attachments-list/attachments-list.component.ts

@@ -0,0 +1,164 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  Output,
+} from '@angular/core';
+import { FormArray, FormControl, FormGroup } from '@angular/forms';
+import { MatDialog } from '@angular/material/dialog';
+import { Router } from '@angular/router';
+import { Subject } from 'rxjs';
+import { take, takeUntil } from 'rxjs/operators';
+import { NuxeoService } from '../../../../core/services/nuxeo/nuxeo.service';
+import { ConfirmCallerDialogComponent } from '../../../confirm-caller/confirm-caller.dialog';
+import { CustomToastrService } from '../../../custom-toastr/services/custom-toastr.service';
+import { DocumentsConstants } from '../../constants/documents';
+import { DocumentsService } from '../../services/documents.service';
+
+/**
+ * A component that will list attachments batch with edit form for each item
+ * @title
+ * Batch attachments List
+ *
+ * @example
+ *
+ * <cts-attachments-list
+ *   [items]="files"
+ *   [disablePagination]="true"
+ *   [batchList]="true"
+ *   [canPreview]="false"
+ *   [item]="file"
+ *   (documentsCount)="getAttachmentsCount($event)"
+ *   (deleteSuccess)="onDeleteNewAttachment($event)"
+ * >
+ * </cts-attachments-list>
+ */
+@Component({
+  selector: 'cts-attachments-list',
+  templateUrl: './attachments-list.component.html',
+  styleUrls: ['./attachments-list.component.scss'],
+})
+export class AttachmentsListComponent implements OnInit, OnChanges, OnDestroy {
+  /** @deprecated */
+  @Input()
+  ancestorId;
+  /** @deprecated */
+  @Input()
+  provider;
+  /** Batch list */
+  @Input()
+  items = [];
+  @Input()
+  batchList = false;
+  @Input()
+  dontDelete = false;
+  @Input()
+  canDelete = true;
+  @Input()
+  item;
+  @Input()
+  keepFileExtension = false;
+  @Output()
+  deleteSuccess = new EventEmitter();
+  @Output()
+  documentsCount = new EventEmitter<number>();
+
+  onDestroy$: Subject<boolean> = new Subject<boolean>();
+  @Output()
+  documentSelect: EventEmitter<any> = new EventEmitter<any>();
+  public attachmentForm = new FormGroup({
+    attachmentCard: new FormArray([]),
+  });
+
+  constructor(private nuxeoApi: NuxeoService) {}
+
+  ngOnInit(): void {
+    this.attachmentForm.valueChanges.subscribe((res) => {
+      console.log('form value', this.attachmentForm.value.attachmentCard);
+    });
+  }
+  ngOnChanges(): void {
+    // (this.attachmentForm.controls['attachmentCard'] as FormArray).clear();
+    // this.fillForm(this.items);
+    if (this.item) {
+      this.transformItem(this.item);
+    }
+  }
+
+  isCreator(item) {
+    return !this.batchList
+      ? item.properties.creator.id === this.nuxeoApi.nuxeoClient.user.id
+      : true;
+  }
+  deleteDocument(event, item) {
+    event.stopPropagation();
+    this.deleteSuccess.next(item);
+  }
+
+  fillForm(items: any[]) {
+    items.forEach((item) => {
+      let fileFormGroup = new FormGroup({
+        item: new FormControl(item),
+        attachmentId: new FormControl('abc123'),
+        barcode: new FormControl('123454332'),
+        classification: new FormControl(null),
+        category: new FormControl(null),
+        type: new FormControl('PDF'),
+        title: new FormControl(item.title.split('.').slice(0, -1).join('.')),
+        remarks: new FormControl(null),
+        // isObject: new FormControl(false),
+        extension: new FormControl(item.title.split('.').pop()),
+        content: new FormControl({
+          'upload-batch': item.blob['upload-batch'],
+          'upload-fileId': item.blob['upload-fileId'],
+          'mime-type': 'application/pdf',
+        }),
+      });
+      this.addAttachmentCard(fileFormGroup);
+    });
+  }
+
+  transformItem(item) {
+    let fileFormGroup = new FormGroup({
+      item: new FormControl(item),
+      attachmentId: new FormControl('abc123'),
+      barcode: new FormControl('123454332'),
+      classification: new FormControl(null),
+      category: new FormControl(null),
+      type: new FormControl('PDF'),
+      title: new FormControl(this.keepFileExtension ? item.title : item.title.split('.').slice(0, -1).join('.')),
+      remarks: new FormControl(null),
+      // isObject: new FormControl(false),
+      extension: new FormControl(item.title.split('.').pop()),
+      content: new FormControl({
+        'upload-batch': item.blob['upload-batch'],
+        'upload-fileId': item.blob['upload-fileId'],
+        'mime-type': 'application/pdf',
+      }),
+    });
+    this.addAttachmentCard(fileFormGroup);
+  }
+  addAttachmentCard(formGroup: FormGroup) {
+    const arrayControl = <FormArray>(
+      this.attachmentForm.controls['attachmentCard']
+    );
+    arrayControl.push(formGroup);
+  }
+  delInput(index: number): void {
+    const arrayControl = <FormArray>(
+      this.attachmentForm.controls['attachmentCard']
+    );
+    arrayControl.removeAt(index);
+  }
+  ngOnDestroy(): void {
+    this.onDestroy$.next(true);
+    this.onDestroy$.complete();
+  }
+
+  getControls() {
+    return (this.attachmentForm.get('attachmentCard') as FormArray).controls;
+  }
+}

package/src/lib/components/documents/components/attachments-page-provider/attachments-page-provider.component.html

@@ -0,0 +1,36 @@
+<div *ngIf="attachments.length !== 0" class="doc-list">
+  <div *ngFor="let Attachment of attachments" class="doc-item">
+    <div class="file-icon">
+      <mat-icon>file_copy</mat-icon>
+    </div>
+    <div class="attachment-container row no-gutters">
+      <div class="attachment-wrapper col-10 col-xl-6">
+        <div>
+          {{ Attachment.title }}
+        </div>
+        <div>
+          {{ Attachment.properties.remarks }}
+        </div>
+      </div>
+      <div class="attachment-wrapper col-10 col-xl-4">
+        <div>
+          {{ Attachment.properties.classification ?('vocabulary.VOC_CorrespondenceAttachClassification.'+ Attachment.properties.classification.id |translate) : '--'}}
+        </div>
+        <div>
+          {{ Attachment.properties.category ?('vocabulary.VOC_CorrespondenceAttachmentType.'+ Attachment.properties.category.id |translate) : '--'}}
+        </div>
+      </div>
+      <!-- <div class="attachment-wrapper isObject col-10 col-xl-2">
+        {{ Attachment.properties.isObject }}
+      </div> -->
+    </div>
+    <div>
+      <button
+        (click)="deleteDocument($event, Attachment)"
+        class="btn btn-outline-danger btn-no-border"
+      >
+        <mat-icon>delete</mat-icon>
+      </button>
+    </div>
+  </div>
+</div>

package/src/lib/components/documents/components/attachments-page-provider/attachments-page-provider.component.scss

@@ -0,0 +1,44 @@
+@import "../../../../assets/scss/myApp.scss";
+.doc-item {
+  display: flex;
+  flex: 1;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  justify-content: space-between;
+  cursor: pointer;
+  border: 1px solid;
+  border-color: $gray-100;
+  &:last-child {
+    // border-width: 0px;
+  }
+  .file-icon {
+    margin: 4px;
+    color: $gray-500;
+    display: flex;
+    align-items: center;
+  }
+}
+.attachment-container {
+  width: 100%;
+  row-gap: 6px;
+
+  .attachment-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    column-gap: 10px;
+    padding-inline-end: 5px;
+    padding-inline-start: 5px;
+    & > * {
+      width: 100%;
+    }
+  }
+  .isObject {
+    display: flex;
+    justify-content: center !important;
+  }
+}
+.btn-wrapper {
+  display: flex;
+  justify-content: flex-end;
+}

package/src/lib/components/documents/components/attachments-page-provider/attachments-page-provider.component.spec.ts

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

package/src/lib/components/documents/components/attachments-page-provider/attachments-page-provider.component.ts

@@ -0,0 +1,77 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  ViewEncapsulation,
+} from '@angular/core';
+import { DocumentsService } from '../../services/documents.service';
+
+/**
+ * A component that will list specific correspondence attachments with edit form for each item
+ * @title
+ * Attachments List
+ *
+ * @example
+ *
+ * <cts-attachments-page-provider
+ *   [provider]="'providerName'"
+ *   [ancestorId]="ancestorId"
+ *   (deleteSuccess)="onDeleteAttachment($event)"
+ * >
+ * </cts-attachments-page-provider>
+ */
+@Component({
+  selector: 'cts-attachments-page-provider',
+  templateUrl: './attachments-page-provider.component.html',
+  styleUrls: ['./attachments-page-provider.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class AttachmentsPageProviderComponent implements OnInit {
+  /** Provider name */
+  @Input()
+  provider;
+  /** Ancestor ID */
+  @Input()
+  ancestorId;
+  @Input()
+  params = {};
+  /** Emitted on attachment delete */
+  @Output()
+  deleteSuccess = new EventEmitter();
+  /** Emits total documents count when they're loaded  */
+  @Output()
+  documentsCount = new EventEmitter<number>();
+  isFetching: boolean;
+  attachments = [];
+  totalRecords: number;
+  constructor(private documentsApi: DocumentsService) { }
+
+  ngOnInit(): void {
+    this.getAttachments();
+  }
+
+  getAttachments() {
+    if (this.provider) {
+      this.isFetching = true;
+      this.documentsApi
+        .getDocuments(this.ancestorId, this.provider, {
+          ...this.params
+        })
+        .subscribe((data) => {
+          this.totalRecords = data.totalSize;
+          this.attachments = data.entries;
+          this.documentsCount.emit(this.totalRecords);
+          this.isFetching = false;
+        });
+    }
+  }
+  deleteDocument(event, attachment) {
+    event.stopPropagation();
+    this.attachments = this.attachments.filter((item) => {
+      return attachment.uid != item.uid;
+    });
+    this.deleteSuccess.emit(attachment.uid);
+  }
+}

package/src/lib/components/documents/components/document-list/documents-list.component.html

@@ -0,0 +1,34 @@
+<ng-container *ngIf="!isFetching; else spinner">
+  <div *ngIf="items.length; else noEntry">
+    <div class="doc-list">
+      <div class="doc-item" (click)="preview(item.uid)" *ngFor="
+          let item of items
+          ;
+          let last = last
+        ">
+        <div class="item-content">
+          <mat-icon class="file-icon">file_copy</mat-icon>
+          {{ item.title }}
+        </div>
+        <button *ngIf="canDelete && isCreator(item)" (click)="deleteDocument($event, item)"
+          class="btn btn-outline-danger btn-no-border">
+          <mat-icon>delete</mat-icon>
+        </button>
+      </div>
+    </div>
+    <div  [ngClass]="{ 'hidden': disablePagination }" class="wrapping-pagination my-3">
+      <cts-pagination [page]="p" (change)="onChange($event)"
+      [size]="count" [count]="totalRecords">
+      </cts-pagination>
+    </div>
+  </div>
+  <ng-template #noEntry>
+    <!-- <app-no-entry [msg]="'documents.noEntry'"></app-no-entry> -->
+    <!-- <cts-no-data
+      [message]="'documents.noEntry'"
+ ></cts-no-data> -->
+  </ng-template>
+</ng-container>
+<ng-template #spinner>
+  <mat-spinner class="centered-spinner"></mat-spinner>
+</ng-template>

package/src/lib/components/documents/components/document-list/documents-list.component.scss

@@ -0,0 +1,41 @@
+@import "../../../../assets/scss/myApp.scss";
+.doc-list {
+  flex: 1;
+  justify-content: space-between;
+  cursor: pointer;
+  margin-bottom: 14px;
+  border: 2px solid $gray-100;
+  margin-top: 2px;
+  border-radius: 5px;
+}
+
+.wrapping-pagination{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.doc-item {
+  display: flex;
+  flex: 1;
+  justify-content: space-between;
+  cursor: pointer;
+  padding: 8px;
+  border-bottom: 1px solid;
+  border-color: $gray-100;
+  &:last-child {
+    border-width: 0px;
+  }
+  .item-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .file-icon {
+    margin: 8px;
+    color: $gray-500;
+  }
+}
+.pagination {
+  justify-self: center;
+}

package/src/lib/components/documents/components/document-list/documents-list.component.ts

@@ -0,0 +1,245 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  Output,
+} from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { Router } from '@angular/router';
+import { Subject } from 'rxjs';
+import { delay, take, takeUntil } from 'rxjs/operators';
+import { NuxeoService } from '../../../../core/services/nuxeo/nuxeo.service';
+import { ConfirmCallerDialogComponent } from '../../../confirm-caller/confirm-caller.dialog';
+import { CustomToastrService } from '../../../custom-toastr/services/custom-toastr.service';
+import { DocumentsConstants } from '../../constants/documents';
+import { DocumentsService } from '../../services/documents.service';
+
+/**
+ * A reusable component to list attachments,
+ * attachments can be provided as input, or can be queried using providerName and/or ancestorId
+ * @title
+ * Documents list
+ *
+ * @example
+ *
+ * <app-documents-list
+ *   [items]="ArrayOfDocumentsOrBatch"
+ *   [disablePagination]="false"
+ *   [batchList]="true"
+ *   [canPreview]="false"
+ *   (deleteSuccess)="onDelete($event)"
+ * ></app-documents-list>
+ */
+@Component({
+  selector: 'app-documents-list',
+  templateUrl: './documents-list.component.html',
+  styleUrls: ['./documents-list.component.scss'],
+})
+export class DocumentsListComponent implements OnInit, OnChanges, OnDestroy {
+  /** Ancestor ID */
+  @Input()
+  ancestorId;
+  /** Attachments provider name */
+  @Input()
+  provider;
+  @Input()
+  /** Should disable Pagination */
+  disablePagination = false;
+  /** @deprecated not used */
+  @Input()
+  containerClasses: string;
+  /** @deprecated not used */
+  @Input()
+  itemsClasses: string;
+  /** documents or batch items array */
+  @Input()
+  items = [];
+  /** Event emitter if provided and emitted will cause the list to refresh the list */
+  @Input()
+  notifier = null;
+  /** Can open in viewer */
+  @Input()
+  canPreview = true;
+  /** Wether items input is documents or batchList */
+  @Input()
+  batchList = false;
+  /** Wether to delete actual document on Delete button click or to just emit delete event */
+  @Input()
+  dontDelete = false;
+  /** wether to show or hide delete action */
+  @Input()
+  canDelete = true;
+  /** Provider quick filters */
+  @Input()
+  quickFilters;
+  /** added to diffrentiate between memo view and correspondance view */
+  @Input() memoView = false;
+  /** Emitted on delete action */
+  @Output()
+  deleteSuccess = new EventEmitter();
+  /** Emitted on delete action */
+  @Output()
+  /** Emitted on documents load with count information */
+  documentsCount = new EventEmitter<number>();
+  p = 1;
+  count = 5;
+  totalRecords;
+  isNextPageAvailable = true;
+  isFetching = false;
+  onDestroy$: Subject<boolean> = new Subject<boolean>();
+  /** Emitted when a document is selected  */
+  @Output()
+  documentSelect: EventEmitter<any> = new EventEmitter<any>();
+
+  constructor(
+    private documentsApi: DocumentsService,
+    private nuxeoApi: NuxeoService,
+    private toastr: CustomToastrService,
+    private dialog: MatDialog,
+    private router: Router
+  ) { }
+
+  getDocuments() {
+    if (this.provider) {
+      this.isFetching = true;
+      this.documentsApi
+        .getDocuments(this.ancestorId, this.provider, {
+          currentPageIndex: this.p - 1,
+          pageSize: this.count,
+          quickFilters: DocumentsConstants.quickFilters[this.quickFilters],
+        })
+        .subscribe((data) => {
+          this.totalRecords = data.totalSize;
+          this.isNextPageAvailable = data.isNextPageAvailable;
+          this.items = data.entries;
+          this.documentsCount.emit(this.totalRecords);
+          this.isFetching = false;
+        });
+    }
+  }
+  isCreator(item) {
+    return !this.batchList
+      ? item.properties.creator === this.nuxeoApi.nuxeoClient.user.id
+      : true;
+  }
+  deleteDocument(event, item) {
+    let deleteDocument = () => {
+      return this.documentsApi.deleteDocument(item.path);
+    };
+    event.stopPropagation();
+    if (this.canDelete) {
+      if (!this.batchList) {
+        this.dialog
+          .open(ConfirmCallerDialogComponent, {
+            width: '400px',
+            panelClass:'relation-confirm-dialog',
+            data: {
+              call: deleteDocument,
+              title: 'genericConfirm',
+              toastrTitle: '',
+              toastrMsg: 'documents.deleteSuccess',
+            },
+          })
+          .afterClosed()
+          .pipe(take(1))
+          .subscribe((data) => {
+            if (data) {
+              if (!this.dontDelete) {
+                this.deleteSuccess.next(item);
+                this.items.length == 1 ? (this.p = this.p - 1) : this.p;
+                if (this.p === 0) {
+                  this.p = 1;
+                }
+                this.getDocuments();
+              } else {
+                this.deleteSuccess.next(item);
+                this.items.splice(this.items.indexOf(item), 1);
+              }
+            }
+          });
+      } else {
+        this.deleteSuccess.next(item);
+      }
+    }
+
+    // this.confirmationDialog
+    //   .openConfirmDialog('genericConfirm')
+    //   .afterClosed()
+    //   .subscribe((data) => {
+    //     if (data) {
+    //       if (!this.dontDelete) {
+    //         this.documentsApi
+    //           .deleteDocument(item.path)
+    //           .subscribe((data) => {
+    //             this.toastr
+    //               .success('documents.deleteSuccess', 'success')
+    //               .onShown.pipe(take(1))
+    //               .subscribe(() => {
+    //                 this.deleteSuccess.next(item);
+    //                 this.getDocuments();
+    //               });
+    //           });
+    //       } else {
+    //         this.deleteSuccess.next(item);
+    //         this.items.splice(this.items.indexOf(item), 1);
+    //       }
+    //     }
+    //   });
+  }
+  onChange(event) {
+    this.p = event;
+    this.getDocuments();
+  }
+
+  preview(docId) {
+    if (this.canPreview) {
+      if (this.memoView) {
+        this.router.navigate([{ outlets: { viewer: ['memo', docId] } }], {
+          queryParams: { location: this.router.url },
+        });
+      } else {
+        this.router.navigate([{ outlets: { viewer: ['view', docId] } }], {
+          queryParams: { location: this.router.url },
+        });
+      }
+    } else {
+      this.documentsApi.getDocument(docId).subscribe(
+        (file) => {
+          this.documentSelect.emit(file);
+        },
+        (error) => {
+          console.error(error);
+          this.toastr
+            .show('error', 'error',
+              error.ret.message ?
+                `errors.${error.ret.code}`
+                : 'genericError')
+            .onShown.subscribe(() => { });
+        }
+      );
+    }
+  }
+  ngOnInit(): void {
+    this.getDocuments();
+    if (this.notifier) {
+      this.notifier.pipe(takeUntil(this.onDestroy$)).subscribe(() => {
+        this.getDocuments();
+      });
+    }
+    this.documentsApi.reFetch.subscribe((value) => {
+      if (value) {
+        this.getDocuments();
+      }
+    });
+  }
+  ngOnChanges(): void {
+    this.getDocuments();
+  }
+  ngOnDestroy(): void {
+    this.onDestroy$.next(true);
+    this.onDestroy$.complete();
+  }
+}