document-viewer.component.html

<ng-container *ngIf="editInProgress && editor.mode !== 'onlyoffice'">
    <div class="editInProgress">
        <i class="fas fa-file-word bounce"></i>
        <div>
            {{lang.editInProgress}}
        </div>
        <div>
            <button mat-button (click)="cancelTemplateEdition()">{{lang.cancel}}</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}}
        </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}}<br />{{lang.or}}
            <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]="lang.chooseModel"
                        [placeholderLabel]="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}}</button>
            </div>
        </div>
        <input type="file" #docToUpload 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" class="viewer-tools">
                <button mat-icon-button (click)="downloadOriginalFile()" [matTooltip]="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) ? lang.editDocument : 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}}</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}}</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}}</span>
                    </button>
                </mat-menu>
                <ng-container *ngIf="mode === 'mainDocument' && !functions.empty(file.subinfos)">
                    <button *ngIf="file.subinfos.mainDocVersions.length > 1" mat-button
                        [matBadge]="file.subinfos.mainDocVersions.length" [matMenuTriggerFor]="menuVersionsDoc">
                        {{lang.versions}}
                    </button>
                    <mat-menu #menuVersionsDoc="matMenu">
                        <button mat-menu-item *ngFor="let version of file.subinfos.mainDocVersions" (click)="openResourceVersion(version,'PDF')">
                            <span>{{lang.version}} {{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}}
                    </button>
                    <button *ngIf="file.subinfos.commentedDocVersions > 0" mat-button
                        (click)="openResourceVersion(file.subinfos.mainDocVersions[file.subinfos.mainDocVersions.length -1],'NOTE')">
                        {{lang.NOTE_version}}
                    </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}}</b></div>

            <div class="no-view"><i class="far fa-eye-slash no-view-icon"></i><br />{{lang.noAvailablePreview}}</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"
        [sidenavLeft]="sidenavLeft" [editMode]="true" (triggerAfterUpdatedDoc)="triggerEvent.emit()"
        (triggerCloseEditor)="closeEditor()" (triggerModifiedDocument)="isDocModified = true"></onlyoffice-viewer>
</ng-container>
<button mat-fab *ngIf="isDocModified && mode === 'mainDocument' && resId !== null" color="accent"
    [title]="lang.saveModifications" style="position: absolute;z-index: 1;bottom: 40px;right: 60px;"
    (click)="saveMainDocument()">
    <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 && privilegeService.hasCurrentUserPrivilege('sign_document');" color="warn"
    [title]="lang.unsign" style="position: fixed;z-index: 1;bottom: 30px;right: 70px;"
    (click)="unsignMainDocument()">
    Supprimer la signature
</button>