Dataset Template Admin Listing Redesign

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

@@ -23,7 +23,7 @@ import { DatasetProfileEditorRuleComponent } from '@app/ui/admin/dataset-profile
 import { DatasetProfileEditorSectionComponent } from '@app/ui/admin/dataset-profile/editor/components/section/dataset-profile-editor-section.component';
 import { DatasetProfileEditorComponent } from '@app/ui/admin/dataset-profile/editor/dataset-profile-editor.component';
 import { DatasetProfileCriteriaComponent } from '@app/ui/admin/dataset-profile/listing/criteria/dataset-profile.component';
-import { DialodConfirmationUploadDatasetProfiles } from '@app/ui/admin/dataset-profile/listing/criteria/dialog-confirmation-upload-profile/dialog-confirmation-upload-profiles.component';
+import { DialogConfirmationUploadDatasetProfiles } from '@app/ui/admin/dataset-profile/listing/criteria/dialog-confirmation-upload-profile/dialog-confirmation-upload-profiles.component';
 import { DatasetProfileListingComponent } from '@app/ui/admin/dataset-profile/listing/dataset-profile-listing.component';
 import { CommonFormsModule } from '@common/forms/common-forms.module';
 import { CommonUiModule } from '@common/ui/common-ui.module';
@@ -38,14 +38,15 @@ import { DatasetProfileEditorOrganizationsFieldComponent } from './editor/compon
 import { DatasetProfileEditorDatasetIdentifierFieldComponent } from './editor/components/field-type/dataset-identifier/dataset-profile-editor-dataset-identifier-field.component';
 import { DatasetProfileEditorCurrencyFieldComponent } from './editor/components/field-type/currency/dataset-profile-editor-currency-field.component';
 import { DatasetProfileEditorValidatorFieldComponent } from './editor/components/field-type/validator/dataset-profile-editor-validator-field.component';
-
+import { NgxDropzoneModule } from 'ngx-dropzone';
 @NgModule({
 	imports: [
 		CommonUiModule,
 		CommonFormsModule,
 		FormattingModule,
 		DatasetProfileRoutingModule,
-		ConfirmationDialogModule
+		ConfirmationDialogModule,
+		NgxDropzoneModule
 	],
 	declarations: [
 		DatasetProfileListingComponent,
@@ -66,7 +67,7 @@ import { DatasetProfileEditorValidatorFieldComponent } from './editor/components
 		DatasetProfileEditorDatePickerFieldComponent,
 		DatasetProfileEditorWordListFieldComponent,
 		DatasetProfileEditorDefaultValueComponent,
-		DialodConfirmationUploadDatasetProfiles,
+		DialogConfirmationUploadDatasetProfiles,
 		DatasetProfileEditorInternalDmpEntitiesFieldComponent,
 		DatasetProfileEditorResearchersAutoCompleteFieldComponent,
 		DatasetProfileEditorDatasetsAutoCompleteFieldComponent,
@@ -84,7 +85,7 @@ import { DatasetProfileEditorValidatorFieldComponent } from './editor/components
 		DatasetProfileEditorValidatorFieldComponent
 	],
 	entryComponents: [
-		DialodConfirmationUploadDatasetProfiles
+		DialogConfirmationUploadDatasetProfiles
 	]
 })
 export class DatasetProfileModule { }

dmp-frontend/src/app/ui/admin/dataset-profile/listing/criteria/dataset-profile.component.html

@@ -1,23 +1,23 @@
-<div class="dmp-criteria">
+<div class="row align-items-end">
-	<mat-card class="mat-card">
+	<div class="col-auto">
-		<div class="row">
+		<div class="d-lg-inline-block pr-2 text-muted">
-			<mat-form-field class="col-md-6">
+			<span>{{'CRITERIA.USERS.SHOW' | translate}}:</span>
-				<input matInput placeholder=" {{'CRITERIA.DATASET-PROFILE.LIKE'| translate}}" name="datasetProfileLike"
+		</div>
-					[(ngModel)]="criteria.like" (ngModelChange)="controlModified()">
+
-			</mat-form-field>
+		<mat-form-field class="status-form">
-			<mat-form-field class="col-md-6">
 			<mat-select [(ngModel)]="criteria.status" (ngModelChange)="controlModified()" placeholder=" {{'CRITERIA.DATASET-PROFILE.STATUS' | translate}}">
 				<mat-option [value]="null">{{'DATASET-PROFILE-STATUS.NONE' | translate}}</mat-option>
 				<mat-option [value]="0">{{'DATASET-PROFILE-STATUS.DRAFT' | translate}}</mat-option>
 				<mat-option [value]="1">{{'DATASET-PROFILE-STATUS.FINALIZED' | translate}}</mat-option>
 			</mat-select>
 		</mat-form-field>
