From 145f1676cacf83a7054508ea735deecabc2ce6d6 Mon Sep 17 00:00:00 2001
From: Konstantinos Triantafyllou <k.triantafyllou@di.uoa.gr>
Date: Tue, 16 Jun 2020 08:23:51 +0000
Subject: [PATCH] [Monitor Dashboard | Trunk]: Indicators: Add editing status
 to prevent actions while editing

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@58933 d315682c-612b-4755-9ff5-7f18f6832af3
---
 src/app/topic/indicators.component.html | 30 ++++++++++++-------------
 src/app/topic/indicators.component.ts   | 29 ++++++++++++++++++++----
 2 files changed, 40 insertions(+), 19 deletions(-)

diff --git a/src/app/topic/indicators.component.html b/src/app/topic/indicators.component.html
index 177f20b..4ba7b57 100644
--- a/src/app/topic/indicators.component.html
+++ b/src/app/topic/indicators.component.html
@@ -70,9 +70,9 @@
              uk-sortable="group: number" uk-grid>
           <div *ngIf="grid" class="tools disable-sortable uk-sortable-nodrag">
             <div class="md-btn-group">
-              <button class="md-btn md-btn-mini" (click)="createSection(i, 'number')"><i class="material-icons">add</i></button>
+              <button [disabled]="editing" class="md-btn md-btn-mini" (click)="createSection(i, 'number')"><i class="material-icons">add</i></button>
               <!--<button class="md-btn md-btn-mini"><i class="material-icons rotate-90">drag_indicator</i></button>-->
-              <button class="md-btn md-btn-mini" (click)="deleteNumberSectionOpen(number, i)"><i class="material-icons">clear</i>
+              <button [disabled]="editing" class="md-btn md-btn-mini" (click)="deleteNumberSectionOpen(number, i)"><i class="material-icons">clear</i>
               </button>
             </div>
           </div>
@@ -82,7 +82,7 @@
             <div dashboard-input class="uk-width-2-3 uk-width-1-3@m" [formInput]="numberSections.at(i).get('title')"
                  label="Add a section title"></div>
             <div class="uk-width-expand">
-              <button *ngIf="numberSections.at(i).dirty" class="md-btn"
+              <button *ngIf="numberSections.at(i).dirty" class="md-btn" [disabled]="editing"
                       (click)="saveSection(numberSections.at(i).value, i, 'number')">
                 Save
               </button>
@@ -117,16 +117,16 @@
                       <div #element uk-dropdown="mode: click; pos: bottom-right; delay-hide: 0; flip: false"
                            class="uk-padding-remove-horizontal">
                         <ul class="uk-nav uk-dropdown-nav">
-                          <li *ngIf="isAdministrator"><a
+                          <li *ngIf="isAdministrator && !editing"><a
                               (click)="editNumberIndicatorOpen(number, indicator._id)">Edit</a></li>
-                          <li><a (click)="toggleIndicatorStatus(number._id, indicator);hide(element)">
+                          <li *ngIf="!editing"><a (click)="toggleIndicatorStatus(number._id, indicator);hide(element)">
                             {{indicator.isActive ? 'Inactive' : 'Active'}}</a>
                           </li>
-                          <li><a (click)="toggleIndicatorAccess(number._id, indicator);hide(element)">
+                          <li *ngIf="!editing"><a (click)="toggleIndicatorAccess(number._id, indicator);hide(element)">
                             {{indicator.isPublic ? 'Private' : 'Public'}}</a>
                           </li>
                           <hr *ngIf="isAdministrator" class="uk-nav-divider">
-                          <li *ngIf="isAdministrator"><a
+                          <li *ngIf="isAdministrator && !editing"><a
                               (click)="deleteIndicatorOpen(number, indicator._id, 'number');hide(element)">Delete</a>
                           </li>
                         </ul>
@@ -202,9 +202,9 @@
              uk-sortable="group: chart" uk-grid>
           <div *ngIf="grid" class="tools disable-sortable uk-sortable-nodrag">
             <div class="md-btn-group">
-              <button class="md-btn md-btn-mini" (click)="createSection(i)"><i class="material-icons">add</i></button>
+              <button [disabled]="editing" class="md-btn md-btn-mini" (click)="createSection(i)"><i class="material-icons">add</i></button>
               <!--<button class="md-btn md-btn-mini"><i class="material-icons rotate-90">drag_indicator</i></button>-->
