document-viewer.component.html

<ng-container *ngIf="editInProgress && editor.mode !== 'onlyoffice' && editor.mode !== 'collaboraOnline'">
    <div class="editInProgress">
        <i class="fas fa-file-word bounce"></i>
        <div>
            {{'lang.editInProgress' | translate}}
        </div>
        <div>
            <button mat-button (click)="cancelTemplateEdition()">{{'lang.cancel' | translate}}</button>
        </div>
    </div>
</ng-container>
<ng-container *ngIf="!editInProgress">
    <ng-container *ngIf="noFile; else elseHaveFile">
        <div class="noFile">
            <i class="far fa-times-circle"></i>
            {{'lang.noFile' | translate}}
        </div>
    </ng-container>
    <ng-template #elseHaveFile>
        <div class="example-loading-shade" *ngIf="loading">
            <mat-progress-spinner [mode]="loadingInfo.mode" [value]="loadingInfo.percent"></mat-progress-spinner>
            <div class="percent">{{loadingInfo.percent}} %</div>
            <div style="padding-top: 10px;">{{loadingInfo.message}}</div>
        </div>
        <div *ngIf="file.content === null && !loading" class="view-doc-container" appUploadFileDragDrop
            (onFileDropped)="dndUploadFile($event)" [disabled]="!editMode">
            <i class="fa fa-file-upload upload-icon"></i><br />
            {{'lang.dragAndDrop' | translate}}<br />{{'lang.or' | translate}}
            <div style="display: flex;">
                <div
                    style="margin-right:20px;align-items: center;justify-content: center;text-align: center;display: flex;">
                    <plugin-select-search #templateList *ngIf="listTemplates.length > 0" [label]="this.translate.instant('lang.chooseModel')"
                        [placeholderLabel]="this.translate.instant('lang.chooseModel')" [datas]="listTemplates" [class]="'input-form-filled'"
                        [formControlSelect]="templateListForm" (afterSelected)="editTemplate($event)"
                        style="width: 240px;text-align: left;font-weight:normal;font-size: 13px;">
                    </plugin-select-search>
                </div>
                <button mat-button (click)="docToUpload.click()" class="button-form-primary-alt"
                    style="align-items: center;justify-content: center;text-align: center;display: flex;">{{'lang.chooseFile' | translate}}</button>
            </div>
        </div>
        <input type="file" #docToUpload [ngModel]="docToUploadValue" name="files[]" (change)="uploadTrigger($event)" style="display:none;">
        <div style="display: block;width:100%;" appUploadFileDragDrop (onFileDropped)="dndUploadFile($event)"
            [disabled]="!editMode">
            <div *ngIf="!loading && file.content !== null && !hideTools" class="viewer-tools">
                <button mat-icon-button (click)="downloadOriginalFile()" [matTooltip]="this.translate.instant('lang.downloadOriginalFile')">
                    <mat-icon class="fa fa-download"></mat-icon>
                </button>
                <button [disabled]="!functions.empty(file.subinfos) && file.subinfos.signedDocVersions" [class.disabledButton]="!functions.empty(file.subinfos) && file.subinfos.signedDocVersions" *ngIf="editMode && resId !== null && !noConvertedFound" mat-icon-button (click)="editResource()"
                    [matTooltip]="functions.empty(file.subinfos) || (!functions.empty(file.subinfos) && !file.subinfos.signedDocVersions) ? this.translate.instant('lang.editDocument') : this.translate.instant('lang.documentSignedMsg')">
                    <mat-icon class="fa fa-edit"></mat-icon>
                </button>
                <button mat-icon-button [matMenuTriggerFor]="menuOptions">
                    <mat-icon class="fas fa-chevron-down"></mat-icon>
                </button>
                <mat-menu #menuOptions="matMenu" [class]="'optionsListMenu'">
                    <button mat-menu-item *ngIf="file.contentView !== undefined || base64 !== null" (click)="openPdfInTab()">
                        <mat-icon color="primary" class="fas fa-external-link-alt"></mat-icon>
                        <span>{{'lang.openInExternalModal' | translate}}</span>
                    </button>
                    <button mat-menu-item *ngIf="(file.contentView !== undefined || base64 !== null) && resId != null && mode !== 'attachment' && externalId.signatureBookId" (click)="openMaarchParapheurWorkflow()">
                        <mat-icon color="primary" class="fas fa-list-ol"></mat-icon>
                        <span>{{'lang.externalVisaWorkflow' | translate}}</span>
                    </button>
                    <button mat-menu-item *ngIf="editMode && resId === null" (click)="docToUpload.click()">
                        <mat-icon color="primary" class="fa fa-file-upload"></mat-icon>
                        <span>{{'lang.uploadAnOtherFile' | translate}}</span>
                    </button>
                    <button mat-menu-item *ngIf="editMode && resId === null" (click)="cleanFile()">
                        <mat-icon class="fa fa-trash" color="warn"></mat-icon>
                        <span>{{'lang.removeFile' | translate}}</span>
                    </button>
                </mat-menu>
                <ng-container *ngIf="mode === 'mainDocument' && !functions.empty(file.subinfos)">
                    <button *ngIf="file.subinfos.mainDocVersions.length > 1 && !file.subinfos.signedDocVersions" mat-button
                        [matBadge]="file.subinfos.mainDocVersions.length" [matMenuTriggerFor]="menuVersionsDoc">
                        {{'lang.versions' | translate}}
                    </button>
                    <mat-menu #menuVersionsDoc="matMenu">
                        <button mat-menu-item *ngFor="let version of file.subinfos.mainDocVersions" (click)="openResourceVersion(version,'PDF')">
                            <span>{{'lang.version' | translate}} {{version}}</span>
                        </button>
                    </mat-menu>
                    <button *ngIf="file.subinfos.signedDocVersions" mat-button
                        (click)="openResourceVersion(file.subinfos.mainDocVersions[file.subinfos.mainDocVersions.length -1],'SIGN')">
                        {{'lang.SIGN_version' | translate}}
                    </button>
                    <button *ngIf="file.subinfos.commentedDocVersions > 0" mat-button
                        (click)="openResourceVersion(file.subinfos.mainDocVersions[file.subinfos.mainDocVersions.length -1],'NOTE')">
                        {{'lang.NOTE_version' | translate}}
                    </button>
                </ng-container>
            </div>
            <div>
                <pdf-viewer *ngIf="file.src!==null" [src]="file.src" [render-text]="true" [autoresize]="true"
                    [original-size]="false" [show-all]="true" (error)="onError($event)" style="width:100%;">
                </pdf-viewer>
            </div>

        </div>
        <div *ngIf="file.content !== null && noConvertedFound" class="no-doc-container" appUploadFileDragDrop
            (onFileDropped)="dndUploadFile($event)" [disabled]="!editMode">
            <div class="loaded-file"><i class="fa fa-file"></i>&nbsp;<a
                    (click)="downloadOriginalFile()">{{file.name}}</a>&nbsp;<b>{{'lang.loaded' | translate}}</b></div>

            <div class="no-view"><i class="far fa-eye-slash no-view-icon"></i><br />{{'lang.noAvailablePreview' | translate}}</div>

        </div>
    </ng-template>
