nuxeo-development-framework 3.0.9 → 3.1.2

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

@@ -0,0 +1,236 @@
+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() {}
+  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,149 @@
+<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 class="flex flex-row mt-5">
+        <span class="text-gray-900 text-base font-bold">
+          {{ "permission.timeframe" | translate }}
+          <span class="text-danger">*</span>:</span>
+        <div class="mx-2">
+          <label class="inline-flex items-center">
+            <input type="radio" class="form-radio" name="radio" value="Permanent" [checked]="timeFrame == 'Permanent'"
+              (click)="timeFrame = 'Permanent'" />
+            <span class="mx-2 mt-1 text-gray-900 text-sm font-bold">{{
+              "permission.permanent" | translate
+              }}</span>
+          </label>
+        </div>
+        <div rtl>
+          <label class="inline-flex items-center">
+            <input type="radio" class="form-radio" name="radio" value="Date-Based" [checked]="timeFrame == 'Date-Based'"
+              (click)="timeFrame = 'Date-Based'" />
+            <span class="mx-2 mt-1 text-gray-900 text-sm font-bold">{{
+              "permission.Date_based" | translate
+              }}</span>
+          </label>
+        </div>
+      </div>
+      <div class="flex flex-col mt-2">
+        <label class="text-base font-bold text-gray-900 mb-0">{{ "permission.from" | translate }}</label>
+        <cts-dynamic-form-hijri-dateitem 
+          formControlName="begin" 
+          [isDisabled]="timeFrame == 'Permanent'"
+          [(ngModel)]="editableBegin">
+        </cts-dynamic-form-hijri-dateitem>
+        <label class="text-base font-bold text-gray-900 mb-0">{{ "permission.to" | translate }}</label>
+        <cts-dynamic-form-hijri-dateitem 
+          formControlName="end" 
+          [isDisabled]="timeFrame == 'Permanent'"
+          [(ngModel)]="editableEnd">
+        </cts-dynamic-form-hijri-dateitem>
+        <div *ngIf="permissionForm?.errors?.notValid">
+          <span class="text-red-500 text-base -mt-3 ">{{
+            "permission.endStartError" | translate
+            }}</span>
+        </div>
+      </div>-->
+    </div>
+
+    <div class="flex flex-row justify-between mt-5 flex-wrap">
+      <div>
+        <button
+          class="cancelation-button mb-3"
+          (click)="cancel(false)">
+          {{ "BUTTONS.Cancel" | translate }}
+        </button>
+      </div>
+      <div class="d-flex">
+        <button *ngIf="state != 'update'"
+          [disabled]="createAndAdd"
+          class="submission-button"
+          (click)="create(permissionForm.value)">
+          <span *ngIf="!creating;else loader">{{ "permission.create" | translate }}</span>
+        </button>
+        <button
+        class="submission-button"
+        (click)="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)="
+                      createandAddAnother(permissionForm, permissionForm.value)
+                  ">
+          <span *ngIf="!createAndAdd;else loader">{{ "permission.createAndAdd" | translate }}</span>
+        </button>
+      </div>
+
+
+    </div>
+  </div>
+</form>
+
+<ng-template #loader>
+  <mat-spinner [value]="90" [strokeWidth]="3" overlay="true" [diameter]="25" color="warn">
+  </mat-spinner>
+</ng-template>

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();
+  });
+});