document.component.html

<div *ngIf="enterApp" class="enterApp" [@enterApp]>
  <mat-icon svgIcon="maarchLogo" class="maarchLogo"></mat-icon>
</div>
<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>
  </mat-sidenav>
  <mat-sidenav-content class="mainView">
    <div *ngIf="loadingDoc || snapshot == null"
      style="position: fixed;z-index: 2;display: flex;background: #fffc;width: 100%;height: 100%;justify-content: center;align-items: center;">
      <mat-spinner></mat-spinner>
    </div>
    <header class="header" *ngIf="!this.signaturesService.annotationMode && !freezeSidenavClose" [@slideDown]>
      <article class="header-infos">
        <section class="header-action">
          <button mat-icon-button (click)="this.snav.toggle();">
            <mat-icon fontSet="fas" fontIcon="fa-bars"></mat-icon>
          </button>
        </section>
        <mat-accordion class="header-expand">
          <mat-expansion-panel>
            <mat-expansion-panel-header>
              <mat-panel-title>
                <div>
                  <mat-form-field>
                    <input matInput [value]="mainDocument.sender" title="{{mainDocument.sender}}" placeholder="{{'lang.emittedBy' | translate}}"
                      disabled>
                  </mat-form-field>
                </div>
                <div *ngIf="mainDocument.description != null">
                  <mat-form-field>
                    <input matInput [value]="mainDocument.description" title="{{mainDocument.description}}"
                      placeholder="{{'lang.description' | translate}}" disabled>
                  </mat-form-field>
                </div>
                <div *ngIf="mainDocument.deadline != null">
                  <mat-form-field>
                    <input matInput [value]="mainDocument.deadline" title="{{mainDocument.deadline}}"
                      placeholder="{{'lang.processingDeadline' | translate}}" disabled>
                  </mat-form-field>
                </div>
              </mat-panel-title>
            </mat-expansion-panel-header>
            <div class="header-expand-content">
              <mat-form-field>
                <input matInput [value]="mainDocument.reference" title="{{mainDocument.reference}}"
                  placeholder="{{'lang.reference' | translate}}" disabled>
              </mat-form-field>
            </div>
            <div class="header-expand-content">
              <mat-form-field>
                <input matInput [value]="mainDocument.processingUserDisplay"
                  title="{{mainDocument.processingUserDisplay}}" placeholder="{{'lang.toBeProcessedBy' | translate}}" disabled>
              </mat-form-field>
            </div>
            <div class="header-expand-content">
              <mat-form-field>
                <input matInput [value]="mainDocument.title" title="{{mainDocument.title}}" placeholder="{{'lang.subject' | translate}}"
                  disabled>
              </mat-form-field>
            </div>
            <div class="header-expand-content" *ngFor="let data of mainDocument.metadata;">
              <mat-form-field>
                <input matInput [value]="data.value" title="{{data.value | translate}}" placeholder="{{data.label | translate}}" disabled>
              </mat-form-field>
            </div>
          </mat-expansion-panel>
        </mat-accordion>

        <section class="header-action">
          <button mat-icon-button [matBadge]="mainDocument.attachments.length + 1" (click)="openDocumentList();">
              <mat-icon fontSet="fas" fontIcon="fa-file"></mat-icon>
            </button>
          <button mat-icon-button [matBadge]="mainDocument.workflow.length" (click)="openVisaWorkflow();">
            <mat-icon fontSet="fas" fontIcon="fa-list-ol"></mat-icon>
          </button>
          <button mat-icon-button [matMenuTriggerFor]="menu">
            <mat-icon fontSet="fas" fontIcon="fa-cog"></mat-icon>
          </button>
          <mat-menu #menu="matMenu">
            <button [disabled]="checkEmptiness()" mat-menu-item (click)="removeTags();">{{'lang.deleteAll' | translate}}</button>
            <button [disabled]="checkEmptyNote()" mat-menu-item (click)="undoTag();">{{'lang.cancelPreviousNote' | translate}}</button>
          </mat-menu>
        </section>
      </article>
    </header>
    <app-overlay *ngIf="this.signaturesService.annotationMode" [appDocumentNotePad]="appDocumentNotePad"></app-overlay>
    <ng-container *ngIf="!freezeSidenavClose">
      <button class="btn-previous" [disabled]="snapshot == null" (tap)="prevPage()"
        *ngIf="pageNum > 1 && !this.signaturesService.annotationMode"><i class="fas fa-chevron-left fa-3x"></i></button>
      <button class="btn-previous" (tap)="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" [disabled]="snapshot == null" (tap)="nextPage()"
        *ngIf="pageNum < totalPages && !this.signaturesService.annotationMode"><i
          class="fas fa-chevron-right fa-3x"></i></button>
      <button class="btn-next" (tap)="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>
    </ng-container>
    
    <div [style.width]="widthDoc" style="height:100%;overflow:hidden;background:grey;">
      <div *ngIf="!resetDragPos" #dragElem class="example-box" cdkDragLockAxis="y" cdkDrag [cdkDragDisabled]="this.signaturesService.annotationMode" style="width: 100%;transform: translate3d(0px, 80px, 0px)" (cdkDragEnded)="testDrag($event)">
        <app-document-note-list (tap)="addAnnotation($event)" *ngIf="currentDoc == 0 && snapshot != null"></app-document-note-list>
        <app-document-sign-list *ngIf="currentDoc == 0 && snapshot != null"></app-document-sign-list>
        <img (tap)="addAnnotation($event)" *ngIf="snapshot != null" id="snapshotPdf" [src]="snapshot" style="width:100%"/>
        <app-document-note-pad (triggerEvent)="zoomForView()" #appDocumentNotePad *ngIf="currentDoc == 0"></app-document-note-pad>
      </div>
      </div>
      
      <simple-pdf-viewer #pdfViewer [src]="pdfDataArr" removePageBorders="true" (onLoadComplete)="pdfRendered()"
            (onError)="pdfError($event)" style="display:none;"></simple-pdf-viewer>
    
    <section class="page-info" *ngIf="!this.signaturesService.annotationMode && docList[currentDoc]">
      <div class="page-info-doc">{{'lang.doc' | translate}} {{currentDoc+1}}/{{docList.length}} : {{docList[currentDoc].title}}</div>
      <div class="page-info-page">{{'lang.page' | translate}} {{ pageNum }} / {{ totalPages }}</div>
    </section>
    <footer class="footer" *ngIf="!this.signaturesService.annotationMode && !freezeSidenavClose" [@slideUp]>
      <ng-container *ngFor="let action of actionsList;">
        <button [style.color]="action.color" [style.borderColor]="action.color" class="btn"
          (click)="launchEvent(action)"><i class="{{action.logo}} fa-2x"></i>{{action.label | translate}}</button>
      </ng-container>
    </footer>
    <app-drawer></app-drawer>
  </mat-sidenav-content>
  <mat-sidenav #snavRight mode="over" fixedInViewport="true" [style.width]="signaturesService.sideNavRigtDatas.width" position='end' [disableClose]='signaturesService.sideNavRigtDatas.locked'>
    <app-my-profile *ngIf="signaturesService.sideNavRigtDatas.mode == 'profile'" [snavLeftComponent]="this.snav" [snavRightComponent]="this.snavRight"></app-my-profile>
    <app-visa-workflow [visaWorkflow]="mainDocument.workflow" *ngIf="signaturesService.sideNavRigtDatas.mode == 'visaWorkflow'"></app-visa-workflow>
    <app-document-list #appDocumentList *ngIf="signaturesService.sideNavRigtDatas.mode == 'documentList'"></app-document-list>
  </mat-sidenav>
</mat-sidenav-container>