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

[Monitor Dashboard]: Add delete functionality on elements. Add docs on components. 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@57594 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
Konstantinos Triantafyllou 2019-11-13 10:26:50 +00:00
parent 48f9b30070
commit 923d34c92c
6 changed files with 142 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -146,6 +146,25 @@ export class HomeComponent implements OnInit, OnDestroy {
}
deleteTopic() {
let path = [
this.stakeholder.alias,
this.stakeholder.topics[this.index].alias
];
this.stakeholderService.deleteElement(this.properties.monitorServiceAPIURL, path).subscribe(stakeholder => {
this.stakeholderService.setStakeholder(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);
});
}
}

2
src/app/library/sharedComponents/sidebar/sideBar.service.ts
View File

@ -12,7 +12,7 @@ export class SideBarService {
private openSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
/**
* Set this variable to false in pages when it is not needed to have sidebar on Init
* Set this variable to false on Init of components that is not needed to have sidebar
* and on Destroy set this to true.
*/
private hasSidebarSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);

4
src/app/services/stakeholder.service.ts
View File

@ -42,9 +42,9 @@ export class StakeholderService {
'/indicator/save', indicator);
}
deleteElement(url: string, path: string[]): Observable<boolean> {
deleteElement(url: string, path: string[]): Observable<any> {
path = HelperFunctions.encodeArray(path);
return this.http.delete<boolean>(url + '/' + path.join('/'))
return this.http.delete<any>(url + '/' + path.join('/'))
}
getStakeholderAsObservable(): Observable<Stakeholder> {

9
src/app/topic/indicators.component.html
View File

@ -18,7 +18,7 @@
<label>Privacy:</label>
<select class="uk-select uk-form-small uk-margin-small-left"
(ngModelChange)="onPrivacyChange($event)"
[(ngModel)]="isPublic">
[(ngModel)]="privacy">
<option [value]="'all'">All</option>
<option [value]="'public'">Public</option>
<option [value]="'private'">Private</option>
@ -28,7 +28,7 @@
<label>Status:</label>
<select class="uk-select uk-form-small uk-margin-small-left"
(ngModelChange)="onStatusChange($event)"
[(ngModel)]="isActive">
[(ngModel)]="status">
<option [value]="'all'">All</option>
<option [value]="'active'">Active</option>
<option [value]="'inactive'">Inactive</option>
@ -51,12 +51,13 @@
</div>
</div>
</div>
<div *ngIf="stakeholder" id="page_content_inner">
<div *ngIf="stakeholder && canEdit" id="page_content_inner">
<div class="uk-child-width-1-2 uk-flex-middle" uk-grid>
<div>
<ul id="breadcrumbs">
<li><span>{{stakeholder.topics[topicIndex].name}}</span></li>
<li><span>{{stakeholder.topics[topicIndex].categories[categoryIndex].name}}</span></li>
<li>
<span>{{stakeholder.topics[topicIndex].categories[categoryIndex].name}}</span></li>
<li>
<span class="md-color-blue-900 uk-text-bold">
{{stakeholder.topics[topicIndex].categories[categoryIndex].subCategories[subcategoryIndex].name}}

33
src/app/topic/indicators.component.ts
View File

@ -18,14 +18,26 @@ export class IndicatorsComponent implements OnInit, OnChanges {
@Input()
public stakeholder: Stakeholder = null;
public indicatorUtils: IndicatorUtils = new IndicatorUtils();
/**
* All charts and numbers
*/
public charts: Indicator[] = [];
public numbers: Indicator[] = [];
/**
* Displayed chart and numbers base on Top filters
*/
public displayCharts: Indicator[] = [];
public displayNumbers: Indicator[] = [];
/**
* Top filters
*/
public chartType: string = 'all';
public isPublic: string = 'all';
public isActive: string = 'all';
public privacy: string = 'all';
public status: string = 'all';
public keyword: string = null;
/**
* Grid or List View
*/
public grid: boolean = true;
constructor(private sideBarService: SideBarService) {}
@ -34,20 +46,20 @@ export class IndicatorsComponent implements OnInit, OnChanges {
}
ngOnChanges(changes: SimpleChanges): void {
if(this.stakeholder) {
if(this.canEdit) {
this.charts = this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].
subCategories[this.subcategoryIndex].charts;
this.displayCharts = this.filterChartType(this.filterPrivacy(
this.filterStatus(this.filterByKeyword(this.charts, this.keyword), this.isActive),
this.isPublic),
this.filterStatus(this.filterByKeyword(this.charts, this.keyword), this.status),
this.privacy),
this.chartType
);
this.numbers = this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].
subCategories[this.subcategoryIndex].numbers;
this.displayNumbers = this.filterPrivacy(this.filterStatus(
this.filterByKeyword(this.numbers, this.keyword),
this.isActive),
this.isPublic);
this.status),
this.privacy);
}
}
@ -107,6 +119,13 @@ export class IndicatorsComponent implements OnInit, OnChanges {
return this.sideBarService.open;
}
get canEdit() {
return this.stakeholder &&
this.stakeholder.topics[this.topicIndex] &&
this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex] &&
this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex];
}
public toggleOpen(event = null) {
if (!event) {
this.sideBarService.setOpen(!this.open);

177
src/app/topic/topic.component.ts
View File

@ -18,19 +18,33 @@ export class TopicComponent implements OnInit, OnDestroy {
public properties: EnvProperties;
public loading: boolean = true;
public stakeholder: Stakeholder;
/**
* Current topic
**/
public topicIndex: number = -1;
public topic: Topic = null;
/**
* categoryIndex: Current category to be edited, selectedCategoryIndex: selected on menu(opened)
*/
public categoryIndex: number = -1;
public selectedCategoryIndex: number = -1;
public copyCategory: Category = null;
/**
* Current Subcategory to be edited
*/
public subCategoryIndex: number = -1;
public copySubCategory: SubCategory = null;
public valid = true;
public edit: boolean = false;
public toggle: boolean = false;
/**
* Current drop element and index of topic, category or subcategory to be deleted.
*/
public element: any;
public index: number;
/**
* Check form validity
*/
public valid = true;
public toggle: boolean = false;
@ViewChild('deleteTopicModal') deleteTopicModal: AlertModal;
@ViewChild('deleteCategoryModal') deleteCategoryModal: AlertModal;
@ -72,15 +86,48 @@ export class TopicComponent implements OnInit, OnDestroy {
}
public hide(element) {
this.edit = false;
UIkit.drop(element).hide();
}
public show(element) {
this.edit = true;
UIkit.drop(element).show();
}
public editTopicOpen(element) {
if(element.className.indexOf('uk-open') !== -1) {
this.hide(element);
} else {
this.topic = HelperFunctions.copy(this.stakeholder.topics[this.topicIndex]);
this.valid = true;
this.show(element);
}
}
public saveTopic(element) {
if(this.topic.name && this.topic.name !== ''
&& this.topic.description && this.topic.description !== '') {
if(!this.topic.alias) {
this.topic.alias = this.topic.name.toLowerCase().trim();
}
this.stakeholder.topics[this.topicIndex] = HelperFunctions.copy(this.topic);
this.save('Topic has been successfully saved', element, true);
} else {
this.valid = false;
}
}
public deleteTopicOpen(element) {
this.deleteOpen('topic', this.deleteTopicModal, element, this.topicIndex);
}
public deleteTopic() {
let path: string[] = [
this.stakeholder.alias,
this.stakeholder.topics[this.topicIndex].alias
];
this.delete('Topic has been successfully be deleted', path, true);
}
public toggleCategory(index: number) {
if(this.selectedCategoryIndex !== index) {
this.selectedCategoryIndex = index;
@ -126,23 +173,12 @@ export class TopicComponent implements OnInit, OnDestroy {
}
public deleteCategory() {
this.stakeholder.topics[this.topicIndex].categories.splice(this.index, 1);
this.stakeholderService.saveStakeholder(this.properties.monitorServiceAPIURL, this.stakeholder).subscribe(stakeholder => {
this.stakeholderService.setStakeholder(stakeholder);
UIkit.notification('Category 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);
});
let path: string[] = [
this.stakeholder.alias,
this.stakeholder.topics[this.topicIndex].alias,
this.stakeholder.topics[this.topicIndex].categories[this.index].alias
];
this.delete('Category has been successfully be deleted', path);
}
public editSubCategoryOpen(index:number = -1, element = null) {
@ -185,72 +221,13 @@ export class TopicComponent implements OnInit, OnDestroy {
}
public deleteSubcategory() {
this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex].subCategories.
splice(this.index, 1);
this.stakeholderService.saveStakeholder(this.properties.monitorServiceAPIURL, this.stakeholder).subscribe(stakeholder => {
this.stakeholderService.setStakeholder(stakeholder);
UIkit.notification('Subcategory 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);
});
}
public editTopicOpen(element) {
if(element.className.indexOf('uk-open') !== -1) {
this.hide(element);
} else {
this.topic = HelperFunctions.copy(this.stakeholder.topics[this.topicIndex]);
this.valid = true;
this.show(element);
}
}
public saveTopic(element) {
if(this.topic.name && this.topic.name !== ''
&& this.topic.description && this.topic.description !== '') {
if(!this.topic.alias) {
this.topic.alias = this.topic.name.toLowerCase().trim();
}
this.stakeholder.topics[this.topicIndex] = HelperFunctions.copy(this.topic);
this.save('Topic has been successfully saved', element, true);
} else {
this.valid = false;
}
}
public deleteTopicOpen(element) {
this.deleteOpen('topic', this.deleteTopicModal, element, this.topicIndex);
}
public deleteTopic() {
this.stakeholder.topics.splice(this.index, 1);
this.stakeholderService.saveStakeholder(this.properties.monitorServiceAPIURL, this.stakeholder).subscribe(stakeholder => {
this.stakeholderService.setStakeholder(stakeholder);
UIkit.notification('Topic has been successfully deleted', {
status: 'success',
timeout: 3000,
pos: 'top-left'
});
this.hide(this.element);
this.back();
}, error => {
UIkit.notification(error.error.message, {
status: 'danger',
timeout: 3000,
pos: 'top-left'
});
this.hide(this.element);
});
let path: string[] = [
this.stakeholder.alias,
this.stakeholder.topics[this.topicIndex].alias,
this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex].alias,
this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex].subCategories[this.index].alias
];
this.delete('Subcategory has been successfully be deleted', path);
}
private navigateToError() {
@ -293,6 +270,28 @@ export class TopicComponent implements OnInit, OnDestroy {
});
}
private delete(message: string, path: string[], redirect = false) {
this.stakeholderService.deleteElement(this.properties.monitorServiceAPIURL, path).subscribe(stakeholder => {
this.stakeholderService.setStakeholder(stakeholder);
UIkit.notification(message, {
status: 'success',
timeout: 3000,
pos: 'top-left'
});
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);
});
}
back() {
this.router.navigate(['../'], {
relativeTo: this.route