-			<div class="col"></div>
+
-			<div class="col-auto">
+	</div>
-				<!--  imgFileInput.click() && -->
+	<div class="col-auto ml-lg-auto">
-				<button mat-raised-button class="col-auto" color="primary" (click)="openDialog()"
+		<mat-form-field class="search-form">
-					type="button">{{ 'DATASET-WIZARD.UPLOAD.UPLOAD-XML' | translate }}</button>
+			<input matInput placeholder=" {{'CRITERIA.DATASET-PROFILE.LIKE'| translate}}" name="datasetProfileLike"
+				[(ngModel)]="criteria.like" (ngModelChange)="controlModified()">
+				<mat-icon matPrefix>search</mat-icon>
+		</mat-form-field>
 	</div>
 </div>
-	</mat-card>
-</div>

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

@@ -0,0 +1,17 @@
+.mat-form-field{
+    display: inline-block !important;
+}
+
+::ng-deep .status-form .mat-form-field-wrapper {
+	background-color: white !important;
+	padding-bottom: 0 !important;
+}
+
+::ng-deep .search-form .mat-form-field-wrapper {
+	background-color: white !important;
+	padding-bottom: 0 !important;
+}
+
+::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
+	padding: 0.3rem 0rem 0.6rem 0rem !important;
+}

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

@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { DatasetProfileCriteria } from '@app/core/query/dataset-profile/dataset-profile-criteria';
 import { DatasetProfileService } from '@app/core/services/dataset-profile/dataset-profile.service';
-import { DialodConfirmationUploadDatasetProfiles } from '@app/ui/admin/dataset-profile/listing/criteria/dialog-confirmation-upload-profile/dialog-confirmation-upload-profiles.component';
+import { DialogConfirmationUploadDatasetProfiles } from '@app/ui/admin/dataset-profile/listing/criteria/dialog-confirmation-upload-profile/dialog-confirmation-upload-profiles.component';
 import { BaseCriteriaComponent } from '@app/ui/misc/criteria/base-criteria.component';
 import { ValidationErrorModel } from '@common/forms/validation/error-model/validation-error-model';
 import { TranslateService } from '@ngx-translate/core';
@@ -47,26 +47,4 @@ export class DatasetProfileCriteriaComponent extends BaseCriteriaComponent imple
 		}
 	}
 
-	openDialog(): void {
-		const dialogRef = this.dialog.open(DialodConfirmationUploadDatasetProfiles, {
-			width: '500px',
-			restoreFocus: false,
-			data: {
-				message: this.language.instant('DATASET-WIZARD.UPLOAD.UPLOAD-XML-FILE-TITLE'),
-				confirmButton: this.language.instant('DATASET-WIZARD.UPLOAD.UPLOAD-XML'),
-				cancelButton: this.language.instant('DATASET-WIZARD.UPLOAD.UPLOAD-XML-FILE-CANCEL'),
-				name: "",
-				file: FileList,
-				sucsess: false
-			}
-		});
-		dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(data => {
-			if (data && data.sucsess && data.name != null && data.file != null) {
-				this.datasetService.uploadFile(data.file, data.name)
-					.pipe(takeUntil(this._destroyed))
-					.subscribe();
-			}
-		});
-	}
-
 }

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

@@ -4,22 +4,41 @@
 			<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">
 		<mat-form-field class="col-12">
 			<input matInput placeholder="{{'DATASET-WIZARD.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/dataset-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/dataset-profile/listing/criteria/dialog-confirmation-upload-profile/dialog-confirmation-upload-profiles.component.ts

@@ -7,30 +7,29 @@ import { Inject, Component } from '@angular/core';
 	templateUrl: './dialog-confirmation-upload-profiles.component.html',
 	styleUrls: ['./dialog-confirmation-upload-profiles.component.scss']
 })
