MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

redesign of admin-dashboard pages

This commit is contained in:
Alex Martzios 2022-03-22 17:47:38 +02:00
parent e678ca1072
commit 59ff682af7
9 changed files with 252 additions and 222 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
dashboard/entity/entities.component.html
View File

@ -1,65 +1,73 @@
<div page-content class="admin-pages">
<div header>
<admin-tabs tab="entity" [portal]="portal"></admin-tabs>
<div *ngIf="!showLoading" class="uk-grid" uk-grid>
<div class="uk-width-1-1">
<ul *ngIf="!isPortalAdministrator" class="uk-subnav uk-subnav-pill">
<li [class.uk-active]="filterForm.get('status').value === 'all'"><a
(click)="filterForm.get('status').setValue('all')"><span
class="title">All entities</span></a></li>
<li [class.uk-active]="filterForm.get('status').value === 'enabled'"><a
(click)="filterForm.get('status').setValue('enabled')"><span class="title">Enabled</span></a></li>
<li [class.uk-active]="filterForm.get('status').value === 'disabled'"><a
(click)="filterForm.get('status').setValue('disabled')"><span class="title">Disabled</span></a></li>
</ul>
</div>
<div class="uk-width-1-1 uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-grid uk-margin-remove-top"
uk-grid>
<div #searchInputComponent search-input [control]="filterForm.controls.keyword" [showSearch]="false"
placeholder="Search entity"
[selected]="selectedKeyword" (closeEmitter)="onSearchClose()" (resetEmitter)="reset()"
[bordered]="true" colorClass="uk-text-secondary"
class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1"></div>
<div *ngIf="isPortalAdministrator">
<a (click)="newEntity()"
class="uk-flex uk-flex-middle uk-text-uppercase">
<button class="large uk-icon-button uk-button-secondary">
<icon name="add"></icon>
</button>
<button class="uk-button uk-button-link uk-margin-small-left uk-text-secondary">Add entity</button>
</a>
</div>
</div>
</div>
<div *ngIf="!showLoading && checkboxes.length > 0"
class="uk-margin-remove-top uk-margin-small-left uk-margin-small-bottom uk-display-inline"
[attr.uk-tooltip]="getSelectedEntities().length == 0 ? 'pos:left; cls: uk-active' : null"
title="Select at least one entity"><input id="checkAll" type="checkbox" (click)="selectAll()"
[ngModel]="getSelectedEntities().length ==checkboxes.length"/>
<span *ngIf="getSelectedEntities().length > 0" class="uk-margin-left uk-text-muted">
{{getSelectedEntities().length}} entities selected </span>
<a class="uk-margin-left ">Actions </a>
<div uk-dropdown="mode: click">
<ul class="uk-nav uk-dropdown-nav"
[attr.uk-tooltip]="getSelectedEntities().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
title="Select at least one entity">
<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedEntities().length == 0 ? 'uk-disabled' : ''"
(click)="toggleEntities(true,getSelectedEntities())"><i></i> Enable
</a></li>
<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedEntities().length == 0 ? 'uk-disabled' : ''"
(click)="toggleEntities(false,getSelectedEntities())"><i></i> Disable
</a>
</li>
<li *ngIf="isPortalAdministrator"><a [class]="getSelectedEntities().length == 0 ? 'uk-disabled' : ''"
(click)="confirmDeleteSelectedEntities()"><i></i> Delete </a></li>
</ul>
</div>
</div>
<div page-content class="admin-pages" (stickyEmitter)="stickyPageHeader = $event">
<div header>
<div class="uk-margin-top info" [class.uk-active]="stickyPageHeader">
<div class="uk-margin-remove uk-text-primary-gradient uk-text-bold uk-h6">Admin Dashboard</div>
<h1 class="uk-h4 uk-margin-remove">{{name}}</h1>
</div>
<div class="uk-margin">
<admin-tabs tab="entity" [portal]="portal"></admin-tabs>
</div>
</div>
<div inner>
<div *ngIf="showLoading" class="uk-position-center">
<loading></loading>
</div>
<div *ngIf="!showLoading">
<div class="uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-grid uk-margin-medium-top uk-margin-medium-bottom"
uk-grid>
<div #searchInputComponent search-input [control]="filterForm.controls.keyword" [showSearch]="false"
placeholder="Search entity"
[selected]="selectedKeyword" (closeEmitter)="onSearchClose()" (resetEmitter)="reset()"
[bordered]="true" colorClass="uk-text-secondary"
class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1"></div>
<div *ngIf="isPortalAdministrator">
<a (click)="newEntity()"
class="uk-flex uk-flex-middle uk-text-uppercase">
<button class="large uk-icon-button uk-button-secondary">
<icon name="add"></icon>
</button>
<button class="uk-button uk-button-link uk-margin-small-left uk-text-secondary">Add entity</button>
</a>
</div>
</div>
<div class="uk-width-1-1">
<ul *ngIf="!isPortalAdministrator" class="uk-subnav uk-subnav-pill">
<li [class.uk-active]="filterForm.get('status').value === 'all'"><a
(click)="filterForm.get('status').setValue('all')"><span
class="title">All entities</span></a></li>
<li [class.uk-active]="filterForm.get('status').value === 'enabled'"><a
(click)="filterForm.get('status').setValue('enabled')"><span class="title">Enabled</span></a></li>
<li [class.uk-active]="filterForm.get('status').value === 'disabled'"><a
(click)="filterForm.get('status').setValue('disabled')"><span class="title">Disabled</span></a></li>
</ul>
</div>
</div>
<div *ngIf="!showLoading && checkboxes.length > 0" class="uk-padding">
<div
class="uk-display-inline"
[attr.uk-tooltip]="getSelectedEntities().length == 0 ? 'pos:left; cls: uk-active' : null"
title="Select at least one entity"><input id="checkAll" type="checkbox" (click)="selectAll()"
[ngModel]="getSelectedEntities().length ==checkboxes.length"/>
<span *ngIf="getSelectedEntities().length > 0" class="uk-margin-left uk-text-muted">
{{getSelectedEntities().length}} entities selected </span>
<a class="uk-margin-left ">Actions </a>
<div uk-dropdown="mode: click">
<ul class="uk-nav uk-dropdown-nav"
[attr.uk-tooltip]="getSelectedEntities().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
title="Select at least one entity">
<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedEntities().length == 0 ? 'uk-disabled' : ''"
(click)="toggleEntities(true,getSelectedEntities())"><i></i> Enable
</a></li>
<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedEntities().length == 0 ? 'uk-disabled' : ''"
(click)="toggleEntities(false,getSelectedEntities())"><i></i> Disable
</a>
</li>
<li *ngIf="isPortalAdministrator"><a [class]="getSelectedEntities().length == 0 ? 'uk-disabled' : ''"
(click)="confirmDeleteSelectedEntities()"><i></i> Delete </a></li>
</ul>
</div>
</div>
</div>
<div *ngIf="!showLoading">
<table *ngIf="checkboxes.length > 0 " class="uk-table uk-table-striped uk-table-hover uk-table-large">
<thead class="uk-card-header">
@ -99,7 +107,7 @@
</tbody>
</table>
<div *ngIf="checkboxes.length == 0"
class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-top uk-margin-bottom uk-text-bold">
<div>No entities found</div>
</div>
</div>

