Community projects: add filtering and sorting

src/app/pages/projects/remove-projects.component.html

@@ -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">
+            <li *ngFor="let option of previewFunderOptions">
-                <label (click)="select(option.value, $event, dropdownFilter)" class="uk-flex uk-flex-middle">
+              <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"

src/app/pages/projects/remove-projects.component.ts

@@ -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[] = [];
+  allFunderOptions: Option[] = [];
-  allOptions: Option[] = [];
+  previewFunderOptions: Option[] = [];
   sortOptions: Option[] = [
-    //{label:"Title (desc) ", value:{ sort: "title",descending: true }},
+    {label: "Title ", value: {sort: "name", descending: false}},
-    {label: "Title ", value: {sort: "title", descending: false}},
+    {label: "Grant ID ", value: {sort: "grantId", 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: "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 _getCommunityFunders() {
-  public createFunderFilter(): void {
+    this.subscriptions.push(this._searchCommunityProjectsService.getProjectFunders(this.properties, this.community.communityId).subscribe(
-    let funders: Set<string> = new Set<string>();
+      data => {
-    this.allOptions = [];
+         for (let funder of data) {
-    let i;
+          this.allFunderOptions.push({label: funder, value: {id: funder, label: funder}});
-   /* for (i = 0; i < this.communityProjects.length; i++) {
+        }
-      let funder = this.communityProjects[i].funder;
+        this.previewFunderOptions =[...this.allFunderOptions];
-      if (funder && !funders.has(funder)) {
+      },
-        funders.add(funder);
+      err => {
-        this.allOptions.push({label: funder, value: {id: funder, label: funder}});
       }
-    }*/
+    ));
   }
 
   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)) {
+      if(event.target.checked) {
-        this.selectedFunders.push(value);
+        this.filterForm.get("funder").setValue(option.value);
-        this.fundersCtrl.setControl(this.fundersCtrl.value.length, this._fb.control(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);
+        this.filterForm.get("funder").setValue(null);
-        if(index !== -1) {
+        this._getCommunityProjects(1, this.filterForm.get('keyword').value,null);
-          this.selectedFunders.splice(index, 1);
+        this.previewFunderOptions =[...this.allFunderOptions];
-          this.fundersCtrl.removeAt(index);
-        }
       }
     }
   }
 
   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;
   }
 }