[Monitor Dashboard | Trunk]: Add toggle options on all levels. Change main.css for width of sidebar in medium screens

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@57927 d315682c-612b-4755-9ff5-7f18f6832af3

src/app/stakeholder/stakeholder.component.html

@@ -38,12 +38,12 @@
                        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><a (click)="toggleTopicStatus(topic)">
+                        {{topic.isActive ? 'Deactivate' : 'Activate'}}</a>
+                      </li>
+                      <li><a (click)="toggleTopicAccess(topic)">
+                          {{topic.isPublic?'Unpublish':'Publish'}}</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>

src/app/stakeholder/stakeholder.component.ts

@@ -5,7 +5,7 @@ import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties'
 
 import {ErrorCodes} from '../openaireLibrary/utils/properties/errorCodes';
 import {ErrorMessagesComponent} from '../openaireLibrary/utils/errorMessages.component';
-import {Stakeholder, Topic} from "../utils/entities/stakeholder";
+import {Indicator, Stakeholder, Topic} from "../utils/entities/stakeholder";
 import {StakeholderService} from "../services/stakeholder.service";
 import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class";
 import {AlertModal} from "../openaireLibrary/utils/modal/alert";
@@ -189,4 +189,48 @@ export class StakeholderComponent implements OnInit, OnDestroy {
       });
     });
   }
+  
+  toggleTopicStatus(topic: Topic) {
+    let path = [
+      this.stakeholder._id,
+      topic._id
+    ];
+    this.stakeholderService.toggleStatus(this.properties.monitorServiceAPIURL, path).subscribe(isActive => {
+      topic.isActive = isActive;
+      this.stakeholderService.setStakeholder(this.stakeholder);
+      UIkit.notification('Topic has been successfully ' + (isActive?'activated':'deactivated'), {
+        status: 'success',
+        timeout: 3000,
+        pos: 'top-left'
+      });
+    }, error => {
+      UIkit.notification(error.error.message, {
+        status: 'danger',
+        timeout: 3000,
+        pos: 'top-left'
+      });
+    });
+  }
+  
+  toggleTopicAccess(topic: Topic) {
+    let path = [
+      this.stakeholder._id,
+      topic._id
+    ];
+    this.stakeholderService.toggleAccess(this.properties.monitorServiceAPIURL, path).subscribe(isPublic => {
+      topic.isPublic = isPublic;
+      this.stakeholderService.setStakeholder(this.stakeholder);
+      UIkit.notification('Topic has been successfully changed to ' + (isPublic?'public':'private'), {
+        status: 'success',
+        timeout: 3000,
+        pos: 'top-left'
+      });
+    }, error => {
+      UIkit.notification(error.error.message, {
+        status: 'danger',
+        timeout: 3000,
+        pos: 'top-left'
+      });
+    });
+  }
 }

src/app/topic/topic.component.html

@@ -14,19 +14,19 @@
           <div class="menu_title uk-width-expand">
             {{stakeholder.topics[topicIndex].name.toUpperCase()}}
           </div>
-          <div class="uk-width-1-6"
+          <div class="menu_icon"
                (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><a (click)="toggleTopicStatus()">
+                  {{stakeholder.topics[topicIndex].isActive ? 'Deactivate' : 'Activate'}}</a>
+                </li>
+                <li><a (click)="toggleTopicAccess()">
+                    {{stakeholder.topics[topicIndex].isPublic?'Unpublish':'Publish'}}</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>
@@ -52,12 +52,12 @@
                    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><a (click)="toggleCategoryStatus(i)">
+                    {{category.isActive ? 'Deactivate' : 'Activate'}}</a>
+                  </li>
+                  <li><a (click)="toggleCategoryAccess(i)">
+                      {{category.isPublic?'Unpublish':'Publish'}}</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>
@@ -81,12 +81,12 @@
                          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><a (click)="toggleSubcategoryStatus(j)">
+                          {{subcategory.isActive ? 'Deactivate' : 'Activate'}}</a>
+                        </li>
+                        <li><a (click)="toggleSubcategoryAccess(j)">
+                          {{subcategory.isPublic?'Unpublish':'Publish'}}</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>

src/app/topic/topic.component.ts

@@ -9,6 +9,7 @@ import {AlertModal} from "../openaireLibrary/utils/modal/alert";
 import {Subscriber, Subscription} from "rxjs";
 import {FormBuilder, FormGroup, Validators} from "@angular/forms";
 import {StakeholderUtils} from "../utils/indicator-utils";
+import {StringUtils} from "../openaireLibrary/utils/string-utils.class";
 
 declare var UIkit;
 
@@ -157,6 +158,26 @@ export class TopicComponent implements OnInit, OnDestroy {
     }
   }
   
