From 24bbe8c2ab71a8afaf2b95e40df75e0b371cc14b Mon Sep 17 00:00:00 2001 From: apapachristou Date: Mon, 28 Sep 2020 15:44:32 +0300 Subject: [PATCH 1/2] Restyles import DMP pop up dialog --- dmp-frontend/src/app/ui/dmp/dmp.module.ts | 4 +- .../ui/dmp/listing/dmp-listing.component.ts | 2 +- .../dmp-upload-dialogue.component.html | 51 ++++++++---- .../dmp-upload-dialogue.component.scss | 82 ++++++++++++++++++- .../dmp-upload-dialogue.component.ts | 32 +++++++- .../start-new-dmp-dialog.component.html | 48 ++++++----- .../start-new-dmp-dialog.component.scss | 55 +++++++------ .../start-new-dmp-dialog.component.ts | 3 +- dmp-frontend/src/assets/i18n/de.json | 9 ++ dmp-frontend/src/assets/i18n/en.json | 9 ++ dmp-frontend/src/assets/i18n/es.json | 9 ++ dmp-frontend/src/assets/i18n/gr.json | 9 ++ dmp-frontend/src/assets/i18n/sk.json | 9 ++ dmp-frontend/src/assets/i18n/tr.json | 9 ++ 14 files changed, 261 insertions(+), 70 deletions(-) diff --git a/dmp-frontend/src/app/ui/dmp/dmp.module.ts b/dmp-frontend/src/app/ui/dmp/dmp.module.ts index a2c66f8e5..a727018af 100644 --- a/dmp-frontend/src/app/ui/dmp/dmp.module.ts +++ b/dmp-frontend/src/app/ui/dmp/dmp.module.ts @@ -44,6 +44,7 @@ import { DatasetEditorDetailsComponent } from './editor/dataset-editor-details/d import { DatasetDescriptionFormModule } from '../misc/dataset-description-form/dataset-description-form.module'; import { LicenseInfoComponent } from './editor/license-info/license-info.component'; import { StartNewDatasetDialogComponent } from './start-new-dataset-dialogue/start-new-dataset-dialog.component'; +import { NgxDropzoneModule } from 'ngx-dropzone'; @NgModule({ imports: [ @@ -59,7 +60,8 @@ import { StartNewDatasetDialogComponent } from './start-new-dataset-dialogue/sta FormValidationErrorsDialogModule, MultipleChoiceDialogModule, DatasetEditorDetailsModule, - DatasetDescriptionFormModule + DatasetDescriptionFormModule, + NgxDropzoneModule ], declarations: [ DmpListingComponent, diff --git a/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.ts b/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.ts index bcadc5d35..05bf1a0cc 100644 --- a/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.ts +++ b/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.ts @@ -336,7 +336,7 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread }); dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => { if (result && result.success) { - this.dmpService.uploadXml(result.fileList, result.dmpTitle, result.dmpProfiles) + this.dmpService.uploadXml(result.fileList[0], result.dmpTitle, result.dmpProfiles) .pipe(takeUntil(this._destroyed)) .subscribe((complete) => this.onCallbackImportComplete(), (error) => this.onCallbackImportFail(error.error)); diff --git a/dmp-frontend/src/app/ui/dmp/listing/upload-dialogue/dmp-upload-dialogue.component.html b/dmp-frontend/src/app/ui/dmp/listing/upload-dialogue/dmp-upload-dialogue.component.html index 579c50632..279603fa8 100644 --- a/dmp-frontend/src/app/ui/dmp/listing/upload-dialogue/dmp-upload-dialogue.component.html +++ b/dmp-frontend/src/app/ui/dmp/listing/upload-dialogue/dmp-upload-dialogue.component.html @@ -3,28 +3,45 @@

{{'DMP-UPLOAD.TITLE' | translate}}

-
-
+
+
+ + + +
+
+ + + {{ f.name }} + + +
+
+ - +
+ +
+
+
+ + + +
-
- - - - - - - -
-
-
- +
+
+
- +
diff --git a/dmp-frontend/src/app/ui/dmp/listing/upload-dialogue/dmp-upload-dialogue.component.scss b/dmp-frontend/src/app/ui/dmp/listing/upload-dialogue/dmp-upload-dialogue.component.scss index c066ed1b5..39d84134c 100644 --- a/dmp-frontend/src/app/ui/dmp/listing/upload-dialogue/dmp-upload-dialogue.component.scss +++ b/dmp-frontend/src/app/ui/dmp/listing/upload-dialogue/dmp-upload-dialogue.component.scss @@ -13,9 +13,85 @@ .col-md-6 { display: flex; - flex-direction: row; - flex-wrap: wrap; - align-items: center; + flex-direction: row; + flex-wrap: wrap; + align-items: center; margin: -4px; } } + +.close-btn { + margin-left: auto; + cursor: pointer; +} + +.cancel-btn { + background: #ffffff 0% 0% no-repeat padding-box; + border: 1px solid #b5b5b5; + border-radius: 30px; + width: 101px; + height: 43px; + color: #212121; + font-weight: 500; +} + +.next-btn { + background: #ffffff 0% 0% no-repeat padding-box; + border: 1px solid #129d99; + border-radius: 30px; + opacity: 1; + width: 101px; + height: 43px; + color: #129d99; + font-weight: 500; +} + +.attach-btn { + top: -20px; +} + +.attach-file { + width: 156px; + height: 44px; + color: #ffffff; + background: #129d99 0% 0% no-repeat padding-box; + box-shadow: 0px 3px 6px #1e202029; + border-radius: 30px; +} + +.attach-file:hover { + background-color: #ffffff; + border: 1px solid #129d99; + color: #129d99; +} + +.drop-file { + background-color: #fafafa; + border: 1px dashed #d1d1d1; + border-radius: 4px; + max-width: 480px; + height: 98px; + margin-top: 0.5rem; +} + +.file-preview { + height: auto !important; + width: auto !important; + max-width: 500px !important; + min-height: 1rem !important; +} + +.file-label { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +::ng-deep .upload-form .mat-form-field-appearance-outline .mat-form-field-outline { + background: #fafafa !important; +} + +::ng-deep .upload-form .mat-form-field-appearance-outline .mat-form-field-infix { + font-size: 1rem; + padding: 0.6em 0 1em 0 !important; +} diff --git a/dmp-frontend/src/app/ui/dmp/listing/upload-dialogue/dmp-upload-dialogue.component.ts b/dmp-frontend/src/app/ui/dmp/listing/upload-dialogue/dmp-upload-dialogue.component.ts index adcddfd03..5e2fc0157 100644 --- a/dmp-frontend/src/app/ui/dmp/listing/upload-dialogue/dmp-upload-dialogue.component.ts +++ b/dmp-frontend/src/app/ui/dmp/listing/upload-dialogue/dmp-upload-dialogue.component.ts @@ -16,6 +16,7 @@ import { DatasetProfileCriteria } from '@app/core/query/dataset-profile/dataset- export class DmpUploadDialogue { dmpTitle: string; dmpProfiles: any[] = []; + files: File[] = []; profilesAutoCompleteConfiguration: MultipleAutoCompleteConfiguration = { filterFn: this.filterProfiles.bind(this), @@ -30,13 +31,17 @@ export class DmpUploadDialogue { public dialogRef: MatDialogRef, private _service: DmpService, @Inject(MAT_DIALOG_DATA) public data: any, - ) {} + ) { } cancel() { this.data.success = false; this.dialogRef.close(this.data); } + close() { + this.dialogRef.close(false); + } + confirm() { this.data.success = true; this.data.dmpTitle = this.dmpTitle; @@ -50,11 +55,32 @@ export class DmpUploadDialogue { if (this.data.fileList.length > 0) { this.dmpTitle = fileList.item(0).name; } + if (this.files.length === 1 ){ + this.files.splice(0, 1); + } + this.files.push(...event.target.files); + } + + selectFile(event) { + console.log(event) + const fileList: FileList = event.addedFiles + this.data.fileList = fileList; + if (this.data.fileList.length > 0) { + this.dmpTitle = fileList[0].name; + } + if (this.files.length === 1 ){ + this.files.splice(0, 1); + } + this.files.push(...event.addedFiles); + } + + onRemove(event) { + this.files.splice(0, 1); + this.dmpTitle = null; } filterProfiles(value: string): Observable { - - const request = new DataTableRequest(null, null, {fields: ['+label']}); + const request = new DataTableRequest(null, null, { fields: ['+label'] }); const criteria = new DatasetProfileCriteria(); criteria.like = value; request.criteria = criteria; diff --git a/dmp-frontend/src/app/ui/dmp/start-new-dmp-dialogue/start-new-dmp-dialog.component.html b/dmp-frontend/src/app/ui/dmp/start-new-dmp-dialogue/start-new-dmp-dialog.component.html index 05749a473..774191881 100644 --- a/dmp-frontend/src/app/ui/dmp/start-new-dmp-dialogue/start-new-dmp-dialog.component.html +++ b/dmp-frontend/src/app/ui/dmp/start-new-dmp-dialogue/start-new-dmp-dialog.component.html @@ -1,22 +1,32 @@ -
-
- - close -
-
-

{{'NAV-BAR.START-NEW-DMP' | translate}}

-

{{'NAV-BAR.START-NEW-DMP-TXT' | translate}}

-
- -

{{ 'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.FIRST-STEP.OR' | translate }}

- -
+
+ + close +
+
+

{{'NAV-BAR.START-NEW-DMP' | translate}}

+

{{'NAV-BAR.START-NEW-DMP-TXT' | translate}}

+
+ +

{{ 'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.FIRST-STEP.OR' | translate }}

+
+
+
+ info + + {{'GENERAL.START-NEW-DMP-DIALOG.IMPORT' | translate }} {{'GENERAL.START-NEW-DMP-DIALOG.FUNCTION-SUPPORTS' | translate }} + {{'GENERAL.START-NEW-DMP-DIALOG.JSON-FILES' | translate }} {{'GENERAL.START-NEW-DMP-DIALOG.PRODUCED' | translate }} + {{'GENERAL.START-NEW-DMP-DIALOG.RDA-SPECIFICATIONS' | translate }} + {{'GENERAL.START-NEW-DMP-DIALOG.MACHINE-ACTIONABLE' | translate }} + +
diff --git a/dmp-frontend/src/app/ui/dmp/start-new-dmp-dialogue/start-new-dmp-dialog.component.scss b/dmp-frontend/src/app/ui/dmp/start-new-dmp-dialogue/start-new-dmp-dialog.component.scss index 10bcb587b..bd6a3b0bf 100644 --- a/dmp-frontend/src/app/ui/dmp/start-new-dmp-dialogue/start-new-dmp-dialog.component.scss +++ b/dmp-frontend/src/app/ui/dmp/start-new-dmp-dialogue/start-new-dmp-dialog.component.scss @@ -1,11 +1,11 @@ ::ng-deep .mat-dialog-container { - border-radius: 8px; + border-radius: 8px; } .form-container { - width: 33rem; - min-height: 14rem; - padding: 0.28rem 0.34rem 0.875rem 0.625rem; + width: 33rem; + min-height: 14rem; + padding: 0.28rem 0.34rem 0.875rem 0.625rem; } .logo { @@ -13,42 +13,47 @@ } .close-icon { - cursor: pointer; + cursor: pointer; } .content { - margin: 2.17rem 2.304rem 1.1875rem 3.065rem; + margin: 2.17rem 2.304rem 1.1875rem 3.065rem; } -.title, .text { - font-size: 1.25rem; - font-weight: lighter; - color: #000000; - opacity: 0.8; +.title, +.text { + font-size: 1.25rem; + font-weight: lighter; + color: #000000; + opacity: 0.8; } .title { - font-size: 2.375rem; - margin-bottom: 1.1875rem; + font-size: 2.375rem; + margin-bottom: 1.1875rem; } .text { - margin-bottom: 2.9375rem; - line-height: 1.9rem; + margin-bottom: 2.9375rem; + line-height: 1.9rem; } .upload-btn { - background-color: white; - color: #212121; - font-weight: bold; - box-shadow: 0px 3px 6px #1E202029; - border: 2px solid #212121; + background-color: white; + color: #212121; + font-weight: bold; + box-shadow: 0px 3px 6px #1e202029; + border: 2px solid #212121; } .actions { - width: 26.667rem; - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; + width: 26.667rem; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; +} + +.warn { + color: #f16868; } diff --git a/dmp-frontend/src/app/ui/dmp/start-new-dmp-dialogue/start-new-dmp-dialog.component.ts b/dmp-frontend/src/app/ui/dmp/start-new-dmp-dialogue/start-new-dmp-dialog.component.ts index 1eee5a1cb..47935ff1f 100644 --- a/dmp-frontend/src/app/ui/dmp/start-new-dmp-dialogue/start-new-dmp-dialog.component.ts +++ b/dmp-frontend/src/app/ui/dmp/start-new-dmp-dialogue/start-new-dmp-dialog.component.ts @@ -49,6 +49,7 @@ export class StartNewDmpDialogComponent extends BaseComponent { uploadFile(event) { const dialogRef = this.dialog.open(DmpUploadDialogue, { + width: '528px', data: { fileList: FileList, success: Boolean, @@ -57,7 +58,7 @@ export class StartNewDmpDialogComponent extends BaseComponent { }); dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => { if (result && result.success) { - this.dmpService.uploadXml(result.fileList, result.dmpTitle, result.dmpProfiles) + this.dmpService.uploadXml(result.fileList[0], result.dmpTitle, result.dmpProfiles) .pipe(takeUntil(this._destroyed)) .subscribe((complete) => this.onCallbackImportComplete(), (error) => this.onCallbackImportFail(error.error)); diff --git a/dmp-frontend/src/assets/i18n/de.json b/dmp-frontend/src/assets/i18n/de.json index 62f2f000b..6be2afaf8 100644 --- a/dmp-frontend/src/assets/i18n/de.json +++ b/dmp-frontend/src/assets/i18n/de.json @@ -76,6 +76,15 @@ "CLOSE": "Schließen" } }, + "START-NEW-DMP-DIALOG": { + "IMPORT": "Import", + "FUNCTION-SUPPORTS": "function supports", + "JSON-FILES": ".json files", + "PRODUCED": "produced", + "RDA-SPECIFICATIONS": "according to RDA specifications", + "MACHINE-ACTIONABLE": "for machine-actionable DMPs", + "UPLOAD-FILE": "Upload File" + }, "ACTIONS": { "VIEW-ALL": "Alles anzeigen", "SHOW-MORE": "Mehr anzeigen", diff --git a/dmp-frontend/src/assets/i18n/en.json b/dmp-frontend/src/assets/i18n/en.json index 7f921c252..dfd790613 100644 --- a/dmp-frontend/src/assets/i18n/en.json +++ b/dmp-frontend/src/assets/i18n/en.json @@ -77,6 +77,15 @@ "CLOSE": "Close" } }, + "START-NEW-DMP-DIALOG": { + "IMPORT": "Import", + "FUNCTION-SUPPORTS": "function supports", + "JSON-FILES": ".json files", + "PRODUCED": "produced", + "RDA-SPECIFICATIONS": "according to RDA specifications", + "MACHINE-ACTIONABLE": "for machine-actionable DMPs", + "UPLOAD-FILE": "Upload File" + }, "ACTIONS": { "VIEW-ALL": "View All", "SHOW-MORE": "Show more", diff --git a/dmp-frontend/src/assets/i18n/es.json b/dmp-frontend/src/assets/i18n/es.json index 7d3203ee8..e2784748c 100644 --- a/dmp-frontend/src/assets/i18n/es.json +++ b/dmp-frontend/src/assets/i18n/es.json @@ -77,6 +77,15 @@ "CLOSE": "Cerrar" } }, + "START-NEW-DMP-DIALOG": { + "IMPORT": "Import", + "FUNCTION-SUPPORTS": "function supports", + "JSON-FILES": ".json files", + "PRODUCED": "produced", + "RDA-SPECIFICATIONS": "according to RDA specifications", + "MACHINE-ACTIONABLE": "for machine-actionable DMPs", + "UPLOAD-FILE": "Upload File" + }, "ACTIONS": { "VIEW-ALL": "Ver todo", "SHOW-MORE": "Mostrar más", diff --git a/dmp-frontend/src/assets/i18n/gr.json b/dmp-frontend/src/assets/i18n/gr.json index e81625cfd..73a293445 100644 --- a/dmp-frontend/src/assets/i18n/gr.json +++ b/dmp-frontend/src/assets/i18n/gr.json @@ -77,6 +77,15 @@ "CLOSE": "Κλείσιμο" } }, + "START-NEW-DMP-DIALOG": { + "IMPORT": "Import", + "FUNCTION-SUPPORTS": "function supports", + "JSON-FILES": ".json files", + "PRODUCED": "produced", + "RDA-SPECIFICATIONS": "according to RDA specifications", + "MACHINE-ACTIONABLE": "for machine-actionable DMPs", + "UPLOAD-FILE": "Upload File" + }, "ACTIONS": { "VIEW-ALL": "Προβολή όλων", "SHOW-MORE": "Δείτε περισσότερα", diff --git a/dmp-frontend/src/assets/i18n/sk.json b/dmp-frontend/src/assets/i18n/sk.json index 5860fff84..a2587e21b 100644 --- a/dmp-frontend/src/assets/i18n/sk.json +++ b/dmp-frontend/src/assets/i18n/sk.json @@ -74,6 +74,15 @@ "CLOSE": "Zatvoriť" } }, + "START-NEW-DMP-DIALOG": { + "IMPORT": "Import", + "FUNCTION-SUPPORTS": "function supports", + "JSON-FILES": ".json files", + "PRODUCED": "produced", + "RDA-SPECIFICATIONS": "according to RDA specifications", + "MACHINE-ACTIONABLE": "for machine-actionable DMPs", + "UPLOAD-FILE": "Upload File" + }, "ACTIONS": { "VIEW-ALL": "Pozrieť všetko", "SHOW-MORE": "Ukázať viac", diff --git a/dmp-frontend/src/assets/i18n/tr.json b/dmp-frontend/src/assets/i18n/tr.json index 7510953ff..ed859e7b8 100644 --- a/dmp-frontend/src/assets/i18n/tr.json +++ b/dmp-frontend/src/assets/i18n/tr.json @@ -76,6 +76,15 @@ "CLOSE": "Kapat" } }, + "START-NEW-DMP-DIALOG": { + "IMPORT": "Import", + "FUNCTION-SUPPORTS": "function supports", + "JSON-FILES": ".json files", + "PRODUCED": "produced", + "RDA-SPECIFICATIONS": "according to RDA specifications", + "MACHINE-ACTIONABLE": "for machine-actionable DMPs", + "UPLOAD-FILE": "Upload File" + }, "ACTIONS": { "VIEW-ALL": "Tümüne Gör", "SHOW-MORE": "Daha fazla göster", From 2a5e2adf48e0356d174ffc9c688e908b5091ab2c Mon Sep 17 00:00:00 2001 From: apapachristou Date: Mon, 28 Sep 2020 17:40:17 +0300 Subject: [PATCH 2/2] adds ngx-dropzone --- dmp-frontend/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/dmp-frontend/package.json b/dmp-frontend/package.json index 32d4efe14..a12f8bb5f 100644 --- a/dmp-frontend/package.json +++ b/dmp-frontend/package.json @@ -33,6 +33,7 @@ "ng-dialog-animation": "^9.0.3", "ngx-cookie-service": "^2.2.0", "ngx-cookieconsent": "^2.2.3", + "ngx-dropzone": "^2.2.2", "ngx-guided-tour": "^1.1.10", "rxjs": "^6.3.2", "tinymce": "^5.4.2",