1. Remove PreloadAllModules from app-routing. 2. Replace deprecated icons with Material icons. 3. Redesign indicators page base on new theme.
This commit is contained in:
parent
e4aa85c003
commit
3c7e7963f5
|
|
@ -1,5 +1,5 @@
|
|||
import {NgModule} from '@angular/core';
|
||||
import {PreloadAllModules, RouterModule, Routes} from '@angular/router';
|
||||
import {NoPreloading, PreloadAllModules, RouterModule, Routes} from '@angular/router';
|
||||
import {OpenaireErrorPageComponent} from './error/errorPage.component';
|
||||
import {AdminLoginGuard} from "./openaireLibrary/login/adminLoginGuard.guard";
|
||||
import {AdminDashboardGuard} from "./utils/adminDashboard.guard";
|
||||
|
|
@ -62,9 +62,7 @@ const routes: Routes = [
|
|||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forRoot(routes, {
|
||||
preloadingStrategy: PreloadAllModules
|
||||
})],
|
||||
imports: [RouterModule.forRoot(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class AppRoutingModule {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<loading [full]="true"></loading>
|
||||
</div>
|
||||
<div *ngIf="!loading">
|
||||
<div class="sidebar_main_swipe" [class.sidebar_main_active]="open && hasSidebar && (!hasAdminMenu || hasAdminMenu && adminMenuItems?.length > 0)"
|
||||
<div class="sidebar_main_swipe" [class.sidebar_main_active]="open && hasSidebar"
|
||||
[class.sidebar_mini]="!open && hasSidebar && (!hasAdminMenu || hasAdminMenu && adminMenuItems?.length > 0)" [class.stakeholderPage]="isFrontPage">
|
||||
<navbar *ngIf="hasHeader" portal="monitor_dashboard" [header]="menuHeader"
|
||||
[userMenuItems]=userMenuItems [menuItems]="menuItems" [user]="user" [offCanvasFlip]="true"></navbar>
|
||||
|
|
|
|||
|
|
@ -81,9 +81,9 @@ export class AppComponent implements OnInit, OnDestroy {
|
|||
|
||||
@HostListener('window:resize', ['$event'])
|
||||
onResize(event) {
|
||||
if (this.layoutService.isSmallScreen && event.target.innerWidth > 1219) {
|
||||
if (this.layoutService.isSmallScreen && event.target.innerWidth > 640) {
|
||||
this.layoutService.setSmallScreen(false);
|
||||
} else if (!this.layoutService.isSmallScreen && event.target.innerWidth < 1219) {
|
||||
} else if (!this.layoutService.isSmallScreen && event.target.innerWidth <= 640) {
|
||||
this.layoutService.setSmallScreen(true);
|
||||
this.layoutService.setOpen(false);
|
||||
}
|
||||
|
|
@ -112,8 +112,8 @@ export class AppComponent implements OnInit, OnDestroy {
|
|||
this.route.queryParams.subscribe(params => {
|
||||
this.isViewPublic = (params['view'] == 'public');
|
||||
});
|
||||
this.layoutService.setSmallScreen((this.innerWidth && this.innerWidth < 1219));
|
||||
this.layoutService.setOpen(!(this.innerWidth && this.innerWidth < 1219));
|
||||
this.layoutService.setSmallScreen((this.innerWidth && this.innerWidth <= 640));
|
||||
this.layoutService.setOpen(!(this.innerWidth && this.innerWidth <= 640));
|
||||
this.subscriptions.push(this.params.subscribe(params => {
|
||||
if (this.paramsResolved) {
|
||||
this.loading = true;
|
||||
|
|
@ -158,7 +158,7 @@ export class AppComponent implements OnInit, OnDestroy {
|
|||
} else {
|
||||
LinksResolver.resetProperties();
|
||||
this.stakeholderService.setStakeholder(null);
|
||||
this.layoutService.setOpen(!(this.innerWidth && this.innerWidth < 1219));
|
||||
this.layoutService.setOpen(!(this.innerWidth && this.innerWidth <= 640));
|
||||
this.stakeholder = null;
|
||||
this.buildMenu();
|
||||
this.loading = false;
|
||||
|
|
@ -387,8 +387,8 @@ export class AppComponent implements OnInit, OnDestroy {
|
|||
this.specialSideBarMenuItem = null;
|
||||
if (Session.isPortalAdministrator(this.user)) {
|
||||
this.adminMenuItems.push(new MenuItem("stakeholders", "Manage profiles", "", "/admin", false, [], [], {}, {name: 'settings'}));
|
||||
this.adminMenuItems.push(new MenuItem("super_admin", "Super Admin Options", "", "/admin/admin-tools/portals", false, [], [], {}, {name: 'settings'}));
|
||||
this.adminMenuItems.push(new MenuItem("stakeholders", "Monitor Options", "", "/admin/monitor/admin-tools/pages", false, [], [], {}, {name: 'settings'}));
|
||||
this.adminMenuItems.push(new MenuItem("super_admin", "Super Admin Options", "", "/admin/admin-tools/portals", false, [], [], {}, {name: 'settings'}, null, null, 'admin/admin-tools'));
|
||||
this.adminMenuItems.push(new MenuItem("stakeholders", "Monitor Options", "", "/admin/monitor/admin-tools/pages", false, [], [], {}, {name: 'settings'}, null, null, 'admin/monitor/admin-tools'));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ declare var UIkit;
|
|||
</div>
|
||||
<div class="uk-margin-left">
|
||||
<button (click)="remove()" class="uk-button-default uk-icon-button">
|
||||
<icon name="remove"></icon>
|
||||
<icon name="delete"></icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="uk-margin-small-left">
|
||||
|
|
@ -81,7 +81,7 @@ declare var UIkit;
|
|||
</div>
|
||||
</div>
|
||||
<!-- Full width error message -->
|
||||
<div *ngIf="uploadError" class="uk-text-danger uk-width-1-1">{{uploadError}}</div>
|
||||
<div *ngIf="uploadError" class="uk-text-danger uk-margin-small-top uk-width-1-1">{{uploadError}}</div>
|
||||
</div>
|
||||
<div [class]="canChooseType ? 'uk-width-1-3@m' : 'uk-width-1-2@m'">
|
||||
<div input [formInput]="stakeholderFb.get('visibility')"
|
||||
|
|
|
|||
|
|
@ -4,8 +4,6 @@ import {CommonModule} from "@angular/common";
|
|||
import {InputModule} from "../../openaireLibrary/sharedComponents/input/input.module";
|
||||
import {ReactiveFormsModule} from "@angular/forms";
|
||||
import {IconsModule} from "../../openaireLibrary/utils/icons/icons.module";
|
||||
import {IconsService} from "../../openaireLibrary/utils/icons/icons.service";
|
||||
import {cloud_upload, edit, remove} from "../../openaireLibrary/utils/icons/icons";
|
||||
import {NotifyFormModule} from "../../openaireLibrary/notifications/notify-form/notify-form.module";
|
||||
|
||||
@NgModule({
|
||||
|
|
@ -14,7 +12,5 @@ import {NotifyFormModule} from "../../openaireLibrary/notifications/notify-form/
|
|||
exports: [EditStakeholderComponent]
|
||||
})
|
||||
export class EditStakeholderModule {
|
||||
constructor(private iconsService: IconsService) {
|
||||
this.iconsService.registerIcons([remove, edit, cloud_upload]);
|
||||
}
|
||||
constructor() {}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,17 @@
|
|||
<div page-content>
|
||||
<div page-content (stickyEmitter)="stickyPageHeader = $event">
|
||||
<div header>
|
||||
<div class="uk-flex uk-flex-middle uk-margin-top info"
|
||||
[class.uk-active]="stickyPageHeader">
|
||||
<div>
|
||||
<div class="uk-margin-remove uk-text-primary-gradient uk-text-bold uk-h6">
|
||||
Admin Dashboard - Manage profiles
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<li [class.uk-active]="tab === 'all'"><a (click)="tab = 'all'">All</a></li>
|
||||
<li [class.uk-active]="tab === 'templates'"><a (click)="tab = 'templates'">Profile templates</a></li>
|
||||
<li [class.uk-active]="tab === 'profiles'"><a (click)="tab = 'profiles'">Profiles</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div inner>
|
||||
|
|
@ -16,9 +22,9 @@
|
|||
<div *ngIf="loading" class="uk-margin-medium-top uk-padding-large">
|
||||
<loading></loading>
|
||||
</div>
|
||||
<div *ngIf="!loading" class="uk-section uk-section-small" uk-height-match="target: .titleContainer; row: false">
|
||||
<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-margin-medium-top">
|
||||
<div *ngIf="tab != 'profiles' && isCurator()" class="uk-section">
|
||||
<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>
|
||||
|
|
@ -34,7 +40,7 @@
|
|||
No profiles to manage yet
|
||||
</h4>
|
||||
</div>
|
||||
<div *ngIf="tab != 'templates' && isManager()" class="uk-margin-large-top">
|
||||
<div *ngIf="tab != 'templates' && isManager()" class="uk-section">
|
||||
<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;">
|
||||
|
|
|
|||
|
|
@ -33,6 +33,7 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
|
|||
public stakeholder: Stakeholder;
|
||||
public index: number;
|
||||
public user = null;
|
||||
public stickyPageHeader: boolean = false;
|
||||
public tab: Tab = 'all';
|
||||
/**
|
||||
* Filtered Stakeholders
|
||||
|
|
@ -66,13 +67,6 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
|
|||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.subscriptions.push(this.route.fragment.subscribe((fragment: Tab) => {
|
||||
if (this.isTab(fragment)) {
|
||||
this.tab = fragment;
|
||||
} else {
|
||||
this.tab = 'all';
|
||||
}
|
||||
}));
|
||||
this.buildFilters();
|
||||
this.properties = properties;
|
||||
this.title.setTitle('Manage profiles');
|
||||
|
|
|
|||
|
|
@ -168,9 +168,9 @@
|
|||
<iframe *ngIf=" !properties.disableFrameLoad && chartsActiveType.get(i + '-' + j).source !== 'image'"
|
||||
[src]="chartsActiveType.get(i + '-' + j).safeResourceUrl"
|
||||
class="uk-width-1-1 uk-blend-multiply" [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"></iframe>
|
||||
<div *ngIf="properties.disableFrameLoad && chartsActiveType.get(i + '-' + j).source !== 'image'"
|
||||
class="uk-alert uk-alert-danger uk-text-center">
|
||||
I frames preview is disabled
|
||||
<div *ngIf="properties.disableFrameLoad && chartsActiveType.get(i + '-' + j).source !== 'image'">
|
||||
<img class="uk-width-1-1 uk-blend-multiply" [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"
|
||||
src="assets/chart-placeholder.png">
|
||||
</div>
|
||||
<img *ngIf="chartsActiveType.get(i + '-' + j).source === 'image'"
|
||||
[src]="chartsActiveType.get(i + '-' + j).safeResourceUrl"
|
||||
|
|
@ -240,7 +240,7 @@
|
|||
<ng-container *ngTemplateOutlet="selected_filters_pills; context: {margin:false}"></ng-container>
|
||||
</div>
|
||||
<div *ngIf="!user" class="uk-margin-top"><a class="uk-link" (click)="logIn()"> Sign in</a> to apply filters.</div>
|
||||
<ul *ngIf="user" class="uk-list uk-list-divider uk-margin-top">
|
||||
<ul *ngIf="user" class="uk-list uk-list-xlarge uk-list-divider uk-margin-top">
|
||||
<li>
|
||||
<range-filter [filter]="periodFilter" yearMin="2000" [yearMax]="currentYear" [mandatoryRange]="true"
|
||||
(onFilterChange)="filter()"></range-filter>
|
||||
|
|
|
|||
|
|
@ -116,7 +116,6 @@ export class MonitorComponent implements OnInit, OnDestroy {
|
|||
let subscription: Subscription;
|
||||
this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {
|
||||
this.user = user;
|
||||
|
||||
this.subscriptions.push(this.route.params.subscribe(params => {
|
||||
this.loading = true;
|
||||
this.activeTopic = null;
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ import {SearchFilterModule} from "../openaireLibrary/searchPages/searchUtils/sea
|
|||
import {PageContentModule} from "../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module";
|
||||
import {IconsService} from '../openaireLibrary/utils/icons/icons.service';
|
||||
import {IconsModule} from '../openaireLibrary/utils/icons/icons.module';
|
||||
import {done, filters, incognito} from "../openaireLibrary/utils/icons/icons";
|
||||
import {filters, incognito} from "../openaireLibrary/utils/icons/icons";
|
||||
import {LogoUrlPipeModule} from "../openaireLibrary/utils/pipes/logoUrlPipe.module";
|
||||
|
||||
@NgModule({
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
Subproject commit c8187161905d88e4def274a3cd942a262e4d21e8
|
||||
Subproject commit 41d5926be3265f11808c954d5e4efe9737a1f8d3
|
||||
|
|
@ -2,17 +2,76 @@
|
|||
min-height: 270px;
|
||||
}
|
||||
|
||||
div[id*="number-"] .uk-card-body {
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
div[id*="chart-"] .uk-card-body {
|
||||
padding-top: 75px;
|
||||
}
|
||||
|
||||
.number-preview {
|
||||
border: 1px solid #D1D1D1;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--muted-color);
|
||||
background: transparent;
|
||||
border-radius: 6px;
|
||||
min-width: 100px;
|
||||
min-height: 70px;
|
||||
}
|
||||
|
||||
.refresh-indicator {
|
||||
background-color: rgba(0, 0, 0, 0.50);
|
||||
border-radius: 6px;
|
||||
position: absolute;
|
||||
color: var(--light-color);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 60px 45px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--muted-color);
|
||||
position: relative;
|
||||
background: var(--light-color);
|
||||
border-left: 5px var(--primary-color) solid;
|
||||
}
|
||||
|
||||
.section .tools {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -100%);
|
||||
width: 50px;
|
||||
max-width: 50px;
|
||||
padding: 5px 0 5px 10px;
|
||||
background-image: var(--dashboard-primary-image);
|
||||
color: var(--light-color);
|
||||
-webkit-clip-path: polygon(20% 5%, 80% 5%, 100% 100%, 0% 100%);
|
||||
clip-path: polygon(20% 5%, 80% 5%, 100% 100%, 0% 100%);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.section:hover .tools {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.section:hover .tools a {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
|
||||
/* New section*/
|
||||
.new-section {
|
||||
border: #707070 dashed 1px;
|
||||
border-radius: 2px;
|
||||
background-color: white;
|
||||
min-height: 200px;
|
||||
position: relative;
|
||||
box-shadow: 0 2px 6px #00000038;
|
||||
}
|
||||
|
||||
.new-section .tools {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.new-section .tools .md-btn .material-icons {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
margin: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,256 +1,218 @@
|
|||
<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">
|
||||
<div class="section uk-margin-top uk-padding-small">
|
||||
<div class="tools">
|
||||
<div class="actions">
|
||||
<a [class.uk-disabled]="editing" class="" (click)="createSection(i, 'number')"
|
||||
title="Create a new section">
|
||||
<icon name="add"></icon>
|
||||
</a>
|
||||
<!--<button class="md-btn md-btn-mini"><i class="material-icons rotate-90">drag_indicator</i></button>-->
|
||||
<a [title]="(number.defaultId?'Default sections cannot be deleted':'Delete section')"
|
||||
(click)="deleteSectionOpen(number, i, 'number', 'delete')">
|
||||
<icon name="close"></icon>
|
||||
</a>
|
||||
<!-- <ng-container *ngIf="!stakeholder.defaultId">-->
|
||||
<!-- <button [disabled]="editing || number.defaultId " class="md-btn md-btn-mini"-->
|
||||
<!-- [title]="(number.defaultId?'Default sections cannot be deleted':'Delete all related sections')"-->
|
||||
<!-- (click)="deleteSectionOpen(number, i, 'number', 'delete')"><i class="material-icons">highlight_off</i>-->
|
||||
<!-- </button>-->
|
||||
<!-- <button [disabled]="editing || number.defaultId " class="md-btn md-btn-mini"-->
|
||||
<!-- [title]="(number.defaultId?'Default sections cannot be deleted':'Delete section and disconnect related')"-->
|
||||
<!-- (click)="deleteSectionOpen(number, i, 'number', 'disconnect')"><i class="material-icons">link_off</i>-->
|
||||
<!-- </button>-->
|
||||
<!-- </ng-container>-->
|
||||
<h5 class="uk-text-bold">Number Indicators</h5>
|
||||
<div class="uk-grid uk-grid-large uk-child-width-1-1" uk-grid>
|
||||
<div *ngFor="let number of numbers; let i=index">
|
||||
<div class="section">
|
||||
<div class="tools">
|
||||
<div class="actions uk-flex uk-flex-middle">
|
||||
<a [class.uk-disabled]="editing" class="" (click)="createSection(i, 'number')"
|
||||
title="Create a new section">
|
||||
<icon name="add" [flex]="true"></icon>
|
||||
</a>
|
||||
<a [title]="(number.defaultId?'Default sections cannot be deleted':'Delete section')"
|
||||
(click)="deleteSectionOpen(number, i, 'number', 'delete')">
|
||||
<icon name="close" [flex]="true"></icon>
|
||||
</a>
|
||||
<!-- <ng-container *ngIf="!stakeholder.defaultId">-->
|
||||
<!-- <button [disabled]="editing || number.defaultId " class="md-btn md-btn-mini"-->
|
||||
<!-- [title]="(number.defaultId?'Default sections cannot be deleted':'Delete all related sections')"-->
|
||||
<!-- (click)="deleteSectionOpen(number, i, 'number', 'delete')"><i class="material-icons">highlight_off</i>-->
|
||||
<!-- </button>-->
|
||||
<!-- <button [disabled]="editing || number.defaultId " class="md-btn md-btn-mini"-->
|
||||
<!-- [title]="(number.defaultId?'Default sections cannot be deleted':'Delete section and disconnect related')"-->
|
||||
<!-- (click)="deleteSectionOpen(number, i, 'number', 'disconnect')"><i class="material-icons">link_off</i>-->
|
||||
<!-- </button>-->
|
||||
<!-- </ng-container>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="numberSections.at(i)" class="uk-margin-medium-bottom">
|
||||
<div dashboard-input [formInput]="numberSections.at(i).get('title')"
|
||||
[extraLeft]="false" class="uk-width-1-3@m uk-width-1-1" placeholder="Title"
|
||||
inputClass="input-borderless uk-h5 uk-margin-remove">
|
||||
<div [class.uk-invisible]="numberSections.at(i).get('title').pristine">
|
||||
<button class="uk-button uk-button-secondary" [disabled]="editing"
|
||||
(click)="saveSection(numberSections.at(i).value, i, 'number')">
|
||||
Save
|
||||
</button>
|
||||
<div *ngIf="numberSections.at(i)" class="uk-margin-medium-bottom">
|
||||
<div input [formInput]="numberSections.at(i).get('title')"
|
||||
(focusEmitter)="saveSection($event, numberSections.at(i), i, 'number')"
|
||||
class="uk-width-1-3@m uk-width-1-1" placeholder="Title" inputClass="border-bottom"></div>
|
||||
</div>
|
||||
<div [id]="'number-' + number._id" class="uk-grid-match uk-grid-small uk-grid" uk-sortable="group: chart" uk-grid>
|
||||
<ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
|
||||
<div *ngIf="indicator" [id]="indicator._id"
|
||||
[ngClass]="getNumberClassBySize(indicator.width)">
|
||||
<div class="uk-card uk-card-default uk-card-body uk-flex uk-flex-column uk-flex-center uk-position-relative">
|
||||
<div [attr.uk-tooltip]="exportLoading ? 'title:Edit is disabled, while exporting indicators; cls:uk-active' : 'cls: uk-invisible'"
|
||||
class="uk-position-top-right uk-margin-small-right uk-margin-small-top">
|
||||
<a class="uk-link-reset uk-flex uk-flex-middle" (click)="$event.stopPropagation();$event.preventDefault()">
|
||||
<icon [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(indicator.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)="editNumberIndicatorOpen(number, indicator._id); hide(element)">Edit</a>
|
||||
</li>
|
||||
<li class="uk-nav-divider"></li>
|
||||
<ng-template ngFor [ngForOf]="stakeholderUtils.visibility" let-v>
|
||||
<li>
|
||||
<a (click)="changeIndicatorStatus(number._id, indicator, 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="indicator.visibility === v.value" [flex]="true" name="done" class="uk-text-secondary" ratio="0.8"></icon>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ng-template>
|
||||
<hr *ngIf="!indicator.defaultId" class="uk-nav-divider">
|
||||
<li *ngIf="!indicator.defaultId && !editing"><a
|
||||
(click)="deleteIndicatorOpen(number, indicator._id, 'number', 'delete');hide(element)">Delete</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-text-center">
|
||||
<h3 class="number uk-text-bold uk-text-primary-gradient">
|
||||
<span *ngIf="numberResults.get(i + '-' + j)">{{numberResults.get(i + '-' + j) | number}}</span>
|
||||
<span *ngIf="!numberResults.get(i + '-' + j)">--</span>
|
||||
</h3>
|
||||
<div class="uk-text-uppercase uk-text-small uk-margin-top">
|
||||
{{indicator.name ? indicator.name : 'No title available'}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</div>
|
||||
<div class="uk-margin-medium-top">
|
||||
<div class="uk-grid uk-grid-small" uk-grid>
|
||||
<div [ngClass]="getNumberClassBySize('small')">
|
||||
<a class="uk-card uk-card-default uk-card-body uk-link-reset" (click)="editNumberIndicatorOpen(number)">
|
||||
<h6 class="uk-text-bold uk-text-center">
|
||||
Create a new number Indicator
|
||||
</h6>
|
||||
<div class="uk-flex uk-flex-center uk-text-primary-gradient uk-margin-large-top">
|
||||
<icon name="add" [flex]="true" ratio="3"></icon>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div [id]="'number-' + number._id" class="uk-grid-match uk-grid-small uk-grid" uk-sortable="group: chart" uk-grid>
|
||||
<ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
|
||||
<div *ngIf="indicator" [id]="indicator._id"
|
||||
[ngClass]="getNumberClassBySize(indicator.width)">
|
||||
<div class="uk-card uk-card-default uk-flex uk-flex-column uk-flex-center uk-position-relative uk-card-hover">
|
||||
<div class="uk-card-body">
|
||||
<ng-container
|
||||
*ngTemplateOutlet="visibilityOptions; context:{indicator: indicator, sectionId: number._id}"></ng-container>
|
||||
<div
|
||||
[attr.uk-tooltip]="exportLoading ? 'title:Edit is disabled, while exporting indicators; cls:uk-active' : 'cls: uk-invisible'"
|
||||
class="uk-position-top-right uk-margin-small-right uk-margin-small-top clickable">
|
||||
<i [class]="exportLoading ? 'uk-disabled ' : ' '" 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>
|
||||
<div>
|
||||
<ng-container *ngTemplateOutlet="new_section; context:{type: 'number'}"></ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="chartSections" class="uk-margin-large-top">
|
||||
<h5 class="uk-text-bold">Chart Indicators</h5>
|
||||
<div class="uk-grid uk-grid-large uk-child-width-1-1" uk-grid>
|
||||
<div *ngFor="let chart of charts; let i=index">
|
||||
<div class="section uk-margin-top uk-padding-small">
|
||||
<div class="tools">
|
||||
<div class="actions uk-flex uk-flex-middle">
|
||||
<a [class.uk-disabled]="editing" class="" (click)="createSection(i)"
|
||||
title="Create a new section">
|
||||
<icon name="add" [flex]="true"></icon>
|
||||
</a>
|
||||
<a [title]="(chart.defaultId?'Default sections cannot be deleted':'Delete section')"
|
||||
(click)="deleteSectionOpen(chart, i, 'chart', 'delete')">
|
||||
<icon name="close" [flex]="true"></icon>
|
||||
</a>
|
||||
<!-- <ng-container *ngIf="!stakeholder.defaultId">-->
|
||||
<!-- <button [disabled]="editing || chart.defaultId " class="md-btn md-btn-mini"-->
|
||||
<!-- [title]="(chart.defaultId?'Default sections cannot be deleted':'Delete all related sections')"-->
|
||||
<!-- (click)="deleteSectionOpen(chart, i, 'chart', 'delete')"><i class="material-icons">highlight_off</i>-->
|
||||
<!-- </button>-->
|
||||
<!-- <button [disabled]="editing || chart.defaultId " class="md-btn md-btn-mini"-->
|
||||
<!-- [title]="(chart.defaultId?'Default sections cannot be deleted':'Delete section and disconnect related')"-->
|
||||
<!-- (click)="deleteSectionOpen(chart, i, 'chart', 'disconnect')"><i class="material-icons">link_off</i>-->
|
||||
<!-- </button>-->
|
||||
<!-- </ng-container>-->
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="chartSections.at(i)"
|
||||
class="uk-margin-medium-bottom">
|
||||
<div input [formInput]="chartSections.at(i).get('title')"
|
||||
(focusEmitter)="saveSection($event, chartSections.at(i), i)"
|
||||
class="uk-width-1-3@m uk-width-1-1" placeholder="Title" inputClass="border-bottom"></div>
|
||||
</div>
|
||||
<div [id]="'chart-' + chart._id" class="uk-grid-match uk-grid-small uk-grid" uk-sortable="group: chart" uk-grid>
|
||||
<ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index">
|
||||
<div *ngIf="indicator" [id]="indicator._id" [ngClass]="getChartClassBySize(indicator.width)">
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative">
|
||||
<div [attr.uk-tooltip]="exportLoading ? 'title:Edit is disabled, while exporting indicators; cls:uk-active' : 'cls: uk-invisible'"
|
||||
class="uk-position-top-right uk-margin-small-right uk-margin-small-top">
|
||||
<a class="uk-link-reset uk-flex uk-flex-middle" (click)="$event.stopPropagation();$event.preventDefault()">
|
||||
<icon [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(indicator.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 *ngIf="!editing"><a
|
||||
(click)="editNumberIndicatorOpen(number, indicator._id)">Edit</a></li>
|
||||
<li>
|
||||
<a (click)="editChartIndicatorOpen(chart, indicator._id); hide(element)">Edit</a>
|
||||
</li>
|
||||
<li class="uk-nav-divider"></li>
|
||||
<ng-template ngFor [ngForOf]="stakeholderUtils.visibility" let-v>
|
||||
<li *ngIf="indicator.visibility != v.value"><a (click)="changeIndicatorStatus(number._id,
|
||||
indicator, v.value); hide(element)">
|
||||
{{'Make ' + v.label.toLowerCase()}}</a>
|
||||
<li>
|
||||
<a (click)="changeIndicatorStatus(chart._id, indicator, 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="indicator.visibility === v.value" [flex]="true" name="done" class="uk-text-secondary" ratio="0.8"></icon>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ng-template>
|
||||
<hr *ngIf="!indicator.defaultId" class="uk-nav-divider">
|
||||
<hr *ngIf="!indicator.defaultId" class="uk-nav-divider">
|
||||
<li *ngIf="!indicator.defaultId && !editing"><a
|
||||
(click)="deleteIndicatorOpen(number, indicator._id, 'number', 'delete');hide(element)">Delete</a>
|
||||
<!-- <ng-container *ngIf="!stakeholder.defaultId">-->
|
||||
<!-- <a (click)="deleteIndicatorOpen(number, indicator._id, 'number', 'delete');hide(element)">Delete from all profiles</a>-->
|
||||
<!-- <a (click)="deleteIndicatorOpen(number, indicator._id, 'number', 'disconnect');hide(element)">Delete and disconnect from all profiles</a>-->
|
||||
<!-- </ng-container>-->
|
||||
(click)="deleteIndicatorOpen(chart, indicator._id, 'chart', 'delete');hide(element)">Delete</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="uk-text-center uk-text-bold">
|
||||
{{indicator.name ? indicator.name : 'No title available'}}
|
||||
<div *ngIf="indicator.name" class="uk-text-center uk-text-bold uk-margin-small-bottom">
|
||||
{{indicator.name}}
|
||||
</div>
|
||||
<iframe *ngIf="!properties.disableFrameLoad && indicator.indicatorPaths[0] && indicator.indicatorPaths[0].source !=='image' &&
|
||||
safeUrls.get(indicatorUtils.getFullUrl(stakeholder, indicator.indicatorPaths[0]))"
|
||||
[src]="safeUrls.get(indicatorUtils.getFullUrl(stakeholder, indicator.indicatorPaths[0]))"
|
||||
class="uk-width-1-1 uk-blend-multiply" [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"></iframe>
|
||||
<div *ngIf="properties.disableFrameLoad && indicator.indicatorPaths[0].source !=='image'">
|
||||
<img class="uk-width-1-1 uk-blend-multiply" [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"
|
||||
src="assets/chart-placeholder.png">
|
||||
</div>
|
||||
<div *ngIf="indicator.indicatorPaths[0] && indicator.indicatorPaths[0].source === 'image'">
|
||||
<img class="uk-width-1-1 uk-blend-multiply" [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"
|
||||
[src]="indicator.indicatorPaths[0].url">
|
||||
</div>
|
||||
<h3 class="uk-margin-medium-top uk-text-center uk-text-bold">
|
||||
<span *ngIf="numberResults.get(i + '-' + j)">{{numberResults.get(i + '-' + j) | number}}</span>
|
||||
<span *ngIf="!numberResults.get(i + '-' + j)">--</span>
|
||||
</h3>
|
||||
<!--<ng-container *ngTemplateOutlet="description; context: {indicator:indicator}"></ng-container>-->
|
||||
</div>
|
||||
<div *ngIf="indicator.description || indicator.additionalDescription"
|
||||
class="uk-overlay uk-position-bottom">
|
||||
<div class="uk-padding multi-line-ellipsis lines-3">
|
||||
<p class="uk-margin-remove">
|
||||
<span *ngIf="indicator.description">
|
||||
{{indicator.description}}
|
||||
</span>
|
||||
<br>
|
||||
<span *ngIf="indicator.additionalDescription">
|
||||
{{indicator.additionalDescription}}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</div>
|
||||
<div class="uk-margin-medium-top">
|
||||
<div class="uk-grid uk-grid-small" uk-grid>
|
||||
<div [ngClass]="getNumberClassBySize('small')">
|
||||
<div class="uk-card uk-card-default uk-card-body clickable" (click)="editNumberIndicatorOpen(number)">
|
||||
<h6 class="uk-text-bold uk-text-center">
|
||||
Create a new number Indicator
|
||||
</h6>
|
||||
<div class="uk-flex uk-flex-center uk-text-secondary uk-margin-large-top">
|
||||
<icon name="add" ratio="4"></icon>
|
||||
</ng-template>
|
||||
</div>
|
||||
<div class="uk-margin-medium-top">
|
||||
<div class="uk-grid uk-grid-small" uk-grid>
|
||||
<div [ngClass]="getChartClassBySize('small')">
|
||||
<div class=" uk-card uk-card-default uk-card-body clickable" (click)="editChartIndicatorOpen(chart)">
|
||||
<h5 class="uk-text-bold">
|
||||
Create a custom indicator
|
||||
</h5>
|
||||
<div class="uk-text-muted uk-text-small">
|
||||
Use our advance tool to create a custom Indicator that suit the needs of your funding
|
||||
KPI's.
|
||||
</div>
|
||||
<div class="uk-flex uk-flex-center uk-text-primary-gradient uk-margin-medium-top">
|
||||
<icon name="add" ratio="3" [flex]="true"></icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-container *ngTemplateOutlet="new_section; context:{type: 'number'}"></ng-container>
|
||||
</div>
|
||||
<div *ngIf="chartSections" class="uk-margin-large-top">
|
||||
<h6 class="uk-text-bold">Chart Indicators</h6>
|
||||
<ng-template ngFor [ngForOf]="charts" let-chart let-i="index">
|
||||
<div class="section uk-margin-top uk-padding-small">
|
||||
<div class="tools">
|
||||
<div class="actions">
|
||||
<a [class.uk-disabled]="editing" class="" (click)="createSection(i)"
|
||||
title="Create a new section">
|
||||
<icon name="add"></icon>
|
||||
</a>
|
||||
<!--<button class="md-btn md-btn-mini"><i class="material-icons rotate-90">drag_indicator</i></button>-->
|
||||
<a [title]="(chart.defaultId?'Default sections cannot be deleted':'Delete section')"
|
||||
(click)="deleteSectionOpen(chart, i, 'chart', 'delete')">
|
||||
<icon name="close"></icon>
|
||||
</a>
|
||||
<!-- <ng-container *ngIf="!stakeholder.defaultId">-->
|
||||
<!-- <button [disabled]="editing || chart.defaultId " class="md-btn md-btn-mini"-->
|
||||
<!-- [title]="(chart.defaultId?'Default sections cannot be deleted':'Delete all related sections')"-->
|
||||
<!-- (click)="deleteSectionOpen(chart, i, 'chart', 'delete')"><i class="material-icons">highlight_off</i>-->
|
||||
<!-- </button>-->
|
||||
<!-- <button [disabled]="editing || chart.defaultId " class="md-btn md-btn-mini"-->
|
||||
<!-- [title]="(chart.defaultId?'Default sections cannot be deleted':'Delete section and disconnect related')"-->
|
||||
<!-- (click)="deleteSectionOpen(chart, i, 'chart', 'disconnect')"><i class="material-icons">link_off</i>-->
|
||||
<!-- </button>-->
|
||||
<!-- </ng-container>-->
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="chartSections.at(i)"
|
||||
class="uk-margin-medium-bottom">
|
||||
<div dashboard-input [formInput]="chartSections.at(i).get('title')"
|
||||
[extraLeft]="false" class="uk-width-1-3@m uk-width-1-1" placeholder="Title"
|
||||
inputClass="input-borderless uk-h5 uk-margin-remove">
|
||||
<div [class.uk-invisible]="chartSections.at(i).get('title').pristine">
|
||||
<button class="uk-button uk-button-secondary" [disabled]="editing"
|
||||
(click)="saveSection(chartSections.at(i).value, i)">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div [id]="'chart-' + chart._id" class="uk-grid-match uk-grid-small uk-grid" uk-sortable="group: chart" uk-grid>
|
||||
<ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index">
|
||||
<div *ngIf="indicator" [id]="indicator._id"
|
||||
[ngClass]="getChartClassBySize(indicator.width)">
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-card-hover">
|
||||
<ng-container
|
||||
*ngTemplateOutlet="visibilityOptions; context:{indicator: indicator, sectionId: chart._id}"></ng-container>
|
||||
<div
|
||||
[attr.uk-tooltip]="exportLoading ? 'title:Edit is disabled, while exporting indicators; cls:uk-active' : 'cls: uk-invisible'"
|
||||
class="uk-position-top-right uk-margin-small-right uk-margin-small-top clickable">
|
||||
<i [class]="exportLoading ? 'uk-disabled ' : ' '" uk-icon="more-vertical"
|
||||
(click)="$event.stopPropagation();$event.preventDefault()"></i>
|
||||
<div #element uk-dropdown="mode: click; pos: bottom-right; delay-hide: 0; flip: false">
|
||||
<ul class="uk-nav uk-dropdown-nav">
|
||||
<li *ngIf="!editing"><a
|
||||
(click)="editChartIndicatorOpen(chart, indicator._id);hide(element)">Edit</a>
|
||||
</li>
|
||||
<ng-template ngFor [ngForOf]="stakeholderUtils.visibility" let-v>
|
||||
<li *ngIf="indicator.visibility != v.value"><a (click)="changeIndicatorStatus(chart._id,
|
||||
indicator, v.value); hide(element)">
|
||||
{{'Make ' + v.label.toLowerCase()}}</a>
|
||||
</li>
|
||||
</ng-template>
|
||||
<hr *ngIf="!indicator.defaultId " class="uk-nav-divider">
|
||||
<li *ngIf="!editing && !indicator.defaultId "><a
|
||||
(click)="deleteIndicatorOpen(chart, indicator._id, 'chart', 'delete');hide(element)">
|
||||
Delete</a>
|
||||
<!-- <a (click)="deleteIndicatorOpen(chart, indicator._id, 'chart', 'delete');hide(element)">Delete from all profiles</a>-->
|
||||
<!-- <a (click)="deleteIndicatorOpen(chart, indicator._id, 'chart', 'disconnect');hide(element)">Delete and disconnect from all profiles</a>-->
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div *ngIf="indicator.name" class="uk-text-center uk-text-bold uk-margin-small-bottom">
|
||||
{{indicator.name}}
|
||||
</div>
|
||||
<iframe *ngIf="!properties.disableFrameLoad && indicator.indicatorPaths[0] &&
|
||||
indicator.indicatorPaths[0].source !=='image' && safeUrls.get(indicatorUtils.getFullUrl(stakeholder, indicator.indicatorPaths[0]))"
|
||||
[src]="safeUrls.get(indicatorUtils.getFullUrl(stakeholder, indicator.indicatorPaths[0]))"
|
||||
class="uk-width-1-1 uk-blend-multiply" [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"></iframe>
|
||||
<div *ngIf="properties.disableFrameLoad &&
|
||||
indicator.indicatorPaths[0].source !==
|
||||
'image'" class="uk-alert uk-alert-danger uk-text-center">I frames
|
||||
preview is disabled
|
||||
</div>
|
||||
<div *ngIf="indicator.indicatorPaths[0] && indicator.indicatorPaths[0].source === 'image'">
|
||||
<img [class]="' uk-width-1-1 uk-height-' +
|
||||
(indicator.height?indicator.height.toLowerCase():'medium')"
|
||||
[src]="indicator.indicatorPaths[0].url">
|
||||
</div>
|
||||
<!--<ng-container *ngTemplateOutlet="description; context: {indicator:indicator}"></ng-container>-->
|
||||
</div>
|
||||
<div *ngIf="indicator.description || indicator.additionalDescription"
|
||||
class="uk-overlay uk-position-bottom">
|
||||
<div class="uk-padding multi-line-ellipsis lines-3">
|
||||
<p class="uk-margin-remove">
|
||||
<span *ngIf="indicator.description">
|
||||
{{indicator.description}}
|
||||
</span>
|
||||
<br>
|
||||
<span *ngIf="indicator.additionalDescription">
|
||||
{{indicator.additionalDescription}}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</div>
|
||||
<div class="uk-margin-medium-top">
|
||||
<div class="uk-grid uk-grid-small" uk-grid>
|
||||
<div [ngClass]="getChartClassBySize('small')">
|
||||
<div class=" uk-card uk-card-default uk-card-body clickable" (click)="editChartIndicatorOpen(chart)">
|
||||
<h5 class="uk-text-bold">
|
||||
Create a custom indicator
|
||||
</h5>
|
||||
<div class="uk-text-muted uk-text-small">
|
||||
Use our advance tool to create a custom Indicator that suit the needs of your funding
|
||||
KPI's.
|
||||
</div>
|
||||
<div class="uk-flex uk-flex-center uk-text-secondary uk-margin-medium-top">
|
||||
<icon name="add" ratio="5"></icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<ng-container *ngTemplateOutlet="new_section; context:{type: 'chart'}"></ng-container>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-container *ngTemplateOutlet="new_section; context:{type: 'chart'}"></ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<modal-alert #editNumberModal
|
||||
|
|
@ -259,114 +221,90 @@
|
|||
[okDisabled]="numberIndicatorFb && (numberIndicatorFb.invalid || numberIndicatorFb.pristine)">
|
||||
<div class="uk-padding-small">
|
||||
<div *ngIf="numberIndicatorFb" class="uk-grid" [formGroup]="numberIndicatorFb" uk-grid>
|
||||
<div dashboard-input class="uk-width-1-1" [formInput]="numberIndicatorFb.get('name')" placeholder="Write a title"
|
||||
label="Title"></div>
|
||||
<div dashboard-input class="uk-width-1-1" *ngIf="stakeholder.defaultId !=-1 && ( (indicator.description &&
|
||||
indicator.description.length > 0) || !stakeholder.defaultId)"
|
||||
[formInput]="numberIndicatorFb.get('description')"
|
||||
placeholder="Write a description"
|
||||
label="Profile description" type="textarea">
|
||||
<div input class="uk-width-1-1" [formInput]="numberIndicatorFb.get('name')" placeholder="Title"></div>
|
||||
<div *ngIf="stakeholder.defaultId !=-1 && ( (indicator.description && indicator.description.length > 0) || !stakeholder.defaultId)"
|
||||
input class="uk-width-1-1" [formInput]="numberIndicatorFb.get('description')" placeholder="Profile description" type="textarea">
|
||||
</div>
|
||||
<div dashboard-input class="uk-width-1-1" *ngIf="stakeholder.defaultId"
|
||||
[formInput]="numberIndicatorFb.get('additionalDescription')"
|
||||
placeholder="Write a description"
|
||||
label="Description" type="textarea">
|
||||
<div input class="uk-width-1-1" *ngIf="stakeholder.defaultId" [formInput]="numberIndicatorFb.get('additionalDescription')"
|
||||
placeholder="Description" type="textarea">
|
||||
</div>
|
||||
<div dashboard-input class="uk-width-1-2@m" [formInput]="numberIndicatorFb.get('visibility')"
|
||||
placeholder="Select a status"
|
||||
label="Visibility" [options]="stakeholderUtils.visibility" type="select">
|
||||
<div input class="uk-width-1-2@m" [formInput]="numberIndicatorFb.get('visibility')"
|
||||
placeholder="Visibility" [options]="stakeholderUtils.visibility" type="select">
|
||||
</div>
|
||||
<div dashboard-input class="uk-width-1-2@m" [formInput]="numberIndicatorFb.get('width')"
|
||||
type="select" [options]="indicatorUtils.indicatorSizes"
|
||||
placeholder="Select a size" label="Number Size">
|
||||
<div input class="uk-width-1-2@m" [formInput]="numberIndicatorFb.get('width')"
|
||||
placeholder="Number Size" [options]="indicatorUtils.indicatorSizes" type="select">
|
||||
</div>
|
||||
<div *ngIf="numberIndicatorPaths" formArrayName="indicatorPaths">
|
||||
<div *ngFor="let indicatorPath of numberIndicatorPaths.controls; let i=index"
|
||||
[formGroup]="indicatorPath">
|
||||
<div *ngFor="let indicatorPath of numberIndicatorPaths.controls; let i=index" [formGroupName]="i">
|
||||
<div class="uk-grid" uk-grid>
|
||||
<div class="uk-width-1-1">
|
||||
<div class="uk-grid" uk-grid>
|
||||
<div class="uk-width-1-1 uk-flex uk-flex-between uk-flex-bottom">
|
||||
<div dashboard-input [formInput]="indicatorPath.get('url')" label="Number URL"
|
||||
placeholder="Write a URL" class='uk-width-1-1' id="numberURL">
|
||||
<div class="uk-width-1-1 uk-flex uk-flex-middle">
|
||||
<div input class="uk-width-expand" [formInput]="indicatorPath.get('url')" placeholder="Number URL">
|
||||
<div *ngIf="urlParameterizedMessage" warning>{{urlParameterizedMessage}}</div>
|
||||
</div>
|
||||
<div class='uk-padding-small'>
|
||||
<i class="clickable" uk-icon="copy" (click)="copyToClipboard('numberURL')" uk-tooltip="Copy URL"></i>
|
||||
</div>
|
||||
<div class='uk-padding-small'>
|
||||
<a class="uk-link-reset" (click)="copyToClipboard('numberURL')"><icon [flex]="true" name="content_copy"></icon></a>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="showCheckForSchemaEnhancements" class=" uk-width-1-1 ">
|
||||
<div *ngIf="showCheckForSchemaEnhancements" class="uk-width-1-1">
|
||||
<div class="uk-alert uk-alert-warning">
|
||||
There are schema enhancements that can be applied in this query. <a
|
||||
There are schema enhancements that can be applied in this query.<a
|
||||
(click)="indicatorPath.get('url').setValue(indicatorUtils.applySchemaEnhancements(indicatorPath.get('url').value)); indicatorPath.get('url').markAsDirty()">Apply
|
||||
now</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-width-1-1">
|
||||
<div dashboard-input [formInput]="indicatorPath.get('source')" label="Source"
|
||||
type="select" placeholder="Select a source"
|
||||
[options]="isAdministrator?indicatorUtils.allSourceTypes:indicatorUtils.sourceTypes">
|
||||
<div input [formInput]="indicatorPath.get('source')" placeholder="Source"
|
||||
[options]="isAdministrator?indicatorUtils.allSourceTypes:indicatorUtils.sourceTypes" type="select">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div formArrayName="jsonPath" class="uk-width-1-1">
|
||||
<h6 class="uk-text-bold uk-flex uk-flex-middle uk-margin-remove-bottom">
|
||||
<h6 class="uk-text-bold uk-margin-remove-bottom">
|
||||
<span>JSON Path</span>
|
||||
</h6>
|
||||
<div
|
||||
*ngIf="numberIndicatorPaths.at(i).get('result').invalid && numberIndicatorPaths.at(i).get('result').errors.required">
|
||||
<div *ngIf="numberIndicatorPaths.at(i).get('result').invalid && numberIndicatorPaths.at(i).get('result').errors.required">
|
||||
<div class="uk-text-danger uk-text-small">
|
||||
This JSON path is not valid or the result has not been calculated yet.
|
||||
Please press calculate on box below to see the result.
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-grid uk-child-width-1-3@m uk-child-width-1-1 uk-margin-top" uk-grid>
|
||||
<div class="uk-grid uk-child-width-1-3@m uk-child-width-1-1 uk-margin-top uk-flex-middle" uk-grid>
|
||||
<div *ngFor="let jsonPath of getJsonPath(i).controls; let j=index" class="uk-flex uk-flex-middle">
|
||||
<div dashboard-input class="uk-width-1-1"
|
||||
[extraLeft]="false"
|
||||
[formInput]="jsonPath"
|
||||
placeholder="Write a field"
|
||||
[label]="'Level ' + +(j + 1)">
|
||||
<div class="uk-flex uk-flex-middle">
|
||||
<span *ngIf="getJsonPath(i).length !== 1"
|
||||
[class.uk-hidden]="numberIndicatorFb.get('defaultId').value"
|
||||
class="uk-margin-small-left uk-text-danger clickable"
|
||||
[class.uk-disabled]="getJsonPath(i).disabled"
|
||||
(click)="removeJsonPath(i, j)">
|
||||
<icon name="close"></icon>
|
||||
</span>
|
||||
<span class="uk-text-center uk-margin-left">
|
||||
<icon *ngIf="indicator.defaultId === null || j < (getJsonPath(i).controls.length - 1)"
|
||||
name="arrow_right"></icon>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div input class="uk-width-1-1" [formInput]="jsonPath" [placeholder]="'Level ' + +(j + 1)"></div>
|
||||
<a [class.uk-invisible]="getJsonPath(i).length === 1 || numberIndicatorFb.get('defaultId').value"
|
||||
class="uk-margin-small-left uk-text-danger"
|
||||
[class.uk-disabled]="getJsonPath(i).disabled"
|
||||
(click)="removeJsonPath(i, j)">
|
||||
<icon name="close"></icon>
|
||||
</a>
|
||||
<span [class.uk-invisible]="getJsonPath(i).disabled || j === (getJsonPath(i).controls.length - 1)" class="uk-text-center uk-margin-small-left">
|
||||
<icon name="east"></icon>
|
||||
</span>
|
||||
</div>
|
||||
<div *ngIf="indicator.defaultId === null" class="uk-flex uk-flex-middle">
|
||||
<button class="uk-icon-button uk-button-secondary uk-margin-medium-top"
|
||||
(click)="addJsonPath(i)">
|
||||
<icon name="add"></icon>
|
||||
<div *ngIf="indicator.defaultId === null">
|
||||
<button class="uk-icon-button uk-button-primary" (click)="addJsonPath(i)">
|
||||
<icon name="add" [flex]="true"></icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-width-1-1 uk-flex uk-flex-center">
|
||||
<div class="uk-flex uk-position-relative">
|
||||
<span class="uk-padding number number-preview uk-text-center">
|
||||
<span
|
||||
*ngIf="numberIndicatorPaths.at(i).get('result').valid && numberIndicatorPaths.at(i).get('result').value !== 0">
|
||||
<span class="uk-padding number number-preview uk-flex uk-flex-column uk-flex-center uk-text-center">
|
||||
<span *ngIf="numberIndicatorPaths.at(i).get('result').valid && numberIndicatorPaths.at(i).get('result').value !== 0">
|
||||
{{numberIndicatorPaths.at(i).get('result').value | number}}
|
||||
</span>
|
||||
<span
|
||||
*ngIf="numberIndicatorPaths.at(i).get('result').valid && numberIndicatorPaths.at(i).get('result').value === 0">
|
||||
<span *ngIf="numberIndicatorPaths.at(i).get('result').valid && numberIndicatorPaths.at(i).get('result').value === 0">
|
||||
--
|
||||
</span>
|
||||
</span>
|
||||
<div *ngIf="numberIndicatorPaths.at(i).get('result').invalid"
|
||||
class="uk-width-1-1 uk-height-1-1 refresh-indicator">
|
||||
<div class="uk-position-relative uk-height-1-1">
|
||||
<div class="uk-position-center uk-text-center clickable uk-text-small"
|
||||
<a class="uk-position-center uk-text-center uk-text-small uk-link-reset"
|
||||
[class.uk-disabled]="numberIndicatorPaths.at(i).get('url').invalid"
|
||||
(click)="validateJsonPath(i, true)">
|
||||
<div>
|
||||
|
|
@ -374,7 +312,7 @@
|
|||
</div>
|
||||
<span *ngIf="numberIndicatorPaths.at(i).get('result').errors.required">Calculate</span>
|
||||
<span *ngIf="numberIndicatorPaths.at(i).get('result').errors.validating">Calculating...</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -386,48 +324,38 @@
|
|||
<div #editNumberNotify notify-form class="uk-width-1-1 uk-margin-medium-top"></div>
|
||||
</div>
|
||||
</modal-alert>
|
||||
<modal-alert #editChartModal
|
||||
[large]="true"
|
||||
(alertOutput)="saveIndicator()"
|
||||
<modal-alert #editChartModal [large]="true" (alertOutput)="saveIndicator()"
|
||||
[okDisabled]="chartIndicatorFb && (chartIndicatorFb.invalid || chartIndicatorFb.pristine)">
|
||||
<div class="uk-padding-small">
|
||||
<div *ngIf="chartIndicatorFb" [formGroup]="chartIndicatorFb" class="uk-grid" uk-grid>
|
||||
<div dashboard-input class="uk-width-1-1" [formInput]="chartIndicatorFb.get('name')" placeholder="Write a title"
|
||||
label="Title"></div>
|
||||
<div dashboard-input class="uk-width-1-1" *ngIf="stakeholder.defaultId !=-1 &&
|
||||
((indicator.description && indicator.description.length > 0) || !stakeholder.defaultId)"
|
||||
[formInput]="chartIndicatorFb.get('description')" placeholder="Write a description"
|
||||
label="Default Description" type="textarea">
|
||||
<div input class="uk-width-1-1" [formInput]="chartIndicatorFb.get('name')" placeholder="Title"></div>
|
||||
<div *ngIf="stakeholder.defaultId !=-1 && ((indicator.description && indicator.description.length > 0) || !stakeholder.defaultId)"
|
||||
input class="uk-width-1-1" [formInput]="chartIndicatorFb.get('description')" placeholder="Default Description" type="textarea">
|
||||
</div>
|
||||
<div dashboard-input *ngIf="stakeholder.defaultId" class="uk-width-1-1"
|
||||
[formInput]="chartIndicatorFb.get('additionalDescription')" placeholder="Write a default description"
|
||||
label="Description" type="textarea">
|
||||
<div *ngIf="stakeholder.defaultId" input class="uk-width-1-1" [formInput]="chartIndicatorFb.get('additionalDescription')"
|
||||
placeholder="Description" type="textarea">
|
||||
</div>
|
||||
<div dashboard-input class="uk-width-1-2@m" [formInput]="chartIndicatorFb.get('visibility')"
|
||||
placeholder="Select a status"
|
||||
label="Status" [options]="stakeholderUtils.visibility" type="select">
|
||||
<div input class="uk-width-1-2@m" [formInput]="chartIndicatorFb.get('visibility')"
|
||||
placeholder="Status" [options]="stakeholderUtils.visibility" type="select">
|
||||
</div>
|
||||
<div dashboard-input class="uk-width-1-2@m" [formInput]="chartIndicatorFb.get('width')"
|
||||
type="select" [options]="indicatorUtils.indicatorSizes" placeholder="Select a size"
|
||||
label="Chart width">
|
||||
<div input class="uk-width-1-2@m" [formInput]="chartIndicatorFb.get('width')" placeholder="Chart width"
|
||||
[options]="indicatorUtils.indicatorSizes" type="select">
|
||||
</div>
|
||||
<div dashboard-input class="uk-width-1-2@m" [formInput]="chartIndicatorFb.get('height')"
|
||||
type="select" [options]="indicatorUtils.indicatorSizes" placeholder="Select a size"
|
||||
label="Chart height">
|
||||
<div input class="uk-width-1-2@m" [formInput]="chartIndicatorFb.get('height')" placeholder="Chart height"
|
||||
[options]="indicatorUtils.indicatorSizes" type="select">
|
||||
</div>
|
||||
<div *ngIf="chartIndicatorPaths" formArrayName="indicatorPaths" class="uk-width-1-1">
|
||||
<div *ngFor="let indicatorPath of chartIndicatorPaths.controls; let i=index;"
|
||||
[formGroup]="indicatorPath" class="uk-grid" uk-grid>
|
||||
<div class="uk-width-1-1 uk-flex uk-flex-between uk-flex-bottom">
|
||||
<div dashboard-input class="uk-width-1-1"
|
||||
[title]="indicatorPath.get('url').disabled?'Default chart URLs cannot change':''"
|
||||
[formInput]="indicatorPath.get('url')" placeholder="Write a URL" label="Chart URL" id="chartURL">
|
||||
<div *ngIf="urlParameterizedMessage" warning>{{urlParameterizedMessage}}</div>
|
||||
</div>
|
||||
<div *ngIf='properties.environment == "development"' class='uk-padding-small'>
|
||||
<i class="clickable" uk-icon="copy" (click)="copyToClipboard('chartURL')" uk-tooltip="Copy URL"></i>
|
||||
</div>
|
||||
</div>
|
||||
[formGroupName]="i" class="uk-grid" uk-grid>
|
||||
<div class="uk-width-1-1 uk-flex uk-flex-middle">
|
||||
<div input class="uk-width-expand" [title]="indicatorPath.get('url').disabled?'Default chart URLs cannot change':''"
|
||||
[formInput]="indicatorPath.get('url')" placeholder="Chart URL">
|
||||
<div *ngIf="urlParameterizedMessage" warning>{{urlParameterizedMessage}}</div>
|
||||
</div>
|
||||
<div class='uk-padding-small'>
|
||||
<a class="uk-link-reset" (click)="copyToClipboard('chartURL')"><icon [flex]="true" name="content_copy"></icon></a>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="showCheckForSchemaEnhancements" class=" uk-width-1-1 ">
|
||||
<div class="uk-alert uk-alert-warning">
|
||||
There are schema enchancements that can be applied in this query. <a
|
||||
|
|
@ -437,59 +365,26 @@
|
|||
</div>
|
||||
<div class="uk-width-1-1" formArrayName="parameters">
|
||||
<div class="uk-grid" uk-grid>
|
||||
<div *ngIf="getParameter(i, 'title')" class="uk-width-1-1">
|
||||
<div dashboard-input
|
||||
[formInput]="getParameter(i, 'title').get('value')"
|
||||
placeholder="Write a title"
|
||||
label="Chart Title"></div>
|
||||
</div>
|
||||
<div *ngIf="getParameter(i, 'subtitle')" class="uk-width-1-1">
|
||||
<div dashboard-input placeholder="Write a subtitle"
|
||||
[formInput]="getParameter(i, 'subtitle').get('value')"
|
||||
label="Chart Subtitle"></div>
|
||||
</div>
|
||||
<div *ngIf="!getParameter(i, 'type')" class="uk-width-1-3@s">
|
||||
<div dashboard-input [formInput]="indicatorPath.get('type')"
|
||||
type="select" placeholder="Select a type"
|
||||
[options]="(indicatorPath.get('type').value == 'table' && getParameter(i, 'data_title_0'))?indicatorUtils.getChartTypes(indicatorPath.get('type').value):indicatorUtils.allChartTypes"
|
||||
label="Chart Type"></div>
|
||||
</div>
|
||||
<div *ngIf="getParameter(i, 'type')" class="uk-width-1-3@s">
|
||||
<div dashboard-input [formInput]="getParameter(i, 'type').get('value')"
|
||||
placeholder="Select a type"
|
||||
type="select" [options]="indicatorUtils.getChartTypes(getParameter(i, 'type').get('value').value)"
|
||||
label="Chart Type"></div>
|
||||
</div>
|
||||
<div *ngIf="getParameter(i, 'xAxisTitle')" class="uk-width-1-3@s">
|
||||
<div dashboard-input [formInput]="getParameter(i, 'xAxisTitle').get('value')"
|
||||
placeholder="Write a title for X-Axis"
|
||||
label="X-Axis Title"></div>
|
||||
</div>
|
||||
<div *ngIf="getParameter(i, 'yAxisTitle')" class="uk-width-1-3@s">
|
||||
<div dashboard-input [formInput]="getParameter(i, 'yAxisTitle').get('value')"
|
||||
placeholder="Write a title"
|
||||
label="Y-Axis Title"></div>
|
||||
</div>
|
||||
<div *ngIf="getParameter(i, 'data_title_0')" class="uk-width-1-3@s">
|
||||
<div dashboard-input [formInput]="getParameter(i, 'data_title_0').get('value')"
|
||||
placeholder="Write a title"
|
||||
label="Data title"></div>
|
||||
</div>
|
||||
<div *ngIf="getParameter(i, 'data_title_1')" class="uk-width-1-3@s">
|
||||
<div dashboard-input [formInput]="getParameter(i, 'data_title_1').get('value')"
|
||||
placeholder="Write a title"
|
||||
label="Data title"></div>
|
||||
</div>
|
||||
<div *ngIf="getParameter(i, 'start_year')" class="uk-width-1-3@s">
|
||||
<div dashboard-input [formInput]="getParameter(i, 'start_year').get('value')"
|
||||
placeholder="Write a year"
|
||||
label="Year (From)"></div>
|
||||
</div>
|
||||
<div *ngIf="getParameter(i, 'end_year')" class="uk-width-1-3@s">
|
||||
<div dashboard-input [formInput]="getParameter(i, 'end_year').get('value')"
|
||||
placeholder="Write a year"
|
||||
label="Year (To)"></div>
|
||||
</div>
|
||||
<div *ngIf="getParameter(i, 'title')" input class="uk-width-1-1" [formInput]="getParameter(i, 'title').get('value')"
|
||||
placeholder="Chart Title"></div>
|
||||
<div *ngIf="getParameter(i, 'subtitle')" input class="uk-width-1-1" placeholder="Chart Subtitle" [formInput]="getParameter(i, 'subtitle').get('value')" label="Chart Subtitle"></div>
|
||||
<div *ngIf="!getParameter(i, 'type')" input class="uk-width-1-3@s" [formInput]="indicatorPath.get('type')" placeholder="Chart Type"
|
||||
[options]="(indicatorPath.get('type').value == 'table' && getParameter(i, 'data_title_0'))?indicatorUtils.getChartTypes(indicatorPath.get('type').value):indicatorUtils.allChartTypes"
|
||||
type="select"></div>
|
||||
<div *ngIf="getParameter(i, 'type')" input class="uk-width-1-3@s" [formInput]="getParameter(i, 'type').get('value')" placeholder="Chart Type"
|
||||
[options]="indicatorUtils.getChartTypes(getParameter(i, 'type').get('value').value)" type="select"></div>
|
||||
<div *ngIf="getParameter(i, 'xAxisTitle')" input class="uk-width-1-3@s" [formInput]="getParameter(i, 'xAxisTitle').get('value')"
|
||||
placeholder="X-Axis Title"></div>
|
||||
<div *ngIf="getParameter(i, 'yAxisTitle')" input class="uk-width-1-3@s" [formInput]="getParameter(i, 'yAxisTitle').get('value')"
|
||||
placeholder="Y-Axis Title"></div>
|
||||
<div *ngIf="getParameter(i, 'data_title_0')" input class="uk-width-1-3@s" [formInput]="getParameter(i, 'data_title_0').get('value')"
|
||||
placeholder="Data Title"></div>
|
||||
<div *ngIf="getParameter(i, 'data_title_1')" input class="uk-width-1-3@s" [formInput]="getParameter(i, 'data_title_1').get('value')"
|
||||
placeholder="Data Title"></div>
|
||||
<div *ngIf="getParameter(i, 'start_year')" input class="uk-width-1-3@s" [formInput]="getParameter(i, 'start_year').get('value')"
|
||||
placeholder="Year (From)"></div>
|
||||
<div *ngIf="getParameter(i, 'end_year')" input class="uk-width-1-3@s" [formInput]="getParameter(i, 'end_year').get('value')"
|
||||
placeholder="Year (To)"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="indicator && indicator.indicatorPaths[i] && indicator.indicatorPaths[i].safeResourceUrl"
|
||||
|
|
@ -497,13 +392,12 @@
|
|||
<div *ngIf="(hasDifference(i)) && !indicatorPath.invalid"
|
||||
class="uk-width-1-1 uk-height-large refresh-indicator">
|
||||
<div class="uk-position-relative uk-height-1-1">
|
||||
<div class="uk-position-center uk-text-center clickable"
|
||||
(click)="refreshIndicator()">
|
||||
<a class="uk-position-center uk-text-center uk-link-reset" (click)="refreshIndicator()">
|
||||
<div>
|
||||
<icon name="refresh"></icon>
|
||||
</div>
|
||||
<span>Click to refresh the graph view</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<iframe *ngIf="indicator.indicatorPaths[i].source !== 'image'"
|
||||
|
|
@ -512,7 +406,7 @@
|
|||
<!-- <div *ngIf="properties.disableFrameLoad && indicator.indicatorPaths[i].source !== 'image'" class="uk-alert uk-alert-danger uk-text-center">I frames-->
|
||||
<!-- preview is disabled</div>-->
|
||||
<div *ngIf="indicator.indicatorPaths[i].source === 'image'">
|
||||
<img class="uk-width-1-1 uk-height-large" [src]="indicator.indicatorPaths[i].url">
|
||||
<img class="uk-width-1-1 uk-height-large uk-blend-multiply" [src]="indicator.indicatorPaths[i].url">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -563,41 +457,13 @@
|
|||
You are about to delete this section and its indicators permanently.
|
||||
Are you sure you want to proceed?
|
||||
</modal-alert>-->
|
||||
<ng-template #visibilityOptions let-indicator="indicator" let-sectionId="sectionId">
|
||||
<span
|
||||
[attr.uk-tooltip]="exportLoading ? 'title:Edit is disabled, while exporting indicators; cls:uk-active' : 'cls: uk-invisible'"
|
||||
class="uk-position-top-left uk-margin-small-left uk-margin-small-top visibility"
|
||||
[class]="exportLoading ? '' : ' clickable '">
|
||||
<span [class]="exportLoading ? 'uk-disabled ' : ' '" class="clickable color">
|
||||
<icon [name]="stakeholderUtils.visibilityIcon.get(indicator.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="indicator.visibility != v.value"
|
||||
(click)="$event.stopPropagation();changeIndicatorStatus(sectionId, indicator,v.value);hide(element);$event.preventDefault()">
|
||||
<icon [name]="stakeholderUtils.visibilityIcon.get(v.value)" ratio="0.8"></icon>
|
||||
<span> {{v.label}}</span>
|
||||
</a>
|
||||
<a *ngIf="indicator.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>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</span>
|
||||
</ng-template>
|
||||
<ng-template #new_section let-type="type">
|
||||
<div class="new-section uk-margin-large-top">
|
||||
<div class="tools uk-flex uk-flex-middle clickable" (click)="createSection(-1, type)">
|
||||
<button class="uk-margin-small-right uk-icon-button uk-button-secondary">
|
||||
<icon name="add" [ratio]="1.5"></icon>
|
||||
<div class="section">
|
||||
<div class="uk-flex uk-flex-center" (click)="createSection(-1, type)">
|
||||
<button class="uk-button uk-button-primary uk-flex uk-flex-middle uk-text-uppercase">
|
||||
<icon name="add" [ratio]="1.5" [flex]="true"></icon>
|
||||
<span class="uk-margin-small-left">New section</span>
|
||||
</button>
|
||||
<span>Create a new section</span>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ import {
|
|||
Visibility
|
||||
} from "../openaireLibrary/monitor/entities/stakeholder";
|
||||
import {IndicatorUtils, StakeholderUtils} from "../utils/indicator-utils";
|
||||
import {FormArray, FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms";
|
||||
import {AbstractControl, FormArray, FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms";
|
||||
import {AlertModal} from "../openaireLibrary/utils/modal/alert";
|
||||
import {StatisticsService} from "../utils/services/statistics.service";
|
||||
import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class";
|
||||
|
|
@ -1033,37 +1033,39 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
|
|||
}));
|
||||
}
|
||||
|
||||
saveSection(section: Section, index: number, type: IndicatorType = "chart") {
|
||||
this.editing = true;
|
||||
let path = [
|
||||
this.stakeholder._id,
|
||||
this.stakeholder.topics[this.topicIndex]._id,
|
||||
this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex]._id,
|
||||
this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]._id
|
||||
];
|
||||
this.subscriptions.push(this.stakeholderService.saveSection(this.properties.monitorServiceAPIURL, section, path, index).subscribe(section => {
|
||||
if (type === 'chart') {
|
||||
this.charts[index] = section;
|
||||
this.setCharts();
|
||||
} else {
|
||||
this.numbers[index] = section;
|
||||
this.setNumbers();
|
||||
}
|
||||
this.initReorder();
|
||||
UIkit.notification('Section has been <b>successfully saved</b>', {
|
||||
status: 'success',
|
||||
timeout: 6000,
|
||||
pos: 'bottom-right'
|
||||
});
|
||||
this.editing = false;
|
||||
}, error => {
|
||||
UIkit.notification(error.error.message, {
|
||||
status: 'danger',
|
||||
timeout: 6000,
|
||||
pos: 'bottom-right'
|
||||
});
|
||||
this.editing = false;
|
||||
}));
|
||||
saveSection(focused: boolean, sectionControl: AbstractControl, index: number, type: IndicatorType = "chart") {
|
||||
if(!focused && sectionControl.dirty) {
|
||||
this.editing = true;
|
||||
let path = [
|
||||
this.stakeholder._id,
|
||||
this.stakeholder.topics[this.topicIndex]._id,
|
||||
this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex]._id,
|
||||
this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]._id
|
||||
];
|
||||
this.subscriptions.push(this.stakeholderService.saveSection(this.properties.monitorServiceAPIURL, sectionControl.value, path, index).subscribe(section => {
|
||||
if (type === 'chart') {
|
||||
this.charts[index] = section;
|
||||
this.setCharts();
|
||||
} else {
|
||||
this.numbers[index] = section;
|
||||
this.setNumbers();
|
||||
}
|
||||
this.initReorder();
|
||||
UIkit.notification('Section has been <b>successfully saved</b>', {
|
||||
status: 'success',
|
||||
timeout: 6000,
|
||||
pos: 'bottom-right'
|
||||
});
|
||||
this.editing = false;
|
||||
}, error => {
|
||||
UIkit.notification(error.error.message, {
|
||||
status: 'danger',
|
||||
timeout: 6000,
|
||||
pos: 'bottom-right'
|
||||
});
|
||||
this.editing = false;
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
createSection(index = -1, type: IndicatorType = 'chart') {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<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>
|
||||
<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>
|
||||
|
|
@ -81,8 +81,8 @@
|
|||
</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 class="uk-icon-button uk-button-primary" uk-tooltip="Preview">
|
||||
<icon name="visibility" [flex]="true"></icon>
|
||||
</a>
|
||||
<div #element uk-dropdown="mode: click; pos: top-left; offset: 5; delay-hide: 0; flip: false"
|
||||
class="uk-padding-remove-horizontal">
|
||||
|
|
|
|||
|
|
@ -13,19 +13,7 @@ import {AlertModalModule} from "../openaireLibrary/utils/modal/alertModal.module
|
|||
import {InputModule} from "../openaireLibrary/sharedComponents/input/input.module";
|
||||
import {ClickModule} from "../openaireLibrary/utils/click/click.module";
|
||||
import {IconsService} from "../openaireLibrary/utils/icons/icons.service";
|
||||
import {
|
||||
add,
|
||||
arrow_right,
|
||||
bullet,
|
||||
close,
|
||||
cloud_upload,
|
||||
done,
|
||||
earth,
|
||||
incognito,
|
||||
preview,
|
||||
refresh,
|
||||
restricted
|
||||
} from "../openaireLibrary/utils/icons/icons";
|
||||
import {earth, incognito, restricted} from "../openaireLibrary/utils/icons/icons";
|
||||
import {IconsModule} from "../openaireLibrary/utils/icons/icons.module";
|
||||
import {PageContentModule} from "../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module";
|
||||
import {LoadingModule} from "../openaireLibrary/utils/loading/loading.module";
|
||||
|
|
@ -49,6 +37,6 @@ import {NotifyFormModule} from "../openaireLibrary/notifications/notify-form/not
|
|||
})
|
||||
export class TopicModule {
|
||||
constructor(private iconsService: IconsService) {
|
||||
this.iconsService.registerIcons([preview, bullet, add, earth, incognito, restricted, refresh, close, arrow_right, done, cloud_upload]);
|
||||
this.iconsService.registerIcons([earth, incognito, restricted]);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 8.4 KiB |
|
|
@ -1 +1 @@
|
|||
Subproject commit 77d3480a05f35055d0447844c184b680b3a1a502
|
||||
Subproject commit c0f2132f4efa10383da21e86a46eab1786694a0f
|
||||
|
|
@ -1 +1 @@
|
|||
Subproject commit 793534d00535931702ad6bb8e7c085babbcbfc0e
|
||||
Subproject commit 1831614eefba657a94a9548846cff28f5987c670
|
||||
|
|
@ -259,13 +259,6 @@
|
|||
/* left: 3px;*/
|
||||
/*}*/
|
||||
|
||||
/*.refresh-indicator {*/
|
||||
/* background-color: rgba(0, 0, 0, 0.50);*/
|
||||
/* border-radius: 4px;*/
|
||||
/* position: absolute;*/
|
||||
/* color: white;*/
|
||||
/*}*/
|
||||
|
||||
/*.uk-modal-container .uk-modal-dialog {*/
|
||||
/* width: 900px;*/
|
||||
/*}*/
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
Subproject commit 8864b690f529aa3361406b776152942cf6153b24
|
||||
Subproject commit 292419ac8255d25af31ab835d22712a36c34f92e
|
||||
Loading…
Reference in New Issue