From 6d9d118d575564b1e249b5f673c00c395f14f04c Mon Sep 17 00:00:00 2001
From: Alex Martzios <alexandros.martzios@gmail.com>
Date: Fri, 12 Apr 2024 13:57:56 +0300
Subject: [PATCH] [develop | DONE | ADDED] topics/indicators: add condition to
 hide all "edit" actions when stakeholder is NOT a copy

---
 monitor-admin/topic/indicators.component.html | 52 +++++++++++--------
 monitor-admin/topic/indicators.component.ts   |  4 ++
 monitor-admin/topic/topic.component.html      | 32 +++++++-----
 monitor-admin/topic/topic.component.ts        |  4 ++
 4 files changed, 58 insertions(+), 34 deletions(-)

diff --git a/monitor-admin/topic/indicators.component.html b/monitor-admin/topic/indicators.component.html
index 69abb1dd..9c7f6ca9 100644
--- a/monitor-admin/topic/indicators.component.html
+++ b/monitor-admin/topic/indicators.component.html
@@ -4,9 +4,9 @@
         <div class="uk-grid uk-grid-large uk-child-width-1-1" uk-grid>
             <div *ngFor="let number of numbers; let i=index">
                 <div class="section">
-                    <div class="tools">
+                    <div *ngIf="isEditable" class="tools">
                         <div class="uk-flex uk-flex-middle">
-                            <a [class.uk-disabled]="editing" class="" (click)="createSection(i, 'number')"
+                            <a *ngIf="isCurator" [class.uk-disabled]="editing" class="" (click)="createSection(i, 'number')"
                                uk-tooltip="Create a new section">
                                 <icon name="add" [flex]="true"></icon>
                             </a>
@@ -17,25 +17,29 @@
                         </div>
                     </div>
                     <div *ngIf="numberSections.at(i)" class="uk-margin-medium-bottom">
-                        <div input [formInput]="numberSections.at(i).get('title')"
+                        <div *ngIf="isEditable" input [formInput]="numberSections.at(i).get('title')"
                              (focusEmitter)="saveSection($event, numberSections.at(i), i, 'number')"
                              class="uk-width-1-3@m uk-width-1-1" placeholder="Title" inputClass="border-bottom"></div>
+                        <h5 *ngIf="!isEditable" class="uk-margin-remove">{{numberSections.at(i).get('title').value}}</h5>
                     </div>
                     <div [id]="'number-' + number._id" class="uk-grid uk-grid-small uk-grid-match"
-                         uk-sortable="group: number" uk-grid>
+                        [attr.uk-sortable]="isEditable ? 'group: number': null" uk-grid>
                         <ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
                             <div *ngIf="indicator" [id]="indicator._id"
                                  [ngClass]="getNumberClassBySize(indicator.width)">
                                 <div class="uk-card uk-card-default uk-padding-small number-card uk-position-relative">
                                     <div *ngIf="!dragging"
                                          class="uk-position-top-right uk-margin-small-right uk-margin-small-top">
-                                        <a class="uk-link-reset uk-flex uk-flex-middle" [class.uk-disabled]="editing">
-                                            <icon *ngIf="showVisibility" [flex]="true"
+                                        <icon *ngIf="!isEditable && showVisibility" [flex]="true"
+                                          [name]="stakeholderUtils.visibilityIcon.get(indicator.visibility)"
+                                          ratio="0.6"></icon>
+                                        <a *ngIf="isEditable && (isCurator || showVisibillity)" class="uk-link-reset uk-flex uk-flex-middle" [class.uk-disabled]="editing">
+                                            <icon [flex]="true"
                                                   [name]="stakeholderUtils.visibilityIcon.get(indicator.visibility)"
                                                   ratio="0.6"></icon>
                                             <icon [flex]="true" name="more_vert"></icon>
                                         </a>
-                                        <div #element class="uk-dropdown"
+                                        <div #element *ngIf="isEditable && (isCurator || showVisibillity)" class="uk-dropdown"
                                              uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0">
                                             <ul class="uk-nav uk-dropdown-nav">
                                                 <ng-container *ngIf="isCurator">
