Styles: Filters Column, Paginator

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

@@ -1,25 +1,60 @@
 <div class="dmp-criteria">
-	<mat-card class="mat-card">
+	<div class="filters">
-		<mat-card-header class="row">
+		<h6 class="filters-title">{{'CRITERIA.FILTERS'| translate}}</h6>
-			<mat-card-title>
+		<div class="row" style="justify-content: center;">
-				<h4>{{'CRITERIA.FILTERS'| translate}}</h4>
+			<!-- Search -->
-			</mat-card-title>
+			<mat-form-field class="col-11 search">
-
+				<input matInput placeholder="{{'CRITERIA.DMP.LIKE'| translate}}" name="projectCriteriaLike"
-
+					[formControl]="formGroup.get('like')" (ngModelChange)="controlModified()">
-		</mat-card-header>
+				<mat-error *ngIf="formGroup.get('like').hasError('backendError')">
-		<div class="row">
+					{{formGroup.get('like').getError('backendError').message}}</mat-error>
-			<mat-form-field class="col-12">
+				<mat-icon matSuffix class="style-icon">search</mat-icon>
-				<input matInput placeholder="{{'CRITERIA.DMP.LIKE'| translate}}" name="projectCriteriaLike" [formControl]="formGroup.get('like')" (ngModelChange)="controlModified()">
-				<mat-error *ngIf="formGroup.get('like').hasError('backendError')">{{formGroup.get('like').getError('backendError').message}}</mat-error>
 			</mat-form-field>
-			<mat-form-field *ngIf="showProject" class="col-12">
+			<!-- End of Search -->
-				<app-multiple-auto-complete [formControl]="formGroup.get('projects')" placeholder="{{'CRITERIA.DMP.PROJECTS' | translate}}" [configuration]="projectAutoCompleteConfiguration">
+
+			<div *ngIf="showProject" class="col-10 filter-category" [formGroup]="options">
+				<h6 class="category-title">STATUS</h6>
+				<mat-list-item><mat-checkbox formControlName="getDrafts">Draft</mat-checkbox></mat-list-item>
+				<mat-list-item><mat-checkbox formControlName="getFinalized">Finalized</mat-checkbox></mat-list-item>
+				<mat-list-item><mat-checkbox formControlName="getDmpStatuses">Any dmp status</mat-checkbox></mat-list-item>
+			</div>
+			<div *ngIf="showProject" class="col-10 filter-category">
+				<h6 class="category-title">RELATED PROJECT</h6>
+				<mat-form-field>
+					<app-multiple-auto-complete [formControl]="formGroup.get('projects')"
+						placeholder="{{'CRITERIA.DMP.SELECT-PROJECTS' | translate}}"
+						[configuration]="projectAutoCompleteConfiguration">
 					</app-multiple-auto-complete>
+					<mat-icon matSuffix class="style-icon">arrow_drop_down</mat-icon>
 				</mat-form-field>
-			<div class="col-12"><button class="importButton" mat-raised-button color="primary" (click)="fileSave($event)" type="button col-auto">
+			</div>
+			<div *ngIf="showProject" class="col-10 filter-category">
+				<h6 class="category-title">ROLE</h6>
+				<mat-radio-group aria-label="Select an option">
+					<mat-list-item><mat-radio-button value="1">Any</mat-radio-button></mat-list-item>
+					<mat-list-item><mat-radio-button value="2">Owner</mat-radio-button></mat-list-item>
+					<mat-list-item><mat-radio-button value="3">Member</mat-radio-button></mat-list-item>
+				</mat-radio-group>
+			</div>
+			<div *ngIf="showProject" class="col-10 filter-category">
+				<h6 class="category-title">RELATED ORGANIZATION</h6>
+				<mat-form-field>
+					<input matInput placeholder="Select Organizations">
+					<!-- <app-multiple-auto-complete [formControl]="formGroup.get('projects')"
+						placeholder="Select Organizations"
+						[configuration]="projectAutoCompleteConfiguration">
+					</app-multiple-auto-complete> -->
+					<mat-icon matSuffix class="style-icon">arrow_drop_down</mat-icon>
+				</mat-form-field>
+			</div>
+
+			<div class="col-10 import">
+				<button class="importButton" mat-raised-button color="primary"
+					(click)="fileSave($event)" type="button col-auto">
 					{{'DMP-UPLOAD.ACTIONS.IMPORT' | translate}}
 				</button>
 			</div>
+
+		</div>
 	</div>
-	</mat-card>
 </div>

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

@@ -16,3 +16,101 @@
     float: right;
   }
 }
