diff --git a/package.json b/package.json
index 1275d97a3c0fc0ae961fb15c48339f0b612d1807..bcf199f3ac3bb3e9fd064be666980b510ce3b613 100755
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/src/frontend/app/app-common.module.ts b/src/frontend/app/app-common.module.ts
index c1972da8002538a1a614686dd00631b96f08925f..04296e3d40bbc69d2b08a3110faa6c714dff783c 100755
--- a/src/frontend/app/app-common.module.ts
+++ b/src/frontend/app/app-common.module.ts
@@ -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,
diff --git a/src/frontend/app/indexation/indexation.component.html b/src/frontend/app/indexation/indexation.component.html
index 4cffe1da1d134736e21e87e33aa6066f832ee755..37ae40e63f9e27e51a89086cae9079185c79199a 100644
--- a/src/frontend/app/indexation/indexation.component.html
+++ b/src/frontend/app/indexation/indexation.component.html
@@ -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>
diff --git a/src/frontend/app/indexation/indexation.component.scss b/src/frontend/app/indexation/indexation.component.scss
index 22dde05ec6714c37b09638d7f3cb8aa1f7159795..9f719d3436757b6b60f930c988ca63837341aef2 100644
--- a/src/frontend/app/indexation/indexation.component.scss
+++ b/src/frontend/app/indexation/indexation.component.scss
@@ -41,12 +41,6 @@
}
}
-.upload-icon {
- font-size: 180px;
- opacity: 0.4;
- margin-bottom: 30px;
-}
-
.indexing-form-container {
height: 100%;
overflow: auto;
diff --git a/src/frontend/app/viewer/document-viewer.component.html b/src/frontend/app/viewer/document-viewer.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..0859897699076cb51e947455d31a5a78abf9db75
--- /dev/null
+++ b/src/frontend/app/viewer/document-viewer.component.html
@@ -0,0 +1,46 @@
+<!--<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
diff --git a/src/frontend/app/viewer/document-viewer.component.scss b/src/frontend/app/viewer/document-viewer.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..6c75b2c789b475a7d9b320dafbea68d21065c3f4
--- /dev/null
+++ b/src/frontend/app/viewer/document-viewer.component.scss
@@ -0,0 +1,55 @@
+@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
diff --git a/src/frontend/app/viewer/document-viewer.component.ts b/src/frontend/app/viewer/document-viewer.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..42c8098e9055ea089409b0bf55ea79214b5a7c8a
--- /dev/null
+++ b/src/frontend/app/viewer/document-viewer.component.ts
@@ -0,0 +1,125 @@
+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