@@ -79,7 +83,7 @@
                             </div>
                         </ng-template>
                     </div>
-                    <div *ngIf="isCurator" class="uk-margin-top">
+                    <div *ngIf="isCurator && isEditable" class="uk-margin-top">
                         <div class="uk-grid uk-grid-small" uk-grid>
                             <div [ngClass]="getNumberClassBySize('small')">
                                 <a class="uk-card uk-card-default number-card uk-padding-small uk-flex uk-flex-middle uk-link-reset"
@@ -96,7 +100,7 @@
                     </div>
                 </div>
             </div>
-            <div>
+            <div *ngIf="isEditable && isCurator">
                 <ng-container *ngTemplateOutlet="new_section; context:{type: 'number'}"></ng-container>
             </div>
         </div>
@@ -106,9 +110,9 @@
         <div class="uk-grid uk-grid-large uk-child-width-1-1" uk-grid>
             <div *ngFor="let chart of charts; let i=index">
                 <div class="section uk-margin-top uk-padding-small">
-                    <div class="tools">
+                    <div *ngIf="isEditable" class="tools">
                         <div class="uk-flex uk-flex-middle">
-                            <a [class.uk-disabled]="editing" class="" (click)="createSection(i)"
+                            <a *ngIf="isCurator" [class.uk-disabled]="editing" class="" (click)="createSection(i)"
                                title="Create a new section">
                                 <icon name="add" [flex]="true"></icon>
                             </a>
@@ -120,25 +124,29 @@
                     </div>
                     <div *ngIf="chartSections.at(i)"
                          class="uk-margin-medium-bottom">
-                        <div input [formInput]="chartSections.at(i).get('title')"
+                        <div *ngIf="isEditable" input [formInput]="chartSections.at(i).get('title')"
                              (focusEmitter)="saveSection($event, chartSections.at(i), i)"
                              class="uk-width-1-3@m uk-width-1-1" placeholder="Title" inputClass="border-bottom"></div>
+                        <h5 *ngIf="!isEditable" class="uk-margin-remove">{{chartSections.at(i).get('title').value}}</h5>
                     </div>
                     <div [id]="'chart-' + chart._id" class="uk-grid uk-grid-small uk-grid-match"
-                         uk-sortable="group: chart" uk-grid>
+                        [attr.uk-sortable]="isEditable ? 'group: chart': null" uk-grid>
                         <ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index">
                             <div *ngIf="indicator" [id]="indicator._id"
                                  [ngClass]="getChartClassBySize(indicator.width)">
                                 <div class="uk-card uk-card-default uk-card-body uk-position-relative">
                                     <div *ngIf="!dragging"
                                          class="uk-position-top-right uk-margin-small-right uk-margin-small-top">
-                                        <a class="uk-link-reset uk-flex uk-flex-middle" [class.uk-disabled]="editing">
-                                            <icon *ngIf="showVisibility" [flex]="true"
+                                        <icon *ngIf="!isEditable && showVisibility" [flex]="true"
+                                          [name]="stakeholderUtils.visibilityIcon.get(indicator.visibility)"
+                                          ratio="0.6"></icon>
+                                        <a *ngIf="isEditable && (isCurator || showVisibillity)" class="uk-link-reset uk-flex uk-flex-middle" [class.uk-disabled]="editing">
+                                            <icon [flex]="true"
                                                   [name]="stakeholderUtils.visibilityIcon.get(indicator.visibility)"
                                                   ratio="0.6"></icon>
                                             <icon [flex]="true" name="more_vert"></icon>
                                         </a>
-                                        <div #element class="uk-dropdown"
+                                        <div #element *ngIf="isEditable && (isCurator || showVisibillity)" class="uk-dropdown"
                                              uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0">
                                             <ul class="uk-nav uk-dropdown-nav">
                                                 <ng-container *ngIf="isCurator">
@@ -214,7 +222,7 @@
                             </div>
                         </ng-template>
                     </div>
