[angular-16-irish-monitor] admin - manage stakeholders: add paging and filter by 'type' for stakeholders and defaultStakeholders

monitor-admin/manageStakeholders/manageStakeholders.component.html

@@ -11,7 +11,12 @@
   </div>
   <div actions>
     <div class="uk-section-xsmall">
-      <div class="uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle">
+      <div class="uk-flex uk-flex-center uk-flex-wrap uk-flex-middle" [ngClass]="properties.adminToolsPortalType == 'irish' ? 'uk-flex-between@m' : 'uk-flex-right@m'">
+        <div *ngIf="properties.adminToolsPortalType == 'irish'" class="uk-width-medium uk-margin-small-bottom">
+          <div input type="select" placeholder="Type"
+            [options]="typeOptions" [formInput]="filters.get('type')">
+          </div>
+        </div>
         <div search-input [searchControl]="filters.get('keyword')" [expandable]="true" placeholder="Search Profiles" searchInputClass="outer"
              class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1 uk-flex uk-flex-right"></div>
       </div>
@@ -24,9 +29,16 @@
     <div *ngIf="!loading" uk-height-match="target: .titleContainer; row: false">
 			<div uk-height-match="target: .logoContainer; row: false">
 				<div *ngIf="tab != 'profiles' && isCurator()" class="uk-section">
-					<h4>Profile Templates</h4>
+					<div class="uk-flex uk-flex-middle uk-flex-between uk-margin-small-bottom">
+            <h4 class="uk-margin-remove">Profile Templates</h4>
+            <paging-no-load *ngIf="displayDefaultStakeholders.length > pageSize"
+              (pageChange)="updateCurrentTemplatesPage($event)"
+              [currentPage]="currentTemplatesPage" [size]="pageSize"
+              [totalResults]="displayDefaultStakeholders.length">
+            </paging-no-load>
+          </div>
 					<div class="uk-grid uk-child-width-1-3@l uk-child-width-1-2@m uk-child-width-1-1 uk-grid-match" uk-grid>
-						<ng-template ngFor [ngForOf]="displayDefaultStakeholders" let-stakeholder>
+						<ng-template ngFor [ngForOf]="displayDefaultStakeholders.slice((currentTemplatesPage-1)*pageSize, currentTemplatesPage*pageSize)" let-stakeholder>
 							<ng-container *ngTemplateOutlet="stakeholderBox; context: {stakeholder:stakeholder}"></ng-container>
 						</ng-template>
 						<div *ngIf="!loading && isCurator()">
@@ -40,9 +52,16 @@
 					</h4>
 				</div>
 				<div *ngIf="tab != 'templates' && isManager()" class="uk-section">
-					<h4>Profiles</h4>
+					<div class="uk-flex uk-flex-middle uk-flex-between uk-margin-small-bottom">
+            <h4 class="uk-margin-remove">Profiles</h4>
+            <paging-no-load *ngIf="displayStakeholders.length > pageSize"
+              (pageChange)="updateCurrentPage($event)"
+              [currentPage]="currentPage" [size]="pageSize"
+              [totalResults]="displayStakeholders.length">
+            </paging-no-load>
+          </div>
 					<div class="uk-grid uk-grid-match uk-child-width-1-3@l uk-child-width-1-2@m uk-child-width-1-1" uk-grid>
-						<ng-template ngFor [ngForOf]="displayStakeholders" let-stakeholder>
+						<ng-template ngFor [ngForOf]="displayStakeholders.slice((currentPage-1)*pageSize, currentPage*pageSize)" let-stakeholder>
 							<ng-container *ngTemplateOutlet="stakeholderBox; context: {stakeholder:stakeholder}"></ng-container>
 						</ng-template>
 						<div *ngIf="!loading && isCurator()">

monitor-admin/manageStakeholders/manageStakeholders.component.ts

@@ -33,6 +33,16 @@ export class ManageStakeholdersComponent extends StakeholderBaseComponent implem
   public index: number;
   public user = null;
   public tab: Tab = 'all';
+  public currentPage: number = 1;
+  public currentTemplatesPage: number = 1;
+  public pageSize: number = 10;
+  public typeOptions: Option[] = [
+    {value: 'all', label: 'All'},
+    {value: 'country', label: 'National'},
+    {value: 'organization', label: 'RPO'},
+    {value: 'funder', label: 'RFO'},
+    {value: 'datasource', label: 'Repository Monitor'},
+  ];
   /**
    *  Filtered Stakeholders
    */
