Change icons for admin sidebar. Some changes in general, manage stakeholders, users and Indicators page

This commit is contained in:
Konstantinos Triantafyllou 2022-04-07 01:25:36 +03:00
parent a98a134a91
commit 3caedbc0ca
14 changed files with 255 additions and 359 deletions

View File

@ -24,7 +24,6 @@ const routes: Routes = [
{
path: 'admin',
loadChildren: () => import('./manageStakeholders/manageStakeholders.module').then(m => m.ManageStakeholdersModule),
data: {hasAdminMenu: true},
canActivateChild: [LoginGuard]
},
{

View File

@ -4,7 +4,7 @@
<div *ngIf="!loading">
<div class="sidebar_main_swipe" [class.sidebar_main_active]="open && hasSidebar"
[class.sidebar_mini]="!open && hasSidebar" [class.stakeholderPage]="isFrontPage">
<navbar *ngIf="properties && hasHeader" [properties]="properties" portal="monitor_dashboard" [header]="menuHeader"
<navbar *ngIf="hasHeader" portal="monitor_dashboard" [header]="menuHeader"
[userMenuItems]=userMenuItems [menuItems]="menuItems" [user]="user" [offCanvasFlip]="true"></navbar>
<div>
<dashboard-sidebar *ngIf="stakeholder && isFrontPage && hasSidebar" [items]="sideBarItems" [activeItem]="activeTopic?activeTopic.alias:null"></dashboard-sidebar>
@ -15,8 +15,7 @@
</div>
<bottom id="bottom" *ngIf="isFrontPage" [darkBackground]="false"
[centered]="true" [properties]="properties" [showMenuItems]="true"></bottom>
<role-verification *ngIf="stakeholder"
[id]="stakeholder.alias" [name]="stakeholder.name" [type]="stakeholder.type"></role-verification>
<role-verification *ngIf="stakeholder" [id]="stakeholder.alias" [name]="stakeholder.name" [type]="stakeholder.type"></role-verification>
<notification-sidebar *ngIf="user && notificationGroupsInitialized"
[user]="user" [availableGroups]="notificationGroups" service="monitor"></notification-sidebar>
</div>

View File

@ -10,7 +10,6 @@ import {MenuItem, RootMenuItem} from "./openaireLibrary/sharedComponents/menu";
import {Stakeholder, Topic, Visibility} from "./openaireLibrary/monitor/entities/stakeholder";
import {LinksResolver} from "./search/links-resolver";
import {Header} from "./openaireLibrary/sharedComponents/navigationBar.component";
import {arrow_left} from "./openaireLibrary/utils/icons/icons";
import {properties} from "../environments/environment";
import {ConfigurationService} from "./openaireLibrary/utils/configuration/configuration.service";
import {Option} from "./openaireLibrary/sharedComponents/input/input.component";
@ -32,7 +31,6 @@ export class AppComponent implements OnInit, OnDestroy {
hasHeader: boolean = false;
hasAdminMenu: boolean = false;
isFrontPage: boolean = false;
isDashboard: boolean = false;
isViewPublic: boolean = false;
sideBarItems: MenuItem[] = [];
specialSideBarMenuItem: MenuItem = null;
@ -111,10 +109,6 @@ export class AppComponent implements OnInit, OnDestroy {
this.isFrontPage = isFrontPage;
this.cdr.detectChanges();
}));
this.subscriptions.push(this.layoutService.isDashboard.subscribe(isDashboard => {
this.isDashboard = isDashboard;
this.cdr.detectChanges();
}));
this.route.queryParams.subscribe(params => {
this.isViewPublic = (params['view'] == 'public');
});
@ -241,9 +235,8 @@ export class AppComponent implements OnInit, OnDestroy {
if (this.isPublicOrIsMember(topic.visibility)) {
let topicItem: MenuItem = new MenuItem(topic.alias, topic.name, "", (
'/' + this.stakeholder.alias + '/' + topic.alias),
null, [], [], {}, null, null, null, (
null, [], [], {}, {svg: topic.icon}, null, null, (
'/' + this.stakeholder.alias + '/' + topic.alias));
topicItem.icon = topic.icon;
items.push(topicItem);
}
});
@ -339,16 +332,16 @@ export class AppComponent implements OnInit, OnDestroy {
// rootItem: new MenuItem("", "Dashboard",
// "", '/' + this.stakeholder.alias + '/', false, [], null, {}), items: []
// });
this.adminMenuItems.push(new MenuItem("general", "General", "", "/admin/" + this.stakeholder.alias, false, [], [], {}, "<i uk-icon=\"image\"></i>"));
this.adminMenuItems.push(new MenuItem("indicators", "Indicators", "", "/admin/" + this.stakeholder.alias + '/indicators', false, [], [], {}, "<i uk-icon=\"image\"></i>"));
this.adminMenuItems.push(new MenuItem("general", "General", "", "/admin/" + this.stakeholder.alias, false, [], [], {}, {name: 'badge'}));
this.adminMenuItems.push(new MenuItem("indicators", "Indicators", "", "/admin/" + this.stakeholder.alias + '/indicators', false, [], [], {}, {name: 'analytics'}));
if (this.stakeholder.defaultId) {
this.adminMenuItems.push(new MenuItem("users", "Users", "", "/admin/" + this.stakeholder.alias + "/users", false, [], [], {}, "<i uk-icon=\"users\"></i>", null, null, "/admin/" + this.stakeholder.alias+"/users"));
this.adminMenuItems.push(new MenuItem("users", "Users", "", "/admin/" + this.stakeholder.alias + "/users", false, [], [], {}, {name: 'group'}, null, null, "/admin/" + this.stakeholder.alias+"/users"));
if (Session.isPortalAdministrator(this.user)) {
this.adminMenuItems.push(new MenuItem("admin-tools", "Pages & Entities", "", "/admin/" + this.stakeholder.alias + "/admin-tools/pages", false, [], [], {}, null, null, null, "/admin/" + this.stakeholder.alias + "/admin-tools"));
}
}
this.specialSideBarMenuItem = new MenuItem("back", "Manage profiles", "", "/admin", false, [], null, {});
this.specialSideBarMenuItem.icon = '<span class="uk-icon-button uk-icon uk-button-secondary uk-flex uk-flex-center">' + arrow_left.data + '</span>'; // '<span class="uk-icon-button uk-icon portal-button " uk-icon="chevron-left"></span>';
this.specialSideBarMenuItem.icon = {name: 'search', class: 'uk-text-secondary'};
this.specialSideBarMenuItem.customClass = 'uk-text-uppercase uk-text-bold uk-text-secondary';
}
} else {
@ -393,7 +386,6 @@ export class AppComponent implements OnInit, OnDestroy {
};
this.adminMenuItems = [];
this.specialSideBarMenuItem = null;
this.adminMenuItems.push(new MenuItem("stakeholders", "Manage profiles", "", "/admin", false, [], [], {}, "<i uk-icon=\"cog\"></i>"));
}
}