-                    <div *ngIf="isCurator" class="uk-margin-top">
+                    <div *ngIf="isCurator && isEditable" class="uk-margin-top">
                         <div class="uk-grid uk-grid-small uk-grid-match" uk-grid>
                             <div [ngClass]="getChartClassBySize('small')">
                                 <div class=" uk-card uk-card-default uk-card-body clickable"
@@ -236,7 +244,7 @@
                     </div>
                 </div>
             </div>
-            <div>
+            <div *ngIf="isEditable && isCurator">
                 <ng-container *ngTemplateOutlet="new_section; context:{type: 'chart'}"></ng-container>
             </div>
         </div>
@@ -288,10 +296,10 @@
                                   class="uk-flex uk-flex-column uk-flex-center uk-margin-small-left"
                                   [class.uk-invisible-hover]="indicator.activePath !== i"
                                   (click)="$event.stopPropagation();$event.preventDefault()">
-                            <a class="uk-link-reset uk-flex uk-flex-middle">
+                            <a *ngIf="isEditable && isCurator" class="uk-link-reset uk-flex uk-flex-middle">
                               <icon [flex]="true" name="more_vert"></icon>
                             </a>
-                            <div #element
+                            <div #element *ngIf="isEditable && isCurator"
                                  uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0; container: .uk-modal-body">
                                <ul class="uk-nav uk-dropdown-nav">
                                   <li *ngIf="i > 0">
@@ -486,10 +494,10 @@
                                   class="uk-flex uk-flex-column uk-flex-center uk-margin-small-left"
                                   [class.uk-invisible-hover]="indicator.activePath !== i"
                                   (click)="$event.stopPropagation();$event.preventDefault()">
-                            <a class="uk-link-reset uk-flex uk-flex-middle">
+                            <a *ngIf="isEditable && isCurator" class="uk-link-reset uk-flex uk-flex-middle">
                               <icon [flex]="true" name="more_vert"></icon>
                             </a>
-                            <div #element
+                            <div #element *ngIf="isEditable && isCurator"
                                  uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0; container: .uk-modal-body">
                                <ul class="uk-nav uk-dropdown-nav">
                                   <li *ngIf="i > 0">
diff --git a/monitor-admin/topic/indicators.component.ts b/monitor-admin/topic/indicators.component.ts
index e4e4eb9d..cb29946d 100644
--- a/monitor-admin/topic/indicators.component.ts
+++ b/monitor-admin/topic/indicators.component.ts
@@ -1566,4 +1566,8 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
     document.body.removeChild(tempBox);
     NotificationHandler.rise('Copied to clipboard');
   }
+
+  get isEditable(): boolean {
+    return this.stakeholder.copy || this.stakeholder.defaultId == null || this.stakeholder.defaultId == '-1';
+  }
 }
diff --git a/monitor-admin/topic/topic.component.html b/monitor-admin/topic/topic.component.html
index 46806ed5..c5d7ecb9 100644
--- a/monitor-admin/topic/topic.component.html
+++ b/monitor-admin/topic/topic.component.html
@@ -28,12 +28,15 @@
               </span>
               <span class="uk-margin-xsmall-left hide-on-close" [class.uk-invisible-hover]="topicIndex !== i"
                     (click)="$event.stopPropagation();$event.preventDefault()">