+
+.filters {
+  border: 1px solid #e4e4e4;
+  border-radius: 5px;
+}
+
+.filters-title {
+  width: 90px;
+  color: #2e75b6;
+  background-color: white;
+  padding: 0px 20px;
+  margin-top: -10px;
+  margin-left: 20px;
+  text-transform: uppercase;
+}
+
+.style-icon {
+  color: #adadad;
+}
+
+::ng-deep .mat-checkbox-inner-container {
+  background: white;
+}
+
+::ng-deep .mat-focused .mat-form-field-label {
+  color: #2e75b6 !important;
+}
+
+::ng-deep.mat-form-field-underline {
+  background-color: #adadad !important;
+}
+
+::ng-deep.mat-form-field-ripple {
+  background-color: #2e75b6 !important;
+}
+
+::ng-deep .mat-checkbox {
+  background-color: #f6f6f6 !important;
+}
+
+::ng-deep .mat-checkbox .mat-checkbox-frame {
+  border: 1px solid #aaaaaa;
+}
+
+::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background,
+.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background,
+.mat-accent .mat-pseudo-checkbox-checked,
+.mat-accent .mat-pseudo-checkbox-indeterminate,
+.mat-pseudo-checkbox-checked,
+.mat-pseudo-checkbox-indeterminate {
+  background-color: #2e75b6;
+}
+
+::ng-deep .mat-ripple-element {
+  background-color: #2e74b649 !important;
+}
+
+::ng-deep .mat-radio-container {
+  border-radius: 1em;
+  background: white;
+}
+
+::ng-deep .mat-radio-button .mat-radio-outer-circle {
+  border: 1px solid #aaaaaa;
+}
+
+::ng-deep .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
+  border-color: #2e75b6;
+}
+
+::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle {
+  color: #2e75b6;
+  background-color: #2e75b6;
+}
+
+.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
+  background-color: #2e74b649;
+}
+
+.search ::ng-deep.mat-form-field-infix {
+  margin-left: 1em;
+}
+
+.filter-category {
+  background-color: #f6f6f6;
+  margin: 5px 0px;
+}
+
+.category-title {
+  color: #2e75b6;
+  margin-top: 8px;
+  margin-bottom: 12px;
+}
+
+.import {
+  margin: 10px;
+  padding: 0px;
+}

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

@@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { FormBuilder, FormControl } from '@angular/forms';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { TranslateService } from '@ngx-translate/core';
 import { takeUntil } from 'rxjs/operators';
 import { ValidationErrorModel } from '../../../../common/forms/validation/error-model/validation-error-model';
@@ -27,6 +27,8 @@ export class DmpCriteriaComponent extends BaseCriteriaComponent implements OnIni
 	sizeError = false;
 	maxFileSize: number = 1048576;
 
+	options: FormGroup;
+
 	filteredProjects: ProjectListingModel[];
 	public formGroup = new FormBuilder().group({
 		like: new FormControl(),
@@ -44,9 +46,16 @@ export class DmpCriteriaComponent extends BaseCriteriaComponent implements OnIni
 		public projectService: ProjectService,
 		private dmpService: DmpService,
 		public formBuilder: FormBuilder,
-		private dialog: MatDialog
+		private dialog: MatDialog,
+		fb: FormBuilder
 	) {
 		super(new ValidationErrorModel());
+		this.options = fb.group({
+			getDrafts: false,
+			getFinalized: false,
+			getDmpStatuses: false,
+			floatLabel: 'auto',
+		});
 	}
 
 	ngOnInit() {

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

@@ -1,7 +1,7 @@
 <div class="main-content">
 	<div class="container-fluid">
 		<div class="card">
-			<div class="card-header card-header-plain d-flex">
+			<div class="card-header card-header-blue d-flex">
 				<div class="card-desc d-flex flex-column justify-content-center">
 					<h4 class="card-title">{{'DMP-LISTING.TITLE' | translate}} {{titlePrefix}}</h4>
 					<p class="card-category">{{'DMP-LISTING.SUBTITLE' | translate}}</p>
@@ -14,14 +14,15 @@
 			</div>
 			<div class="card-body table-responsive">
 				<div class="dmp-listing row">
+					<div class="col-3">
 						<app-dmp-criteria-component [showProject]="showProject" class="col-auto"></app-dmp-criteria-component>
-					<div class="col">
+					</div>
-						<mat-card class="mat-card">
+					<div class="col-9">
-							<div class="row" *ngFor="let item of listingItems">
+						<div class="row" *ngFor="let item of listingItems; let last = last">
-								<app-dmp-listing-item-component class="col-12" [dmp]="item" (onClick)="rowClicked($event)"></app-dmp-listing-item-component>
+							<app-dmp-listing-item-component *ngIf="!last" class="col-12" [dmp]="item" (onClick)="rowClicked($event)"></app-dmp-listing-item-component>
+							<app-dmp-listing-item-component *ngIf="last" class="col-12" [showDivider]="false" [dmp]="item" (onClick)="rowClicked($event)"></app-dmp-listing-item-component>
 						</div>
 						<mat-paginator #paginator [length]="totalCount" [pageSizeOptions]="[10, 25, 100]"></mat-paginator>
-						</mat-card>
 					</div>
 				</div>
 			</div>

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

@@ -1,6 +1,36 @@
 .dmp-listing {
-
   .mat-card {
     margin: 1em 0;
   }
 }
+
+::ng-deep .mat-paginator-container {
+  flex-direction: row-reverse !important;
+  justify-content: space-between !important;
+  background-color: #f6f6f6;
+  height: 30px;
+  min-height: 30px !important;
+}
+
+::ng-deep .mat-paginator-page-size {
+  height: 43px;
+}
+
+::ng-deep .mat-icon-button {
+  height: 30px !important;
+  font-size: 12px !important;
+}
+
+::ng-deep .mat-paginator-range-label {
+  margin: 15px 32px 0 24px !important;
+}
+
+::ng-deep .mat-paginator-range-actions {
+  width: 55% !important;
+  min-height: 43px !important;
+  justify-content: space-between;
+}
+
+::ng-deep .mat-paginator-navigation-previous {
+  margin-left: auto !important;
+}

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

@@ -16,6 +16,12 @@ h4 {
 	font-weight: 500;
 }
 
+h6 {
+    font-size: 0.85rem;
+    text-transform: uppercase;
+    font-weight: 500;
+}
+
 .max-width-136 {
 	max-width: 136px;
 }