-export class DialodConfirmationUploadDatasetProfiles {
+export class DialogConfirmationUploadDatasetProfiles {
 
 	sizeError = false;
-	btnColore:String="primary";
+	selectedFileName= "";
 	selectFile =false;
 	maxFileSize: number = 1048576;
 
 	constructor(
-		public dialogRef: MatDialogRef<DialodConfirmationUploadDatasetProfiles>,
+		public dialogRef: MatDialogRef<DialogConfirmationUploadDatasetProfiles>,
 		@Inject(MAT_DIALOG_DATA) public data: any
 	) { }
 
 
 	selectXML(event) {
 		const file: FileList = event.target.files;
+		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;
 	}
@@ -41,7 +40,6 @@ export class DialodConfirmationUploadDatasetProfiles {
 	}
 
 	confirm() {
-		this.data.name = this.data.name;
 		this.data.sucsess = true;
 		this.dialogRef.close(this.data);
 	}
@@ -50,4 +48,10 @@ export class DialodConfirmationUploadDatasetProfiles {
 		return (this.selectFile && !this.sizeError);
 	}
 
+	//remove selected file
+	onRemove(){
+		this.data.name="";
+		this.selectFile = false;
+		this.selectedFileName = "";
+	}
 }

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

@@ -1,9 +1,26 @@
 <div class="main-content dataset-profile-listing">
 	<div class="container-fluid">
-		<h3>{{titlePrefix}} {{'DATASET-PROFILE-LISTING.TITLE' | translate}}</h3>
 
+		<div class="row">
+			<div class="col-auto">
+				<h3>{{titlePrefix}} {{'DATASET-PROFILE-LISTING.TITLE' | translate}}</h3>
+			</div>
+			<div class="col-12 col-lg d-flex justify-content-lg-end">
+				<div class="align-self-center">
+					<button mat-raised-button class="import-btn" (click)="openDialog()">{{ 'DATASET-WIZARD.UPLOAD.UPLOAD-XML' | translate }}</button>
+					<button mat-raised-button class="create-btn ml-md-3" [routerLink]="['./new']">Create Dataset Template</button>
+				</div>
+			</div>
+		</div>
+		<div class="row">
+			<div class="col-12 mt-5">
 				<app-dataset-profile-criteria-component></app-dataset-profile-criteria-component>
-		<mat-card class="row mat-card">
+			</div>
+		</div>
+
+		<div class="mat-elevation-z6">
+
+		<!-- <mat-card class="row mat-card"> -->
 			<mat-table [dataSource]="dataSource" matSort (matSortChange)="refresh()">
 
 				<!-- Column Definition: Name -->
@@ -31,12 +48,12 @@
 				<ng-container cdkColumnDef="status">
 					<mat-header-cell *matHeaderCellDef mat-sort-header="status">{{'DATASET-PROFILE-LISTING.COLUMNS.STATUS' |
 						translate}}</mat-header-cell>
-					<mat-cell *matCellDef="let row">{{ (row.status | parseStatus) | translate}}</mat-cell>
+					<mat-cell *matCellDef="let row"> <div [ngClass]="['status-chip',getStatusClass(row.status)]">{{ (row.status | parseStatus) | translate}}</div></mat-cell>
 				</ng-container>
 
 				<!-- Column Definition: Submission Time -->
 				<ng-container cdkColumnDef="actions">
-					<mat-header-cell *matHeaderCellDef>{{'DATASET-PROFILE-LISTING.COLUMNS.ACTIONS' | translate}}
+					<mat-header-cell *matHeaderCellDef><!-- {{'DATASET-PROFILE-LISTING.COLUMNS.ACTIONS' | translate}} -->
 					</mat-header-cell>
 					<mat-cell *matCellDef="let row" (click)="$event.stopPropagation()">
 						<mat-menu #actionsMenu="matMenu">
@@ -53,7 +70,7 @@
 							<!--<button *ngIf="row.status==1" mat-menu-item (click)="makeItPublic(row.id)"><mat-icon>people_outline</mat-icon>{{'DATASET-LISTING.ACTIONS.MAKE-IT-PUBLIC' | translate}}</button> -->
 						</mat-menu>
 						<button mat-icon-button [matMenuTriggerFor]="actionsMenu">
-							<mat-icon>more_vert</mat-icon>
+							<mat-icon>more_horiz</mat-icon>
 						</button>
 					</mat-cell>
 				</ng-container>
@@ -63,14 +80,10 @@
 				<!-- (click)="rowClick(row.id)" -->
 
 			</mat-table>
+
 			<mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]">
 			</mat-paginator>
-		</mat-card>
+		<!-- </mat-card> -->
-
-		<div class="row justify-content-end pr-2">
-			<button mat-fab class="mat-fab-bottom-right" color="primary" [routerLink]="['./new']">
-				<mat-icon class="mat-24">add</mat-icon>
-			</button>
 		</div>
 	</div>
 </div>

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

