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

This commit is contained in:
Alex Martzios 2023-12-28 13:28:39 +02:00
parent 03b61d1fc6
commit cba56ca4c0
3 changed files with 88 additions and 17 deletions

View File

@ -11,7 +11,12 @@
</div> </div>
<div actions> <div actions>
<div class="uk-section-xsmall"> <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" <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> 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> </div>
@ -24,9 +29,16 @@
<div *ngIf="!loading" uk-height-match="target: .titleContainer; row: false"> <div *ngIf="!loading" uk-height-match="target: .titleContainer; row: false">
<div uk-height-match="target: .logoContainer; row: false"> <div uk-height-match="target: .logoContainer; row: false">
<div *ngIf="tab != 'profiles' && isCurator()" class="uk-section"> <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> <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-container *ngTemplateOutlet="stakeholderBox; context: {stakeholder:stakeholder}"></ng-container>
</ng-template> </ng-template>
<div *ngIf="!loading && isCurator()"> <div *ngIf="!loading && isCurator()">
@ -40,9 +52,16 @@
</h4> </h4>
</div> </div>
<div *ngIf="tab != 'templates' && isManager()" class="uk-section"> <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> <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-container *ngTemplateOutlet="stakeholderBox; context: {stakeholder:stakeholder}"></ng-container>
</ng-template> </ng-template>
<div *ngIf="!loading && isCurator()"> <div *ngIf="!loading && isCurator()">

View File

@ -33,6 +33,16 @@ export class ManageStakeholdersComponent extends StakeholderBaseComponent implem
public index: number; public index: number;
public user = null; public user = null;
public tab: Tab = 'all'; 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 * Filtered Stakeholders
*/ */
@ -96,27 +106,31 @@ export class ManageStakeholdersComponent extends StakeholderBaseComponent implem
private buildFilters() { private buildFilters() {
this.filters = this.fb.group({ this.filters = this.fb.group({
status: this.fb.control('all'), status: this.fb.control('all'),
type: this.fb.control('all'),
keyword: this.fb.control('') keyword: this.fb.control('')
}); });
this.subscriptions.push(this.filters.get('status').valueChanges.subscribe(value => { 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.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') { if (value === 'all') {
return stakeholders; return stakeholders;
} else { } else {
@ -124,6 +138,14 @@ export class ManageStakeholdersComponent extends StakeholderBaseComponent implem
} }
} }
private filterByType(stakeholders: Stakeholder[], value) {
if(value == 'all') {
return stakeholders;
} else {
return stakeholders.filter(item => item.type == value);
}
}
private filterByKeyword(stakeholders: Stakeholder[], value): Stakeholder[] { private filterByKeyword(stakeholders: Stakeholder[], value): Stakeholder[] {
if (!value) { if (!value) {
return stakeholders; return stakeholders;
@ -138,6 +160,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) { public editStakeholder(stakeholder: Stakeholder = null, isDefault: boolean = false) {
if (isDefault) { if (isDefault) {
this.index = (stakeholder) ? this.defaultStakeholders.findIndex(value => value._id === stakeholder._id) : -1; this.index = (stakeholder) ? this.defaultStakeholders.findIndex(value => value._id === stakeholder._id) : -1;
@ -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(', ') + 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 ' or ' + this.stakeholderUtils.types[this.stakeholderUtils.types.length - 1].label
} }
public updateCurrentPage($event) {
this.currentPage = $event.value;
}
public updateCurrentTemplatesPage($event) {
this.currentTemplatesPage = $event.value;
}
} }

View File

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