DMP Profile listing. Restyle import dialog

dmp-frontend/src/app/ui/admin/dmp-profile/dmp-profile.module.ts

@@ -9,6 +9,7 @@ import { DmpProfileExternalAutocompleteFieldEditorComponent } from './editor/ext
 import { DialodConfirmationUploadDmpProfiles } from './listing/criteria/dialog-confirmation-upload-profile/dialog-confirmation-upload-profiles.component';
 import { DmpProfileCriteriaComponent } from './listing/criteria/dmp-profile-criteria.component';
 import { DmpProfileListingComponent } from './listing/dmp-profile-listing.component';
+import { NgxDropzoneModule } from "ngx-dropzone";
 
 @NgModule({
 	imports: [
@@ -16,7 +17,8 @@ import { DmpProfileListingComponent } from './listing/dmp-profile-listing.compon
 		CommonFormsModule,
 		UrlListingModule,
 		ConfirmationDialogModule,
-		DmpProfileRoutingModule
+		DmpProfileRoutingModule,
+		NgxDropzoneModule
 	],
 	declarations: [
 		DmpProfileEditorComponent,

dmp-frontend/src/app/ui/admin/dmp-profile/editor/dmp-profile-editor.component.html

@@ -13,7 +13,7 @@
 				</button>
 			</div>
 			<div class="col-auto" *ngIf="formGroup.get('status').value==1">
-				<button class="finalize-btn" (click)="downloadXML()"
+				<button mat-button class="finalize-btn" (click)="downloadXML()"
 				 type="button">{{'DMP-PROFILE-EDITOR.ACTIONS.DOWNLOAD-XML' | translate }}</button>
 			</div>
 			<div *ngIf="formGroup.get('status').value!=1" class="col-auto">

dmp-frontend/src/app/ui/admin/dmp-profile/listing/criteria/dialog-confirmation-upload-profile/dialog-confirmation-upload-profiles.component.html

@@ -4,10 +4,26 @@
 			<h4>{{ data.message }}</h4>
 		</div>
 		<div class="col-auto ml-auto">
-			<input class="hidden" type="file" #imgFileInput (change)="selectXML($event)" accept="text/xml" />
+			<mat-icon class="close-btn" (click)="cancel()">close</mat-icon>
-			<button class="col-auto attach-file" (click)="imgFileInput.click()" type="button">
+		</div>
-				<mat-icon color="{{btnColore}}">attach_file</mat-icon>
+	</div>
+	<div class="row">
+		<div class="col-12">
+			<ngx-dropzone class="drop-file" (change)="selectXML($event)" [accept]="'text/xml'" [multiple]="false">
+				<ngx-dropzone-preview class="file-preview" [removable]="true" *ngIf="hasProfile()" (removed)="onRemove()">
+					<ngx-dropzone-label class="file-label">{{ selectedFileName }}</ngx-dropzone-label>
+				</ngx-dropzone-preview>
+			</ngx-dropzone>
+		</div>
+	</div>
+	<div class="row">
+		<div class="col-12 d-flex justify-content-center attach-btn">
+			<button mat-button type="button" class="col-auto attach-file" (click)="imgFileInput.click()">
+				<mat-icon class="mr-2">input</mat-icon>
+				<span *ngIf="!hasProfile()">{{'GENERAL.START-NEW-DMP-DIALOG.UPLOAD-FILE' | translate}}</span>
+				<span *ngIf="hasProfile()">{{'GENERAL.START-NEW-DMP-DIALOG.REPLACE-FILE' | translate}}</span>
 			</button>
+			<input class="hidden" type="file" #imgFileInput (change)="selectXML($event)" accept="text/xml" />
 		</div>
 	</div>
 	<div class="row">
@@ -15,11 +31,11 @@
 			<input matInput placeholder="{{'DMP-PROFILE-LISTING.UPLOAD.UPLOAD-XML-NAME'| translate}}" name="datasetProfileName" [(ngModel)]="data.name">
 		</mat-form-field>
 		<div class="col-auto">
-			<button mat-raised-button type="button" (click)="cancel()">{{ data.cancelButton }}</button>
+			<button mat-button type="button" class="cancel-btn" (click)="cancel()">{{ data.cancelButton }}</button>
 		</div>
 		<div class="col"></div>
 		<div class="col-auto">
-			<button mat-raised-button color="primary" type="button" (click)="confirm()" [disabled]="!hasProfile()">{{ data.confirmButton }}</button>
+			<button mat-button color="primary" class="next-btn" type="button" (click)="confirm()" [disabled]="!hasProfile()">{{ data.confirmButton }}</button>
 		</div>
 	</div>
 </div>

dmp-frontend/src/app/ui/admin/dmp-profile/listing/criteria/dialog-confirmation-upload-profile/dialog-confirmation-upload-profiles.component.scss

@@ -1,3 +1,102 @@
 .hidden {
     display: none;
+}
+
+
+.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;
+}
+
+.next-btn[disabled] {
+	width: 100px;
+	height: 43px;
+	background: #ffffff 0% 0% no-repeat padding-box;
+	border: 1px solid #b5b5b5;
+	border-radius: 30px;
+	opacity: 1;
+}
+
+.next-btn:not([disabled]):hover {
+	background-color: #129d99;
+	color: #ffffff;
+}
+
+//ngx dropzone
+.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;
+
+	background-color: #e0e0e0 !important;
+	background-image: none !important;
+	color: rgba(0, 0, 0, 0.87) !important;
+	font-weight: 500 !important;
+	border-radius: 24px !important;
+	line-height: 1.25 !important;
+}
+
+.file-label {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	font-size: 14px !important;
+}
+
+::ng-deep ngx-dropzone-remove-badge {
+	opacity: 1 !important;
+	margin-left: .5rem !important;
+	position: initial !important;
+}
+
+
+//attach file
+
+.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;
+}
+
+.close-btn:hover{
+    cursor: pointer;
 }