@@ -96,33 +106,45 @@ export class ManageStakeholdersComponent extends StakeholderBaseComponent implem
   private buildFilters() {
     this.filters = this.fb.group({
       status: this.fb.control('all'),
+      type: this.fb.control('all'),
       keyword: this.fb.control('')
     });
     this.subscriptions.push(this.filters.get('status').valueChanges.subscribe(value => {
-      this.onStatusChange(value);
+      this.filtering();
+    }));
+    this.subscriptions.push(this.filters.get('type').valueChanges.subscribe(value => {
+      this.filtering();
     }));
     this.subscriptions.push(this.filters.get('keyword').valueChanges.subscribe(value => {
-      this.onKeywordChange(value);
+      this.filtering();
     }));
   }
   
-  onStatusChange(value) {
+  // onStatusChange(value) {
-    this.displayDefaultStakeholders = this.filterStatus(this.defaultStakeholders, value);
+  //   this.displayDefaultStakeholders = this.filterStatus(this.defaultStakeholders, value);
-    this.displayStakeholders = this.filterStatus(this.stakeholders, value);
+  //   this.displayStakeholders = this.filterStatus(this.stakeholders, value);
-  }
+  // }
   
-  onKeywordChange(value) {
+  // onKeywordChange(value) {
-    this.displayDefaultStakeholders = this.filterByKeyword(this.defaultStakeholders, value);
+  //   this.displayDefaultStakeholders = this.filterByKeyword(this.defaultStakeholders, value);
-    this.displayStakeholders = this.filterByKeyword(this.stakeholders, value);
+  //   this.displayStakeholders = this.filterByKeyword(this.stakeholders, value);
-  }
+  // }
   
-  private filterStatus(stakeholders: Stakeholder[], value): Stakeholder[] {
+  private filterByStatus(stakeholders: Stakeholder[], value): Stakeholder[] {
     if (value === 'all') {
       return stakeholders;
     } else {
       return stakeholders.filter(stakeholder => stakeholder.visibility == value);
     }
   }
+
+  private filterByType(stakeholders: Stakeholder[], value) {
+    if(value == 'all') {
+      return stakeholders;
+    } else {
+      return stakeholders.filter(item => item.type == value);
+    }
+  }
   
   private filterByKeyword(stakeholders: Stakeholder[], value): Stakeholder[] {
     if (!value) {
@@ -137,6 +159,26 @@ export class ManageStakeholdersComponent extends StakeholderBaseComponent implem
       );
     }
   }
+
+  filtering() {
+    let keyword = this.filters.get('keyword').value;
+    let type = this.filters.get('type').value;
+    let status = this.filters.get('status').value;
+    let displayStakeholders = this.stakeholders;
+    let displayDefaultStakeholders = this.defaultStakeholders;
+
+    displayStakeholders = this.filterByKeyword(displayStakeholders, keyword);
+    displayStakeholders = this.filterByType(displayStakeholders, type);
+    displayStakeholders = this.filterByStatus(displayStakeholders, status);
+    displayDefaultStakeholders = this.filterByKeyword(displayDefaultStakeholders, keyword);
+    displayDefaultStakeholders = this.filterByType(displayDefaultStakeholders, type);
+    displayDefaultStakeholders = this.filterByStatus(displayDefaultStakeholders, status);
+
+    this.displayStakeholders = displayStakeholders;
+    this.displayDefaultStakeholders = displayDefaultStakeholders;
+    this.currentPage = 1;
+    this.currentTemplatesPage = 1;
+  }
   
   public editStakeholder(stakeholder: Stakeholder = null, isDefault: boolean = false) {
     if (isDefault) {
@@ -279,4 +321,12 @@ export class ManageStakeholdersComponent extends StakeholderBaseComponent implem
     return this.stakeholderUtils.types.slice(0, this.stakeholderUtils.types.length - 1).map(type => type.label).join(', ') +
         ' or ' + this.stakeholderUtils.types[this.stakeholderUtils.types.length - 1].label
   }
+
+  public updateCurrentPage($event) {
+    this.currentPage = $event.value;
+  }
+
+  public updateCurrentTemplatesPage($event) {
+    this.currentTemplatesPage = $event.value;
+  }
 }

monitor-admin/manageStakeholders/manageStakeholders.module.ts

@@ -19,6 +19,7 @@ import {
 } from "../../dashboard/sharedComponents/sidebar/sidebar-mobile-toggle/sidebar-mobile-toggle.module";
 import {SliderTabsModule} from "../../sharedComponents/tabs/slider-tabs.module";
 import {EditStakeholderModule} from "../general/edit-stakeholder/edit-stakeholder.module";
+import {PagingModule} from "../../utils/paging.module";
 
 @NgModule({
   declarations: [ManageStakeholdersComponent],
@@ -36,7 +37,8 @@ import {EditStakeholderModule} from "../general/edit-stakeholder/edit-stakeholde
     LogoUrlPipeModule,
     SearchInputModule,
     SidebarMobileToggleModule,
-    SliderTabsModule
+    SliderTabsModule,
+    PagingModule
   ],
   providers: [
     PreviousRouteRecorder,