MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[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
This commit is contained in:
k.triantafyllou 2020-10-29 14:20:41 +00:00
parent 70bd85ad49
commit a1bccfe527
10 changed files with 149 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
dashboard/sharedComponents/sidebar/sideBar.component.ts
View File

@ -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,38 +18,43 @@ 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){
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;
}

48
dashboard/users/managers/managers.component.html
View File

@ -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">
<div class="uk-card uk-card-default uk-card-body" *ngFor="let item of (showManagers)?managers:pending">
class="uk-overflow-auto uk-height-max-large">
<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"
uk-icon="icon: close; ratio: 1" title="Remove"></a>
<div class="uk-padding-small uk-padding-remove-horizontal">
<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">
<span class="uk-text-bold">Email: </span>
<input class="uk-input space uk-width-medium" [class.uk-form-danger]="invited.invalid" [formControl]="invited">
<div *ngIf="invited" class="uk-padding uk-padding-remove-horizontal uk-text-center">
<div dashboard-input [formInput]="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>

7
dashboard/users/managers/managers.component.ts
View File

@ -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();
}

12
dashboard/users/managers/managers.module.ts
View File

@ -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]);
}
}

46
dashboard/users/members/members.component.html
View File

@ -16,8 +16,13 @@
</li>
</ul>
</div>
<div class="uk-width-1-5 uk-flex uk-flex-right">
<button class="uk-button uk-button-primary" (click)="openInviteModal()">Invite Member</button>
<div class="uk-width-1-4 uk-flex uk-flex-right">
<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"
uk-icon="icon: close; ratio: 1" title="Remove"></a>
<div class="uk-padding-small uk-padding-remove-horizontal">
<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">
<span class="uk-text-bold">Email: </span>
<input class="uk-input space uk-width-medium" [class.uk-form-danger]="invited.invalid" [formControl]="invited">
<div *ngIf="invited" class="uk-padding-small uk-padding-remove-horizontal uk-text-center">
<div dashboard-input [formInput]="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>

7
dashboard/users/members/members.component.ts
View File

@ -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();

12
dashboard/users/members/members.module.ts
View File

@ -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]);
}
}

2
sharedComponents/menu.ts
View File

@ -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) {

17
utils/icons/icons.ts
View File

@ -60,5 +60,20 @@ export const preview: Icon = {
export const bullet: Icon = {
name: 'bullet',
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>'
}

31
utils/modal/alert.ts
View File

@ -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>
<span [hidden]=!okButton>
<button *ngIf="okDisabled" class="uk-button md-btn disabled uk-button-default ignoreCommunityPanelBackground" disabled>{{okButtonText}}</button>
<button *ngIf="!okDisabled"
class="uk-button md-btn md-btn-primary portal-button ignoreCommunityPanelBackground"
<div class="uk-flex-right uk-grid uk-grid-small" [hidden]=!alertFooter uk-grid>
<span [hidden]=!okButton [class.uk-flex-last]="!okButtonLeft">
<button *ngIf="okDisabled" class="uk-button disabled uk-button-default ignoreCommunityPanelBackground" disabled>{{okButtonText}}</button>
<button *ngIf="!okDisabled" [class.portal-button]="!isDashboard"
[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.