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

Merge branch 'ui-redesign' of https://gitlab.eudat.eu/dmp/OpenAIRE-EUDAT-DMP-service-pilot.git into ui-redesign

This commit is contained in:
George Kalampokis 2020-09-29 12:53:01 +03:00
parent b3be89fb88 2a5e2adf48
commit dfd705b1d3
15 changed files with 262 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
dmp-frontend/package.json
View File

@ -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",

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 { 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,

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 => {
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));

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">
<h4>{{'DMP-UPLOAD.TITLE' | translate}}</h4>
</div>
<div class="col-auto">
<button class="col-auto attach-file" (click)="fileInput.click()" type="button">
<mat-icon color="primary">attach_file</mat-icon>
<div class="col-auto close-btn justify-content-end" (click)="close()">
<mat-icon>close</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>
<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 class="row">
<mat-form-field class="col-12">
<input class="uploadInput" [(ngModel)]="dmpTitle" matInput placeholder="{{'DMP-UPLOAD.PLACEHOLDER' | translate}}" name="uploadFileInput">
</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 class="row mt-3">
<div class="col-auto ml-auto">
<button mat-button type="button" class="cancel-btn" (click)="confirm()" [disabled]="data.fileList.length === 0">{{'DMP-UPLOAD.ACTIONS.IMPORT' | translate}}</button>
</div>
<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>

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

@ -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;
}

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 {
dmpTitle: string;
dmpProfiles: any[] = [];
files: File[] = [];
profilesAutoCompleteConfiguration: MultipleAutoCompleteConfiguration = {
filterFn: this.filterProfiles.bind(this),
@ -30,13 +31,17 @@ export class DmpUploadDialogue {
public dialogRef: MatDialogRef<DmpUploadDialogue>,
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<DatasetProfileModel[]> {
const request = new DataTableRequest<DatasetProfileCriteria>(null, null, {fields: ['+label']});
const request = new DataTableRequest<DatasetProfileCriteria>(null, null, { fields: ['+label'] });
const criteria = new DatasetProfileCriteria();
criteria.like = value;
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="row d-flex justify-content-between m-0" >
<a class="logo"><img src="../../../assets/splash/assets/img/argos-logo.svg"></a>
<mat-icon class="close-icon" (click)="close()">close</mat-icon>
</div>
<div class="row content">
<h1 mat-dialog-title class="title">{{'NAV-BAR.START-NEW-DMP' | translate}}</h1>
<p class="text">{{'NAV-BAR.START-NEW-DMP-TXT' | translate}}</p>
<div class="actions">
<button type="button" class="normal-btn upload-btn d-flex flex-row align-items-center" (click)="uploadFile($event)">
<mat-icon class="pr-2">file_upload</mat-icon>
{{ 'NAV-BAR.IMPORT-FROM-FILE' | translate }}
</button>
<p class="m-0">{{ 'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.FIRST-STEP.OR' | translate }}</p>
<button type="button" class="normal-btn font-weight-bold d-flex flex-row align-items-center" (click)="startWizard()">
<mat-icon>chevron_right</mat-icon>
{{ 'NAV-BAR.START-WIZARD' | translate }}
</button>
</div>
<div class="row d-flex justify-content-between m-0">
<a class="logo"><img src="../../../assets/splash/assets/img/argos-logo.svg"></a>
<mat-icon class="close-icon" (click)="close()">close</mat-icon>
</div>
<div class="row content">
<h1 mat-dialog-title class="title">{{'NAV-BAR.START-NEW-DMP' | translate}}</h1>
<p class="text">{{'NAV-BAR.START-NEW-DMP-TXT' | translate}}</p>
<div class="actions">
<button type="button" class="normal-btn upload-btn d-flex flex-row align-items-center"
(click)="uploadFile($event)">
<mat-icon class="pr-2">file_upload</mat-icon>
{{ 'NAV-BAR.IMPORT-FROM-FILE' | translate }}
</button>
<p class="m-0">{{ 'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.FIRST-STEP.OR' | translate }}</p>
<button type="button" class="normal-btn font-weight-bold d-flex flex-row align-items-center"
(click)="startWizard()">
<mat-icon>chevron_right</mat-icon>
{{ 'NAV-BAR.START-WIZARD' | translate }}
</button>
</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>

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 {
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;
}

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) {
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));

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

@ -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",

9
dmp-frontend/src/assets/i18n/en.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": {
"VIEW-ALL": "View All",
"SHOW-MORE": "Show more",

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

@ -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",

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

@ -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": "Δείτε περισσότερα",

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

@ -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",

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

@ -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",