-                <a class="uk-link-reset uk-flex uk-flex-middle">
-                  <icon *ngIf="showVisibility" [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(topic.visibility)"
+                <icon *ngIf="!isEditable && showVisibility" [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(topic.visibility)"
+                  ratio="0.6"></icon>
+                <a *ngIf="isEditable && (isCurator || showVisibillity)" class="uk-link-reset uk-flex uk-flex-middle">
+                  <icon [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(topic.visibility)"
                         ratio="0.6"></icon>
                   <icon [flex]="true" name="more_vert"></icon>
                 </a>
-                <div #element uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0; flip: false; container: body">
+                <div #element *ngIf="isEditable && (isCurator || showVisibillity)" 
+                  uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0; flip: false; container: body">
                   <ul class="uk-nav uk-dropdown-nav">
                     <ng-container *ngIf="isCurator">
                       <li>
@@ -106,12 +109,14 @@
                     <span class="uk-width-expand uk-text-truncate">{{category.name}}</span>
                     <span class="uk-margin-xsmall-left hide-on-close" [class.uk-invisible-hover]="categoryIndex !== j"
                           (click)="$event.stopPropagation();$event.preventDefault()">
-                    <a class="uk-link-reset uk-flex uk-flex-middle">
-                      <icon *ngIf="showVisibility" [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(category.visibility)"
+                    <icon *ngIf="!isEditable && showVisibility" [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(category.visibility)"
+                      ratio="0.6"></icon>
+                    <a *ngIf="isEditable && (isCurator || showVisibility)" class="uk-link-reset uk-flex uk-flex-middle">
+                      <icon [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(category.visibility)"
                             ratio="0.6"></icon>
                       <icon [flex]="true" name="more_vert"></icon>
                     </a>
-                    <div #element
+                    <div #element *ngIf="isEditable && (isCurator || showVisibility)"
                          uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0; flip: false; container: body">
                       <ul class="uk-nav uk-dropdown-nav">
                         <ng-container *ngIf="isCurator">
@@ -175,7 +180,7 @@
                   </div>
                 </a>
               </li>
-              <li *ngIf="isCurator">
+              <li *ngIf="isCurator && isEditable">
                 <a (click)="editCategoryOpen(); $event.preventDefault()" class="uk-flex uk-flex-middle">
                   <icon name="add" [flex]="true"></icon>
                   <span class="hide-on-close">Create new category</span>
@@ -183,7 +188,7 @@
               </li>
             </ul>
           </li>
-          <li *ngIf="isCurator" class="hide-on-close">
+          <li *ngIf="isCurator && isEditable" class="hide-on-close">
             <a (click)="editTopicOpen(-1); $event.preventDefault()">
               <div class="uk-flex uk-flex-middle">
                 <div class="uk-width-auto">
@@ -235,12 +240,15 @@
             <span class="uk-flex uk-flex-column uk-flex-center uk-margin-small-left"
                   [class.uk-invisible-hover]="subCategoryIndex !== i"
                   (click)="$event.stopPropagation();$event.preventDefault()">
-            <a class="uk-link-reset uk-flex uk-flex-middle">
-              <icon *ngIf="showVisibility" [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(subCategory.visibility)"
+            <icon *ngIf="!isEditable && showVisibility" [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(subCategory.visibility)"
+              ratio="0.6"></icon>
+            <a *ngIf="isEditable && (isCurator || showVisibility)" class="uk-link-reset uk-flex uk-flex-middle">
+              <icon [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(subCategory.visibility)"
                     ratio="0.6"></icon>
               <icon [flex]="true" name="more_vert"></icon>
             </a>
-            <div #element uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0; container: body">
+            <div #element *ngIf="isEditable && (isCurator || showVisibility)"
+              uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0; container: body">
               <ul class="uk-nav uk-dropdown-nav">
                 <ng-container *ngIf="isCurator">
                   <li>
@@ -318,7 +326,7 @@
           </span>
           </li>
         </ng-template>
-        <li *ngIf="isCurator">
+        <li *ngIf="isCurator && isEditable">
           <a (click)="editSubCategoryOpen(); $event.preventDefault()" class="uk-flex uk-flex-middle">
             <icon name="add" [flex]="true"></icon>
             <span class="uk-text-uppercase">Create new subcategory</span>
diff --git a/monitor-admin/topic/topic.component.ts b/monitor-admin/topic/topic.component.ts
index 40d128d8..9c42c135 100644
--- a/monitor-admin/topic/topic.component.ts
+++ b/monitor-admin/topic/topic.component.ts
@@ -759,4 +759,8 @@ export class TopicComponent extends StakeholderBaseComponent implements OnInit,
 		this.visibilityModal.alertFooter = false;
     this.visibilityModal.open();
 	}
+
+  get isEditable(): boolean {
+    return this.stakeholder.copy || this.stakeholder.defaultId == null || this.stakeholder.defaultId == '-1';
+  }
 }