Restyle DMP profile listing (Admin Pages)

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

@@ -1,18 +1,11 @@
 <div class="dmp-criteria">
-	<mat-card class="mat-card">
+		<div class="row justify-content-end">
-		<div class="row">
-
-			<mat-form-field class="col-md-6">
-				<input matInput placeholder=" {{'CRITERIA.DMP.LIKE'| translate}}" name="grantCriteriaLike"
-					[(ngModel)]="criteria.like" (ngModelChange)="controlModified()">
-			</mat-form-field>
-
-			<div class="col"></div>
 			<div class="col-auto">
-				<!--  imgFileInput.click() && -->
+				<mat-form-field class="search-form-field">
-				<button mat-raised-button class="col-auto" color="primary" (click)="openDialog()"
+					<input matInput placeholder=" {{'CRITERIA.DMP.LIKE'| translate}}" name="grantCriteriaLike"
-					type="button">{{ 'DMP-PROFILE-LISTING.UPLOAD.UPLOAD-XML' | translate }}</button>
+						[(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/dmp-profile/listing/criteria/dmp-profile-criteria.component.scss

@@ -0,0 +1,13 @@
+
+:host ::ng-deep .search-form-field .mat-form-field-wrapper {
+	background-color: white !important;
+	padding-bottom: 0 !important;
+}
+:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
+	padding: 0.3rem 0rem 0.6rem 0rem !important;
+}
+
+.dmp-criteria{
+    margin-top: 4em;
+    margin-bottom: 2em;
+}

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

@@ -53,24 +53,24 @@ export class DmpProfileCriteriaComponent extends BaseCriteriaComponent implement
 	}
 
 
-	openDialog(): void {
+	// openDialog(): void {
-		const dialogRef = this.dialog.open(DialodConfirmationUploadDmpProfiles, {
+	// 	const dialogRef = this.dialog.open(DialodConfirmationUploadDmpProfiles, {
-			restoreFocus: false,
+	// 		restoreFocus: false,
-			data: {
+	// 		data: {
-				message: this.language.instant('DMP-PROFILE-LISTING.UPLOAD.UPLOAD-XML-FILE-TITLE'),
+	// 			message: this.language.instant('DMP-PROFILE-LISTING.UPLOAD.UPLOAD-XML-FILE-TITLE'),
-				confirmButton: this.language.instant('DMP-PROFILE-LISTING.UPLOAD.UPLOAD-XML'),
+	// 			confirmButton: this.language.instant('DMP-PROFILE-LISTING.UPLOAD.UPLOAD-XML'),
-				cancelButton: this.language.instant('DMP-PROFILE-LISTING.UPLOAD.UPLOAD-XML-FILE-CANCEL'),
+	// 			cancelButton: this.language.instant('DMP-PROFILE-LISTING.UPLOAD.UPLOAD-XML-FILE-CANCEL'),
-				name: '',
+	// 			name: '',
-				file: FileList,
+	// 			file: FileList,
-				sucsess: false
+	// 			sucsess: false
-			}
+	// 		}
-		});
+	// 	});
-		dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(data => {
+	// 	dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(data => {
-			if (data && data.sucsess && data.name != null && data.file != null) {
+	// 		if (data && data.sucsess && data.name != null && data.file != null) {
-				this.dmpProfileService.uploadFile(data.file, data.name)
+	// 			this.dmpProfileService.uploadFile(data.file, data.name)
-					.pipe(takeUntil(this._destroyed))
+	// 				.pipe(takeUntil(this._destroyed))
-					.subscribe();
+	// 				.subscribe();
-			}
+	// 		}
-		});
+	// 	});
-	}
+	// }
 }

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

@@ -1,9 +1,26 @@
 <div class="main-content">
 	<div class="container-fluid dmp-profile-listing">
-		<h3>{{titlePrefix}} {{'DMP-PROFILE-LISTING.TITLE' | translate}}</h3>
+		<div class="row align-items-center">
+			<div class="col-auto">
+				<h3>{{titlePrefix}} {{'DMP-PROFILE-LISTING.TITLE' | translate}}</h3>
+			</div>
+			<div class="col"></div>
+			<div class="col-auto">
+				<button mat-raised-button class="import-btn" (click)="openDialog()">
+					<span class="button-text">
+						{{'DMP-PROFILE-LISTING.UPLOAD.UPLOAD-XML' | translate}}
+					</span>
+				</button>
+				<button mat-raised-button class="create-btn ml-md-3" [routerLink]="['/dmp-profiles/new'] ">
+					<span class="button-text">
+						{{'DMP-PROFILE-LISTING.CREATE-DMP-TEMPLATE' | translate}}
+					</span>
+				</button>
+			</div>
+		</div>
 
 		<app-dmp-profile-criteria-component></app-dmp-profile-criteria-component>