+  public toggleTopicStatus() {
+    this.index = this.topicIndex;
+    this.type = 'topic';
+    let path = [
+      this.stakeholder._id,
+      this.stakeholder.topics[this.topicIndex]._id
+    ];
+    this.toggleStatus(this.stakeholder.topics[this.topicIndex], path);
+  }
+  
+  public toggleTopicAccess() {
+    this.index = this.topicIndex;
+    this.type = 'topic';
+    let path = [
+      this.stakeholder._id,
+      this.stakeholder.topics[this.topicIndex]._id
+    ];
+    this.toggleAccess(this.stakeholder.topics[this.topicIndex], path);
+  }
+  
   public deleteTopicOpen() {
     this.type = 'topic';
     this.index = this.topicIndex;
@@ -242,6 +263,28 @@ export class TopicComponent implements OnInit, OnDestroy {
     }
   }
   
+  public toggleCategoryStatus(index: number) {
+    this.index = index;
+    this.type = 'category';
+    let path = [
+      this.stakeholder._id,
+      this.stakeholder.topics[this.topicIndex]._id,
+      this.stakeholder.topics[this.topicIndex].categories[this.index]._id
+    ];
+    this.toggleStatus(this.stakeholder.topics[this.topicIndex].categories[this.index], path);
+  }
+  
+  public toggleCategoryAccess(index: number) {
+      this.index = index;
+      this.type = 'category';
+      let path = [
+          this.stakeholder._id,
+          this.stakeholder.topics[this.topicIndex]._id,
+          this.stakeholder.topics[this.topicIndex].categories[this.index]._id
+      ];
+      this.toggleAccess(this.stakeholder.topics[this.topicIndex].categories[this.index], path);
+  }
+  
   public deleteCategoryOpen(index: number) {
     this.type = 'category';
     this.index = index;
@@ -324,6 +367,30 @@ export class TopicComponent implements OnInit, OnDestroy {
     }
   }
     
+    public toggleSubcategoryStatus(index: number) {
+        this.index = index;
+        this.type = 'subcategory';
+        let path = [
+            this.stakeholder._id,
+            this.stakeholder.topics[this.topicIndex]._id,
+            this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex]._id,
+            this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex].subCategories[this.index]._id
+        ];
+        this.toggleStatus(this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex].subCategories[this.index], path);
+    }
+    
+    public toggleSubcategoryAccess(index: number) {
+        this.index = index;
+        this.type = 'subcategory';
+        let path = [
+            this.stakeholder._id,
+            this.stakeholder.topics[this.topicIndex]._id,
+            this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex]._id,
+            this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex].subCategories[this.index]._id
+        ];
+        this.toggleAccess(this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex].subCategories[this.index], path);
+    }
+  
   public deleteSubcategoryOpen(index) {
     this.type = 'subcategory';
     this.index = index;
@@ -412,6 +479,42 @@ export class TopicComponent implements OnInit, OnDestroy {
     });
   }
   
