From e160d46b8173638c5d6b14d57be3274324df6bc2 Mon Sep 17 00:00:00 2001 From: Marie Verdonck Date: Thu, 16 Jul 2020 15:14:36 +0200 Subject: [PATCH] 71713: Dropzone without uploader to own component --- .../metadata-import-page.component.html | 33 ++----- .../metadata-import-page.component.spec.ts | 4 +- .../metadata-import-page.component.ts | 65 +++----------- src/app/core/auth/auth.service.ts | 2 +- .../file-dropzone-no-uploader.component.html | 28 ++++++ .../file-dropzone-no-uploader.component.ts | 90 +++++++++++++++++++ .../file-dropzone-no-uploader.scss} | 0 src/app/shared/shared.module.ts | 2 + 8 files changed, 138 insertions(+), 86 deletions(-) create mode 100644 src/app/shared/file-dropzone-no-uploader/file-dropzone-no-uploader.component.html create mode 100644 src/app/shared/file-dropzone-no-uploader/file-dropzone-no-uploader.component.ts rename src/app/{+admin/admin-import-metadata-page/metadata-import-page.component.scss => shared/file-dropzone-no-uploader/file-dropzone-no-uploader.scss} (100%) diff --git a/src/app/+admin/admin-import-metadata-page/metadata-import-page.component.html b/src/app/+admin/admin-import-metadata-page/metadata-import-page.component.html index 8a09727847..42a04b0de6 100644 --- a/src/app/+admin/admin-import-metadata-page/metadata-import-page.component.html +++ b/src/app/+admin/admin-import-metadata-page/metadata-import-page.component.html @@ -2,34 +2,11 @@

{{'admin.metadata-import.page.help' | translate}}

-
-
-
-
-

{{'admin.metadata-import.page.dropMsg' | translate}}

-
-
-
-

{{ fileObject.name }}

-

- {{ (fileObject == null ? 'admin.metadata-import.page.dropMsg' : 'admin.metadata-import.page.dropMsgReplace') | translate}} {{'uploader.or' | translate}} - -

