Explore Datasets Fix

Search Css Fix

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

@@ -23,7 +23,7 @@ export class ExploreDatasetListingComponent extends BaseComponent implements OnI
 
 	@ViewChild(MatPaginator) _paginator: MatPaginator;
 	@ViewChild(MatSort) sort: MatSort;
-	criteria: ExploreDatasetCriteriaModel;
+	criteria: ExploreDatasetCriteriaModel = new ExploreDatasetCriteriaModel();
 
 	dataSource: DatasetDataSource | null;
 	displayedColumns: String[] = ['label', 'project', 'profile', 'description', 'created'];
@@ -59,7 +59,7 @@ export class ExploreDatasetListingComponent extends BaseComponent implements OnI
 	}
 
 	onCriteriaChange(event: ExploreDatasetCriteriaModel) {
-		//console.log(event)
+		console.log(event)
 		this.criteria = event;
 		this.refresh();
 	}
@@ -118,7 +118,7 @@ export class DatasetDataSource extends DataSource<DatasetListingModel> {
 				let fields: Array<string> = new Array();
 				if (this._sort.active) { fields = this._sort.direction === 'asc' ? ['+' + this._sort.active] : ['-' + this._sort.active]; }
 				const request = new DataTableRequest<ExploreDatasetCriteriaModel>(startIndex, this._paginator.pageSize, { fields: fields });
-				request.criteria = new ExploreDatasetCriteriaModel();
+				request.criteria = this._criteria;
 				//if (this.dmpId) request.criteria.allVersions = true;
 				return this._service.getPublicPaged(request);
 			})
@@ -130,10 +130,10 @@ export class DatasetDataSource extends DataSource<DatasetListingModel> {
 			  });
 			  //this._criteria.criteria.onCallbackError(error);
 			  return Observable.of(null);
