nuxeo-development-framework 4.1.4 → 4.1.6

package/src/lib/components/pdf-tron/pdftron/pdftron.service.ts

@@ -0,0 +1,239 @@
+import { EventEmitter, Injectable } from "@angular/core";
+import { observable, Observable } from "rxjs";
+
+@Injectable({
+  providedIn: "root",
+})
+export class PdftronService {
+  mode: String = "";
+  instance;
+  stampAnnots: any[] = [];
+  signatureAnnotations: any[] = [];
+  pdfTronStream = new EventEmitter();
+  onImageExtraction = new EventEmitter();
+  constructor() {}
+
+  // we let update open so user can delete it or move it until saving when saving we close editing on it 
+  // to prevent user from deleting it after saving and opening anotation again
+  async disableQrCodeModifybeforesave() {
+    for (let stampAnnot of this.stampAnnots) {
+      stampAnnot.ReadOnly = true;
+    }
+  }
+
+  clearSignatureAnnotations() {
+    this.signatureAnnotations = [];
+  }
+  async removeSignatureAnnotaionsbeforesave() {
+    this.instance.annotManager.off("annotationChanged");
+    this.instance.annotManager.deleteAnnotation(this.signatureAnnotations);
+  }
+
+  getSignatureAnnotaionsInfo() {
+    let signatureInfo = this.signatureAnnotations.map((item) => {
+      let PageHeight = this.instance.docViewer.getPageHeight(item.PageNumber);
+      let PageWidth = this.instance.docViewer.getPageWidth(item.PageNumber);
+      let yConst = this.modifySignatureAnnotaionHeightAndWidth(
+        PageHeight,
+        PageWidth
+      ).y;
+      // let xConst = this.modifySignatureAnnotaionHeightAndWidth(
+      //   PageHeight,
+      //   PageWidth
+      // ).x;
+      return {
+        pageno: item.PageNumber,
+        //x: item.X + xConst,
+        x: item.X,
+        y: item.Y + yConst,
+        height: item.getHeight(),
+        width: item.getWidth(),
+      };
+    });
+    return signatureInfo;
+  }
+  modifySignatureAnnotaionHeightAndWidth(PageHeight, PageWidth) {
+    const standardHeight = 842;
+    const standardWidth = 595;
+    let y: number = 0;
+    let x: number = 0;
+    //height
+    if (standardHeight > PageHeight || standardHeight < PageHeight) {
+      y = standardHeight - PageHeight;
+    }
+    // widht
+    if (standardWidth > PageWidth || standardWidth < PageWidth) {
+      x = standardWidth - PageWidth;
+    }
+    return { y, x };
+  }
+  addSignature(base64) {
+    if (this.instance) {
+      let currentPage = this.instance.docViewer.getCurrentPage();
+
+      this.instance.annotManager.setReadOnly(false);
+      this.instance.disableElements([
+        "toolbarGroup-Shapes",
+        "toolbarGroup-Edit",
+        "toolbarGroup-Insert",
+        "toolbarGroup-Annotate",
+      ]);
+      const signatureAnnot = new this.instance.Annotations.StampAnnotation();
+      signatureAnnot.PageNumber = currentPage;
+      signatureAnnot.X = 100;
+      signatureAnnot.Y = 250;
+      signatureAnnot.Width = 140;
+      signatureAnnot.Height = 60;
+      const keepAsSVG = false;
+      signatureAnnot.setImageData(base64, keepAsSVG);
+      signatureAnnot.Author = this.instance.annotManager.getCurrentUser();
+
+      this.instance.annotManager.addAnnotation(signatureAnnot);
+      this.instance.annotManager.redrawAnnotation(signatureAnnot);
+      this.pdfTronStream.next({ action: "addStamp", params: { base64 } });
+
+      this.signatureAnnotations.push(signatureAnnot);
+      this.instance.annotManager.on(
+        "annotationChanged",
+        (annotations, action) => {
+          if (action === "modify") {
+            annotations.forEach((changedannot) => {
+              // this.signatureAnnotations.forEach(function(item,i) {
+              //   if (item.Id == changedannot.Id) item = changedannot;
+              // });
+              let index = this.signatureAnnotations
+                .map((item) => item.Id)
+                .indexOf(changedannot.Id);
+              if (index > -1) {
+                this.signatureAnnotations[index] = changedannot;
+              }
+            });
+          } else if (action === "delete") {
+            annotations.forEach((changedannot) => {
+              let index = this.signatureAnnotations
+                .map((item) => item.Id)
+                .indexOf(changedannot.Id);
+              if (index > -1) {
+                this.signatureAnnotations.splice(index, 1);
+              }
+            });
+          }
+        }
+      );
+    } else {
+      console.error("No pdfTron instance");
+    }
+  }
+  addStamp(url) {
+    if (this.instance) {
+      this.instance.annotManager.setReadOnly(false);
+      this.instance.disableElements([
+        "toolbarGroup-Shapes",
+        "toolbarGroup-Edit",
+        "toolbarGroup-Insert",
+        "toolbarGroup-Annotate",
+      ]);
+      this.pdfTronStream.next({ action: "addStamp", params: { url } });
+      let stampAnnot = new this.instance.Annotations.StampAnnotation();
+      let rotation = this.instance.docViewer.getCompleteRotation(this.instance.docViewer.getCurrentPage());
+      stampAnnot.PageNumber = 1;
+      stampAnnot.X = 0;
+      stampAnnot.Y = 0;
+      stampAnnot.Width = 150;
+      stampAnnot.Height = 78;
+      const keepAsSVG = false;
+      if (rotation == 1) {
+        stampAnnot.Rotation = 90;
+        stampAnnot.Width = 78;
+        stampAnnot.Height = 150;
+      }
+      stampAnnot.ReadOnly = false;
+      stampAnnot.setImageData(url, keepAsSVG);
+      stampAnnot.Author = this.instance.annotManager.getCurrentUser();
+      this.instance.annotManager.addAnnotation(stampAnnot);
+      this.instance.annotManager.redrawAnnotation(stampAnnot);
+      this.stampAnnots.push(stampAnnot);
+    } else {
+      console.error("No pdfTron instance");
+    }
+  }
+  addWatermark(text) {
+    text = new Array(100 * 2).join(text + " "); // number of lines
+    if (this.instance) {
+      this.instance.docViewer.setWatermark({
+        custom: (ctx, pageNumber, pageWidth, pageHeight) => {
+          // ctx is an instance of CanvasRenderingContext2D
+          ctx.fillStyle = "#d9dce2";
+          ctx.font = "16pt Arial";
+          ctx.globalAlpha = 0.3;
+          let txtHeight = 50;
+          const lineNumber = pageWidth > pageHeight ? pageWidth : pageHeight;
+          for (var i = 0; i < Math.ceil((lineNumber * 1.5) / txtHeight); i++) {
+            ctx.save();
+            ctx.rotate(-45);
+            ctx.fillText(text, 0, i * txtHeight);
+            ctx.restore();
+          }
+        },
+      });
+    } else {
+      console.error("No pdfTron instance");
+    }
+  }
+
+  removeWatermark() {
+    this.instance.docViewer.setWatermark({});
+    this.instance.docViewer.refreshAll();
+    this.instance.docViewer.updateView();
+  }
+
+  extractAnotation(annotation){ 
+    if(annotation['image']){
+      // convert base64 signature into file and emit it to out side 
+      let base64Img = annotation['image']['currentSrc'];
+      // var arr = base64Img.split(','),
+      // mime = arr[0].match(/:(.*?);/)[1],
+      // bstr = atob(arr[1]), 
+      // n = bstr.length, 
+      // u8arr = new Uint8Array(n);
+      // while(n--){
+      //     u8arr[n] = bstr.charCodeAt(n);
+      // }
+      // let name = mime.replace('/' , '.')
+      // let myFile = new File([u8arr], 'mySignature.png', {type:mime});
+      this.onImageExtraction.emit(base64Img);
+      // return {type:'base64' , file : base64Img}
+    }else{
+      this.extractAnnotationSignature(annotation , this.instance.docViewer)
+    }
+  }
+
+  async extractAnnotationSignature(annotation, docViewer) {
+    // Create a new Canvas to draw the Annotation on
+    const canvas = document.createElement('canvas');
+    // Reference the annotation from the Document
+    const pageMatrix = docViewer.getDocument().getPageMatrix(annotation.PageNumber);
+    // Set the height & width of the canvas to match the annotation
+    canvas.height = annotation.Height;
+    canvas.width = annotation.Width;
+    const ctx = canvas.getContext('2d');
+    // Translate the Annotation to the top Top Left Corner of the Canvas ie (0, 0)
+    ctx.translate(-annotation.X, -annotation.Y);
+    // Draw the Annotation onto the Canvas
+    annotation.draw(ctx, pageMatrix);
+    // Convert the Canvas to a Blob Object for Upload
+    canvas.toBlob((blob) => {
+      // Call your Blob Storage Upload Function
+      // let name = blob.type.replace('/' , '.')
+      // let myFile = new File([blob], name);
+      var reader = new FileReader();
+      reader.readAsDataURL(blob); 
+      reader.onloadend = () => {
+        var base64data = reader.result;                
+        console.log(base64data);
+        this.onImageExtraction.emit(base64data); 
+      }
+      // return {type: 'blob' , file : blob}
+    });
+  }
+}

