[Monitor Dashboard | Trunk]: Add note for https on edit-stakeholder. Change number indicator form logic

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@60161 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
Konstantinos Triantafyllou 2020-12-17 15:39:31 +00:00
parent 13503f37b4
commit 1f953e598c
8 changed files with 80 additions and 37 deletions

View File

@ -10,6 +10,7 @@ import {StakeholderService} from "../../openaireLibrary/monitor/services/stakeho
import {UtilitiesService} from "../../openaireLibrary/services/utilities.service"; import {UtilitiesService} from "../../openaireLibrary/services/utilities.service";
import {Session, User} from "../../openaireLibrary/login/utils/helper.class"; import {Session, User} from "../../openaireLibrary/login/utils/helper.class";
import {UserManagementService} from "../../openaireLibrary/services/user-management.service"; import {UserManagementService} from "../../openaireLibrary/services/user-management.service";
import {StringUtils} from "../../openaireLibrary/utils/string-utils.class";
declare var UIkit; declare var UIkit;
@ -73,6 +74,15 @@ declare var UIkit;
</div> </div>
</div> </div>
</div> </div>
<div class="uk-margin-remove-top uk-width-1-1">
<div class="uk-flex uk-flex-right" uk-grid>
<div class="uk-width-3-5@l uk-width-1-1 uk-text-small">
<span class="uk-text-bold">Note:</span> Prefer urls like "<span class="uk-text-bold">https://example.com/my-secure-image.png</span>" instead
of "http://example.com/my-image.png".
<span class="uk-text-bold">Browsers may not load non secure content.</span>
</div>
</div>
</div>
<div *ngIf="uploadError" class="uk-text-danger uk-width-1-1">{{uploadError}}</div> <div *ngIf="uploadError" class="uk-text-danger uk-width-1-1">{{uploadError}}</div>
<div dashboard-input class="uk-width-1-3@m" [formInput]="stakeholderFb.get('visibility')" <div dashboard-input class="uk-width-1-3@m" [formInput]="stakeholderFb.get('visibility')"
[placeholder]="'Select a status'" [placeholder]="'Select a status'"
@ -163,7 +173,7 @@ export class EditStakeholderComponent implements OnDestroy {
type: this.fb.control(this.stakeholder.type, Validators.required), type: this.fb.control(this.stakeholder.type, Validators.required),
topics: this.fb.control(this.stakeholder.topics), topics: this.fb.control(this.stakeholder.topics),
isUpload: this.fb.control(this.stakeholder.isUpload), isUpload: this.fb.control(this.stakeholder.isUpload),
logoUrl: this.fb.control(this.stakeholder.logoUrl), logoUrl: this.fb.control(this.stakeholder.logoUrl, StringUtils.urlValidator()),
}); });
this.initPhoto(); this.initPhoto();
if (!isDefault) { if (!isDefault) {

View File

@ -137,8 +137,9 @@
out of out of
{{countSelectedFilters()}}</div> {{countSelectedFilters()}}</div>
<div class="uk-text-bold ">{{indicator.name}}</div> <div class="uk-text-bold ">{{indicator.name}}</div>
<h3 *ngIf="numberResults.get(i + '-' + j)" class="uk-margin-medium-top uk-text-bold"> <h3 class="uk-margin-medium-top uk-text-bold">
<span>{{numberResults.get(i + '-' + j) | number}}</span> <span *ngIf="numberResults.get(i + '-' + j)">{{numberResults.get(i + '-' + j) | number}}</span>
<span *ngIf="!numberResults.get(i + '-' + j)">--</span>
</h3> </h3>
<!--<ng-container *ngTemplateOutlet="description; context: {indicator:indicator}"></ng-container>--> <!--<ng-container *ngTemplateOutlet="description; context: {indicator:indicator}"></ng-container>-->
</div> </div>

View File

@ -435,6 +435,14 @@ export class MonitorComponent implements OnInit, OnDestroy {
result = result[jsonPath]; result = result[jsonPath];
} }
}); });
if (typeof result === 'string' || typeof result === 'number') {
result = Number(result);
if (result === Number.NaN) {
result = 0;
}
} else {
result = 0;
}
this.numberResults.set(i + '-' + j, result); this.numberResults.set(i + '-' + j, result);
}); });
})); }));

View File