-
+ + diff --git a/src/app/+admin/admin-import-metadata-page/metadata-import-page.component.spec.ts b/src/app/+admin/admin-import-metadata-page/metadata-import-page.component.spec.ts index bc3e0ebade..9d179aa950 100644 --- a/src/app/+admin/admin-import-metadata-page/metadata-import-page.component.spec.ts +++ b/src/app/+admin/admin-import-metadata-page/metadata-import-page.component.spec.ts @@ -20,7 +20,7 @@ import { FileValueAccessorDirective } from '../../shared/utils/file-value-access import { FileValidator } from '../../shared/utils/require-file.validator'; import { MetadataImportPageComponent } from './metadata-import-page.component'; -describe('MetadataImportPageComponent', () => { +fdescribe('MetadataImportPageComponent', () => { let comp: MetadataImportPageComponent; let fixture: ComponentFixture; @@ -106,7 +106,7 @@ describe('MetadataImportPageComponent', () => { beforeEach(() => { fileMock = new File([''], 'filename.txt', { type: 'text/plain' }); - comp.setFile([fileMock]); + comp.setFile(fileMock); }); describe('if proceed button is pressed', () => { diff --git a/src/app/+admin/admin-import-metadata-page/metadata-import-page.component.ts b/src/app/+admin/admin-import-metadata-page/metadata-import-page.component.ts index 4a9b86d7e3..3db6ad1c7c 100644 --- a/src/app/+admin/admin-import-metadata-page/metadata-import-page.component.ts +++ b/src/app/+admin/admin-import-metadata-page/metadata-import-page.component.ts @@ -1,9 +1,7 @@ import { Location } from '@angular/common'; -import { Component, HostListener, OnInit } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; import { TranslateService } from '@ngx-translate/core'; -import { uniqueId } from 'lodash'; -import { FileUploader } from 'ng2-file-upload'; import { Observable } from 'rxjs/internal/Observable'; import { map, switchMap, take } from 'rxjs/operators'; import { AuthService } from '../../core/auth/auth.service'; @@ -13,13 +11,10 @@ import { EPerson } from '../../core/eperson/models/eperson.model'; import { ProcessParameter } from '../../process-page/processes/process-parameter.model'; import { isNotEmpty } from '../../shared/empty.util'; import { NotificationsService } from '../../shared/notifications/notifications.service'; -import { of as observableOf } from 'rxjs'; -import { UploaderOptions } from '../../shared/uploader/uploader-options.model'; @Component({ selector: 'ds-metadata-import-page', - templateUrl: './metadata-import-page.component.html', - styleUrls: ['./metadata-import-page.component.scss'] + templateUrl: './metadata-import-page.component.html' }) /** @@ -27,19 +22,6 @@ import { UploaderOptions } from '../../shared/uploader/uploader-options.model'; */ export class MetadataImportPageComponent implements OnInit { - public isOverDocumentDropZone: Observable; - public uploader: FileUploader; - public uploaderId: string; - - /** - * The uploader configuration options - * @type {UploaderOptions} - */ - uploadFilesOptions: UploaderOptions = Object.assign(new UploaderOptions(), { - // URL needs to contain something to not produce any errors. We are using onFileDrop; not the uploader - url: 'placeholder', - }); - /** * The current value of the file */ @@ -58,6 +40,14 @@ export class MetadataImportPageComponent implements OnInit { private router: Router) { } + /** + * Set file + * @param file + */ + setFile(file) { + this.fileObject = file; + } + /** * Method provided by Angular. Invoked after the constructor. */ @@ -65,41 +55,6 @@ export class MetadataImportPageComponent implements OnInit { this.currentUserEmail$ = this.authService.getAuthenticatedUserFromStore().pipe( map((user: EPerson) => user.email) ); - this.uploaderId = 'ds-drag-and-drop-uploader' + uniqueId(); - this.isOverDocumentDropZone = observableOf(false); - window.addEventListener('drop', (e: DragEvent) => { - return e && e.preventDefault(); - }, false); - this.uploader = new FileUploader({ - // required, but using onFileDrop, not uploader - url: 'placeholder', - }); - } - - @HostListener('window:dragover', ['$event']) - onDragOver(event: any) { - // Show drop area on the page - event.preventDefault(); - if ((event.target as any).tagName !== 'HTML') { - this.isOverDocumentDropZone = observableOf(true); - } - } - - /** - * Called when files are dragged on the window document drop area. - */ - public fileOverDocument(isOver: boolean) { - if (!isOver) { - this.isOverDocumentDropZone = observableOf(isOver); - } - } - - /** - * Set (CSV) file - * @param files - */ - setFile(files) { - this.fileObject = files.length > 0 ? files[0] : undefined; } /** diff --git a/src/app/core/auth/auth.service.ts b/src/app/core/auth/auth.service.ts index 85e5eebb9e..7d854d9d4d 100644 --- a/src/app/core/auth/auth.service.ts +++ b/src/app/core/auth/auth.service.ts @@ -206,7 +206,7 @@ export class AuthService { return this.store.pipe( select(getAuthenticatedUserId), hasValueOperator(), - switchMap((id: string) => this.epersonService.findById(id)), + switchMap((id: string) => this.epersonService.findById(id) ), getAllSucceededRemoteDataPayload() ) } diff --git a/src/app/shared/file-dropzone-no-uploader/file-dropzone-no-uploader.component.html b/src/app/shared/file-dropzone-no-uploader/file-dropzone-no-uploader.component.html new file mode 100644 index 0000000000..759f84ef45 --- /dev/null +++ b/src/app/shared/file-dropzone-no-uploader/file-dropzone-no-uploader.component.html @@ -0,0 +1,28 @@ +
+
+
+
+

{{ dropMessageLabel | translate}}

+
+
+
+

{{ fileObject.name }}

+

+ {{ (fileObject == null ? dropMessageLabel : dropMessageLabelReplacement) | translate}} {{'uploader.or' | translate}} + +