18
dashboard/entity/entities.component.ts
View File

@ -13,6 +13,7 @@ import {AlertModal} from "../../utils/modal/alert";
import {SearchInputComponent} from "../../sharedComponents/search-input/search-input.component";
import {StringUtils} from "../../utils/string-utils.class";
import {Title} from "@angular/platform-browser";
import {StakeholderService} from '../../monitor/services/stakeholder.service';
declare var UIkit;
@ -38,6 +39,7 @@ export class EntitiesComponent implements OnInit {
public communities: Portal[] = [];
public portal: string;
public name: string;
public toggleIds: string[];
public toggleStatus: boolean;
@ -50,11 +52,13 @@ export class EntitiesComponent implements OnInit {
private index: number;
public selectedKeyword: string;
@ViewChild('searchInputComponent') searchInputComponent: SearchInputComponent;
public stickyPageHeader: boolean = false;
constructor(private element: ElementRef, private route: ActivatedRoute,
private _router: Router, private title: Title,
private _helpContentService: HelpContentService,
private userManagementService: UserManagementService, private _fb: FormBuilder) {
private userManagementService: UserManagementService, private _fb: FormBuilder,
private stakeholderService: StakeholderService) {
}
ngOnInit() {
@ -74,7 +78,17 @@ export class EntitiesComponent implements OnInit {
if (this.route.snapshot.data.portal) {
this.title.setTitle(StringUtils.capitalize(this.portal) + ' | Entities');
} else if (this.route.snapshot.params[this.route.snapshot.data.param]) {
this.title.setTitle(this.portal.toUpperCase() + ' | Entities');
if(this.route.snapshot.data.param === 'stakeholder') {
this.subscriptions.push(this.stakeholderService.getStakeholderAsObservable().subscribe(stakeholder => {
if(stakeholder) {
this.name = stakeholder.name;
this.title.setTitle(stakeholder.name + ' | Entities');
}
}));
} else {
// TODO: for portals as well
this.title.setTitle(this.portal.toUpperCase() + ' | Entities');
}
} else {
this.title.setTitle('Administrator Dashboard | Entities');
}

112
dashboard/page/pages.component.html
View File

@ -1,7 +1,37 @@
<div page-content>
<div page-content (stickyEmitter)="stickyPageHeader = $event">
<div header>
<admin-tabs tab="page" [portal]="portal"></admin-tabs>
<div *ngIf="!showLoading" class="uk-grid" uk-grid>
<div class="uk-margin-top info" [class.uk-active]="stickyPageHeader">
<div class="uk-margin-remove uk-text-primary-gradient uk-text-bold uk-h6">Admin Dashboard</div>
<h1 class="uk-h4 uk-margin-remove">{{name}}</h1>
</div>
<div class="uk-margin">
<admin-tabs tab="page" [portal]="portal"></admin-tabs>
</div>
</div>
<div inner>
<div *ngIf="showLoading" class="uk-position-center">
<loading></loading>
</div>
<div *ngIf="!showLoading">
<div
class="uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-grid uk-margin-medium-top uk-margin-medium-bottom"
uk-grid>
<div #searchInputComponent search-input [control]="filterForm.controls.keyword" [showSearch]="false"
placeholder="Search page"
[selected]="selectedKeyword" (closeEmitter)="onSearchClose()" (resetEmitter)="reset()"
[bordered]="true" colorClass="uk-text-secondary"
class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1"></div>
<div *ngIf="isPortalAdministrator">
<a (click)="newPage()"
class="uk-flex uk-flex-middle uk-text-uppercase">
<button class="large uk-icon-button uk-button-secondary">
<icon name="add"></icon>
</button>
<button class="uk-button uk-button-link uk-margin-small-left uk-text-secondary">Add page</button>
</a>
</div>
</div>
<div class="uk-width-1-1">
<ul class="uk-subnav uk-subnav-pill">
<li [class.uk-active]="filterForm.get('type').value === 'all'"><a
@ -11,55 +41,33 @@
(click)="filterForm.get('type').setValue(type.value)"><span>{{type.label}}</span></a></li>
</ul>
</div>
<div
class="uk-width-1-1 uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-grid uk-margin-remove-top"
uk-grid>
<div #searchInputComponent search-input [control]="filterForm.controls.keyword" [showSearch]="false"
placeholder="Search page"
[selected]="selectedKeyword" (closeEmitter)="onSearchClose()" (resetEmitter)="reset()"
[bordered]="true" colorClass="uk-text-secondary"
class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1"></div>
<div *ngIf="isPortalAdministrator">
<a (click)="newPage()"
class="uk-flex uk-flex-middle uk-text-uppercase">
<button class="large uk-icon-button uk-button-secondary">
<icon name="add"></icon>
</button>
<button class="uk-button uk-button-link uk-margin-small-left uk-text-secondary">Add page</button>
</a>
</div>
</div>
</div>
<div *ngIf="!showLoading && checkboxes.length > 0"
class="uk-padding uk-padding-remove-bottom uk-padding-remove-top uk-margin-remove-top uk-margin-small-bottom uk-display-inline"
[attr.uk-tooltip]="getSelectedPages().length == 0 ? 'pos:left; cls: uk-active' : null"
title="Select at least one page"><input id="checkAll" type="checkbox" (click)="selectAll()"
[ngModel]="getSelectedPages().length ==checkboxes.length"/>
<span *ngIf="getSelectedPages().length > 0" class="uk-margin-left uk-text-muted">
{{getSelectedPages().length}} pages selected </span>
<a class="uk-margin-left">Actions</a>
<div uk-dropdown="mode: click">
<ul class="uk-nav uk-dropdown-nav"
[attr.uk-tooltip]="getSelectedPages().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
title="Select at least one page">
<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
(click)="togglePages(true,getSelectedPages())"><i></i> Enable
</a></li>
<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
(click)="togglePages(false,getSelectedPages())"><i></i> Disable
</a>
</li>
<li *ngIf="isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
(click)="confirmDeleteSelectedPages()"><i></i> Delete </a></li>
</ul>
</div>
</div>
</div>
<div inner>
<div *ngIf="showLoading" class="uk-position-center">
<loading></loading>
</div>
<div *ngIf="!showLoading && checkboxes.length > 0" class="uk-padding">
<div
class="uk-display-inline"
[attr.uk-tooltip]="getSelectedPages().length == 0 ? 'pos:left; cls: uk-active' : null"
title="Select at least one page"><input id="checkAll" type="checkbox" (click)="selectAll()"
[ngModel]="getSelectedPages().length ==checkboxes.length"/>
<span *ngIf="getSelectedPages().length > 0" class="uk-margin-left uk-text-muted">
{{getSelectedPages().length}} pages selected </span>
<a class="uk-margin-left">Actions</a>
<div uk-dropdown="mode: click">
<ul class="uk-nav uk-dropdown-nav"
[attr.uk-tooltip]="getSelectedPages().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
title="Select at least one page">
<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
(click)="togglePages(true,getSelectedPages())"><i></i> Enable
</a></li>
<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
(click)="togglePages(false,getSelectedPages())"><i></i> Disable
</a>
</li>
<li *ngIf="isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
(click)="confirmDeleteSelectedPages()"><i></i> Delete </a></li>
</ul>
</div>
</div>
</div>
<div *ngIf="!showLoading">
<ul *ngIf="checkboxes.length > 0" class="uk-list pages">
<li *ngFor="let check of checkboxes; let i=index" class="uk-card uk-card-default uk-margin-bottom">
@ -134,7 +142,7 @@
</ul>
<div *ngIf="checkboxes.length == 0"
class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-top uk-margin-bottom uk-text-bold">
<div>No pages found</div>
</div>
</div>

20
dashboard/page/pages.component.ts
View File

@ -16,12 +16,13 @@ import {AlertModal} from '../../utils/modal/alert';
import {SearchInputComponent} from '../../sharedComponents/search-input/search-input.component';
import {Title} from '@angular/platform-browser';
import {StringUtils} from '../../utils/string-utils.class';
import {StakeholderService} from '../../monitor/services/stakeholder.service';
declare var UIkit;
@Component({
selector: 'pages',
templateUrl: './pages.component.html',
templateUrl: './pages.component.html'
})
export class PagesComponent implements OnInit {
@ -42,6 +43,7 @@ export class PagesComponent implements OnInit {
public keyword: string = '';
public portal: string;
public name: string;
public pagesType: string;
public properties: EnvProperties = properties;
@ -65,11 +67,13 @@ export class PagesComponent implements OnInit {
@ViewChild('searchInputComponent') searchInputComponent: SearchInputComponent;
pageHelpContentsCount = {};
pageClassContentsCount = {};
public stickyPageHeader: boolean = false;
constructor(private element: ElementRef, private route: ActivatedRoute,
private title: Title,
private _router: Router, private _helpContentService: HelpContentService,
private userManagementService: UserManagementService, private _fb: FormBuilder) {
private userManagementService: UserManagementService, private _fb: FormBuilder,
private stakeholderService: StakeholderService) {
}
ngOnInit() {
@ -94,7 +98,17 @@ export class PagesComponent implements OnInit {
if (this.route.snapshot.data.portal) {
this.title.setTitle(StringUtils.capitalize(this.portal) + ' | Pages');
} else if (this.route.snapshot.params[this.route.snapshot.data.param]) {
this.title.setTitle(this.portal.toUpperCase() + ' | Pages');
if(this.route.snapshot.data.param === 'stakeholder') {
this.subscriptions.push(this.stakeholderService.getStakeholderAsObservable().subscribe(stakeholder => {
if(stakeholder) {
this.name = stakeholder.name;
this.title.setTitle(stakeholder.name + ' | Pages');
}
}));
} else {
// TODO: for portals as well
this.title.setTitle(this.portal.toUpperCase() + ' | Pages');
}
} else {
this.title.setTitle('Administrator Dashboard | Pages');
}

2
dashboard/sharedComponents/admin-tabs/admin-tabs.component.ts
View File

@ -8,7 +8,7 @@ import { properties } from 'src/environments/environment';
@Component({
selector: 'admin-tabs',
template: `
<ul class="uk-tab uk-flex uk-flex-center uk-flex-left@m">
<ul class="uk-tab">
<li *ngIf="isPortalAdmin && !portal" [class.uk-active]="tab === 'portal'"><a routerLink="../portals"><span class="title">Portals</span></a></li>
<li [class.uk-active]="tab === 'page'"><a routerLink="../pages"><span class="title">Pages</span></a></li>
<li [class.uk-active]="tab === 'entity'"><a routerLink="../entities"><span class="title">Entities</span></a></li>

121
dashboard/users/role-users/role-users.component.html
View File

@ -1,47 +1,42 @@
<div page-content>
<div page-content (stickyEmitter)="emitStickyEvent($event)">
<div header>
<ng-content></ng-content>
<div class="uk-grid uk-flex uk-flex-middle" uk-grid>
<div class="uk-width-expand@m uk-width-1-1 uk-flex uk-flex-left@m uk-flex-center">
<ul class="uk-subnav uk-subnav-pill">
<li [class.uk-active]="showCurrent" (click)="showCurrent = true">
<a class="uk-text-capitalize">{{role}}s</a>
</li>
<li [class.uk-active]="!showCurrent" (click)="showCurrent = false">
<a>Pending {{role}}s</a>
</li>
</ul>
</div>
<div [class.uk-invisible]="loadActive || loadPending"
class="uk-width-auto@m uk-width-1-1 uk-child-width-auto@m uk-child-width-1-1 uk-grid uk-flex-right@m uk-flex-center" uk-grid>
<div *ngIf="showCurrent" search-input [control]="filterForm.get('active')" [showSearch]="false" [placeholder]="'Search ' + role + 's'"
[bordered]="true" colorClass="uk-text-secondary">
</div>
<div *ngIf="!showCurrent" search-input [control]="filterForm.get('active')" [showSearch]="false" [placeholder]="'Search invitations'"
[bordered]="true" colorClass="uk-text-secondary">
</div>
<a *ngIf="exists" class="uk-text-uppercase uk-flex uk-flex-middle uk-flex-center" [attr.uk-tooltip]="inviteDisableMessage">
<button class="uk-icon-button large uk-button-secondary" [disabled]="loadPending || !!inviteDisableMessage" (click)="openInviteModal()">
<icon name="person_add"></icon>
</button>
<button class="uk-button uk-button-link uk-margin-small-left" [class.uk-text-secondary]="!loadPending && !inviteDisableMessage"
[disabled]="loadPending || !!inviteDisableMessage" (click)="openInviteModal()">
Invite {{role}}
</button>
</a>
<a *ngIf="!exists && isPortalAdmin" class="uk-text-uppercase uk-flex uk-flex-middle uk-flex-center">
<button class="uk-icon-button large uk-button-secondary" (click)="openCreateRoleModal()">
<icon name="person_add"></icon>
</button>
<button class="uk-button uk-button-link uk-margin-small-left uk-text-secondary" (click)="openCreateRoleModal()">Create Group</button>
</a>
</div>
</div>
</div>
<div inner>
<div *ngIf="loadActive || loadPending" class="uk-position-center">
<loading></loading>
<div *ngIf="loadActive || loadPending" class="uk-position-center">
<loading></loading>
</div>
<div [class.uk-invisible]="loadActive || loadPending"
class="uk-width-auto@m uk-width-1-1 uk-grid uk-flex-middle uk-flex-right@m uk-flex-center uk-margin-medium-top uk-margin-medium-bottom uk-margin-remove-left" uk-grid>
<div *ngIf="showCurrent" search-input [control]="filterForm.get('active')" [showSearch]="false" [placeholder]="'Search ' + role + 's'"
[bordered]="true" colorClass="uk-text-secondary">
</div>
<div *ngIf="!showCurrent" search-input [control]="filterForm.get('active')" [showSearch]="false" [placeholder]="'Search invitations'"
[bordered]="true" colorClass="uk-text-secondary">
</div>
<div>
<button *ngIf="exists" class="uk-button uk-button-default uk-text-primary uk-flex uk-flex-middle" [attr.uk-tooltip]="inviteDisableMessage"
[disabled]="loadPending || !!inviteDisableMessage" (click)="openInviteModal()">
<icon name="person_add" [flex]="true" type="filled"></icon>
<span class="uk-margin-small-left uk-text-bold uk-text-uppercase">Invite {{role}}</span>
</button>
<button *ngIf="!exists && isPortalAdmin" class="uk-button uk-button-default uk-text-primary uk-flex uk-flex-middle"
(click)="openCreateRoleModal()">
<icon name="person_add" [flex]="true" type="filled"></icon>
<span class="uk-margin-small-left uk-text-bold uk-text-uppercase">Create Group</span>
</button>
</div>
</div>
<div class="uk-flex uk-flex-left@m uk-flex-center">
<ul class="uk-subnav uk-subnav-pill">
<li [class.uk-active]="showCurrent" (click)="showCurrent = true">
<a class="uk-text-capitalize">{{role}}s</a>
</li>
<li [class.uk-active]="!showCurrent" (click)="showCurrent = false">
<a>Pending {{role}}s</a>
</li>
</ul>
</div>
<div *ngIf="!loadActive && !loadPending">
<div *ngIf="(showCurrent && showActive.length == 0) || (!showCurrent && showPending.length == 0)"
class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
@ -59,38 +54,22 @@
[page]="pendingPage" [pageSize]="pageSize"
[totalResults]="showPending.length">
</no-load-paging>
<div class="uk-card uk-card-default uk-card-body uk-text-small uk-margin-bottom"
*ngFor="let item of (showCurrent)?(currentActivePage):(currentPendingPage)">
<div class="uk-grid uk-grid-divider uk-flex-middle" uk-grid>
<div class="uk-width-expand@m uk-width-1-1">
<div class="uk-padding-small uk-padding-remove-horizontal">
<span class="uk-text-muted">Email: </span>
<span class="uk-text-bold">{{(showCurrent) ? item.email : item}}</span>
</div>
</div>
<div *ngIf="isCurator || !showCurrent" class="uk-width-auto@m uk-width-1-1">
<div class="uk-width-1-1 uk-flex uk-flex-center">
<div class="uk-padding-small uk-padding-remove-horizontal">
<button (click)="openDeleteModal(item)" class="uk-button action uk-flex uk-flex-middle" [disabled]="role === 'member' && item.isManager"
[attr.uk-tooltip]="(role === 'member' && item.isManager)?'This user is a manager and cannot be removed.':null">
<icon name="remove_circle_outline" [flex]="true"></icon>
<span class="uk-margin-small-left">{{showCurrent ? ('Remove ' + role) : 'Cancel invitation'}}</span>
</button>
</div>
</div>
</div>
</div>
</div>
<no-load-paging *ngIf="showCurrent" [type]="(showActive.length > 1)?(role + 's'):role"
(pageChange)="updateActivePage($event)"
[page]="activePage" [pageSize]="pageSize"
[totalResults]="showActive.length">
</no-load-paging>
<no-load-paging *ngIf="!showCurrent" [type]="role + ' ' + (showPending.length > 1?'invitations':'invitation')"
(pageChange)="updatePendingPage($event)"
[page]="pendingPage" [pageSize]="pageSize"
[totalResults]="showPending.length">
</no-load-paging>
<div class="uk-grid uk-grid-large uk-child-width-1-1@s uk-child-width-1-2@m uk-margin-top" uk-grid>
<div *ngFor="let item of (showCurrent)?(currentActivePage):(currentPendingPage)">
<div class="uk-card uk-card-default">
<div class="uk-card-body">
<span class="uk-text-bold uk-text-large">{{(showCurrent) ? item.email : item}}</span>
</div>
<div *ngIf="isCurator || !showCurrent" class="uk-card-footer uk-flex uk-flex-right">
<button (click)="openDeleteModal(item)" class="uk-button uk-button-link uk-flex uk-flex-middle" [disabled]="role === 'member' && item.isManager"
[attr.uk-tooltip]="(role === 'member' && item.isManager)?'This user is a manager and cannot be removed.':null">
<icon name="delete" [flex]="true" type="filled"></icon>
<span class="uk-margin-small-left uk-text-bold uk-text-uppercase">{{showCurrent ? 'Delete' : 'Cancel invitation'}}</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

11
dashboard/users/role-users/role-users.component.ts
View File

@ -1,4 +1,4 @@
import {Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewChild} from '@angular/core';
import {Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewChild} from '@angular/core';
import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
import {AlertModal} from "../../../utils/modal/alert";
import {UserRegistryService} from "../../../services/user-registry.service";
@ -37,6 +37,8 @@ export class RoleUsersComponent implements OnInit, OnDestroy, OnChanges {
public notificationFn: Function;
@Input()
public inviteDisableMessage: string;
@Output()
public stickyEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
public user: User = null;
public active: any[] = [];
public showActive: any[] = [];
@ -54,7 +56,7 @@ export class RoleUsersComponent implements OnInit, OnDestroy, OnChanges {
/** Paging */
activePage: number = 1;
pendingPage: number = 1;
pageSize: number = 5;
pageSize: number = 10;
/** Search */
filterForm: FormGroup;
@ViewChild('inviteModal') inviteModal: AlertModal;
@ -115,6 +117,7 @@ export class RoleUsersComponent implements OnInit, OnDestroy, OnChanges {
this.loadPending = true;
this.subs.push(this.userRegistryService.getActive(this.type, this.id, this.role).subscribe(users => {
this.active = users;
// users.forEach(user => this.active.push(user));
this.filterActiveBySearch(this.filterForm.value.active);
this.loadActive = false;
this.exists = true;
@ -328,4 +331,8 @@ export class RoleUsersComponent implements OnInit, OnDestroy, OnChanges {
this.showPending = this.pending.filter(pending => !value || pending.includes(value));
this.pendingPage = 1;
}
public emitStickyEvent(event) {
this.stickyEmitter.emit(event);
}
}

64
searchPages/searchUtils/no-load-paging.component.ts
View File

@ -1,38 +1,38 @@
import {Component, Input, Output, EventEmitter} from '@angular/core';
@Component({
selector: 'no-load-paging',
template: `
<div class="paging-hr searchPaging uk-margin-small-bottom">
<div class="uk-panel uk-margin-small-top uk-grid uk-flex uk-flex-middle">
<div class="uk-width-1-1@s uk-width-1-2@m uk-text-uppercase" *ngIf="type && totalResults">
<span class="uk-text-bold">{{totalResults | number}}</span>
<span class="uk-text-muted uk-text-uppercase"> {{type}}, page </span>
<span class="uk-text-bold">{{page}}</span>
<span class="uk-text-muted uk-text-uppercase"> of </span>
<span class="uk-text-bold">{{paging.getTotalPages() | number}}</span>
</div>
<div class="float-children-right-at-medium margin-small-top-at-small uk-width-expand">
<paging-no-load #paging [currentPage]="page"
customClasses="uk-margin-remove-bottom"
[totalResults]="totalResults" [size]="pageSize"
(pageChange)="updatePage($event)">
</paging-no-load>
</div>
</div>
</div>
`
selector: 'no-load-paging',
template: `
<div class="paging-hr searchPaging uk-margin-small-bottom">
<div class="uk-panel uk-margin-small-top uk-grid uk-flex uk-flex-middle uk-child-width-1-1 uk-child-width-1-2@m" uk-grid>
<h6 *ngIf="type && totalResults">
<span>{{totalResults | number}}</span>
<span class="uk-text-muted uk-text-capitalize"> {{type}}, page </span>
<span>{{page}}</span>
<span class="uk-text-muted"> of </span>
<span>{{paging.getTotalPages() | number}}</span>
</h6>
<div>
<paging-no-load #paging [currentPage]="page"
customClasses="uk-margin-remove-bottom"
[totalResults]="totalResults" [size]="pageSize"
(pageChange)="updatePage($event)">
</paging-no-load>
</div>
</div>
</div>
`
})
export class NoLoadPagingComponent {
@Input() type: string;
@Input() page: number = 1;
@Input() pageSize: number = 10;
@Input() totalResults: number;
@Output() pageChange: EventEmitter<any> = new EventEmitter<any>();
public updatePage(event) {
this.pageChange.emit({
value: event.value
});
}
@Input() type: string;
@Input() page: number = 1;
@Input() pageSize: number = 10;
@Input() totalResults: number;
@Output() pageChange: EventEmitter<any> = new EventEmitter<any>();
public updatePage(event) {
this.pageChange.emit({
value: event.value
});
}
}

2
utils/pagingFormatterNoLoad.component.ts
View File

@ -9,7 +9,7 @@ import {properties} from "../../../environments/environment";
selector: 'paging-no-load',
template: `
<ul disabled *ngIf=" ( getTotalPages() > 0 ) && (getTotalPages() > 1) && ( 0 < currentPage && currentPage <= getTotalPages() ) " [ngClass]="customClasses"
class="uk-pagination uk-flex uk-flex-middle">
class="uk-pagination uk-flex uk-flex-middle uk-flex-right">
<li *ngIf=" currentPage > 1" ><a (click)="onPage((currentPage -1))" aria-label="Previous">
<span><span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="chevron-left" ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.03" points="13 16 7 10 13 4"></polyline></svg></span></span></a></li>