MaDgIK
/
monitor-dashboard
13
0
Fork 0
Code Issues Pull Requests Projects Releases 17 Wiki Activity

Fix bug with desciption overlay in monitor dashboard

This commit is contained in:
Konstantinos Triantafyllou 2023-04-06 11:32:20 +03:00
parent fbf9d91d03
commit 0b793bba40
3 changed files with 22 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/app/monitor/monitor.component.html
View File

@ -103,7 +103,7 @@
<div *ngIf="hasPermission(indicator.visibility)" [ngClass]="getNumberClassBySize(indicator.width)"> <div *ngIf="hasPermission(indicator.visibility)" [ngClass]="getNumberClassBySize(indicator.width)">
<div class="uk-card uk-card-default uk-padding-small number-card uk-position-relative" <div class="uk-card uk-card-default uk-padding-small number-card uk-position-relative"
[class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()"> [class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()">
<div *ngIf="!showDescriptionOverlay[j]"> <div *ngIf="!indicator.descriptionOverlay">
<div <div
class="uk-text-small uk-text-truncate uk-margin-xsmall-bottom uk-margin-right">{{indicator.name}}</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"> <div class="number uk-text-small uk-text-bold">
@ -114,7 +114,7 @@
<div *ngIf="indicator.description || indicator.additionalDescription" <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"> 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)="toggleDescriptionOverlay($event, j)"> (click)="toggleDescriptionOverlay($event, indicator)">
<span class="uk-flex uk-flex-middle"> <span class="uk-flex uk-flex-middle">
<icon name="analytics" type="outlined" [flex]="true"></icon> <icon name="analytics" type="outlined" [flex]="true"></icon>
</span> </span>
@ -122,12 +122,12 @@
</div> </div>
</div> </div>
<div <div
*ngIf="showDescriptionOverlay[j] && (indicator.description || indicator.additionalDescription)" *ngIf="indicator.descriptionOverlay && (indicator.description || indicator.additionalDescription)"
click-outside-or-esc class="uk-overflow-auto" click-outside-or-esc class="uk-overflow-auto"
(clickOutside)="closeDescriptionOverlay($event, j)"> (clickOutside)="closeDescriptionOverlay($event, indicator)">
<div class="uk-position-top-right uk-text-center uk-margin-small-top uk-margin-small-right"> <div class="uk-position-top-right uk-text-center uk-margin-small-top uk-margin-small-right">
<a class="uk-display-inline-block uk-button uk-button-link" <a class="uk-display-inline-block uk-button uk-button-link"
(click)="toggleDescriptionOverlay($event, j)"> (click)="toggleDescriptionOverlay($event, indicator)">
<span class="uk-flex uk-flex-middle"> <span class="uk-flex uk-flex-middle">
<icon name="close" type="outlined" [flex]="true"></icon> <icon name="close" type="outlined" [flex]="true"></icon>
</span> </span>
@ -154,7 +154,7 @@
<ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index"> <ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
<div *ngIf="hasPermission(indicator.visibility)" [ngClass]="getNumberClassBySize(indicator.width)"> <div *ngIf="hasPermission(indicator.visibility)" [ngClass]="getNumberClassBySize(indicator.width)">
<div [class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()"> <div [class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()">
<div *ngIf="!showDescriptionOverlay[j]"> <div *ngIf="!indicator.descriptionOverlay">
<div <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"> <div class="number uk-text-small uk-text-bold">
@ -215,20 +215,20 @@
<div *ngIf="indicator.description || indicator.additionalDescription" <div *ngIf="indicator.description || indicator.additionalDescription"
class="uk-position-bottom-left uk-margin-left uk-margin-small-bottom uk-visible@m"> class="uk-position-bottom-left uk-margin-left uk-margin-small-bottom uk-visible@m">
<a class="uk-display-inline-block uk-button uk-button-text" <a class="uk-display-inline-block uk-button uk-button-text"
(click)="toggleDescriptionOverlay($event, j)"> (click)="toggleDescriptionOverlay($event, indicator)">
<span class="uk-flex uk-flex-middle"> <span class="uk-flex uk-flex-middle">
<icon name="analytics" type="outlined" [flex]="true"></icon> <icon name="analytics" type="outlined" [flex]="true"></icon>
<span class="uk-margin-small-left">Note</span> <span class="uk-margin-small-left">Note</span>
</span> </span>
</a> </a>
</div> </div>
<div *ngIf="showDescriptionOverlay[j] && (indicator.description || indicator.additionalDescription)" <div *ngIf="indicator.descriptionOverlay && (indicator.description || indicator.additionalDescription)"
class="indicator-description uk-card uk-card-default uk-flex uk-flex-middle uk-flex-center"> class="indicator-description uk-card uk-card-default uk-flex uk-flex-middle uk-flex-center">
<div class="inner" click-outside-or-esc <div class="inner" click-outside-or-esc
(clickOutside)="closeDescriptionOverlay($event, j)"> (clickOutside)="closeDescriptionOverlay($event, indicator)">
<div class="uk-padding-small"> <div class="uk-padding-small">
<div class="uk-flex uk-flex-right"> <div class="uk-flex uk-flex-right">
<button class="uk-close uk-icon" (click)="toggleDescriptionOverlay($event, j)"> <button class="uk-close uk-icon" (click)="toggleDescriptionOverlay($event, indicator)">
<icon name="close" ratio="1"></icon> <icon name="close" ratio="1"></icon>
</button> </button>
</div> </div>

21
src/app/monitor/monitor.component.ts
View File

@ -11,15 +11,18 @@ import {HelperService} from "../openaireLibrary/utils/helper/helper.service";
import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service"; import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service";
import {StakeholderService} from "../openaireLibrary/monitor/services/stakeholder.service"; import {StakeholderService} from "../openaireLibrary/monitor/services/stakeholder.service";
import { import {
Category, Indicator, Category,
IndicatorPath, IndicatorSize, Section, Indicator,
IndicatorPath,
IndicatorSize,
Section,
Stakeholder, Stakeholder,
SubCategory, SubCategory,
Topic, Topic,
Visibility Visibility
} from "../openaireLibrary/monitor/entities/stakeholder"; } from "../openaireLibrary/monitor/entities/stakeholder";
import {StatisticsService} from "../utils/services/statistics.service"; import {StatisticsService} from "../utils/services/statistics.service";
import {IndicatorUtils, StakeholderUtils} from "../utils/indicator-utils"; import {IndicatorUtils} from "../utils/indicator-utils";
import {LayoutService} from "../openaireLibrary/dashboard/sharedComponents/sidebar/layout.service"; import {LayoutService} from "../openaireLibrary/dashboard/sharedComponents/sidebar/layout.service";
import {UntypedFormBuilder, UntypedFormControl} from "@angular/forms"; import {UntypedFormBuilder, UntypedFormControl} from "@angular/forms";
import {Subscriber, Subscription} from "rxjs"; import {Subscriber, Subscription} from "rxjs";
@ -51,7 +54,6 @@ export class MonitorComponent implements OnInit, OnDestroy {
public loading: boolean = true; public loading: boolean = true;
public view: Visibility; public view: Visibility;
public indicatorUtils: IndicatorUtils = new IndicatorUtils(); public indicatorUtils: IndicatorUtils = new IndicatorUtils();
public stakeholderUtils: StakeholderUtils = new StakeholderUtils();
public activeTopic: Topic = null; public activeTopic: Topic = null;
public activeCategory: Category = null; public activeCategory: Category = null;
public activeSubCategory: SubCategory = null; public activeSubCategory: SubCategory = null;
@ -78,7 +80,6 @@ export class MonitorComponent implements OnInit, OnDestroy {
privateStakeholder = false; privateStakeholder = false;
public keyword: UntypedFormControl; public keyword: UntypedFormControl;
public statsUpdateDate: Date; public statsUpdateDate: Date;
public showDescriptionOverlay: boolean[] = [];
public isFullscreen: boolean = false; public isFullscreen: boolean = false;
public isMobile: boolean = false; public isMobile: boolean = false;
@ -611,14 +612,14 @@ export class MonitorComponent implements OnInit, OnDestroy {
this.userManagementService.login(); this.userManagementService.login();
} }
toggleDescriptionOverlay(event, j) { toggleDescriptionOverlay(event, indicator: Indicator) {
event.stopPropagation(); event.stopPropagation();
this.showDescriptionOverlay[j] = !this.showDescriptionOverlay[j]; indicator.descriptionOverlay = !indicator.descriptionOverlay;
} }
closeDescriptionOverlay(event: ClickEvent,j) { closeDescriptionOverlay(event: ClickEvent, indicator: Indicator) {
if(event.clicked && this.showDescriptionOverlay[j]) { if(event.clicked && indicator.descriptionOverlay) {
this.showDescriptionOverlay[j] = false; indicator.descriptionOverlay = false;
} }
} }
} }

2
src/app/openaireLibrary

@ -1 +1 @@
Subproject commit 6dafcb391a63771cf620d5bff79759ec94bae778 Subproject commit f49149c99e7bf08179d95b56a1aac9848a850344