update manage projects page to use paging and search through new communities API

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

@@ -94,12 +94,12 @@
                   <div class="uk-card-body">
                     <result-preview [properties]="properties" [showOrganizations]="true"
                                     [showSubjects]="true" [result]="getResultPreview(result)"
-                                    [externalUrl]="projectUrl">
+                                    [externalUrl]="projectUrl" [hasLink]="false">
                     </result-preview>
                   </div>
                   <div class="uk-card-footer uk-padding-remove-vertical">
                     <div class="uk-grid uk-grid-small uk-flex-nowrap uk-grid-divider uk-flex-right" uk-grid>
-                      <div *ngIf="!getCommunityProject(result)">
+                      <div *ngIf="!result['isPart']">
                         <div class="uk-padding-small uk-padding-remove-horizontal">
                           <a (click)="addProject(result)" class="uk-button uk-button-link uk-flex uk-flex-middle">
                             <icon name="add" [flex]="true"></icon>
@@ -109,7 +109,7 @@
                           </a>
                         </div>
                       </div>
-                      <div *ngIf="getCommunityProject(result)">
+                      <div *ngIf="result['isPart']">
                         <div class="uk-padding-small uk-padding-remove-horizontal">
                           <a (click)="removeProject(result)"
                              class="uk-button uk-button-link uk-flex uk-flex-middle">

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

@@ -19,6 +19,7 @@ import {CommunityInfo} from "../../openaireLibrary/connect/community/communityIn
 import {OpenaireEntities} from "../../openaireLibrary/utils/properties/searchFields";
 import {Filter, Value} from "../../openaireLibrary/searchPages/searchUtils/searchHelperClasses.class";
 import {ClearCacheService} from "../../openaireLibrary/services/clear-cache.service";
+import {SearchCommunityProjectsService} from "../../openaireLibrary/connect/projects/searchProjects.service";
 
 declare var UIkit;
 