@ -76,8 +76,9 @@
<div class="uk-text-center uk-text-bold"> <div class="uk-text-center uk-text-bold">
{{indicator.name ? indicator.name : 'No title available'}} {{indicator.name ? indicator.name : 'No title available'}}
</div> </div>
<h3 *ngIf="numberResults.get(i + '-' + j)" class="uk-margin-medium-top uk-text-center uk-text-bold"> <h3 class="uk-margin-medium-top uk-text-center uk-text-bold">
<span>{{numberResults.get(i + '-' + j) | number}}</span> <span *ngIf="numberResults.get(i + '-' + j)">{{numberResults.get(i + '-' + j) | number}}</span>
<span *ngIf="!numberResults.get(i + '-' + j)">--</span>
</h3> </h3>
<!--<ng-container *ngTemplateOutlet="description; context: {indicator:indicator}"></ng-container>--> <!--<ng-container *ngTemplateOutlet="description; context: {indicator:indicator}"></ng-container>-->
</div> </div>
@ -270,12 +271,10 @@
</div> </div>
</div> </div>
<div formArrayName="jsonPath" class="uk-width-1-1"> <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-flex uk-flex-middle uk-margin-remove-bottom">
[class.uk-text-danger]="numberIndicatorPaths.at(i).get('result').invalid && numberIndicatorPaths.at(i).get('result').errors.required">
<span>JSON Path</span> <span>JSON Path</span>
</h6> </h6>
<div <div *ngIf="numberIndicatorPaths.at(i).get('result').invalid && numberIndicatorPaths.at(i).get('result').errors.required">
*ngIf="numberIndicatorPaths.at(i).get('result').invalid && numberIndicatorPaths.at(i).get('result').errors.required">
<div class="uk-text-danger uk-text-small"> <div class="uk-text-danger uk-text-small">
This JSON path is not valid or the result has not been calculated yet. This JSON path is not valid or the result has not been calculated yet.
Please press calculate on box below to see the result. Please press calculate on box below to see the result.
@ -286,11 +285,13 @@
<div dashboard-input class="uk-width-1-1" <div dashboard-input class="uk-width-1-1"
[extraLeft]="false" [extraLeft]="false"
[formInput]="jsonPath" [formInput]="jsonPath"
placeholder="Write a field name" placeholder="Write a field"
[label]="'Level ' + +(j + 1)"> [label]="'Level ' + +(j + 1)">
<div class="uk-flex uk-flex-middle"> <div class="uk-flex uk-flex-middle">
<span *ngIf="getJsonPath(i).length !== 1" <span *ngIf="getJsonPath(i).length !== 1"
class=" uk-margin-small-left uk-text-danger clickable" [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)"> (click)="removeJsonPath(i, j)">
<icon name="close"></icon> <icon name="close"></icon>
</span> </span>
@ -310,15 +311,20 @@
</div> </div>
<div class="uk-width-1-1 uk-flex uk-flex-center"> <div class="uk-width-1-1 uk-flex uk-flex-center">
<div class="uk-flex uk-position-relative"> <div class="uk-flex uk-position-relative">
<span class="uk-padding number number-preview"> <span class="uk-padding number number-preview uk-text-center">
<span <span *ngIf="numberIndicatorPaths.at(i).get('result').valid && numberIndicatorPaths.at(i).get('result').value !== 0">
*ngIf="numberIndicatorPaths.at(i).get('result').valid">{{numberIndicatorPaths.at(i).get('result').value | number}}</span> {{numberIndicatorPaths.at(i).get('result').value | number}}
</span>
<span *ngIf="numberIndicatorPaths.at(i).get('result').valid && numberIndicatorPaths.at(i).get('result').value === 0">
--
</span>
</span> </span>
<div *ngIf="numberIndicatorPaths.at(i).get('result').invalid" <div *ngIf="numberIndicatorPaths.at(i).get('result').invalid"
class="uk-width-1-1 uk-height-1-1 refresh-indicator"> class="uk-width-1-1 uk-height-1-1 refresh-indicator">
<div class="uk-position-relative uk-height-1-1"> <div class="uk-position-relative uk-height-1-1">
<div class="uk-position-center uk-text-center clickable uk-text-small" <div class="uk-position-center uk-text-center clickable uk-text-small"
(click)="validateJsonPath(i)"> [class.uk-disabled]="numberIndicatorPaths.at(i).get('url').invalid"
(click)="validateJsonPath(i, true)">
<div> <div>
<icon name="refresh"></icon> <icon name="refresh"></icon>
</div> </div>