+
diff --git a/src/app/shared/file-dropzone-no-uploader/file-dropzone-no-uploader.component.ts b/src/app/shared/file-dropzone-no-uploader/file-dropzone-no-uploader.component.ts new file mode 100644 index 0000000000..473250d9f6 --- /dev/null +++ b/src/app/shared/file-dropzone-no-uploader/file-dropzone-no-uploader.component.ts @@ -0,0 +1,90 @@ +import { Component, EventEmitter, HostListener, Input, OnInit, Output } from '@angular/core'; +import { uniqueId } from 'lodash'; +import { FileUploader } from 'ng2-file-upload'; +import { Observable } from 'rxjs/internal/Observable'; +import { UploaderOptions } from '../uploader/uploader-options.model'; +import { of as observableOf } from 'rxjs'; + +/** + * Component to have a file dropzone without that dropping/choosing a file in browse automatically triggers + * the uploader, instead an event is emitted with the file that was added. + * + * Here only one file is allowed to be selected, so if one is selected/dropped the message changes to a + * replace message. + */ +@Component({ + selector: 'ds-file-dropzone-no-uploader', + templateUrl: './file-dropzone-no-uploader.component.html', + styleUrls: ['./file-dropzone-no-uploader.scss'] +}) +export class FileDropzoneNoUploaderComponent implements OnInit { + + public isOverDocumentDropZone: Observable; + public uploader: FileUploader; + public uploaderId: string; + + @Input() dropMessageLabel: string; + @Input() dropMessageLabelReplacement: string; + + /** + * The function to call when file is added + */ + @Output() onFileAdded: EventEmitter = new EventEmitter(); + + /** + * The uploader configuration options + * @type {UploaderOptions} + */ + uploadFilesOptions: UploaderOptions = Object.assign(new UploaderOptions(), { + // URL needs to contain something to not produce any errors. We are using onFileDrop; not the uploader + url: 'placeholder', + }); + + /** + * The current value of the file + */ + fileObject: File; + + /** + * Method provided by Angular. Invoked after the constructor. + */ + ngOnInit() { + this.uploaderId = 'ds-drag-and-drop-uploader' + uniqueId(); + this.isOverDocumentDropZone = observableOf(false); + window.addEventListener('drop', (e: DragEvent) => { + return e && e.preventDefault(); + }, false); + this.uploader = new FileUploader({ + // required, but using onFileDrop, not uploader + url: 'placeholder', + }); + } + + @HostListener('window:dragover', ['$event']) + onDragOver(event: any) { + // Show drop area on the page + event.preventDefault(); + if ((event.target as any).tagName !== 'HTML') { + this.isOverDocumentDropZone = observableOf(true); + } + } + + /** + * Called when files are dragged on the window document drop area. + */ + public fileOverDocument(isOver: boolean) { + if (!isOver) { + this.isOverDocumentDropZone = observableOf(isOver); + } + } + + /** + * Set file + * @param files + */ + setFile(files) { + this.fileObject = files.length > 0 ? files[0] : undefined; + this.onFileAdded.emit(this.fileObject); + } + +} diff --git a/src/app/+admin/admin-import-metadata-page/metadata-import-page.component.scss b/src/app/shared/file-dropzone-no-uploader/file-dropzone-no-uploader.scss similarity index 100% rename from src/app/+admin/admin-import-metadata-page/metadata-import-page.component.scss rename to src/app/shared/file-dropzone-no-uploader/file-dropzone-no-uploader.scss diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index d7f5defb9d..8e4e958097 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -11,6 +11,7 @@ import { MissingTranslationHandler, TranslateModule } from '@ngx-translate/core' import { NgxPaginationModule } from 'ngx-pagination'; import { ComcolRoleComponent } from './comcol-forms/edit-comcol-page/comcol-role/comcol-role.component'; import { ExportMetadataSelectorComponent } from './dso-selector/modal-wrappers/export-metadata-selector/export-metadata-selector.component'; +import { FileDropzoneNoUploaderComponent } from './file-dropzone-no-uploader/file-dropzone-no-uploader.component'; import { PublicationListElementComponent } from './object-list/item-list-element/item-types/publication/publication-list-element.component'; import { FileUploadModule } from 'ng2-file-upload'; @@ -308,6 +309,7 @@ const COMPONENTS = [ ThumbnailComponent, GridThumbnailComponent, UploaderComponent, + FileDropzoneNoUploaderComponent, ItemListPreviewComponent, MyDSpaceItemStatusComponent, ItemSubmitterComponent,