dmp-frontend/src/app/ui/admin/dmp-profile/listing/criteria/dialog-confirmation-upload-profile/dialog-confirmation-upload-profiles.component.ts

@@ -10,9 +10,9 @@ import { Inject, Component } from '@angular/core';
 export class DialodConfirmationUploadDmpProfiles {
 
 	sizeError = false;
-	btnColore:String="primary";
 	selectFile =false;
 	maxFileSize: number = 1048576;
+	selectedFileName: string;
 
 	constructor(
 		public dialogRef: MatDialogRef<DialodConfirmationUploadDmpProfiles>,
@@ -21,16 +21,20 @@ export class DialodConfirmationUploadDmpProfiles {
 
 
 	selectXML(event) {
-		const file: FileList = event.target.files;
+		let file: FileList = null;
+		if(event.target && event.target.files){
+			file = event.target.files;
+		}else if(event.addedFiles && event.addedFiles.length){
+			file = event.addedFiles;
+		}
+		if(!file) return;//no select closed with cancel . no file selected
 		const size: number = file[0].size;  // Get file size.
 		this.sizeError = size > this.maxFileSize;  // Checks if file size is valid.
 		const formdata: FormData = new FormData();
 		if (!this.sizeError) {
 			this.data.file = file;
 			this.selectFile=true;
-			this.btnColore="primary";
+			this.selectedFileName = file[0].name;
-		}else{
-			this.btnColore="warn";
 		}
 		this.data.name = file[0].name;
 	}
@@ -49,5 +53,10 @@ export class DialodConfirmationUploadDmpProfiles {
 	hasProfile():boolean{
 		return (this.selectFile && !this.sizeError);
 	}
-
+	//remove selected file
+	onRemove(){
+		this.data.name="";
+		this.selectFile = false;
+		this.selectedFileName = "";
+	}
 }

dmp-frontend/src/app/ui/admin/dmp-profile/listing/dmp-profile-listing.component.scss

@@ -66,12 +66,12 @@
   font-size: .8em;
 }
 
-.status-chip-inactive{
+.status-chip-finalized{
-  color: #ff3d33;
+  color: #568b5a;
-  background: #ffd5d3 0% 0% no-repeat padding-box;
+  background: #9dd1a1 0% 0% no-repeat padding-box;
 }
 
-.status-chip-active{
+.status-chip-draft{
   color: #00c4ff;
   background: #d3f5ff 0% 0% no-repeat padding-box;
 }

dmp-frontend/src/app/ui/admin/dmp-profile/listing/dmp-profile-listing.component.ts

@@ -7,15 +7,16 @@ import { MatPaginator, PageEvent } from '@angular/material/paginator';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatSort } from '@angular/material/sort';
 import { ActivatedRoute, Params, Router } from '@angular/router';
-import { DmpStatus } from '@app/core/common/enum/dmp-status';
 import { DataTableRequest } from '@app/core/model/data-table/data-table-request';
 import { DmpProfileListing } from '@app/core/model/dmp-profile/dmp-profile-listing';
 import { DmpProfileCriteria } from '@app/core/query/dmp/dmp-profile-criteria';
 import { DmpProfileService } from '@app/core/services/dmp/dmp-profile.service';
 import { MatomoService } from '@app/core/services/matomo/matomo-service';
+import { UiNotificationService } from '@app/core/services/notification/ui-notification-service';
 import { DmpProfileCriteriaComponent } from '@app/ui/admin/dmp-profile/listing/criteria/dmp-profile-criteria.component';
 import { BreadcrumbItem } from '@app/ui/misc/breadcrumb/definition/breadcrumb-item';
 import { BaseComponent } from '@common/base/base.component';
+import { SnackBarNotificationLevel } from '@common/modules/notification/ui-notification-service';
 import { TranslateService } from '@ngx-translate/core';
 import { merge as observableMerge, Observable, of as observableOf } from 'rxjs';
 import { map, startWith, switchMap, takeUntil } from 'rxjs/operators';
@@ -41,8 +42,8 @@ export class DmpProfileListingComponent extends BaseComponent implements OnInit
 	breadCrumbs: Observable<BreadcrumbItem[]>;
 
 	statuses = [
-		{ value: '0', viewValue: 'DMP-PROFILE-LISTING.STATUS.ACTIVE' },// active
+		{ value: '0', viewValue: 'DMP-PROFILE-LISTING.STATUS.DRAFT' },// active
-		{ value: '1', viewValue: 'DMP-PROFILE-LISTING.STATUS.INACTIVE' }// inactive
+		{ value: '1', viewValue: 'DMP-PROFILE-LISTING.STATUS.FINALIZED' }// inactive
 	];
 
 	constructor(
@@ -54,6 +55,7 @@ export class DmpProfileListingComponent extends BaseComponent implements OnInit
 		private httpClient: HttpClient,
 		private matomoService: MatomoService,
 		private dialog: MatDialog,
+		private uiNotificationService: UiNotificationService,
 	) {
 		super();
 	}
@@ -118,17 +120,23 @@ export class DmpProfileListingComponent extends BaseComponent implements OnInit
 			if (data && data.sucsess && data.name != null && data.file != null) {
 				this.dmpProfileService.uploadFile(data.file, data.name)
 					.pipe(takeUntil(this._destroyed))
-					.subscribe();
+					.subscribe(_=>{
+						this.uiNotificationService.snackBarNotification(this.languageService.instant('DMP-PROFILE-LISTING.MESSAGES.TEMPLATE-UPLOAD-SUCCESS'), SnackBarNotificationLevel.Success);
+						this.refresh();
+					},
+					error=>{
+						this.uiNotificationService.snackBarNotification(error.message, SnackBarNotificationLevel.Error);
+					});
 			}
 		});
 	}
 	getStatusClass(status: number):string{
 		
-		if(status === 1){//inactive
+		if(status === 1){//finalized
-			return 'status-chip-inactive'
+			return 'status-chip-finalized'
 		}
 		if(status === 0){
-			return 'status-chip-active';
+			return 'status-chip-draft';
 		}
 		return '';
 	}

dmp-frontend/src/assets/i18n/de.json

@@ -1093,8 +1093,11 @@
 			"UPLOAD-XML-FILE-CANCEL": "Abbrechen"
 		},
 		"STATUS":{
-			"ACTIVE": "Active",
+			"DRAFT": "Draft",
-			"INACTIVE": "Inactive"
+			"FINALIZED": "Finalized"
+		},
+		"MESSAGES":{
+			"TEMPLATE-UPLOAD-SUCCESS":"Template successfully uploaded"
 		}
 	},
 	"DYNAMIC-FORM": {

dmp-frontend/src/assets/i18n/en.json

@@ -1093,8 +1093,11 @@
 			"UPLOAD-XML-FILE-CANCEL": "Cancel"
 		},
 		"STATUS":{
-			"ACTIVE": "Active",
+			"DRAFT": "Draft",
-			"INACTIVE": "Inactive"
+			"FINALIZED": "Finalized"
+		},
+		"MESSAGES":{
+			"TEMPLATE-UPLOAD-SUCCESS":"Template successfully uploaded"
 		}
 	},
 	"DYNAMIC-FORM": {

dmp-frontend/src/assets/i18n/es.json

@@ -1093,8 +1093,11 @@
 			"UPLOAD-XML-FILE-CANCEL": "Cancelar"
 		},
 		"STATUS":{
-			"ACTIVE": "Active",
+			"DRAFT": "Draft",
-			"INACTIVE": "Inactive"
+			"FINALIZED": "Finalized"
+		},
+		"MESSAGES":{
+			"TEMPLATE-UPLOAD-SUCCESS":"Template successfully uploaded"
 		}
 	},
 	"DYNAMIC-FORM": {

dmp-frontend/src/assets/i18n/gr.json

@@ -1093,8 +1093,11 @@
 			"UPLOAD-XML-FILE-CANCEL": "Ακύρωση"
 		},
 		"STATUS":{
-			"ACTIVE": "Active",
+			"DRAFT": "Draft",
-			"INACTIVE": "Inactive"
+			"FINALIZED": "Finalized"
+		},
+		"MESSAGES":{
+			"TEMPLATE-UPLOAD-SUCCESS":"Template successfully uploaded"
 		}
 	},
 	"DYNAMIC-FORM": {

dmp-frontend/src/assets/i18n/pt.json

@@ -1093,8 +1093,11 @@
 			"UPLOAD-XML-FILE-CANCEL": "Cancelar"
 		},
 		"STATUS":{
-			"ACTIVE": "Active",
+			"DRAFT": "Draft",
-			"INACTIVE": "Inactive"
+			"FINALIZED": "Finalized"
+		},
+		"MESSAGES":{
+			"TEMPLATE-UPLOAD-SUCCESS":"Template successfully uploaded"
 		}
 	},
 	"DYNAMIC-FORM": {

dmp-frontend/src/assets/i18n/sk.json

@@ -1093,8 +1093,11 @@
 			"UPLOAD-XML-FILE-CANCEL": "Zrušiť"
 		},
 		"STATUS":{
-			"ACTIVE": "Active",
+			"DRAFT": "Draft",
-			"INACTIVE": "Inactive"
+			"FINALIZED": "Finalized"
+		},
+		"MESSAGES":{
+			"TEMPLATE-UPLOAD-SUCCESS":"Template successfully uploaded"
 		}
 	},
 	"DYNAMIC-FORM": {

dmp-frontend/src/assets/i18n/sr.json

@@ -1093,8 +1093,11 @@
 			"UPLOAD-XML-FILE-CANCEL": "Otkažite"
 		},
 		"STATUS":{
-			"ACTIVE": "Active",
+			"DRAFT": "Draft",
-			"INACTIVE": "Inactive"
+			"FINALIZED": "Finalized"
+		},
+		"MESSAGES":{
+			"TEMPLATE-UPLOAD-SUCCESS":"Template successfully uploaded"
 		}
 	},
 	"DYNAMIC-FORM": {

dmp-frontend/src/assets/i18n/tr.json

@@ -1093,8 +1093,11 @@
 			"UPLOAD-XML-FILE-CANCEL": "İptal"
 		},
 		"STATUS":{
-			"ACTIVE": "Active",
+			"DRAFT": "Draft",
-			"INACTIVE": "Inactive"
+			"FINALIZED": "Finalized"
+		},
+		"MESSAGES":{
+			"TEMPLATE-UPLOAD-SUCCESS":"Template successfully uploaded"
 		}
 	},
 	"DYNAMIC-FORM": {