View File

@ -30,6 +30,7 @@ import {LayoutService} from "../openaireLibrary/dashboard/sharedComponents/sideb
import {Router} from "@angular/router"; import {Router} from "@angular/router";
import {Session} from "../openaireLibrary/login/utils/helper.class"; import {Session} from "../openaireLibrary/login/utils/helper.class";
import {UserManagementService} from "../openaireLibrary/services/user-management.service"; import {UserManagementService} from "../openaireLibrary/services/user-management.service";
import {StringUtils} from "../openaireLibrary/utils/string-utils.class";
declare var UIkit; declare var UIkit;
@ -172,6 +173,14 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
result = result[jsonPath]; result = result[jsonPath];
} }
}); });
if (typeof result === 'string' || typeof result === 'number') {
result = Number(result);
if (result === Number.NaN) {
result = 0;
}
} else {
result = 0;
}
this.numberResults.set(i + '-' + j, result); this.numberResults.set(i + '-' + j, result);
}); });
})); }));
@ -431,7 +440,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
public addJsonPath(index: number) { public addJsonPath(index: number) {
if (index == 0 && this.getJsonPath(index).getRawValue()[index].indexOf(",") != -1) { if (index == 0 && this.getJsonPath(index).getRawValue()[index].indexOf(",") != -1) {
//if in the first path there are more than one paaths comma separated, split them and autogenerate the forms //if in the first path there are more than one paths comma separated, split them and autogenerate the forms
let paths = this.getJsonPath(index).getRawValue()[index].split(","); let paths = this.getJsonPath(index).getRawValue()[index].split(",");
for (let i = 0; i < paths.length; i++) { for (let i = 0; i < paths.length; i++) {
if (i != 0) { if (i != 0) {
@ -439,19 +448,18 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
} }
} }
this.getJsonPath(index).setValue(paths) this.getJsonPath(index).setValue(paths)
return; } else {
}
this.getJsonPath(index).push(this.fb.control('', Validators.required)); this.getJsonPath(index).push(this.fb.control('', Validators.required));
} }
}
public removeJsonPath(i: number, j: number) { public removeJsonPath(i: number, j: number) {
if(this.getJsonPath(i).enabled) {
this.getJsonPath(i).removeAt(j); this.getJsonPath(i).removeAt(j);
if (this.getJsonPath(i).length !== this.getCurrentJsonPath(i).length) {
this.getJsonPath(i).markAsDirty();
} }
} }
public validateJsonPath(index: number) { public validateJsonPath(index: number, dirty: boolean = false) {
let indicatorPath: FormGroup = <FormGroup>this.numberIndicatorPaths.at(index); let indicatorPath: FormGroup = <FormGroup>this.numberIndicatorPaths.at(index);
if (this.indicator.defaultId === null) { if (this.indicator.defaultId === null) {
this.getJsonPath(index).disable(); this.getJsonPath(index).disable();
@ -467,20 +475,33 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
setTimeout(() => { setTimeout(() => {
if (this.indicator.defaultId === null) { if (this.indicator.defaultId === null) {
this.getJsonPath(index).enable(); this.getJsonPath(index).enable();
if(dirty) {
this.getJsonPath(index).markAsDirty();
}
} }
indicatorPath.get('result').setErrors(null); indicatorPath.get('result').setErrors(null);
console.debug(result);
if (typeof result === 'string' || typeof result === 'number') { if (typeof result === 'string' || typeof result === 'number') {
result = Number(result); result = Number(result);
if (result !== Number.NaN) { if (result !== Number.NaN) {
indicatorPath.get('result').setValue(result); indicatorPath.get('result').setValue(result);
} else { } else {
indicatorPath.get('result').setValue(null); indicatorPath.get('result').setValue(0);
} }
} else { } else {
indicatorPath.get('result').setValue(null); indicatorPath.get('result').setValue(0);
} }
}, 500); }, 500);
}, error => {
setTimeout(() => {
if (this.indicator.defaultId === null) {
this.getJsonPath(index).enable();
if (dirty) {
this.getJsonPath(index).markAsDirty();
}
}
indicatorPath.get('result').setErrors(null);
indicatorPath.get('result').setValue(0);
}, 500);
})); }));
} }
@ -514,7 +535,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
jsonPath.push(this.fb.control('', Validators.required)); jsonPath.push(this.fb.control('', Validators.required));
} }
this.numberIndicatorPaths.push(this.fb.group({ this.numberIndicatorPaths.push(this.fb.group({
url: this.fb.control(url, Validators.required), url: this.fb.control(url, [Validators.required, StringUtils.urlValidator()]),
jsonPath: jsonPath, jsonPath: jsonPath,
result: this.fb.control(0, Validators.required), result: this.fb.control(0, Validators.required),
// parameters: parameters, // parameters: parameters,
@ -587,10 +608,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
public addChartIndicatorPath(value: string = '', parameters: FormArray = new FormArray([]), disableUrl: boolean = false, type: string = null) { public addChartIndicatorPath(value: string = '', parameters: FormArray = new FormArray([]), disableUrl: boolean = false, type: string = null) {
this.chartIndicatorPaths.push(this.fb.group({ this.chartIndicatorPaths.push(this.fb.group({
url: this.fb.control(value, [Validators.required, url: this.fb.control(value, [Validators.required, StringUtils.urlValidator()]),
Validators.pattern('https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.' +
'[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.' +
'[a-zA-Z0-9]+\.[^\s]{2,}')]),
parameters: parameters, parameters: parameters,
type: this.fb.control(type) type: this.fb.control(type)
} }

View File

@ -57,7 +57,7 @@
<span class="uk-icon-button small portal-icon-button"> <span class="uk-icon-button small portal-icon-button">
<icon name="add"></icon> <icon name="add"></icon>
</span> </span>
<span class="uk-hidden-hover space" [class.uk-hidden]="!open"> Create new topic</span> <span [class.uk-hidden-hover]="stakeholder.topics.length > 0" class="space" [class.uk-hidden]="!open"> Create new topic</span>
</span> </span>
</li> </li>
</ul> </ul>
@ -141,7 +141,7 @@
<span class="uk-icon-button small portal-icon-button"> <span class="uk-icon-button small portal-icon-button">
<icon name="add"></icon> <icon name="add"></icon>
</span> </span>
<span class="uk-hidden-hover space">Create new category</span> <span [class.uk-hidden-hover]="stakeholder.topics[topicIndex].categories.length > 0" class="space">Create new category</span>
</span> </span>
</li> </li>
</ul> </ul>
@ -194,7 +194,7 @@
<span class="uk-icon-button small portal-icon-button"> <span class="uk-icon-button small portal-icon-button">
<icon name="add"></icon> <icon name="add"></icon>
</span> </span>
<span class="uk-hidden-hover space">Create new subcategory</span> <span [class.uk-hidden-hover]="stakeholder.topics[topicIndex].categories[selectedCategoryIndex].subCategories.length > 0" class="space">Create new subcategory</span>
</span> </span>
</li> </li>
</ul> </ul>

View File

@ -10,7 +10,7 @@
} }
.input-box { .input-box {
background-color: #FAFAFA; background-color: #FAFAFA !important;
border: 1px solid transparent; border: 1px solid transparent;
padding: 16px; padding: 16px;
border-radius: 4px; border-radius: 4px;

View File

@ -10,7 +10,6 @@
--primary-color-rgb: var(--theme-secondary-color-rgb); --primary-color-rgb: var(--theme-secondary-color-rgb);
--secondary-color-rgb: var(--theme-secondary-color-rgb); --secondary-color-rgb: var(--theme-secondary-color-rgb);
} }
/*Stakeholder Specific*/ /*Stakeholder Specific*/
.publicationsSearchForm { .publicationsSearchForm {
background-image: none; background-image: none;
@ -145,9 +144,10 @@
max-width: 50px; max-width: 50px;
background: var(--secondary-color); background: var(--secondary-color);
color: var(--contrast-color); color: var(--contrast-color);
-webkit-clip-path: polygon(15% 5%, 100% 5%, 100% 100%, 0% 100%); -webkit-clip-path: polygon(20% 5%, 80% 5%, 100% 100%, 0% 100%);
clip-path: polygon(20% 5%, 80% 5%, 100% 100%, 0% 100%); clip-path: polygon(20% 5%, 80% 5%, 100% 100%, 0% 100%);
display: none; display: none;
padding-left: 10px;
} }
.dashboard .section { .dashboard .section {