Adds Filters Dialog on Dmp Listing ( 2nd Commit )

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

@@ -32,6 +32,7 @@ import { FormValidationErrorsDialogModule } from '@common/forms/form-validation-
 import { CommonUiModule } from '@common/ui/common-ui.module';
 import { MultipleChoiceDialogModule } from '@common/modules/multiple-choice-dialog/multiple-choice-dialog.module';
 import { AddOrganizationComponent } from './editor/add-organization/add-organization.component';
+import { DmpCriteriaDialogComponent } from './listing/criteria/dmp-criteria-dialog.component';
 
 @NgModule({
 	imports: [
@@ -69,7 +70,8 @@ import { AddOrganizationComponent } from './editor/add-organization/add-organiza
 		GrantTabComponent,
 		DatasetsTabComponent,
 		DmpCloneComponent,
-		AddOrganizationComponent
+		AddOrganizationComponent,
+		DmpCriteriaDialogComponent
 	],
 	entryComponents: [
 		DmpInvitationDialogComponent,
@@ -77,7 +79,8 @@ import { AddOrganizationComponent } from './editor/add-organization/add-organiza
 		AvailableProfilesComponent,
 		DmpFinalizeDialogComponent,
 		DmpUploadDialogue,
-		AddOrganizationComponent
+		AddOrganizationComponent,
+		DmpCriteriaDialogComponent
 	]
 })
 export class DmpModule { }

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

@@ -0,0 +1,2 @@
+<a class="col-auto d-flex pointer" (click)="onClose()"><span class="ml-auto pt-3 material-icons clear-icon">clear</span></a>
+<app-dmp-criteria-component [showGrant]="data.showGrant" [isPublic]="data.isPublic" class="col-auto"></app-dmp-criteria-component>

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

@@ -0,0 +1,24 @@
+import { Inject, Component } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+
+@Component({
+	selector: 'dmp-criteria-dialog-component',
+	templateUrl: './dmp-criteria-dialog.component.html',
+})
+
+export class DmpCriteriaDialogComponent {
+
+	constructor(
+		public dialogRef: MatDialogRef<DmpCriteriaDialogComponent>,
+		@Inject(MAT_DIALOG_DATA) public data: { showGrant: boolean, isPublic: boolean }
+	) { }
+
+	onNoClick(): void {
+		this.dialogRef.close();
+	}
+
+	onClose(): void {
+		this.dialogRef.close();
+	}
+
+}

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

@@ -1,11 +1,14 @@
 <div class="main-content listing-main-container h-100">
 	<div class="container-fluid">
-		<div class="card mt-0" [style.display]="isVisible ? 'block' : 'none'">
-			<a class="col-auto d-flex" (click)="closeCard()"><span class="ml-auto pt-3 material-icons clear-icon">clear</span></a>
-			<div class="card-content info-text mb-0 pt-0">
-				<p>{{'DMP-LISTING.TEXT-INFO' | translate}}</p>
-				<p class="mt-4 pt-2">{{'DMP-LISTING.TEXT-INFO-QUESTION' | translate}} <u>{{'DMP-LISTING.LINK-ZENODO' | translate}}</u> {{'DMP-LISTING.GET-IDEA' | translate}}</p>
+		<div class="d-flex flex-direction-row">
+			<div class="card mt-0" [style.display]="isVisible ? 'block' : 'none'">
+				<a class="col-auto d-flex" (click)="closeCard()"><span class="ml-auto pt-3 material-icons clear-icon">clear</span></a>
+				<div class="card-content info-text mb-0 pt-0">
+					<p>{{'DMP-LISTING.TEXT-INFO' | translate}}</p>
+					<p class="mt-4 pt-2">{{'DMP-LISTING.TEXT-INFO-QUESTION' | translate}} <u>{{'DMP-LISTING.LINK-ZENODO' | translate}}</u> {{'DMP-LISTING.GET-IDEA' | translate}}</p>
+				</div>
 			</div>
+			<div class="filter-btn"><button mat-raised-button><mat-icon class="mr-2" (click)="openFiltersDialog()">filter_alt</mat-icon></button></div>
 		</div>
 		<div>
 			<div class="listing row pb-2">

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

@@ -185,6 +185,19 @@
   color: #212121;
 }
 
+.filter-btn {
+	position: fixed;
+	right: 0px;
+	z-index: 100;
+}
+
+.filter-btn button {
+	color: white;
+	background-color: #23BCBA;
+	width: 52px;
+	height: 45px;
+}
+
 // .bot-paginator {
 // 	margin-top: auto;
 // }

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

@@ -23,6 +23,7 @@ import { DmpUploadDialogue } from './upload-dialogue/dmp-upload-dialogue.compone
 import { UiNotificationService, SnackBarNotificationLevel } from '@app/core/services/notification/ui-notification-service';
 import { isNullOrUndefined } from 'util';
 import { AuthService } from '@app/core/services/auth/auth.service';
+import { DmpCriteriaDialogComponent } from './criteria/dmp-criteria-dialog.component';
 
 
 @Component({
@@ -315,6 +316,22 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread
 	private onCallbackImportFail(error: any) {
 		this.uiNotificationService.snackBarNotification(error.message, SnackBarNotificationLevel.Error);
 	}
+
+	openFiltersDialog(): void {
+		const dialogRef = this.dialog.open(DmpCriteriaDialogComponent, {
+			width: '456px',
+			height: '100%',
+			restoreFocus: false,
+			data: {
+				showGrant: this.showGrant,
+				isPublic: this.isPublic
+			},
+			position: { right: '0px;' }
+		});
+
+		dialogRef.afterClosed().subscribe(result => {
+		});
+	}
 }
 
 // export class DmpDataSource extends DataSource<DmpListingModel> {

dmp-frontend/src/assets/css/demo.css

@@ -657,6 +657,15 @@ hr {
 	margin-top: 4.125rem;
 }
 
+.btn-load-more:hover {
+	background-color: black;
+	color: white;
+}
+
+.pointer {
+	cursor: pointer;
+}
+
 @media (min-width: 576px) {
 	.container {
 		max-width: 540px;