</ng-container>
<ng-container *ngIf="editInProgress && editor.mode === 'onlyoffice'">
    <onlyoffice-viewer #onlyofficeViewer style="height:100%;width:100%;" [params]="editor.options" [file]="file"
        [editMode]="true" (triggerAfterUpdatedDoc)="triggerEvent.emit()"
        (triggerCloseEditor)="closeEditor()" (triggerModifiedDocument)="isDocModified = true"></onlyoffice-viewer>
</ng-container>
<ng-container *ngIf="editInProgress && editor.mode === 'collaboraOnline'">
    <app-collabora-online-viewer #collaboraOnlineViewer style="height:100%;width:100%;" [params]="editor.options" [file]="file"
        [editMode]="true" (triggerAfterUpdatedDoc)="triggerEvent.emit()"
        (triggerCloseEditor)="closeEditor()" (triggerModifiedDocument)="isDocModified = true"></app-collabora-online-viewer>
    <div *ngIf="collaboraOnlineViewer.isSaving" class="example-loading-shade">
        <mat-spinner style="margin:auto;"></mat-spinner>
    </div>
</ng-container>
<button mat-fab *ngIf="isDocModified && mode === 'mainDocument' && resId !== null" color="accent"
    [title]="this.translate.instant('lang.saveModifications')" style="position: absolute;z-index: 3;bottom: 40px;right: 60px;"
    (click)="saveMainDocument()">
    <mat-icon style="height:auto;font-size:20px;" class="fas fa-check"></mat-icon>
</button>
<button mat-fab *ngIf="isDocModified && mode === 'attachment'" color="accent"
    [title]="this.translate.instant('lang.saveModifications')" style="position: absolute;z-index: 3;bottom: 40px;right: 60px;"
    (click)="saveTmpDocument()">
    <mat-icon style="height:auto;font-size:20px;" class="fas fa-check"></mat-icon>
</button>
<button mat-raised-button 
    *ngIf="(!isDocModified && mode === 'mainDocument' && resId !== null && !functions.empty(file.subinfos) && file.subinfos.signedDocVersions && this.headerService.user.id == file.signatoryId) && !hideTools && editMode" 
    color="warn"
    [title]="this.translate.instant('lang.unsign')" style="position: fixed;z-index: 1;bottom: 100px;right: 150px;"
    (click)="unsignMainDocument()">
    {{'lang.removeSignature' | translate}}
</button>