@@ -1,9 +1,14 @@
 .dataset-profile-listing {
   margin-top: 1rem;
+  margin-left: 1rem;
+	margin-right: 2rem;
 }
 
 .mat-table {
-  margin: 24px;
+	margin-top: 47px;
+  margin-bottom: 20px;
+  border-radius: 4px;
+
 }
 
 .mat-fab-bottom-right {
@@ -16,6 +21,10 @@
   z-index: 5;
 }
 
+.mat-header-row{
+  background: #f3f5f8;
+}
+
 .full-width {
   width: 100%;
 }
@@ -26,20 +35,39 @@
 
 .mat-row {
   cursor: pointer;
+  min-height: 4.5em;
 }
 
 mat-row:hover {
-  background-color: lightgray;
+  background-color: #eef5f6;
 }
 
+.status-chip{
+  
+  border-radius: 20px;
+  padding-left: 1em;
+  padding-right: 1em;
+  padding-top: 0.2em;
+  font-size: .8em;
+}
+
+.status-chip-finalized{
+  color: #568b5a;
+  background: #9dd1a1 0% 0% no-repeat padding-box;
+}
+
+.status-chip-draft{
+  color: #00c4ff;
+  background: #d3f5ff 0% 0% no-repeat padding-box;
+}
 // mat-row:nth-child(even){
 //     background-color:red;
 //     }
 
