249 lines
14 KiB
HTML
249 lines
14 KiB
HTML
<aside *ngIf="stakeholder" id="sidebar_main">
|
|
<div id="sidebar_content">
|
|
<div class="menu_section uk-margin-top">
|
|
<ul class="uk-list uk-nav uk-nav-default" uk-nav>
|
|
<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="west" [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-large-top">
|
|
<div *ngIf="stakeholder.topics[topicIndex]" class="active" [style]="'--index: ' + topicIndex + '; --size: ' + (stakeholder.topics[topicIndex].icon?'40px':0)"></div>
|
|
<ul class="uk-list uk-nav uk-nav-default" uk-nav>
|
|
<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>
|
|
<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">
|
|
<ng-container *ngIf="isCurator">
|
|
<li>
|
|
<a (click)="editTopicOpen(i); hide(element)">Edit</a>
|
|
</li>
|
|
<li class="uk-nav-divider"></li>
|
|
</ng-container>
|
|
<ng-template ngFor [ngForOf]="stakeholderUtils.visibility" let-v>
|
|
<li [class.uk-active]="topic.visibility === v.value">
|
|
<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>
|
|
<ng-container *ngIf="!topic.defaultId && isCurator">
|
|
<li class="uk-nav-divider">
|
|
<li>
|
|
<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>
|
|
</ng-container>
|
|
</ul>
|
|
</div>
|
|
</span>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
</ng-template>
|
|
<li *ngIf="isCurator">
|
|
<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>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div *ngIf="stakeholder.topics.length > 0" class="uk-position-bottom uk-margin-bottom">
|
|
<div class="uk-flex uk-flex-center">
|
|
<button class="uk-icon-button uk-button-primary" uk-tooltip="Preview">
|
|
<icon name="visibility" [flex]="true"></icon>
|
|
</button>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
<div *ngIf="stakeholder && filters" page-content (stickyEmitter)="stickyPageHeader = $event">
|
|
<div header>
|
|
<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-margin-right">
|
|
<img *ngIf="!stakeholder.logoUrl" src="assets/common-assets/placeholder.png" class="uk-margin-right">
|
|
<div>
|
|
<div class="uk-margin-remove uk-text-background 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" [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">
|
|
<ul class="uk-nav uk-dropdown-nav">
|
|
<ng-container *ngIf="isCurator">
|
|
<li>
|
|
<a (click)="editCategoryOpen(i); hide(element)">Edit</a>
|
|
</li>
|
|
<li class="uk-nav-divider"></li>
|
|
</ng-container>
|
|
<ng-template ngFor [ngForOf]="stakeholderUtils.visibility" let-v>
|
|
<li [class.uk-active]="category.visibility === v.value">
|
|
<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>
|
|
<ng-container *ngIf="!category.defaultId && isCurator">
|
|
<li class="uk-nav-divider">
|
|
<li><a (click)="deleteCategoryOpen(i, 'delete'); hide(element)">Delete</a></li>
|
|
</ng-container>
|
|
</ul>
|
|
</div>
|
|
</span>
|
|
</li>
|
|
</ng-template>
|
|
<li *ngIf="isCurator">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
<div inner>
|
|
<ul *ngIf="stakeholder.topics.length > 0 && stakeholder.topics[topicIndex].categories.length > 0 && stakeholder.topics[topicIndex].categories[categoryIndex]"
|
|
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>
|
|
<div #element uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0">
|
|
<ul class="uk-nav uk-dropdown-nav">
|
|
<ng-container *ngIf="isCurator">
|
|
<li>
|
|
<a (click)="editSubCategoryOpen(i); hide(element)">Edit</a>
|
|
</li>
|
|
<li *ngIf="indicators"><a (click)=" indicators.exportIndicators();hide(element)">Export indicators</a></li>
|
|
<li *ngIf="indicators"><a (click)="file.value = ''; this.index=i; file.click(); hide(element)">Import indicators</a></li>
|
|
<li class="uk-nav-divider"></li>
|
|
</ng-container>
|
|
<ng-template ngFor [ngForOf]="stakeholderUtils.visibility" let-v>
|
|
<li [class.uk-active]="subCategory.visibility === v.value">
|
|
<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>
|
|
<ng-container *ngIf="!subCategory.defaultId && isCurator">
|
|
<li class="uk-nav-divider">
|
|
<li><a (click)="deleteSubcategoryOpen(i, 'delete'); hide(element)">Delete</a></li>
|
|
</ng-container>
|
|
</ul>
|
|
</div>
|
|
</span>
|
|
</li>
|
|
</ng-template>
|
|
<li *ngIf="isCurator">
|
|
<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>
|
|
<input #file id="import-file" type="file" class="uk-hidden" (change)="indicators.fileChangeEvent($event, this.index)"/>
|
|
<indicators #indicators [topicIndex]="topicIndex" [categoryIndex]="categoryIndex"
|
|
[subcategoryIndex]="subCategoryIndex" [user]="user"
|
|
[stakeholder]="stakeholder" [changed]="change.asObservable()"></indicators>
|
|
</div>
|
|
</div>
|
|
<modal-alert #deleteModal classTitle="uk-background-primary uk-light" (alertOutput)="deleteElement()" [overflowBody]="false">
|
|
You are about to delete <span class="uk-text-bold" *ngIf="element">"{{element.name}}"</span> {{type}} permanently.
|
|
<div *ngIf="elementChildrenActionOnDelete == 'delete'" class="uk-text-bold">
|
|
{{getPluralTypeName()}} of all profiles based on this default {{type}}, will be deleted as well.
|
|
</div>
|
|
Are you sure you want to proceed?
|
|
</modal-alert>
|
|
<modal-alert #editModal classTitle="uk-background-primary uk-light" (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 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>
|