-              <button class="md-btn md-btn-mini" (click)="deleteChartSectionOpen(chart, i)"><i class="material-icons">clear</i>
+              <button [disabled]="editing" class="md-btn md-btn-mini" (click)="deleteChartSectionOpen(chart, i)"><i class="material-icons">clear</i>
               </button>
             </div>
           </div>
@@ -214,7 +214,7 @@
             <div dashboard-input class="uk-width-2-3 uk-width-1-3@m" [formInput]="chartSections.at(i).get('title')"
                  label="Add a section title"></div>
             <div class="uk-width-expand">
-              <button *ngIf="chartSections.at(i).dirty" class="md-btn"
+              <button *ngIf="chartSections.at(i).dirty" class="md-btn" [disabled]="editing"
                       (click)="saveSection(chartSections.at(i).value, i)">
                 Save
               </button>
@@ -262,15 +262,15 @@
                       <div #element uk-dropdown="mode: click; pos: bottom-right; delay-hide: 0; flip: false"
                            class="uk-padding-remove-horizontal">
                         <ul class="uk-nav uk-dropdown-nav">
-                          <li><a (click)="editChartIndicatorOpen(chart, indicator._id);hide(element)">Edit</a></li>
-                          <li><a (click)="toggleIndicatorStatus(chart._id, indicator);hide(element)">
+                          <li *ngIf="editing"><a (click)="editChartIndicatorOpen(chart, indicator._id);hide(element)">Edit</a></li>
+                          <li *ngIf="editing"><a (click)="toggleIndicatorStatus(chart._id, indicator);hide(element)">
                             {{indicator.isActive ? 'Inactive' : 'Active'}}</a>
                           </li>
-                          <li><a (click)="toggleIndicatorAccess(chart._id, indicator);hide(element)">
+                          <li *ngIf="editing"><a (click)="toggleIndicatorAccess(chart._id, indicator);hide(element)">
                             {{indicator.isPublic ? 'Private' : 'Public'}}</a>
                           </li>
                           <hr class="uk-nav-divider">
-                          <li><a (click)="deleteIndicatorOpen(chart, indicator._id);hide(element)">Delete</a></li>
+                          <li *ngIf="editing"><a (click)="deleteIndicatorOpen(chart, indicator._id);hide(element)">Delete</a></li>
                         </ul>
                       </div>
                     </div>
@@ -349,7 +349,7 @@
       </ng-template>
       <div *ngIf="grid" class="new-section uk-margin-top">
         <div class="tools uk-flex uk-flex-middle">
-          <button class="md-btn uk-margin-small-right" (click)="createSection()">
+          <button [disabled]="editing" class="md-btn uk-margin-small-right" (click)="createSection()">
             <i class="material-icons md-24 md-color-white">add</i>
           </button>
           <span>Create a new section</span>
diff --git a/src/app/topic/indicators.component.ts b/src/app/topic/indicators.component.ts
index 3724efd..895f91b 100644
--- a/src/app/topic/indicators.component.ts
+++ b/src/app/topic/indicators.component.ts
@@ -73,7 +73,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
    * Toggles
    */
   public grid: boolean = true;
-  private reordering: boolean = false;
+  private editing: boolean = false;
   /** Safe Urls*/
   public safeUrls: Map<string, SafeResourceUrl> = new Map<string, SafeResourceUrl>([]);
   
@@ -150,7 +150,6 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
             reordered.push(items.item(i).id);
           }
         }
