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

Remove padding from edit-stakeholder. Fix margins in monitor page. Update libraries

This commit is contained in:
Konstantinos Triantafyllou 2022-03-28 01:36:58 +03:00
parent 6fab4e6fea
commit 3d4335c89f
7 changed files with 135 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/app/general/edit-stakeholder/edit-stakeholder.component.ts
View File

@ -3,7 +3,7 @@ import {Stakeholder} from "../../openaireLibrary/monitor/entities/stakeholder";
import {FormBuilder, FormGroup, Validators} from "@angular/forms"; import {FormBuilder, FormGroup, Validators} from "@angular/forms";
import {StakeholderUtils} from "../../utils/indicator-utils"; import {StakeholderUtils} from "../../utils/indicator-utils";
import {Option} from "../../openaireLibrary/sharedComponents/input/input.component"; import {Option} from "../../openaireLibrary/sharedComponents/input/input.component";
import {Subscriber, Subscription} from "rxjs"; import {Subscription} from "rxjs";
import {EnvProperties} from "../../openaireLibrary/utils/properties/env-properties"; import {EnvProperties} from "../../openaireLibrary/utils/properties/env-properties";
import {properties} from "../../../environments/environment"; import {properties} from "../../../environments/environment";
import {StakeholderService} from "../../openaireLibrary/monitor/services/stakeholder.service"; import {StakeholderService} from "../../openaireLibrary/monitor/services/stakeholder.service";
@ -20,12 +20,9 @@ declare var UIkit;
@Component({ @Component({
selector: 'edit-stakeholder', selector: 'edit-stakeholder',
template: ` template: `
<div [ngStyle]="{'max-height': maxHeight}" <div [ngStyle]="{'max-height': maxHeight}" class="uk-overflow-auto">
[class.uk-padding-small]="!paddingLarge" [class.uk-padding-large]="paddingLarge"
class="uk-overflow-auto uk-padding-remove-bottom uk-padding-remove-horizontal">
<form *ngIf="stakeholderFb" [formGroup]="stakeholderFb"> <form *ngIf="stakeholderFb" [formGroup]="stakeholderFb">
<div class="uk-grid" [class.uk-margin-small-bottom]="!paddingLarge" <div class="uk-grid uk-margin-bottom" uk-grid>
[class.uk-margin-large-bottom]="paddingLarge" uk-grid uk-height-match=".uk-form-hint">
<div class="uk-width-1-2@m"> <div class="uk-width-1-2@m">
<div class="uk-text-bold uk-form-label uk-margin-small-bottom">Name</div> <div class="uk-text-bold uk-form-label uk-margin-small-bottom">Name</div>
<div dashboard-input id="name" [formInput]="stakeholderFb.get('name')" <div dashboard-input id="name" [formInput]="stakeholderFb.get('name')"
@ -126,9 +123,8 @@ export class EditStakeholderComponent implements OnDestroy {
@Input() @Input()
public maxHeight = 'none'; public maxHeight = 'none';
@Input() @Input()
public paddingLarge: boolean = false;
@Input()
public disableAlias: boolean = false; public disableAlias: boolean = false;
public test: string;
public stakeholderFb: FormGroup; public stakeholderFb: FormGroup;
public secure: boolean = false; public secure: boolean = false;
public stakeholderUtils: StakeholderUtils = new StakeholderUtils(); public stakeholderUtils: StakeholderUtils = new StakeholderUtils();
@ -250,8 +246,7 @@ export class EditStakeholderComponent implements OnDestroy {
this.stakeholderFb.get('type').enable(); this.stakeholderFb.get('type').enable();
}, 0); }, 0);
} }
} }));
));
} }
public get isAdmin() { public get isAdmin() {

3
src/app/general/general.component.html
View File

@ -24,8 +24,7 @@
<div *ngIf="stakeholder"> <div *ngIf="stakeholder">
<div class="uk-position-relative" style="min-height: 60vh"> <div class="uk-position-relative" style="min-height: 60vh">
<div [class.hidden]="loading"> <div [class.hidden]="loading">
<edit-stakeholder #editStakeholderComponent [disableAlias]="true" <edit-stakeholder #editStakeholderComponent [disableAlias]="true"></edit-stakeholder>
[paddingLarge]="true" ></edit-stakeholder>
</div> </div>
<div *ngIf="loading" class="uk-position-center"> <div *ngIf="loading" class="uk-position-center">
<loading *ngIf="loading"></loading> <loading *ngIf="loading"></loading>

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

@ -46,7 +46,7 @@
<h1 class="uk-h4 uk-margin-remove">{{stakeholder.name}}</h1> <h1 class="uk-h4 uk-margin-remove">{{stakeholder.name}}</h1>
</div> </div>
</div> </div>
<div *ngIf="stakeholder && status === errorCodes.DONE && activeTopic" class="uk-margin"> <div *ngIf="stakeholder && status === errorCodes.DONE && activeTopic" class="uk-margin-top">
<ul class="uk-tab"> <ul class="uk-tab">
<ng-template ngFor [ngForOf]="activeTopic.categories" let-category> <ng-template ngFor [ngForOf]="activeTopic.categories" let-category>
<li *ngIf="isPublicOrIsMember(category.visibility)" <li *ngIf="isPublicOrIsMember(category.visibility)"
@ -77,7 +77,7 @@
</div>--> </div>-->
</div> </div>
<div inner> <div inner>
<div *ngIf="activeCategory && countSubCategoriesToShow(activeCategory) > 1" class="uk-flex uk-flex-right uk-margin-bottom"> <div *ngIf="activeCategory && countSubCategoriesToShow(activeCategory) > 1" class="uk-flex uk-flex-right">
<ul class="uk-subnav uk-subnav-pill-alt"> <ul class="uk-subnav uk-subnav-pill-alt">
<ng-template ngFor [ngForOf]="activeCategory.subCategories" let-subCategory let-i="index"> <ng-template ngFor [ngForOf]="activeCategory.subCategories" let-subCategory let-i="index">
<li *ngIf="isPublicOrIsMember(subCategory.visibility)" <li *ngIf="isPublicOrIsMember(subCategory.visibility)"
@ -90,66 +90,121 @@
</ng-template> </ng-template>
</ul> </ul>
</div> </div>
<div [class.uk-padding]="!isSmallScreen"> <div *ngIf="privateStakeholder" class="message">
<div *ngIf="privateStakeholder" class="message"> <div class="uk-text-center">
<div class="uk-text-center"> <h3 class="uk-flex uk-flex-middle">
<h3 class="uk-flex uk-flex-middle"> <icon name="incognito" ratio="2"></icon>
<icon name="incognito" ratio="2"></icon> <span class="uk-margin-left">Private data</span>
<span class="uk-margin-left">Private data</span> </h3>
</h3> </div>
</div>
<div *ngIf="!privateStakeholder && stakeholder" class="uk-section">
<div *ngIf="(activeSubCategory && (activeSubCategory.charts.length == 0 || countSectionsWithIndicatorsToShow(activeSubCategory.charts) == 0))
&& ((activeSubCategory && activeSubCategory.description && activeSubCategory.description.length > 0) ||
(activeCategory && activeCategory.description && activeCategory.description.length > 0) ||
(activeTopic && activeTopic.description && activeTopic.description.length > 0))" class="uk-text-center">
<div class="uk-height-small uk-margin-large-top uk-margin-xlarge-right uk-margin-xlarge-left">
{{activeSubCategory && activeSubCategory.description && activeSubCategory.description.length > 0 ? activeSubCategory.description
: (activeCategory && activeCategory.description && activeCategory.description.length > 0 ? activeCategory.description :
(activeTopic.description && activeTopic.description.length > 0 ? activeTopic.description : ""))}}
</div> </div>
</div> </div>
<div *ngIf="!privateStakeholder && stakeholder"> <ng-template [ngIf]="!loading && !privateStakeholder &&
<div *ngIf="(activeSubCategory && (activeSubCategory.charts.length == 0 || countSectionsWithIndicatorsToShow(activeSubCategory.charts) == 0)) (!activeSubCategory ||
&& ((activeSubCategory && activeSubCategory.description && activeSubCategory.description.length > 0) || ((activeSubCategory.numbers.length == 0 || countSectionsWithIndicatorsToShow(activeSubCategory.numbers) == 0) &&
(activeCategory && activeCategory.description && activeCategory.description.length > 0) || (activeSubCategory.charts.length == 0 || countSectionsWithIndicatorsToShow(activeSubCategory.charts) == 0))
(activeTopic && activeTopic.description && activeTopic.description.length > 0))" class="uk-text-center"> || !activeTopic || !activeCategory || !activeSubCategory)" [ngIfElse]="content">
<div class="uk-height-small uk-margin-large-top uk-margin-xlarge-right uk-margin-xlarge-left"> <div class="message uk-text-center">
{{activeSubCategory && activeSubCategory.description && activeSubCategory.description.length > 0 ? activeSubCategory.description <h3>
: (activeCategory && activeCategory.description && activeCategory.description.length > 0 ? activeCategory.description : No indicators available yet. Stay tuned!
(activeTopic.description && activeTopic.description.length > 0 ? activeTopic.description : ""))}} </h3>
</div>
</div> </div>
<ng-template [ngIf]="!loading && !privateStakeholder && </ng-template>
(!activeSubCategory || <ng-template #content>
((activeSubCategory.numbers.length == 0 || countSectionsWithIndicatorsToShow(activeSubCategory.numbers) == 0) && <ng-container *ngFor="let number of activeSubCategory.numbers; let i = index;">
(activeSubCategory.charts.length == 0 || countSectionsWithIndicatorsToShow(activeSubCategory.charts) == 0)) <div *ngIf="countIndicatorsToShow(number.indicators) > 0" class="uk-grid uk-margin-large-bottom" uk-grid
|| !activeTopic || !activeCategory || !activeSubCategory)" [ngIfElse]="content"> uk-height-match="target: .uk-card">
<div class="message uk-text-center"> <h5 *ngIf="number.title" class="uk-width-1-1 uk-margin-bottom">{{number.title}}</h5>
<h3> <ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
No indicators available yet. Stay tuned! <div *ngIf="isPublicOrIsMember(indicator.visibility)" [ngClass]="getNumberClassBySize(indicator.width)"
</h3> class="uk-margin-bottom">
</div> <div class="uk-card uk-card-default uk-flex uk-flex-column uk-flex-center"
</ng-template> [class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()">
<ng-template #content> <div class="uk-text-center">
<ng-container *ngFor="let number of activeSubCategory.numbers; let i = index;"> <!--<div *ngIf="properties.environment === 'development'">
<div *ngIf="countIndicatorsToShow(number.indicators) > 0" class="uk-grid uk-margin-large-bottom" uk-grid Filtered:{{indicator.indicatorPaths[0].filtersApplied}}out of{{countSelectedFilters()}}
uk-height-match="target: .uk-card"> </div>-->
<h5 *ngIf="number.title" class="uk-width-1-1 uk-margin-bottom">{{number.title}}</h5> <div class="number uk-text-bold uk-text-primary-gradient">
<ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index"> <span *ngIf="numberResults.get(i + '-' + j)">{{numberResults.get(i + '-' + j) | number}}</span>
<div *ngIf="isPublicOrIsMember(indicator.visibility)" [ngClass]="getNumberClassBySize(indicator.width)" <span *ngIf="!numberResults.get(i + '-' + j)">--</span>
class="uk-margin-bottom">
<div class="uk-card uk-card-default uk-flex uk-flex-column uk-flex-center"
[class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()">
<div class="uk-text-center">
<!--<div *ngIf="properties.environment === 'development'">
Filtered:{{indicator.indicatorPaths[0].filtersApplied}}out of{{countSelectedFilters()}}
</div>-->
<div 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>
</div>
<div class="uk-text-uppercase uk-text-small uk-margin-top">{{indicator.name}}</div>
</div> </div>
<div class="uk-text-uppercase uk-text-small uk-margin-top">{{indicator.name}}</div>
</div>
<div *ngIf="indicator.description || indicator.additionalDescription"
class="uk-overlay uk-position-bottom">
<div class="uk-padding-small">
<div *ngIf="indicator.description">
{{indicator.description}}
</div>
<div *ngIf="indicator.additionalDescription">
{{indicator.additionalDescription}}
</div>
</div>
</div>
</div>
</div>
</ng-template>
</div>
</ng-container>
<div [class.uk-margin-large-top]="countSectionsWithIndicatorsToShow(activeSubCategory.numbers) > 0">
<ng-container *ngFor="let chart of activeSubCategory.charts; let i = index;">
<div *ngIf="countIndicatorsToShow(chart.indicators) > 0"
class="uk-grid uk-grid-column-medium uk-margin-medium-bottom uk-flex uk-flex-middle" uk-grid uk-height-match="target: .uk-card">
<h5 *ngIf="chart.title" class="uk-width-1-1 uk-margin-bottom">{{chart.title}}</h5>
<ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index">
<div *ngIf="isPublicOrIsMember(indicator.visibility) && chartsActiveType.get(i + '-' + j)"
[ngClass]="getChartClassBySize(indicator.width)">
<div class="uk-card uk-card-default"
[class.semiFiltered]="chartsActiveType.get(i + '-' + j).filtersApplied < countSelectedFilters()">
<div class="uk-card-body uk-text-center">
<h4 class="uk-margin-bottom chartTitle uk-flex uk-flex-bottom ">
<div>{{indicator.name + " "}}</div>
</h4>
<div *ngIf="indicator.indicatorPaths.length > 1" class="uk-button-group">
<button *ngFor="let indicatorPath of indicator.indicatorPaths;"
class="uk-button"
(click)="setActiveChart(i, j, indicatorPath.type)"
[class.uk-button-secondary]="chartsActiveType.get(i + '-' + j).url === indicatorPath.url">
{{indicatorPath.type}}
</button>
</div>
<div *ngIf="properties.environment === 'development'">
Filtered: {{chartsActiveType.get(i + '-' + j).filtersApplied}} out of
{{countSelectedFilters()}}</div>
<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>
<img *ngIf="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')">
</div>
<!-- TODO Check description-->
<div *ngIf="indicator.description || indicator.additionalDescription" <div *ngIf="indicator.description || indicator.additionalDescription"
class="uk-overlay uk-position-bottom"> class="uk-overlay uk-position-bottom">
<div class="uk-padding-small"> <div class="uk-padding multi-line-ellipsis lines-3">
<div *ngIf="indicator.description"> <p class="uk-margin-remove">
<span *ngIf="indicator.description">
{{indicator.description}} {{indicator.description}}
</div> </span>
<div *ngIf="indicator.additionalDescription"> <br>
<span *ngIf="indicator.additionalDescription">
{{indicator.additionalDescription}} {{indicator.additionalDescription}}
</div> </span>
</p>
</div> </div>
</div> </div>
</div> </div>
@ -157,80 +212,23 @@
</ng-template> </ng-template>
</div> </div>
</ng-container> </ng-container>
<div [class.uk-margin-large-top]="activeSubCategory.numbers.length > 0"> </div>
<ng-container *ngFor="let chart of activeSubCategory.charts; let i = index;"> <div class="uk-margin-medium-top uk-flex hideInfo">
<div *ngIf="countIndicatorsToShow(chart.indicators) > 0" <!-- Last Stats Date-->
class="uk-grid uk-grid-column-small uk-margin-medium-bottom uk-flex uk-flex-middle" uk-grid uk-height-match="target: .uk-card"> <div class="uk-width-2-3@m uk-width-1-2 graph">
<h5 *ngIf="chart.title" class="uk-width-1-1 uk-margin-bottom">{{chart.title}}</h5> <icon name="graph" customClass="uk-text-primary"></icon>
<ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index"> <span class="uk-margin-small-left uk-text-baseline uk-text-muted">Powered by
<div *ngIf="isPublicOrIsMember(indicator.visibility) && chartsActiveType.get(i + '-' + j)" <a href="https://graph.openaire.eu" class="uk-link">OpenAIRE Research Graph</a></span>
[ngClass]="getChartClassBySize(indicator.width)"> <span *ngIf="statsUpdateDate" class="uk-text-baseline uk-text-muted">
<div class="uk-card uk-card-default" . Last update of statistics in OpenAIRE: {{statsUpdateDate | date: 'MMM dd, yyyy'}}
[class.semiFiltered]="chartsActiveType.get(i + '-' + j).filtersApplied < countSelectedFilters()"> </span>
<div class="uk-card-body uk-text-center">
<h4 class="uk-margin-bottom chartTitle uk-flex uk-flex-bottom ">
<div>{{indicator.name + " "}}</div>
</h4>
<div *ngIf="indicator.indicatorPaths.length > 1" class="uk-button-group">
<button *ngFor="let indicatorPath of indicator.indicatorPaths;"
class="uk-button"
(click)="setActiveChart(i, j, indicatorPath.type)"
[class.uk-button-secondary]="chartsActiveType.get(i + '-' + j).url === indicatorPath.url">
{{indicatorPath.type}}
</button>
</div>
<div *ngIf="properties.environment === 'development'">
Filtered: {{chartsActiveType.get(i + '-' + j).filtersApplied}} out of
{{countSelectedFilters()}}</div>
<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>
<img *ngIf="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')">
</div>
<!-- TODO Check description-->
<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>
</ng-container>
</div> </div>
<div class="uk-margin-medium-top uk-flex hideInfo"> <!--Feedback-->
<!-- Last Stats Date--> <div class="uk-width-expand uk-text-right">
<div class="uk-width-2-3@m uk-width-1-2 graph"> <span class="uk-text-muted">Send us your <a class="uk-link" [href]="feedback" target="_self">feedback</a>.</span>
<icon name="graph" customClass="uk-text-primary"></icon>
<span class="uk-margin-small-left uk-text-baseline uk-text-muted">Powered by
<a href="https://graph.openaire.eu" class="uk-link">OpenAIRE Research Graph</a></span>
<span *ngIf="statsUpdateDate" class="uk-text-baseline uk-text-muted">
. Last update of statistics in OpenAIRE: {{statsUpdateDate | date: 'MMM dd, yyyy'}}
</span>
</div>
<!--Feedback-->
<div class="uk-width-expand uk-text-right">
<span class="uk-text-muted">Send us your <a class="uk-link" [href]="feedback" target="_self">feedback</a>.</span>
</div>
</div> </div>
</ng-template> </div>
</div> </ng-template>
</div> </div>
</div> </div>
</div> </div>

2
src/app/openaireLibrary

@ -1 +1 @@
Subproject commit 3fd632a2b754a336615b8a776bea95ee9808e93c Subproject commit dc0544d0d8f54071cb7c9bffec36de19b0bccd68

2
src/assets/dashboard-theme

@ -1 +1 @@
Subproject commit d4d37fc52dd45a0cb9917403d5ce37732cab164e Subproject commit 27598ac7359cb13b5017ee1f97b7bd2c743659ae

3
src/assets/monitor-dashboard-custom.css
View File

@ -1,6 +1,7 @@
.stakeholderPage { .stakeholderPage {
/* Structure */ /* Structure */
--structure-page-content-background-color: #EDF1FA; --structure-page-content-background-color: #F3F3F3;
--structure-page-content-background-color-rgb: 243, 243, 243;
/* Navbar */ /* Navbar */
--navbar-background-image: url("~src/assets/banner.jpg"); --navbar-background-image: url("~src/assets/banner.jpg");

2
src/assets/openaire-theme

@ -1 +1 @@
Subproject commit 9f07792c4368f8b1e4d41ca7cd8e47f257a25885 Subproject commit 60b581dc8e8aa393cd3b7e604375132e015acaf8