MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

Restyles import DMP pop up dialog

This commit is contained in:
apapachristou 2020-09-28 15:44:32 +03:00
parent 9c3b87535e
commit 24bbe8c2ab
14 changed files with 261 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
dmp-frontend/src/app/ui/dmp/dmp.module.ts
View File

@ -44,6 +44,7 @@ import { DatasetEditorDetailsComponent } from './editor/dataset-editor-details/d
import { DatasetDescriptionFormModule } from '../misc/dataset-description-form/dataset-description-form.module'; import { DatasetDescriptionFormModule } from '../misc/dataset-description-form/dataset-description-form.module';
import { LicenseInfoComponent } from './editor/license-info/license-info.component'; import { LicenseInfoComponent } from './editor/license-info/license-info.component';
import { StartNewDatasetDialogComponent } from './start-new-dataset-dialogue/start-new-dataset-dialog.component'; import { StartNewDatasetDialogComponent } from './start-new-dataset-dialogue/start-new-dataset-dialog.component';
import { NgxDropzoneModule } from 'ngx-dropzone';
@NgModule({ @NgModule({
imports: [ imports: [
@ -59,7 +60,8 @@ import { StartNewDatasetDialogComponent } from './start-new-dataset-dialogue/sta
FormValidationErrorsDialogModule, FormValidationErrorsDialogModule,
MultipleChoiceDialogModule, MultipleChoiceDialogModule,
DatasetEditorDetailsModule, DatasetEditorDetailsModule,
DatasetDescriptionFormModule DatasetDescriptionFormModule,
NgxDropzoneModule
], ],
declarations: [ declarations: [
DmpListingComponent, DmpListingComponent,

2
dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.ts
View File

@ -336,7 +336,7 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread
}); });
dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => { dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => {
if (result && result.success) { 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)) .pipe(takeUntil(this._destroyed))
.subscribe((complete) => this.onCallbackImportComplete(), .subscribe((complete) => this.onCallbackImportComplete(),
(error) => this.onCallbackImportFail(error.error)); (error) => this.onCallbackImportFail(error.error));

51
dmp-frontend/src/app/ui/dmp/listing/upload-dialogue/dmp-upload-dialogue.component.html
View File

@ -3,28 +3,45 @@
<div class="confirmation-message col align-self-center"> <div class="confirmation-message col align-self-center">
<h4>{{'DMP-UPLOAD.TITLE' | translate}}</h4> <h4>{{'DMP-UPLOAD.TITLE' | translate}}</h4>
</div> </div>
<div class="col-auto"> <div class="col-auto close-btn justify-content-end" (click)="close()">
<button class="col-auto attach-file" (click)="fileInput.click()" type="button"> <mat-icon>close</mat-icon>
<mat-icon color="primary">attach_file</mat-icon> </div>
</div>
<div class="row">
<div class="upload-form col-12">
<mat-form-field>
<input class="uploadInput" [(ngModel)]="dmpTitle" matInput placeholder="{{'DMP-UPLOAD.PLACEHOLDER' | translate}}" name="uploadFileInput">
</mat-form-field>
</div>
<div class="col-12">
<ngx-dropzone class="drop-file" (change)="selectFile($event)" [accept]="'text/xml, application/json'" [multiple]="false">
<ngx-dropzone-preview class="file-preview" *ngFor="let f of files" [removable]="true" (removed)="onRemove(f)">
<ngx-dropzone-label class="file-label">{{ f.name }}</ngx-dropzone-label>
</ngx-dropzone-preview>
</ngx-dropzone>
</div>
<div class="col-12 d-flex justify-content-center attach-btn">
<button mat-button type="button" class="col-auto attach-file" (click)="fileInput.click()">
<mat-icon class="mr-2">input</mat-icon>
{{'GENERAL.START-NEW-DMP-DIALOG.UPLOAD-FILE' | translate}}
</button> </button>
<input class="hidden" #fileInput type="file" (change)="uploadFile($event)" accept="text/xml, application/json"> <form>
<input class="hidden" #fileInput type="file" onClick="this.form.reset()" (change)="uploadFile($event)" accept="text/xml, application/json">
</form>
</div>
<div class="upload-form col-sm-12 col-md-12">
<mat-form-field>
<app-multiple-auto-complete required='true' [(ngModel)]="dmpProfiles" placeholder="{{'DMP-EDITOR.FIELDS.DATASET-TEMPLATES' | translate}}" [configuration]="profilesAutoCompleteConfiguration">
</app-multiple-auto-complete>
</mat-form-field>
</div> </div>
</div> </div>
<div class="row"> <div class="row mt-3">
<mat-form-field class="col-12"> <div class="col-auto ml-auto">
<input class="uploadInput" [(ngModel)]="dmpTitle" matInput placeholder="{{'DMP-UPLOAD.PLACEHOLDER' | translate}}" name="uploadFileInput"> <button mat-button type="button" class="cancel-btn" (click)="confirm()" [disabled]="data.fileList.length === 0">{{'DMP-UPLOAD.ACTIONS.IMPORT' | translate}}</button>
</mat-form-field>
<mat-form-field class="col-sm-12 col-md-12">
<app-multiple-auto-complete required='true' [(ngModel)]="dmpProfiles" placeholder="{{'DMP-EDITOR.FIELDS.DATASET-TEMPLATES' | translate}}" [configuration]="profilesAutoCompleteConfiguration">
</app-multiple-auto-complete>
</mat-form-field>
</div>
<div class="row">
<div class="col-auto">
<button mat-raised-button color="primary" type="button" (click)="confirm()" [disabled]="data.fileList.length === 0">{{'DMP-UPLOAD.ACTIONS.IMPORT' | translate}}</button>
</div> </div>
<div class="col-auto"> <div class="col-auto">
<button mat-raised-button type="button" (click)="cancel()">{{'DMP-UPLOAD.ACTIONS.CANCEL' | translate}}</button> <button mat-button type="button" class="next-btn" (click)="cancel()">{{'DMP-UPLOAD.ACTIONS.CANCEL' | translate}}</button>
</div> </div>
</div> </div>
</div> </div>

82
dmp-frontend/src/app/ui/dmp/listing/upload-dialogue/dmp-upload-dialogue.component.scss
View File

@ -13,9 +13,85 @@
.col-md-6 { .col-md-6 {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
margin: -4px; 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;
}

32
dmp-frontend/src/app/ui/dmp/listing/upload-dialogue/dmp-upload-dialogue.component.ts
View File

@ -16,6 +16,7 @@ import { DatasetProfileCriteria } from '@app/core/query/dataset-profile/dataset-
export class DmpUploadDialogue { export class DmpUploadDialogue {
dmpTitle: string; dmpTitle: string;
dmpProfiles: any[] = []; dmpProfiles: any[] = [];
files: File[] = [];
profilesAutoCompleteConfiguration: MultipleAutoCompleteConfiguration = { profilesAutoCompleteConfiguration: MultipleAutoCompleteConfiguration = {
filterFn: this.filterProfiles.bind(this), filterFn: this.filterProfiles.bind(this),
@ -30,13 +31,17 @@ export class DmpUploadDialogue {
public dialogRef: MatDialogRef<DmpUploadDialogue>, public dialogRef: MatDialogRef<DmpUploadDialogue>,
private _service: DmpService, private _service: DmpService,
@Inject(MAT_DIALOG_DATA) public data: any, @Inject(MAT_DIALOG_DATA) public data: any,
) {} ) { }
cancel() { cancel() {
this.data.success = false; this.data.success = false;
this.dialogRef.close(this.data); this.dialogRef.close(this.data);
} }
close() {
this.dialogRef.close(false);
}
confirm() { confirm() {
this.data.success = true; this.data.success = true;
this.data.dmpTitle = this.dmpTitle; this.data.dmpTitle = this.dmpTitle;
@ -50,11 +55,32 @@ export class DmpUploadDialogue {
if (this.data.fileList.length > 0) { if (this.data.fileList.length > 0) {
this.dmpTitle = fileList.item(0).name; 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<DatasetProfileModel[]> { filterProfiles(value: string): Observable<DatasetProfileModel[]> {
const request = new DataTableRequest<DatasetProfileCriteria>(null, null, { fields: ['+label'] });
const request = new DataTableRequest<DatasetProfileCriteria>(null, null, {fields: ['+label']});
const criteria = new DatasetProfileCriteria(); const criteria = new DatasetProfileCriteria();
criteria.like = value; criteria.like = value;
request.criteria = criteria; request.criteria = criteria;

48
dmp-frontend/src/app/ui/dmp/start-new-dmp-dialogue/start-new-dmp-dialog.component.html
View File

@ -1,22 +1,32 @@
<div class="form-container"> <div class="form-container">
<div class="row d-flex justify-content-between m-0" > <div class="row d-flex justify-content-between m-0">
<a class="logo"><img src="../../../assets/splash/assets/img/argos-logo.svg"></a> <a class="logo"><img src="../../../assets/splash/assets/img/argos-logo.svg"></a>
<mat-icon class="close-icon" (click)="close()">close</mat-icon> <mat-icon class="close-icon" (click)="close()">close</mat-icon>
</div> </div>
<div class="row content"> <div class="row content">
<h1 mat-dialog-title class="title">{{'NAV-BAR.START-NEW-DMP' | translate}}</h1> <h1 mat-dialog-title class="title">{{'NAV-BAR.START-NEW-DMP' | translate}}</h1>
<p class="text">{{'NAV-BAR.START-NEW-DMP-TXT' | translate}}</p> <p class="text">{{'NAV-BAR.START-NEW-DMP-TXT' | translate}}</p>
<div class="actions"> <div class="actions">
<button type="button" class="normal-btn upload-btn d-flex flex-row align-items-center" (click)="uploadFile($event)"> <button type="button" class="normal-btn upload-btn d-flex flex-row align-items-center"
<mat-icon class="pr-2">file_upload</mat-icon> (click)="uploadFile($event)">
{{ 'NAV-BAR.IMPORT-FROM-FILE' | translate }} <mat-icon class="pr-2">file_upload</mat-icon>
</button> {{ 'NAV-BAR.IMPORT-FROM-FILE' | translate }}
<p class="m-0">{{ 'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.FIRST-STEP.OR' | translate }}</p> </button>
<button type="button" class="normal-btn font-weight-bold d-flex flex-row align-items-center" (click)="startWizard()"> <p class="m-0">{{ 'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.FIRST-STEP.OR' | translate }}</p>
<mat-icon>chevron_right</mat-icon> <button type="button" class="normal-btn font-weight-bold d-flex flex-row align-items-center"
{{ 'NAV-BAR.START-WIZARD' | translate }} (click)="startWizard()">
</button> <mat-icon>chevron_right</mat-icon>
</div> {{ 'NAV-BAR.START-WIZARD' | translate }}
</button>
</div> </div>
</div>
<div class="row pt-4">
<mat-icon class="col-auto material-icons-outlined warn">info</mat-icon>
<span class="col">
<b>{{'GENERAL.START-NEW-DMP-DIALOG.IMPORT' | translate }}</b> {{'GENERAL.START-NEW-DMP-DIALOG.FUNCTION-SUPPORTS' | translate }}
<b>{{'GENERAL.START-NEW-DMP-DIALOG.JSON-FILES' | translate }}</b> {{'GENERAL.START-NEW-DMP-DIALOG.PRODUCED' | translate }}
<b>{{'GENERAL.START-NEW-DMP-DIALOG.RDA-SPECIFICATIONS' | translate }}</b>
{{'GENERAL.START-NEW-DMP-DIALOG.MACHINE-ACTIONABLE' | translate }}
</span>
</div>
</div> </div>

55
dmp-frontend/src/app/ui/dmp/start-new-dmp-dialogue/start-new-dmp-dialog.component.scss
View File

@ -1,11 +1,11 @@
::ng-deep .mat-dialog-container { ::ng-deep .mat-dialog-container {
border-radius: 8px; border-radius: 8px;
} }
.form-container { .form-container {
width: 33rem; width: 33rem;
min-height: 14rem; min-height: 14rem;
padding: 0.28rem 0.34rem 0.875rem 0.625rem; padding: 0.28rem 0.34rem 0.875rem 0.625rem;
} }
.logo { .logo {
@ -13,42 +13,47 @@
} }
.close-icon { .close-icon {
cursor: pointer; cursor: pointer;
} }
.content { .content {
margin: 2.17rem 2.304rem 1.1875rem 3.065rem; margin: 2.17rem 2.304rem 1.1875rem 3.065rem;
} }
.title, .text { .title,
font-size: 1.25rem; .text {
font-weight: lighter; font-size: 1.25rem;
color: #000000; font-weight: lighter;
opacity: 0.8; color: #000000;
opacity: 0.8;
} }
.title { .title {
font-size: 2.375rem; font-size: 2.375rem;
margin-bottom: 1.1875rem; margin-bottom: 1.1875rem;
} }
.text { .text {
margin-bottom: 2.9375rem; margin-bottom: 2.9375rem;
line-height: 1.9rem; line-height: 1.9rem;
} }
.upload-btn { .upload-btn {
background-color: white; background-color: white;
color: #212121; color: #212121;
font-weight: bold; font-weight: bold;
box-shadow: 0px 3px 6px #1E202029; box-shadow: 0px 3px 6px #1e202029;
border: 2px solid #212121; border: 2px solid #212121;
} }
.actions { .actions {
width: 26.667rem; width: 26.667rem;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
}
.warn {
color: #f16868;
} }

3
dmp-frontend/src/app/ui/dmp/start-new-dmp-dialogue/start-new-dmp-dialog.component.ts
View File

@ -49,6 +49,7 @@ export class StartNewDmpDialogComponent extends BaseComponent {
uploadFile(event) { uploadFile(event) {
const dialogRef = this.dialog.open(DmpUploadDialogue, { const dialogRef = this.dialog.open(DmpUploadDialogue, {
width: '528px',
data: { data: {
fileList: FileList, fileList: FileList,
success: Boolean, success: Boolean,
@ -57,7 +58,7 @@ export class StartNewDmpDialogComponent extends BaseComponent {
}); });
dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => { dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => {
if (result && result.success) { 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)) .pipe(takeUntil(this._destroyed))
.subscribe((complete) => this.onCallbackImportComplete(), .subscribe((complete) => this.onCallbackImportComplete(),
(error) => this.onCallbackImportFail(error.error)); (error) => this.onCallbackImportFail(error.error));

9
dmp-frontend/src/assets/i18n/de.json
View File

@ -76,6 +76,15 @@
"CLOSE": "Schließen" "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": { "ACTIONS": {
"VIEW-ALL": "Alles anzeigen", "VIEW-ALL": "Alles anzeigen",
"SHOW-MORE": "Mehr anzeigen", "SHOW-MORE": "Mehr anzeigen",

9
dmp-frontend/src/assets/i18n/en.json
View File

@ -77,6 +77,15 @@
"CLOSE": "Close" "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": { "ACTIONS": {
"VIEW-ALL": "View All", "VIEW-ALL": "View All",
"SHOW-MORE": "Show more", "SHOW-MORE": "Show more",

9
dmp-frontend/src/assets/i18n/es.json
View File

@ -77,6 +77,15 @@
"CLOSE": "Cerrar" "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": { "ACTIONS": {
"VIEW-ALL": "Ver todo", "VIEW-ALL": "Ver todo",
"SHOW-MORE": "Mostrar más", "SHOW-MORE": "Mostrar más",

9
dmp-frontend/src/assets/i18n/gr.json
View File

@ -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": { "ACTIONS": {
"VIEW-ALL": "Προβολή όλων", "VIEW-ALL": "Προβολή όλων",
"SHOW-MORE": "Δείτε περισσότερα", "SHOW-MORE": "Δείτε περισσότερα",

9
dmp-frontend/src/assets/i18n/sk.json
View File

@ -74,6 +74,15 @@
"CLOSE": "Zatvoriť" "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": { "ACTIONS": {
"VIEW-ALL": "Pozrieť všetko", "VIEW-ALL": "Pozrieť všetko",
"SHOW-MORE": "Ukázať viac", "SHOW-MORE": "Ukázať viac",

9
dmp-frontend/src/assets/i18n/tr.json
View File

@ -76,6 +76,15 @@
"CLOSE": "Kapat" "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": { "ACTIONS": {
"VIEW-ALL": "Tümüne Gör", "VIEW-ALL": "Tümüne Gör",
"SHOW-MORE": "Daha fazla göster", "SHOW-MORE": "Daha fazla göster",