[angular-16-irish-monitor] admin - manage stakeholders: add paging and filter by 'type' for stakeholders and defaultStakeholders
This commit is contained in:
parent
03b61d1fc6
commit
cba56ca4c0
|
|
@ -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()">
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in New Issue