-		<mat-card class="row mat-card">
+		<div class="mat-elevation-z6">
 			<mat-table [dataSource]="dataSource" matSort (matSortChange)="refresh()">
 
 				<!-- Column Definition: Name -->
@@ -17,7 +34,11 @@
 				<ng-container cdkColumnDef="status">
 					<mat-header-cell *matHeaderCellDef mat-sort-header="status">
 						{{'DMP-PROFILE-LISTING.COLUMNS.STATUS' | translate}}</mat-header-cell>
-					<mat-cell *matCellDef="let row">{{row.status}}</mat-cell>
+					<mat-cell *matCellDef="let row">
+						<div [ngClass]="['status-chip', getStatusClass(row.status)]">
+							{{parseStatus(row.status) | translate}}
+						</div>
+					</mat-cell>
 				</ng-container>
 
 				<!-- Column Definition: Created -->
@@ -36,12 +57,6 @@
 			</mat-table>
 			<mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]">
 			</mat-paginator>
-		</mat-card>
-
-		<div class="row justify-content-end pr-2">
-			<button mat-fab class="mat-fab-bottom-right" color="primary" [routerLink]="['/dmp-profiles/new'] ">
-				<mat-icon class="mat-24">add</mat-icon>
-			</button>
 		</div>
 	</div>
 </div>

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

@@ -1,65 +1,77 @@
 .mat-table {
-  margin: 24px;
+	margin-top: 47px;
+  border-radius: 4px;
 }
-
 .dmp-profile-listing {
   margin-top: 1.3rem;
+  margin-left: 1rem;
+  margin-right: 2rem;
 
+  .mat-header-row{
+    background: #f3f5f8;
+  }
+  .mat-card {
+    margin: 16px 0;
+    padding: 0px;
+  }
+  
   .mat-row {
     cursor: pointer;
+    min-height: 4.5em;
   }
-
+  
-  .mat-card {
-    margin: 1em 0;
-  }
-
   mat-row:hover {
-    background-color: lightgray;
+    background-color: #eef5f6;
   }
-
-  mat-row:nth-child(odd) {
-    background-color: #0c748914;
-    // background-color: #eef0fb;
-  }
-
   .mat-fab-bottom-right {
-    // top: auto !important;
-    // right: 20px !important;
-    // bottom: 10px !important;
-    // left: auto !important;
-    // position: fixed !important;
     float: right;
     z-index: 5;
   }
 }
-
+// PAGINATOR
 :host ::ng-deep .mat-paginator-container {
   flex-direction: row-reverse !important;
   justify-content: space-between !important;
   background-color: #f6f6f6;
-  height: 30px;
+  align-items: center;
-  min-height: 30px !important;
+}
+.create-btn {
+  border-radius: 30px;
+  background-color: #f7dd72;
+  padding-left: 2em;
+  padding-right: 2em;
+  // color: #000;
+
+  .button-text{
+    display: inline-block;
+  }
 }
 
