Revert special item with previous style. Add type managers and members in notification form

dashboard/sharedComponents/sidebar/sideBar.component.html

@@ -1,19 +1,6 @@
 <aside id="sidebar_main">
   <div id="sidebar_content">
-    <ng-template [ngIf]="specialMenuItem">
+    <div *ngIf="items.length > 0" class="menu_section uk-margin-xlarge-top" style="min-height: 30vh">
-      <div class="menu_section uk-margin-large-top">
-        <a [routerLink]="specialMenuItem.route" [queryParams]="specialMenuItem.params"
-           [queryParamsHandling]="queryParamsHandling" class="uk-button uk-button-link uk-margin-left">
-          <h6 class="uk-margin-remove-bottom uk-flex uk-flex-middle uk-flex-center">
-            <div *ngIf="specialMenuItem.icon" class="uk-width-auto">
-              <icon class="menu-icon" [customClass]="specialMenuItem.icon.class"  [name]="specialMenuItem.icon.name" ratio="1.5" [svg]="specialMenuItem.icon.svg" [flex]="true"></icon>
-            </div>
-            <span *ngIf="open || !specialMenuItem.icon" [class.uk-text-small]="!open" class="uk-width-expand uk-text-truncate uk-margin-small-left">{{specialMenuItem.title}}</span>
-          </h6>
-        </a>
-      </div>
-    </ng-template>
-    <div *ngIf="items.length > 0" class="menu_section" [class.uk-margin-xlarge-top]="!specialMenuItem" [class.uk-margin-large-top]="specialMenuItem"  style="min-height: 30vh">
       <ul class="uk-list uk-nav uk-nav-default" uk-nav>
         <ng-template ngFor [ngForOf]="items" let-item let-i="index">
           <li [class.uk-active]="isTheActiveMenuItem(item)"
@@ -33,5 +20,22 @@
         </ng-template>
       </ul>
     </div>
+    <ng-template [ngIf]="specialMenuItem">
+      <div class="menu_section uk-margin-xlarge-top">
+        <ul class="uk-list uk-nav uk-nav-default" uk-nav>
+          <li [class.uk-active]="isTheActiveUrl(specialMenuItem.route)">
+            <a [routerLink]="specialMenuItem.route" [queryParams]="specialMenuItem.params"
+               [queryParamsHandling]="queryParamsHandling">
+              <div class="uk-flex uk-flex-middle uk-flex-center">
+                <div *ngIf="specialMenuItem.icon" class="uk-width-auto">
+                  <icon class="menu-icon" [customClass]="specialMenuItem.icon.class"  [name]="specialMenuItem.icon.name" ratio="1.2" [svg]="specialMenuItem.icon.svg" [flex]="true"></icon>
+                </div>
+                <span *ngIf="open || !specialMenuItem.icon" [class.uk-text-small]="!open" class="uk-width-expand uk-text-truncate uk-margin-small-left">{{specialMenuItem.title}}</span>
+              </div>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </ng-template>
   </div>
 </aside>

login/utils/helper.class.ts

@@ -212,6 +212,22 @@ export class Role {
     return "CURATOR_" + this.mapType(type, true).toUpperCase();
   }
   
