[Monitor Dashboard | Trunk]: Change Topic, Category, Subcategory options be like Indicator's
git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@57922 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
parent
84501146e0
commit
e32274548f
|
|
@ -32,112 +32,31 @@
|
|||
<div class="menu_title uk-width-expand">
|
||||
{{topic.name}}
|
||||
</div>
|
||||
<span class="uk-width-1-6 onHover"
|
||||
(click)="$event.stopPropagation();saveTopicOpen(editTopic, i); $event.preventDefault()">
|
||||
<i class="material-icons">more_horiz</i>
|
||||
</span>
|
||||
</a>
|
||||
<div uk-drop="mode: none; offset: -2; delay-hide: 0; flip: false" #editTopic
|
||||
class="uk-padding-large uk-padding-remove-vertical uk-padding-remove-right uk-drop">
|
||||
<div *ngIf="topicFb">
|
||||
<div class="md-card">
|
||||
<div class="md-card-content uk-position-relative">
|
||||
<a class="uk-position-top-right">
|
||||
<i (click)="hide(editTopic)" class="material-icons">close</i>
|
||||
</a>
|
||||
<div class="uk-grid-small" uk-grid [formGroup]="topicFb">
|
||||
<div class="uk-width-1-1">
|
||||
<label class="uk-text-bold">Topic Settings</label>
|
||||
<input class="uk-input uk-form-small" formControlName="name"
|
||||
[class.uk-form-danger]="topicFb.get('name').dirty && topicFb.get('name').invalid"
|
||||
type="text">
|
||||
</div>
|
||||
<div class="uk-width-1-1">
|
||||
<label>Description</label>
|
||||
<textarea class="uk-textarea" formControlName="description"
|
||||
rows="3" type="text"></textarea>
|
||||
</div>
|
||||
<div dashboard-input [type]="'select'"
|
||||
[formInput]="topicFb.get('isPublic')" [options]="indicatorUtils.isPublic"
|
||||
label="Privacy" class="uk-width-1-2">
|
||||
</div>
|
||||
<div dashboard-input [type]="'select'"
|
||||
[formInput]="topicFb.get('isActive')" [options]="indicatorUtils.isActive"
|
||||
label="Status" class="uk-width-1-2">
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="uk-grid-small uk-child-width-1-2" uk-grid>
|
||||
<div>
|
||||
<button class="md-btn md-btn-small"
|
||||
(click)="deleteTopicOpen(this.topicFb.value.name, editTopic, i)">Delete</button>
|
||||
</div>
|
||||
<div>
|
||||
<button class="md-btn md-btn-small md-btn-primary uk-float-right"
|
||||
[class.md-btn-primary]="topicFb.valid && topicFb.dirty"
|
||||
[class.disabled]="topicFb.invalid || !topicFb.dirty"
|
||||
(click)="saveTopic(editTopic, i)">Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-width-1-6" (click)="$event.stopPropagation();$event.preventDefault()">
|
||||
<i class="material-icons onHover">more_vert</i>
|
||||
<div uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"
|
||||
class="uk-padding-remove-horizontal">
|
||||
<ul class="uk-nav uk-dropdown-nav">
|
||||
<li><a (click)="editTopicOpen(i)">Edit</a></li>
|
||||
<!--<li><a (click)="toggleIndicatorStatus(indicator)">
|
||||
{{indicator.isActive ? 'Deactivate' : 'Activate'}}</a>
|
||||
</li>
|
||||
<li><a (click)="toggleIndicatorAccess(indicator)">
|
||||
{{indicator.isPublic?'Unpublish':'Publish'}}</a>
|
||||
</li>-->
|
||||
<hr class="uk-nav-divider">
|
||||
<li><a (click)="deleteTopicOpen(i)">Delete</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ng-template>
|
||||
<li>
|
||||
<a href="#" (click)="saveTopicOpen(newTopic); $event.preventDefault()">
|
||||
<a href="#" (click)="editTopicOpen(); $event.preventDefault()">
|
||||
<span class="menu_icon"><i class="material-icons">add</i></span>
|
||||
<span class="menu_title">Create new Topic</span>
|
||||
</a>
|
||||
<div uk-drop="mode: none; offset: -2; delay-hide: 0" #newTopic
|
||||
class="uk-padding-large uk-padding-remove-vertical uk-padding-remove-right uk-drop">
|
||||
<div *ngIf="topicFb">
|
||||
<div class="md-card">
|
||||
<div class="md-card-content uk-position-relative">
|
||||
<a class="uk-position-top-right">
|
||||
<i (click)="hide(newTopic)" class="material-icons">close</i>
|
||||
</a>
|
||||
<div class="uk-grid-small" uk-grid [formGroup]="topicFb">
|
||||
<div class="uk-width-1-1">
|
||||
<label class="uk-text-bold">New Topic</label>
|
||||
<input class="uk-input uk-form-small" formControlName="name"
|
||||
[class.uk-form-danger]="topicFb.get('name').dirty && topicFb.get('name').invalid"
|
||||
type="text">
|
||||
</div>
|
||||
<div class="uk-width-1-1">
|
||||
<label>Description</label>
|
||||
<textarea class="uk-textarea" formControlName="description"
|
||||
rows="3" type="text"></textarea>
|
||||
</div>
|
||||
<div dashboard-input [type]="'select'"
|
||||
[formInput]="topicFb.get('isPublic')" [options]="indicatorUtils.isPublic"
|
||||
label="Privacy" class="uk-width-1-2">
|
||||
</div>
|
||||
<div dashboard-input [type]="'select'"
|
||||
[formInput]="topicFb.get('isActive')" [options]="indicatorUtils.isActive"
|
||||
label="Status" class="uk-width-1-2">
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="uk-grid-small uk-child-width-1-2" uk-grid>
|
||||
<div>
|
||||
<button class="md-btn md-btn-small" (click)="hide(newTopic)">Cancel</button>
|
||||
</div>
|
||||
<div>
|
||||
<button class="md-btn md-btn-small uk-float-right"
|
||||
[class.md-btn-primary]="topicFb.valid && topicFb.dirty"
|
||||
[class.disabled]="topicFb.invalid || !topicFb.dirty"
|
||||
(click)="saveTopic(newTopic)">
|
||||
Create
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
|
@ -188,4 +107,23 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<modal-alert #deleteTopicModal (alertOutput)="deleteTopic()"></modal-alert>
|
||||
<modal-alert #deleteModal (alertOutput)="deleteTopic()">
|
||||
You are about to delete <span class="uk-text-bold" *ngIf="index !== -1">"{{stakeholder.topics[index].name}}"</span> topic permanently.
|
||||
Are you sure you want to proceed?
|
||||
</modal-alert>
|
||||
<modal-alert #editModal (alertOutput)="saveTopic(index)">
|
||||
<div *ngIf="form" class="uk-padding-small" [formGroup]="form">
|
||||
<div dashboard-input class="uk-form-row" [formInput]="form.get('name')" label="Title"></div>
|
||||
<div dashboard-input class="uk-form-row" [formInput]="form.get('description')"
|
||||
label="Description" type="textarea">
|
||||
</div>
|
||||
<div class="uk-form-row uk-flex uk-flex-middle">
|
||||
<div dashboard-input class="uk-width-small" [formInput]="form.get('isPublic')"
|
||||
label="Accessibility" [options]="stakeholderUtils.isPublic" type="select">
|
||||
</div>
|
||||
<div dashboard-input class="uk-margin-small-left uk-width-small" [formInput]="form.get('isActive')"
|
||||
label="Visibility" [options]="stakeholderUtils.isActive" type="select">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</modal-alert>
|
||||
|
|
|
|||
|
|
@ -12,189 +12,181 @@ import {AlertModal} from "../openaireLibrary/utils/modal/alert";
|
|||
import {Subscriber} from "rxjs";
|
||||
import {FormBuilder, FormGroup, Validators} from "@angular/forms";
|
||||
import {LayoutService} from "../library/sharedComponents/sidebar/layout.service";
|
||||
import {IndicatorUtils, StakeholderUtils} from "../utils/indicator-utils";
|
||||
import {StakeholderUtils} from "../utils/indicator-utils";
|
||||
|
||||
declare var UIkit;
|
||||
|
||||
@Component({
|
||||
selector: 'stakeholder',
|
||||
templateUrl: './stakeholder.component.html',
|
||||
selector: 'stakeholder',
|
||||
templateUrl: './stakeholder.component.html',
|
||||
})
|
||||
export class StakeholderComponent implements OnInit, OnDestroy {
|
||||
public subscriptions: any[] = [];
|
||||
public loading: boolean = true;
|
||||
public errorCodes: ErrorCodes;
|
||||
public stakeholder: Stakeholder;
|
||||
public analysisOpen: boolean = true;
|
||||
private errorMessages: ErrorMessagesComponent;
|
||||
public topicFb: FormGroup;
|
||||
public indicatorUtils: IndicatorUtils = new IndicatorUtils();
|
||||
public stakeholderUtils: StakeholderUtils = new StakeholderUtils();
|
||||
public element: any;
|
||||
public index: number;
|
||||
properties: EnvProperties;
|
||||
|
||||
@ViewChild('deleteTopicModal') deleteTopicModal: AlertModal;
|
||||
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
private router: Router,
|
||||
private title: Title,
|
||||
private layoutService: LayoutService,
|
||||
private fb: FormBuilder,
|
||||
private stakeholderService: StakeholderService) {
|
||||
this.errorCodes = new ErrorCodes();
|
||||
this.errorMessages = new ErrorMessagesComponent();
|
||||
}
|
||||
|
||||
public ngOnInit() {
|
||||
this.route.data
|
||||
.subscribe((data: { envSpecific: EnvProperties }) => {
|
||||
this.properties = data.envSpecific;
|
||||
this.subscriptions.push(this.stakeholderService.getStakeholderAsObservable().subscribe(stakeholder => {
|
||||
if (stakeholder) {
|
||||
this.stakeholder = HelperFunctions.copy(stakeholder);
|
||||
this.topicFb = null;
|
||||
this.title.setTitle(stakeholder.index_name);
|
||||
}
|
||||
}));
|
||||
});
|
||||
}
|
||||
|
||||
public ngOnDestroy() {
|
||||
this.subscriptions.forEach(value => {
|
||||
if (value instanceof Subscriber) {
|
||||
value.unsubscribe();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
public show(element) {
|
||||
UIkit.drop(element).show();
|
||||
}
|
||||
|
||||
public hide(element) {
|
||||
UIkit.drop(element).hide();
|
||||
}
|
||||
|
||||
get open(): boolean {
|
||||
return this.layoutService.open;
|
||||
}
|
||||
|
||||
public toggleOpen(event = null) {
|
||||
if (!event) {
|
||||
this.layoutService.setOpen(!this.open);
|
||||
} else if (event && event['value'] === true) {
|
||||
this.layoutService.setOpen(false);
|
||||
}
|
||||
}
|
||||
|
||||
private buildTopic(topic: Topic) {
|
||||
let topics = this.stakeholder.topics.filter(element => element._id !== topic._id);
|
||||
this.topicFb = this.fb.group({
|
||||
_id: this.fb.control(topic._id),
|
||||
name: this.fb.control(topic.name, Validators.required),
|
||||
description: this.fb.control(topic.description),
|
||||
alias: this.fb.control(topic.alias, [
|
||||
Validators.required,
|
||||
this.stakeholderUtils.aliasValidator(topics)
|
||||
]
|
||||
),
|
||||
isActive: this.fb.control(topic.isActive),
|
||||
isPublic: this.fb.control(topic.isPublic),
|
||||
isDefault: this.fb.control(topic.isDefault),
|
||||
categories: this.fb.control(topic.categories)
|
||||
});
|
||||
this.subscriptions.push(this.topicFb.get('name').valueChanges.subscribe(value => {
|
||||
let i = 1;
|
||||
value = this.stakeholderUtils.generateAlias(value);
|
||||
this.topicFb.controls['alias'].setValue(value);
|
||||
while (this.topicFb.get('alias').invalid) {
|
||||
this.topicFb.controls['alias'].setValue(value + i);
|
||||
i++;
|
||||
public subscriptions: any[] = [];
|
||||
public loading: boolean = true;
|
||||
public errorCodes: ErrorCodes;
|
||||
public stakeholder: Stakeholder;
|
||||
public analysisOpen: boolean = true;
|
||||
private errorMessages: ErrorMessagesComponent;
|
||||
public form: FormGroup;
|
||||
public stakeholderUtils: StakeholderUtils = new StakeholderUtils();
|
||||
public index: number = -1;
|
||||
properties: EnvProperties;
|
||||
|
||||
@ViewChild('deleteModal') deleteModal: AlertModal;
|
||||
@ViewChild('editModal') editModal: AlertModal;
|
||||
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
private router: Router,
|
||||
private title: Title,
|
||||
private layoutService: LayoutService,
|
||||
private fb: FormBuilder,
|
||||
private stakeholderService: StakeholderService) {
|
||||
this.errorCodes = new ErrorCodes();
|
||||
this.errorMessages = new ErrorMessagesComponent();
|
||||
}
|
||||
|
||||
public ngOnInit() {
|
||||
this.route.data
|
||||
.subscribe((data: { envSpecific: EnvProperties }) => {
|
||||
this.properties = data.envSpecific;
|
||||
this.subscriptions.push(this.stakeholderService.getStakeholderAsObservable().subscribe(stakeholder => {
|
||||
if (stakeholder) {
|
||||
this.stakeholder = HelperFunctions.copy(stakeholder);
|
||||
this.form = null;
|
||||
this.title.setTitle(stakeholder.index_name);
|
||||
}
|
||||
}));
|
||||
});
|
||||
}
|
||||
|
||||
public ngOnDestroy() {
|
||||
this.subscriptions.forEach(value => {
|
||||
if (value instanceof Subscriber) {
|
||||
value.unsubscribe();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
get open(): boolean {
|
||||
return this.layoutService.open;
|
||||
}
|
||||
|
||||
public toggleOpen(event = null) {
|
||||
if (!event) {
|
||||
this.layoutService.setOpen(!this.open);
|
||||
} else if (event && event['value'] === true) {
|
||||
this.layoutService.setOpen(false);
|
||||
}
|
||||
|
||||
public saveTopicOpen(element, index = -1) {
|
||||
if (element.className.indexOf('uk-open') !== -1) {
|
||||
this.hide(element);
|
||||
} else {
|
||||
if (index === -1) {
|
||||
this.buildTopic(new Topic(null, null, null, true, true, false));
|
||||
} else {
|
||||
this.buildTopic(this.stakeholder.topics[index]);
|
||||
}
|
||||
this.show(element);
|
||||
}
|
||||
}
|
||||
|
||||
private buildTopic(topic: Topic) {
|
||||
let topics = this.stakeholder.topics.filter(element => element._id !== topic._id);
|
||||
this.form = this.fb.group({
|
||||
_id: this.fb.control(topic._id),
|
||||
name: this.fb.control(topic.name, Validators.required),
|
||||
description: this.fb.control(topic.description),
|
||||
alias: this.fb.control(topic.alias, [
|
||||
Validators.required,
|
||||
this.stakeholderUtils.aliasValidator(topics)
|
||||
]
|
||||
),
|
||||
isActive: this.fb.control(topic.isActive),
|
||||
isPublic: this.fb.control(topic.isPublic),
|
||||
isDefault: this.fb.control(topic.isDefault),
|
||||
categories: this.fb.control(topic.categories)
|
||||
});
|
||||
this.subscriptions.push(this.form.get('name').valueChanges.subscribe(value => {
|
||||
let i = 1;
|
||||
value = this.stakeholderUtils.generateAlias(value);
|
||||
this.form.controls['alias'].setValue(value);
|
||||
while (this.form.get('alias').invalid) {
|
||||
this.form.controls['alias'].setValue(value + i);
|
||||
i++;
|
||||
}
|
||||
}));
|
||||
}
|
||||
|
||||
public editTopicOpen(index = -1) {
|
||||
this.index = index;
|
||||
if (index === -1) {
|
||||
this.buildTopic(new Topic(null, null, null, true, true, false));
|
||||
} else {
|
||||
this.buildTopic(this.stakeholder.topics[index]);
|
||||
}
|
||||
|
||||
public saveTopic(element, index = -1) {
|
||||
if (!this.topicFb.invalid) {
|
||||
if (index === -1) {
|
||||
this.save('Topic has been successfully created', element);
|
||||
} else {
|
||||
this.save('Topic has been successfully saved', element, index);
|
||||
}
|
||||
}
|
||||
this.editModal.cancelButtonText = 'Cancel';
|
||||
this.editModal.okButtonLeft = false;
|
||||
this.editModal.alertMessage = false;
|
||||
if (index === -1) {
|
||||
this.editModal.alertTitle = 'Create a new topic';
|
||||
this.editModal.okButtonText = 'Create';
|
||||
} else {
|
||||
this.editModal.alertTitle = 'Edit topic\'s information ';
|
||||
this.editModal.okButtonText = 'Save';
|
||||
}
|
||||
|
||||
public deleteTopicOpen(name: string, element, index: number) {
|
||||
this.element = element;
|
||||
this.index = index;
|
||||
this.deleteTopicModal.alertTitle = 'Delete ' + name;
|
||||
this.deleteTopicModal.cancelButtonText = 'No';
|
||||
this.deleteTopicModal.okButtonText = 'Yes';
|
||||
this.deleteTopicModal.message = 'This topic will permanently be deleted. Are you sure you want to proceed?';
|
||||
this.deleteTopicModal.open();
|
||||
}
|
||||
|
||||
private save(message: string, element, index: number = -1) {
|
||||
let path = [this.stakeholder._id];
|
||||
this.stakeholderService.saveElement(this.properties.monitorServiceAPIURL, this.topicFb.value, path).subscribe(topic => {
|
||||
if (index === -1) {
|
||||
this.stakeholder.topics.push(topic);
|
||||
} else {
|
||||
this.stakeholder.topics[index] = topic;
|
||||
}
|
||||
this.stakeholderService.setStakeholder(this.stakeholder);
|
||||
UIkit.notification(message, {
|
||||
status: 'success',
|
||||
timeout: 3000,
|
||||
pos: 'top-left'
|
||||
});
|
||||
this.hide(element);
|
||||
}, error => {
|
||||
UIkit.notification(error.error.message, {
|
||||
status: 'danger',
|
||||
timeout: 3000,
|
||||
pos: 'top-left'
|
||||
});
|
||||
this.hide(element);
|
||||
});
|
||||
}
|
||||
|
||||
deleteTopic() {
|
||||
let path = [
|
||||
this.stakeholder._id,
|
||||
this.stakeholder.topics[this.index]._id
|
||||
];
|
||||
this.stakeholderService.deleteElement(this.properties.monitorServiceAPIURL, path).subscribe(() => {
|
||||
this.stakeholder.topics.splice(this.index, 1);
|
||||
this.stakeholderService.setStakeholder(this.stakeholder);
|
||||
UIkit.notification('Topic has been successfully deleted', {
|
||||
status: 'success',
|
||||
timeout: 3000,
|
||||
pos: 'top-left'
|
||||
});
|
||||
this.hide(this.element);
|
||||
}, error => {
|
||||
UIkit.notification(error.error.message, {
|
||||
status: 'danger',
|
||||
timeout: 3000,
|
||||
pos: 'top-left'
|
||||
});
|
||||
this.hide(this.element);
|
||||
});
|
||||
this.editModal.open();
|
||||
}
|
||||
|
||||
public saveTopic(index = -1) {
|
||||
if (!this.form.invalid) {
|
||||
if (index === -1) {
|
||||
this.save('Topic has been successfully created');
|
||||
} else {
|
||||
this.save('Topic has been successfully saved', index);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public deleteTopicOpen(index: number) {
|
||||
this.index = index;
|
||||
this.deleteModal.alertTitle = 'Delete topic';
|
||||
this.deleteModal.cancelButtonText = 'No';
|
||||
this.deleteModal.okButtonText = 'Yes';
|
||||
this.deleteModal.open();
|
||||
}
|
||||
|
||||
private save(message: string, index: number = -1) {
|
||||
let path = [this.stakeholder._id];
|
||||
this.stakeholderService.saveElement(this.properties.monitorServiceAPIURL, this.form.value, path).subscribe(topic => {
|
||||
if (index === -1) {
|
||||
this.stakeholder.topics.push(topic);
|
||||
} else {
|
||||
this.stakeholder.topics[index] = topic;
|
||||
}
|
||||
this.stakeholderService.setStakeholder(this.stakeholder);
|
||||
UIkit.notification(message, {
|
||||
status: 'success',
|
||||
timeout: 3000,
|
||||
pos: 'top-left'
|
||||
});
|
||||
}, error => {
|
||||
UIkit.notification(error.error.message, {
|
||||
status: 'danger',
|
||||
timeout: 3000,
|
||||
pos: 'top-left'
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
deleteTopic() {
|
||||
let path = [
|
||||
this.stakeholder._id,
|
||||
this.stakeholder.topics[this.index]._id
|
||||
];
|
||||
this.stakeholderService.deleteElement(this.properties.monitorServiceAPIURL, path).subscribe(() => {
|
||||
this.stakeholder.topics.splice(this.index, 1);
|
||||
this.stakeholderService.setStakeholder(this.stakeholder);
|
||||
UIkit.notification('Topic has been successfully deleted', {
|
||||
status: 'success',
|
||||
timeout: 3000,
|
||||
pos: 'top-left'
|
||||
});
|
||||
}, error => {
|
||||
UIkit.notification(error.error.message, {
|
||||
status: 'danger',
|
||||
timeout: 3000,
|
||||
pos: 'top-left'
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -83,7 +83,7 @@
|
|||
<li><a (click)="toggleIndicatorAccess(indicator)">
|
||||
{{indicator.isPublic?'Unpublish':'Publish'}}</a>
|
||||
</li>
|
||||
<li class="uk-nav-divider"></li>
|
||||
<hr class="uk-nav-divider">
|
||||
<li><a (click)="deleteIndicatorOpen(indicator._id, 'number')">Delete</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -160,7 +160,7 @@
|
|||
<li><a (click)="toggleIndicatorAccess(indicator)">
|
||||
{{indicator.isPublic?'Unpublish':'Publish'}}</a>
|
||||
</li>
|
||||
<li class="uk-nav-divider"></li>
|
||||
<hr class="uk-nav-divider">
|
||||
<li><a (click)="deleteIndicatorOpen(indicator._id)">Delete</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -230,7 +230,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<modal-alert #editIndicatorModal
|
||||
<modal-alert #editModal
|
||||
[classBody]="'large-modal'"
|
||||
(alertOutput)="saveIndicator()"
|
||||
[okDisabled]="indicatorFb && (indicatorFb.invalid || indicatorFb.pristine)">
|
||||
|
|
@ -318,4 +318,8 @@
|
|||
</div>
|
||||
</div>
|
||||
</modal-alert>
|
||||
<modal-alert #deleteIndicatorModal (alertOutput)="deleteIndicator()"></modal-alert>
|
||||
<modal-alert #deleteModal (alertOutput)="deleteIndicator()">
|
||||
You are about to delete <span class="uk-text-bold" *ngIf="indicator && index !== -1">
|
||||
"{{indicator.name?indicator.name:indicator.indicatorPaths[0].parameters.title}}"</span> indicator permanently.
|
||||
Are you sure you want to proceed?
|
||||
</modal-alert>
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
|
|||
* Editable indicator
|
||||
*/
|
||||
public indicator: Indicator;
|
||||
public index: number;
|
||||
public index: number = -1;
|
||||
/**
|
||||
* Displayed chart and numbers base on Top filters
|
||||
*/
|
||||
|
|
@ -55,8 +55,8 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
|
|||
public grid: boolean = true;
|
||||
private subscriptions: any[] = [];
|
||||
private urlSubscriptions: any[] = [];
|
||||
@ViewChild('editIndicatorModal') editIndicatorModal: AlertModal;
|
||||
@ViewChild('deleteIndicatorModal') deleteIndicatorModal: AlertModal;
|
||||
@ViewChild('editModal') editModal: AlertModal;
|
||||
@ViewChild('deleteModal') deleteModal: AlertModal;
|
||||
|
||||
constructor(private layoutService: LayoutService,
|
||||
private stakeholderService: StakeholderService,
|
||||
|
|
@ -320,6 +320,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
|
|||
}
|
||||
});
|
||||
this.index = (id) ? this.charts.findIndex(value => value._id === id) : -1;
|
||||
console.log(this.index);
|
||||
if (this.index !== -1) {
|
||||
this.indicator = HelperFunctions.copy(this.charts[this.index]);
|
||||
this.indicatorFb = this.fb.group({
|
||||
|
|
@ -348,16 +349,17 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
|
|||
});
|
||||
this.addIndicatorPath();
|
||||
}
|
||||
this.editIndicatorModal.cancelButtonText = 'Cancel';
|
||||
this.editIndicatorModal.okButtonLeft = false;
|
||||
this.editIndicatorModal.alertMessage = false;
|
||||
this.editModal.cancelButtonText = 'Cancel';
|
||||
this.editModal.okButtonLeft = false;
|
||||
this.editModal.alertMessage = false;
|
||||
if (this.index === -1) {
|
||||
this.editIndicatorModal.alertTitle = 'Create a new chart Indicator';
|
||||
this.editIndicatorModal.okButtonText = 'Save';
|
||||
this.editModal.alertTitle = 'Create a new chart indicator';
|
||||
this.editModal.okButtonText = 'Save';
|
||||
} else {
|
||||
this.editIndicatorModal.okButtonText = 'Save Changes';
|
||||
this.editModal.alertTitle = 'Edit chart indicator\'s information';
|
||||
this.editModal.okButtonText = 'Save Changes';
|
||||
}
|
||||
this.editIndicatorModal.open();
|
||||
this.editModal.open();
|
||||
}
|
||||
|
||||
saveIndicator() {
|
||||
|
|
@ -428,11 +430,10 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
|
|||
} else {
|
||||
this.indicator = this.numbers.find(value => value._id == id);
|
||||
}
|
||||
this.deleteIndicatorModal.alertTitle = 'Delete ' + this.indicator.name;
|
||||
this.deleteIndicatorModal.cancelButtonText = 'No';
|
||||
this.deleteIndicatorModal.okButtonText = 'Yes';
|
||||
this.deleteIndicatorModal.message = 'This indicator will permanently be deleted. Are you sure you want to proceed?';
|
||||
this.deleteIndicatorModal.open();
|
||||
this.deleteModal.alertTitle = 'Delete indicator';
|
||||
this.deleteModal.cancelButtonText = 'No';
|
||||
this.deleteModal.okButtonText = 'Yes';
|
||||
this.deleteModal.open();
|
||||
}
|
||||
|
||||
deleteIndicator() {
|
||||
|
|
|
|||
|
|
@ -14,294 +14,101 @@
|
|||
<div class="menu_title uk-width-expand">
|
||||
{{stakeholder.topics[topicIndex].name.toUpperCase()}}
|
||||
</div>
|
||||
<span class="uk-width-1-6 onHover"
|
||||
(click)="$event.stopPropagation();editTopicOpen(editTopic);$event.preventDefault()">
|
||||
<i class="material-icons md-color-white">more_horiz</i>
|
||||
</span>
|
||||
</a>
|
||||
<div uk-drop="mode: none; offset: -2; delay-hide: 0;" #editTopic
|
||||
class="uk-padding-large uk-padding-remove-vertical uk-padding-remove-right uk-drop">
|
||||
<div *ngIf="topicFb">
|
||||
<div class="md-card">
|
||||
<div class="md-card-content uk-position-relative">
|
||||
<a class="uk-position-top-right">
|
||||
<i (click)="hide(editTopic)" class="material-icons">close</i>
|
||||
</a>
|
||||
<div class="uk-grid-small" uk-grid [formGroup]="topicFb">
|
||||
<div class="uk-width-1-1">
|
||||
<label class="uk-text-bold">Topic Settings</label>
|
||||
<input class="uk-input uk-form-small" formControlName="name"
|
||||
[class.uk-form-danger]="topicFb.get('name').dirty && topicFb.get('name').invalid"
|
||||
type="text">
|
||||
</div>
|
||||
<div class="uk-width-1-1">
|
||||
<label>Description</label>
|
||||
<textarea class="uk-textarea" formControlName="description"
|
||||
rows="3" type="text"></textarea>
|
||||
</div>
|
||||
<div dashboard-input [type]="'select'"
|
||||
[formInput]="topicFb.get('isPublic')" [options]="indicatorUtils.isPublic"
|
||||
label="Privacy" class="uk-width-1-2">
|
||||
</div>
|
||||
<div dashboard-input [type]="'select'"
|
||||
[formInput]="topicFb.get('isActive')" [options]="indicatorUtils.isActive"
|
||||
label="Status" class="uk-width-1-2">
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="uk-grid-small uk-child-width-1-2" uk-grid>
|
||||
<div>
|
||||
<button class="md-btn md-btn-small"
|
||||
(click)="deleteTopicOpen(topicFb.value.name, editTopic)">Delete</button>
|
||||
</div>
|
||||
<div>
|
||||
<button class="md-btn md-btn-small md-btn-primary uk-float-right"
|
||||
[class.md-btn-primary]="topicFb.valid && topicFb.dirty"
|
||||
[class.disabled]="topicFb.invalid || !topicFb.dirty"
|
||||
(click)="saveTopic(editTopic)">Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-width-1-6"
|
||||
(click)="$event.stopPropagation();$event.preventDefault()">
|
||||
<i class="material-icons onHover md-color-white">more_vert</i>
|
||||
<div uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"
|
||||
class="uk-padding-remove-horizontal">
|
||||
<ul class="uk-nav uk-dropdown-nav">
|
||||
<li><a (click)="editTopicOpen()">Edit</a></li>
|
||||
<!--<li><a (click)="toggleIndicatorStatus(indicator)">
|
||||
{{indicator.isActive ? 'Deactivate' : 'Activate'}}</a>
|
||||
</li>
|
||||
<li><a (click)="toggleIndicatorAccess(indicator)">
|
||||
{{indicator.isPublic?'Unpublish':'Publish'}}</a>
|
||||
</li>-->
|
||||
<hr class="uk-nav-divider">
|
||||
<li><a (click)="deleteTopicOpen()">Delete</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<ng-template ngFor [ngForOf]="stakeholder.topics[topicIndex].categories" let-category let-i="index">
|
||||
<li [class.current_section]="categoryIndex === i"
|
||||
[class.act_section]="selectedCategoryIndex === i && toggle"
|
||||
[title]="category.name"
|
||||
class="submenu_trigger">
|
||||
<a href="#" (click)="toggleCategory(i);hide(editCategory);$event.preventDefault()">
|
||||
<a href="#" (click)="toggleCategory(i);$event.preventDefault()">
|
||||
<span *ngIf="category.icon" class="menu_icon"><i
|
||||
class="material-icons">{{category.icon}}</i></span>
|
||||
class="material-icons">{{category.icon}}</i></span>
|
||||
<div class="menu_title uk-width-expand">
|
||||
{{category.name}}
|
||||
</div>
|
||||
<span class="uk-width-1-6 onHover"
|
||||
(click)="$event.stopPropagation();editCategoryOpen(editCategory, i);$event.preventDefault()">
|
||||
<i class="material-icons">more_horiz</i>
|
||||
</span>
|
||||
</a>
|
||||
<div uk-drop="mode: none; offset: -2; delay-hide: 0;" #editCategory
|
||||
class="uk-padding-large uk-padding-remove-vertical uk-padding-remove-right uk-drop">
|
||||
<div *ngIf="categoryFb">
|
||||
<div class="md-card">
|
||||
<div class="md-card-content uk-position-relative">
|
||||
<a class="uk-position-top-right">
|
||||
<i (click)="hide(editCategory)" class="material-icons">close</i>
|
||||
</a>
|
||||
<div class="uk-grid-small" uk-grid [formGroup]="categoryFb">
|
||||
<div class="uk-width-1-1">
|
||||
<label class="uk-text-bold">Category Settings</label>
|
||||
<input class="uk-input uk-form-small" formControlName="name"
|
||||
[class.uk-form-danger]="categoryFb.get('name').dirty && categoryFb.get('name').invalid"
|
||||
type="text">
|
||||
</div>
|
||||
<div class="uk-width-1-1">
|
||||
<label>Description</label>
|
||||
<textarea class="uk-textarea" formControlName="description"
|
||||
rows="3" type="text"></textarea>
|
||||
</div>
|
||||
<div dashboard-input [type]="'select'"
|
||||
[formInput]="categoryFb.get('isPublic')" [options]="indicatorUtils.isPublic"
|
||||
label="Privacy" class="uk-width-1-2">
|
||||
</div>
|
||||
<div dashboard-input [type]="'select'"
|
||||
[formInput]="categoryFb.get('isActive')" [options]="indicatorUtils.isActive"
|
||||
label="Status" class="uk-width-1-2">
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="uk-grid-small uk-child-width-1-2" uk-grid>
|
||||
<div>
|
||||
<button class="md-btn md-btn-small"
|
||||
(click)="deleteCategoryOpen(categoryFb.value.name, editCategory, i)">Delete
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<button class="md-btn md-btn-small md-btn-primary uk-float-right"
|
||||
[class.md-btn-primary]="categoryFb.valid && categoryFb.dirty"
|
||||
[class.disabled]="categoryFb.invalid || !categoryFb.dirty"
|
||||
(click)="saveCategory(editCategory, i)">Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-width-1-6"
|
||||
(click)="$event.stopPropagation();$event.preventDefault()">
|
||||
<i class="material-icons onHover">more_vert</i>
|
||||
<div uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"
|
||||
class="uk-padding-remove-horizontal">
|
||||
<ul class="uk-nav uk-dropdown-nav">
|
||||
<li><a (click)="editCategoryOpen(i)">Edit</a></li>
|
||||
<!--<li><a (click)="toggleIndicatorStatus(indicator)">
|
||||
{{indicator.isActive ? 'Deactivate' : 'Activate'}}</a>
|
||||
</li>
|
||||
<li><a (click)="toggleIndicatorAccess(indicator)">
|
||||
{{indicator.isPublic?'Unpublish':'Publish'}}</a>
|
||||
</li>-->
|
||||
<hr class="uk-nav-divider">
|
||||
<li><a (click)="deleteCategoryOpen(i)">Delete</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<ul [style.display]="((selectedCategoryIndex === i && toggle)?'block':'none')">
|
||||
<ng-template ngFor [ngForOf]="stakeholder.topics[topicIndex].categories[i].subCategories"
|
||||
let-subcategory let-j="index">
|
||||
<li [class.act_item]="categoryIndex === i && subCategoryIndex === j">
|
||||
<a href="#" (click)="chooseSubcategory(i, j);$event.preventDefault()">
|
||||
<span *ngIf="subcategory.icon" class="menu_icon uk-margin-small-right"><i
|
||||
class="material-icons">{{subcategory.icon}}</i></span>
|
||||
class="material-icons">{{subcategory.icon}}</i></span>
|
||||
<div class="menu_title uk-width-expand">
|
||||
{{subcategory.name}}
|
||||
</div>
|
||||
<span class="uk-width-1-6 onHover"
|
||||
(click)="$event.stopPropagation();editSubCategoryOpen(editSubCategory, j);$event.preventDefault()">
|
||||
<i class="material-icons">more_horiz</i>
|
||||
</span>
|
||||
</a>
|
||||
<div uk-drop="mode: none; offset: -2; delay-hide: 0" #editSubCategory
|
||||
class="uk-padding-large uk-padding-remove-vertical uk-padding-remove-right uk-drop">
|
||||
<div *ngIf="subcategoryFb">
|
||||
<div class="md-card">
|
||||
<div class="md-card-content uk-position-relative">
|
||||
<a class="uk-position-top-right">
|
||||
<i (click)="hide(editSubCategory)" class="material-icons">close</i>
|
||||
</a>
|
||||
<div class="uk-grid-small" uk-grid [formGroup]="subcategoryFb">
|
||||
<div class="uk-width-1-1">
|
||||
<label class="uk-text-bold">Subcategory Settings</label>
|
||||
<input class="uk-input uk-form-small" formControlName="name"
|
||||
[class.uk-form-danger]="subcategoryFb.get('name').dirty && subcategoryFb.get('name').invalid"
|
||||
type="text">
|
||||
</div>
|
||||
<div class="uk-width-1-1">
|
||||
<label>Description</label>
|
||||
<textarea class="uk-textarea" formControlName="description"
|
||||
rows="3" type="text"></textarea>
|
||||
</div>
|
||||
<div dashboard-input [type]="'select'"
|
||||
[formInput]="subcategoryFb.get('isPublic')" [options]="indicatorUtils.isPublic"
|
||||
label="Privacy" class="uk-width-1-2">
|
||||
</div>
|
||||
<div dashboard-input [type]="'select'"
|
||||
[formInput]="subcategoryFb.get('isActive')" [options]="indicatorUtils.isActive"
|
||||
label="Status" class="uk-width-1-2">
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="uk-grid-small uk-child-width-1-2" uk-grid>
|
||||
<div>
|
||||
<button class="md-btn md-btn-small"
|
||||
(click)="deleteSubcategoryOpen(subcategoryFb.value.name, editSubCategory, j)">Delete
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<button class="md-btn md-btn-small md-btn-primary uk-float-right"
|
||||
[class.md-btn-primary]="subcategoryFb.valid && subcategoryFb.dirty"
|
||||
[class.disabled]="subcategoryFb.invalid || !subcategoryFb.dirty"
|
||||
(click)="saveSubCategory(editSubCategory, j)">Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-width-1-6"
|
||||
(click)="$event.stopPropagation();$event.preventDefault()">
|
||||
<i class="material-icons onHover">more_vert</i>
|
||||
<div uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"
|
||||
class="uk-padding-remove-horizontal">
|
||||
<ul class="uk-nav uk-dropdown-nav">
|
||||
<li><a (click)="editSubCategoryOpen(j)">Edit</a></li>
|
||||
<!--<li><a (click)="toggleIndicatorStatus(indicator)">
|
||||
{{indicator.isActive ? 'Deactivate' : 'Activate'}}</a>
|
||||
</li>
|
||||
<li><a (click)="toggleIndicatorAccess(indicator)">
|
||||
{{indicator.isPublic?'Unpublish':'Publish'}}</a>
|
||||
</li>-->
|
||||
<hr class="uk-nav-divider">
|
||||
<li><a (click)="deleteSubcategoryOpen(j)">Delete</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ng-template>
|
||||
<li>
|
||||
<a href="#" (click)="editSubCategoryOpen(newSubCategory);$event.preventDefault()">
|
||||
<a href="#" (click)="editSubCategoryOpen();$event.preventDefault()">
|
||||
<span class="menu_icon"><i class="material-icons">add</i></span>
|
||||
<span class="menu_title">Create new Subcategory</span>
|
||||
</a>
|
||||
<div uk-drop="mode: none; offset: -2; delay-hide: 0" #newSubCategory
|
||||
class="uk-padding-large uk-padding-remove-vertical uk-padding-remove-right uk-drop">
|
||||
<div *ngIf="subcategoryFb">
|
||||
<div class="md-card">
|
||||
<div class="md-card-content uk-position-relative">
|
||||
<a class="uk-position-top-right">
|
||||
<i (click)="hide(newSubCategory)" class="material-icons">close</i>
|
||||
</a>
|
||||
<div class="uk-grid-small" uk-grid [formGroup]="subcategoryFb">
|
||||
<div class="uk-width-1-1">
|
||||
<label class="uk-text-bold">New Subcategory</label>
|
||||
<input class="uk-input uk-form-small" formControlName="name"
|
||||
[class.uk-form-danger]="subcategoryFb.get('name').dirty && subcategoryFb.get('name').invalid"
|
||||
type="text">
|
||||
</div>
|
||||
<div class="uk-width-1-1">
|
||||
<label>Description</label>
|
||||
<textarea class="uk-textarea" formControlName="description"
|
||||
rows="3" type="text"></textarea>
|
||||
</div>
|
||||
<div dashboard-input [type]="'select'"
|
||||
[formInput]="subcategoryFb.get('isPublic')" [options]="indicatorUtils.isPublic"
|
||||
label="Privacy" class="uk-width-1-2">
|
||||
</div>
|
||||
<div dashboard-input [type]="'select'"
|
||||
[formInput]="subcategoryFb.get('isActive')" [options]="indicatorUtils.isActive"
|
||||
label="Status" class="uk-width-1-2">
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="uk-grid-small uk-child-width-1-2" uk-grid>
|
||||
<div>
|
||||
<button class="md-btn md-btn-small" (click)="hide(newSubCategory)">Cancel</button>
|
||||
</div>
|
||||
<div>
|
||||
<button class="md-btn md-btn-small md-btn-primary uk-float-right"
|
||||
[class.md-btn-primary]="subcategoryFb.valid && subcategoryFb.dirty"
|
||||
[class.disabled]="subcategoryFb.invalid || !subcategoryFb.dirty"
|
||||
(click)="saveSubCategory(newSubCategory)">Create
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ng-template>
|
||||
<li>
|
||||
<a href="#" (click)="editCategoryOpen(newCategory);$event.preventDefault()">
|
||||
<a href="#" (click)="editCategoryOpen();$event.preventDefault()">
|
||||
<span class="menu_icon"><i class="material-icons">add</i></span>
|
||||
<span class="menu_title">Create new Category</span>
|
||||
</a>
|
||||
<div uk-drop="mode: none; offset: -2; delay-hide: 0" #newCategory
|
||||
class="uk-padding-large uk-padding-remove-vertical uk-padding-remove-right uk-drop">
|
||||
<div *ngIf="categoryFb">
|
||||
<div class="md-card">
|
||||
<div class="md-card-content uk-position-relative">
|
||||
<a class="uk-position-top-right">
|
||||
<i (click)="hide(newCategory)" class="material-icons">close</i>
|
||||
</a>
|
||||
<div class="uk-grid-small" uk-grid [formGroup]="categoryFb">
|
||||
<div class="uk-width-1-1">
|
||||
<label class="uk-text-bold">New Category</label>
|
||||
<input class="uk-input uk-form-small" formControlName="name"
|
||||
[class.uk-form-danger]="categoryFb.get('name').dirty && categoryFb.get('name').invalid"
|
||||
type="text">
|
||||
</div>
|
||||
<div class="uk-width-1-1">
|
||||
<label>Description</label>
|
||||
<textarea class="uk-textarea" formControlName="description"
|
||||
rows="3" type="text"></textarea>
|
||||
</div>
|
||||
<div dashboard-input [type]="'select'"
|
||||
[formInput]="categoryFb.get('isPublic')" [options]="indicatorUtils.isPublic"
|
||||
label="Privacy" class="uk-width-1-2">
|
||||
</div>
|
||||
<div dashboard-input [type]="'select'"
|
||||
[formInput]="categoryFb.get('isActive')" [options]="indicatorUtils.isActive"
|
||||
label="Status" class="uk-width-1-2">
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="uk-grid-small uk-child-width-1-2" uk-grid>
|
||||
<div>
|
||||
<button class="md-btn md-btn-small" (click)="hide(newCategory)">Cancel</button>
|
||||
</div>
|
||||
<div>
|
||||
<button class="md-btn md-btn-small md-btn-primary uk-float-right"
|
||||
[class.md-btn-primary]="categoryFb.valid && categoryFb.dirty"
|
||||
[class.disabled]="categoryFb.invalid || !categoryFb.dirty"
|
||||
(click)="saveCategory(newCategory)">Create
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -311,7 +118,24 @@
|
|||
[topicIndex]="topicIndex"
|
||||
[categoryIndex]="categoryIndex"
|
||||
[subcategoryIndex]="subCategoryIndex"></indicators>
|
||||
<modal-alert #deleteTopicModal (alertOutput)="deleteTopic()"></modal-alert>
|
||||
<modal-alert #deleteCategoryModal (alertOutput)="deleteCategory()"></modal-alert>
|
||||
<modal-alert #deleteSubcategoryModal (alertOutput)="deleteSubcategory()"></modal-alert>
|
||||
<modal-alert #deleteModal (alertOutput)="deleteElement()">
|
||||
You are about to delete <span class="uk-text-bold" *ngIf="element">"{{element.name}}"</span> {{type}} permanently.
|
||||
Are you sure you want to proceed?
|
||||
</modal-alert>
|
||||
<modal-alert #editModal (alertOutput)="saveElement()">
|
||||
<div *ngIf="form" class="uk-padding-small" [formGroup]="form">
|
||||
<div dashboard-input class="uk-form-row" [formInput]="form.get('name')" label="Title"></div>
|
||||
<div dashboard-input class="uk-form-row" [formInput]="form.get('description')"
|
||||
label="Description" type="textarea">
|
||||
</div>
|
||||
<div class="uk-form-row uk-flex uk-flex-middle">
|
||||
<div dashboard-input class="uk-width-small" [formInput]="form.get('isPublic')"
|
||||
label="Accessibility" [options]="stakeholderUtils.isPublic" type="select">
|
||||
</div>
|
||||
<div dashboard-input class="uk-margin-small-left uk-width-small" [formInput]="form.get('isActive')"
|
||||
label="Visibility" [options]="stakeholderUtils.isActive" type="select">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</modal-alert>
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class";
|
|||
import {AlertModal} from "../openaireLibrary/utils/modal/alert";
|
||||
import {Subscriber, Subscription} from "rxjs";
|
||||
import {FormBuilder, FormGroup, Validators} from "@angular/forms";
|
||||
import {IndicatorUtils, StakeholderUtils} from "../utils/indicator-utils";
|
||||
import {StakeholderUtils} from "../utils/indicator-utils";
|
||||
|
||||
declare var UIkit;
|
||||
|
||||
|
|
@ -19,7 +19,6 @@ declare var UIkit;
|
|||
export class TopicComponent implements OnInit, OnDestroy {
|
||||
public subscriptions: any[] = [];
|
||||
public properties: EnvProperties;
|
||||
public indicatorUtils: IndicatorUtils = new IndicatorUtils();
|
||||
public stakeholderUtils: StakeholderUtils = new StakeholderUtils();
|
||||
public loading: boolean = true;
|
||||
public stakeholder: Stakeholder;
|
||||
|
|
@ -27,32 +26,29 @@ export class TopicComponent implements OnInit, OnDestroy {
|
|||
* Current topic
|
||||
**/
|
||||
public topicIndex: number = 0;
|
||||
public topicFb: FormGroup;
|
||||
|
||||
/**
|
||||
* categoryIndex: Current category to be edited, selectedCategoryIndex: selected on menu(opened)
|
||||
*/
|
||||
public categoryIndex: number = 0;
|
||||
public selectedCategoryIndex: number = 0;
|
||||
public categoryFb: FormGroup;
|
||||
/**
|
||||
* Current Subcategory to be edited
|
||||
*/
|
||||
public subCategoryIndex: number = 0;
|
||||
public subcategoryFb: FormGroup;
|
||||
/**
|
||||
* Current drop element and index of topic, category or subcategory to be deleted.
|
||||
* Current element and index of topic, category or subcategory to be deleted.
|
||||
*/
|
||||
public element: any;
|
||||
public index: number;
|
||||
public form: FormGroup;
|
||||
public element: Topic | Category | SubCategory;
|
||||
public type: 'topic' | 'category' | 'subcategory' = "topic";
|
||||
public index: number = -1;
|
||||
/**
|
||||
* Check form validity
|
||||
*/
|
||||
public toggle: boolean = false;
|
||||
|
||||
@ViewChild('deleteTopicModal') deleteTopicModal: AlertModal;
|
||||
@ViewChild('deleteCategoryModal') deleteCategoryModal: AlertModal;
|
||||
@ViewChild('deleteSubcategoryModal') deleteSubcategoryModal: AlertModal;
|
||||
@ViewChild('deleteModal') deleteModal: AlertModal;
|
||||
@ViewChild('editModal') editModal: AlertModal;
|
||||
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
|
|
@ -95,18 +91,30 @@ export class TopicComponent implements OnInit, OnDestroy {
|
|||
}
|
||||
});
|
||||
}
|
||||
|
||||
public hide(element) {
|
||||
UIkit.drop(element).hide();
|
||||
|
||||
public saveElement() {
|
||||
if(this.type === "topic") {
|
||||
this.saveTopic();
|
||||
} else if(this.type === "category") {
|
||||
this.saveCategory();
|
||||
} else {
|
||||
this.saveSubCategory();
|
||||
}
|
||||
}
|
||||
|
||||
public show(element) {
|
||||
UIkit.drop(element).show();
|
||||
|
||||
public deleteElement() {
|
||||
if(this.type === "topic") {
|
||||
this.deleteTopic();
|
||||
} else if(this.type === "category") {
|
||||
this.deleteCategory();
|
||||
} else {
|
||||
this.deleteSubcategory();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
private buildTopic(topic: Topic) {
|
||||
let topics = this.stakeholder.topics.filter(element => element._id !== topic._id);
|
||||
this.topicFb = this.fb.group({
|
||||
this.form = this.fb.group({
|
||||
_id: this.fb.control(topic._id),
|
||||
name: this.fb.control(topic.name, Validators.required),
|
||||
description: this.fb.control(topic.description),
|
||||
|
|
@ -120,48 +128,49 @@ export class TopicComponent implements OnInit, OnDestroy {
|
|||
isDefault: this.fb.control(topic.isDefault),
|
||||
categories: this.fb.control(topic.categories)
|
||||
});
|
||||
this.subscriptions.push(this.topicFb.get('name').valueChanges.subscribe(value => {
|
||||
this.subscriptions.push(this.form.get('name').valueChanges.subscribe(value => {
|
||||
let i = 1;
|
||||
value = this.stakeholderUtils.generateAlias(value);
|
||||
this.topicFb.controls['alias'].setValue(value);
|
||||
while (this.topicFb.get('alias').invalid) {
|
||||
this.topicFb.controls['alias'].setValue(value + i);
|
||||
this.form.controls['alias'].setValue(value);
|
||||
while (this.form.get('alias').invalid) {
|
||||
this.form.controls['alias'].setValue(value + i);
|
||||
i++;
|
||||
}
|
||||
}));
|
||||
}
|
||||
|
||||
public editTopicOpen(element) {
|
||||
if (element.className.indexOf('uk-open') !== -1) {
|
||||
this.hide(element);
|
||||
} else {
|
||||
this.buildTopic(this.stakeholder.topics[this.topicIndex]);
|
||||
this.show(element);
|
||||
}
|
||||
public editTopicOpen() {
|
||||
this.index = this.topicIndex;
|
||||
this.type = 'topic';
|
||||
this.buildTopic(this.stakeholder.topics[this.index]);
|
||||
this.editOpen();
|
||||
}
|
||||
|
||||
public saveTopic(element) {
|
||||
if (!this.topicFb.invalid) {
|
||||
public saveTopic() {
|
||||
if (!this.form.invalid) {
|
||||
let path = [this.stakeholder._id];
|
||||
let callback = (topic: Topic): void => {
|
||||
this.stakeholder.topics[this.topicIndex] = topic;
|
||||
this.stakeholder.topics[this.index] = topic;
|
||||
this.stakeholderService.setStakeholder(this.stakeholder);
|
||||
};
|
||||
this.save('Topic has been successfully saved', element, path, this.topicFb.value, callback, true);
|
||||
this.save('Topic has been successfully saved', path, this.form.value, callback, true);
|
||||
}
|
||||
}
|
||||
|
||||
public deleteTopicOpen(name: string, element) {
|
||||
this.deleteOpen(name, 'topic', this.deleteTopicModal, element, this.topicIndex);
|
||||
public deleteTopicOpen() {
|
||||
this.type = 'topic';
|
||||
this.index = this.topicIndex;
|
||||
this.element = this.stakeholder.topics[this.index];
|
||||
this.deleteOpen();
|
||||
}
|
||||
|
||||
public deleteTopic() {
|
||||
let path: string[] = [
|
||||
this.stakeholder._id,
|
||||
this.stakeholder.topics[this.topicIndex]._id
|
||||
this.stakeholder.topics[this.index]._id
|
||||
];
|
||||
let callback = (): void => {
|
||||
this.stakeholder.topics.splice(this.topicIndex, 1);
|
||||
this.stakeholder.topics.splice(this.index, 1);
|
||||
this.stakeholderService.setStakeholder(this.stakeholder);
|
||||
};
|
||||
this.delete('Topic has been successfully be deleted', path, callback, true);
|
||||
|
|
@ -178,7 +187,7 @@ export class TopicComponent implements OnInit, OnDestroy {
|
|||
|
||||
private buildCategory(category: Category) {
|
||||
let categories = this.stakeholder.topics[this.topicIndex].categories.filter(element => element._id !== category._id);
|
||||
this.categoryFb = this.fb.group({
|
||||
this.form = this.fb.group({
|
||||
_id: this.fb.control(category._id),
|
||||
name: this.fb.control(category.name, Validators.required),
|
||||
description: this.fb.control(category.description),
|
||||
|
|
@ -192,51 +201,52 @@ export class TopicComponent implements OnInit, OnDestroy {
|
|||
isDefault: this.fb.control(category.isDefault),
|
||||
subCategories: this.fb.control(category.subCategories)
|
||||
});
|
||||
this.subscriptions.push(this.categoryFb.get('name').valueChanges.subscribe(value => {
|
||||
this.subscriptions.push(this.form.get('name').valueChanges.subscribe(value => {
|
||||
let i = 1;
|
||||
value = this.stakeholderUtils.generateAlias(value);
|
||||
this.categoryFb.controls['alias'].setValue(value);
|
||||
while (this.categoryFb.get('alias').invalid) {
|
||||
this.categoryFb.controls['alias'].setValue(value + i);
|
||||
this.form.controls['alias'].setValue(value);
|
||||
while (this.form.get('alias').invalid) {
|
||||
this.form.controls['alias'].setValue(value + i);
|
||||
i++;
|
||||
}
|
||||
}));
|
||||
}
|
||||
|
||||
public editCategoryOpen(element, index: number = -1) {
|
||||
if (element.className.indexOf('uk-open') !== -1) {
|
||||
this.hide(element);
|
||||
public editCategoryOpen(index: number = -1) {
|
||||
this.index = index;
|
||||
this.type = 'category';
|
||||
if (index === -1) {
|
||||
this.buildCategory(new Category(null, null, null, true, true));
|
||||
} else {
|
||||
if (index === -1) {
|
||||
this.buildCategory(new Category(null, null, null, true, true));
|
||||
} else {
|
||||
this.buildCategory(this.stakeholder.topics[this.topicIndex].categories[index]);
|
||||
}
|
||||
this.show(element);
|
||||
this.buildCategory(this.stakeholder.topics[this.topicIndex].categories[index]);
|
||||
}
|
||||
this.editOpen();
|
||||
}
|
||||
|
||||
public saveCategory(element, index = -1) {
|
||||
if (!this.categoryFb.invalid) {
|
||||
public saveCategory() {
|
||||
if (!this.form.invalid) {
|
||||
let path = [this.stakeholder._id, this.stakeholder.topics[this.topicIndex]._id];
|
||||
let callback = (category: Category): void => {
|
||||
if (index === -1) {
|
||||
if (this.index === -1) {
|
||||
this.stakeholder.topics[this.topicIndex].categories.push(category);
|
||||
} else {
|
||||
this.stakeholder.topics[this.topicIndex].categories[index] = HelperFunctions.copy(category);
|
||||
this.stakeholder.topics[this.topicIndex].categories[this.index] = HelperFunctions.copy(category);
|
||||
}
|
||||
this.stakeholderService.setStakeholder(this.stakeholder);
|
||||
};
|
||||
if (index === -1) {
|
||||
this.save('Category has been successfully created', element, path, this.categoryFb.value, callback);
|
||||
if (this.index === -1) {
|
||||
this.save('Category has been successfully created', path, this.form.value, callback);
|
||||
} else {
|
||||
this.save('Category has been successfully saved', element, path, this.categoryFb.value, callback);
|
||||
this.save('Category has been successfully saved', path, this.form.value, callback);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public deleteCategoryOpen(name: string, element, index) {
|
||||
this.deleteOpen(name, 'category', this.deleteCategoryModal, element, index);
|
||||
public deleteCategoryOpen(index: number) {
|
||||
this.type = 'category';
|
||||
this.index = index;
|
||||
this.element = this.stakeholder.topics[this.topicIndex].categories[this.index];
|
||||
this.deleteOpen();
|
||||
}
|
||||
|
||||
public deleteCategory() {
|
||||
|
|
@ -254,7 +264,7 @@ export class TopicComponent implements OnInit, OnDestroy {
|
|||
|
||||
private buildSubcategory(subCategory: SubCategory) {
|
||||
let subCategories = this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex].subCategories.filter(element => element._id !== subCategory._id);
|
||||
this.subcategoryFb = this.fb.group({
|
||||
this.form = this.fb.group({
|
||||
_id: this.fb.control(subCategory._id),
|
||||
name: this.fb.control(subCategory.name, Validators.required),
|
||||
description: this.fb.control(subCategory.description),
|
||||
|
|
@ -269,56 +279,56 @@ export class TopicComponent implements OnInit, OnDestroy {
|
|||
charts: this.fb.control(subCategory.charts),
|
||||
numbers: this.fb.control(subCategory.numbers)
|
||||
});
|
||||
this.subscriptions.push(this.subcategoryFb.get('name').valueChanges.subscribe(value => {
|
||||
this.subscriptions.push(this.form.get('name').valueChanges.subscribe(value => {
|
||||
let i = 1;
|
||||
value = this.stakeholderUtils.generateAlias(value);
|
||||
this.subcategoryFb.controls['alias'].setValue(value);
|
||||
while (this.subcategoryFb.get('alias').invalid) {
|
||||
this.subcategoryFb.controls['alias'].setValue(value + i);
|
||||
this.form.controls['alias'].setValue(value);
|
||||
while (this.form.get('alias').invalid) {
|
||||
this.form.controls['alias'].setValue(value + i);
|
||||
i++;
|
||||
}
|
||||
}));
|
||||
}
|
||||
|
||||
public editSubCategoryOpen(element, index: number = -1) {
|
||||
if (element.className.indexOf('uk-open') !== -1) {
|
||||
this.hide(element);
|
||||
public editSubCategoryOpen(index: number = -1) {
|
||||
this.index = index;
|
||||
this.type = 'subcategory';
|
||||
if (index === -1) {
|
||||
this.buildSubcategory(new SubCategory(null, null, null, true, true));
|
||||
} else {
|
||||
if (index === -1) {
|
||||
this.buildSubcategory(new SubCategory(null, null, null, true, true));
|
||||
} else {
|
||||
this.buildSubcategory(this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex].subCategories[index]);
|
||||
}
|
||||
this.show(element);
|
||||
this.buildSubcategory(this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex].subCategories[index]);
|
||||
}
|
||||
this.editOpen();
|
||||
}
|
||||
|
||||
public saveSubCategory(element, index = -1) {
|
||||
if (!this.subcategoryFb.invalid) {
|
||||
public saveSubCategory() {
|
||||
if (!this.form.invalid) {
|
||||
let path: string[] = [
|
||||
this.stakeholder._id,
|
||||
this.stakeholder.topics[this.topicIndex]._id,
|
||||
this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex]._id,
|
||||
];
|
||||
let callback = (subCategory: SubCategory): void => {
|
||||
if (index === -1) {
|
||||
if (this.index === -1) {
|
||||
this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex].subCategories.push(subCategory);
|
||||
} else {
|
||||
this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex].subCategories[index] = subCategory;
|
||||
this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex].subCategories[this.index] = subCategory;
|
||||
}
|
||||
this.stakeholderService.setStakeholder(this.stakeholder);
|
||||
};
|
||||
if (index === -1) {
|
||||
this.save('Subcategory has been successfully created', element, path, this.subcategoryFb.value, callback);
|
||||
if (this.index === -1) {
|
||||
this.save('Subcategory has been successfully created', path, this.form.value, callback);
|
||||
} else {
|
||||
this.save('Subcategory has been successfully saved', element, path, this.subcategoryFb.value, callback);
|
||||
this.save('Subcategory has been successfully saved', path, this.form.value, callback);
|
||||
}
|
||||
this.hide(element);
|
||||
}
|
||||
}
|
||||
|
||||
public deleteSubcategoryOpen(name: string, element, index) {
|
||||
this.deleteOpen(name, 'subcategory', this.deleteSubcategoryModal, element, index);
|
||||
public deleteSubcategoryOpen(index) {
|
||||
this.type = 'subcategory';
|
||||
this.index = index;
|
||||
this.element = this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex].subCategories[this.index];
|
||||
this.deleteOpen();
|
||||
}
|
||||
|
||||
public deleteSubcategory() {
|
||||
|
|
@ -338,18 +348,29 @@ export class TopicComponent implements OnInit, OnDestroy {
|
|||
private navigateToError() {
|
||||
this.router.navigate(['/error'], {queryParams: {'page': this.router.url}});
|
||||
}
|
||||
|
||||
private deleteOpen(name: string, type: string, modal: AlertModal, element, index) {
|
||||
this.element = element;
|
||||
this.index = index;
|
||||
modal.alertTitle = 'Delete ' + name;
|
||||
modal.cancelButtonText = 'No';
|
||||
modal.okButtonText = 'Yes';
|
||||
modal.message = 'This ' + type + ' will permanently be deleted. Are you sure you want to proceed?';
|
||||
modal.open();
|
||||
|
||||
private editOpen() {
|
||||
this.editModal.cancelButtonText = 'Cancel';
|
||||
this.editModal.okButtonLeft = false;
|
||||
this.editModal.alertMessage = false;
|
||||
if (this.index === -1) {
|
||||
this.editModal.alertTitle = 'Create a new ' + this.type;
|
||||
this.editModal.okButtonText = 'Create';
|
||||
} else {
|
||||
this.editModal.alertTitle = 'Edit ' + this.type + '\'s information ';
|
||||
this.editModal.okButtonText = 'Save';
|
||||
}
|
||||
this.editModal.open();
|
||||
}
|
||||
|
||||
private save(message: string, element, path: string[], saveElement: any, callback: Function, redirect = false) {
|
||||
private deleteOpen() {
|
||||
this.deleteModal.alertTitle = 'Delete ' + this.type;
|
||||
this.deleteModal.cancelButtonText = 'No';
|
||||
this.deleteModal.okButtonText = 'Yes';
|
||||
this.deleteModal.open();
|
||||
}
|
||||
|
||||
private save(message: string, path: string[], saveElement: any, callback: Function, redirect = false) {
|
||||
this.stakeholderService.saveElement(this.properties.monitorServiceAPIURL, saveElement, path).subscribe(saveElement => {
|
||||
callback(saveElement);
|
||||
UIkit.notification(message, {
|
||||
|
|
@ -362,14 +383,12 @@ export class TopicComponent implements OnInit, OnDestroy {
|
|||
relativeTo: this.route
|
||||
});
|
||||
}
|
||||
this.hide(element);
|
||||
}, error => {
|
||||
UIkit.notification(error.error.message, {
|
||||
status: 'danger',
|
||||
timeout: 3000,
|
||||
pos: 'top-left'
|
||||
});
|
||||
this.hide(element);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -384,14 +403,12 @@ export class TopicComponent implements OnInit, OnDestroy {
|
|||
if (redirect) {
|
||||
this.back();
|
||||
}
|
||||
this.hide(this.element);
|
||||
}, error => {
|
||||
UIkit.notification(error.error.message, {
|
||||
status: 'danger',
|
||||
timeout: 3000,
|
||||
pos: 'top-left'
|
||||
});
|
||||
this.hide(this.element);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,8 @@ html .dashboard {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.dashboard li > a:hover .onHover {
|
||||
.dashboard li > a:hover .onHover,
|
||||
.dashboard li > a .onHover.uk-open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
@ -46,23 +47,49 @@ html .dashboard {
|
|||
|
||||
.dashboard #sidebar_main .menu_section > ul > li > a {
|
||||
font-weight: 700;
|
||||
overflow: unset;
|
||||
}
|
||||
|
||||
.dashboard #sidebar_main .menu_section > ul > li:not([class*=md-bg-]) > a:hover {
|
||||
background-color: #F0F0F0;
|
||||
}
|
||||
|
||||
.dashboard #sidebar_main .menu_section > ul > li > a > .menu_icon {
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.dashboard #sidebar_main .menu_section > ul > li > ul > li > a:hover {
|
||||
background-color: #F0F0F0;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.dashboard #sidebar_main .menu_section > ul li > a {
|
||||
font-size: var(--sidebar-font-size);
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.dashboard #sidebar_main .menu_section .uk-dropdown {
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.dashboard #sidebar_main .menu_section .uk-dropdown > ul {
|
||||
display: block;
|
||||
margin: 0;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.dashboard #sidebar_main .menu_section .uk-dropdown > ul > li > a {
|
||||
padding: 5px 10px;
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
.dashboard #sidebar_main .menu_section > ul ul > li > a {
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.dashboard #sidebar_main .menu_section > ul li > a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
body.dashboard {
|
||||
|
|
|
|||
Loading…
Reference in New Issue