Community projects: add filtering and sorting
This commit is contained in:
parent
b54fa1eaf9
commit
0b703bceec
|
@ -28,31 +28,32 @@
|
|||
[totalResults]="communitySearchUtils.totalResults"></results-and-pages>
|
||||
</div>
|
||||
<div class="uk-grid uk-flex-middle uk-margin-medium-top" uk-grid>
|
||||
<!--<div *ngIf="allOptions.length > 0">
|
||||
<div *ngIf="allFunderOptions.length > 0">
|
||||
<dropdown-filter #dropdownFilter dropdownClass="uk-width-medium uk-padding-small"
|
||||
name="Filter by Funder" [count]="filterForm.get('funder').value.length">
|
||||
name="Filter by Funder" [count]="filterForm.get('funder').value?1:null">
|
||||
<h6 class="uk-margin-remove-bottom" title="Filter by Funder">Funder</h6>
|
||||
<ul class="uk-list uk-margin-remove-bottom">
|
||||
<li *ngFor="let option of allOptions">
|
||||
<a class="uk-link-text">
|
||||
<label (click)="select(option.value, $event, dropdownFilter)" class="uk-flex uk-flex-middle">
|
||||
|
||||
<li *ngFor="let option of previewFunderOptions">
|
||||
<a class="uk-link-text" >
|
||||
<label (click)="select(option, $event, dropdownFilter)" class="uk-flex uk-flex-middle">
|
||||
<input class="uk-checkbox"
|
||||
type="checkbox" [checked]="isSelected(option.value)">
|
||||
type="checkbox" [checked]="isSelected(option.value.id)">
|
||||
<span class="uk-margin-small-left">{{option.label}}</span>
|
||||
</label>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</dropdown-filter>
|
||||
</div>-->
|
||||
<!--<div>
|
||||
</div>
|
||||
<div>
|
||||
<div input inputClass="flat x-small" placeholder="Sort by"
|
||||
[disabled]="previewCommunityProjects.length == 0"
|
||||
[formInput]="filterForm.get('sort')"
|
||||
type="select" [options]="sortOptions"
|
||||
class="uk-width-small">
|
||||
</div>
|
||||
</div>-->
|
||||
</div>
|
||||
<!-- </div>-->
|
||||
<div class="uk-width-expand@l uk-width-1-1 uk-flex uk-flex-right@m uk-flex-center">
|
||||
<paging-no-load *ngIf="communitySearchUtils.totalResults> 0" [currentPage]="communitySearchUtils.page"
|
||||
|
|
|
@ -52,17 +52,13 @@ export class RemoveProjectsComponent implements OnInit {
|
|||
/* Search */
|
||||
@ViewChild('searchInputComponent') searchInputComponent: SearchInputComponent;
|
||||
filterForm: UntypedFormGroup;
|
||||
public fundersCtrl: UntypedFormArray;
|
||||
private searchText: RegExp = new RegExp('');
|
||||
public keyword: string = '';
|
||||
selectedFunders: string[] = [];
|
||||
allOptions: Option[] = [];
|
||||
allFunderOptions: Option[] = [];
|
||||
previewFunderOptions: Option[] = [];
|
||||
sortOptions: Option[] = [
|
||||
//{label:"Title (desc) ", value:{ sort: "title",descending: true }},
|
||||
{label: "Title ", value: {sort: "title", descending: false}},
|
||||
//{label:"Grant ID (desc) ", value:{ sort: "grant",descending: true }},
|
||||
{label: "Grant ID ", value: {sort: "grant", descending: false}},
|
||||
//{label:"Funder (desc) ", value:{ sort: "funder",descending: true }},
|
||||
{label: "Title ", value: {sort: "name", descending: false}},
|
||||
{label: "Grant ID ", value: {sort: "grantId", descending: false}},
|
||||
{label: "Funder ", value: {sort: "funder", descending: false}}
|
||||
];
|
||||
|
||||
|
@ -81,31 +77,22 @@ export class RemoveProjectsComponent implements OnInit {
|
|||
ngOnInit() {
|
||||
this.communitySearchUtils.keyword = "";
|
||||
|
||||
this.fundersCtrl = this._fb.array([]);
|
||||
this.filterForm = this._fb.group({
|
||||
keyword: [''],
|
||||
funder: this.fundersCtrl,
|
||||
funder: this._fb.control(null),
|
||||
sort: this._fb.control(this.sortOptions[0].value)
|
||||
});
|
||||
|
||||
this.subscriptions.push(this.filterForm.get('keyword').valueChanges.pipe(debounceTime(500), distinctUntilChanged()).subscribe(value => {
|
||||
this.page = 1;
|
||||
this._getCommunityProjects(this.page, this.filterForm.get('keyword').value,null );
|
||||
this._getCommunityProjects(this.page, this.filterForm.get('keyword').value,(this.filterForm.get("funder").value? this.filterForm.get("funder").value.id:null),
|
||||
this.filterForm.get("sort").value.sort );
|
||||
|
||||
}));
|
||||
/*
|
||||
this.subscriptions.push(this.filterForm.get('funder').valueChanges.subscribe(value => {
|
||||
this.page = 1;
|
||||
this._getCommunityProjects(1, this.searchText.toString(),this.fundersCtrl.getRawValue() );
|
||||
|
||||
}));*/
|
||||
/*
|
||||
|
||||
this.subscriptions.push(this.filterForm.get('sort').valueChanges.subscribe(value => {
|
||||
this.page = 1;
|
||||
this.sort();
|
||||
this._getCommunityProjects(this.page, this.filterForm.get('keyword').value, this.filterForm.get("funder").value? this.filterForm.get("funder").value.id:null, this.filterForm.get("sort").value.sort );
|
||||
}));
|
||||
*/
|
||||
|
||||
this.subscriptions.push(this.communityService.getCommunityAsObservable().subscribe(community => {
|
||||
if (community) {
|
||||
|
@ -115,6 +102,7 @@ export class RemoveProjectsComponent implements OnInit {
|
|||
+ this.community.communityId + ".openaire.eu" + this.properties.searchLinkToProject.split("?")[0];
|
||||
|
||||
this.keyword = '';
|
||||
this._getCommunityFunders();
|
||||
this._getCommunityProjects(1,this.keyword, null);
|
||||
}
|
||||
}));
|
||||
|
@ -139,16 +127,9 @@ export class RemoveProjectsComponent implements OnInit {
|
|||
public confirmedDeleteProject(data: any) {
|
||||
this.subscriptions.push(this._manageCommunityProjectsService.removeProject(this.properties, this.community.communityId, this.selectedCommunityProject.openaireId).subscribe(
|
||||
data => {
|
||||
// let index = this.communityProjects.indexOf(this.selectedCommunityProject);
|
||||
// this.communityProjects.splice(index, 1);
|
||||
// this.applyFilters();
|
||||
|
||||
this._clearCacheService.purgeBrowserCache(this.openaireEntiites.PROJECT+" removed", this.community.communityId);
|
||||
NotificationHandler.rise(OpenaireEntities.PROJECT+' successfully removed!');
|
||||
// this.communityProjectsChanged.emit({
|
||||
// value: this.communityProjects,
|
||||
// });
|
||||
// this.communitySearchUtils.totalResults--;
|
||||
// this.communitySearchUtils.page = 1;
|
||||
this._getCommunityProjects(this.communitySearchUtils.page, this.keyword,null);
|
||||
|
||||
},
|
||||
|
@ -188,11 +169,11 @@ export class RemoveProjectsComponent implements OnInit {
|
|||
public getCommunityProjects() {
|
||||
this._getCommunityProjects(this.communitySearchUtils.page, this.keyword,null );
|
||||
}
|
||||
public _getCommunityProjects(page, keyword, funder) {
|
||||
public _getCommunityProjects(page, keyword, funder, orderBy = "name" ) {
|
||||
this.communitySearchUtils.status = this.errorCodes.LOADING;
|
||||
this.communitySearchUtils.page = page;
|
||||
this.communitySearchUtils.keyword = keyword;
|
||||
this.subscriptions.push(this._searchCommunityProjectsService.searchProjectsWithPaging(this.properties, this.community.communityId, this.communitySearchUtils.page, this.resultsPerPage, this.communitySearchUtils.keyword, funder).subscribe(
|
||||
this.subscriptions.push(this._searchCommunityProjectsService.searchProjectsWithPaging(this.properties, this.community.communityId, this.communitySearchUtils.page, this.resultsPerPage, this.communitySearchUtils.keyword, funder, orderBy).subscribe(
|
||||
data => {
|
||||
this.previewCommunityProjects = data.content;
|
||||
this.communitySearchUtils.totalResults = data.totalElements;
|
||||
|
@ -213,23 +194,21 @@ export class RemoveProjectsComponent implements OnInit {
|
|||
} else {
|
||||
this.communitySearchUtils.status = this.errorCodes.NOT_AVAILABLE;
|
||||
}
|
||||
|
||||
this.loading = false;
|
||||
}
|
||||
));
|
||||
}
|
||||
|
||||
public createFunderFilter(): void {
|
||||
let funders: Set<string> = new Set<string>();
|
||||
this.allOptions = [];
|
||||
let i;
|
||||
/* for (i = 0; i < this.communityProjects.length; i++) {
|
||||
let funder = this.communityProjects[i].funder;
|
||||
if (funder && !funders.has(funder)) {
|
||||
funders.add(funder);
|
||||
this.allOptions.push({label: funder, value: {id: funder, label: funder}});
|
||||
public _getCommunityFunders() {
|
||||
this.subscriptions.push(this._searchCommunityProjectsService.getProjectFunders(this.properties, this.community.communityId).subscribe(
|
||||
data => {
|
||||
for (let funder of data) {
|
||||
this.allFunderOptions.push({label: funder, value: {id: funder, label: funder}});
|
||||
}
|
||||
this.previewFunderOptions =[...this.allFunderOptions];
|
||||
},
|
||||
err => {
|
||||
}
|
||||
}*/
|
||||
));
|
||||
}
|
||||
|
||||
public updatePage($event) {
|
||||
|
@ -242,67 +221,6 @@ export class RemoveProjectsComponent implements OnInit {
|
|||
this.addProjects.emit();
|
||||
}
|
||||
|
||||
public applyFilters() {
|
||||
/*this.previewCommunityProjects = this.communityProjects.filter(project => {
|
||||
return (this.filterCommunityProjectByKeyword(project) && this.filterCommunityProjectByFunder(project));
|
||||
});
|
||||
// check paging here!!!
|
||||
if (this.previewCommunityProjects.slice((this.page - 1) * this.resultsPerPage, this.page * this.resultsPerPage).length == 0) {
|
||||
this.page = 1;
|
||||
}
|
||||
|
||||
this.sort();*/
|
||||
this._getCommunityProjects(1, this.searchText.toString(),this.fundersCtrl.getRawValue() );
|
||||
}
|
||||
/*
|
||||
|
||||
public filterCommunityProjectByKeyword(project): boolean {
|
||||
return this.searchText.toString() === ''
|
||||
|| ((project.name + " " + project.acronym + " " + project.grantId + " " + project.funder)).match(this.searchText) != null;
|
||||
}
|
||||
|
||||
public filterCommunityProjectByFunder(project): boolean {
|
||||
if (this.fundersCtrl.getRawValue().length == 0) {
|
||||
return true;
|
||||
}
|
||||
for (let funder of this.fundersCtrl.getRawValue()) {
|
||||
if (project.funder.toLowerCase().indexOf(funder.label.toLowerCase()) != -1) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
*/
|
||||
|
||||
/*
|
||||
private sort() {
|
||||
let sortOption: { sort: string, descending: boolean } = this.filterForm.get('sort').value;
|
||||
|
||||
this.previewCommunityProjects.sort((left, right): number => {
|
||||
if (sortOption.sort == "title") {
|
||||
if ((left.name + left.acronym) > (right.name + right.acronym)) {
|
||||
return sortOption.descending ? -1 : 1;
|
||||
} else if ((left.name + left.acronym) < (right.name + right.acronym)) {
|
||||
return sortOption.descending ? 1 : -1;
|
||||
}
|
||||
} else if (sortOption.sort == "grant") {
|
||||
if (left.grantId > right.grantId) {
|
||||
return sortOption.descending ? -1 : 1;
|
||||
} else if (left.grantId < right.grantId) {
|
||||
return sortOption.descending ? 1 : -1;
|
||||
}
|
||||
} else if (sortOption.sort == "funder") {
|
||||
if (left.funder > right.funder) {
|
||||
return sortOption.descending ? -1 : 1;
|
||||
} else if (left.funder < right.funder) {
|
||||
return sortOption.descending ? 1 : -1;
|
||||
}
|
||||
}
|
||||
|
||||
return 0;
|
||||
});
|
||||
}
|
||||
*/
|
||||
|
||||
public onSearchClose() {
|
||||
this.communitySearchUtils.keyword = this.filterForm.get('keyword').value;
|
||||
|
@ -317,23 +235,23 @@ export class RemoveProjectsComponent implements OnInit {
|
|||
NotificationHandler.rise(message, 'danger');
|
||||
}
|
||||
|
||||
select(value: string, event, dropdownFilter: DropdownFilterComponent) {
|
||||
select(option, event, dropdownFilter: DropdownFilterComponent) {
|
||||
console.log(option)
|
||||
if(event.target instanceof HTMLInputElement) {
|
||||
dropdownFilter.closeDropdown();
|
||||
if(event.target.checked && !this.selectedFunders.find(entity => value === entity)) {
|
||||
this.selectedFunders.push(value);
|
||||
this.fundersCtrl.setControl(this.fundersCtrl.value.length, this._fb.control(value));
|
||||
if(event.target.checked) {
|
||||
this.filterForm.get("funder").setValue(option.value);
|
||||
this._getCommunityProjects(1, this.filterForm.get('keyword').value, this.filterForm.get('funder').value.id );
|
||||
this.previewFunderOptions =[option];
|
||||
} else if(!event.target.checked) {
|
||||
let index = this.selectedFunders.indexOf(value);
|
||||
if(index !== -1) {
|
||||
this.selectedFunders.splice(index, 1);
|
||||
this.fundersCtrl.removeAt(index);
|
||||
}
|
||||
this.filterForm.get("funder").setValue(null);
|
||||
this._getCommunityProjects(1, this.filterForm.get('keyword').value,null);
|
||||
this.previewFunderOptions =[...this.allFunderOptions];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
isSelected(value: string) {
|
||||
return this.filterForm && this.filterForm.get('funder').value.find(funder => funder === value)
|
||||
return this.filterForm && this.filterForm.get('funder').value && this.filterForm.get('funder').value.id === value;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue