From 4ad11e10f128f29591ff443eb90d80e81cd241a5 Mon Sep 17 00:00:00 2001
From: Alex ORLUC <alex.orluc@maarch.org>
Date: Wed, 9 Oct 2019 11:59:47 +0200
Subject: [PATCH] FEAT #11954 TIME 1:45 add dnd upload file
---
src/frontend/app/app-common.module.ts | 8 +-
.../app/viewer/document-viewer.component.html | 12 ++-
.../app/viewer/document-viewer.component.scss | 35 ++++++++-
.../app/viewer/document-viewer.component.ts | 74 +++++++++++++------
.../app/viewer/upload-file-dnd.directive.ts | 41 ++++++++++
5 files changed, 142 insertions(+), 28 deletions(-)
create mode 100644 src/frontend/app/viewer/upload-file-dnd.directive.ts
diff --git a/src/frontend/app/app-common.module.ts b/src/frontend/app/app-common.module.ts
index 04296e3d40b..9673ba5d4db 100755
--- a/src/frontend/app/app-common.module.ts
+++ b/src/frontend/app/app-common.module.ts
@@ -56,6 +56,8 @@ import { PluginAutocomplete } from '../plugins/autocomple
import { PluginSelectSearchComponent } from '../plugins/select-search/select-search.component';
import { FolderInputComponent } from '../app/folder/indexing/folder-input.component';
import { TagInputComponent } from '../app/tag/indexing/tag-input.component';
+import { DragDropDirective } from '../app/viewer/upload-file-dnd.directive';
+
import { DiffusionsListComponent } from './diffusions/diffusions-list.component';
@@ -110,7 +112,8 @@ export class MyHammerConfig extends HammerGestureConfig {
FolderInputComponent,
TagInputComponent,
DiffusionsListComponent,
- DocumentViewerComponent
+ DocumentViewerComponent,
+ DragDropDirective
],
exports: [
CommonModule,
@@ -147,7 +150,8 @@ export class MyHammerConfig extends HammerGestureConfig {
FolderInputComponent,
TagInputComponent,
DiffusionsListComponent,
- DocumentViewerComponent
+ DocumentViewerComponent,
+ DragDropDirective
],
providers: [
LatinisePipe,
diff --git a/src/frontend/app/viewer/document-viewer.component.html b/src/frontend/app/viewer/document-viewer.component.html
index 08598976990..1677f30a9af 100644
--- a/src/frontend/app/viewer/document-viewer.component.html
+++ b/src/frontend/app/viewer/document-viewer.component.html
@@ -11,7 +11,7 @@
<div class="example-loading-shade" *ngIf="loading">
<mat-spinner></mat-spinner>
</div>
-<div *ngIf="file.src === null && !loading" class="view-doc-container">
+<div *ngIf="file.content === null && !loading" class="view-doc-container" appUploadFileDragDrop (onFileDropped)="dndUploadFile($event)">
<i class="fa fa-file-upload upload-icon"></i><br />
Glisser-déposer<br />ou
<div style="display: flex;">
@@ -32,7 +32,7 @@
</div>
</div>
<input type="file" #docToUpload name="files[]" (change)="uploadTrigger($event)" style="display:none;">
-<div style="display: block;width:100%;">
+<div style="display: block;width:100%;" appUploadFileDragDrop (onFileDropped)="dndUploadFile($event)">
<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>
@@ -43,4 +43,10 @@
</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
+</div>
+<div *ngIf="file.content !== null && noConvertedFound" class="no-doc-container" appUploadFileDragDrop (onFileDropped)="dndUploadFile($event)">
+ <div class="loaded-file"><i class="fa fa-file"></i> <a (click)="docToUpload.click()">{{file.name}}</a> <b>chargé</b></div>
+
+ <div class="no-view"><i class="far fa-eye-slash no-view-icon"></i><br />Pas de visualisation disponible</div>
+
+ </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
index 6c75b2c789b..45f6b9c2089 100644
--- a/src/frontend/app/viewer/document-viewer.component.scss
+++ b/src/frontend/app/viewer/document-viewer.component.scss
@@ -52,4 +52,37 @@
transition: all 0.2s;
}
}
-}
\ No newline at end of file
+}
+
+.no-doc-container {
+ width: 100%;
+ height: 100%;
+ align-items: center;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ font-weight: initial;
+
+ a {
+ color: white;
+ cursor: pointer;
+ text-decoration: underline;
+ }
+}
+
+.no-view {
+ font-size: 30px;
+ opacity: 0.2;
+
+ .no-view-icon {
+ font-size: 100px;
+ }
+}
+
+.loaded-file {
+ position: absolute;
+ top: 105px;
+ padding: 10px;
+ border-radius: 10px;
+ background: #ffffff47;
+}
diff --git a/src/frontend/app/viewer/document-viewer.component.ts b/src/frontend/app/viewer/document-viewer.component.ts
index 42c8098e905..aeb14dfec43 100644
--- a/src/frontend/app/viewer/document-viewer.component.ts
+++ b/src/frontend/app/viewer/document-viewer.component.ts
@@ -1,11 +1,13 @@
import { Component, OnInit } from '@angular/core';
-import { HttpClient, HttpEventType, HttpHeaders, HttpParams } from '@angular/common/http';
+import { HttpClient } 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 { tap, catchError, finalize, filter } from 'rxjs/operators';
import { of } from 'rxjs';
+import { ConfirmComponent } from '../../plugins/modal/confirm.component';
+import { MatDialogRef, MatDialog } from '@angular/material';
@Component({
@@ -22,19 +24,23 @@ export class DocumentViewerComponent implements OnInit {
lang: any = LANG;
loading: boolean = false;
+ noConvertedFound: boolean = false;
file: any = {
name: '',
type: '',
- content: '',
+ content: null,
src: null
};
+ dialogRef: MatDialogRef<any>;
+
constructor(
public http: HttpClient,
private notify: NotificationService,
private headerService: HeaderService,
public appService: AppService,
+ private dialog: MatDialog,
) {
(<any>window).pdfWorkerSrc = '../../node_modules/pdfjs-dist/build/pdf.worker.min.js';
}
@@ -44,7 +50,13 @@ export class DocumentViewerComponent implements OnInit {
}
uploadTrigger(fileInput: any) {
- console.log("upload");
+ this.file = {
+ name: '',
+ type: '',
+ content: null,
+ src: null
+ };
+ this.noConvertedFound = false;
this.loading = true;
if (fileInput.target.files && fileInput.target.files[0]) {
var reader = new FileReader();
@@ -52,9 +64,6 @@ export class DocumentViewerComponent implements OnInit {
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) => {
@@ -64,15 +73,8 @@ export class DocumentViewerComponent implements OnInit {
this.convertDocument(this.file);
} else {
this.file.src = value.target.result;
- this.loading = false
+ 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();
};
}
}
@@ -103,7 +105,8 @@ export class DocumentViewerComponent implements OnInit {
}),
finalize(() => this.loading = false),
catchError((err: any) => {
- this.notify.handleErrors(err);
+ this.noConvertedFound = true;
+ //this.notify.handleErrors(err);
return of(false);
})
).subscribe();
@@ -114,12 +117,39 @@ export class DocumentViewerComponent implements OnInit {
}
cleanFile() {
- this.file = {
- name: '',
- type: '',
- content: '',
- src: null
- };
+ this.dialogRef = this.dialog.open(ConfirmComponent, { autoFocus: false, disableClose: true, data: { title: this.lang.delete, msg: this.lang.confirmAction } });
+
+ this.dialogRef.afterClosed().pipe(
+ filter((data: string) => data === 'ok'),
+ tap(() => {
+ this.file = {
+ name: '',
+ type: '',
+ content: null,
+ src: null
+ };
+ }),
+ catchError((err: any) => {
+ this.notify.handleErrors(err);
+ return of(false);
+ })
+ ).subscribe();
+
+ }
+
+ getFile() {
+ return this.file;
+ }
+
+ dndUploadFile(event: any) {
+ const fileInput = {
+ target: {
+ files: [
+ event[0]
+ ]
+ }
+ }
+ this.uploadTrigger(fileInput);
}
}
\ No newline at end of file
diff --git a/src/frontend/app/viewer/upload-file-dnd.directive.ts b/src/frontend/app/viewer/upload-file-dnd.directive.ts
new file mode 100644
index 00000000000..e97f9a0a5e9
--- /dev/null
+++ b/src/frontend/app/viewer/upload-file-dnd.directive.ts
@@ -0,0 +1,41 @@
+import { Directive, Output, EventEmitter, HostBinding, HostListener } from '@angular/core';
+
+@Directive({
+ selector: '[appUploadFileDragDrop]'
+})
+export class DragDropDirective {
+
+ @Output() onFileDropped = new EventEmitter<any>();
+
+ @HostBinding('style.background-color') private background = 'none';
+ @HostBinding('style.opacity') private opacity = '1';
+
+ //Dragover listener
+ @HostListener('dragover', ['$event']) onDragOver(evt: any) {
+ evt.preventDefault();
+ evt.stopPropagation();
+ this.background = '#9ecbec';
+ this.opacity = '0.8';
+ }
+
+ //Dragleave listener
+ @HostListener('dragleave', ['$event']) public onDragLeave(evt: any) {
+ evt.preventDefault();
+ evt.stopPropagation();
+ this.background = 'none';
+ this.opacity = '1';
+ }
+
+ //Drop listener
+ @HostListener('drop', ['$event']) public ondrop(evt: any) {
+ evt.preventDefault();
+ evt.stopPropagation();
+ this.background = 'none';
+ this.opacity = '1';
+ let files = evt.dataTransfer.files;
+ if (files.length > 0) {
+ this.onFileDropped.emit(files)
+ }
+ }
+
+}
\ No newline at end of file
--
GitLab