[Library | Trunk]: Change manager and members page

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@59718 d315682c-612b-4755-9ff5-7f18f6832af3

dashboard/sharedComponents/sidebar/sideBar.component.ts

@@ -22,11 +22,13 @@ export class SideBarComponent implements OnInit {
   @Input() searchParams = {};
   @Input() queryParamsHandling = "";
   properties;
+  
   constructor(private router: Router, private sanitizer: DomSanitizer, private layoutService: LayoutService) {
     this.properties = properties;
   }
   
-  ngOnInit(): void {}
+  ngOnInit(): void {
+  }
   
   
   isTheActiveMenuItem(item: MenuItem, subItem: MenuItem = null): boolean {
@@ -44,12 +46,15 @@ export class SideBarComponent implements OnInit {
   isTheActiveUrl(menuItemURL): boolean {
     return (menuItemURL == this.router.url.split('?')[0])
   }
+  
   satinizeHTML(html) {
     return this.sanitizer.bypassSecurityTrustHtml(html);
   }
+  
   public get isSmallScreen() {
     return this.layoutService.isSmallScreen;
   }
+  
   public get open() {
     return this.layoutService.open;
   }

dashboard/users/managers/managers.component.html

@@ -17,26 +17,40 @@
       </ul>
     </div>
     <div class="uk-width-1-5 uk-flex uk-flex-right">
-      <button class="uk-button uk-button-primary" (click)="openInviteModal()">Invite Manager</button>
+      <a class="uk-text-uppercase uk-flex uk-flex-middle" (click)="openInviteModal()">
+        <button class="uk-icon-button large uk-button-secondary">
+          <icon name="person_add"></icon>
+        </button>
+        <button class="uk-button uk-button-link uk-margin-small-left uk-text-secondary">Invite Manager</button>
+      </a>
     </div>
   </div>
   <div *ngIf="loadManagers || loadPending" class="uk-margin-large-top">
     <loading></loading>
   </div>
-  <div *ngIf="!loadManagers && !loadPending" class="uk-margin-medium-top">
+  <div *ngIf="!loadManagers && !loadPending" class="uk-margin-medium-top uk-padding-small">
     <div *ngIf="(showManagers && managers.length == 0) || (!showManagers && pending.length == 0)"
-         class="uk-card uk-card-default uk-padding uk-card-body uk-text-center">
+         class="uk-card uk-card-default uk-padding-large uk-card-body uk-text-center uk-margin-bottom uk-text-bold">
       <div *ngIf="showManagers">No managers for {{name}}</div>
       <div *ngIf="!showManagers">No pending manager invitations for {{name}}</div>
     </div>
     <div *ngIf="(showManagers && managers.length > 0) || (!showManagers && pending.length > 0)"
-         class="uk-overflow-auto uk-height-max-large uk-padding-small">
+         class="uk-overflow-auto uk-height-max-large">
-      <div class="uk-card uk-card-default uk-card-body" *ngFor="let item of (showManagers)?managers:pending">
+      <div class="uk-card uk-card-default uk-card-body uk-text-small uk-margin-bottom" *ngFor="let item of (showManagers)?managers:pending">
         <div class="uk-grid uk-grid-divider uk-flex uk-flex-middle" uk-grid>
-          <div class="uk-width-3-4">Email: {{(showManagers) ? item.email : item}}</div>
+          <div class="uk-width-3-4">
+            <div class="uk-padding-small uk-padding-remove-horizontal">
+              <span class="uk-text-muted">Email: </span>
+              <span class="uk-text-bold">{{(showManagers) ? item.email : item}}</span>
+            </div>
+          </div>
           <div *ngIf="properties.environment === 'development'" class="uk-width-expand uk-text-center">
-            <a (click)="openDeleteModal(item)" class="uk-icon-button remove uk-button-danger"
+            <div class="uk-padding-small uk-padding-remove-horizontal">
-               uk-icon="icon: close; ratio: 1" title="Remove"></a>
+              <a (click)="openDeleteModal(item)" class="uk-button action uk-flex uk-flex-middle">
+                <icon name="remove_circle_outline" ratio="0.7" [flex]="true"></icon>
+                <span class="uk-margin-small-left">{{showManagers?'Remove manager':'Cancel invitation'}}</span>
+              </a>
+            </div>
           </div>
         </div>
       </div>
@@ -44,10 +58,18 @@
   </div>
 </div>
 <modal-alert #inviteManagerModal (alertOutput)="inviteManager()" [okDisabled]="invited && invited.invalid">
-  <div *ngIf="invited" class="uk-padding uk-text-center">
+  <div *ngIf="invited" class="uk-padding uk-padding-remove-horizontal uk-text-center">
-    <span class="uk-text-bold">Email: </span>
+    <div dashboard-input [formInput]="invited"
-    <input class="uk-input space uk-width-medium" [class.uk-form-danger]="invited.invalid" [formControl]="invited">
+         placeholder="Write an email..."></div>
+  </div>
+</modal-alert>
+<modal-alert #deleteManagerModal (alertOutput)="deleteManager()">
+  <div *ngIf="selectedUser" class="uk-padding uk-padding-remove-horizontal">
+    Are you sure you want to remove  <span class="uk-text-bold">{{selectedUser}}</span> from managers?
+  </div>
+</modal-alert>
+<modal-alert #deletePendingModal (alertOutput)="deletePendingManager()">
+  <div *ngIf="selectedUser" class="uk-padding uk-padding-remove-horizontal">
+    Are you sure you want to cancel manager invitation of <span class="uk-text-bold">{{selectedUser}}</span>?
   </div>
 </modal-alert>
-<modal-alert #deleteManagerModal (alertOutput)="deleteManager()"></modal-alert>
-<modal-alert #deletePendingModal (alertOutput)="deletePendingManager()"></modal-alert>

dashboard/users/managers/managers.component.ts

@@ -68,18 +68,19 @@ export class ManagersComponent implements OnInit, OnDestroy {
   openDeleteModal(item: any) {
     if (this.showManagers) {
       this.selectedUser = item.email;
-      this.deleteManagerModal.alertTitle = 'Delete ' + item.email + ' from managers';
+      this.deleteManagerModal.alertTitle = 'Delete manager';
       this.deleteManagerModal.open();
     } else {
       this.selectedUser = item;
-      this.deletePendingModal.alertTitle = 'Cancel invitation for user ' + item;
+      this.deletePendingModal.alertTitle = 'Cancel invitation';
       this.deletePendingModal.open();
     }
   }
   
   openInviteModal() {
-    this.inviteManagerModal.alertTitle = 'Invite user to join ' + this.name + ' as manager';
+    this.inviteManagerModal.alertTitle = 'Invite manager';
     this.inviteManagerModal.okButtonLeft = false;
+    this.inviteManagerModal.okButtonText = 'Send';
     this.invited = this.fb.control('', [Validators.required, Validators.email]);
     this.inviteManagerModal.open();
   }

dashboard/users/managers/managers.module.ts

@@ -5,11 +5,19 @@ import {ReactiveFormsModule} from '@angular/forms';
 import {EmailService} from "../../../utils/email/email.service";
 import {AlertModalModule} from "../../../utils/modal/alertModal.module";
 import {LoadingModule} from "../../../utils/loading/loading.module";
+import {IconsService} from "../../../utils/icons/icons.service";
+import {person_add, remove_circle_outline} from "../../../utils/icons/icons";
+import {IconsModule} from "../../../utils/icons/icons.module";
+import {InputModule} from "../../sharedComponents/input/input.module";
 
 @NgModule({
-  imports: [CommonModule, AlertModalModule, ReactiveFormsModule, LoadingModule],
+  imports: [CommonModule, AlertModalModule, ReactiveFormsModule, LoadingModule, IconsModule, InputModule],
   declarations: [ManagersComponent],
   exports: [ManagersComponent],
   providers: [EmailService]
 })
-export class ManagersModule {}
+export class ManagersModule {
+  constructor(private iconsService: IconsService) {
+    this.iconsService.registerIcons([remove_circle_outline, person_add]);
+  }
+}

dashboard/users/members/members.component.html

@@ -16,8 +16,13 @@
         </li>
       </ul>
     </div>
-    <div class="uk-width-1-5 uk-flex uk-flex-right">
+    <div class="uk-width-1-4 uk-flex uk-flex-right">
-      <button class="uk-button uk-button-primary" (click)="openInviteModal()">Invite Member</button>
+      <a class="uk-text-uppercase uk-flex uk-flex-middle" (click)="openInviteModal()">
+        <button class="uk-icon-button large uk-button-secondary">
+          <icon name="person_add"></icon>
+        </button>
+        <button class="uk-button uk-button-link uk-margin-small-left uk-text-secondary">Invite Member</button>
+      </a>
     </div>
   </div>
   <div *ngIf="loadMembers || loadPending" class="uk-margin-large-top">
@@ -25,18 +30,27 @@
   </div>
   <div *ngIf="!loadMembers && !loadPending" class="uk-margin-medium-top">
     <div *ngIf="(showMembers && members.length == 0) || (!showMembers && pending.length == 0)"
-         class="uk-card uk-card-default uk-padding uk-card-body uk-text-center">
+         class="uk-card uk-card-default uk-padding-large uk-card-body uk-text-center uk-margin-bottom uk-text-bold">
       <div *ngIf="showMembers">No members for {{name}}</div>
       <div *ngIf="!showMembers">No pending member invitations for {{name}}</div>
     </div>
     <div *ngIf="(showMembers && members.length > 0) || (!showMembers && pending.length > 0)"
          class="uk-overflow-auto uk-height-max-large uk-padding-small">
-      <div class="uk-card uk-card-default uk-card-body" *ngFor="let item of (showMembers)?members:pending">
+      <div class="uk-card uk-card-default uk-card-body uk-text-small uk-margin-bottom" *ngFor="let item of (showMembers)?members:pending">
         <div class="uk-grid uk-grid-divider uk-flex uk-flex-middle" uk-grid>
-          <div class="uk-width-3-4">Email: {{(showMembers) ? item.email : item}}</div>
+          <div class="uk-width-3-4">
+            <div class="uk-padding-small uk-padding-remove-horizontal">
+              <span class="uk-text-muted">Email: </span>
+              <span class="uk-text-bold">{{(showMembers) ? item.email : item}}</span>
+            </div>
+          </div>
           <div *ngIf="properties.environment === 'development'" class="uk-width-expand uk-text-center">
-            <a (click)="openDeleteModal(item)" class="uk-icon-button remove uk-button-danger"
+            <div class="uk-padding-small uk-padding-remove-horizontal">
-               uk-icon="icon: close; ratio: 1" title="Remove"></a>
+              <a (click)="openDeleteModal(item)" class="uk-button action uk-flex uk-flex-middle">
+                <icon name="remove_circle_outline" ratio="0.7" [flex]="true"></icon>
+                <span class="uk-margin-small-left">{{showMembers ? 'Remove member' : 'Cancel invitation'}}</span>
+              </a>
+            </div>
           </div>
         </div>
       </div>
@@ -44,10 +58,18 @@
   </div>
 </div>
 <modal-alert #inviteMemberModal (alertOutput)="inviteMember()" [okDisabled]="invited && invited.invalid">
-  <div *ngIf="invited" class="uk-padding uk-text-center">
+  <div *ngIf="invited" class="uk-padding-small uk-padding-remove-horizontal uk-text-center">
-    <span class="uk-text-bold">Email: </span>
+    <div dashboard-input [formInput]="invited"
-    <input class="uk-input space uk-width-medium" [class.uk-form-danger]="invited.invalid" [formControl]="invited">
+         placeholder="Write an email..."></div>
+  </div>
+</modal-alert>
+<modal-alert #deleteMemberModal (alertOutput)="deleteMember()">
+  <div *ngIf="selectedUser" class="uk-padding-small uk-padding-remove-horizontal">
+    Are you sure you want to remove  <span class="uk-text-bold">{{selectedUser}}</span> from members?
+  </div>
+</modal-alert>
+<modal-alert #deletePendingModal (alertOutput)="deletePendingMember()">
+  <div *ngIf="selectedUser" class="uk-padding-small uk-padding-remove-horizontal">
+    Are you sure you want to cancel member invitation of <span class="uk-text-bold">{{selectedUser}}</span>?
   </div>
 </modal-alert>
-<modal-alert #deleteMemberModal (alertOutput)="deleteMember()"></modal-alert>
-<modal-alert #deletePendingModal (alertOutput)="deletePendingMember()"></modal-alert>

dashboard/users/members/members.component.ts

@@ -68,17 +68,18 @@ export class MembersComponent implements OnInit, OnDestroy {
   openDeleteModal(item: any) {
     if (this.showMembers) {
       this.selectedUser = item.email;
-      this.deleteMemberModal.alertTitle = 'Delete ' + item.email + ' from members';
+      this.deleteMemberModal.alertTitle = 'Delete member';
       this.deleteMemberModal.open();
     } else {
       this.selectedUser = item;
-      this.deletePendingModal.alertTitle = 'Cancel invitation for user ' + item;
+      this.deletePendingModal.alertTitle = 'Cancel invitation';
       this.deletePendingModal.open();
     }
   }
   
   openInviteModal() {
-    this.inviteMemberModal.alertTitle = 'Invite user to join ' + this.name + ' as member';
+    this.inviteMemberModal.alertTitle = 'Invite member';
+    this.inviteMemberModal.okButtonText = 'Send';
     this.inviteMemberModal.okButtonLeft = false;
     this.invited = this.fb.control('', [Validators.required, Validators.email]);
     this.inviteMemberModal.open();

dashboard/users/members/members.module.ts

@@ -5,11 +5,19 @@ import {ReactiveFormsModule} from '@angular/forms';
 import {EmailService} from "../../../utils/email/email.service";
 import {AlertModalModule} from "../../../utils/modal/alertModal.module";
 import {LoadingModule} from "../../../utils/loading/loading.module";
+import {IconsModule} from "../../../utils/icons/icons.module";
+import {IconsService} from "../../../utils/icons/icons.service";
+import {person_add, remove_circle_outline} from "../../../utils/icons/icons";
+import {InputModule} from "../../sharedComponents/input/input.module";
 
 @NgModule({
-  imports: [CommonModule, AlertModalModule, ReactiveFormsModule, LoadingModule],
+  imports: [CommonModule, AlertModalModule, ReactiveFormsModule, LoadingModule, IconsModule, InputModule],
   declarations: [MembersComponent],
   exports: [MembersComponent],
   providers: [EmailService]
 })
-export class MembersModule {}
+export class MembersModule {
+  constructor(private iconsService: IconsService) {
+    this.iconsService.registerIcons([remove_circle_outline, person_add]);
+  }
+}

sharedComponents/menu.ts

@@ -36,7 +36,7 @@ export class MenuItem {
     if (!menu.markAsActive) {
       return false;
     }
-    if (currentRoute == menu.route || currentRoute.indexOf(menu.route) != -1) {
+    if (currentRoute == menu.route) {
       return true;
     } else if (menu.items.length > 0) {
       for (let menuItem of menu.items) {

utils/icons/icons.ts

@@ -62,3 +62,18 @@ export const bullet: Icon = {
   data: '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="10"/></svg>'
 }
 
+export const remove_circle_outline = {
+  name: 'remove_circle_outline',
+  data: '<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="20"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>'
+}
+
+export const person_add = {
+  name: 'person_add',
+  data: '<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="20"><path d="M0 0h24v24H0z" fill="none"/><path d="M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>'
+}
+
+export const cloud_upload = {
+  name: 'cloud_upload',
+  data: '<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="20"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l4.65-4.65c.2-.2.51-.2.71 0L17 13h-3z"/></svg>'
+}
+

utils/modal/alert.ts

@@ -1,4 +1,5 @@
 import {Component, ViewEncapsulation, ElementRef, EventEmitter, Output, Input, ViewChild} from '@angular/core';
+import {properties} from "../../../../environments/environment";
 
 declare var UIkit: any;
 
@@ -10,7 +11,8 @@ declare var UIkit: any;
            [ngClass]="classBody">
         <div [ngClass]="classTitle" class="uk-modal-title" [hidden]=!alertHeader>
           <button class="uk-modal-close-default uk-float-right" (click)='cancel()' uk-close></button>
-          <h4 class="modal-title">{{alertTitle}}</h4>
+          <h4 *ngIf="!isDashboard" class="modal-title">{{alertTitle}}</h4>
+          <h6 *ngIf="isDashboard" class="uk-text-bold">{{alertTitle}}</h6>
         </div>
         <div class="uk-margin">
           <div [hidden]=!alertMessage>
@@ -24,11 +26,12 @@ declare var UIkit: any;
             <span class="uk-margin-small-left" style="font-weight: normal;">Don't show this message again</span>
           </label>
           <div [ngClass]="(choice)?'uk-width-1-2':'uk-width-1-1'">
-            <div *ngIf="okButtonLeft" class="uk-text-right" [hidden]=!alertFooter>
+            <div class="uk-flex-right uk-grid uk-grid-small" [hidden]=!alertFooter uk-grid>
-              <span [hidden]=!okButton>
+              <span [hidden]=!okButton [class.uk-flex-last]="!okButtonLeft">
-                <button *ngIf="okDisabled" class="uk-button md-btn disabled uk-button-default ignoreCommunityPanelBackground" disabled>{{okButtonText}}</button>
+                <button *ngIf="okDisabled" class="uk-button disabled uk-button-default ignoreCommunityPanelBackground" disabled>{{okButtonText}}</button>
-                <button *ngIf="!okDisabled"
+                <button *ngIf="!okDisabled" [class.portal-button]="!isDashboard"
-                      class="uk-button md-btn md-btn-primary portal-button ignoreCommunityPanelBackground"
+                        [class.uk-button-secondary]="isDashboard" [class.outlined]="isDashboard"
+                      class="uk-button ignoreCommunityPanelBackground"
                       (click)="ok()">{{okButtonText}}</button>
               </span>
               <span [hidden]=!cancelButton>
@@ -36,19 +39,6 @@ declare var UIkit: any;
                         (click)="cancel()">{{cancelButtonText}}</button>
               </span>
             </div>
-            <div *ngIf="!okButtonLeft" class="uk-text-right" [hidden]=!alertFooter>
-               <span [hidden]=!cancelButton>
-                  <button class="uk-button md-btn uk-button-default uk-margin-small-right"
-                          (click)="cancel()">{{cancelButtonText}}</button>
-              </span>
-              <span [hidden]=!okButton>
-              <button *ngIf="okDisabled" class="uk-button disabled uk-button-default ignoreCommunityPanelBackground"
-                      disabled>{{okButtonText}}</button>
-              <button *ngIf="!okDisabled"
-                      class="uk-button portal-button ignoreCommunityPanelBackground"
-                      (click)="ok()">{{okButtonText}}</button>
-            </span>
-            </div>
           </div>
         </div>
       </div>
@@ -64,6 +54,7 @@ export class AlertModal {
   @Input() classTitle: string = "";
   @Input() classBody: string = "";
   @Input() large: boolean = false;
+  isDashboard: boolean = properties.isDashboard;
   /**
    * Caption for the title.
    */
@@ -78,7 +69,7 @@ export class AlertModal {
    * Caption for the OK button.
    * Default: Ok
    */
-  public okButtonText: string = 'Ok';
+  public okButtonText: string = 'OK';
   /**
    * Describes if the alert contains cancel Button.
    * The default Cancelbutton will close the alert.