-			})*/
+			})
 			.map(result => {
 				return result;
-			})
+			})*/
 			.map(result => {
 				if (!result) { return []; }
 				if (this._paginator.pageIndex === 0) { this.totalCount = result.totalCount; }

dmp-frontend/src/app/ui/explore-dataset/filters/explore-dataset-filter-item/explore-dataset-filter-item.component.html

@@ -3,14 +3,18 @@
 		<input type="text" placeholder="{{ 'FACET-SEARCH.FILTER' | translate }}" matInput [formControl]="optionSearchControl">
 	</mat-form-field>
 </div>
+
 <mat-chip-list *ngIf="searchEnabled">
 	<mat-chip [removable]="true" (removed)="removeOption(option)" *ngFor="let option of selectedOptions">{{
 		displayLabel(option) }}
 		<mat-icon matChipRemove>cancel</mat-icon>
 	</mat-chip>
 </mat-chip-list>
-<mat-selection-list #optionsList (selectionChange)="selectionChanged($event)">
-	<mat-list-option class="facet-option-item" *ngFor="let option of (options | async) | slice:0:10" [value]="option" [selected]="isOptionSelected(option)">
-		<p>{{ displayLabel(option) }}</p>
-	</mat-list-option>
-</mat-selection-list>
+
+<div class="data-expand-panel">
+	<mat-selection-list #optionsList (selectionChange)="selectionChanged($event)">
+		<mat-list-option class="facet-option-item" *ngFor="let option of (options | async)" [value]="option" [selected]="isOptionSelected(option)">
+			<p>{{ displayLabel(option) }}</p>
+		</mat-list-option>
+	</mat-selection-list>
+</div>

dmp-frontend/src/app/ui/explore-dataset/filters/explore-dataset-filter-item/explore-dataset-filter-item.component.scss

@@ -1,10 +1,14 @@
 .facet-option-item {
-
 	height: auto !important;
 	min-height: 48px;
 	padding: 0.5em;
-
 	.mat-list-item-content {
 		min-height: inherit;
 	}
 }
+
+.data-expand-panel{
+	max-height: 20em;
+	overflow-x: hidden;
+	overflow-y: auto;
+}

dmp-frontend/src/app/ui/explore-dataset/filters/explore-dataset-filters.component.html

@@ -7,12 +7,14 @@
 		</mat-expansion-panel-header>
 		<div>
 			<mat-form-field>
-				<input matInput placeholder="{{'CRITERIA.PROJECTS.LIKE'| translate}}" name="datasetCriteriaName" [(ngModel)]="facetCriteria.like" (ngModelChange)="controlModified()">
+				<input matInput placeholder="{{'CRITERIA.PROJECTS.LIKE'| translate}}" name="datasetCriteriaName" [(ngModel)]="facetCriteria.like"
+				 (ngModelChange)="controlModified()">
 			</mat-form-field>
 		</div>
 		<div>
 			<mat-form-field>
-				<app-multiple-auto-complete [(ngModel)]="facetCriteria.tags" (ngModelChange)="controlModified()" placeholder="{{'CRITERIA.DATA-SETS.TAGS' | translate}}" [configuration]="tagsAutoCompleteConfiguration">
+				<app-multiple-auto-complete [(ngModel)]="facetCriteria.tags" (ngModelChange)="controlModified()" placeholder="{{'CRITERIA.DATA-SETS.TAGS' | translate}}"
+				 [configuration]="tagsAutoCompleteConfiguration">
 				</app-multiple-auto-complete>
 			</mat-form-field>
 		</div>
@@ -23,8 +25,8 @@
 				{{ 'FACET-SEARCH.PROJECT-STATUS.TITLE' | translate }}
 			</mat-panel-title>
 		</mat-expansion-panel-header>
-		<app-explore-dataset-filter-item-component [multipleSelect]="false" [options]="this.projectStateOptions" (selectedChanged)="projectStatusChanged($event)" [displayTitleFunc]="displayProjectStateLabel" [displayValueFunc]="displayProjectStateValue">
-
+		<app-explore-dataset-filter-item-component [multipleSelect]="false" [options]="this.projectStateOptions"
+		 (selectedChanged)="projectStatusChanged($event)" [displayTitleFunc]="displayProjectStateLabel" [displayValueFunc]="displayProjectStateValue">
 		</app-explore-dataset-filter-item-component>
 	</mat-expansion-panel>
 	<mat-expansion-panel *ngIf="this.facetCriteria.projectStatus == ProjectStateType.OnGoing || this.facetCriteria.projectStatus == ProjectStateType.Finished">
@@ -33,8 +35,9 @@
 				{{ 'FACET-SEARCH.PROJECT.TITLE' | translate }}
 			</mat-panel-title>
 		</mat-expansion-panel-header>
-
-		<app-explore-dataset-filter-item-component [options]="this.projects" (selectedChanged)="projectChanged($event)" [filterOptions]="projectSearch.bind(this)" [searchEnabled]="true" (optionRemoved)="removeProject($event)" [displayTitleFunc]="displayProjectLabel" [displayValueFunc]="displayProjectValue">
+		<app-explore-dataset-filter-item-component [options]="this.projects" (selectedChanged)="projectChanged($event)"
+		 [filterOptions]="projectSearch.bind(this)" [searchEnabled]="true" (optionRemoved)="removeProject($event)"
+		 [displayTitleFunc]="displayProjectLabel" [displayValueFunc]="displayProjectValue">
 		</app-explore-dataset-filter-item-component>
 	</mat-expansion-panel>
 	<mat-expansion-panel>
@@ -43,7 +46,9 @@
 				{{ 'FACET-SEARCH.PROFILES.TITLE' | translate }}
 			</mat-panel-title>
 		</mat-expansion-panel-header>
-		<app-explore-dataset-filter-item-component [options]="this.profiles" (selectedChanged)="profileChanged($event)" [filterOptions]="profileSearch.bind(this)" (optionRemoved)="removeProfile($event)" [displayTitleFunc]="displayProfileLabel" [displayValueFunc]="displayProfileValue">
+		<app-explore-dataset-filter-item-component [options]="this.profiles" (selectedChanged)="profileChanged($event)"
+		 [filterOptions]="profileSearch.bind(this)" (optionRemoved)="removeProfile($event)" [displayTitleFunc]="displayProfileLabel"
+		 [displayValueFunc]="displayProfileValue">
 		</app-explore-dataset-filter-item-component>
 	</mat-expansion-panel>
 	<mat-expansion-panel>
@@ -52,8 +57,9 @@
 				{{ 'FACET-SEARCH.DMP-ORGANISATIONS.TITLE' | translate }}
 			</mat-panel-title>
 		</mat-expansion-panel-header>
-
-		<app-explore-dataset-filter-item-component [options]="this.dmpOrganisations" (selectedChanged)="dmpOrganisationChanged($event)" [filterOptions]="dmpOrganisationSearch.bind(this)" (optionRemoved)="removeOrganisation($event)" [searchEnabled]="true" [displayTitleFunc]="displayDmpOrganisationsLabel" [displayValueFunc]="displayDmpOrganisationsValue">
+		<app-explore-dataset-filter-item-component [options]="this.dmpOrganisations" (selectedChanged)="dmpOrganisationChanged($event)"
+		 [filterOptions]="dmpOrganisationSearch.bind(this)" (optionRemoved)="removeOrganisation($event)" [searchEnabled]="true"
+		 [displayTitleFunc]="displayDmpOrganisationsLabel" [displayValueFunc]="displayDmpOrganisationsValue">
 		</app-explore-dataset-filter-item-component>
 	</mat-expansion-panel>
-</mat-accordion>
+</mat-accordion>

dmp-frontend/src/app/ui/misc/navigation/navigation.component.html

@@ -24,8 +24,10 @@
 			<input type="text" placeholder="{{'DASHBOARD.SEARCH' | translate}}" matInput [formControl]="searchControl"
 			 [matAutocomplete]="auto">
 			<mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" (optionSelected)="onOptionSelected($event)">
-				<mat-option *ngFor="let option of filteredOptions | async" [value]="option" class="transformation-value-mat-option">
-					<small>{{transformType(option.type)}} : {{option.label}}</small>
+				<mat-option *ngFor="let option of filteredOptions | async" [value]="option" class="transformation-value-mat-option two-line-mat-option">
+					<span>{{option.label}}</span>
+					<br>
+					<small>{{transformType(option.type)}}</small>
 				</mat-option>
 			</mat-autocomplete>
 		</mat-form-field>

dmp-frontend/src/app/ui/misc/navigation/navigation.component.scss

@@ -21,6 +21,7 @@
 			margin-right: 30px;
 			margin-left: 20px;
 		}
+		
 	}
 
 	.progress-bar {
@@ -32,6 +33,10 @@
 	}
 	
 }
+.two-line-mat-option {
+	height: 3.5em;
+	line-height: 1.2em;
+}
 .buttonNav:hover {
 	color: aliceblue;