+  private toggleStatus(element: Topic | Category | SubCategory, path: string[]) {
+    this.stakeholderService.toggleStatus(this.properties.monitorServiceAPIURL, path).subscribe(isActive => {
+      element.isActive = isActive;
+      this.stakeholderService.setStakeholder(this.stakeholder);
+      UIkit.notification(StringUtils.capitalize(this.type) + ' has been successfully ' + (isActive ? 'activated' : 'deactivated'), {
+        status: 'success',
+        timeout: 3000,
+        pos: 'top-left'
+      });
+    }, error => {
+      UIkit.notification(error.error.message, {
+        status: 'danger',
+        timeout: 3000,
+        pos: 'top-left'
+      });
+    });
+  }
+  
+  private toggleAccess(element: Topic | Category | SubCategory, path: string[]) {
+    this.stakeholderService.toggleAccess(this.properties.monitorServiceAPIURL, path).subscribe(isPublic => {
+      element.isPublic = isPublic;
+      this.stakeholderService.setStakeholder(this.stakeholder);
+      UIkit.notification(StringUtils.capitalize(this.type) + ' has been successfully changed to ' + (isPublic ? 'public' : 'private'), {
+        status: 'success',
+        timeout: 3000,
+        pos: 'top-left'
+      });
+    }, error => {
+      UIkit.notification(error.error.message, {
+        status: 'danger',
+        timeout: 3000,
+        pos: 'top-left'
+      });
+    });
+  }
+  
   back() {
     this.router.navigate(['../'], {
       relativeTo: this.route

src/assets/theme-assets/css/main.css

@@ -199,7 +199,7 @@
 }
 .uk-modal-dialog .uk-modal-header .uk-modal-title {
   margin: 0;
-  font: 500 18px / 28px "Open Sans";
+  font: 500 18px / 28px "Open Sans", sans-serif;
 }
 .uk-modal-dialog .uk-modal-header .uk-modal-title span {
   font-size: 16px;
@@ -1560,7 +1560,7 @@ div.uk-form-file.md-btn {
   color: #fff;
 }
 .uk-datepicker-nav .uk-form-select {
-  font: 400 16px / 22px "Open Sans";
+  font: 400 16px / 22px "Open Sans", sans-serif;
   color: #fff;
   text-transform: uppercase;
   border-bottom: 1px solid rgba(255, 255, 255, 0.5);
@@ -1598,7 +1598,7 @@ div.uk-form-file.md-btn {
 .uk-datepicker-table th,
 .uk-datepicker-table td {
   padding: 2px;
-  font: 400 13px / 15px "Open Sans";
+  font: 400 13px / 15px "Open Sans", sans-serif;
 }
 .uk-datepicker-table th {
   color: #727272;
@@ -3503,7 +3503,7 @@ body > .content-preloader.preloader-active {
   -webkit-appearance: none;
   display: inline-block;
   vertical-align: middle;
-  font: 500 14px / 31px "Open Sans" !important;
+  font: 500 14px / 31px "Open Sans", sans-serif !important;
 }
 .md-btn:hover,
 .md-btn:focus,
@@ -4300,7 +4300,7 @@ body > .content-preloader.preloader-active {
   padding: 4px 16px;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
-  font: 400 16px / 32px "Open Sans";
+  font: 400 16px / 32px "Open Sans", sans-serif;
   text-align: left;
 }
 .md-fab-sheet-actions > a,
@@ -5947,7 +5947,7 @@ body > .content-preloader.preloader-active {
   clear: both;
 }
 .md-card .md-card-toolbar-heading-text {
-  font: 500 14px / 50px "Open Sans";
+  font: 500 14px / 50px "Open Sans", sans-serif;
   color: #212121;
   margin: 0;
   float: left;
@@ -5996,7 +5996,7 @@ body > .content-preloader.preloader-active {
 }
 .md-card .md-card-toolbar-input {
   border: none;
-  font: 400 18px / 24px "Open Sans";
+  font: 400 18px / 24px "Open Sans", sans-serif;
   height: auto;
   background: none !important;
   padding: 12px 0;
@@ -6031,13 +6031,13 @@ body > .content-preloader.preloader-active {
 }
 .md-card .md-card-head-text {
   padding: 8px 16px 16px;
-  font: 500 16px / 22px "Open Sans";
+  font: 500 16px / 22px "Open Sans", sans-serif;
   color: #212121;
   margin: 0;
 }
 .md-card .md-card-head-text span:not(.listNavSelector) {
   display: block;
-  font: 400 12px / 18px "Open Sans";
+  font: 400 12px / 18px "Open Sans", sans-serif;
   margin-top: -2px;
 }
 .md-card .md-card-head-text.text_dark {
@@ -6249,10 +6249,10 @@ body > .content-preloader.preloader-active {
   box-sizing: border-box;
 }
 .md-card.md-card-overlay .md-card-overlay-header h3 {
-  font: 400 16px / 30px "Open Sans";
+  font: 400 16px / 30px "Open Sans", sans-serif;
 }
 .md-card.md-card-overlay .md-card-overlay-header h4 {
-  font: 500 14px / 30px "Open Sans";
+  font: 500 14px / 30px "Open Sans", sans-serif;
 }
 .md-card.md-card-overlay .md-card-overlay-header .md-icon {
   position: absolute;
@@ -6615,7 +6615,7 @@ input[type="color"].md-input {
   border-width: 0 0 1px;
   border-style: solid;
   border-color: rgba(0, 0, 0, 0.12);
-  font: 400 15px / 18px "Open Sans";
+  font: 400 15px / 18px "Open Sans", sans-serif;
   -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0);
   box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0);
   -webkit-box-sizing: border-box;
@@ -8174,7 +8174,7 @@ button.md-icon {
   right: 0;
   bottom: 0;
   text-align: center;
-  font: 400 20px / 110px "Open Sans";
+  font: 400 20px / 110px "Open Sans", sans-serif;
 }
 .epc_chart_icon {
   position: absolute;
@@ -9086,7 +9086,7 @@ div.dt-button-info {
 div.dt-button-info h2 {
   padding: 16px;
   margin: 0;
-  font: 400 20px / 24px "Open Sans";
+  font: 400 20px / 24px "Open Sans", sans-serif;
 }
 div.dt-button-info > div {
   padding: 16px 24px;
@@ -10635,7 +10635,7 @@ a.waves-effect .waves-ripple {
   cursor: pointer;
   margin: 0 auto;
   border-radius: 3px;
-  font: 500 20px / 46px "Open Sans";
+  font: 500 20px / 46px "Open Sans", sans-serif;
   text-align: center;
   text-overflow: clip;
   -webkit-transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -10809,7 +10809,7 @@ a.waves-effect .waves-ripple {
   position: absolute;
   color: #fff;
   z-index: 2020;
-  font: 400 22px / 32px "Open Sans";
+  font: 400 22px / 32px "Open Sans", sans-serif;
   -webkit-transition: opacity 400ms cubic-bezier(0.42, 0, 0.58, 1);
   transition: opacity 400ms cubic-bezier(0.42, 0, 0.58, 1);
 }
@@ -12166,13 +12166,13 @@ a.editable-click.editable-disabled:hover {
 }
 @media only screen and (max-width: 767px) {
   #sidebar_main {
-    width: 360px;
-    -webkit-transform: translate3d(-360px, 0, 0);
-    transform: translate3d(-360px, 0, 0);
+    width: 280px;
+    -webkit-transform: translate3d(-280px, 0, 0);
+    transform: translate3d(-280px, 0, 0);
   }
 }
 #sidebar_main .menu_section .menu_heading {
-  font: 400 12px / 16px "Open Sans";
+  font: 400 12px / 16px "Open Sans", sans-serif;
   margin: 0 0 12px;
   padding: 6px 6px 12px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.12);
@@ -12190,7 +12190,7 @@ a.editable-click.editable-disabled:hover {
   list-style: none;
 }
 #sidebar_main .menu_section > ul > li > a {
-  font: 500 14px / 25px "Open Sans";
+  font: 500 14px / 25px "Open Sans", sans-serif;
   color: #212121;
   padding: 8px 20px;
   display: block;
@@ -12246,7 +12246,7 @@ a.editable-click.editable-disabled:hover {
 #sidebar_main .menu_section > ul > li ul a {
   padding: 8px 10px 8px 72px;
   display: block;
-  font: 400 13px / 18px "Open Sans";
+  font: 400 13px / 18px "Open Sans", sans-serif;
   color: #212121;
 }
 @media only screen and (max-width: 767px) {
@@ -12918,7 +12918,7 @@ a.editable-click.editable-disabled:hover {
   min-height: 81px;
 }
 #page_heading h1 {
-  font: 500 22px / 28px "Open Sans";
+  font: 500 22px / 28px "Open Sans", sans-serif;
   margin: 0;
 }
 #page_heading .heading_actions {
@@ -13969,7 +13969,7 @@ a.editable-click.editable-disabled:hover {
   font-size: 13px;
   padding: 8px;
   max-height: 80px;
-  font: 400 13px / 16px "Open Sans";
+  font: 400 13px / 16px "Open Sans", sans-serif;
   resize: none;
   word-wrap: break-word;
   -webkit-box-sizing: border-box;
@@ -13997,7 +13997,7 @@ a.editable-click.editable-disabled:hover {
   height: 200px;
 }
 .blog_list_teaser_title {
-  font: 400 18px / 24px "Open Sans";
+  font: 400 18px / 24px "Open Sans", sans-serif;
   margin: 0 0 8px;
 }
 .blog_list_teaser p {
@@ -14065,7 +14065,7 @@ a.editable-click.editable-disabled:hover {
   background-color: #fff;
 }
 .gallery_grid_image_caption .gallery_image_title {
-  font: 500 14px / 20px "Open Sans";
+  font: 500 14px / 20px "Open Sans", sans-serif;
   margin: 0;
 }
 .gallery_grid_image_menu {
@@ -14475,7 +14475,7 @@ a.editable-click.editable-disabled:hover {
   list-style: none;
 }
 .search_list_heading {
-  font: 400 18px / 22px "Open Sans";
+  font: 400 18px / 22px "Open Sans", sans-serif;
   margin: 0 0 2px;
 }
 .search_list_link {
@@ -14654,7 +14654,7 @@ html {
 }
 body {
   min-height: 100%;
-  font: 400 14px / 1.42857143 "Open Sans";
+  font: 400 14px / 1.42857143 "Open Sans", sans-serif;
   padding-top: 48px;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
@@ -14735,7 +14735,7 @@ h6 {
 }
 .heading_a {
   margin: 0;
-  font: 400 18px / 24px "Open Sans";
+  font: 400 18px / 24px "Open Sans", sans-serif;
 }
 .heading_a .sub-heading {
   font-weight: 300;
@@ -14746,7 +14746,7 @@ h6 {
 }
 .heading_b {
   margin: 0;
-  font: 400 22px / 28px "Open Sans";
+  font: 400 22px / 28px "Open Sans", sans-serif;
 }
 .heading_b .sub-heading {
   font-weight: 300;
@@ -14757,7 +14757,7 @@ h6 {
 }
 .heading_c {
   margin: 0;
-  font: 400 16px / 20px "Open Sans";
+  font: 400 16px / 20px "Open Sans", sans-serif;
 }
 .heading_c .sub-heading {
   font-weight: 300;
@@ -14768,7 +14768,7 @@ h6 {
 }
 .heading_list {
   color: #727272;
-  font: 500 13px / 16px "Open Sans";
+  font: 500 13px / 16px "Open Sans", sans-serif;
   padding: 0 16px;
   margin: 0 0 16px;
 }

src/assets/theme-assets/dashboard-custom.css

@@ -41,6 +41,10 @@ html .dashboard {
   flex: 1;
 }
 
+.dashboard #sidebar_main .menu_footer {
+  height: auto;
+}
+
 .dashboard .header_full #sidebar_main .sidebar_main_header {
   min-height: auto;
 }