MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

Adds search on dmp listing, fixes bug on load more

This commit is contained in:
apapachristou 2020-07-07 15:54:12 +03:00
parent b94363ba5b
commit d3e7f57cbd
4 changed files with 56 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,13 +3,13 @@
<h6 class="filters-title">{{'CRITERIA.FILTERS'| translate}}</h6>
<div class="row" style="justify-content: center;">
<!-- 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"
[formControl]="formGroup.get('like')">
<mat-error *ngIf="formGroup.get('like').hasError('backendError')">
{{formGroup.get('like').getError('backendError').message}}</mat-error>
<mat-icon matSuffix class="style-icon">search</mat-icon>
</mat-form-field>
</mat-form-field> -->
<!-- End of Search Filter -->
<!-- Visibility Filter-->

15
dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.html
View File

@ -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>
</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 class="listing row pb-2">
<!-- <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>
</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">
<app-dmp-listing-item-component [showDivider]="i != (listingItems.length - 1)" [dmp]="item" [isPublic]="isPublic"></app-dmp-listing-item-component>
</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>
</div>
</div>

31
dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.scss
View File

@ -186,17 +186,32 @@
}
.filter-btn {
position: fixed;
right: 0px;
z-index: 100;
width: 37px;
position: fixed;
right: 0px;
z-index: 100;
width: 37px;
}
.filter-btn button {
color: white;
background-color: #23BCBA;
width: 37px;
height: 45px;
color: white;
background-color: #23bcba;
width: 37px;
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 {

19
dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.ts
View File

@ -24,6 +24,7 @@ import { UiNotificationService, SnackBarNotificationLevel } from '@app/core/serv
import { isNullOrUndefined } from 'util';
import { AuthService } from '@app/core/services/auth/auth.service';
import { DmpCriteriaDialogComponent } from './criteria/dmp-criteria-dialog.component';
import { FormBuilder, FormControl } from '@angular/forms';
@Component({
@ -53,6 +54,9 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread
pageSize: number = 5;
criteria: DmpCriteria;
public formGroup = new FormBuilder().group({
like: new FormControl()
})
constructor(
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) {
@ -206,6 +214,17 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread
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) {
// this.router.navigate(['/plans/overview/' + dmp.id]);
// }