+  /**
+   * Type = FUNDER | COMMUNITY | INSTITUTION | PROJECT
+   *
+   * */
+  public static typeManager(type: string): string {
+    return "MANAGER_" + this.mapType(type, true).toUpperCase();
+  }
+  
+  /**
+   * Type = FUNDER | COMMUNITY | INSTITUTION | PROJECT
+   *
+   * */
+  public static typeMember(type: string): string {
+    return this.mapType(type, false).toUpperCase();
+  }
+  
   /**
    * Type = FUNDER | COMMUNITY | INSTITUTION | PROJECT
    *

notifications/notifications-sidebar/notifications-sidebar.component.ts

@@ -51,7 +51,7 @@ declare var UIkit;
               </li>
             </ul>
           </div>
-          <div *ngIf="availableGroups.length > 0" [availableGroups]="availableGroups" [service]="service" notify-form class="notify"></div>
+          <div *ngIf="availableGroups.length > 0" [availableGroups]="availableGroups" [entities]="entities" [service]="service" notify-form class="notify"></div>
         </ng-template>
         <div *ngIf="notification" class="notification">
           <div class="uk-flex uk-flex-middle uk-margin-medium-bottom">
@@ -85,6 +85,8 @@ export class NotificationsSidebarComponent implements OnInit, OnDestroy {
   @Input()
   public availableGroups: Option[] = [];
   @Input()
+  public entities: string[] = [];
+  @Input()
   public service: string;
   public notification: Notification;
   private subscriptions: any[] = [];

notifications/notify-form/notify-form.component.ts

@@ -1,6 +1,6 @@
 import {ChangeDetectorRef, Component, Input, OnDestroy, OnInit, ViewChild, ViewEncapsulation} from "@angular/core";
 import {FormArray, FormBuilder, FormGroup} from "@angular/forms";
-import {User} from "../../login/utils/helper.class";
+import {Role, User} from "../../login/utils/helper.class";
 import {UserManagementService} from "../../services/user-management.service";
 import {Subscription} from "rxjs";
 import {NotificationService} from "../notification.service";
@@ -22,7 +22,7 @@ import {NotificationHandler} from "../../utils/notification-handler";
         </div>
       </ng-template>
       <ng-template [ngIf]="form.get('groups') && availableGroups">
-        <div #recipients input type="chips" [options]="availableGroups"
+        <div #recipients input type="chips" [options]="groups"
              placeholder="Sent to:" hint="Add a recipient" inputClass="recipients" [formInput]="form.get('groups')">
         </div>
         <div class="uk-position-relative uk-margin-medium-top">
@@ -50,10 +50,11 @@ export class NotifyFormComponent implements OnInit, OnDestroy {
   public form: FormGroup;
   @Input()
   public availableGroups: Option[] = null;
+  public groups: Option[] = [];
   @Input() service: string;
+  public types: string[] = [];
   public user: User;
   public focused: boolean = false;
-  public groups: string[] = [];
   @ViewChild('recipients', { static: false }) recipients: InputComponent;
   private notification: Notification;
   private subscriptions: any[] = [];
@@ -65,6 +66,12 @@ export class NotifyFormComponent implements OnInit, OnDestroy {
               private notificationService: NotificationService) {
   }
   
+  @Input()
+  set entities(entities: string[]) {
+    this.types = entities.map(entity => Role.typeMember(entity));
+    this.types = this.types.concat(entities.map(entity => Role.typeManager(entity)));
+  }
+  
   ngOnInit() {
     this.reset();
     this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {
@@ -96,11 +103,12 @@ export class NotifyFormComponent implements OnInit, OnDestroy {
         groups: this.fb.array([]),
         message: this.fb.control(message)
       });
-      this.groups = [];
+      this.groups = this.availableGroups;
       this.subscriptions.push(this.form.get('groups').valueChanges.subscribe(value => {
-        this.groups = [];
+        let typeGroups = this.typeGroups;
-        value.forEach(group => {
+        this.groups = this.availableGroups.map(group => {
-          this.groups.push(this.availableGroups.find(available => available.value === group).label);
+          group.hidden = typeGroups.includes(group.value)
+          return group;
         });
         this.cdr.detectChanges();
       }));
@@ -111,7 +119,7 @@ export class NotifyFormComponent implements OnInit, OnDestroy {
     if (this.message) {
       if(notification === null) {
         notification = new Notification('CUSTOM', [this.service], null, null);
-        notification.groups = this.groupsAsFromArray.value;
+        notification.groups = this.parseGroups();
         this.sending = true;
       }
       this.notification = notification;
@@ -119,7 +127,7 @@ export class NotifyFormComponent implements OnInit, OnDestroy {
       // TODO remove
       this.notification.name = this.user.firstname;
       this.notification.surname = this.user.lastname;
-      this.subscriptions.push(this.notificationService.sendNotification(this.notification).subscribe(notification => {
+      this.subscriptions.push(this.notificationService.sendNotification(this.notification).subscribe(() => {
         this.sending = false;
         NotificationHandler.rise('A notification has been <b>sent</b> successfully');
         this.reset();
@@ -131,6 +139,24 @@ export class NotifyFormComponent implements OnInit, OnDestroy {
     }
   }
   
+  parseGroups(): string[] {
+    let typeGroups = this.typeGroups;
+    return this.groupsAsFromArray.getRawValue().filter(group => !this.types.includes(group) && !typeGroups.includes(group)).concat(typeGroups);
+  }
+  
+  get typeGroups(): string[] {
+    let groups: string[] = [];
+    this.groupsAsFromArray.getRawValue().filter(group => this.types.includes(group)).forEach(roleType => {
+      if(roleType.includes("MANAGER_")) {
+        let type = roleType.replace("MANAGER_", "");
+        groups = groups.concat(this.availableGroups.map(option => option.value).filter(group => group.includes(type) && group.includes("_MANAGER")));
+      } else {
+        groups = groups.concat(this.availableGroups.map(option => option.value).filter(group => group.includes(roleType + "_") && !group.includes("_MANAGER") && !group.includes("MANAGER_")));
+      }
+    });
+    return groups;
+  }
+  
   get groupsAsFromArray(): FormArray {
     return this.form.get('groups')?(<FormArray>this.form.get('groups')):null;
   }

sharedComponents/input/input.component.ts

@@ -28,7 +28,8 @@ export interface Option {
   value: any,
   label: string,
 	tooltip?: string,
-  disabled?: boolean
+  disabled?: boolean,
+  hidden?: boolean
 }
 
 export interface Placeholder {
@@ -141,7 +142,7 @@ declare var UIkit;
       <div class="options uk-dropdown" *ngIf="filteredOptions && filteredOptions.length > 0 && opened" #optionBox
            uk-dropdown="pos: bottom-justify; mode: none; offset: 15; boundary-align: true;" [attr.boundary]="'#' + id">
         <ul class="uk-nav uk-dropdown-nav">
-          <li *ngFor="let option of filteredOptions; let i=index" [class.uk-active]="(formControl.value === option.value) || selectedIndex === i">
+          <li *ngFor="let option of filteredOptions; let i=index" [class.uk-hidden]="option.hidden" [class.uk-active]="(formControl.value === option.value) || selectedIndex === i">
             <a (click)="selectOption(option, $event)"
                [class]="option.disabled ? 'uk-disabled uk-text-muted' : ''">
               <span [attr.uk-tooltip]="(tooltip)?('title: ' + (option.tooltip ? option.tooltip : option.label) + '; delay: 500; pos:bottom-left'):null">{{option.label}}</span>
@@ -465,7 +466,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
   }
   
   private filter(value: string): Option[] {
-    let options = this.optionsArray;
+    let options = this.optionsArray.filter(option => !option.hidden);
     if (this.type === "chips") {
       options = options.filter(option => !this.formAsArray.value.find(value => HelperFunctions.equals(option.value, value)));
     }