Skip to content
Snippets Groups Projects
document.component.html 9.69 KiB
Newer Older
  • Learn to ignore specific revisions
  • Alex ORLUC's avatar
    Alex ORLUC committed
    <mat-sidenav-container autosize>
    
    
      <mat-sidenav #snav mode="over" fixedInViewport="true" [disableClose]="freezeSidenavClose" [style.width.px]="350">
    
        <app-sidebar [snavLeftComponent]="this.snav" [snavRightComponent]="this.snavRight" ></app-sidebar>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
      </mat-sidenav>
      <mat-sidenav-content>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
        <!--<div class="swipe-panel-area" (swiperight)="this.snav.open();"></div>-->
    
    Alex ORLUC's avatar
    Alex ORLUC committed
        <header style="position: fixed;" class="header" *ngIf="!this.signaturesService.annotationMode && !freezeSidenavClose && !loadingPage" [@slideDown]>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
          <article class="header-infos">
            <section class="header-left">
              <button mat-icon-button (click)="this.snav.toggle();">
                <mat-icon fontSet="far" fontIcon="fa-folder-open"></mat-icon>
              </button>
            </section>
            <div class="header-info">
    
    Alex ORLUC's avatar
    Alex ORLUC committed
              <p class="c-active-color bold">Référence : </p>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
              <p class="ellipsis">{{mainDocument.reference}}</p>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
              <p class="c-active-color bold">Sujet : </p>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
              <p class="ellipsis">{{mainDocument.subject}}</p>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
            </div>
            <div class="header-info">
              <p class="c-active-color bold">Emis par : </p>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
              <p class="ellipsis">{{mainDocument.sender}} ({{mainDocument.sender_entity}})</p>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
              <p class="c-active-color bold">Pour : </p>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
              <p class="ellipsis">{{mainDocument.recipient}}</p>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
            </div>
            <div class="header-info">
    
    Alex ORLUC's avatar
    Alex ORLUC committed
              <p class="c-active-color bold">Date limite de traitement : </p>
              <p class="ellipsis">{{mainDocument.limit_date}} (<b>{{mainDocument.priority}}</b>)</p>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
              <p class="c-active-color bold">À signer par : </p>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
              <p class="ellipsis">{{mainDocument.processingUserDisplay}}</p>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
            </div>
            <section class="header-right">
    
              <button [disabled]="this.signaturesService.signaturesContent.length == 0 && this.signaturesService.notesContent.length == 0" mat-icon-button title="Effacer les annotions / signatures"
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                (click)="removeTags();">
    
                <mat-icon [ngClass]="[this.signaturesService.signaturesContent.length == 0  && this.signaturesService.notesContent.length == 0 ? '' : 'red']" fontSet="fas"
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                  fontIcon="fa-eraser"></mat-icon>
              </button>
            </section>
          </article>
        </header>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
        <div *ngIf="signaturesService.lockNote">
          <span style="z-index:1;position: fixed;bottom: 10px;top: 10px;font-size: 25px;opacity: 0.4;"><i style="border-radius: 15px;background: white;right:10px;top:0px;color:black;"
              class="fas fa-arrow-left fa-2x" (tap)="cancelAnnotation(i);"></i></span>
          <span *ngIf="!lockSignaturePad" style="z-index:1;position: fixed;top: 10px;left: 50%;transform: translateX(-50%);font-size: 25px;opacity: 0.4;"><i
              style="border-radius: 15px;background: white;right:10px;top:0px;color:red;" class="fas fa-lock fa-2x" (tap)="test();"></i></span>
          <span *ngIf="lockSignaturePad" style="z-index:1;position: fixed;top: 10px;left: 50%;transform: translateX(-50%);font-size: 25px;opacity: 0.4;"><i
              style="border-radius: 15px;background: white;right:10px;top:0px;color:green;" class="fas fa-unlock fa-2x"
              (tap)="test();"></i></span>
          <span style="z-index:1;position: fixed;top: 10px;right: 0;font-size: 25px;opacity: 0.4;"><i style="border-radius: 15px;background: white;right:10px;top:0px;color:black;"
              class="fas fa-plus fa-2x" (tap)="zoomPlus();"></i></span>
          <span style="z-index:1;position: fixed;top: 10px;right: 60px;font-size: 25px;opacity: 0.4;"><i style="border-radius: 15px;background: white;right:10px;top:0px;color:black;"
              class="fas fa-minus fa-2x" (tap)="zoomMinus();"></i></span>
          <span style="z-index:1;position: fixed;bottom: 10px;left: 50%;transform: translateX(-50%);font-size: 25px;opacity: 0.4;"><i
              style="border-radius: 15px;background: white;right:10px;top:0px;color:green;" class="fas fa-check-circle fa-2x"
              (click)="$event.stopPropagation();validateAnnotation();"></i></span>
        </div>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
        <article [style.width.px]="768*scale" style="margin-top: 120px;margin-left: auto;margin-right: auto;margin-bottom: 120px;"
          class="article" #article *ngIf="!freezeSidenavClose">
          <button class="btn-previous" (click)="prevPage()" *ngIf="pageNum > 1 && !this.signaturesService.annotationMode"><i
              class="fas fa-chevron-left fa-3x"></i></button>
          <button class="btn-previous" (click)="prevDoc()" *ngIf="currentDoc > 0 &&  pageNum === 1 && !this.signaturesService.annotationMode"><i
              class="fas fa-chevron-left fa-3x"></i><i class="fas fa-chevron-left fa-3x"></i></button>
          <button class="btn-next" (click)="nextPage()" *ngIf="pageNum < totalPages && !this.signaturesService.annotationMode"><i
              class="fas fa-chevron-right fa-3x"></i></button>
          <button class="btn-next" (click)="nextDoc()" *ngIf="pageNum == totalPages && docList.length > currentDoc+1 && !this.signaturesService.annotationMode"><i
              class="fas fa-chevron-right fa-3x"></i><i class="fas fa-chevron-right fa-3x"></i></button>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
          <div [ngClass]="{'overlay': (annotation$ | async)}"></div>
    
          <section class="page-viewer" #pdfpage>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
            <div [style.width.px]="768*scale" class="canvas-wrapper" #canvasWrapper (click)="addAnnotation($event)">
    
    Alex ORLUC's avatar
    Alex ORLUC committed
              <div *ngIf="loadingDoc" style="position: absolute;z-index: 1;display: flex;background: #fffc;width: 100%;height: 100%;justify-content: center;align-items: center;">
                <mat-spinner></mat-spinner>
              </div>
              <ng-container *ngIf="currentDoc == 0">
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                <ng-container *ngFor="let note of this.signaturesService.notesContent[this.signaturesService.currentPage];let i = index;">
                  <div style="top:0;left:0;position: absolute;">
                    <span style="position: absolute;position: absolute;top: -15px;left: -15px;"><i style="border-radius: 15px;background: white;left:0px;top:0px;color:red;"
                        class="fa fa-times-circle fa-2x" (click)="$event.stopPropagation();deleteNote(i);"></i></span>
                    <img [style.width.px]="note.width*scale" [src]="sanitization.bypassSecurityTrustUrl(note.fullPath)">
                  </div>
                </ng-container>
                <ng-container *ngFor="let signature of this.signaturesService.signaturesContent[this.signaturesService.currentPage];let i = index;">
                  <div [position]="{'x': signature.positionX*scale, 'y': signature.positionY*scale}" id="signaturesContent"
                    style="position: absolute;border: dashed 1px grey;" ngDraggable preventDefaultEvent="true" [bounds]="canvas"
                    inBounds="true" (endOffset)="moveSign($event,i)">
                    <span style="position: absolute;width: 100%;height: 100%;top:0;left:0;">
                      <span style="position: absolute;width: 100%;top: -15px;margin-left: -15px;margin-right: 15px;"><i
                          style="border-radius: 15px;background: white;left:0px;top:0px;color:red;" class="fa fa-times-circle fa-2x"
                          (tap)="deleteSignature(i);"></i></span>
                    </span>
                    <img [src]="sanitization.bypassSecurityTrustUrl('data:image/png;base64,' + signature.encodedSignature)"
                      [style.width.px]="this.signaturesService.signWidth">
                  </div>
                </ng-container>
    
                <div *ngIf="signaturesService.lockNote" style="top:0;left:0;position: absolute;border: dashed 1px grey;">
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                  <div class="tool-content tool-content-left">     
                    <input type="range" name="dot" min="1" max="10" step="1" value="1" (input)="onDotChange($event.target.value)"
                  class="range">
                  <i class="fas fa-pen-nib"></i>
                </div>
                  <div class="tool-content tool-content-right">
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                    <ng-container *ngFor="let color of penColors" let idx="index">
                      <input type="radio" name="colors" [checked]="idx === 0" [value]="color.id" (change)="onColorChange(color)"
                        class="radio" [ngStyle]="{'border-color': color.id, 'background-color': color.id}">
                    </ng-container>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                    <hr>
                    <i class="fa fa-undo fa-2x undo" (click)="undo()"></i>    
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                  </div>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                  <signature-pad id="notePad" [options]="annotationPadOptions"></signature-pad>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                  <div *ngIf="lockSignaturePad" style="background: #ffffffb3;position: absolute;top: 0;left: 0;width: 100%;height: 100%;"></div>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                </div>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
              </ng-container>
    
              <canvas class="pdf-page-canvas" [ngClass]="{
                'pdf-page-canvas':!renderingDoc,
                'pdf-page-canvas-loading-doc':renderingDoc
    
    Alex ORLUC's avatar
    Alex ORLUC committed
              }"
                #canvas></canvas>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
            </div>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
          </section>
          <div class="page-under">
            <div class="page-under-fold"></div>
          </div>
          <section class="page-info" *ngIf="!this.signaturesService.annotationMode && docList[currentDoc]">
    
            <div class="page-info-doc">Doc {{currentDoc+1}}/{{docList.length}} : {{docList[currentDoc].subject}}</div>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
            <div class="page-info-page">page {{ pageNum }} / {{ totalPages }}</div>
          </section>
        </article>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
        <footer class="footer" *ngIf="!this.signaturesService.annotationMode && !freezeSidenavClose && !loadingPage" [@slideUp]>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
          <ng-container *ngFor="let action of actionsList;">
    
    Alex ORLUC's avatar
    Alex ORLUC committed
            <button [style.color]="action.color" [style.borderColor]="action.color" class="btn" (click)="launchEvent(action)"><i
                class="{{action.logo}} fa-2x"></i>{{action.label}}</button>
          </ng-container>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
        </footer>
        <app-drawer></app-drawer>
      </mat-sidenav-content>
    
      <mat-sidenav #snavRight mode="over" fixedInViewport="true" [style.width.%]="80" position='end' disableClose='true'>
        <app-my-profile [snavLeftComponent]="this.snav" [snavRightComponent]="this.snavRight"></app-my-profile>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
    </mat-sidenav-container>