View File

@ -9,13 +9,12 @@
</div>
</div>
<div class="uk-width-auto uk-text-right@m uk-text-center">
<button class="uk-button uk-button-secondary outlined uk-margin-right"
(click)="reset()"
<button class="uk-button uk-button-default uk-margin-right"
(click)="reset()" [class.uk-disabled]="loading || !editStakeholderComponent.dirty"
[disabled]="loading || !editStakeholderComponent.dirty">Reset
</button>
<button class="uk-button uk-button-secondary"
(click)="save()"
[disabled]="loading || editStakeholderComponent.disabled">Save
<button class="uk-button uk-button-primary" [class.uk-disabled]="loading || editStakeholderComponent.disabled"
(click)="save()" [disabled]="loading || editStakeholderComponent.disabled">Save
</button>
</div>
</div>

View File

@ -1,45 +1,27 @@
<div page-content>
<div header>
<ul *ngIf="isCurator()" class="uk-tab customTabs admin uk-flex uk-flex-center uk-flex-left@m" uk-tab>
<ul *ngIf="isCurator()" class="uk-tab uk-margin-top" uk-tab>
<li [class.uk-active]="tab === 'all'"><a routerLink="./"><span class="title">All</span></a></li>
<li [class.uk-active]="tab === 'templates'"><a routerLink="./" fragment="templates"><span class="title">Profile templates</span></a>
</li>
<li [class.uk-active]="tab === 'profiles'"><a routerLink="./" fragment="profiles"><span
class="title">Profiles</span></a></li>
</ul>
<div class="uk-width-1-1 uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-grid" uk-grid>
<div #searchInputComponent search-input [control]="filterForm.controls.keyword" [showSearch]="false"
placeholder="Search"
[selected]="communitySearchUtils.keyword" (closeEmitter)="onSearchClose()" (resetEmitter)="resetInput()"
[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>
<!--<div class="uk-grid uk-margin-medium" uk-grid>
<div *ngIf="filters" class="uk-width-2-3@m uk-width-1-1 uk-child-width-1-3@m uk-child-width-1-1" uk-grid>
<div>
<div dashboard-input [formInput]="filters.get('status')"
type="select" [options]="[all].concat(stakeholderUtils.visibility)"
label="Visibility"></div>
</div>
</div>
<div class="uk-width-expand@m uk-width-1-1 uk-flex uk-flex-middle uk-flex-right">
<div class="uk-inline uk-width-medium">
<div dashboard-input [formInput]="filters.get('keyword')" label="Locate profile" icon="search"></div>
</div>
</div>
</div>-->
</div>
<div inner>
<div class="uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-margin-top">
<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>
<div *ngIf="loading" class="uk-margin-medium-top uk-padding-large">
<loading></loading>
</div>
<div *ngIf="!loading" class="uk-section" uk-height-match="target: .titleContainer; row: false">
<div *ngIf="!loading" class="uk-section uk-section-small" uk-height-match="target: .titleContainer; row: false">
<div uk-height-match="target: .logoContainer; row: false">
<div *ngIf="tab != 'profiles' && isCurator()" class="uk-margin-medium-top">
<h6 class="uk-text-bold">Profile Templates</h6>
<h4>Profile Templates</h4>
<div class="uk-grid uk-child-width-1-4@xl uk-child-width-1-3@l uk-child-width-1-2@m uk-grid-match" uk-grid>
<ng-template ngFor [ngForOf]="displayDefaultStakeholders" let-stakeholder let-i="index">
<ng-template ngFor [ngForOf]="displayDefaultStakeholders" let-stakeholder>
<ng-container *ngTemplateOutlet="stakeholderBox; context: {stakeholder:stakeholder}"></ng-container>
</ng-template>
<div *ngIf="!loading && isCurator()">
@ -53,10 +35,10 @@
</h4>
</div>
<div *ngIf="tab != 'templates' && isManager()" class="uk-margin-large-top">
<h6 class="uk-text-bold">Profiles</h6>
<h4>Profiles</h4>
<div class="uk-grid uk-grid-match uk-child-width-1-4@xl uk-child-width-1-3@l uk-child-width-1-2@m" uk-grid
uk-height-match="target: .name;">
<ng-template ngFor [ngForOf]="displayStakeholders" let-stakeholder let-i="index">
<ng-template ngFor [ngForOf]="displayStakeholders" let-stakeholder>
<ng-container *ngTemplateOutlet="stakeholderBox; context: {stakeholder:stakeholder}"></ng-container>
</ng-template>
<div *ngIf="!loading && isCurator()">
@ -72,47 +54,32 @@
<ng-template #stakeholderBox let-stakeholder="stakeholder">
<div *ngIf="stakeholder">
<div class="uk-card uk-card-default uk-card-body uk-position-relative">
<div class="uk-position-top-right uk-margin-small-right uk-margin-small-top clickable">
<i uk-icon="more-vertical"
(click)="$event.stopPropagation();$event.preventDefault()"></i>
<div #element uk-dropdown="mode: click; pos: bottom-right; delay-hide: 0; flip: false">
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-visible-toggle">
<div class="uk-position-top-right uk-margin-small-right uk-margin-small-top uk-invisible-hover">
<a class="uk-link-reset uk-flex uk-flex-middle">
<icon [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(stakeholder.visibility)" ratio="0.6"></icon>
<icon [flex]="true" name="more_vert"></icon>
</a>
<div #element uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0; flip: false">
<ul class="uk-nav uk-dropdown-nav">
<li><a
(click)="$event.stopPropagation();editStakeholder(stakeholder, !stakeholder.defaultId);hide(element);$event.preventDefault()">Edit</a>
<li>
<a (click)="editStakeholder(stakeholder, !stakeholder.defaultId); hide(element)">Edit</a>
</li>
<li class="uk-nav-divider"></li>
<ng-template ngFor [ngForOf]="stakeholderUtils.visibility" let-v>
<li *ngIf="stakeholder.visibility != v.value"><a (click)="changeStakeholderStatus(stakeholder, v.value);
hide(element)">
{{'Make ' + v.label.toLowerCase()}}</a>
<li>
<a (click)="changeStakeholderStatus(stakeholder, v.value);">
<div class="uk-flex uk-flex-middle">
<icon [flex]="true" [name]="v.icon" ratio="0.6"></icon>
<span class="uk-margin-small-left uk-width-expand">{{v.label}}</span>
<icon *ngIf="stakeholder.visibility === v.value" [flex]="true" name="done" class="uk-text-secondary" ratio="0.8"></icon>
</div>
</a>
</li>
</ng-template>
<hr *ngIf="isProfileManager(stakeholder)" class="uk-nav-divider">
<li *ngIf="isProfileManager(stakeholder)"><a
(click)="$event.stopPropagation();deleteStakeholderOpen(stakeholder);hide(element);$event.preventDefault()">Delete</a>
</li>
</ul>
</div>
</div>
<div class="uk-position-top-left uk-margin-small-left uk-margin-small-top clickable visibility">
<span class="clickable color">
<icon [name]="stakeholderUtils.visibilityIcon.get(stakeholder.visibility)"></icon>
</span>
<div #element uk-dropdown="mode: click; pos: bottom-left; delay-hide: 0; flip: false">
<ul class="uk-nav uk-dropdown-nav">
<li *ngFor="let v of stakeholderUtils.visibility" class="uk-position-relative">
<a *ngIf="stakeholder.visibility != v.value"
(click)="$event.stopPropagation();changeStakeholderStatus(stakeholder,v.value);hide(element);$event.preventDefault()">
<icon [name]="stakeholderUtils.visibilityIcon.get(v.value)" ratio="0.8"></icon>
<span> {{v.label}}</span>
</a>
<a *ngIf="stakeholder.visibility == v.value">
<icon [name]="stakeholderUtils.visibilityIcon.get(v.value)" [ratio]="0.8"></icon>
<span> {{v.label}}</span>
<span class="uk-position-center-right">
<icon customClass="uk-text-secondary" [ratio]="0.5" name="bullet"></icon>
</span>
</a>
(click)="deleteStakeholderOpen(stakeholder);hide(element)">Delete</a>
</li>
</ul>
</div>

View File

@ -13,8 +13,6 @@ import {Session} from "../openaireLibrary/login/utils/helper.class";
import {EditStakeholderComponent} from "../general/edit-stakeholder/edit-stakeholder.component";
import {properties} from "../../environments/environment";
import {ActivatedRoute} from "@angular/router";
import {SearchInputComponent} from "../openaireLibrary/sharedComponents/search-input/search-input.component";
import {SearchUtilsClass} from '../openaireLibrary/searchPages/searchUtils/searchUtils.class';
type Tab = 'all' | 'templates'| 'profiles';
@ -35,7 +33,7 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
public stakeholder: Stakeholder;
public index: number;
public user = null;
public communitySearchUtils: SearchUtilsClass = new SearchUtilsClass();
public tab: Tab = 'all';
/**
* Filtered Stakeholders
*/
@ -60,14 +58,6 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
@ViewChild('deleteStakeholderModal', { static: true }) deleteStakeholderModal: AlertModal;
@ViewChild('editStakeholderComponent', { static: true }) editStakeholderComponent: EditStakeholderComponent;
tab: Tab = 'all';
// Search
@ViewChild('searchInputComponent') searchInputComponent: SearchInputComponent;
filterForm: FormGroup;
private searchText: string = '';
public keyword: string = '';
constructor(private stakeholderService: StakeholderService,
private userManagementService: UserManagementService,
private route: ActivatedRoute,
@ -76,17 +66,6 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
}
ngOnInit(): void {
this.communitySearchUtils.keyword = "";
this.filterForm = this.fb.group({
keyword: [''],
});
this.subscriptions.push(this.filterForm.get('keyword').valueChanges.subscribe(value => {
this.searchText = value.toLowerCase();
this.applyFilters();
}));
this.subscriptions.push(this.route.fragment.subscribe((fragment: Tab) => {
if (this.isTab(fragment)) {
this.tab = fragment;
@ -113,7 +92,7 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
this.alias = res[2];
this.loading = false;
}));
this.subscriptions.push(UIkit.util.on(document, 'hidden', '#edit_modal', (): void => {
this.editStakeholderComponent.removePhoto();
}));
@ -166,7 +145,7 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
}
private filterByKeyword(stakeholders: Stakeholder[], value): Stakeholder[] {
if (value === null || value === '') {
if (!value) {
return stakeholders;
} else {
return stakeholders.filter(stakeholder =>
@ -194,17 +173,17 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
this.editStakeholderComponent.init(this.stakeholder, this.alias, this.defaultStakeholders, isDefault, this.index === -1);
if (this.index !== -1) {
this.callback = (stakeholder: Stakeholder) => {
let index = -1;
let index: number;
if (stakeholder.defaultId == null) {
index = this.alias.findIndex(value => value == this.defaultStakeholders[this.index].alias);
index = this.alias.findIndex(value => value == this.defaultStakeholders[this.index].alias);
this.defaultStakeholders[this.index] = stakeholder;
} else {
index = this.alias.findIndex(value => value == this.stakeholders[this.index].alias);
index = this.alias.findIndex(value => value == this.stakeholders[this.index].alias);
this.stakeholders[this.index] = stakeholder;
}
if(index != -1) {
this.alias[index] = stakeholder.alias;
}
if(index != -1) {
this.alias[index] = stakeholder.alias;
}
};
this.editStakeholderModal.okButtonText = 'Save Changes';
} else {
@ -212,9 +191,9 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
if (stakeholder.defaultId === null) {
this.defaultStakeholders.push(stakeholder);
} else {
this.stakeholders.push(stakeholder);
this.stakeholders.push(stakeholder);
}
this.alias.push(stakeholder.alias);
this.alias.push(stakeholder.alias);
};
this.editStakeholderModal.okButtonText = 'Create';
}
@ -307,19 +286,5 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
default:
return false;
}
}
public applyFilters() {
this.displayDefaultStakeholders = this.defaultStakeholders.filter(stakeholder => stakeholder.alias.toLowerCase().includes(this.searchText) || stakeholder.name.toLowerCase().includes(this.searchText) || stakeholder.description?.toLowerCase().includes(this.searchText));
this.displayStakeholders = this.stakeholders.filter(stakeholder => stakeholder.alias.toLowerCase().includes(this.searchText) || stakeholder.name.toLowerCase().includes(this.searchText) || stakeholder.description?.toLowerCase().includes(this.searchText));
}
public onSearchClose() {
this.communitySearchUtils.keyword = this.filterForm.get('keyword').value;
}
public resetInput() {
this.communitySearchUtils.keyword = null;
this.searchInputComponent.reset()
}
}

View File

@ -20,8 +20,7 @@ import {MonitorComponent} from "./monitor.component";
loadChildren: () => import('../develop/develop.module').then(m => m.DevelopModule),
canDeactivate: [PreviousRouteRecorder],
data: {
hasSidebar: false,
isDashboard: true
hasSidebar: false
}
},
{
@ -29,8 +28,7 @@ import {MonitorComponent} from "./monitor.component";
loadChildren: () => import('../methodology/methodology.module').then(m => m.MethodologyModule),
canDeactivate: [PreviousRouteRecorder],
data: {
hasSidebar: false,
isDashboard: true
hasSidebar: false
}
},
{
@ -39,7 +37,6 @@ import {MonitorComponent} from "./monitor.component";
canDeactivate: [PreviousRouteRecorder],
data: {
hasSidebar: false,
isDashboard: true,
activeMenuItem: "search"
}
},

@ -1 +1 @@
Subproject commit acca43d45a4c95c0ad3426077c72b8fb08ac6e61
Subproject commit ad20ad1ea93725fe725f84a7f51629f15bb26577

View File

@ -1,4 +1,4 @@
<div *ngIf="stakeholder && canEdit">
<div *ngIf="stakeholder && canEdit" class="uk-section">
<div *ngIf="numberSections">
<h6 class="uk-text-bold">Number Indicators</h6>
<ng-template ngFor [ngForOf]="numbers" let-number let-i="index">

View File

@ -1,222 +1,219 @@
<aside id="sidebar_main">
<div id="sidebar_content">
<div class="menu_section uk-margin-top">
<div class="uk-text-center">
<a [routerLink]="'/admin/' + stakeholder.alias"
class="uk-link-heading uk-text-uppercase uk-flex uk-flex-middle uk-flex-center">
<icon name="close" ratio="2"></icon>
<span *ngIf="open" class="uk-margin-left">Indicators</span>
</a>
</div>
<div class="menu_section uk-margin-xlarge-top">
<ul class="uk-list">
<ng-template ngFor [ngForOf]="stakeholder.topics" let-topic let-i="index">
<li class="uk-visible-toggle"
[class.uk-active]="topicIndex == i">
<a [routerLink]="'/admin/'+stakeholder.alias + '/indicators/' + topic.alias"
class="uk-flex uk-flex-middle" [title]="topic.name">
<span *ngIf="topic.icon"></span>
<div class="uk-width-expand uk-position-relative uk-flex uk-flex-middle"
[class.uk-flex-center]="open">
<span class="uk-flex-none">
<ng-container *ngTemplateOutlet="visibilityOptions; context:
{i:i, type: 'topic', visibility: stakeholder.topics[i].visibility}">
</ng-container>
</span>
<span [class.uk-text-center]="open"
[class.uk-text-truncate]="!open" [class.uk-width-3-5]="!open">{{topic.name}}</span>
<span class="uk-invisible-hover"
(click)="$event.stopPropagation();$event.preventDefault()">
<a class="uk-link-reset"><icon [flex]="true" name="more_vert" ratio="1.2"></icon></a>
<div #element uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0; flip: false">
<ul class="uk-nav uk-dropdown-nav">
<li><a (click)="editTopicOpen(i); hide(element)">Edit</a></li>
<ng-template ngFor [ngForOf]="stakeholderUtils.visibility" let-v>
<li *ngIf="topic.visibility != v.value"><a (click)="changeTopicStatus(i, v.value);
hide(element)">
{{'Make ' + v.label.toLowerCase()}}</a>
</li>
</ng-template>
<hr *ngIf="!topic.defaultId" class="uk-nav-divider">
<li *ngIf="!topic.defaultId"><a (click)="deleteTopicOpen(i, 'delete'); hide(element)">Delete</a>
<!-- <ng-container *ngIf="!stakeholder.defaultId">-->
<!-- <a (click)="deleteTopicOpen(i, 'delete'); hide(element)">Delete from all profiles</a>-->
<!-- <a (click)="deleteTopicOpen(i, 'disconnect'); hide(element)">Delete and disconnect from all profiles</a>-->
<!-- </ng-container>-->
</li>
</ul>
</div>
</span>
<div class="menu_section uk-margin-top">
<ul class="uk-list">
<li>
<a [routerLink]="'/admin/' + stakeholder.alias">
<div class="uk-flex uk-flex-middle uk-flex-center">
<div class="uk-width-auto">
<icon class="menu-icon" name="arrow_back" [flex]="true"></icon>
</div>
<span class="uk-width-expand uk-text-truncate uk-margin-small-left" [class.uk-hidden]="!open">Indicators</span>
</div>
</a>
</li>
</ul>
</div>
<div class="menu_section uk-margin-medium-top">
<div *ngIf="stakeholder.topics[topicIndex]" class="active" [style]="'--index: ' + topicIndex + '; --size: ' + (stakeholder.topics[topicIndex].icon?'40px':0)"></div>
<ul class="uk-list">
<ng-template ngFor [ngForOf]="stakeholder.topics" let-topic let-i="index">
<li class="uk-visible-toggle" [class.uk-active]="topicIndex == i">
<a [routerLink]="'/admin/'+stakeholder.alias + '/indicators/' + topic.alias"
[title]="topic.name">
<div class="uk-flex uk-flex-middle uk-flex-center">
<div *ngIf="topic.icon" class="uk-width-auto">
<icon class="menu-icon" [svg]="topic.icon" [flex]="true"></icon>
</div>
</a>
</li>
</ng-template>
<li [class.uk-visible-toggle]="open">
<a (click)="editTopicOpen(-1); $event.preventDefault()"
class="uk-link-reset uk-flex uk-flex-middle uk-flex-center uk-width-1-1">
<span class="uk-icon-button">
<icon name="add"></icon>
</span>
<span [class.uk-hidden-hover]="stakeholder.topics.length > 0" class="uk-margin-small-left" [class.uk-hidden]="!open"> Create new topic</span>
<span *ngIf="open || !topic.icon" [class.uk-text-small]="!open"
class="uk-width-expand uk-text-truncate uk-margin-small-left">
{{topic.name}}
</span>
<span *ngIf="open" class="uk-invisible-hover" [class.uk-invisible-hover]="topicIndex !== i"
(click)="$event.stopPropagation();$event.preventDefault()">
<a class="uk-link-reset uk-flex uk-flex-middle">
<icon [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(topic.visibility)" ratio="0.6"></icon>
<icon [flex]="true" name="more_vert"></icon>
</a>
<div #element uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0; flip: false">
<ul class="uk-nav uk-dropdown-nav">
<li>
<a (click)="editTopicOpen(i); hide(element)">Edit</a>
</li>
<li class="uk-nav-divider"></li>
<ng-template ngFor [ngForOf]="stakeholderUtils.visibility" let-v>
<li>
<a (click)="changeTopicStatus(i, v.value);">
<div class="uk-flex uk-flex-middle">
<icon [flex]="true" [name]="v.icon" ratio="0.6"></icon>
<span class="uk-margin-small-left uk-width-expand">{{v.label}}</span>
<icon *ngIf="topic.visibility === v.value" [flex]="true" name="done" class="uk-text-secondary" ratio="0.8"></icon>
</div>
</a>
</li>
</ng-template>
<hr *ngIf="!topic.defaultId" class="uk-nav-divider">
<li *ngIf="!topic.defaultId">
<a (click)="deleteTopicOpen(i, 'delete'); hide(element)">Delete</a>
<!--<ng-container *ngIf="!stakeholder.defaultId">
<a (click)="deleteTopicOpen(i, 'delete'); hide(element)">Delete from all profiles</a>
<a (click)="deleteTopicOpen(i, 'disconnect'); hide(element)">Delete and disconnect from all profiles</a>
</ng-container>-->
</li>
</ul>
</div>
</span>
</div>
</a>
</li>
</ul>
</div>
<div *ngIf="stakeholder && stakeholder.topics.length > 0" class="uk-position-bottom uk-margin-bottom">
<div class="uk-flex uk-flex-center">
<a class="uk-icon-button" uk-tooltip="Preview">
<icon name="preview" [ratio]="0.7"></icon>
</ng-template>
<li>
<a (click)="editTopicOpen(-1); $event.preventDefault()">
<div class="uk-flex uk-flex-middle uk-flex-center">
<div class="uk-width-auto">
<icon class="menu-icon" name="add" [flex]="true"></icon>
</div>
<span class="uk-width-expand uk-text-truncate uk-margin-small-left" [class.uk-hidden]="!open">Create new topic</span>
</div>
</a>
<div #element uk-dropdown="mode: click; pos: top-left; offset: 5; delay-hide: 0; flip: false"
class="uk-padding-remove-horizontal">
<ul class="uk-nav uk-dropdown-nav">
<li><a target="_blank" [routerLink]="'/' + stakeholder.alias + '/' + stakeholder.topics[topicIndex].alias"
[queryParams]="{view: 'public'}"
(click)="hide(element)">Public view</a>
</li>
<li><a target="_blank" [routerLink]="'/' + stakeholder.alias + '/' +
</li>
</ul>
</div>
<div *ngIf="stakeholder && stakeholder.topics.length > 0" class="uk-position-bottom uk-margin-bottom">
<div class="uk-flex uk-flex-center">
<a class="uk-icon-button uk-button-secondary" uk-tooltip="Preview">
<icon name="preview" [ratio]="0.7"></icon>
</a>
<div #element uk-dropdown="mode: click; pos: top-left; offset: 5; delay-hide: 0; flip: false"
class="uk-padding-remove-horizontal">
<ul class="uk-nav uk-dropdown-nav">
<li><a target="_blank" [routerLink]="'/' + stakeholder.alias + '/' + stakeholder.topics[topicIndex].alias"
[queryParams]="{view: 'public'}"
(click)="hide(element)">Public view</a>
</li>
<li><a target="_blank" [routerLink]="'/' + stakeholder.alias + '/' +
stakeholder.topics[topicIndex].alias"
[queryParams]="{view: 'restricted'}"
(click)="hide(element)">Restricted view</a>
</li>
<!--<li class="disabled"><a class="uk-disabled uk-text-muted"
uk-tooltip="Note: available only in administration dashboard"
(click)="hide(element)">Private view</a>
</li>-->
</ul>
</div>
[queryParams]="{view: 'restricted'}"
(click)="hide(element)">Restricted view</a>
</li>
<!--<li class="disabled"><a class="uk-disabled uk-text-muted"
uk-tooltip="Note: available only in administration dashboard"
(click)="hide(element)">Private view</a>
</li>-->
</ul>
</div>
</div>
</div>
</div>
</aside>
<div *ngIf="stakeholder && filters" page-content>
<div *ngIf="stakeholder && filters" page-content (stickyEmitter)="stickyPageHeader = $event">
<div header>
<nav>
<div *ngIf="stakeholder.topics.length > 0 && stakeholder.topics[topicIndex]">
<ul *ngIf="stakeholder.topics[topicIndex]"
class="customTabs uk-tab admin uk-flex uk-flex-middle" visibility="true">
<div *ngIf="stakeholder.topics.length > 0 && stakeholder.topics[topicIndex]">
<div class="uk-width-expand uk-flex uk-margin-top uk-flex-middle info" [class.uk-active]="stickyPageHeader">
<img *ngIf="stakeholder.logoUrl" [src]="stakeholder.logoUrl" class="uk-width-small uk-margin-right">
<div>
<div class="uk-margin-remove uk-text-primary-gradient uk-text-bold uk-h6">Admin Dashboard - Manage Indicators</div>
<h1 class="uk-h4 uk-margin-remove">{{stakeholder.name}}</h1>
</div>
</div>
<div class="uk-margin-top">
<ul *ngIf="stakeholder.topics[topicIndex]" class="uk-tab">
<ng-template ngFor [ngForOf]="stakeholder.topics[topicIndex].categories" let-category let-i="index">
<li class="uk-visible-toggle uk-flex uk-flex-middle"
[class.uk-active]="category.alias === stakeholder.topics[topicIndex].categories[categoryIndex].alias">
<span class="uk-flex-none">
<ng-container *ngTemplateOutlet="visibilityOptions; context:
{i:i, type: 'cat',
visibility: stakeholder.topics[topicIndex].categories[i].visibility}">
</ng-container>
</span>
<a (click)="chooseCategory(i)">
<span class="title"> {{category.name}}</span>
</a>
<span class="uk-invisible-hover" (click)="$event.stopPropagation();$event.preventDefault()">
<a class="uk-link-reset"><icon [flex]="true" name="more_vert" ratio="1.2"></icon></a>
<div #element uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0; flip: false">
<ul class="uk-nav uk-dropdown-nav">
<li><a (click)="editCategoryOpen(i); hide(element)">Edit</a></li>
<ng-template ngFor [ngForOf]="stakeholderUtils.visibility" let-v>
<li *ngIf="category.visibility != v.value"><a (click)="changeCategoryStatus(i, v.value);
hide(element)">
{{'Make ' + v.label.toLowerCase()}}</a>
</li>
</ng-template>
<hr *ngIf="!stakeholder.topics[topicIndex].categories[i].defaultId" class="uk-nav-divider">
<li *ngIf="!stakeholder.topics[topicIndex].categories[i].defaultId"><a
(click)="deleteCategoryOpen(i, 'delete'); hide(element)">Delete</a>
</li>
</ul>
</div>
</span>
</li>
</ng-template>
<li class="uk-visible-toggle">
<a (click)="editCategoryOpen(); $event.preventDefault()" class="uk-link-reset">
<span class="uk-icon-button">
<icon name="add"></icon>
</span>
<span [class.uk-hidden-hover]="stakeholder.topics[topicIndex].categories.length > 0" class="space">Create new category</span>
<li class="uk-visible-toggle uk-flex" [class.uk-active]="categoryIndex === i">
<a (click)="chooseCategory(i)">
<span class="title"> {{category.name}}</span>
</a>
<span class="uk-invisible-hover uk-flex uk-flex-column uk-flex-center uk-margin-small-left" [class.uk-invisible-hover]="categoryIndex !== i"
(click)="$event.stopPropagation();$event.preventDefault()">
<a class="uk-link-reset uk-flex uk-flex-middle">
<icon [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(category.visibility)" ratio="0.6"></icon>
<icon [flex]="true" name="more_vert"></icon>
</a>
<div #element uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0; flip: false">
<ul class="uk-nav uk-dropdown-nav">
<li>
<a (click)="editCategoryOpen(i); hide(element)">Edit</a>
</li>
<li class="uk-nav-divider"></li>
<ng-template ngFor [ngForOf]="stakeholderUtils.visibility" let-v>
<li>
<a (click)="changeCategoryStatus(i, v.value);">
<div class="uk-flex uk-flex-middle">
<icon [flex]="true" [name]="v.icon" ratio="0.6"></icon>
<span class="uk-margin-small-left uk-width-expand">{{v.label}}</span>
<icon *ngIf="category.visibility === v.value" [flex]="true" name="done" class="uk-text-secondary" ratio="0.8"></icon>
</div>
</a>
</li>
</ng-template>
<hr *ngIf="!category.defaultId" class="uk-nav-divider">
<li *ngIf="!category.defaultId">
<a (click)="deleteCategoryOpen(i, 'delete'); hide(element)">Delete</a>
</li>
</ul>
</div>
</span>
</li>
</ng-template>
<li>
<a (click)="editCategoryOpen(); $event.preventDefault()" class="uk-flex uk-flex-middle">
<icon name="add" [flex]="true"></icon>
<span class="uk-margin-small-left">Create new category</span>
</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div inner>
<ul *ngIf="stakeholder.topics.length > 0 && stakeholder.topics[topicIndex].categories.length > 0 && stakeholder.topics[topicIndex].categories[categoryIndex]"
visibility="true" class="uk-subnav uk-subnav-pill subCategoriesTabs admin uk-flex uk-flex-middle">
<ng-template ngFor [ngForOf]="stakeholder.topics[topicIndex].categories[categoryIndex].subCategories"
let-subCategory let-i="index">
<li [class.uk-active]="(subCategory.alias ===
stakeholder.topics[topicIndex].categories[categoryIndex].subCategories[subCategoryIndex].alias)"
class="uk-visible-toggle uk-position-relative uk-padding-remove-horizontal">
<span>
<span class="uk-flex-none">
<ng-container *ngTemplateOutlet="visibilityOptions; context:
{i:i, type: 'sub',
visibility: stakeholder.topics[topicIndex].categories[categoryIndex].subCategories[i].visibility}">
</ng-container>
</span>
<a (click)="chooseSubcategory(i);$event.preventDefault()"
class="uk-margin-small-left">
<span>{{subCategory.name}}</span>
class="uk-subnav uk-subnav-pill uk-margin-top">
<ng-template ngFor [ngForOf]="stakeholder.topics[topicIndex].categories[categoryIndex].subCategories" let-subCategory let-i="index">
<li class="uk-visible-toggle uk-flex" [class.uk-active]="subCategoryIndex === i">
<a (click)="chooseSubcategory(i);$event.preventDefault()" class="uk-margin-small-left">
<span>{{subCategory.name}}</span>
</a>
<span class="uk-invisible-hover uk-flex uk-flex-column uk-flex-center uk-margin-small-left" [class.uk-invisible-hover]="categoryIndex !== i"
(click)="$event.stopPropagation();$event.preventDefault()">
<a class="uk-link-reset uk-flex uk-flex-middle">
<icon [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(subCategory.visibility)" ratio="0.6"></icon>
<icon [flex]="true" name="more_vert"></icon>
</a>
<span class="uk-invisible-hover uk-position-center-right"
(click)="$event.stopPropagation();$event.preventDefault()">
<a class="uk-link-reset"><icon [flex]="true" name="more_vert" ratio="1.2"></icon></a>
<div #element uk-dropdown="mode: click; pos: bottom-left; offset: 10; delay-hide: 0; flip: false">
<ul class="uk-nav uk-dropdown-nav">
<li><a (click)="editSubCategoryOpen(i); hide(element)">Edit</a></li>
<ng-template ngFor [ngForOf]="stakeholderUtils.visibility" let-v>
<li *ngIf="subCategory.visibility != v.value"><a (click)="changeSubcategoryStatus(i, v.value);
hide(element)">
{{'Make ' + v.label.toLowerCase()}}</a>
</li>
</ng-template>
<li *ngIf="indicators && indicators.isCurator"><a (click)=" indicators.exportIndicators();
hide(element)">Export
indicators</a></li>
<li *ngIf="indicators && indicators.isCurator"><a (click)="file.value = ''; this.index=i; file.click(); hide(element)">Import indicators</a></li>
<hr *ngIf="!stakeholder.topics[topicIndex].categories[categoryIndex].subCategories[i].defaultId"
class="uk-nav-divider">
<li *ngIf="!stakeholder.topics[topicIndex].categories[categoryIndex].subCategories[i].defaultId"><a
(click)="deleteSubcategoryOpen(i, 'delete'); hide(element)">Delete</a>
</li>
</ul>
</div>
</span>
<div #element uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0; flip: false">
<ul class="uk-nav uk-dropdown-nav">
<li>
<a (click)="editSubCategoryOpen(i); hide(element)">Edit</a>
</li>
<li *ngIf="indicators && indicators.isCurator"><a (click)=" indicators.exportIndicators();hide(element)">Export indicators</a></li>
<li *ngIf="indicators && indicators.isCurator"><a (click)="file.value = ''; this.index=i; file.click(); hide(element)">Import indicators</a></li>
<li class="uk-nav-divider"></li>
<ng-template ngFor [ngForOf]="stakeholderUtils.visibility" let-v>
<li>
<a (click)="changeSubcategoryStatus(i, v.value)">
<div class="uk-flex uk-flex-middle">
<icon [flex]="true" [name]="v.icon" ratio="0.6"></icon>
<span class="uk-margin-small-left uk-width-expand">{{v.label}}</span>
<icon *ngIf="subCategory.visibility === v.value" [flex]="true" name="done" class="uk-text-secondary" ratio="0.8"></icon>
</div>
</a>
</li>
</ng-template>
<hr *ngIf="!subCategory.defaultId" class="uk-nav-divider">
<li *ngIf="!subCategory.defaultId">
<a (click)="deleteSubcategoryOpen(i, 'delete'); hide(element)">Delete</a>
</li>
</ul>
</div>
</span>
</li>
</ng-template>
<li class="uk-visible-toggle">
<a (click)="editSubCategoryOpen(); $event.preventDefault()" class="uk-link-reset">
<span class="uk-icon-button">
<icon name="add"></icon>
</span>
<span [class.uk-hidden-hover]="stakeholder.topics[topicIndex].categories[categoryIndex].subCategories.length > 0" class="space">Create new subcategory</span>
</a>
<li>
<a (click)="editSubCategoryOpen(); $event.preventDefault()" class="uk-flex uk-flex-middle">
<icon name="add" [flex]="true"></icon>
<span class="uk-margin-small-left">Create new subcategory</span>
</a>
</li>
</ul>
<!--<div class="uk-grid uk-margin-medium" uk-grid>
<div *ngIf="filters" class="uk-width-2-3@m uk-width-1-1 uk-child-width-1-3@m uk-child-width-1-1" uk-grid>
<div>
<div dashboard-input [formInput]="filters.get('chartType')"
type="select" [options]="[all].concat(indicatorUtils.allChartTypes)"
label="Chart Type"></div>
</div>
<div>
<div dashboard-input [formInput]="filters.get('status')"
type="select" [options]="[all].concat(stakeholderUtils.visibility)"
label="Status"></div>
</div>
</div>
<div class="uk-width-expand@m uk-width-1-1 uk-flex uk-flex-middle uk-flex-right">
<div class="uk-inline uk-width-medium">
<span class="uk-position-center-right"><i uk-icon="search" class="uk-icon"></i></span>
<div dashboard-input [formInput]="filters.get('keyword')" label="Locate indicator"></div>
</div>
</div>
</div>-->
</div>
<div inner>
<input #file id="import-file" type="file" class="uk-hidden" (change)="indicators.fileChangeEvent($event, this.index)"/>
<indicators #indicators [topicIndex]="topicIndex" [categoryIndex]="categoryIndex"
[subcategoryIndex]="subCategoryIndex"
@ -233,30 +230,10 @@
<modal-alert #editModal (alertOutput)="saveElement()" [okDisabled]="form && (form.invalid || form.pristine)">
<div *ngIf="form" class="uk-grid uk-padding uk-padding-remove-horizontal uk-child-width-1-1" [formGroup]="form"
uk-grid>
<div dashboard-input [formInput]="form.get('name')" label="Title"></div>
<div dashboard-input [formInput]="form.get('description')"
label="Description" type="textarea">
</div>
<div *ngIf="form.get('icon')" dashboard-input [formInput]="form.get('icon')"
label="Icon(SVG)" type="textarea">
</div>
<div dashboard-input [formInput]="form.get('visibility')"
label="Status" [options]="stakeholderUtils.visibility" type="select">
<div input [formInput]="form.get('name')" placeholder="Title"></div>
<div input [formInput]="form.get('description')" placeholder="Description" type="textarea" rows="4"></div>
<div *ngIf="form.get('icon')" input [formInput]="form.get('icon')" placeholder="Icon(SVG)" type="textarea"></div>
<div input [formInput]="form.get('visibility')" placeholder="Status" [options]="stakeholderUtils.visibility" type="select">
</div>
</div>
</modal-alert>
<ng-template #visibilityOptions let-type="type" let-i="i" let-visibility="visibility">
<span class="uk-invisible-hover" (click)="$event.stopPropagation();$event.preventDefault()">
<a class="uk-link-reset"><icon [name]="stakeholderUtils.visibilityIcon.get(visibility)"></icon></a>
<div #element uk-dropdown="mode: click; pos: bottom-left; delay-hide: 0; flip: false">
<ul class="uk-nav uk-dropdown-nav">
<li *ngFor="let v of stakeholderUtils.visibility" [class.uk-active]="visibility == v.value">
<a (click)="$event.stopPropagation();toggleStatusByIndex(i, v.value, type);hide(element);$event.preventDefault()">
<icon [name]="stakeholderUtils.visibilityIcon.get(v.value)" ratio="0.8"></icon>
<span class="uk-margin-small-left">{{v.label}}</span>
</a>
</li>
</ul>
</div>
</span>
</ng-template>

View File

@ -27,6 +27,7 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
public properties: EnvProperties = properties;
public stakeholderUtils: StakeholderUtils = new StakeholderUtils();
public loading: boolean = true;
public stickyPageHeader: boolean = false;
public stakeholder: Stakeholder;
/**
* Stakeholder change event

View File

@ -15,8 +15,8 @@
[emailComposer]="emailComposer" [notificationFn]="notificationFn" (stickyEmitter)="stickyPageHeader = $event">
<div class="uk-flex uk-flex-middle uk-margin-top info" [class.uk-active]="stickyPageHeader">
<img *ngIf="logo" [src]="logo" class="uk-width-small uk-margin-right">
<div class="uk-width-expand">
<div class="uk-margin-remove uk-text-primary-gradient uk-text-bold uk-h6">Admin Dashboard</div>
<div>
<div class="uk-margin-remove uk-text-primary-gradient uk-text-bold uk-h6">Admin Dashboard - Manage Users</div>
<h1 class="uk-h4 uk-margin-remove">{{name}}</h1>
</div>
</div>

@ -1 +1 @@
Subproject commit 4b1a2b4fc40adc7259404f25dd259ceeac2a556d
Subproject commit cc7e37999cab199017f19189df402cc431bdbbaa

@ -1 +1 @@
Subproject commit 8b322abc3f960c9b8ca29441f80c0184ed7e8a39
Subproject commit 09341b18896d4582455a99ef50944bd544bb10df