@@ -38,7 +39,7 @@ export class AddProjectsComponent implements OnInit {
   public errorCodes: ErrorCodes;
   public openaireSearchUtils: SearchUtilsClass = new SearchUtilsClass();
   @Output() communityProjectsChanged = new EventEmitter();
-  @Input() communityProjects = [];
+  // @Input() communityProjects = [];
   public openaireProjects = [];
   public queryParameters: string = "";
 
@@ -58,7 +59,7 @@ export class AddProjectsComponent implements OnInit {
 
   constructor(private route: ActivatedRoute, private _router: Router, private _searchProjectsService: SearchProjectsService,
               private _manageCommunityProjectsService: ManageCommunityProjectsService,
-              private _clearCacheService: ClearCacheService,
+              private _clearCacheService: ClearCacheService, private _searchCommunityProjectsService: SearchCommunityProjectsService,
               private _fb: UntypedFormBuilder) {
     this.errorCodes = new ErrorCodes();
     this.openaireSearchUtils.status = this.errorCodes.LOADING;
@@ -121,15 +122,17 @@ export class AddProjectsComponent implements OnInit {
   public addProject(project: SearchResult) {
     this.subscriptions.push(this._manageCommunityProjectsService.addProject(this.properties, this.community.communityId, project).subscribe(
       data => {
-        this.communityProjects.push(data);
+        // this.communityProjects.push(data);
         this._clearCacheService.purgeBrowserCache(this.openaireEntities.PROJECT+" added", this.community.communityId);
+
         UIkit.notification(this.openaireEntities.PROJECT+' successfully added!', {
           status: 'success',
           timeout: 6000,
           pos: 'bottom-right'
         });
+        project["isPart"] = true;
         this.communityProjectsChanged.emit({
-          value: this.communityProjects,
+          value: project,
         });
       },
       err => {
@@ -140,19 +143,20 @@ export class AddProjectsComponent implements OnInit {
   }
 
   public removeProject(project: any) {
-    let communityProject = this.getCommunityProject(project);
+    // let communityProject = this.getCommunityProject(project);
-    this.subscriptions.push(this._manageCommunityProjectsService.removeProject(this.properties, this.community.communityId,  communityProject['openaireId']).subscribe(
+    this.subscriptions.push(this._manageCommunityProjectsService.removeProject(this.properties, this.community.communityId,  project['id']).subscribe(
       data => {
-        let index = this.communityProjects.indexOf(communityProject);
+        // let index = this.communityProjects.indexOf(communityProject);
-        this.communityProjects.splice(index, 1);
+        // this.communityProjects.splice(index, 1);
         this._clearCacheService.purgeBrowserCache(this.openaireEntities.PROJECT+" removed", this.community.communityId);
         UIkit.notification(this.openaireEntities.PROJECT+' successfully removed!', {
           status: 'success',
           timeout: 6000,
           pos: 'bottom-right'
         });
+        project["isPart"] = false;
         this.communityProjectsChanged.emit({
-          value: this.communityProjects,
+          value: project,
         });
       },
       err => {
@@ -162,16 +166,19 @@ export class AddProjectsComponent implements OnInit {
     ));
   }
 
-  public getCommunityProject(project: any): string {
+  public getCommunityProject(project: any) {
-    let index: number = 0;
+    this.subscriptions.push(this._searchCommunityProjectsService.searchProjectsWithPaging(this.properties, this.community.communityId, 1, this.resultsPerPage, project.id, null).subscribe(
-    for (let communityProject of this.communityProjects) {
+      data => {
-      if (communityProject.openaireId == project.id ||
+        if(data.totalElements > 0){
-        (project.code == communityProject.grantId && project.funderShortname == communityProject.funder)) {
+          project["isPart"] = true;
-        return communityProject;
+        }
+      },
+      err => {
+        console.error(err);
+        //TODO check erros (service not available, bad request)
+
       }
-      index++;
+    ));
-    }
-    return "";
   }
 
   getFunders() {
@@ -216,7 +223,9 @@ export class AddProjectsComponent implements OnInit {
         data => {
           this.openaireSearchUtils.totalResults = data[0];
           this.openaireProjects = data[1];
-
+          for(let project of this.openaireProjects){
+            this.getCommunityProject(project);
+          }
           this.openaireSearchUtils.status = this.errorCodes.DONE;
           if (this.openaireSearchUtils.totalResults == 0) {
             this.openaireSearchUtils.status = this.errorCodes.NONE;

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

@@ -16,12 +16,11 @@ import {CommunityService} from "../../openaireLibrary/connect/community/communit
 @Component({
   selector: 'manage-projects',
   template: `
-    <remove-projects #removeProjectsComponent (addProjects)="openAddProjects()" [communityProjects]="communityProjects"
+    <remove-projects #removeProjectsComponent (addProjects)="openAddProjects()"  
-                              [loading]="showLoadingInRemove" [community]="community"
+                              [loading]="showLoadingInRemove" [community]="community">
-                              (communityProjectsChanged)="communityProjectsChanged($event)">
     </remove-projects>
     <fs-modal #fsModalProjects>
-      <add-projects #addProjects [communityProjects]="communityProjects" [community]="community"
+      <add-projects #addProjects   [community]="community"
                              (communityProjectsChanged)="communityProjectsChanged($event)"></add-projects>
     </fs-modal>
   `
@@ -71,12 +70,13 @@ export class ManageProjectsComponent implements OnInit {
   }
 
   public communityProjectsChanged($event) {
-    this.communityProjects = $event.value;
+   /* this.communityProjects = $event.value;
     this.showLoadingInRemove = false;
 
     if (this.fullscreen.isOpen) {
       this.removeProjectsComponent.applyFilters();
       this.removeProjectsComponent.createFunderFilter();
-    }
+    }*/
+    this.removeProjectsComponent.getCommunityProjects();
   }
 }

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

@@ -24,11 +24,11 @@
   </div>
   <div inner>
     <div class="uk-margin-top">
-      <results-and-pages [type]="openaireEntiites.PROJECTS | lowercase" [page]="page" [pageSize]="resultsPerPage"
+      <results-and-pages [type]="openaireEntiites.PROJECTS | lowercase" [page]="communitySearchUtils.page" [pageSize]="resultsPerPage"
-                         [totalResults]="previewCommunityProjects.length"></results-and-pages>
+                         [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="allOptions.length > 0">
         <dropdown-filter #dropdownFilter dropdownClass="uk-width-medium uk-padding-small"
                          name="Filter by Funder" [count]="filterForm.get('funder').value.length">
           <h6 class="uk-margin-remove-bottom" title="Filter by Funder">Funder</h6>
@@ -44,20 +44,20 @@
             </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="previewCommunityProjects.length > 0"
+        <paging-no-load *ngIf="communitySearchUtils.totalResults> 0" [currentPage]="communitySearchUtils.page"
                         (pageChange)="updatePage($event)" [size]="resultsPerPage"
-                        [totalResults]="previewCommunityProjects.length" customClasses="uk-flex-right">
+                        [totalResults]="communitySearchUtils.totalResults" customClasses="uk-flex-right">
         </paging-no-load>
       </div>
     </div>
@@ -67,18 +67,17 @@
         <loading></loading>
       </div>
       <div *ngIf="!loading">
-
           <div class="uk-margin-medium-bottom">
             <div *ngIf="previewCommunityProjects.length == 0"
                  class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
               <div>No {{openaireEntiites.PROJECTS | lowercase}}
-                <span *ngIf="communityProjects.length == 0; else: notFound">for {{community.shortTitle}}</span>
+                <span *ngIf="communitySearchUtils.totalResults == 0; else: notFound">for {{community.shortTitle}}</span>
                 <ng-template #notFound>found</ng-template>
               </div>
             </div>
             <div *ngIf="previewCommunityProjects.length > 0"
                  class="uk-grid uk-grid-large uk-child-width-1-1 uk-child-width-1-2@m uk-margin-bottom" uk-grid uk-height-match="target: .uk-card-body">
-              <div *ngFor="let item of previewCommunityProjects.slice((page - 1)*resultsPerPage, page*resultsPerPage); let i=index">
+              <div *ngFor="let item of previewCommunityProjects; let i=index">
                 <div class="uk-card uk-card-default">
                   <div class="uk-card-body">
                     <h6 class="uk-margin-bottom">
@@ -124,7 +123,7 @@
             </div>
             <div class="uk-margin-small-top">
               <paging-no-load  [currentPage]="page"
-                               [totalResults]="previewCommunityProjects.length" [size]="resultsPerPage"
+                               [totalResults]="communitySearchUtils.totalResults" [size]="resultsPerPage"
                                (pageChange)="updatePage($event)" customClasses="uk-flex-right@m uk-flex-center">
               </paging-no-load>
             </div>

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

@@ -19,6 +19,7 @@ import {CommunityInfo} from "../../openaireLibrary/connect/community/communityIn
 import {HelperFunctions} from "../../openaireLibrary/utils/HelperFunctions.class";
 import {NotificationHandler} from "../../openaireLibrary/utils/notification-handler";
 import {ClearCacheService} from "../../openaireLibrary/services/clear-cache.service";
+import {debounceTime, distinctUntilChanged} from "rxjs/operators";
 
 @Component({
   selector: 'remove-projects',
@@ -35,7 +36,7 @@ export class RemoveProjectsComponent implements OnInit {
   public projectUrl = "https://" + ((properties.environment == "beta" || properties.environment == "development") ? "beta." : "") + "explore.openaire.eu" + properties.searchLinkToProject.split("?")[0];
 
   @Output() communityProjectsChanged = new EventEmitter();
-  @Input() public communityProjects = [];
+  // @Input() public communityProjects = [];
   public previewCommunityProjects = [];
   public communitySearchUtils: SearchUtilsClass = new SearchUtilsClass();
   public errorCodes: ErrorCodes;
@@ -87,21 +88,24 @@ export class RemoveProjectsComponent implements OnInit {
       sort: this._fb.control(this.sortOptions[0].value)
     });
 
-    this.subscriptions.push(this.filterForm.get('keyword').valueChanges.subscribe(value => {
+    this.subscriptions.push(this.filterForm.get('keyword').valueChanges.pipe(debounceTime(500), distinctUntilChanged()).subscribe(value => {
-      this.searchText = new RegExp(value, 'i');
       this.page = 1;
-      this.applyFilters();
+      this._getCommunityProjects(this.page, this.filterForm.get('keyword').value,null );
-    }));
 
+    }));
+/*
     this.subscriptions.push(this.filterForm.get('funder').valueChanges.subscribe(value => {
       this.page = 1;
-      this.applyFilters();
+      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.subscriptions.push(this.communityService.getCommunityAsObservable().subscribe(community => {
       if (community) {
@@ -111,7 +115,7 @@ export class RemoveProjectsComponent implements OnInit {
           + this.community.communityId + ".openaire.eu" + this.properties.searchLinkToProject.split("?")[0];
 
         this.keyword = '';
-        this._getCommunityProjects();
+        this._getCommunityProjects(1,this.keyword, null);
       }
     }));
   }
@@ -135,16 +139,18 @@ 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);
+        // let index = this.communityProjects.indexOf(this.selectedCommunityProject);
-        this.communityProjects.splice(index, 1);
+        // this.communityProjects.splice(index, 1);
-        this.applyFilters();
+        // this.applyFilters();
         this._clearCacheService.purgeBrowserCache(this.openaireEntiites.PROJECT+" removed", this.community.communityId);
         NotificationHandler.rise(OpenaireEntities.PROJECT+' successfully removed!');
-        this.communityProjectsChanged.emit({
+        // this.communityProjectsChanged.emit({
-          value: this.communityProjects,
+        //   value: this.communityProjects,
-        });
+        // });
-        this.communitySearchUtils.totalResults--;
+        // this.communitySearchUtils.totalResults--;
-        this.communitySearchUtils.page = 1;
+        // this.communitySearchUtils.page = 1;
+        this._getCommunityProjects(this.communitySearchUtils.page, this.keyword,null);
+
       },
       err => {
         this.handleError('An error has been occurred. Try again later!');
@@ -179,29 +185,21 @@ export class RemoveProjectsComponent implements OnInit {
     this.alertModalDeleteCommunity.okButtonText = "Yes";
     this.alertModalDeleteCommunity.open();
   }
-
+  public getCommunityProjects() {
-  public _getCommunityProjects() {
+  this._getCommunityProjects(this.communitySearchUtils.page, this.keyword,null );
+  }
+  public _getCommunityProjects(page, keyword, funder) {
     this.communitySearchUtils.status = this.errorCodes.LOADING;
-    this.communityProjects = [];
+    this.communitySearchUtils.page = page;
-    this.communitySearchUtils.totalResults = 0;
+    this.communitySearchUtils.keyword = keyword;
-    this.communitySearchUtils.page = 1;
+    this.subscriptions.push(this._searchCommunityProjectsService.searchProjectsWithPaging(this.properties, this.community.communityId, this.communitySearchUtils.page, this.resultsPerPage, this.communitySearchUtils.keyword, funder).subscribe(
-    this.communitySearchUtils.keyword = "";
-
-    this.subscriptions.push(this._searchCommunityProjectsService.searchProjects(this.properties, this.community.communityId).subscribe(
       data => {
-        this.communityProjects = data.content;
+        this.previewCommunityProjects = data.content;
-        this.previewCommunityProjects = this.communityProjects;
+        this.communitySearchUtils.totalResults = data.totalElements;
-        this.sort();
-
-        this.communitySearchUtils.totalResults = data.length;
         this.communitySearchUtils.status = this.errorCodes.DONE;
-
         this.communityProjectsChanged.emit({
-          value: this.communityProjects,
+          value:  this.communitySearchUtils.totalResults
         });
-
-        this.createFunderFilter();
-
         this.loading = false;
       },
       err => {
@@ -225,18 +223,19 @@ export class RemoveProjectsComponent implements OnInit {
     let funders: Set<string> = new Set<string>();
     this.allOptions = [];
     let i;
-    for (i = 0; i < this.communityProjects.length; 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 updatePage($event) {
     HelperFunctions.scroll();
     this.page = $event.value;
+    this._getCommunityProjects(this.page, this.filterForm.get('keyword').value, null);
   }
 
   addNew() {
@@ -244,7 +243,7 @@ export class RemoveProjectsComponent implements OnInit {
   }
 
   public applyFilters() {
-    this.previewCommunityProjects = this.communityProjects.filter(project => {
+    /*this.previewCommunityProjects = this.communityProjects.filter(project => {
       return (this.filterCommunityProjectByKeyword(project) && this.filterCommunityProjectByFunder(project));
     });
     // check paging here!!!
@@ -252,8 +251,10 @@ export class RemoveProjectsComponent implements OnInit {
       this.page = 1;
     }
 
-    this.sort();
+    this.sort();*/
+    this._getCommunityProjects(1, this.searchText.toString(),this.fundersCtrl.getRawValue() );
   }
+/*
 
   public filterCommunityProjectByKeyword(project): boolean {
     return this.searchText.toString() === ''
@@ -271,7 +272,9 @@ export class RemoveProjectsComponent implements OnInit {
     }
     return false;
   }
+*/
 
+/*
   private sort() {
     let sortOption: { sort: string, descending: boolean } = this.filterForm.get('sort').value;
 
@@ -299,6 +302,7 @@ export class RemoveProjectsComponent implements OnInit {
       return 0;
     });
   }
+*/
 
   public onSearchClose() {
     this.communitySearchUtils.keyword = this.filterForm.get('keyword').value;