[develop]: Align changes in indicator card with monitor. Update version and changelog

This commit is contained in:
Konstantinos Triantafyllou 2024-07-25 10:54:25 +03:00
parent 9e4c684540
commit 561cdfbc23
4 changed files with 134 additions and 101 deletions

View File

@ -14,6 +14,17 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
- *Fixed (for any bug fixes)*
- *Security (in case of vulnerabilities)*
## v1.0.1 - 25.07.2024
### Fixed
Problem with ORCID KPIs regarding a researcher.
Reordered action buttons in a search page.
Fix import/export indicators tab title wasn't imported.
Fix the redirection URL after verification of a manager.
### Changed
Extract a stakeholder in every field of a json in a chart.
Improvements regarding import/export indicators and editing an indicator.
## v1.0.0 - 26.06.2024 - Official Release
### Added
Add banner for announcements. Disabled by default.

View File

@ -1,6 +1,6 @@
{
"name": "irish-monitor",
"version": "1.0.0",
"version": "1.0.1",
"scripts": {
"ng": "ng",
"start": "ng serve --port 5500 --disable-host-check --host 0.0.0.0",

@ -1 +1 @@
Subproject commit 7bb45fefa04f7dea80d7679b507030fb22ac7cba
Subproject commit 310f06b2348977c64825231fff79180f70fb404d

View File

@ -4,7 +4,8 @@
<div class="uk-width-expand">
<ng-container *ngTemplateOutlet="selected_filters_pills"></ng-container>
</div>
<a *ngIf="countSelectedFilters() > 1" class="uk-text-small uk-margin-small-left" (click)="clearAll()"> Clear All </a>
<a *ngIf="countSelectedFilters() > 1" class="uk-text-small uk-margin-small-left" (click)="clearAll()"> Clear
All </a>
</div>
<div *ngIf="activeCategory && countSubCategoriesToShow(activeCategory) > 0" [class.uk-margin-bottom]="isMobile">
<slider-tabs *ngIf="stakeholder && !loading && activeTopic" [border]="!isMobile" [type]="'dynamic'">
@ -21,23 +22,24 @@
<div inner>
<loading *ngIf="loading" class="uk-margin-top"></loading>
<div *ngIf="!activeSubCategory && !loading" class="message">
No {{entities.stakeholder}} yet.
No {{ entities.stakeholder }} yet.
</div>
<div *ngIf="activeSubCategory" class="uk-section-small">
<div *ngIf="activeSubCategory.description" [innerHTML]="activeSubCategory.description" class="uk-margin-medium-bottom">
<div *ngIf="activeSubCategory.description" [innerHTML]="activeSubCategory.description"
class="uk-margin-medium-bottom">
</div>
<div [class.uk-margin-large-bottom]="activeSubCategory.numbers.length > 0 && !tabs">
<ng-container *ngFor="let number of activeSubCategory.numbers; let i = index;">
<div *ngIf="!isMobile" class="uk-grid uk-grid-small uk-grid-match uk-margin-medium-bottom" uk-grid
uk-height-match="target: .uk-card">
<h5 *ngIf="number.title" class="uk-width-1-1 uk-margin-bottom">{{number.title}}</h5>
<h5 *ngIf="number.title" class="uk-width-1-1 uk-margin-bottom">{{ number.title }}</h5>
<ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
<div *ngIf="hasPermission(indicator.visibility)"
[ngClass]="getNumberClassBySize(indicator.width)">
<div class="uk-card uk-card-default uk-padding-small number-card uk-position-relative"
[class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()">
<div *ngIf="!indicator.overlay">
<div class="uk-text-small uk-text-truncate uk-margin-xsmall-bottom uk-margin-right">{{indicator.name}}</div>
<div class="uk-text-small uk-text-truncate uk-margin-xsmall-bottom uk-margin-right">{{ indicator.name }}</div>
<div class="number uk-text-small uk-text-bold">
<span *ngIf="numberResults.get(i + '-' + j + '-0')"
[innerHTML]="(indicator.indicatorPaths[0].format == 'NUMBER'?(numberResults.get(i + '-' + j + '-0') | numberRound: 2:1:stakeholder.locale):(numberResults.get(i + '-' + j + '-0') | numberPercentage: stakeholder.locale))"></span>
@ -45,7 +47,8 @@
</div>
<div *ngIf="indicator.description || indicator.additionalDescription"
class="uk-position-top-right uk-text-center uk-margin-small-top uk-margin-small-right uk-visible@m">
<a class="uk-display-inline-block uk-button uk-button-link" uk-tooltip="Note"
<a class="uk-display-inline-block uk-button uk-button-link"
uk-tooltip="Note"
(click)="changeOverlay($event, indicator, 'description')">
<span class="uk-flex uk-flex-middle">
<icon name="analytics" type="outlined" [flex]="true"></icon>
@ -66,10 +69,10 @@
</div>
<div class="uk-margin-small-top uk-margin-right">
<p *ngIf="indicator.description">
{{indicator.description}}
{{ indicator.description }}
</p>
<p *ngIf="indicator.additionalDescription">
{{indicator.additionalDescription}}
{{ indicator.additionalDescription }}
</p>
</div>
</div>
@ -78,7 +81,7 @@
</ng-template>
</div>
<div *ngIf="isMobile">
<h6 *ngIf="number.title" class="uk-width-1-1 uk-margin-bottom">{{number.title}}</h6>
<h6 *ngIf="number.title" class="uk-width-1-1 uk-margin-bottom">{{ number.title }}</h6>
<div class="uk-card uk-card-default uk-padding-small number-card">
<div class="uk-grid uk-grid-small uk-child-width-1-1" uk-grid>
<ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
@ -87,7 +90,8 @@
<div [class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()">
<div *ngIf="!indicator.overlay">
<div
class="uk-text-xsmall uk-text-truncate uk-margin-xsmall-bottom uk-margin-right">{{indicator.name}}</div>
class="uk-text-xsmall uk-text-truncate uk-margin-xsmall-bottom uk-margin-right">{{ indicator.name }}
</div>
<div class="number uk-text-small uk-text-bold">
<span *ngIf="numberResults.get(i + '-' + j + '-0')"
[innerHTML]="(indicator.indicatorPaths[0].format == 'NUMBER'?(numberResults.get(i + '-' + j + '-0') | numberRound: 2:1:stakeholder.locale):(numberResults.get(i + '-' + j + '-0') | numberPercentage: stakeholder.locale))"></span>
@ -104,101 +108,118 @@
</div>
<div [class.section-container]="tabs">
<ul *ngIf="tabs" class="tabs">
<li *ngFor="let tab of activeSubCategory.charts; let i = index;" [class.uk-active]="i === activeChartSectionIndex"
<li *ngFor="let tab of activeSubCategory.charts; let i = index;"
[class.uk-active]="i === activeChartSectionIndex"
(click)="changeSection(i)" class="uk-text-truncate" [attr.uk-tooltip]="getSectionTitle(tab)">
{{getSectionTitle(tab)}}
{{ getSectionTitle(tab) }}
</li>
</ul>
<div *ngIf="chart" class="uk-grid uk-grid-small uk-grid-match uk-margin-medium-bottom uk-flex uk-flex-middle" uk-grid uk-height-match="target: .uk-card">
<h5 *ngIf="chart.title && !isMobile && !tabs" class="uk-width-1-1 uk-margin-bottom">{{getSectionTitle(chart)}}</h5>
<div *ngIf="getSectionDescription(chart)" class="uk-width-1-1 uk-margin-bottom">{{getSectionDescription(chart)}}</div>
<h6 *ngIf="chart.title && isMobile && !tabs" class="uk-width-1-1">{{getSectionTitle(chart)}}</h6>
<ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index">
<div *ngIf="chart"
class="uk-grid uk-grid-small uk-grid-match uk-margin-medium-bottom uk-flex uk-flex-middle" uk-grid
uk-height-match="target: .uk-card">
<h5 *ngIf="chart.title && !isMobile && !tabs"
class="uk-width-1-1 uk-margin-bottom">{{ getSectionTitle(chart) }}</h5>
<div *ngIf="getSectionDescription(chart)"
class="uk-width-1-1 uk-margin-bottom">{{ getSectionDescription(chart) }}
</div>
<h6 *ngIf="chart.title && isMobile && !tabs" class="uk-width-1-1">{{ getSectionTitle(chart) }}</h6>
<ng-container *ngFor="let indicator of chart.indicators; let j=index">
<div *ngIf="hasPermission(indicator.visibility)"
[ngClass]="getChartClassBySize(indicator.width)">
<div class="uk-card uk-card-default uk-position-relative"
[class.semiFiltered]="getActiveIndicatorPath(indicator).filtersApplied < countSelectedFilters()">
<div class="uk-card-body uk-margin-small-bottom">
<h6 class="uk-margin-bottom chartTitle uk-flex uk-flex-bottom">
{{indicator.name + " "}}
</h6>
<iframe [class.uk-blend-multiply]="!isFullscreen"
*ngIf=" !properties.disableFrameLoad && getActiveIndicatorPath(indicator).source !== 'image'"
[src]="getActiveIndicatorPath(indicator).safeResourceUrl"
class="uk-width-1-1" allowfullscreen="true" mozallowfullscreen="true"
[ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"></iframe>
<div *ngIf="properties.disableFrameLoad && getActiveIndicatorPath(indicator).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">
<!-- Main content-->
<div>
<h6 class="uk-margin-bottom chartTitle uk-flex uk-flex-bottom">
{{ indicator.name + " " }}
</h6>
<iframe [class.uk-blend-multiply]="!isFullscreen"
*ngIf=" !properties.disableFrameLoad && getActiveIndicatorPath(indicator).source !== 'image'"
[src]="getActiveIndicatorPath(indicator).safeResourceUrl"
class="uk-width-1-1" allowfullscreen="true"
mozallowfullscreen="true"
[ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"></iframe>
<div *ngIf="properties.disableFrameLoad && getActiveIndicatorPath(indicator)?.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="getActiveIndicatorPath(indicator).source === 'image'"
[src]="getActiveIndicatorPath(indicator).url"
class="uk-width-1-1 uk-blend-multiply"
[ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')">
</div>
<img *ngIf="getActiveIndicatorPath(indicator).source === 'image'"
[src]="getActiveIndicatorPath(indicator).safeResourceUrl"
class="uk-width-1-1 uk-blend-multiply"
[ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')">
<slider-tabs *ngIf="indicator.indicatorPaths.length > 1" [type]="'dynamic'" [flexPosition]="'right'" (activeEmitter)="indicator.activePath = $event"
tabsClass="uk-subnav uk-subnav-pill uk-subnav-small" containerClass="uk-margin-top uk-margin-bottom" [border]="false">
<slider-tab *ngFor="let indicatorPath of indicator.indicatorPaths; let i=index"
[tabTitle]="indicatorPath.parameters.tab ? indicatorPath.parameters.tab : indicatorPath.parameters.title"
[tabId]="i.toString()" [active]="(!indicator.activePath && i == 0) || indicator.activePath == i">
<!-- Tabs -->
<slider-tabs [type]="'dynamic'" [flexPosition]="'right'"
(activeEmitter)="indicator.activePath = $event"
tabsClass="uk-subnav uk-subnav-pill uk-subnav-small"
containerClass="uk-margin-top uk-margin-bottom" [border]="false">
<slider-tab
*ngFor="let indicatorPath of indicator.indicatorPaths; let i=index"
[tabTitle]="indicatorPath.parameters.tab ? indicatorPath.parameters.tab : indicatorPath.parameters.title"
[invisible]="indicator.indicatorPaths.length < 2"
[tabId]="i" [active]="getActivePathIndex(indicator) == i">
</slider-tab>
</slider-tabs>
</div>
<div class="uk-position-bottom-left uk-margin-left uk-margin-small-bottom uk-visible@m">
<a *ngIf="indicator.description || indicator.additionalDescription"
class="uk-display-inline-block uk-button uk-button-link uk-margin-right"
(click)="changeOverlay($event, indicator, 'description')">
<span class="uk-flex uk-flex-middle">
<icon name="analytics" type="outlined" [flex]="true"></icon>
<span class="uk-margin-xsmall-left">Note</span>
</span>
</a>
<a class="uk-display-inline-block uk-button uk-button-link"
(click)="changeOverlay($event, indicator, 'embed')">
<span class="uk-flex uk-flex-middle">
<icon name="code" type="outlined" [flex]="true"></icon>
<span class="uk-margin-xsmall-left">Embed</span>
</span>
</a>
</div>
<div *ngIf="indicator.overlay"
class="indicator-overlay uk-card uk-card-default uk-flex uk-flex-middle uk-flex-center">
<div *ngIf="indicator.overlay == 'description'" class="inner" click-outside-or-esc
(clickOutside)="closeOverlay($event, indicator)">
<div class="uk-padding-small">
<div class="uk-flex uk-flex-right">
<button class="uk-close uk-icon"
(click)="changeOverlay($event, indicator, false)">
<icon name="close" ratio="1"></icon>
</button>
</div>
<div class="uk-padding-small uk-padding-remove-horizontal">
<p *ngIf="indicator.description">
{{indicator.description}}
</p>
<p *ngIf="indicator.additionalDescription">
{{indicator.additionalDescription}}
</p>
<div class="uk-position-bottom-left uk-margin-left uk-margin-small-bottom uk-visible@m">
<a *ngIf="indicator.description || indicator.additionalDescription"
class="uk-display-inline-block uk-button uk-button-link uk-margin-right"
(click)="changeOverlay($event, indicator, 'description')">
<span class="uk-flex uk-flex-middle">
<icon name="analytics" type="outlined" [flex]="true"></icon>
<span class="uk-margin-xsmall-left">Note</span>
</span>
</a>
<a class="uk-display-inline-block uk-button uk-button-link"
(click)="changeOverlay($event, indicator, 'embed')">
<span class="uk-flex uk-flex-middle">
<icon name="code" type="outlined" [flex]="true"></icon>
<span class="uk-margin-xsmall-left">Embed</span>
</span>
</a>
</div>
<div *ngIf="indicator.overlay"
class="indicator-overlay uk-card uk-card-default uk-flex uk-flex-middle uk-flex-center">
<div *ngIf="indicator.overlay == 'description'" class="inner"
click-outside-or-esc
(clickOutside)="closeOverlay($event, indicator)">
<div class="uk-padding-small">
<div class="uk-flex uk-flex-right">
<button class="uk-close uk-icon"
(click)="changeOverlay($event, indicator, false)">
<icon name="close" ratio="1"></icon>
</button>
</div>
<div class="uk-padding-small uk-padding-remove-horizontal">
<p *ngIf="indicator.description">
{{ indicator.description }}
</p>
<p *ngIf="indicator.additionalDescription">
{{ indicator.additionalDescription }}
</p>
</div>
</div>
</div>
</div>
<div *ngIf="indicator.overlay === 'embed'" class="inner" click-outside-or-esc
(clickOutside)="closeOverlay($event, indicator)">
<div class="uk-padding-small">
<div class="uk-flex uk-flex-right">
<button class="uk-close uk-icon"
(click)="changeOverlay($event, indicator, false)">
<icon name="close" ratio="1"></icon>
</button>
</div>
<div class="clipboard-wrapper uk-margin-top uk-margin-bottom">
<pre id="embed_content_id" class="uk-padding-small"><code>&lt;iframe width="500" height="500" <br> src="{{getActiveIndicatorPath(indicator).safeResourceUrl.changingThisBreaksApplicationSecurity}}"<br> allowfullscreen="true" mozallowfullscreen="true"&gt;<br>&lt;/iframe&gt;</code></pre>
</div>
<div class="uk-flex uk-flex-right">
<a class="uk-link-reset copy clipboard_btn"
data-clipboard-target="#embed_content_id" title="Copy code">
<icon [flex]="true" name="content_copy"></icon>
</a>
<div *ngIf="indicator.overlay === 'embed'" class="inner" click-outside-or-esc
(clickOutside)="closeOverlay($event, indicator)">
<div class="uk-padding-small">
<div class="uk-flex uk-flex-right">
<button class="uk-close uk-icon"
(click)="changeOverlay($event, indicator, false)">
<icon name="close" ratio="1"></icon>
</button>
</div>
<div class="clipboard-wrapper uk-margin-top uk-margin-bottom">
<pre id="embed_content_id" class="uk-padding-small"><code>&lt;iframe width="500" height="500" <br> src="{{ getActiveIndicatorPath(indicator).safeResourceUrl.changingThisBreaksApplicationSecurity }}
"<br> allowfullscreen="true" mozallowfullscreen="true"&gt;<br>&lt;/iframe&gt;</code></pre>
</div>
<div class="uk-flex uk-flex-right">
<a class="uk-link-reset copy clipboard_btn"
data-clipboard-target="#embed_content_id" title="Copy code">
<icon [flex]="true" name="content_copy"></icon>
</a>
</div>
</div>
</div>
</div>
@ -206,7 +227,7 @@
</div>
</div>
<div class="printGap uk-hidden"></div>
</ng-template>
</ng-container>
</div>
</div>
</div>
@ -217,7 +238,7 @@
<icon name="filters" ratio="1.5" visuallyHidden="Filters" gradient="filters_icon"></icon>
<span [class.uk-hidden]="countSelectedFilters() === 0"
class="uk-offcanvas-count uk-flex uk-flex-middle uk-flex-center">
{{countSelectedFilters()}}
{{ countSelectedFilters() }}
</span>
</a>
<div *ngIf="stakeholder" id="style_switcher" class="uk-offcanvas"
@ -269,7 +290,7 @@
<li *ngIf="periodFilter.selectedFromAndToValues.length > 0">
<span class="uk-label uk-label-small uk-label-secondary uk-flex uk-flex-middle">
<span
class="uk-margin-small-right uk-width-expand uk-text-truncate">{{periodFilter.selectedFromAndToValues}}</span>
class="uk-margin-small-right uk-width-expand uk-text-truncate">{{ periodFilter.selectedFromAndToValues }}</span>
<button [class.uk-disabled]="loading" (click)="clearPeriodFilter()" class="uk-close uk-icon"
[disabled]="loading">
<icon name="close" flex="true" ratio="0.7"></icon>
@ -286,14 +307,15 @@
<ng-container
*ngIf="filter.type && (filter.type == 'boolean' || filter.type == 'triplet') else noboolean">
{{filter.title}}:
{{(value.name == 'true' || value.name == 'Yes') ? 'Yes' : 'No'}}
{{ filter.title }}:
{{ (value.name == 'true' || value.name == 'Yes') ? 'Yes' : 'No' }}
</ng-container>
<ng-template #noboolean>
{{value.name}}
{{ value.name }}
</ng-template>
</span>
<button [class.uk-disabled]="loading" (click)="clearFilterValue(filter, value)"
<button [class.uk-disabled]="loading"
(click)="clearFilterValue(filter, value)"
class="uk-close uk-icon" [disabled]="loading">
<icon name="close" flex="true" ratio="0.7"></icon>
</button>