package/src/lib/components/permissions/add-permissions-dialog/add-permissions-dialog.component.html

@@ -0,0 +1,114 @@
+<ndf-nuxeo-dialog dialogTitle="{{ 'CREATE.createFile' | translate }}">
+	<ng-template #contentTemplate>
+		<form [formGroup]="permissionForm" class="h-full" SetRtl>
+			<div class="flex flex-col h-full">
+				<div class="add-permsion-wrapper">
+					<span class="text-gray-900 text-lg" *ngIf="state == 'update'">
+						{{ 'permission.edit_permission' | translate }}
+					</span>
+					<span class="text-gray-900 text-lg" *ngIf="state !== 'update'">
+						{{ 'permission.add_new_permission' | translate }}
+					</span>
+
+					<div class="user-select mt-5" *ngIf="state != 'update'">
+						<label class="text-base font-bold mb-0">
+							{{ 'permission.username' | translate }}
+							<span class="text-danger">*</span>
+						</label>
+						<ng-select
+							[items]="permissionService.departmentUsers"
+							[placeholder]="'permission.placeholder' | translate"
+							[multiple]="true"
+							[loading]="refreshUsers"
+							bindLabel="displayLabel"
+							bindValue="properties.username"
+							formControlName="users"
+						>
+							<ng-template ng-notfound-tmp let-searchTerm="searchTerm">
+								<div class="ng-option disabled">
+									{{ 'permission.ngSelect_resultNotFound' | translate }}
+								</div>
+							</ng-template>
+							<ng-template ng-option-tmp let-item="item" let-index="index">
+								<div class="flex flex-col h-full">
+									<div class="flex flex-row">
+										<div class="flex-0 w-8 h-8 rounded-full overflow-hidden">
+											<cts-avatar
+												[user]="{
+													properties: {
+														firstName: item.properties.firstName,
+														lastName: item.properties.lastName
+													}
+												}"
+											>
+											</cts-avatar>
+										</div>
+										<div class="flex flex-col pt-0 px-2">
+											<span>{{ item.displayLabel }}</span>
+											<span
+												>{{ item.properties.email }}-{{
+													item.properties.username
+												}}</span
+											>
+										</div>
+									</div>
+								</div>
+							</ng-template>
+						</ng-select>
+					</div>
+					<div class="mt-3 rights-select">
+						<label class="text-base font-bold mb-0">
+							{{ 'permission.Rights' | translate }}
+							<span class="text-danger">*</span>
+						</label>
+						<ng-select
+							[items]="rights"
+							[placeholder]="'permission.rightsPlaceholder' | translate"
+							bindLabel="label"
+							bindValue="value"
+							formControlName="permission"
+							[(ngModel)]="editableRight"
+						>
+						</ng-select>
+					</div>
+				</div>
+			</div>
+		</form>
+	</ng-template>
+
+	<ng-template #actionsTemplate let-dialog="dialog">
+		<button
+			*ngIf="state != 'update'"
+			[disabled]="createAndAdd"
+			class="submission-button"
+			(click)="dialog.executeAction(create, [permissionForm.value])"
+		>
+			<span *ngIf="!creating; else loader">{{
+				'permission.create' | translate
+			}}</span>
+		</button>
+		<button
+			class="submission-button"
+			(click)="dialog.executeAction(edit, [permissionForm.value])"
+			*ngIf="state == 'update'"
+		>
+			<span *ngIf="!updating; else loader">{{
+				'permission.update' | translate
+			}}</span>
+		</button>
+		<button
+			*ngIf="state != 'update'"
+			class="submission-button w-44"
+			(click)="
+				dialog.executeAction(createandAddAnother, [
+					permissionForm,
+					permissionForm.value
+				])
+			"
+		>
+			<span *ngIf="!createAndAdd; else loader">{{
+				'permission.createAndAdd' | translate
+			}}</span>
+		</button>
+	</ng-template>
+</ndf-nuxeo-dialog>