-mat-row:nth-child(odd) {
+// mat-row:nth-child(odd) {
-  background-color: #0c748914;
+//   background-color: #0c748914;
-  //   background-color: #eef0fb;
+//   //   background-color: #eef0fb;
-}
+// }
 
 ::ng-deep .mat-paginator-container {
   flex-direction: row-reverse !important;
@@ -71,3 +99,20 @@ mat-row:nth-child(odd) {
   height: 30px !important;
   font-size: 12px !important;
 }
+
+.import-btn {
+  background: #ffffff 0% 0% no-repeat padding-box;
+  border-radius: 30px;
+  // color: #129d99;
+  // border: 1px solid #129d99;
+  padding-left: 2em;
+  padding-right: 2em;
+  color: #000;
+  border: 1px solid #000;
+}
+.create-btn {
+  border-radius: 30px;
+  background-color: #f7dd72;
+  padding-left: 2em;
+  padding-right: 2em;
+}

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

@@ -1,9 +1,11 @@
 import { DataSource } from '@angular/cdk/table';
 import { HttpClient } from '@angular/common/http';
 import { Component, OnInit, ViewChild } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
 import { MatPaginator, PageEvent } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { ActivatedRoute, Params, Router } from '@angular/router';
+import { DatasetStatus } from '@app/core/common/enum/dataset-status';
 import { DataTableRequest } from '@app/core/model/data-table/data-table-request';
 import { DatasetListingModel } from '@app/core/model/dataset/dataset-listing';
 import { DmpModel } from '@app/core/model/dmp/dmp';
@@ -18,6 +20,8 @@ import { BaseComponent } from '@common/base/base.component';
 import { TranslateService } from '@ngx-translate/core';
 import { merge as observableMerge, Observable, of as observableOf } from 'rxjs';
 import { map, startWith, switchMap, takeUntil } from 'rxjs/operators';
+import { DialogConfirmationUploadDatasetProfiles } from './criteria/dialog-confirmation-upload-profile/dialog-confirmation-upload-profiles.component';
+import { ParseStatus } from './pipe/parse-status.pipe';
 
 @Component({
 	selector: 'app-dataset-profile-listing-component',
@@ -46,7 +50,8 @@ export class DatasetProfileListingComponent extends BaseComponent implements OnI
 		private language: TranslateService,
 		private uiNotificationService: UiNotificationService,
 		private httpClient: HttpClient,
-		private matomoService: MatomoService
+		private matomoService: MatomoService,
+		private dialog: MatDialog
 	) {
 		super();
 	}
@@ -122,6 +127,41 @@ export class DatasetProfileListingComponent extends BaseComponent implements OnI
 	//   debugger;
 	//   this.datasetService.makeDatasetPublic(id).pipe(takeUntil(this._destroyed)).subscribe();
 	// }
+
+	openDialog(): void {
+		const dialogRef = this.dialog.open(DialogConfirmationUploadDatasetProfiles, {
+			width: '500px',
+			restoreFocus: false,
+			data: {
+				message: this.language.instant('DATASET-WIZARD.UPLOAD.UPLOAD-XML-FILE-TITLE'),
+				confirmButton: this.language.instant('DATASET-WIZARD.UPLOAD.UPLOAD-XML'),
+				cancelButton: this.language.instant('DATASET-WIZARD.UPLOAD.UPLOAD-XML-FILE-CANCEL'),
+				name: "",
+				file: FileList,
+				sucsess: false
+			}
+		});
+		dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(data => {
+			if (data && data.sucsess && data.name != null && data.file != null) {
+				this.datasetService.uploadFile(data.file, data.name)
+					.pipe(takeUntil(this._destroyed))
+					.subscribe();
+			}
+		});
+	}
+
+	/**
+	 * gets as a a pameter a number representing the status and returns the class that is applied
+	 * to status-chip */
+	getStatusClass(status: DatasetStatus):string{
+		
+		if(status == DatasetStatus.Finalized){
+			return 'status-chip-finalized'
+		}
+
+		return 'status-chip-draft';
+	}
+
 }
 
 export class DatasetDataSource extends DataSource<DatasetListingModel> {

dmp-frontend/src/app/ui/admin/dataset-profile/listing/pipe/parse-status.pipe.ts

@@ -1,4 +1,5 @@
 import { Pipe, PipeTransform } from '@angular/core';
+import { DatasetStatus } from '@app/core/common/enum/dataset-status';
 
 @Pipe({
 	name: 'parseStatus',
@@ -10,7 +11,17 @@ export class ParseStatus implements PipeTransform {
 	}
 
 
-	parseStatus(status: number): string {
+	parseStatus(status: DatasetStatus): string {
-		return status != 0 ? 'DATASET-PROFILE-STATUS.FINALIZED' : 'DATASET-PROFILE-STATUS.DRAFT';
+
+		switch (status) {
+			case DatasetStatus.Finalized:
+				return 'DATASET-PROFILE-STATUS.FINALIZED';
+			case DatasetStatus.Draft: 
+				return	'DATASET-PROFILE-STATUS.DRAFT';
+			case DatasetStatus.Deleted:
+				return	'DATASET-PROFILE-STATUS.DRAFT.DELETED';
+			default:
+				return 'DATASET-PROFILE-STATUS.DRAFT.NONE';
+		}
 	}
 }

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

@@ -1587,6 +1587,7 @@
 	"DATASET-PROFILE-STATUS": {
 		"NONE": "None",
 		"DRAFT": "Draft",
-		"FINALIZED": "Finalized"
+		"FINALIZED": "Finalized",
+		"DELETED": "Deleted"
 	}
 }

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

@@ -1591,6 +1591,7 @@
 	"DATASET-PROFILE-STATUS": {
 		"NONE": "None",
 		"DRAFT": "Draft",
-		"FINALIZED": "Finalized"
+		"FINALIZED": "Finalized",
+		"DELETED": "Deleted"
 	}
 }

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

@@ -1587,6 +1587,7 @@
 	"DATASET-PROFILE-STATUS": {
 		"NONE": "Ninguno",
 		"DRAFT": "Borrador",
-		"FINALIZED": "Finalizado"
+		"FINALIZED": "Finalizado",
+		"DELETED": "Deleted"
 	}
 }

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

@@ -1587,6 +1587,7 @@
 	"DATASET-PROFILE-STATUS": {
 		"NONE": "Όλα",
 		"DRAFT": "Πρόχειρα",
-		"FINALIZED": "Οριστικοποιημένα"
+		"FINALIZED": "Οριστικοποιημένα",
+		"DELETED": "Deleted"
 	}
 }

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

@@ -1587,6 +1587,7 @@
 	"DATASET-PROFILE-STATUS": {
 		"NONE": "ˇŽiadny",
 		"DRAFT": "Návrh",
-		"FINALIZED": "Dokončené"
+		"FINALIZED": "Dokončené",
+		"DELETED": "Deleted"
 	}
 }

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

@@ -1534,6 +1534,7 @@
 	"DATASET-PROFILE-STATUS": {
 		"NONE": "Nijedan",
 		"DRAFT": "Radna verzija",
-		"FINALIZED": "Završeno"
+		"FINALIZED": "Završeno",
+		"DELETED": "Deleted"
 	}
 }

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

@@ -1587,6 +1587,7 @@
 	"DATASET-PROFILE-STATUS": {
 		"NONE": "Hiç Biri",
 		"DRAFT": "Taslak",
-		"FINALIZED": "Tamamlandı"
+		"FINALIZED": "Tamamlandı",
+		"DELETED": "Deleted"
 	}
 }