openaire-library/dashboard/plugins/components/stats/plugin-stats.form.component.ts

82 lines
3.7 KiB
TypeScript

import {Component} from '@angular/core';
import {PluginBaseFormComponent, PluginEditEvent} from "../../utils/base-plugin.form.component";
import {PluginStats} from "./plugin-stats.component";
@Component({
selector: 'plugin-stats-form',
template: `
<div *ngIf="pluginObject" class="uk-padding-xsmall">
<plugin-field-edit [value]="pluginObject.title"
type="text" field="title" (changed)="valueChanged($event)"></plugin-field-edit>
<div class=" uk-margin-top uk-text-meta uk-text-xsmall">External Link</div>
<div class="uk-margin-small-top">
<plugin-field-edit [value]="pluginObject.url.url"
type="text" field="url" (changed)="urlValueChanged($event)"></plugin-field-edit>
</div>
<div class="uk-margin-small-top uk-margin-small-top">
<plugin-field-edit [value]="pluginObject.url.linkText"
type="text" field="linkText" (changed)="urlValueChanged($event)"></plugin-field-edit>
</div>
<!-- <div class=" uk-margin-top uk-text-meta uk-text-xsmall"> Number indicators</div>-->
<!-- <ng-container *ngFor="let number of stakeholder.topics[0].category[0].subcategory[0].numbers">-->
<!-- <div class="uk-grid uk-grid-small uk-margin-xsmall-top">-->
<!-- <div class="uk-text-small uk-width-3-4">{{service.name}}</div>-->
<!-- <div class=" uk-width-1-4">-->
<!-- <plugin-field-edit [value]=" pluginObject.serviceIdsArray.indexOf(service.id)!=-1"-->
<!-- type="boolean" field="serviceIdsArray" (changed)="serviceChanged(service.id,$event)" >-->
<!-- </plugin-field-edit>-->
<!-- </div>-->
<!-- </div>-->
<!-- </ng-container>-->
<div class=" uk-margin-medium-top uk-text-meta uk-text-xsmall"> Chart indicators</div>
<ng-container *ngFor="let section of stakeholder.topics[0].categories[0].subCategories[0].charts">
<ng-container *ngFor="let indicator of section.indicators">
<div class=" uk-margin-xsmall-top">
<plugin-field-edit [value]=" pluginObject.disabledIndicators.indexOf(indicator._id)==-1"
type="checkbox" field="sdgs" (editClicked)="pluginEditEvent = $event"
(changed)="indicatorsChanged(indicator._id,$event)">
</plugin-field-edit>
{{indicator.indicatorPaths[0].name?indicator.name:(indicator.indicatorPaths[0].parameters['title'] )}}
<span class=" uk-text-xsmall">
{{ indicator.indicatorPaths[0].parameters['subtitle']? ' ' + indicator.indicatorPaths[0].parameters['subtitle']:''}}</span>
</div>
</ng-container>
</ng-container>
</div>
<!-- --> `,
})
export class PluginStatsFormComponent extends PluginBaseFormComponent<PluginStats> {
stakeholder = PluginStats.getMockStakeholder();
constructor() {
super()
}
indicatorsChanged(id,$event:PluginEditEvent ){
console.log("before", id,this.pluginObject.disabledIndicators)
let index = this.pluginObject.disabledIndicators.indexOf(id);
if(index !=-1){
this.pluginObject.disabledIndicators.splice(index,1);
}else{
this.pluginObject.disabledIndicators.push(id);
}
$event.value =this.pluginObject.disabledIndicators;
console.log("after",this.pluginObject.disabledIndicators)
this.valuesChanged.emit({field:$event.field, value: $event.value, type: 'parent'})
}
urlValueChanged($event:PluginEditEvent){
console.log($event.field,$event.value)
this.pluginObject['url'][$event.field]=$event.value;
$event.field = "url";
$event.value = this.pluginObject['url'];
this.valuesChanged.emit($event)
}
}