-        this.reordering = true;
         this.reorderIndicators(list.current.id.toString().split('-')[1], type, reordered);
       };
       this.numbers.forEach((section) => {
@@ -351,7 +350,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
   
   get canReorder(): boolean {
     return this.filters.value.chartType === 'all' && this.filters.value.privacy === 'all' &&
-      this.filters.value.status === 'all' && this.filters.value.keyword === '' && this.grid && !this.reordering;
+      this.filters.value.status === 'all' && this.filters.value.keyword === '' && this.grid && !this.editing;
   }
   
   get canEdit() {
@@ -607,6 +606,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
   }
   
   saveIndicator() {
+    this.editing = true;
     if (this.indicator.type === 'chart') {
       this.indicator = this.indicatorUtils.generateIndicatorByForm(this.chartIndicatorFb.value, this.indicator.indicatorPaths);
       this.section = this.charts.find(section => section._id === this.section._id);
@@ -633,6 +633,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
         timeout: 3000,
         pos: 'top-left'
       });
+      this.editing = false;
     }, error => {
       this.chartIndicatorFb = null;
       UIkit.notification(error.error.message, {
@@ -640,10 +641,12 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
         timeout: 3000,
         pos: 'top-left'
       });
+      this.editing = false;
     });
   }
   
   reorderIndicators(sectionId: string, type: IndicatorType, indicatorIds: string[]) {
+    this.editing = true;
     let path = [
       this.stakeholder._id,
       this.stakeholder.topics[this.topicIndex]._id,
@@ -659,7 +662,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
         this.numbers.find(section => section._id === sectionId).indicators = indicators;
         this.filterNumbers();
       }
-      this.reordering = false;
+      this.editing = false;
     });
   }
   
@@ -702,6 +705,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
   }
   
   deleteIndicator() {
+    this.editing = true;
     let path = [
       this.stakeholder._id,
       this.stakeholder.topics[this.topicIndex]._id,
@@ -723,16 +727,19 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
         timeout: 3000,
         pos: 'top-left'
       });
+      this.editing = false;
     }, error => {
       UIkit.notification(error.error.message, {
         status: 'danger',
         timeout: 3000,
         pos: 'top-left'
       });
+      this.editing = false;
     });
   }
   
   toggleIndicatorStatus(sectionId: string, indicator: Indicator) {
+    this.editing = true;
     let path = [
       this.stakeholder._id,
       this.stakeholder.topics[this.topicIndex]._id,
@@ -748,16 +755,19 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
         timeout: 3000,
         pos: 'top-left'
       });
+      this.editing = false;
     }, error => {
       UIkit.notification(error.error.message, {
         status: 'danger',
         timeout: 3000,
         pos: 'top-left'
       });
+      this.editing = false;
     });
   }
   
   toggleIndicatorAccess(sectionId: string, indicator: Indicator) {
+    this.editing = true;
     let path = [
       this.stakeholder._id,
       this.stakeholder.topics[this.topicIndex]._id,
@@ -773,16 +783,19 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
         timeout: 3000,
         pos: 'top-left'
       });
+      this.editing = false;
     }, error => {
       UIkit.notification(error.error.message, {
         status: 'danger',
         timeout: 3000,
         pos: 'top-left'
       });
+      this.editing = false;
     });
   }
   
   saveSection(section: Section, index: number, type: IndicatorType = "chart") {
+    this.editing = true;
     let path = [
       this.stakeholder._id,
       this.stakeholder.topics[this.topicIndex]._id,
@@ -803,16 +816,19 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
         timeout: 3000,
         pos: 'top-left'
       });
+      this.editing = false;
     }, error => {
       UIkit.notification(error.error.message, {
         status: 'danger',
         timeout: 3000,
         pos: 'top-left'
       });
+      this.editing = false;
     });
   }
   
   createSection(index = -1, type: IndicatorType = 'chart') {
+    this.editing = true;
     this.section = new Section(type, null, null, this.stakeholder.alias);
     let path = [
       this.stakeholder._id,
@@ -842,12 +858,14 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
         timeout: 3000,
         pos: 'top-left'
       });
+      this.editing = false;
     }, error => {
       UIkit.notification(error.error.message, {
         status: 'danger',
         timeout: 3000,
         pos: 'top-left'
       });
+      this.editing = false;
     });
   }
   
@@ -870,6 +888,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
   }
   
   deleteSection(type: IndicatorType = 'chart') {
+    this.editing = true;
     let path = [
       this.stakeholder._id,
       this.stakeholder.topics[this.topicIndex]._id,
@@ -891,12 +910,14 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
         timeout: 3000,
         pos: 'top-left'
       });
+      this.editing = false;
     }, error => {
       UIkit.notification(error.error.message, {
         status: 'danger',
         timeout: 3000,
         pos: 'top-left'
       });
+      this.editing = false;
     });
   }
 }