Adds search on dmp listing, fixes bug on load more
This commit is contained in:
parent
b94363ba5b
commit
d3e7f57cbd
|
@ -3,13 +3,13 @@
|
||||||
<h6 class="filters-title">{{'CRITERIA.FILTERS'| translate}}</h6>
|
<h6 class="filters-title">{{'CRITERIA.FILTERS'| translate}}</h6>
|
||||||
<div class="row" style="justify-content: center;">
|
<div class="row" style="justify-content: center;">
|
||||||
<!-- Search Filter-->
|
<!-- Search Filter-->
|
||||||
<mat-form-field class="col-11 search">
|
<!-- <mat-form-field class="col-11 search">
|
||||||
<input matInput placeholder="{{'CRITERIA.DMP.LIKE'| translate}}" name="likeCriteria"
|
<input matInput placeholder="{{'CRITERIA.DMP.LIKE'| translate}}" name="likeCriteria"
|
||||||
[formControl]="formGroup.get('like')">
|
[formControl]="formGroup.get('like')">
|
||||||
<mat-error *ngIf="formGroup.get('like').hasError('backendError')">
|
<mat-error *ngIf="formGroup.get('like').hasError('backendError')">
|
||||||
{{formGroup.get('like').getError('backendError').message}}</mat-error>
|
{{formGroup.get('like').getError('backendError').message}}</mat-error>
|
||||||
<mat-icon matSuffix class="style-icon">search</mat-icon>
|
<mat-icon matSuffix class="style-icon">search</mat-icon>
|
||||||
</mat-form-field>
|
</mat-form-field> -->
|
||||||
<!-- End of Search Filter -->
|
<!-- End of Search Filter -->
|
||||||
|
|
||||||
<!-- Visibility Filter-->
|
<!-- Visibility Filter-->
|
||||||
|
|
|
@ -8,18 +8,27 @@
|
||||||
<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>
|
<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>
|
</div>
|
||||||
<div class="filter-btn" [style.right]="dialog.openDialogs.length > 0 ? '456px' : '0px'" [style.width]="hasScrollbar() ? '52px' : '37px'" (click)="openFiltersDialog()"><button mat-raised-button class="p-0"><mat-icon class="mr-4">filter_alt</mat-icon></button></div>
|
<div class="filter-btn" [style.right]="dialog.openDialogs.length > 0 ? '456px' : '0px'" [style.width]="hasScrollbar() ? '52px' : '37px'" (click)="openFiltersDialog()"><button mat-raised-button class="p-0">
|
||||||
|
<mat-icon class="mr-4">filter_alt</mat-icon>
|
||||||
|
</button></div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div class="listing row pb-2">
|
<div class="listing row pb-2">
|
||||||
<!-- <div class="col-12 col-sm-12 col-md-3">
|
<!-- <div class="col-12 col-sm-12 col-md-3">
|
||||||
<app-dmp-criteria-component [showGrant]="showGrant" [isPublic]="isPublic" class="col-auto"></app-dmp-criteria-component>
|
<app-dmp-criteria-component [showGrant]="showGrant" [isPublic]="isPublic" class="col-auto"></app-dmp-criteria-component>
|
||||||
</div> -->
|
</div> -->
|
||||||
<div class="col-md-12 col-sm-12 col-md-9 pt-4">
|
<!-- Search Filter-->
|
||||||
|
<mat-form-field appearance="outline" class="search-form ml-auto col-auto" floatLabel="never">
|
||||||
|
<mat-icon matSuffix>search</mat-icon>
|
||||||
|
<input matInput placeholder="{{'CRITERIA.DMP.LIKE'| translate}}" name="likeCriteria" [formControl]="formGroup.get('like')">
|
||||||
|
<mat-error *ngIf="formGroup.get('like').hasError('backendError')">{{formGroup.get('like').getError('backendError').message}}</mat-error>
|
||||||
|
</mat-form-field>
|
||||||
|
<!-- End of Search Filter -->
|
||||||
|
<div class="col-md-12 col-sm-12 col-md-9">
|
||||||
<div *ngFor="let item of listingItems; let i = index">
|
<div *ngFor="let item of listingItems; let i = index">
|
||||||
<app-dmp-listing-item-component [showDivider]="i != (listingItems.length - 1)" [dmp]="item" [isPublic]="isPublic"></app-dmp-listing-item-component>
|
<app-dmp-listing-item-component [showDivider]="i != (listingItems.length - 1)" [dmp]="item" [isPublic]="isPublic"></app-dmp-listing-item-component>
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="listingItems && listingItems.length > 0 && this.startIndex < this.totalCount - 1" class="d-flex justify-content-center">
|
<div *ngIf="listingItems && listingItems.length > 0 && this.startIndex < this.totalCount - 1 && this.pageSize < this.totalCount - 1" class="d-flex justify-content-center">
|
||||||
<button type="button" class="btn-load-more" (click)="loadMore()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button>
|
<button type="button" class="btn-load-more" (click)="loadMore()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -186,17 +186,32 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-btn {
|
.filter-btn {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
right: 0px;
|
right: 0px;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
width: 37px;
|
width: 37px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-btn button {
|
.filter-btn button {
|
||||||
color: white;
|
color: white;
|
||||||
background-color: #23BCBA;
|
background-color: #23bcba;
|
||||||
width: 37px;
|
width: 37px;
|
||||||
height: 45px;
|
height: 45px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-form {
|
||||||
|
// font-size: 12px;
|
||||||
|
text-align: left;
|
||||||
|
width: 17.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-form mat-icon {
|
||||||
|
color: #129d99;
|
||||||
|
}
|
||||||
|
|
||||||
|
::ng-deep .mat-form-field-wrapper {
|
||||||
|
background-color: white !important;
|
||||||
|
padding-bottom: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
// .bot-paginator {
|
// .bot-paginator {
|
||||||
|
|
|
@ -24,6 +24,7 @@ import { UiNotificationService, SnackBarNotificationLevel } from '@app/core/serv
|
||||||
import { isNullOrUndefined } from 'util';
|
import { isNullOrUndefined } from 'util';
|
||||||
import { AuthService } from '@app/core/services/auth/auth.service';
|
import { AuthService } from '@app/core/services/auth/auth.service';
|
||||||
import { DmpCriteriaDialogComponent } from './criteria/dmp-criteria-dialog.component';
|
import { DmpCriteriaDialogComponent } from './criteria/dmp-criteria-dialog.component';
|
||||||
|
import { FormBuilder, FormControl } from '@angular/forms';
|
||||||
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
|
@ -53,6 +54,9 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread
|
||||||
pageSize: number = 5;
|
pageSize: number = 5;
|
||||||
|
|
||||||
criteria: DmpCriteria;
|
criteria: DmpCriteria;
|
||||||
|
public formGroup = new FormBuilder().group({
|
||||||
|
like: new FormControl()
|
||||||
|
})
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private dmpService: DmpService,
|
private dmpService: DmpService,
|
||||||
|
@ -153,6 +157,10 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
this.formGroup.get('like').valueChanges
|
||||||
|
.pipe(takeUntil(this._destroyed))
|
||||||
|
.subscribe(x => this.controlModified());
|
||||||
}
|
}
|
||||||
|
|
||||||
public refresh(resetPages = false) {
|
public refresh(resetPages = false) {
|
||||||
|
@ -206,6 +214,17 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread
|
||||||
this.refresh();
|
this.refresh();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
controlModified(): void {
|
||||||
|
// this.clearErrorModel();
|
||||||
|
// if (this.refreshCallback != null &&
|
||||||
|
// (this.formGroup.get('like').value == null || this.formGroup.get('like').value.length === 0 || this.formGroup.get('like').value.length > 2)
|
||||||
|
// ) {
|
||||||
|
// setTimeout(() => this.refreshCallback(true));
|
||||||
|
// }
|
||||||
|
this.criteria.like = this.formGroup.get("like").value;
|
||||||
|
this.refresh();
|
||||||
|
}
|
||||||
|
|
||||||
// rowClicked(dmp: DmpListingModel) {
|
// rowClicked(dmp: DmpListingModel) {
|
||||||
// this.router.navigate(['/plans/overview/' + dmp.id]);
|
// this.router.navigate(['/plans/overview/' + dmp.id]);
|
||||||
// }
|
// }
|
||||||
|
|
Loading…
Reference in New Issue