package/src/lib/components/permissions/add-permissions-dialog/add-permissions-dialog.component.scss

@@ -0,0 +1,159 @@
+.form-radio {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    -webkit-print-color-adjust: exact;
+    color-adjust: exact;
+    display: inline-block;
+    vertical-align: middle;
+    background-origin: border-box;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    flex-shrink: 0;
+    border-radius: 100%;
+    height: 1em;
+    width: 1em;
+    color: #4299e1;
+    background-color: #fff;
+    border-color: #e2e8f0;
+    border-width: 1px;
+}
+
+.form-radio:checked {
+    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+    border-color: transparent;
+    background-color: currentColor;
+    background-size: 100% 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+@media not print {
+    .form-radio::-ms-check {
+        border-width: 1px;
+        color: transparent;
+        background: inherit;
+        border-color: inherit;
+        border-radius: inherit;
+    }
+}
+
+.form-radio:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
+    border-color: #63b3ed;
+}
+
+/*# sourceMappingURL=custom-forms.css.map */
+
+/////////-------------------------------------
+.select-label {
+    color: #8f98aa;
+    font-size: 12px;
+    margin-bottom: 0px;
+}
+.user-select,.rights-select {
+    .ng-select-container {
+        border: 1px solid #ccc !important;
+        border-radius: 5px !important;
+        background-color: rgba(143, 152, 170, 0.1) !important;
+        // height: 40px !important;
+        .ng-value-container {
+            padding: unset !important;
+            .ng-placeholder {
+                font-size: 12px;
+            }
+            .ng-value {
+                color: #495057;
+            }
+        }
+        .ng-arrow-wrapper {
+            padding: 0px 20px;
+        }
+        .ng-input {
+            left: 10px;
+            right: 10px;
+            width: auto;
+            input {
+            }
+        }
+    }
+}
+.user-select {
+    .ng-select-container {
+        .ng-value-container {
+            .ng-placeholder {
+                padding-top: 4px !important;
+            }
+        }
+    }
+}
+.ng-select-disabled {
+    .ng-select-container {
+        background-color: #e9ecef !important;
+    }
+}
+.ng-dropdown-panel {
+    .ng-dropdown-panel-items {
+        .ng-option {
+            .option-wrapper {
+                .check-box-wrapper {
+                    position: relative;
+                    input {
+                        visibility: hidden;
+                        width: 20px;
+                        height: 20px;
+                    }
+                    .icon-wrapper {
+                        position: absolute;
+                        top: 0px;
+                        left: 0px;
+                        width: 20px;
+                        height: 20px;
+                        border: 1px solid blue;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        .icon {
+                            color: blue;
+                            display: none;
+                            justify-content: center;
+                            align-items: center;
+                            font-weight: bold;
+                        }
+                    }
+                }
+                .label-wrapper {
+                }
+            }
+        }
+        .ng-option-selected {
+            .option-wrapper {
+                .check-box-wrapper {
+                    .icon-wrapper {
+                        .icon {
+                            display: flex;
+                        }
+                    }
+                }
+                .label-wrapper {
+                    color: blue;
+                }
+            }
+        }
+    }
+}
+
+.ng-select {
+    .ng-select-focused:not(.ng-select-opened) .ng-select-container {
+        border-color: #ccc;
+        box-shadow: none;
+    }
+}
+
+.add-permsion-wrapper {
+    height: calc(100% - 50px);
+    overflow: auto;
+}

package/src/lib/components/permissions/add-permissions-dialog/add-permissions-dialog.component.spec.ts

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