From 923d34c92c1864c525faf6727a378cf5b39d3dc6 Mon Sep 17 00:00:00 2001
From: Konstantinos Triantafyllou <k.triantafyllou@di.uoa.gr>
Date: Wed, 13 Nov 2019 10:26:50 +0000
Subject: [PATCH] [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
---
 src/app/home/home.component.ts                |  21 ++-
 .../sidebar/sideBar.service.ts                |   2 +-
 src/app/services/stakeholder.service.ts       |   4 +-
 src/app/topic/indicators.component.html       |   9 +-
 src/app/topic/indicators.component.ts         |  33 +++-
 src/app/topic/topic.component.ts              | 177 +++++++++---------
 6 files changed, 142 insertions(+), 104 deletions(-)

diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index e41d32a..0d3ba6a 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -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);
+    });
   }
 }
diff --git a/src/app/library/sharedComponents/sidebar/sideBar.service.ts b/src/app/library/sharedComponents/sidebar/sideBar.service.ts
index 48c49c5..31c8114 100644
--- a/src/app/library/sharedComponents/sidebar/sideBar.service.ts
+++ b/src/app/library/sharedComponents/sidebar/sideBar.service.ts
@@ -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);
diff --git a/src/app/services/stakeholder.service.ts b/src/app/services/stakeholder.service.ts
index 561f0a3..c5edffc 100644
--- a/src/app/services/stakeholder.service.ts
+++ b/src/app/services/stakeholder.service.ts
@@ -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> {
diff --git a/src/app/topic/indicators.component.html b/src/app/topic/indicators.component.html
index 4ac6bb9..4f143aa 100644
--- a/src/app/topic/indicators.component.html
+++ b/src/app/topic/indicators.component.html
@@ -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}}
diff --git a/src/app/topic/indicators.component.ts b/src/app/topic/indicators.component.ts
index e7fe64c..6d3e2b2 100644
--- a/src/app/topic/indicators.component.ts
+++ b/src/app/topic/indicators.component.ts
@@ -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);
diff --git a/src/app/topic/topic.component.ts b/src/app/topic/topic.component.ts
index 100bdf1..4d4053d 100644
--- a/src/app/topic/topic.component.ts
+++ b/src/app/topic/topic.component.ts
@@ -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