Verified Commit 22bc1c2a authored by Alex ORLUC's avatar Alex ORLUC

FIX #11954 TIME 2:30 add view document component

parent 5b3a1644
......@@ -26,7 +26,7 @@
"ng2-pdf-viewer": "^5.3.4",
"ngx-cookie-service": "^2.1.0",
"ngx-pipes": "^2.4.6",
"pdfjs-dist": "^2.2.228",
"pdfjs-dist": "2.2.228",
"photoswipe": "^4.1.3",
"tinymce": "^4.9.4",
"tooltipster": "^4.2.7",
......
......@@ -59,6 +59,8 @@ import { TagInputComponent } from '../app/tag/indexing/ta
import { DiffusionsListComponent } from './diffusions/diffusions-list.component';
import { DocumentViewerComponent } from './viewer/document-viewer.component';
export class MyHammerConfig extends HammerGestureConfig {
......@@ -107,7 +109,8 @@ export class MyHammerConfig extends HammerGestureConfig {
PluginSelectSearchComponent,
FolderInputComponent,
TagInputComponent,
DiffusionsListComponent
DiffusionsListComponent,
DocumentViewerComponent
],
exports: [
CommonModule,
......@@ -143,7 +146,8 @@ export class MyHammerConfig extends HammerGestureConfig {
PluginSelectSearchComponent,
FolderInputComponent,
TagInputComponent,
DiffusionsListComponent
DiffusionsListComponent,
DocumentViewerComponent
],
providers: [
LatinisePipe,
......
......@@ -68,7 +68,7 @@
</div>
<div class="document-container" [class.fullContainer]="appService.getViewMode()">
<div class="content">
<i class="fa fa-file-upload upload-icon"></i><br />
<!--<i class="fa fa-file-upload upload-icon"></i><br />
Glisser-déposer<br />ou
<div style="display: flex;">
<button mat-button class="button-form-primary" [matMenuTriggerFor]="menu"
......@@ -85,7 +85,8 @@
<button mat-button class="button-form-primary"
style="align-items: center;justify-content: center;text-align: center;display: flex;">Choisissez
votre fichier</button>
</div>
</div>-->
<app-document-viewer style="height:100%;width:100%;"></app-document-viewer>
</div>
</div>
</mat-sidenav-content>
......
......@@ -41,12 +41,6 @@
}
}
.upload-icon {
font-size: 180px;
opacity: 0.4;
margin-bottom: 30px;
}
.indexing-form-container {
height: 100%;
overflow: auto;
......
<!--<mat-card>
<span class="file-info">{{file.name}}({{file.size | bytes}})</span>
<section class="example-section">
<mat-progress-bar class="example-margin" [value]="progressPercentage"></mat-progress-bar>
<a [ngClass]="{'disabled' : isUploading}"><mat-icon class="action" (click)="upload()">file_upload</mat-icon></a>
<mat-icon class="action" (click)="remove()">cancel</mat-icon>
</section>
<span class="file-info">{{progressPercentage}}%</span><span> {{loaded | bytes}} of {{total | bytes}}</span>
</mat-card>-->
<div class="example-loading-shade" *ngIf="loading">
<mat-spinner></mat-spinner>
</div>
<div *ngIf="file.src === null && !loading" class="view-doc-container">
<i class="fa fa-file-upload upload-icon"></i><br />
Glisser-déposer<br />ou
<div style="display: flex;">
<button mat-button class="button-form-primary" [matMenuTriggerFor]="menu"
style="margin-right:20px;align-items: center;justify-content: center;text-align: center;display: flex;">
<span class="menu-label">
Choisir un modèle
</span>
<i class="fa fa-chevron-down menu-icon"></i>
</button>
<mat-menu #menu="matMenu" [class]="'menuForm'">
<button mat-menu-item>Modèle 1</button>
<button mat-menu-item>Modèle 2</button>
</mat-menu>
<button mat-button (click)="docToUpload.click()" class="button-form-primary"
style="align-items: center;justify-content: center;text-align: center;display: flex;">Choisissez
votre fichier</button>
</div>
</div>
<input type="file" #docToUpload name="files[]" (change)="uploadTrigger($event)" style="display:none;">
<div style="display: block;width:100%;">
<div class="viewer-tools">
<button mat-icon-button (click)="docToUpload.click()" matTooltip="Téléversez un autre fichier">
<mat-icon class="fa fa-file-upload"></mat-icon>
</button>
<button mat-icon-button (click)="cleanFile()" matTooltip="Enlever le fichier">
<mat-icon class="fa fa-trash" color="warn"></mat-icon>
</button>
</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>
\ No newline at end of file
@import '../../css/vars.scss';
.upload-icon {
font-size: 180px;
opacity: 0.4;
margin-bottom: 30px;
}
.view-doc-container {
width: 100%;
height: 100%;
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.example-loading-shade {
background: rgba(255, 255, 255, 0.7);
}
.viewer-tools {
position: fixed;
margin-top: 20px;
z-index: 1;
background: $primary;
margin-left: 20px;
border-radius: 10px;
opacity: 0.5;
transition: all 0.5s;
.mat-icon-button {
height: 50px;
width: 50px;
.mat-icon {
color:white;
font-size: 20px;
transition: all 0.2s;
}
}
}
.viewer-tools:hover {
opacity: 1;
transition: all 0.5s;
.mat-icon-button:hover {
.mat-icon {
font-size: 30px;
transition: all 0.2s;
}
}
}
\ No newline at end of file
import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpEventType, HttpHeaders, HttpParams } from '@angular/common/http';
import { LANG } from '../translate.component';
import { NotificationService } from '../notification.service';
import { HeaderService } from '../../service/header.service';
import { AppService } from '../../service/app.service';
import { tap, catchError, finalize } from 'rxjs/operators';
import { of } from 'rxjs';
@Component({
selector: 'app-document-viewer',
templateUrl: "document-viewer.component.html",
styleUrls: [
'document-viewer.component.scss',
],
providers: [NotificationService, AppService]
})
export class DocumentViewerComponent implements OnInit {
lang: any = LANG;
loading: boolean = false;
file: any = {
name: '',
type: '',
content: '',
src: null
};
constructor(
public http: HttpClient,
private notify: NotificationService,
private headerService: HeaderService,
public appService: AppService,
) {
(<any>window).pdfWorkerSrc = '../../node_modules/pdfjs-dist/build/pdf.worker.min.js';
}
ngOnInit() {
}
uploadTrigger(fileInput: any) {
console.log("upload");
this.loading = true;
if (fileInput.target.files && fileInput.target.files[0]) {
var reader = new FileReader();
this.file.name = fileInput.target.files[0].name;
this.file.type = fileInput.target.files[0].type;
console.log(this.file.name);
//reader.readAsDataURL(fileInput.target.files[0]);
reader.readAsArrayBuffer(fileInput.target.files[0]);
reader.onload = (value: any) => {
this.file.content = this.getBase64Document(value.target.result);
if (this.file.type !== 'application/pdf') {
this.convertDocument(this.file);
} else {
this.file.src = value.target.result;
this.loading = false
}
//this.file.content = value.target.result.toString().replace('data:' + this.file.type + ';base64,', '');
//console.log(this.file.content);
//this.file.src = value.target.result;
//window['angularUserAdministrationComponent'].componentAfterUpload(value.target.result);
//this.submitSignature();
};
}
}
getBase64Document(buffer: ArrayBuffer) {
let TYPED_ARRAY = new Uint8Array(buffer);
const STRING_CHAR = TYPED_ARRAY.reduce((data, byte) => {
return data + String.fromCharCode(byte);
}, '');
return btoa(STRING_CHAR);
}
base64ToArrayBuffer(base64: string) {
var binary_string = window.atob(base64);
var len = binary_string.length;
var bytes = new Uint8Array(len);
for (var i = 0; i < len; i++) {
bytes[i] = binary_string.charCodeAt(i);
}
return bytes.buffer;
}
convertDocument(file: any) {
this.http.post('../../rest/convertedFile', { name: file.name, base64: file.content }).pipe(
tap((data: any) => {
this.file.src = this.base64ToArrayBuffer(data.encodedResource);
}),
finalize(() => this.loading = false),
catchError((err: any) => {
this.notify.handleErrors(err);
return of(false);
})
).subscribe();
}
onError(error: any) {
console.log(error);
}
cleanFile() {
this.file = {
name: '',
type: '',
content: '',
src: null
};
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment