[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 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()">

View File

@ -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) {
this.displayDefaultStakeholders = this.filterStatus(this.defaultStakeholders, value);
this.displayStakeholders = this.filterStatus(this.stakeholders, value);
}
// onStatusChange(value) {
// this.displayDefaultStakeholders = this.filterStatus(this.defaultStakeholders, value);
// this.displayStakeholders = this.filterStatus(this.stakeholders, value);
// }
onKeywordChange(value) {
this.displayDefaultStakeholders = this.filterByKeyword(this.defaultStakeholders, value);
this.displayStakeholders = this.filterByKeyword(this.stakeholders, value);
}
// onKeywordChange(value) {
// this.displayDefaultStakeholders = this.filterByKeyword(this.defaultStakeholders, 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;
}
}

View File

@ -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,