From a1bccfe52722ba96a0a3d52ec66fb91160f4ec03 Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Thu, 29 Oct 2020 14:20:41 +0000 Subject: [PATCH] [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 --- .../sidebar/sideBar.component.ts | 35 ++++++++------ .../users/managers/managers.component.html | 48 ++++++++++++++----- .../users/managers/managers.component.ts | 7 +-- dashboard/users/managers/managers.module.ts | 12 ++++- .../users/members/members.component.html | 46 +++++++++++++----- dashboard/users/members/members.component.ts | 7 +-- dashboard/users/members/members.module.ts | 12 ++++- sharedComponents/menu.ts | 2 +- utils/icons/icons.ts | 25 ++++++++-- utils/modal/alert.ts | 31 +++++------- 10 files changed, 149 insertions(+), 76 deletions(-) diff --git a/dashboard/sharedComponents/sidebar/sideBar.component.ts b/dashboard/sharedComponents/sidebar/sideBar.component.ts index a08314c3..0e5bffcc 100644 --- a/dashboard/sharedComponents/sidebar/sideBar.component.ts +++ b/dashboard/sharedComponents/sidebar/sideBar.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, OnInit} from '@angular/core'; +import {Component, Input, OnInit} from '@angular/core'; import {MenuItem} from "../../../sharedComponents/menu"; import {Router} from "@angular/router"; import {DomSanitizer} from "@angular/platform-browser"; @@ -18,42 +18,47 @@ export class SideBarComponent implements OnInit { @Input() showHeader: boolean = true; @Input() activeItem: string = ''; @Input() activeSubItem: string = ''; - @Input() specialMenuItem:MenuItem = null; + @Input() specialMenuItem: MenuItem = null; @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 { - if(this.activeItem || this.activeSubItem){ - return (!subItem && this.activeItem === item.id) || + if (this.activeItem || this.activeSubItem) { + return (!subItem && this.activeItem === item.id) || (subItem && this.activeItem === item.id && this.activeSubItem === subItem.id); - }else { - if(subItem){ - return MenuItem.isTheActiveMenu(subItem,this.router.url.split('?')[0]) + } else { + if (subItem) { + return MenuItem.isTheActiveMenu(subItem, this.router.url.split('?')[0]) } - return MenuItem.isTheActiveMenu(item,this.router.url.split('?')[0]) + return MenuItem.isTheActiveMenu(item, this.router.url.split('?')[0]) } } - + isTheActiveUrl(menuItemURL): boolean { return (menuItemURL == this.router.url.split('?')[0]) } - satinizeHTML(html){ + + satinizeHTML(html) { return this.sanitizer.bypassSecurityTrustHtml(html); } + public get isSmallScreen() { return this.layoutService.isSmallScreen; } + public get open() { return this.layoutService.open; } - + public toggleOpen(event: MouseEvent) { event.preventDefault(); this.layoutService.setOpen(!this.open); diff --git a/dashboard/users/managers/managers.component.html b/dashboard/users/managers/managers.component.html index 1fdcc151..1091fb73 100644 --- a/dashboard/users/managers/managers.component.html +++ b/dashboard/users/managers/managers.component.html @@ -17,26 +17,40 @@
- + + + +
-
+
+ class="uk-card uk-card-default uk-padding-large uk-card-body uk-text-center uk-margin-bottom uk-text-bold">
No managers for {{name}}
No pending manager invitations for {{name}}
-
+ class="uk-overflow-auto uk-height-max-large"> +
-
Email: {{(showManagers) ? item.email : item}}
+
+
+ Email: + {{(showManagers) ? item.email : item}} +
+
- +
+ + + {{showManagers?'Remove manager':'Cancel invitation'}} + +
@@ -44,10 +58,18 @@
-
- Email: - +
+
+
+ + +
+ Are you sure you want to remove {{selectedUser}} from managers? +
+ + +
+ Are you sure you want to cancel manager invitation of {{selectedUser}}?
- - diff --git a/dashboard/users/managers/managers.component.ts b/dashboard/users/managers/managers.component.ts index 3985280f..8bed04e5 100644 --- a/dashboard/users/managers/managers.component.ts +++ b/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(); } diff --git a/dashboard/users/managers/managers.module.ts b/dashboard/users/managers/managers.module.ts index 4d34ef4e..f9c834b8 100644 --- a/dashboard/users/managers/managers.module.ts +++ b/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]); + } +} diff --git a/dashboard/users/members/members.component.html b/dashboard/users/members/members.component.html index 31d78cf8..b8182d95 100644 --- a/dashboard/users/members/members.component.html +++ b/dashboard/users/members/members.component.html @@ -16,8 +16,13 @@
-
- +
+ + + +
@@ -25,18 +30,27 @@
+ class="uk-card uk-card-default uk-padding-large uk-card-body uk-text-center uk-margin-bottom uk-text-bold">
No members for {{name}}
No pending member invitations for {{name}}
-
+
-
Email: {{(showMembers) ? item.email : item}}
+
+
+ Email: + {{(showMembers) ? item.email : item}} +
+
- +
+ + + {{showMembers ? 'Remove member' : 'Cancel invitation'}} + +
@@ -44,10 +58,18 @@
-
- Email: - +
+
+
+ + +
+ Are you sure you want to remove {{selectedUser}} from members? +
+ + +
+ Are you sure you want to cancel member invitation of {{selectedUser}}?
- - diff --git a/dashboard/users/members/members.component.ts b/dashboard/users/members/members.component.ts index e3419ca1..7d295a7a 100644 --- a/dashboard/users/members/members.component.ts +++ b/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(); diff --git a/dashboard/users/members/members.module.ts b/dashboard/users/members/members.module.ts index 3eee5207..d2569ef0 100644 --- a/dashboard/users/members/members.module.ts +++ b/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]); + } +} diff --git a/sharedComponents/menu.ts b/sharedComponents/menu.ts index 6e478988..5d79f8d8 100644 --- a/sharedComponents/menu.ts +++ b/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) { diff --git a/utils/icons/icons.ts b/utils/icons/icons.ts index e01732fe..6a159d9d 100644 --- a/utils/icons/icons.ts +++ b/utils/icons/icons.ts @@ -54,11 +54,26 @@ export const remove: Icon = { } export const preview: Icon = { - name: 'preview', - data: '' + name: 'preview', + data: '' } export const bullet: Icon = { - name: 'bullet', - data: '' - } + name: 'bullet', + data: '' +} + +export const remove_circle_outline = { + name: 'remove_circle_outline', + data: '' +} + +export const person_add = { + name: 'person_add', + data: '' +} + +export const cloud_upload = { + name: 'cloud_upload', + data: '' +} diff --git a/utils/modal/alert.ts b/utils/modal/alert.ts index 3939c3c1..75c1ac8d 100644 --- a/utils/modal/alert.ts +++ b/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">
-

{{alertTitle}}

+

{{alertTitle}}

+
{{alertTitle}}
@@ -24,11 +26,12 @@ declare var UIkit: any; Don't show this message again
-
- - - + @@ -36,19 +39,6 @@ declare var UIkit: any; (click)="cancel()">{{cancelButtonText}}
-
- - - - - - - -
@@ -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.