-:host ::ng-deep .mat-paginator-page-size {
+.import-btn {
-  height: 43px;
+  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;
 }
 
-:host ::ng-deep .mat-paginator-range-label {
+.status-chip{
-  margin: 15px 32px 0 24px !important;
+  border-radius: 20px;
+  padding-left: 1em;
+  padding-right: 1em;
+  padding-top: 0.2em;
+  font-size: .8em;
 }
 
-:host ::ng-deep .mat-paginator-range-actions {
+.status-chip-inactive{
-  width: 55% !important;
+  color: #ff3d33;
-  min-height: 43px !important;
+  background: #ffd5d3 0% 0% no-repeat padding-box;
-  justify-content: space-between;
 }
 
-:host ::ng-deep .mat-paginator-navigation-previous {
+.status-chip-active{
-  margin-left: auto !important;
+  color: #00c4ff;
-}
+  background: #d3f5ff 0% 0% no-repeat padding-box;
-
+}
-:host ::ng-deep .mat-icon-button {
-  height: 30px !important;
-  font-size: 12px !important;
-}

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

@@ -2,10 +2,12 @@
 import { DataSource } from '@angular/cdk/table';
 import { HttpClient } from '@angular/common/http';
 import { Component, OnInit, ViewChild } from '@angular/core';
+import { MatDialog } from '@angular/material';
 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';
@@ -17,6 +19,7 @@ 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 { DialodConfirmationUploadDmpProfiles } from './criteria/dialog-confirmation-upload-profile/dialog-confirmation-upload-profiles.component';
 
 
 @Component({
@@ -38,8 +41,8 @@ export class DmpProfileListingComponent extends BaseComponent implements OnInit
 	breadCrumbs: Observable<BreadcrumbItem[]>;
 
 	statuses = [
-		{ value: '0', viewValue: 'Active' },
+		{ value: '0', viewValue: 'DMP-PROFILE-LISTING.STATUS.ACTIVE' },// active
-		{ value: '1', viewValue: 'Inactive' }
+		{ value: '1', viewValue: 'DMP-PROFILE-LISTING.STATUS.INACTIVE' }// inactive
 	];
 
 	constructor(
@@ -49,7 +52,8 @@ export class DmpProfileListingComponent extends BaseComponent implements OnInit
 		public route: ActivatedRoute,
 		public dmpProfileService: DmpProfileService,
 		private httpClient: HttpClient,
-		private matomoService: MatomoService
+		private matomoService: MatomoService,
+		private dialog: MatDialog,
 	) {
 		super();
 	}
@@ -88,6 +92,46 @@ export class DmpProfileListingComponent extends BaseComponent implements OnInit
 	//   debugger;
 	//   this.datasetService.makeDatasetPublic(id).pipe(takeUntil(this._destroyed)).subscribe();
 	// }
+
+	parseStatus(value: number): string{
+		const stringVal = value.toString()
+		try{
+			return this.statuses.find(status => status.value === stringVal).viewValue;
+		}catch{
+			return stringVal;
+		}
+	}
+
+	openDialog(): void {
+		const dialogRef = this.dialog.open(DialodConfirmationUploadDmpProfiles, {
+			restoreFocus: false,
+			data: {
+				message: this.languageService.instant('DMP-PROFILE-LISTING.UPLOAD.UPLOAD-XML-FILE-TITLE'),
+				confirmButton: this.languageService.instant('DMP-PROFILE-LISTING.UPLOAD.UPLOAD-XML'),
+				cancelButton: this.languageService.instant('DMP-PROFILE-LISTING.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.dmpProfileService.uploadFile(data.file, data.name)
+					.pipe(takeUntil(this._destroyed))
+					.subscribe();
+			}
+		});
+	}
+	getStatusClass(status: number):string{
+		
+		if(status === 1){//inactive
+			return 'status-chip-inactive'
+		}
+		if(status === 0){
+			return 'status-chip-active';
+		}
+		return '';
+	}
 }
 
 export class DatasetDataSource extends DataSource<DmpProfileListing> {

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

@@ -1060,6 +1060,7 @@
 	},
 	"DMP-PROFILE-LISTING": {
 		"TITLE": "DMP Vorlagen",
+		"CREATE-DMP-TEMPLATE": "Create DMP Template",
 		"COLUMNS": {
 			"NAME": "Name",
 			"STATUS": "Status",
@@ -1073,6 +1074,10 @@
 			"UPLOAD-XML-NAME": "Name der DMP Vorlage",
 			"UPLOAD-XML-IMPORT": "Datei",
 			"UPLOAD-XML-FILE-CANCEL": "Abbrechen"
+		},
+		"STATUS":{
+			"ACTIVE": "Active",
+			"INACTIVE": "Inactive"
 		}
 	},
 	"DYNAMIC-FORM": {

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

@@ -1060,6 +1060,7 @@
 	},
 	"DMP-PROFILE-LISTING": {
 		"TITLE": "DMP Templates",
+		"CREATE-DMP-TEMPLATE": "Create DMP Template",
 		"COLUMNS": {
 			"NAME": "Name",
 			"STATUS": "Status",
@@ -1073,6 +1074,10 @@
 			"UPLOAD-XML-NAME": "Name Of DMP Template",
 			"UPLOAD-XML-IMPORT": "File",
 			"UPLOAD-XML-FILE-CANCEL": "Cancel"
+		},
+		"STATUS":{
+			"ACTIVE": "Active",
+			"INACTIVE": "Inactive"
 		}
 	},
 	"DYNAMIC-FORM": {

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

@@ -1060,6 +1060,7 @@
 	},
 	"DMP-PROFILE-LISTING": {
 		"TITLE": "Plantilla del PGD",
+		"CREATE-DMP-TEMPLATE": "Create DMP Template",
 		"COLUMNS": {
 			"NAME": "Nombre",
 			"STATUS": "Estado",
@@ -1073,6 +1074,10 @@
 			"UPLOAD-XML-NAME": "Nombre de la Plantilla del PGD",
 			"UPLOAD-XML-IMPORT": "Fichero",
 			"UPLOAD-XML-FILE-CANCEL": "Cancelar"
+		},
+		"STATUS":{
+			"ACTIVE": "Active",
+			"INACTIVE": "Inactive"
 		}
 	},
 	"DYNAMIC-FORM": {

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

@@ -1060,6 +1060,7 @@
 	},
 	"DMP-PROFILE-LISTING": {
 		"TITLE": "Templates Σχεδίων Διαχείρισης Δεδομένων",
+		"CREATE-DMP-TEMPLATE": "Create DMP Template",
 		"COLUMNS": {
 			"NAME": "Τίτλος",
 			"STATUS": "Κατάσταση",
@@ -1073,6 +1074,10 @@
 			"UPLOAD-XML-NAME": "Τίτλος Template Σχεδίου Διαχείρισης Δεδομένων",
 			"UPLOAD-XML-IMPORT": "Αρχείο",
 			"UPLOAD-XML-FILE-CANCEL": "Ακύρωση"
+		},
+		"STATUS":{
+			"ACTIVE": "Active",
+			"INACTIVE": "Inactive"
 		}
 	},
 	"DYNAMIC-FORM": {

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

@@ -1060,6 +1060,7 @@
 	},
 	"DMP-PROFILE-LISTING": {
 		"TITLE": "PGDs",
+		"CREATE-DMP-TEMPLATE": "Create DMP Template",
 		"COLUMNS": {
 			"NAME": "Nome",
 			"STATUS": "Estado",
@@ -1073,6 +1074,10 @@
 			"UPLOAD-XML-NAME": "Nome do PGD",
 			"UPLOAD-XML-IMPORT": "Ficheiro",
 			"UPLOAD-XML-FILE-CANCEL": "Cancelar"
+		},
+		"STATUS":{
+			"ACTIVE": "Active",
+			"INACTIVE": "Inactive"
 		}
 	},
 	"DYNAMIC-FORM": {

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

@@ -1060,6 +1060,7 @@
 	},
 	"DMP-PROFILE-LISTING": {
 		"TITLE": "Šablóny DMP",
+		"CREATE-DMP-TEMPLATE": "Create DMP Template",
 		"COLUMNS": {
 			"NAME": "Názov",
 			"STATUS": "Stav",
@@ -1073,6 +1074,10 @@
 			"UPLOAD-XML-NAME": "Názov šablóny DMP",
 			"UPLOAD-XML-IMPORT": "Súbor",
 			"UPLOAD-XML-FILE-CANCEL": "Zrušiť"
+		},
+		"STATUS":{
+			"ACTIVE": "Active",
+			"INACTIVE": "Inactive"
 		}
 	},
 	"DYNAMIC-FORM": {

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

@@ -1060,6 +1060,7 @@
 	},
 	"DMP-PROFILE-LISTING": {
 		"TITLE": "Obrasci za Planove",
+		"CREATE-DMP-TEMPLATE": "Create DMP Template",
 		"COLUMNS": {
 			"NAME": "Ime",
 			"STATUS": "Status",
@@ -1073,6 +1074,10 @@
 			"UPLOAD-XML-NAME": "Ime obrasca za Plan",
 			"UPLOAD-XML-IMPORT": "Datoteka",
 			"UPLOAD-XML-FILE-CANCEL": "Otkažite"
+		},
+		"STATUS":{
+			"ACTIVE": "Active",
+			"INACTIVE": "Inactive"
 		}
 	},
 	"DYNAMIC-FORM": {

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

@@ -1060,6 +1060,7 @@
 	},
 	"DMP-PROFILE-LISTING": {
 		"TITLE": "VYP Şablonları",
+		"CREATE-DMP-TEMPLATE": "Create DMP Template",
 		"COLUMNS": {
 			"NAME": "İsim",
 			"STATUS": "Durum",
@@ -1073,6 +1074,10 @@
 			"UPLOAD-XML-NAME": "VYP Şablonu İsmi",
 			"UPLOAD-XML-IMPORT": "Dosya",
 			"UPLOAD-XML-FILE-CANCEL": "İptal"
+		},
+		"STATUS":{
+			"ACTIVE": "Active",
+			"INACTIVE": "Inactive"
 		}
 	},
 	"DYNAMIC-FORM": {