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

[Library | Trunk]: 1. Add some icons. 2. Add page-content component to handle height of page header. 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@59731 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
k.triantafyllou 2020-11-01 15:41:02 +00:00
parent 7db42368ec
commit 66fb524a0a
12 changed files with 261 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
dashboard/sharedComponents/input/input.component.css
View File

@ -1 +1,25 @@
.left, .right {
padding: 0 10px;
}
.left {
position: absolute;
left: 40px;
top: 50%;
transform: translateY(-50%);
}
.left + .input-box {
padding-left: 41px;
}
.right {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.right + .input-box {
padding-right: 41px;
}

12
dashboard/sharedComponents/input/input.component.ts
View File

@ -20,7 +20,12 @@ export interface Option {
<div *ngIf="hint" class="uk-margin-bottom uk-text-small uk-form-hint">{{hint}}</div>
<div class="uk-grid uk-flex uk-flex-middle" uk-grid>
<ng-content></ng-content>
<div [class.uk-hidden]="hideControl" class="uk-width-expand@m" [class.uk-flex-first]="!extraLeft">
<div [class.uk-hidden]="hideControl" class="uk-width-expand@m uk-position-relative" [class.uk-flex-first]="!extraLeft">
<ng-template [ngIf]="icon">
<span class="uk-text-muted" [ngClass]="iconLeft?('left'):'right'">
<icon [name]="icon"></icon>
</span>
</ng-template>
<ng-template [ngIf]="type === 'text'">
<input class="uk-input input-box uk-text-small" [placeholder]="placeholder" [formControl]="formControl"
[class.uk-form-danger]="formControl.invalid && formControl.touched">
@ -46,7 +51,8 @@ export interface Option {
</div>
</div>
<mat-checkbox *ngIf="type === 'checkbox'" [formControl]="formControl">{{label}}</mat-checkbox>
`
`,
styleUrls: ['input.component.css']
})
export class InputComponent implements OnInit, OnDestroy, OnChanges {
@Input('formInput') formControl: AbstractControl;
@ -59,6 +65,8 @@ export class InputComponent implements OnInit, OnDestroy, OnChanges {
@ViewChild('select') select: MatSelect;
@Input() extraLeft: boolean = true;
@Input() hideControl: boolean = false;
@Input() icon: string = null;
@Input() iconLeft: boolean = false;
public required: boolean = false;
private initValue: any;
private subscriptions: any[] = [];

4
dashboard/sharedComponents/input/input.module.ts
View File

@ -5,13 +5,15 @@ import {MatFormFieldModule} from "@angular/material/form-field";
import {MatInputModule} from "@angular/material/input";
import {MatSelectModule} from "@angular/material/select";
import {MatCheckboxModule} from '@angular/material/checkbox';
import {IconsModule} from "../../../utils/icons/icons.module";
@NgModule({
imports: [
SharedModule,
MatFormFieldModule,
MatInputModule,
MatSelectModule,
MatCheckboxModule
MatCheckboxModule,
IconsModule
],
exports: [
InputComponent

78
dashboard/sharedComponents/page-content/page-content.component.ts Normal file
View File

@ -0,0 +1,78 @@
import {
AfterViewInit,
ChangeDetectorRef,
Component,
ElementRef,
HostListener,
OnDestroy,
ViewChild
} from "@angular/core";
import {Observable, Subscription} from "rxjs";
import {distinctUntilChanged} from "rxjs/operators";
@Component({
selector: '[page-content]',
template: `
<div id="page_content">
<div #header id="page_content_header">
<ng-content select="[header]"></ng-content>
</div>
<div id="page_content_inner" [ngStyle]="{'margin-top.px': height.toString()}">
<ng-content select="[inner]"></ng-content>
</div>
</div>
`
})
export class PageContentComponent implements OnDestroy, AfterViewInit{
public height = 0;
private subscription: Subscription;
@ViewChild('header') header: ElementRef;
constructor(private cdr: ChangeDetectorRef) {
}
@HostListener('window:resize', ['$event'])
onResize(event) {
this.height = this.getHeight();
this.cdr.detectChanges();
}
getHeight(): number{
return this.header.nativeElement.offsetHeight;
}
setupHeightMutationObserver() {
const observable = new Observable<number>(observer => {
const callback = (mutationsList, observer2)=> {
observer.next(this.getHeight());
};
// Create an observer instance linked to the callback function
const elementObserver = new MutationObserver(callback);
// Options for the observer (which mutations to observe)
const config = { attributes: true, attributeFilter: ['class'], childList: true, subtree: true };
// Start observing the target node for configured mutations
elementObserver.observe(this.header.nativeElement, config);
});
this.subscription = observable
.pipe(
distinctUntilChanged()//if the value hasn't changed, don't continue
)
.subscribe(newHeight => {
this.height = this.getHeight();
this.cdr.detectChanges();
});
}
ngAfterViewInit() {
this.setupHeightMutationObserver();
this.height = this.getHeight();
this.cdr.detectChanges();
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
}

12
dashboard/sharedComponents/page-content/page-content.module.ts Normal file
View File

@ -0,0 +1,12 @@
import {NgModule} from "@angular/core";
import {CommonModule} from "@angular/common";
import {PageContentComponent} from "./page-content.component";
@NgModule({
declarations: [PageContentComponent],
imports: [CommonModule],
exports: [PageContentComponent],
})
export class PageContentModule {
}

5
dashboard/sharedComponents/sidebar/sideBar.component.html
View File

@ -30,7 +30,7 @@
<span [class.uk-text-small]="!open">{{item.title}}</span>
</a>
<ul [style.display]="(item.open?'block':'none')">
<ul [class.uk-hidden]="!open">
<ng-template ngFor [ngForOf]="item.items" let-subItem let-j="index">
<li *ngIf="subItem.route" [class.uk-active]="isTheActiveMenuItem(item, subItem)">
<a [routerLink]="!isTheActiveMenuItem(item, subItem)?subItem.route:null"
@ -51,8 +51,9 @@
<ul class="uk-list">
<li [class.uk-active]="isTheActiveUrl(specialMenuItem.route)">
<a [routerLink]="specialMenuItem.route" [queryParams]="specialMenuItem.params" class="uk-text-center">
<span class="uk-margin-small-right" [innerHTML]="satinizeHTML(specialMenuItem.icon)"></span>
<span [class.uk-display-block]="!open" [innerHTML]="satinizeHTML(specialMenuItem.icon)"></span>
<span [ngClass]="specialMenuItem.customClass"
[class.uk-margin-small-left]="open"
[class.uk-text-small]="!open">{{specialMenuItem.title}}</span>
</a>
</li>

20
dashboard/users/dashboard-users.component.html
View File

@ -1,14 +1,16 @@
<div>
<ng-template #tabs>
<ul class="uk-tab customTabs admin uk-flex uk-flex-center uk-flex-left@m" uk-tab>
<li [class.uk-active]="tab === 'managers'"><a (click)="changeTab('managers')"><span class="title">Managers</span></a></li>
<li [class.uk-active]="tab === 'members'"><a (click)="changeTab('members')"><span class="title">Members</span></a></li>
</ul>
<div class="uk-margin-medium-top">
<div *ngIf="tab === 'managers'">
<managers [id]="id" [type]="type" [name]="name" [link]="link"></managers>
</div>
<div *ngIf="tab === 'members'">
<members [id]="id" [type]="type" [name]="name" [link]="link"></members>
</div>
</div>
</ng-template>
<div *ngIf="tab === 'managers'">
<managers [id]="id" [type]="type" [name]="name" [link]="link">
<ng-container [ngTemplateOutlet]="tabs"></ng-container>
</managers>
</div>
<div *ngIf="tab === 'members'">
<members [id]="id" [type]="type" [name]="name" [link]="link">
<ng-container [ngTemplateOutlet]="tabs"></ng-container>
</members>
</div>

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

@ -1,55 +1,61 @@
<div>
<div *ngIf="error" class="uk-alert uk-alert-danger uk-flex uk-flex-top">
<span class="uk-margin-small-right uk-icon" uk-icon="warning"></span>
<div>
{{error}}
<div page-content>
<div header>
<div *ngIf="error" class="uk-alert uk-alert-danger uk-flex uk-flex-top">
<span class="uk-margin-small-right uk-icon" uk-icon="warning"></span>
<div>
{{error}}
</div>
</div>
<ng-content></ng-content>
<div class="uk-grid uk-flex uk-flex-middle" uk-grid>
<div class="uk-width-expand uk-flex uk-flex-left@m uk-flex-center">
<ul class="uk-subnav uk-subnav-pill">
<li [class.uk-active]="showManagers" (click)="showManagers = true">
<a>Managers</a>
</li>
<li [class.uk-active]="!showManagers" (click)="showManagers = false">
<a>Pending Managers</a>
</li>
</ul>
</div>
<div class="uk-width-1-5@l uk-width-1-3@m uk-width-1-1 uk-flex uk-flex-right@m uk-flex-center">
<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>
<div class="uk-grid uk-flex uk-flex-middle" uk-grid>
<div class="uk-width-expand uk-flex uk-flex-left@m uk-flex-center">
<ul class="uk-subnav uk-subnav-pill">
<li [class.uk-active]="showManagers" (click)="showManagers = true">
<a>Managers</a>
</li>
<li [class.uk-active]="!showManagers" (click)="showManagers = false">
<a>Pending Managers</a>
</li>
</ul>
<div inner>
<div *ngIf="loadManagers || loadPending" class="uk-margin-large-top">
<loading></loading>
</div>
<div class="uk-width-1-5@l uk-width-1-3@m uk-width-1-1 uk-flex uk-flex-right@m uk-flex-center">
<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 uk-padding-small">
<div *ngIf="(showManagers && managers.length == 0) || (!showManagers && pending.length == 0)"
class="uk-card uk-card-default uk-padding-large 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">
<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@l uk-width-1-2@m">
<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 *ngIf="!loadManagers && !loadPending" class="uk-margin-medium-top">
<div *ngIf="(showManagers && managers.length == 0) || (!showManagers && pending.length == 0)"
class="uk-card uk-card-default uk-padding-large 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">
<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@l uk-width-1-2@m">
<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>
<div *ngIf="properties.environment === 'development'" class="uk-width-expand">
<div class="uk-padding-small uk-padding-remove-horizontal uk-flex uk-flex-center">
<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 *ngIf="properties.environment === 'development'" class="uk-width-expand">
<div class="uk-padding-small uk-padding-remove-horizontal uk-flex uk-flex-center">
<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>
@ -65,7 +71,7 @@
</modal-alert>
<modal-alert #deleteManagerModal (alertOutput)="deleteManager()">
<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 managers?
Are you sure you want to remove <span class="uk-text-bold">{{selectedUser}}</span> from managers?
</div>
</modal-alert>
<modal-alert #deletePendingModal (alertOutput)="deletePendingManager()">

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

@ -9,9 +9,10 @@ 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";
import {PageContentModule} from "../../sharedComponents/page-content/page-content.module";
@NgModule({
imports: [CommonModule, AlertModalModule, ReactiveFormsModule, LoadingModule, IconsModule, InputModule],
imports: [CommonModule, AlertModalModule, ReactiveFormsModule, LoadingModule, IconsModule, InputModule, PageContentModule],
declarations: [ManagersComponent],
exports: [ManagersComponent],
providers: [EmailService]

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

@ -1,55 +1,61 @@
<div>
<div *ngIf="error" class="uk-alert uk-alert-danger uk-flex uk-flex-top">
<span class="uk-margin-small-right uk-icon" uk-icon="warning"></span>
<div>
{{error}}
<div page-content>
<div id="page_content_header">
<div *ngIf="error" class="uk-alert uk-alert-danger uk-flex uk-flex-top">
<span class="uk-margin-small-right uk-icon" uk-icon="warning"></span>
<div>
{{error}}
</div>
</div>
<ng-content></ng-content>
<div class="uk-grid uk-flex uk-flex-middle" uk-grid>
<div class="uk-width-expand uk-flex uk-flex-left@m uk-flex-center">
<ul class="uk-subnav uk-subnav-pill">
<li [class.uk-active]="showMembers" (click)="showMembers = true">
<a>Members</a>
</li>
<li [class.uk-active]="!showMembers" (click)="showMembers = false">
<a>Pending Members</a>
</li>
</ul>
</div>
<div class="uk-width-1-5@l uk-width-1-3@m uk-flex uk-flex-right@m uk-flex-center">
<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>
<div class="uk-grid uk-flex uk-flex-middle" uk-grid>
<div class="uk-width-expand uk-flex uk-flex-left@m uk-flex-center">
<ul class="uk-subnav uk-subnav-pill">
<li [class.uk-active]="showMembers" (click)="showMembers = true">
<a>Members</a>
</li>
<li [class.uk-active]="!showMembers" (click)="showMembers = false">
<a>Pending Members</a>
</li>
</ul>
<div id="page_content_inner">
<div *ngIf="loadMembers || loadPending" class="uk-margin-large-top">
<loading></loading>
</div>
<div class="uk-width-1-5@l uk-width-1-3@m uk-flex uk-flex-right@m uk-flex-center">
<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">
<loading></loading>
</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-large 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 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@l uk-width-1-2@m">
<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 *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-large 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 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@l uk-width-1-2@m">
<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>
<div *ngIf="properties.environment === 'development'" class="uk-width-expand">
<div class="uk-padding-small uk-padding-remove-horizontal uk-flex uk-flex-center">
<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 *ngIf="properties.environment === 'development'" class="uk-width-expand">
<div class="uk-padding-small uk-padding-remove-horizontal uk-flex uk-flex-center">
<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>
@ -65,7 +71,7 @@
</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?
Are you sure you want to remove <span class="uk-text-bold">{{selectedUser}}</span> from members?
</div>
</modal-alert>
<modal-alert #deletePendingModal (alertOutput)="deletePendingMember()">

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

@ -9,9 +9,10 @@ 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";
import {PageContentModule} from "../../sharedComponents/page-content/page-content.module";
@NgModule({
imports: [CommonModule, AlertModalModule, ReactiveFormsModule, LoadingModule, IconsModule, InputModule],
imports: [CommonModule, AlertModalModule, ReactiveFormsModule, LoadingModule, IconsModule, InputModule, PageContentModule],
declarations: [MembersComponent],
exports: [MembersComponent],
providers: [EmailService]

7
utils/icons/icons.ts
View File

@ -59,7 +59,7 @@ 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>'
data: '<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="20"><path d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="10"/></svg>'
}
export const remove_circle_outline = {
@ -91,3 +91,8 @@ export const lock = {
name: 'lock',
data: '<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="20"><g fill="none"><path d="M0 0h24v24H0V0z"/><path d="M0 0h24v24H0V0z" opacity=".87"/></g><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM9 8V6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9z"/></svg>'
}
export const search = {
name: 'search',
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="M15.5 14h-.79l-.28-.27c1.2-1.4 1.82-3.31 1.48-5.34-.47-2.78-2.79-5-5.59-5.34-4.23-.52-7.79 3.04-7.27 7.27.34 2.8 2.56 5.12 5.34 5.59 2.03.34 3.94-.28 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>'
}