Revision 61060
Added by Konstantinos Triantafyllou about 3 years ago
| modules/uoa-services-library/branches/angular-7/ng-openaire-library/src/app/sharedComponents/feedback/feedback.module.ts | ||
|---|---|---|
| 1 |
import { NgModule } from '@angular/core';
|
|
| 2 |
import { CommonModule } from '@angular/common';
|
|
| 3 |
import { FormsModule } from '@angular/forms';
|
|
| 4 |
import {FeedbackComponent} from './feedback.component';
|
|
| 5 |
|
|
| 6 |
|
|
| 7 |
@NgModule({
|
|
| 8 |
imports: [ |
|
| 9 |
CommonModule, FormsModule |
|
| 10 |
|
|
| 11 |
], |
|
| 12 |
declarations: [ |
|
| 13 |
FeedbackComponent |
|
| 14 |
], |
|
| 15 |
exports: [ |
|
| 16 |
FeedbackComponent |
|
| 17 |
] |
|
| 18 |
}) |
|
| 19 |
export class FeedbackModule{ }
|
|
| modules/uoa-services-library/branches/angular-7/ng-openaire-library/src/app/sharedComponents/sidebar/sideBar.component.ts | ||
|---|---|---|
| 1 |
import {Component, Input, OnInit} from '@angular/core';
|
|
| 2 |
import {SideMenuItem} from '../menu';
|
|
| 3 |
import {ActivatedRoute, Router} from '@angular/router';
|
|
| 4 |
import {Subscriber} from "rxjs";
|
|
| 5 |
|
|
| 6 |
@Component({
|
|
| 7 |
selector: 'sidebar', |
|
| 8 |
templateUrl: 'sideBar.component.html' |
|
| 9 |
}) |
|
| 10 |
export class SideBarComponent implements OnInit {
|
|
| 11 |
@Input() communityId: string = ''; |
|
| 12 |
@Input() menuItems: SideMenuItem[] = []; |
|
| 13 |
currentParams: any = {};
|
|
| 14 |
sub; |
|
| 15 |
constructor(private router: Router, |
|
| 16 |
private route: ActivatedRoute) {
|
|
| 17 |
} |
|
| 18 |
ngOnDestroy() {
|
|
| 19 |
if (this.sub instanceof Subscriber) {
|
|
| 20 |
this.sub.unsubscribe(); |
|
| 21 |
} |
|
| 22 |
} |
|
| 23 |
ngOnInit(): void {
|
|
| 24 |
this.sub = this.route.queryParams.subscribe(params => {
|
|
| 25 |
this.currentParams = params; |
|
| 26 |
}); |
|
| 27 |
} |
|
| 28 |
|
|
| 29 |
private getCurrentRoute(): string {
|
|
| 30 |
return this.router.url.split('?')[0];
|
|
| 31 |
} |
|
| 32 |
|
|
| 33 |
isTheActiveMenu(route: string, params: any): boolean {
|
|
| 34 |
return route === this.getCurrentRoute() && |
|
| 35 |
(!params || JSON.stringify(this.currentParams) === JSON.stringify(params)); |
|
| 36 |
} |
|
| 37 |
} |
|
| modules/uoa-services-library/branches/angular-7/ng-openaire-library/src/app/sharedComponents/navigationBar.component.html | ||
|---|---|---|
| 1 |
<div *ngIf="showMenu"> |
|
| 2 |
<div *ngIf="(properties.environment =='beta' || properties.environment =='development') && showLogo && header.badge" |
|
| 3 |
class="uk-visible@m"> |
|
| 4 |
<a [routerLink]="header.route" [href]="header.url"><img class="large-beta-indication" |
|
| 5 |
[src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')" |
|
| 6 |
alt="BETA" style="height: 104px; "> |
|
| 7 |
</a> |
|
| 8 |
</div> |
|
| 9 |
<div class="tm-header-mobile uk-hidden@m"> |
|
| 10 |
<nav class="uk-navbar-container uk-navbar" uk-navbar="" |
|
| 11 |
[class.uk-navbar-transparent]="header.stickyAnimation === false"> |
|
| 12 |
<div |
|
| 13 |
*ngIf="(properties.environment =='beta' || properties.environment =='development') && showLogo && header.badge" |
|
| 14 |
class="uk-position-top-left"> |
|
| 15 |
<img class="small-beta-indication" |
|
| 16 |
[src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')" |
|
| 17 |
alt="BETA" style="height: 60px; "> |
|
| 18 |
</div> |
|
| 19 |
<!-- class="uk-navbar-right"--> <!-- if we want to revert the menu - put it on the right --> |
|
| 20 |
<div *ngIf="!onlyTop || userMenu" class="uk-navbar-left"> |
|
| 21 |
<a *ngIf="!offCanvasFlip" class="uk-navbar-toggle" href="#tm-mobile" uk-toggle="" style="z-index:1000;"> |
|
| 22 |
<div uk-navbar-toggle-icon="" class="uk-navbar-toggle-icon uk-icon custom-navbar-toggle-icon"></div> |
|
| 23 |
</a> |
|
| 24 |
</div> |
|
| 25 |
<div class="uk-navbar-center"> |
|
| 26 |
<ng-container *ngTemplateOutlet="header_template; context: {mobile: true}"></ng-container>
|
|
| 27 |
</div> |
|
| 28 |
<div *ngIf="!onlyTop || userMenu" class="uk-navbar-right"> |
|
| 29 |
<a *ngIf="offCanvasFlip" class="uk-navbar-toggle" href="#tm-mobile" uk-toggle="" style="z-index:1000;"> |
|
| 30 |
<div uk-navbar-toggle-icon="" class="uk-navbar-toggle-icon uk-icon custom-navbar-toggle-icon"></div> |
|
| 31 |
</a> |
|
| 32 |
</div> |
|
| 33 |
</nav> |
|
| 34 |
|
|
| 35 |
</div> |
|
| 36 |
<div *ngIf="specialAnnouncementContent" class="uk-hidden@m" [innerHTML]="specialAnnouncementContent"> |
|
| 37 |
</div> |
|
| 38 |
<div id="tm-mobile" [attr.uk-offcanvas]="(offCanvasFlip?'flip:'+offCanvasFlip:'')" mode="slide" overlay="" |
|
| 39 |
class="uk-offcanvas uk-hidden@m" |
|
| 40 |
style="z-index:9999;"> |
|
| 41 |
<div class="uk-offcanvas-bar"> |
|
| 42 |
<button class="uk-offcanvas-close uk-close uk-icon" type="button" uk-close=""></button> |
|
| 43 |
<div class="uk-child-width-1-1 uk-grid" uk-grid=""> |
|
| 44 |
<div> |
|
| 45 |
<div class="uk-panel" id="module-0"> |
|
| 46 |
<ul class="uk-nav uk-nav-default"> |
|
| 47 |
<li *ngIf="(['explore','connect','monitor','provide','develop']).indexOf(portal)!=-1" |
|
| 48 |
class="uk-nav-header uk-parent"> |
|
| 49 |
Dashboards |
|
| 50 |
<ul class="uk-nav-sub"> |
|
| 51 |
<li *ngIf="portal!='explore'"><a |
|
| 52 |
[href]="'https://'+(properties.environment =='beta' || properties.environment =='development' ?'beta.':'')+'explore.openaire.eu'" |
|
| 53 |
target="_blank" class="uk-heading-bullet explore-heading-bullet">EXPLORE</a></li> |
|
| 54 |
<li *ngIf="portal!='provide'"><a |
|
| 55 |
[href]="'https://'+(properties.environment =='beta' || properties.environment =='development'?'beta.':'')+'provide.openaire.eu'" |
|
| 56 |
target="_blank" class="uk-heading-bullet provide-heading-bullet">PROVIDE</a></li> |
|
| 57 |
<li *ngIf="portal!='connect'"><a |
|
| 58 |
[href]="'https://'+(properties.environment =='beta' || properties.environment =='development'?'beta.':'')+'connect.openaire.eu'" |
|
| 59 |
target="_blank" class="uk-heading-bullet connect-heading-bullet">CONNECT</a></li> |
|
| 60 |
<li *ngIf="portal!='monitor'"><a [href]="'https://'+(properties.environment =='beta' || |
|
| 61 |
properties.environment =='development'?'beta.':'')+'monitor.openaire.eu'" target="_blank" |
|
| 62 |
class="uk-heading-bullet monitor-heading-bullet">MONITOR</a></li> |
|
| 63 |
<li *ngIf="portal!='develop'"><a href="https://develop.openaire.eu" target="_blank" |
|
| 64 |
class="uk-heading-bullet develop-heading-bullet">DEVELOP</a></li> |
|
| 65 |
</ul> |
|
| 66 |
</li> |
|
| 67 |
<ng-container *ngIf="!onlyTop"> |
|
| 68 |
<ng-container *ngFor="let menu of menuItems"> |
|
| 69 |
<li class="uk-nav-header uk-parent " *ngIf="showHomeMenuItem && currentRoute.route !== '/'"> |
|
| 70 |
<a routerLinkActive="uk-link" routerLink="/">Home</a> |
|
| 71 |
</li> |
|
| 72 |
<li class="uk-nav-header uk-parent" [class.uk-active]="isTheActiveMenu(menu)" |
|
| 73 |
*ngIf="isAtleastOneEnabled(menu.rootItem.entitiesRequired,showEntity) && isAtleastOneEnabled(menu.rootItem.routeRequired, showPage)"> |
|
| 74 |
<!--a routerLinkActive="uk-link" routerLink="{{menu.rootItem.route}}" [queryParams]=menu.rootItem.params class="uk-offcanvas-close custom-offcanvas-close">{{menu.rootItem.title}}</a-->
|
|
| 75 |
<a *ngIf="menu.rootItem.route.length > 0 && isEnabled([menu.rootItem.route], showPage) || !menu.rootItem.routeRequired " |
|
| 76 |
routerLinkActive="uk-link" routerLink="{{menu.rootItem.route}}"
|
|
| 77 |
[routerLinkActiveOptions]="{exact: true}"
|
|
| 78 |
[queryParams]="menu.rootItem.params" [fragment]="menu.rootItem.fragment" |
|
| 79 |
class="uk-offcanvas-close custom-offcanvas-close">{{menu.rootItem.title}}</a>
|
|
| 80 |
<a *ngIf="menu.rootItem.route.length == 0 && menu.rootItem.url.length > 0" |
|
| 81 |
routerLinkActive="uk-link" href="{{menu.rootItem.url}}" target="_blank"
|
|
| 82 |
class="uk-offcanvas-close custom-offcanvas-close">{{menu.rootItem.title}}</a>
|
|
| 83 |
<a *ngIf="(menu.rootItem.route.length == 0 && menu.rootItem.url.length == 0) || (menu.rootItem.route.length >0 && menu.rootItem.routeRequired && !isEnabled([menu.rootItem.route], showPage) && isAtleastOneEnabled(menu.rootItem.routeRequired, showPage))" |
|
| 84 |
class="uk-offcanvas-close custom-offcanvas-close">{{menu.rootItem.title}}</a>
|
|
| 85 |
|
|
| 86 |
<ul class="uk-nav-sub"> |
|
| 87 |
<ng-container *ngFor="let submenu of menu.items"> |
|
| 88 |
<li [class.uk-active]="isTheActiveMenuItem(submenu)" *ngIf="isEnabled(submenu.entitiesRequired,showEntity) && isEnabled(submenu.routeRequired, showPage) && (submenu.route.length > 0 || submenu.url.length > 0)"> |
|
| 89 |
<a *ngIf="submenu.route.length > 0" routerLinkActive="uk-link" |
|
| 90 |
routerLink="{{submenu.route}}" [queryParams]=submenu.params [fragment]="submenu.fragment"
|
|
| 91 |
class="uk-offcanvas-close custom-offcanvas-close">{{submenu.title}}</a>
|
|
| 92 |
<a *ngIf="submenu.route.length == 0 && submenu.url.length > 0" routerLinkActive="uk-link" |
|
| 93 |
href="{{submenu.url}}" target="_blank"
|
|
| 94 |
class="uk-offcanvas-close custom-offcanvas-close">{{submenu.title}}</a>
|
|
| 95 |
|
|
| 96 |
</li> |
|
| 97 |
<li *ngIf="submenu.route.length == 0 && submenu.url.length == 0 && isEnabled(submenu.entitiesRequired,showEntity) && isEnabled(submenu.routeRequired, showPage)" |
|
| 98 |
class="uk-nav-header">{{submenu.title}}</li>
|
|
| 99 |
</ng-container> |
|
| 100 |
|
|
| 101 |
</ul> |
|
| 102 |
</li> |
|
| 103 |
</ng-container> |
|
| 104 |
</ng-container> |
|
| 105 |
<ng-container *ngIf="userMenu"> |
|
| 106 |
<user-mini [user]="user" mobileView=true |
|
| 107 |
[userMenuItems]=userMenuItems [logInUrl]=properties.loginUrl |
|
| 108 |
[logOutUrl]=properties.logoutUrl [cookieDomain]=properties.cookieDomain></user-mini> |
|
| 109 |
</ng-container> |
|
| 110 |
</ul> |
|
| 111 |
</div> |
|
| 112 |
</div> |
|
| 113 |
|
|
| 114 |
</div> |
|
| 115 |
</div> |
|
| 116 |
</div> |
|
| 117 |
<div *ngIf="(['explore','connect','monitor','provide','develop']).indexOf(portal)!=-1" |
|
| 118 |
class="tm-toolbar custom-{{portal}}-toolbar uk-visible@m">
|
|
| 119 |
<div class="uk-container uk-flex uk-flex-middle uk-container-expand"> |
|
| 120 |
<div class="uk-margin-auto-left"> |
|
| 121 |
<div class="uk-grid-medium uk-child-width-auto uk-flex-middle uk-grid uk-grid-stack" |
|
| 122 |
uk-grid="margin: uk-margin-small-top"> |
|
| 123 |
<div class="uk-first-column"> |
|
| 124 |
<div class="uk-panel inner" id="module-119"> |
|
| 125 |
<ul class="uk-subnav uk-subnav-line"> |
|
| 126 |
<li><a [href]="'https://'+(properties.environment =='beta'?'beta':'www')+'.openaire.eu'" target="_blank" |
|
| 127 |
class="home-icon"><span class="uk-responsive-height"> |
|
| 128 |
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" |
|
| 129 |
enable-background="new 0 0 20 20" height="20px" id="Layer_1" version="1.1" |
|
| 130 |
viewBox="0 0 48 48" width="20px" xml:space="preserve"><path id="home" clip-rule="evenodd" d="M44.715,23.711c-0.381,0.382-1,0.382-1.381,0l-8.939-8.938 c-0.064-0.051-0.119-0.106-0.17-0.171l-3.83-3.829c-0.064-0.051-0.119-0.106-0.17-0.171L24,4.377L4.667,23.711 c-0.381,0.382-1,0.382-1.381,0c-0.381-0.381-0.381-1,0-1.381L23.191,2.425c0.031-0.047,0.053-0.101,0.094-0.144 C23.482,2.085,23.742,1.994,24,2c0.258-0.006,0.518,0.084,0.715,0.281c0.043,0.042,0.062,0.096,0.096,0.144L30,7.616V4.997 c0,0,0,0,0,0c0-0.552,0.447-1,1-1h4c0.277,0,0.527,0.112,0.707,0.293C35.889,4.471,36,4.721,36,4.997v8.619l8.715,8.714 C45.096,22.711,45.096,23.33,44.715,23.711z M34,5.997h-2v3.619l2,2V5.997z M10,21.997c0.552,0,1,0.448,1,1v19c0,1.105,0.896,2,2,2 h6l0,0v-13c0-0.553,0.447-1,1-1h8c0.553,0,1,0.447,1,1v13l0,0h6c1.105,0,2-0.895,2-2v-19c0-0.552,0.447-1,1-1s1,0.448,1,1v19 c0,2.209-1.791,4-4,4H13c-2.209,0-4-1.791-4-4v-19C9,22.444,9.448,21.997,10,21.997z M27,43.996v-12h-6v12l0,0H27L27,43.996z" fill-rule="evenodd" fill="#fff"/></svg> |
|
| 131 |
</span></a></li> |
|
| 132 |
<li [class]="(portal=='explore')?'custom-'+portal+'-li':''"><a |
|
| 133 |
[href]="'https://'+(properties.environment =='beta' || properties.environment =='development'?'beta.':'')+'explore.openaire.eu'" |
|
| 134 |
title="Search in OA. Link your research">Explore</a></li> |
|
| 135 |
<li [class]="(portal=='provide')?'custom-'+portal+'-li':''"><a |
|
| 136 |
[href]="'https://'+(properties.environment =='beta' || properties.environment =='development'?'beta.':'')+'provide.openaire.eu'" |
|
| 137 |
target="_blank" title="Content Provider Dashboard">Provide</a></li> |
|
| 138 |
<li [class]="(portal=='connect'||portal=='connect-admin')?'custom-'+portal+'-li':''"><a |
|
| 139 |
[href]="'https://'+(properties.environment =='beta' || properties.environment =='development' ?'beta.':'')+'connect.openaire.eu'" |
|
| 140 |
target="_blank" title="Research Community Dashboard">Connect</a></li> |
|
| 141 |
<li [class]="(portal=='monitor')?'custom-'+portal+'-li':''"><a |
|
| 142 |
[href]="'https://'+(properties.environment =='beta' || properties.environment =='development'?'beta.':'')+'monitor.openaire.eu'" |
|
| 143 |
target="_blank" title="Monitoring Dashboard">Monitor</a></li> |
|
| 144 |
<li [class]="(portal=='develop')?'custom-'+portal+'-li':''"><a href="https://develop.openaire.eu" |
|
| 145 |
target="_blank" title="APIs">Develop</a> |
|
| 146 |
</li> |
|
| 147 |
</ul> |
|
| 148 |
</div> |
|
| 149 |
</div> |
|
| 150 |
</div> |
|
| 151 |
</div> |
|
| 152 |
</div> |
|
| 153 |
</div> |
|
| 154 |
<div *ngIf="specialAnnouncementContent" class="uk-visible@m" [innerHTML]="specialAnnouncementContent"> |
|
| 155 |
|
|
| 156 |
</div> |
|
| 157 |
<div class="tm-header uk-visible@m tm-header-transparent" uk-header=""> |
|
| 158 |
<div id="stickyNavbar" [class]="'uk-navbar-container uk-sticky uk-navbar-transparent '+portal+'-menu'" uk-sticky="" |
|
| 159 |
media="768" cls-active="uk-active uk-navbar-sticky" |
|
| 160 |
[attr.animation]="(header.stickyAnimation != false ?'uk-animation-slide-top':null)" |
|
| 161 |
top=".tm-header + [class*="uk-section"]" cls-inactive="uk-navbar-transparent" style=""> |
|
| 162 |
<div |
|
| 163 |
*ngIf="(properties.environment =='beta' || properties.environment =='development') && showLogo && header.badge"> |
|
| 164 |
<img class="beta-indication-sticky" |
|
| 165 |
[src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')" |
|
| 166 |
alt="BETA" style="height: 102px; "> |
|
| 167 |
</div> |
|
| 168 |
<div class="uk-container uk-container-expand"> |
|
| 169 |
<nav class="uk-navbar" uk-navbar="{"align":"left"}">
|
|
| 170 |
<div *ngIf="showLogo && header.position== 'left'" class="uk-navbar-left uk-visible@l"> |
|
| 171 |
<ng-container *ngTemplateOutlet="header_template; context: {mobile: false}"></ng-container>
|
|
| 172 |
</div> |
|
| 173 |
<div *ngIf="showLogo && header.position == 'left'" class="uk-navbar-left uk-visible@m uk-hidden@l"> |
|
| 174 |
<ng-container *ngTemplateOutlet="header_template; context: {mobile: false}"></ng-container>
|
|
| 175 |
</div> |
|
| 176 |
<div *ngIf="showLogo && header.position == 'center'" class="uk-margin-auto uk-visible@m"> |
|
| 177 |
<ng-container *ngTemplateOutlet="header_template; context: {mobile: false}"></ng-container>
|
|
| 178 |
</div> |
|
| 179 |
<!-- <div *ngIf="!onlyTop" class="uk-navbar-center"> --> |
|
| 180 |
<div *ngIf="!onlyTop" class="uk-navbar-right uk-position-top-right"> |
|
| 181 |
<ul [class]="'uk-navbar-nav'+(!userMenu?' uk-margin-right':'')"> |
|
| 182 |
<li class="uk-parent" *ngIf="showHomeMenuItem && currentRoute.route !== '/'"> |
|
| 183 |
<a routerLinkActive="uk-link" routerLink="/">Home</a> |
|
| 184 |
</li> |
|
| 185 |
<ng-container *ngFor="let menu of menuItems"> |
|
| 186 |
<li class="uk-parent" [class.uk-active]="isTheActiveMenu(menu)" |
|
| 187 |
*ngIf="isAtleastOneEnabled(menu.rootItem.entitiesRequired,showEntity) && isAtleastOneEnabled(menu.rootItem.routeRequired, showPage)"> |
|
| 188 |
<!--a routerLinkActive="uk-link" routerLink="{{menu.rootItem.route}}" [queryParams]=menu.rootItem.params class="" aria-expanded="false">{{menu.rootItem.title}}</a-->
|
|
| 189 |
<a *ngIf="menu.rootItem.route.length > 0 && (isEnabled([menu.rootItem.route], showPage) || !menu.rootItem.routeRequired )" |
|
| 190 |
routerLinkActive="uk-link" routerLink="{{menu.rootItem.route}}"
|
|
| 191 |
[queryParams]="menu.rootItem.params" |
|
| 192 |
[fragment]="menu.rootItem.fragment"> {{menu.rootItem.title}}</a>
|
|
| 193 |
<a *ngIf="menu.rootItem.route.length == 0 && menu.rootItem.url.length > 0" routerLinkActive="uk-link" |
|
| 194 |
href="{{menu.rootItem.url}}" target="_blank" aria-expanded="false">{{menu.rootItem.title}}</a>
|
|
| 195 |
<a *ngIf="(menu.rootItem.route.length == 0 && menu.rootItem.url.length == 0) || ( menu.rootItem.route.length >0 && menu.rootItem.routeRequired && !isEnabled([menu.rootItem.route], showPage) && isAtleastOneEnabled(menu.rootItem.routeRequired, showPage)) " |
|
| 196 |
class="uk-offcanvas-close custom-offcanvas-close">{{menu.rootItem.title}}</a>
|
|
| 197 |
<div *ngIf="menu.items.length > 0" class="uk-navbar-dropdown uk-navbar-dropdown-bottom-left" |
|
| 198 |
style="top: 80px; left: 0px;" id="{{menu.rootItem.id}}" uk-toggle>
|
|
| 199 |
<div class="uk-navbar-dropdown-grid uk-child-width-1-1 uk-grid uk-grid-stack" uk-grid=""> |
|
| 200 |
<div class="uk-first-column uk-height-max-medium uk-overflow-auto"> |
|
| 201 |
<ul class="uk-nav uk-navbar-dropdown-nav"> |
|
| 202 |
<ng-container *ngFor="let submenu of menu.items"> |
|
| 203 |
<li *ngIf="isEnabled(submenu.entitiesRequired,showEntity) && |
|
| 204 |
isEnabled(submenu.routeRequired, showPage) && (submenu.route.length > 0 || |
|
| 205 |
submenu.url.length > 0)" [class.uk-active]="isTheActiveMenuItem(submenu)"> |
|
| 206 |
<a *ngIf="submenu.route.length > 0" routerLinkActive="uk-link" |
|
| 207 |
routerLink="{{submenu.route}}" [queryParams]="submenu.params"
|
|
| 208 |
[fragment]="submenu.fragment">{{submenu.title}}</a>
|
|
| 209 |
<a *ngIf="submenu.route.length == 0 && submenu.url.length > 0" routerLinkActive="uk-link" |
|
| 210 |
href="{{submenu.url}}" target="_blank">{{submenu.title}}</a>
|
|
| 211 |
</li> |
|
| 212 |
<li *ngIf="submenu.route.length == 0 && submenu.url.length == 0 && isEnabled(submenu.entitiesRequired,showEntity) && isEnabled(submenu.routeRequired, showPage)" |
|
| 213 |
class="uk-nav-header">{{submenu.title}}</li>
|
|
| 214 |
</ng-container> |
|
| 215 |
</ul> |
|
| 216 |
</div> |
|
| 217 |
</div> |
|
| 218 |
</div> |
|
| 219 |
|
|
| 220 |
</li> |
|
| 221 |
</ng-container> |
|
| 222 |
|
|
| 223 |
</ul> |
|
| 224 |
<!-- </div> --> |
|
| 225 |
<!-- <div *ngIf="userMenu" class="uk-navbar-right"> --> |
|
| 226 |
<!-- <div *ngIf="userMenu" class="uk-navbar-right"> --> |
|
| 227 |
<user-mini *ngIf="userMenu" [user]="user" [dark]="dark" |
|
| 228 |
[userMenuItems]=userMenuItems [logInUrl]=properties.loginUrl [logOutUrl]=properties.logoutUrl |
|
| 229 |
[cookieDomain]=properties.cookieDomain></user-mini> |
|
| 230 |
|
|
| 231 |
</div> |
|
| 232 |
</nav> |
|
| 233 |
</div> |
|
| 234 |
</div> |
|
| 235 |
|
|
| 236 |
</div> |
|
| 237 |
<div class="first_page_section uk-section-default uk-section uk-padding-remove-vertical"> |
|
| 238 |
<div |
|
| 239 |
class="first_page_banner_headline uk-grid-collapse uk-flex-middle uk-margin-remove-vertical uk-grid uk-grid-stack" |
|
| 240 |
uk-grid=""> |
|
| 241 |
</div> |
|
| 242 |
</div> |
|
| 243 |
</div> |
|
| 244 |
<ng-template #header_template let-mobile="mobile"> |
|
| 245 |
<a *ngIf="!header.url" [routerLink]="header.route" [class.uk-padding-remove]="header.position !== 'left'" |
|
| 246 |
class="uk-logo uk-navbar-item uk-text-center uk-text-bold"> |
|
| 247 |
<img *ngIf="(mobile && header.logoSmallUrl) || (!mobile && header.logoUrl)" |
|
| 248 |
[src]="!mobile?header.logoUrl:header.logoSmallUrl" |
|
| 249 |
[alt]="header.title" |
|
| 250 |
class="uk-responsive-height"> |
|
| 251 |
<ng-container *ngIf="(mobile && !header.logoSmallUrl) || (!mobile && !header.logoUrl)"> |
|
| 252 |
<div class="multi-line-ellipsis lines-2" [style.max-width]="(!mobile)?'25vw':null" [title]="header.title"> |
|
| 253 |
<p>{{header.title}}</p>
|
|
| 254 |
</div> |
|
| 255 |
</ng-container> |
|
| 256 |
</a> |
|
| 257 |
<a *ngIf="header.url" [href]="header.url" [class.uk-padding-remove]="header.position !== 'left'" |
|
| 258 |
class="uk-logo uk-navbar-item uk-text-center uk-text-bold"> |
|
| 259 |
<img *ngIf="(mobile && header.logoSmallUrl) || (!mobile && header.logoUrl)" |
|
| 260 |
[src]="!mobile?header.logoUrl:header.logoSmallUrl" |
|
| 261 |
[alt]="header.title" |
|
| 262 |
class="uk-responsive-height"> |
|
| 263 |
<ng-container *ngIf="(mobile && !header.logoSmallUrl) || (!mobile && !header.logoUrl)"> |
|
| 264 |
<div class="multi-line-ellipsis lines-2" [style.max-width]="(!mobile)?'25vw':null" [title]="header.title"> |
|
| 265 |
<p>{{header.title}}</p>
|
|
| 266 |
</div> |
|
| 267 |
</ng-container> |
|
| 268 |
</a> |
|
| 269 |
</ng-template> |
|
| modules/uoa-services-library/branches/angular-7/ng-openaire-library/src/app/sharedComponents/navigationBar.module.ts | ||
|---|---|---|
| 1 |
import { NgModule } from '@angular/core';
|
|
| 2 |
import { CommonModule } from '@angular/common';
|
|
| 3 |
import { FormsModule } from '@angular/forms';
|
|
| 4 |
|
|
| 5 |
import { RouterModule } from "@angular/router";
|
|
| 6 |
|
|
| 7 |
import { NavigationBarComponent} from './navigationBar.component';
|
|
| 8 |
|
|
| 9 |
import { UserMiniModule} from '../login/userMiniModule.module';
|
|
| 10 |
import {SearchBarModule} from "./searchBar/searchBar.module";
|
|
| 11 |
|
|
| 12 |
@NgModule({
|
|
| 13 |
imports: [ |
|
| 14 |
CommonModule, FormsModule, |
|
| 15 |
RouterModule, |
|
| 16 |
UserMiniModule |
|
| 17 |
// , SearchBarModule |
|
| 18 |
], |
|
| 19 |
declarations: [ |
|
| 20 |
NavigationBarComponent |
|
| 21 |
], |
|
| 22 |
providers:[], |
|
| 23 |
exports: [ |
|
| 24 |
NavigationBarComponent |
|
| 25 |
] |
|
| 26 |
}) |
|
| 27 |
export class NavigationBarModule{ }
|
|
| modules/uoa-services-library/branches/angular-7/ng-openaire-library/src/app/sharedComponents/sidebar/sideBar.module.ts | ||
|---|---|---|
| 1 |
import {NgModule} from '@angular/core';
|
|
| 2 |
import {CommonModule} from '@angular/common';
|
|
| 3 |
|
|
| 4 |
import {RouterModule} from "@angular/router";
|
|
| 5 |
|
|
| 6 |
import {SideBarComponent} from './sideBar.component';
|
|
| 7 |
|
|
| 8 |
@NgModule({
|
|
| 9 |
imports: [ |
|
| 10 |
CommonModule, |
|
| 11 |
RouterModule |
|
| 12 |
], |
|
| 13 |
declarations: [ |
|
| 14 |
SideBarComponent |
|
| 15 |
], |
|
| 16 |
providers: [], |
|
| 17 |
exports: [ |
|
| 18 |
SideBarComponent |
|
| 19 |
] |
|
| 20 |
}) |
|
| 21 |
export class SideBarModule {
|
|
| 22 |
} |
|
| modules/uoa-services-library/branches/angular-7/ng-openaire-library/src/app/sharedComponents/searchBar/searchBar.component.html | ||
|---|---|---|
| 1 |
|
|
| 2 |
<form *ngIf="enableSearchbar" |
|
| 3 |
class=" uk-margin-medium-bottom uk-margin-top searchBar uk-form-width-1-1 uk-grid uk-margin-small-left"> |
|
| 4 |
<div |
|
| 5 |
[class]="((entitiesSelection)?'':'uk-width-small@s')+' uk-margin-small-top uk-padding-remove-left'"> |
|
| 6 |
<entities-selection *ngIf="entitiesSelection" [simpleView]="true" [currentEntity]="entityType" |
|
| 7 |
[selectedEntity]="entityType" |
|
| 8 |
[properties]="properties" |
|
| 9 |
(selectionChange)=" entityChanged($event)" |
|
| 10 |
[customFilter]="customFilter" |
|
| 11 |
[onlyresults]="false" matPanelClass="navbarMatSelectPanelClass" |
|
| 12 |
[onChangeNavigate]="false" ></entities-selection> |
|
| 13 |
|
|
| 14 |
</div> |
|
| 15 |
<div class=" uk-padding-remove-left uk-margin-small-top uk-inline uk-width-expand"> |
|
| 16 |
<a *ngIf="keyword.length > 0" class="uk-form-icon uk-form-icon-flip" |
|
| 17 |
(click)="keyword = ''" |
|
| 18 |
uk-icon="icon: close"></a> |
|
| 19 |
<input type="text" class="uk-input text-input-box uk-width-expand" |
|
| 20 |
[placeholder]="searchPlaceHolder" aria-describedby="sizing-addon2" |
|
| 21 |
[(ngModel)]="keyword" name="keyword"> |
|
| 22 |
</div> |
|
| 23 |
<!--<div class="uk-padding-remove-left uk-margin-small-top"> |
|
| 24 |
<button (click)="keywordChanged()" type="submit" |
|
| 25 |
class=" uk-button portal-button uk-text-bold "> |
|
| 26 |
Search |
|
| 27 |
</button> |
|
| 28 |
</div>--> |
|
| 29 |
<button (click)="keywordChanged()" type="submit" |
|
| 30 |
class="uk-icon-button uk-icon portal-button uk-padding-remove-left uk-margin-small-left uk-margin-small-top"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="search"><circle fill="none" stroke="#000" stroke-width="1.1" cx="9" cy="9" r="7"></circle><path fill="none" stroke="#000" stroke-width="1.1" d="M14,14 L18,18 L14,14 Z"></path></svg> |
|
| 31 |
</button> |
|
| 32 |
<a *ngIf="advancedSearchLink" class="portal-link uk-margin-top uk-padding-remove-left uk-margin-small-left" |
|
| 33 |
routerLinkActive="router-link-active" [routerLink]="advancedSearchLink" [queryParams]="parameters"> Advanced search</a> |
|
| 34 |
</form> |
|
| modules/uoa-services-library/branches/angular-7/ng-openaire-library/src/app/sharedComponents/navigationBar.component.ts | ||
|---|---|---|
| 1 |
import {Component, Input, OnDestroy, OnInit} from '@angular/core';
|
|
| 2 |
import {ActivatedRoute, Router} from '@angular/router';
|
|
| 3 |
import {Session, User} from '../login/utils/helper.class';
|
|
| 4 |
import {ConfigurationService} from '../utils/configuration/configuration.service';
|
|
| 5 |
import {MenuItem, RootMenuItem} from './menu';
|
|
| 6 |
import {EnvProperties} from '../utils/properties/env-properties';
|
|
| 7 |
import {Subscription} from 'rxjs';
|
|
| 8 |
|
|
| 9 |
export interface Header {
|
|
| 10 |
route?: string, |
|
| 11 |
url?: string, |
|
| 12 |
title: string, |
|
| 13 |
logoUrl: string, |
|
| 14 |
logoSmallUrl: string, |
|
| 15 |
position: 'left' | 'center' | 'right', |
|
| 16 |
badge: boolean |
|
| 17 |
stickyAnimation?: boolean |
|
| 18 |
} |
|
| 19 |
|
|
| 20 |
@Component({
|
|
| 21 |
selector: 'navbar', |
|
| 22 |
templateUrl: 'navigationBar.component.html' |
|
| 23 |
}) |
|
| 24 |
export class NavigationBarComponent implements OnInit, OnDestroy {
|
|
| 25 |
@Input() portal: string = 'connect'; |
|
| 26 |
@Input() dark: boolean = false; |
|
| 27 |
@Input() onlyTop: boolean; |
|
| 28 |
@Input() logoPath: string = 'assets/common-assets/'; |
|
| 29 |
@Input() userMenu: boolean = true; |
|
| 30 |
@Input() showHomeMenuItem: boolean = false; |
|
| 31 |
@Input() communityId; |
|
| 32 |
@Input() showCommunityName: boolean = false; |
|
| 33 |
@Input() userMenuItems: MenuItem[]; |
|
| 34 |
@Input() menuItems: RootMenuItem []; |
|
| 35 |
@Input() header: Header; |
|
| 36 |
@Input() showMenu: boolean = true; |
|
| 37 |
@Input() homeurl: boolean = true; |
|
| 38 |
@Input() properties: EnvProperties; |
|
| 39 |
@Input() user: User; |
|
| 40 |
@Input() enableSearch: boolean = false; |
|
| 41 |
@Input() searchRoute: string = '/search/find'; |
|
| 42 |
@Input() searchPlaceHolder: string = 'Search for research results'; |
|
| 43 |
@Input() showLogo: boolean = true; |
|
| 44 |
@Input() offCanvasFlip: boolean = false; |
|
| 45 |
keyword: string = ''; |
|
| 46 |
public isAuthorized: boolean = false; |
|
| 47 |
subs: Subscription[] = []; |
|
| 48 |
showEntity = {};
|
|
| 49 |
showPage = {};
|
|
| 50 |
specialAnnouncementContent: string = null; |
|
| 51 |
|
|
| 52 |
|
|
| 53 |
constructor(private router: Router, |
|
| 54 |
private route: ActivatedRoute, |
|
| 55 |
private config: ConfigurationService) {
|
|
| 56 |
} |
|
| 57 |
|
|
| 58 |
ngOnInit() {
|
|
| 59 |
this.initialize(); |
|
| 60 |
} |
|
| 61 |
|
|
| 62 |
ngOnDestroy() {
|
|
| 63 |
for (let sub of this.subs) {
|
|
| 64 |
sub.unsubscribe(); |
|
| 65 |
} |
|
| 66 |
} |
|
| 67 |
|
|
| 68 |
initialize() {
|
|
| 69 |
if ((['provide', 'develop']).indexOf(this.portal) != -1) {
|
|
| 70 |
this.header = {
|
|
| 71 |
route: '/', |
|
| 72 |
url: null, |
|
| 73 |
title: this.portal, |
|
| 74 |
logoUrl: this.logoPath + 'logo-large-' + this.portal + '.png', |
|
| 75 |
logoSmallUrl: this.logoPath + 'logo-small-' + this.portal + '.png', |
|
| 76 |
position: 'left', |
|
| 77 |
badge: true |
|
| 78 |
}; |
|
| 79 |
} |
|
| 80 |
this.isAuthorized = Session.isClaimsCurator(this.user) || Session.isPortalAdministrator(this.user); |
|
| 81 |
if (this.properties.adminToolsAPIURL && this.communityId) {
|
|
| 82 |
//this.config.getCommunityInformation(this.properties, this.communityId).subscribe(data => {
|
|
| 83 |
this.subs.push(this.config.communityInformationState.subscribe(data => {
|
|
| 84 |
if (data) {
|
|
| 85 |
if (data['entities']) {
|
|
| 86 |
for (var i = 0; i < data['entities'].length; i++) {
|
|
| 87 |
|
|
| 88 |
this.showEntity['' + data['entities'][i]['pid'] + ''] = data['entities'][i]['isEnabled']; |
|
| 89 |
} |
|
| 90 |
} |
|
| 91 |
if (data['pages']) {
|
|
| 92 |
for (var i = 0; i < data['pages'].length; i++) {
|
|
| 93 |
this.showPage[data['pages'][i]['route']] = data['pages'][i]['isEnabled']; |
|
| 94 |
|
|
| 95 |
} |
|
| 96 |
} |
|
| 97 |
} |
|
| 98 |
}, |
|
| 99 |
error => {
|
|
| 100 |
this.handleError('Error getting community information (e.g. pages,entities) for community with id: ' + this.communityId, error);
|
|
| 101 |
})); |
|
| 102 |
} |
|
| 103 |
} |
|
| 104 |
|
|
| 105 |
|
|
| 106 |
isEnabled(required, enabled) {
|
|
| 107 |
if (!required) {
|
|
| 108 |
return true; |
|
| 109 |
} |
|
| 110 |
|
|
| 111 |
|
|
| 112 |
for (let requiredEntity of required) {
|
|
| 113 |
if (typeof enabled[requiredEntity] === 'undefined' || enabled[requiredEntity] == false) {
|
|
| 114 |
return false; |
|
| 115 |
} |
|
| 116 |
} |
|
| 117 |
return true; |
|
| 118 |
} |
|
| 119 |
|
|
| 120 |
isAtleastOneEnabled(required, enabled) {
|
|
| 121 |
if (!required || required.length == 0) {
|
|
| 122 |
return true; |
|
| 123 |
} |
|
| 124 |
|
|
| 125 |
var count = required.length; |
|
| 126 |
for (let requiredEntity of required) {
|
|
| 127 |
if (typeof enabled[requiredEntity] === 'undefined' || enabled[requiredEntity] == false) {
|
|
| 128 |
count--; |
|
| 129 |
} |
|
| 130 |
} |
|
| 131 |
return (count > 0) ? true : false; |
|
| 132 |
} |
|
| 133 |
|
|
| 134 |
private handleError(message: string, error) {
|
|
| 135 |
console.error('NavigationBar (component): ' + message, error);
|
|
| 136 |
} |
|
| 137 |
|
|
| 138 |
get currentRoute() {
|
|
| 139 |
return {
|
|
| 140 |
route: this.router.url.split('?')[0].split('#')[0],
|
|
| 141 |
fragment: this.route.snapshot.fragment |
|
| 142 |
} |
|
| 143 |
} |
|
| 144 |
|
|
| 145 |
isTheActiveMenu(menu: RootMenuItem): boolean {
|
|
| 146 |
if (!menu.rootItem.markAsActive) {
|
|
| 147 |
return false; |
|
| 148 |
} |
|
| 149 |
if (this.isTheActiveMenuItem(menu.rootItem)) {
|
|
| 150 |
return true; |
|
| 151 |
} else if (menu.items.length > 0) {
|
|
| 152 |
for (let menuItem of menu.items) {
|
|
| 153 |
if (this.isTheActiveMenuItem(menuItem)) {
|
|
| 154 |
return true; |
|
| 155 |
} |
|
| 156 |
} |
|
| 157 |
} |
|
| 158 |
return false; |
|
| 159 |
} |
|
| 160 |
|
|
| 161 |
isTheActiveMenuItem(menuItem: MenuItem): boolean {
|
|
| 162 |
let currentRoute = this.currentRoute; |
|
| 163 |
return (menuItem.route == currentRoute.route || menuItem.route == (currentRoute.route + "/")) && |
|
| 164 |
currentRoute.fragment == menuItem.fragment; |
|
| 165 |
} |
|
| 166 |
} |
|
| modules/uoa-services-library/branches/angular-7/ng-openaire-library/src/app/sharedComponents/input/input.component.ts | ||
|---|---|---|
| 1 |
import {
|
|
| 2 |
Component, |
|
| 3 |
ElementRef, |
|
| 4 |
EventEmitter, |
|
| 5 |
HostListener, |
|
| 6 |
Input, |
|
| 7 |
OnChanges, |
|
| 8 |
OnDestroy, |
|
| 9 |
OnInit, |
|
| 10 |
Output, |
|
| 11 |
SimpleChanges, |
|
| 12 |
ViewChild |
|
| 13 |
} from "@angular/core"; |
|
| 14 |
import {AbstractControl, FormArray, FormControl, ValidatorFn} from "@angular/forms";
|
|
| 15 |
import {HelperFunctions} from "../../utils/HelperFunctions.class";
|
|
| 16 |
import {Observable, of, Subscription} from "rxjs";
|
|
| 17 |
import {MatSelect} from "@angular/material/select";
|
|
| 18 |
import {MatAutocompleteSelectedEvent} from "@angular/material/autocomplete";
|
|
| 19 |
import {map, startWith} from "rxjs/operators";
|
|
| 20 |
import {MatChipInputEvent} from "@angular/material/chips";
|
|
| 21 |
|
|
| 22 |
|
|
| 23 |
export interface Option {
|
|
| 24 |
icon?: string, |
|
| 25 |
iconClass?: string, |
|
| 26 |
value: any, |
|
| 27 |
label: string |
|
| 28 |
} |
|
| 29 |
|
|
| 30 |
@Component({
|
|
| 31 |
selector: '[dashboard-input]', |
|
| 32 |
template: ` |
|
| 33 |
<div *ngIf="label && type != 'checkbox'" |
|
| 34 |
class="uk-text-bold uk-form-label uk-margin-small-bottom">{{label + (required ? ' *' : '')}}</div>
|
|
| 35 |
<div *ngIf="hint" class="uk-margin-bottom uk-form-hint">{{hint}}</div>
|
|
| 36 |
<div class="uk-grid uk-flex" [ngClass]="'uk-flex-' + flex" [class.uk-grid-small]="gridSmall" uk-grid> |
|
| 37 |
<ng-content></ng-content> |
|
| 38 |
<div [class.uk-hidden]="hideControl" class="uk-width-expand uk-position-relative" |
|
| 39 |
[class.uk-flex-first]="!extraLeft"> |
|
| 40 |
<ng-template [ngIf]="icon && formControl.enabled"> |
|
| 41 |
<span class="uk-text-muted" [ngClass]="iconLeft?('left'):'right'">
|
|
| 42 |
<icon [name]="icon"></icon> |
|
| 43 |
</span> |
|
| 44 |
</ng-template> |
|
| 45 |
<ng-template [ngIf]="formControl.disabled"> |
|
| 46 |
<span class="uk-text-muted left"> |
|
| 47 |
<icon [name]="'lock'"></icon> |
|
| 48 |
</span> |
|
| 49 |
</ng-template> |
|
| 50 |
<ng-template [ngIf]="type === 'text' || type === 'URL' || type === 'logoURL'"> |
|
| 51 |
<div [ngClass]="inputClass" |
|
| 52 |
[class.uk-form-danger]="formControl.invalid && formControl.touched" |
|
| 53 |
[attr.uk-tooltip]="formControl.disabled?'title: This field is not editable; pos: bottom-left':null"> |
|
| 54 |
<input #input class="uk-input" [placeholder]="placeholder" [formControl]="formControl"> |
|
| 55 |
</div> |
|
| 56 |
</ng-template> |
|
| 57 |
<ng-template [ngIf]="type === 'textarea'"> |
|
| 58 |
<div [ngClass]="inputClass" class="uk-padding-remove-right" |
|
| 59 |
[class.uk-form-danger]="formControl.invalid && formControl.touched" |
|
| 60 |
[attr.uk-tooltip]="formControl.disabled?'title: This field is not editable; pos: bottom-left':null"> |
|
| 61 |
<textarea class="uk-textarea" |
|
| 62 |
[rows]="rows" [placeholder]="placeholder" |
|
| 63 |
[formControl]="formControl"> |
|
| 64 |
</textarea> |
|
| 65 |
<div class="tools" [class.focused]="focused"> |
|
| 66 |
<ng-content select="[options]"></ng-content> |
|
| 67 |
</div> |
|
| 68 |
</div> |
|
| 69 |
</ng-template> |
|
| 70 |
<ng-template [ngIf]="type === 'select'"> |
|
| 71 |
<div [ngClass]="inputClass" |
|
| 72 |
[attr.uk-tooltip]="formControl.disabled?'title: This field is not editable; pos: bottom-left':null" |
|
| 73 |
[class.clickable]="formControl.enabled" |
|
| 74 |
[class.uk-form-danger]="formControl.invalid && formControl.touched" (click)="openSelect()"> |
|
| 75 |
<mat-form-field class="uk-width-1-1"> |
|
| 76 |
<mat-select #select [required]="required" [value]="null" |
|
| 77 |
(openedChange)="stopPropagation()" [formControl]="formControl" |
|
| 78 |
[disableOptionCentering]="true"> |
|
| 79 |
<mat-option *ngIf="placeholder" class="uk-hidden" [value]="''">{{placeholder}}</mat-option>
|
|
| 80 |
<mat-option *ngFor="let option of options" [value]="option.value" [attr.uk-tooltip]="option.label"> |
|
| 81 |
{{option.label}}
|
|
| 82 |
</mat-option> |
|
| 83 |
</mat-select> |
|
| 84 |
</mat-form-field> |
|
| 85 |
</div> |
|
| 86 |
</ng-template> |
|
| 87 |
<ng-template [ngIf]="type === 'autocomplete'"> |
|
| 88 |
<div [ngClass]="inputClass" |
|
| 89 |
[attr.uk-tooltip]="formControl.disabled?'title: This field is not editable; pos: bottom-left':null" |
|
| 90 |
[class.clickable]="formControl.enabled" |
|
| 91 |
[class.uk-form-danger]="formControl.invalid && formControl.touched" (click)="openSelect()"> |
|
| 92 |
<mat-form-field class="uk-width-1-1"> |
|
| 93 |
<mat-chip-list #chipList> |
|
| 94 |
<mat-chip *ngIf="formControl.value" [selectable]="false" [removable]="removable" |
|
| 95 |
[attr.uk-tooltip]="getLabel(formControl.value)"> |
|
| 96 |
<span class="uk-flex uk-flex-middle uk-width-1-1"> |
|
| 97 |
<span class="uk-width-expand uk-text-truncate" [class.uk-text-small]="smallChip">{{getLabel(formControl.value)}}</span>
|
|
| 98 |
<icon name="remove_circle" class="mat-chip-remove" [flex]="true" [ratio]="smallChip?0.8:1" |
|
| 99 |
(click)="resetSearch($event)"></icon> |
|
| 100 |
</span> |
|
| 101 |
</mat-chip> |
|
| 102 |
<div [class.uk-hidden]="formControl.value" class="uk-width-expand uk-position-relative chip-input"> |
|
| 103 |
<input #searchInput [formControl]="searchControl" [matAutocomplete]="auto" |
|
| 104 |
[matChipInputFor]="chipList" [matAutocompleteConnectedTo]="origin"> |
|
| 105 |
<div *ngIf="placeholder && !searchInput.value" class="placeholder uk-width-1-1" |
|
| 106 |
(click)="searchInput.focus()">{{placeholder}}</div>
|
|
| 107 |
</div> |
|
| 108 |
<div class="uk-width-1-1 uk-invisible" matAutocompleteOrigin #origin="matAutocompleteOrigin"></div> |
|
| 109 |
</mat-chip-list> |
|
| 110 |
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="formControl.setValue($event.option.value)" [class]="panelClass" [panelWidth]="panelWidth"> |
|
| 111 |
<mat-option *ngFor="let option of filteredOptions | async" [value]="option.value" [attr.uk-tooltip]="option.label"> |
|
| 112 |
{{option.label}}
|
|
| 113 |
</mat-option> |
|
| 114 |
</mat-autocomplete> |
|
| 115 |
</mat-form-field> |
|
| 116 |
</div> |
|
| 117 |
</ng-template> |
|
| 118 |
<ng-template [ngIf]="type === 'chips'"> |
|
| 119 |
<div [ngClass]="inputClass" |
|
| 120 |
[attr.uk-tooltip]="formControl.disabled?'title: This field is not editable; pos: bottom-left':null" |
|
| 121 |
[class.clickable]="formControl.enabled" |
|
| 122 |
[class.uk-form-danger]="formControl.invalid && searchControl.invalid && searchControl.touched" (click)="openSelect()"> |
|
| 123 |
<mat-form-field class="uk-width-1-1"> |
|
| 124 |
<mat-chip-list #chipList> |
|
| 125 |
<mat-chip *ngFor="let chip of formAsArray.controls; let i=index" [selectable]="false" |
|
| 126 |
[removable]="removable" [attr.uk-tooltip]="getLabel(chip.value)"> |
|
| 127 |
<span class="uk-flex uk-flex-middle uk-width-1-1"> |
|
| 128 |
<span class="uk-width-expand uk-text-truncate" [class.uk-text-small]="smallChip">{{getLabel(chip.value)}}</span>
|
|
| 129 |
<icon name="remove_circle" class="mat-chip-remove" [flex]="true" [ratio]="smallChip?0.8:1" (click)="removed(i)"></icon> |
|
| 130 |
</span> |
|
| 131 |
</mat-chip> |
|
| 132 |
<div class="uk-width-expand uk-position-relative chip-input"> |
|
| 133 |
<input #searchInput style="width: calc(100% - 8px) !important;" [formControl]="searchControl" [matAutocomplete]="auto" |
|
| 134 |
[matChipInputFor]="chipList" [matAutocompleteConnectedTo]="origin" |
|
| 135 |
[matChipInputAddOnBlur]="addExtraChips && searchControl.value" |
|
| 136 |
(matChipInputTokenEnd)="add($event)"> |
|
| 137 |
<div *ngIf="placeholder && !searchControl.value" class="placeholder uk-width-1-1" |
|
| 138 |
(click)="searchInput.focus()">{{placeholder}}</div>
|
|
| 139 |
</div> |
|
| 140 |
<div class="uk-width-1-1 uk-invisible" matAutocompleteOrigin #origin="matAutocompleteOrigin"></div> |
|
| 141 |
</mat-chip-list> |
|
| 142 |
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)" [class]="panelClass" [panelWidth]="panelWidth"> |
|
| 143 |
<mat-option *ngFor="let option of filteredOptions | async" [value]="option.value" [attr.uk-tooltip]="option.label"> |
|
| 144 |
{{option.label}}
|
|
| 145 |
</mat-option> |
|
| 146 |
</mat-autocomplete> |
|
| 147 |
</mat-form-field> |
|
| 148 |
</div> |
|
| 149 |
</ng-template> |
|
| 150 |
<span *ngIf="formControl.invalid && formControl.touched" class="uk-text-danger input-message"> |
|
| 151 |
<span *ngIf="formControl.errors.error">{{formControl.errors.error}}</span>
|
|
| 152 |
<span *ngIf="type === 'URL' || type === 'logoURL'">Please provide a valid URL (e.g. https://example.com)</span> |
|
| 153 |
</span> |
|
| 154 |
<span class="uk-text-danger input-message"> |
|
| 155 |
<ng-content select="[error]"></ng-content> |
|
| 156 |
</span> |
|
| 157 |
<span *ngIf="formControl.valid" class="uk-text-warning input-message"> |
|
| 158 |
<ng-content select="[warning]"></ng-content> |
|
| 159 |
<span *ngIf="!secure"> |
|
| 160 |
<span class="uk-text-bold">Note:</span> Prefer urls like "<span class="uk-text-bold">https://</span>example.com/my-secure-image.png" |
|
| 161 |
instead of "<span class="uk-text-bold">http://</span>example.com/my-image.png". |
|
| 162 |
<span class="uk-text-bold">Browsers may not load non secure content.</span> |
|
| 163 |
</span> |
|
| 164 |
</span> |
|
| 165 |
<span class="input-message"> |
|
| 166 |
<ng-content select="[note]"></ng-content> |
|
| 167 |
</span> |
|
| 168 |
</div> |
|
| 169 |
</div> |
|
| 170 |
<mat-checkbox *ngIf="type === 'checkbox'" [formControl]="formControl">{{label}}</mat-checkbox>
|
|
| 171 |
`, |
|
| 172 |
styleUrls: ['input.component.css'] |
|
| 173 |
}) |
|
| 174 |
export class InputComponent implements OnInit, OnDestroy, OnChanges {
|
|
| 175 |
/** Basic information */ |
|
| 176 |
@Input('formInput') formControl: AbstractControl;
|
|
| 177 |
@Input('type') type: 'text' | 'URL' | 'logoURL' | 'autocomplete' | 'textarea' | 'select' | 'checkbox' | 'chips' = 'text';
|
|
| 178 |
@Input('label') label: string;
|
|
| 179 |
/** Text */ |
|
| 180 |
@ViewChild('input') input: ElementRef;
|
|
| 181 |
/** Textarea options */ |
|
| 182 |
@Input('rows') rows: number = 3;
|
|
| 183 |
/** Select | chips available options */ |
|
| 184 |
@Input('options') options: Option[] = [];
|
|
| 185 |
@Input('hint') hint = null;
|
|
| 186 |
@Input('placeholder') placeholder = '';
|
|
| 187 |
@Input() inputClass: string = 'input-box'; |
|
| 188 |
/** Extra element Right or Left of the input */ |
|
| 189 |
@Input() extraLeft: boolean = true; |
|
| 190 |
@Input() gridSmall: boolean = false; |
|
| 191 |
@Input() hideControl: boolean = false; |
|
| 192 |
@Input() flex: 'middle' | 'top' | 'bottom' = 'middle'; |
|
| 193 |
/** Icon Right or Left on the input */ |
|
| 194 |
@Input() icon: string = null; |
|
| 195 |
@Input() iconLeft: boolean = false; |
|
| 196 |
/** Chip options */ |
|
| 197 |
@Input() removable: boolean = true; |
|
| 198 |
@Input() addExtraChips: boolean = false; |
|
| 199 |
@Input() smallChip: boolean = false; |
|
| 200 |
@Input() panelWidth: number = 300; |
|
| 201 |
@Input() panelClass: string = null; |
|
| 202 |
@Input() showOptionsOnEmpty: boolean = true; |
|
| 203 |
@Input() validators: ValidatorFn[]; |
|
| 204 |
@Output() focusEmitter: EventEmitter<boolean> = new EventEmitter<boolean>(); |
|
| 205 |
/** LogoUrl information */ |
|
| 206 |
public secure: boolean = true; |
|
| 207 |
/** Internal basic information */ |
|
| 208 |
public required: boolean = false; |
|
| 209 |
private initValue: any; |
|
| 210 |
/** Chips && Autocomplete*/ |
|
| 211 |
public filteredOptions: Observable<Option[]>; |
|
| 212 |
public searchControl: FormControl; |
|
| 213 |
private subscriptions: any[] = []; |
|
| 214 |
@ViewChild('select') select: MatSelect;
|
|
| 215 |
@ViewChild('searchInput') searchInput: ElementRef;
|
|
| 216 |
focused: boolean = false; |
|
| 217 |
|
|
| 218 |
constructor(private elementRef: ElementRef) {
|
|
| 219 |
} |
|
| 220 |
|
|
| 221 |
@HostListener('document:click', ['$event'])
|
|
| 222 |
clickOut(event) {
|
|
| 223 |
this.focused = !!this.elementRef.nativeElement.contains(event.target); |
|
| 224 |
if(!this.focused && this.input) {
|
|
| 225 |
this.input.nativeElement.setSelectionRange(0,0); |
|
| 226 |
} |
|
| 227 |
this.focusEmitter.emit(this.focused); |
|
| 228 |
} |
|
| 229 |
|
|
| 230 |
ngOnInit(): void {
|
|
| 231 |
this.reset(); |
|
| 232 |
} |
|
| 233 |
|
|
| 234 |
ngOnChanges(changes: SimpleChanges) {
|
|
| 235 |
if (changes.formControl) {
|
|
| 236 |
this.reset(); |
|
| 237 |
} |
|
| 238 |
} |
|
| 239 |
|
|
| 240 |
get formAsArray(): FormArray {
|
|
| 241 |
return (<FormArray>this.formControl); |
|
| 242 |
} |
|
| 243 |
|
|
| 244 |
reset() {
|
|
| 245 |
this.secure = true; |
|
| 246 |
this.unsubscribe(); |
|
| 247 |
this.initValue = HelperFunctions.copy(this.formControl.value); |
|
| 248 |
if(this.type === 'logoURL') {
|
|
| 249 |
this.secure = (!this.initValue || this.initValue.includes('https://'));
|
|
| 250 |
} |
|
| 251 |
if (this.type === 'chips' || this.type === 'autocomplete') {
|
|
| 252 |
if(this.options) {
|
|
| 253 |
this.filteredOptions = of(this.options); |
|
| 254 |
this.searchControl = new FormControl('', this.validators);
|
|
| 255 |
this.subscriptions.push(this.searchControl.valueChanges.subscribe(value => {
|
|
| 256 |
setTimeout(() => {
|
|
| 257 |
this.searchInput.nativeElement.focus(); |
|
| 258 |
this.searchInput.nativeElement.value = value; |
|
| 259 |
},0); |
|
| 260 |
})); |
|
| 261 |
this.filteredOptions = this.searchControl.valueChanges.pipe(startWith(''),
|
|
| 262 |
map(option => this.filter(option))); |
|
| 263 |
} |
|
| 264 |
} |
|
| 265 |
if (this.formControl && this.formControl.validator) {
|
|
| 266 |
let validator = this.formControl.validator({} as AbstractControl);
|
|
| 267 |
this.required = (validator && validator.required); |
|
| 268 |
} |
|
| 269 |
this.subscriptions.push(this.formControl.valueChanges.subscribe(value => {
|
|
| 270 |
value = (value === '') ? null : value; |
|
| 271 |
if(this.type === 'logoURL') {
|
|
| 272 |
this.secure = (!value || value.includes('https://'));
|
|
| 273 |
} |
|
| 274 |
if (this.initValue === value || (this.initValue === '' && value === null)) {
|
|
| 275 |
this.formControl.markAsPristine(); |
|
| 276 |
} |
|
| 277 |
if(this.searchControl) {
|
|
| 278 |
this.searchControl.setValue(null); |
|
| 279 |
} |
|
| 280 |
})); |
|
| 281 |
if (!this.formControl.value) {
|
|
| 282 |
this.formControl.setValue((this.type === "checkbox")?false:''); |
|
| 283 |
} |
|
| 284 |
} |
|
| 285 |
|
|
| 286 |
unsubscribe() {
|
|
| 287 |
this.subscriptions.forEach(subscription => {
|
|
| 288 |
if (subscription instanceof Subscription) {
|
|
| 289 |
subscription.unsubscribe(); |
|
| 290 |
} |
|
| 291 |
}); |
|
| 292 |
} |
|
| 293 |
|
|
| 294 |
openSelect() {
|
|
| 295 |
if (this.select) {
|
|
| 296 |
this.select.open(); |
|
| 297 |
} |
|
| 298 |
} |
|
| 299 |
|
|
| 300 |
ngOnDestroy(): void {
|
|
| 301 |
this.unsubscribe(); |
|
| 302 |
} |
|
| 303 |
|
|
| 304 |
stopPropagation() {
|
|
| 305 |
event.stopPropagation(); |
|
| 306 |
} |
|
| 307 |
|
|
| 308 |
removed(index: number) {
|
|
| 309 |
this.formAsArray.removeAt(index); |
|
| 310 |
this.formAsArray.markAsDirty(); |
|
| 311 |
this.searchControl.setValue('');
|
|
| 312 |
this.stopPropagation(); |
|
| 313 |
} |
|
| 314 |
|
|
| 315 |
selected(event: MatAutocompleteSelectedEvent): void {
|
|
| 316 |
this.formAsArray.push(new FormControl(event.option.value)); |
|
| 317 |
this.formAsArray.markAsDirty(); |
|
| 318 |
this.searchControl.setValue('');
|
|
| 319 |
this.stopPropagation(); |
|
| 320 |
} |
|
| 321 |
|
|
| 322 |
private filter(value: string): Option[] {
|
|
| 323 |
let options = this.options; |
|
| 324 |
if(this.type === "chips") {
|
|
| 325 |
options = options.filter(option => !this.formAsArray.value.find(value => HelperFunctions.equals(option.value, value))); |
|
| 326 |
} |
|
| 327 |
if ((!value || value.length == 0)) {
|
|
| 328 |
return (this.showOptionsOnEmpty)?options:[]; |
|
| 329 |
} |
|
| 330 |
const filterValue = value.toString().toLowerCase(); |
|
| 331 |
return options.filter(option => option.label.toLowerCase().indexOf(filterValue) != -1); |
|
| 332 |
} |
|
| 333 |
|
|
| 334 |
add(event: MatChipInputEvent) {
|
|
| 335 |
if (this.addExtraChips && event.value && this.searchControl.valid) {
|
|
| 336 |
this.stopPropagation(); |
|
| 337 |
this.formAsArray.push(new FormControl(event.value, this.validators)); |
|
| 338 |
this.formAsArray.markAsDirty(); |
|
| 339 |
this.searchControl.setValue('');
|
|
| 340 |
this.searchInput.nativeElement.value = ''; |
|
| 341 |
} |
|
| 342 |
} |
|
| 343 |
|
|
| 344 |
getLabel(value: any) {
|
|
| 345 |
let option = this.options.find(option => HelperFunctions.equals(option.value, value)); |
|
| 346 |
return (option) ? option.label : value; |
|
| 347 |
} |
|
| 348 |
|
|
| 349 |
resetSearch(event: any) {
|
|
| 350 |
event.stopPropagation(); |
|
| 351 |
this.searchControl.setValue('');
|
|
| 352 |
this.formControl.setValue(null); |
|
| 353 |
} |
|
| 354 |
} |
|
| modules/uoa-services-library/branches/angular-7/ng-openaire-library/src/app/sharedComponents/input/input.module.ts | ||
|---|---|---|
| 1 |
import {NgModule} from '@angular/core';
|
|
| 2 |
import {InputComponent} from "./input.component";
|
|
| 3 |
import {SharedModule} from "../../shared/shared.module";
|
|
| 4 |
import {MatFormFieldModule} from "@angular/material/form-field";
|
|
| 5 |
import {MatInputModule} from "@angular/material/input";
|
|
| 6 |
import {MatSelectModule} from "@angular/material/select";
|
|
| 7 |
import {MatCheckboxModule} from '@angular/material/checkbox';
|
|
| 8 |
import {IconsModule} from "../../utils/icons/icons.module";
|
|
| 9 |
import {IconsService} from "../../utils/icons/icons.service";
|
|
| 10 |
import {lock, remove_circle} from "../../utils/icons/icons";
|
|
| 11 |
import {MatChipsModule} from "@angular/material/chips";
|
|
| 12 |
import {MatAutocompleteModule} from "@angular/material/autocomplete";
|
|
| 13 |
import {MatIconModule} from "@angular/material/icon";
|
|
| 14 |
import {SafeHtmlPipeModule} from "../../utils/pipes/safeHTMLPipe.module";
|
|
| 15 |
|
|
| 16 |
@NgModule({
|
|
| 17 |
imports: [ |
|
| 18 |
SharedModule, |
|
| 19 |
MatFormFieldModule, |
|
| 20 |
MatInputModule, |
|
| 21 |
MatSelectModule, |
|
| 22 |
MatCheckboxModule, |
|
| 23 |
IconsModule, |
|
| 24 |
MatChipsModule, |
|
| 25 |
MatAutocompleteModule, |
|
| 26 |
MatIconModule, |
|
| 27 |
SafeHtmlPipeModule |
|
| 28 |
], |
|
| 29 |
exports: [ |
|
| 30 |
InputComponent |
|
| 31 |
], |
|
| 32 |
declarations: [ |
|
| 33 |
InputComponent |
|
| 34 |
] |
|
| 35 |
}) |
|
| 36 |
export class InputModule {
|
|
| 37 |
constructor(private iconsService: IconsService) {
|
|
| 38 |
this.iconsService.registerIcons([lock, remove_circle]); |
|
| 39 |
} |
|
| 40 |
} |
|
| modules/uoa-services-library/branches/angular-7/ng-openaire-library/src/app/dashboard/divId/divIds.module.ts | ||
|---|---|---|
| 1 |
import {NgModule} from '@angular/core';
|
|
| 2 |
import {RouterModule} from '@angular/router';
|
|
| 3 |
import {CommonModule} from '@angular/common';
|
|
| 4 |
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
|
|
| 5 |
import {AlertModalModule} from '../../utils/modal/alertModal.module';
|
|
| 6 |
import {DivIdsComponent} from './divIds.component';
|
|
| 7 |
import {AdminToolServiceModule} from "../../services/adminToolService.module";
|
|
| 8 |
import {InputModule} from "../../sharedComponents/input/input.module";
|
|
| 9 |
|
|
| 10 |
|
|
| 11 |
import {MatAutocompleteModule} from '@angular/material/autocomplete';
|
|
| 12 |
import {MatCheckboxModule, MatFormFieldModule} from "@angular/material";
|
|
| 13 |
|
|
| 14 |
|
|
| 15 |
import {MatChipsModule} from '@angular/material/chips';
|
|
| 16 |
import {AdminTabsModule} from "../sharedComponents/admin-tabs/admin-tabs.module";
|
|
| 17 |
import {PageContentModule} from "../sharedComponents/page-content/page-content.module";
|
|
| 18 |
import {ClassesRoutingModule} from "./classes-routing.module";
|
|
| 19 |
import {SearchInputModule} from "../../sharedComponents/search-input/search-input.module";
|
|
| 20 |
import {IconsModule} from "../../utils/icons/icons.module";
|
|
| 21 |
import {IconsService} from "../../utils/icons/icons.service";
|
|
| 22 |
import {add} from "../../utils/icons/icons";
|
|
| 23 |
import {LoadingModule} from "../../utils/loading/loading.module";
|
|
| 24 |
|
|
| 25 |
@NgModule({
|
|
| 26 |
imports: [ |
|
| 27 |
CommonModule, RouterModule, FormsModule, |
|
| 28 |
AlertModalModule, ReactiveFormsModule, AdminToolServiceModule, InputModule, MatAutocompleteModule, MatFormFieldModule, MatChipsModule, |
|
| 29 |
MatCheckboxModule, AdminTabsModule, PageContentModule, ClassesRoutingModule, SearchInputModule, IconsModule, LoadingModule |
|
| 30 |
], |
|
| 31 |
declarations: [DivIdsComponent], |
|
| 32 |
exports: [DivIdsComponent] |
|
| 33 |
}) |
|
| 34 |
export class DivIdsModule {
|
|
| 35 |
constructor(private iconsService: IconsService) {
|
|
| 36 |
this.iconsService.registerIcons([add]); |
|
| 37 |
} |
|
| 38 |
} |
|
| modules/uoa-services-library/branches/angular-7/ng-openaire-library/src/app/sharedComponents/input/input.component.css | ||
|---|---|---|
| 1 |
.left, .right {
|
|
| 2 |
padding: 0 10px; |
|
| 3 |
} |
|
| 4 |
|
|
| 5 |
.left {
|
|
| 6 |
position: absolute; |
|
| 7 |
left: 40px; |
|
| 8 |
top: 50%; |
|
| 9 |
transform: translateY(-50%); |
|
| 10 |
} |
|
| 11 |
|
|
| 12 |
.uk-grid-small .left {
|
|
| 13 |
left: 20px; |
|
| 14 |
} |
|
| 15 |
|
|
| 16 |
.left + .input-box {
|
|
| 17 |
padding-left: 41px; |
|
| 18 |
} |
|
| 19 |
|
|
| 20 |
.right {
|
|
| 21 |
position: absolute; |
|
| 22 |
right: 0; |
|
| 23 |
top: 50%; |
|
| 24 |
transform: translateY(-50%); |
|
| 25 |
} |
|
| 26 |
|
|
| 27 |
.right + .input-box {
|
|
| 28 |
padding-right: 41px; |
|
| 29 |
} |
|
| 30 |
|
|
| 31 |
.input-message {
|
|
| 32 |
font-family: "Roboto", sans-serif; |
|
| 33 |
font-size: 14px; |
|
| 34 |
} |
|
| 35 |
|
|
| 36 |
.chip-input {
|
|
| 37 |
min-width: 100px; |
|
| 38 |
} |
|
| modules/uoa-services-library/branches/angular-7/ng-openaire-library/src/app/dashboard/users/role-users/role-users.module.ts | ||
|---|---|---|
| 1 |
import {NgModule} from '@angular/core';
|
|
| 2 |
import {CommonModule} from '@angular/common';
|
|
| 3 |
import {RoleUsersComponent} from './role-users.component';
|
|
| 4 |
import {ReactiveFormsModule} from '@angular/forms';
|
|
| 5 |
import {AlertModalModule} from "../../../utils/modal/alertModal.module";
|
|
| 6 |
import {LoadingModule} from "../../../utils/loading/loading.module";
|
|
| 7 |
import {IconsService} from "../../../utils/icons/icons.service";
|
|
| 8 |
import {person_add, remove_circle_outline} from "../../../utils/icons/icons";
|
|
| 9 |
import {IconsModule} from "../../../utils/icons/icons.module";
|
|
| 10 |
import {InputModule} from "../../../sharedComponents/input/input.module";
|
|
| 11 |
import {PageContentModule} from "../../sharedComponents/page-content/page-content.module";
|
|
| 12 |
import {SafeHtmlPipeModule} from "../../../utils/pipes/safeHTMLPipe.module";
|
|
| 13 |
import {NotifyFormModule} from "../../../notifications/notify-form/notify-form.module";
|
|
| 14 |
import {NoLoadPaging} from "../../../searchPages/searchUtils/no-load-paging.module";
|
|
| 15 |
import {SearchInputModule} from "../../../sharedComponents/search-input/search-input.module";
|
|
| 16 |
|
|
| 17 |
@NgModule({
|
|
| 18 |
imports: [CommonModule, AlertModalModule, ReactiveFormsModule, LoadingModule, IconsModule, InputModule, PageContentModule, SafeHtmlPipeModule, NotifyFormModule, NoLoadPaging, SearchInputModule], |
|
| 19 |
declarations: [RoleUsersComponent], |
|
| 20 |
exports: [RoleUsersComponent] |
|
| 21 |
}) |
|
| 22 |
export class RoleUsersModule {
|
|
| 23 |
constructor(private iconsService: IconsService) {
|
|
| 24 |
this.iconsService.registerIcons([remove_circle_outline, person_add]); |
|
| 25 |
} |
|
| 26 |
} |
|
| modules/uoa-services-library/branches/angular-7/ng-openaire-library/src/app/sharedComponents/bottom.component.ts | ||
|---|---|---|
| 1 |
import { Component, Input } from '@angular/core';
|
|
| 2 |
import {ActivatedRoute} from '@angular/router';
|
|
| 3 |
import 'rxjs'; |
|
| 4 |
import{MenuItem} from './menu';
|
|
| 5 |
import { ConfigurationService } from '../utils/configuration/configuration.service';
|
|
| 6 |
import {EnvProperties} from "../utils/properties/env-properties";
|
|
| 7 |
import {Subscription} from "rxjs";
|
|
| 8 |
import {properties} from '../../../environments/environment';
|
|
| 9 |
import {HelperService} from "../utils/helper/helper.service";
|
|
| 10 |
|
|
| 11 |
@Component({
|
|
| 12 |
selector: 'bottom', |
|
| 13 |
templateUrl: 'bottom.component.html' |
|
| 14 |
}) |
|
| 15 |
export class BottomComponent {
|
|
| 16 |
|
|
| 17 |
@Input() showSocialButtons:boolean = true; |
|
| 18 |
@Input() showOpenaire:boolean = true; |
|
| 19 |
@Input() showMenuItems:boolean = false; |
|
| 20 |
@Input() showCommision:boolean = true; |
|
| 21 |
@Input() assetsPath:string ='assets/common-assets/'; |
|
| 22 |
@Input() menuItems:MenuItem []; |
|
| 23 |
|
|
| 24 |
@Input() communityId; |
|
| 25 |
// @Input() environment:string = "beta"; |
|
| 26 |
showPage ={};
|
|
| 27 |
@Input() grantAdvance:boolean = true; |
|
| 28 |
// grantAdvanceText = "OpenAIRE-Advance receives funding from the European Union's Horizon 2020 Research and Innovation programme under Grant Agreement No. 777541."; |
|
| 29 |
// grantConenctText = "OpenAIRE-Connect receives funding from the European Union's Horizon 2020 Research and Innovation programme under grant agreement No. 731011 and No. 777541."; |
|
| 30 |
@Input() properties:EnvProperties = properties; |
|
| 31 |
@Input() darkBackground:boolean=true; |
|
| 32 |
@Input() centered:boolean=false; |
|
| 33 |
@Input() shortView: boolean = false; |
|
| 34 |
sectionClass= "uk-section-primary"; |
|
| 35 |
|
|
| 36 |
subs: Subscription[] = []; |
|
| 37 |
public divContents = null; |
|
| 38 |
|
|
| 39 |
constructor(private config: ConfigurationService, private route: ActivatedRoute, |
|
| 40 |
private helper: HelperService) {
|
|
| 41 |
} |
|
| 42 |
|
|
| 43 |
ngOnInit() {
|
|
| 44 |
if(!properties.footerGrantText) {
|
|
| 45 |
this.getDivContents(); |
|
| 46 |
} |
|
| 47 |
if(!this.darkBackground){
|
|
| 48 |
this.sectionClass= " footer-light-background"; |
|
| 49 |
} |
|
| 50 |
this.subs.push(this.route.queryParams.subscribe(params => {
|
|
| 51 |
if(this.showMenuItems){
|
|
| 52 |
if( this.properties.adminToolsAPIURL && this.communityId ){
|
|
| 53 |
//this.subs.push(this.config.getCommunityInformation(this.properties, this.communityId ).subscribe(data => {
|
|
| 54 |
this.subs.push(this.config.communityInformationState.subscribe(data => {
|
|
| 55 |
if(data) {
|
|
| 56 |
for (var i = 0; i < data['pages'].length; i++) {
|
|
| 57 |
this.showPage[data['pages'][i]["route"]] = data['pages'][i]["isEnabled"]; |
|
| 58 |
|
|
| 59 |
} |
|
| 60 |
// console.log(this.showPage) |
|
| 61 |
} |
|
| 62 |
})); |
|
| 63 |
} |
|
| 64 |
} |
|
| 65 |
})); |
|
| 66 |
} |
|
| 67 |
|
|
| 68 |
public ngOnDestroy() {
|
|
| 69 |
for (let sub of this.subs) {
|
|
| 70 |
sub.unsubscribe(); |
|
| 71 |
} |
|
| 72 |
} |
|
| 73 |
|
|
| 74 |
isEnabled(required, enabled){
|
|
| 75 |
|
|
| 76 |
if(!required ){
|
|
| 77 |
return true; |
|
| 78 |
} |
|
| 79 |
for(let requiredEntity of required){
|
|
| 80 |
// console.log("R "+requiredEntity +" E " + enabled[requiredEntity])
|
|
| 81 |
if(typeof enabled[requiredEntity] === "undefined" || enabled[requiredEntity] == false){
|
|
| 82 |
return false; |
|
| 83 |
} |
|
| 84 |
} |
|
| 85 |
return true; |
|
| 86 |
} |
|
| 87 |
|
|
| 88 |
private getDivContents() {
|
|
| 89 |
if (this.communityId) {
|
|
| 90 |
this.subs.push(this.helper.getDivHelpContents(this.properties, this.communityId, "/").subscribe(contents => {
|
|
| 91 |
this.divContents = contents; |
|
| 92 |
})); |
|
| 93 |
} |
|
| 94 |
} |
|
| 95 |
} |
|
| modules/uoa-services-library/branches/angular-7/ng-openaire-library/src/app/dashboard/helpTexts/page-help-content-form.component.html | ||
|---|---|---|
| 1 |
<div page-content> |
|
| 2 |
<div header> |
|
| 3 |
<div class="uk-margin-top"> |
|
| 4 |
<a routerLink="../" [queryParams]=" { 'pageId': pageId }"
|
|
| 5 |
class="uk-text-secondary uk-text-uppercase uk-text-bold uk-text-small"> |
|
| 6 |
<span class="uk-icon-button uk-icon small uk-button-secondary"> |
|
| 7 |
<icon name="arrow_left"></icon> |
|
| 8 |
</span> |
|
| 9 |
<span class="space"> |
|
| 10 |
Go back to helptexts list |
|
| 11 |
</span> |
|
| 12 |
</a> |
|
| 13 |
</div> |
|
| 14 |
</div> |
|
| 15 |
<div inner> |
|
| 16 |
<div class="uk-card-header"> |
|
| 17 |
<div class="uk-flex uk-flex-middle uk-child-width-1-1 uk-child-width-1-2@m uk-grid" uk-grid> |
|
| 18 |
<div> |
|
| 19 |
<div class="uk-text-small uk-text-muted"> {{pageHelpContent ? 'Update ' : 'Add new '}} help text</div>
|
|
| 20 |
<div> |
|
| 21 |
<span *ngIf="page" class="uk-text-bold">{{page.name}}</span>
|
|
| 22 |
<span *ngIf="myForm.dirty"> (unsaved changes)</span> |
|
| 23 |
</div> |
|
| 24 |
</div> |
|
| 25 |
<div class=" uk-flex uk-flex-right"> |
|
| 26 |
<button (click)="resetCustom()" [disabled]="showLoading || !myForm.dirty" |
|
| 27 |
class="uk-button uk-button-secondary outlined uk-margin-small-right">Reset |
|
| 28 |
</button> |
|
| 29 |
<button (click)="saveCustom()" class="uk-button uk-button-secondary uk-margin-small-right" |
|
| 30 |
[disabled]="showLoading || !myForm.dirty || myForm.invalid ">Save |
|
| 31 |
</button> |
|
| 32 |
</div> |
|
| 33 |
</div> |
|
| 34 |
</div> |
|
| 35 |
<div class="uk-card uk-card-default uk-position-relative " style="min-height: 60vh"> |
|
| 36 |
<div style="max-height: 60vh" class="uk-padding-large uk-overflow-auto"> |
|
| 37 |
<div class="uk-animation-fade uk-width-1-1" role="alert"> |
|
| 38 |
<div *ngIf="showLoading" class="uk-position-center"> |
|
| 39 |
<loading *ngIf="showLoading"></loading> |
|
| 40 |
</div> |
|
| 41 |
<form [formGroup]="myForm" [class.hidden]="showLoading"> |
|
| 42 |
<div class="uk-grid uk-child-width-1-2 "> |
|
| 43 |
<div *ngIf="placementsOptions.length > 0" dashboard-input |
|
| 44 |
[formInput]="myForm.get('placement')"
|
|
| 45 |
type="select" placeholder="Select placement" |
|
| 46 |
label="Select placement" [options]="placementsOptions" |
|
| 47 |
> |
|
| 48 |
</div> |
|
| 49 |
<div dashboard-input [formInput]="myForm.get('order')"
|
|
| 50 |
type="select" placeholder="Select order" |
|
| 51 |
label="Select order" [options]="orderOptions"> |
|
| 52 |
</div> |
|
| 53 |
</div> |
|
| 54 |
|
|
| 55 |
<div class="form-group uk-margin-top"> |
|
| 56 |
<div class="uk-text-bold uk-margin-medium-bottom">Select Status (Enable/ disable)</div> |
|
| 57 |
<mat-slide-toggle [checked]="myForm.get('isActive').value"
|
|
| 58 |
(change)="changeStatus()" |
|
| 59 |
uk-tooltip="title:<div class='uk-padding-small uk-width-large'><div class='uk-text-bold '> Enable or disable help text to show or hide it from the dashboard</div></div>" |
|
| 60 |
></mat-slide-toggle> |
|
| 61 |
</div> |
|
| 62 |
<div class="form-group uk-margin-medium-top" |
|
| 63 |
[ngClass]="{'has-error':!myForm.controls.content.valid &&
|
|
| 64 |
myForm.controls.content.dirty}"> |
|
| 65 |
<label class="uk-text-bold">Content</label> |
|
| 66 |
<div class="uk-margin-top"> |
|
| 67 |
<ckeditor (change)="contentChanged()" |
|
| 68 |
[readonly]="false" |
|
| 69 |
debounce="500" |
|
| 70 |
[formControl]="myForm.get('content')"
|
|
| 71 |
[config]="{ extraAllowedContent: '* [uk-*](*) ; span', disallowedContent: 'script; *[on*]',
|
|
| 72 |
removeButtons: 'Save,NewPage,DocProps,Preview,Print,' + |
|
| 73 |
'Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,' + |
|
| 74 |
'CreateDiv,Flash,PageBreak,' + |
|
| 75 |
'Subscript,Superscript,Anchor,Smiley,Iframe,Styles,Font,About,Language', |
|
| 76 |
extraPlugins: 'divarea'}"> |
|
| 77 |
</ckeditor> |
|
| 78 |
</div> |
|
| 79 |
|
|
| 80 |
</div> |
|
| 81 |
<input type="hidden" formControlName="_id"> |
|
| 82 |
</form> |
|
| 83 |
</div> |
|
| 84 |
</div> |
|
| 85 |
</div> |
|
| 86 |
</div> |
|
| 87 |
</div> |
|
| modules/uoa-services-library/branches/angular-7/ng-openaire-library/src/app/sharedComponents/cookie-law/cookie-law.component.ts | ||
|---|---|---|
| 1 |
/** |
|
| 2 |
* angular2-cookie-law |
|
| 3 |
* |
|
| 4 |
* Copyright 2016-2017, @andreasonny83, All rights reserved. |
|
| 5 |
* |
|
| 6 |
* @author: @andreasonny83 <andreasonny83@gmail.com> |
|
| 7 |
*/ |
|
| 8 |
|
|
| 9 |
import {
|
|
| 10 |
Component, |
|
| 11 |
OnInit, |
|
| 12 |
ViewEncapsulation, |
|
| 13 |
HostBinding, |
|
| 14 |
Input, |
|
| 15 |
Output, |
|
| 16 |
EventEmitter, |
|
| 17 |
} from '@angular/core'; |
|
| 18 |
import { animate,
|
|
| 19 |
state, |
|
| 20 |
trigger, |
|
| 21 |
style, |
|
| 22 |
transition, |
|
| 23 |
AnimationEvent |
|
| 24 |
} from '@angular/animations'; |
|
| 25 |
import {
|
|
| 26 |
DomSanitizer, |
|
| 27 |
SafeHtml, |
|
| 28 |
} from '@angular/platform-browser'; |
|
| 29 |
|
|
| 30 |
import {
|
|
| 31 |
CookieLawService, |
|
| 32 |
} from './cookie-law.service'; |
|
| 33 |
|
|
| 34 |
// import {
|
|
| 35 |
// closeIcon, |
|
| 36 |
// } from './icons'; |
|
| 37 |
|
|
| 38 |
export type CookieLawPosition = 'top' | 'bottom'; |
|
| 39 |
export type CookieLawAnimation = 'topIn' | 'bottomIn' | 'topOut' | 'bottomOut'; |
|
| 40 |
export type CookieLawTarget = '_blank' | '_self'; |
|
| 41 |
|
|
| 42 |
@Component({
|
|
| 43 |
selector: 'cookie-law', |
|
| 44 |
// encapsulation: ViewEncapsulation.None, |
|
| 45 |
animations: [ |
|
| 46 |
trigger('state', [
|
|
| 47 |
state('bottomOut', style({ transform: 'translateY(100%)' })),
|
|
| 48 |
state('topOut', style({ transform: 'translateY(-100%)' })),
|
|
| 49 |
state('*', style({ transform: 'translateY(0)' })),
|
|
| 50 |
|
|
| 51 |
transition('void => topIn', [
|
|
| 52 |
style({ transform: 'translateY(-100%)' }),
|
|
| 53 |
animate('1000ms ease-in-out'),
|
|
| 54 |
]), |
|
| 55 |
|
|
| 56 |
transition('void => bottomIn', [
|
|
| 57 |
style({ transform: 'translateY(100%)' }),
|
|
| 58 |
animate('1000ms ease-in-out'),
|
|
| 59 |
]), |
|
| 60 |
|
|
| 61 |
transition('* => *', animate('1000ms ease-out')),
|
|
| 62 |
]) |
|
| 63 |
], |
|
| 64 |
styleUrls: [ './cookie-law.css' ], |
|
| 65 |
templateUrl: './cookie-law.html', |
|
| 66 |
}) |
|
| 67 |
export class CookieLawComponent implements OnInit {
|
|
| 68 |
public cookieLawSeen: boolean; |
|
| 69 |
|
|
| 70 |
@Input('learnMore')
|
|
| 71 |
get learnMore() { return this._learnMore; }
|
|
| 72 |
set learnMore(value: string) {
|
|
| 73 |
this._learnMore = (value !== null && `${value}` !== 'false') ? value : null;
|
|
| 74 |
} |
|
| 75 |
|
|
| 76 |
@Input('target')
|
|
| 77 |
get target() { return this._target; }
|
|
| 78 |
set target(value: CookieLawTarget) {
|
|
| 79 |
this._target = (value !== null && `${value}` !== 'false' &&
|
|
| 80 |
(`${value}` === '_blank' || `${value}` === '_self')
|
|
| 81 |
) ? value : '_blank'; |
|
| 82 |
} |
|
| 83 |
|
|
| 84 |
@Input('position')
|
|
| 85 |
get position() { return this._position; }
|
|
| 86 |
set position(value: CookieLawPosition) {
|
|
| 87 |
this._position = (value !== null && `${value}` !== 'false' &&
|
|
| 88 |
(`${value}` === 'top' || `${value}` === 'bottom')
|
|
| 89 |
) ? value : 'bottom'; |
|
| 90 |
} |
|
| 91 |
|
|
| 92 |
@Output('isSeen')
|
|
| 93 |
private isSeenEvt: EventEmitter<boolean>; |
|
| 94 |
|
|
| 95 |
@HostBinding('attr.seen')
|
|
| 96 |
public isSeen: boolean; |
|
| 97 |
|
|
| 98 |
private animation: CookieLawAnimation; |
|
| 99 |
private closeSvg: SafeHtml; |
|
| 100 |
private currentStyles: {};
|
|
| 101 |
private _learnMore: string; |
|
| 102 |
private _target: CookieLawTarget; |
|
| 103 |
private _position: CookieLawPosition; |
|
| 104 |
|
|
| 105 |
constructor( |
|
| 106 |
private _service: CookieLawService, |
|
| 107 |
private domSanitizer: DomSanitizer, |
|
| 108 |
) {
|
|
| 109 |
this.isSeenEvt = new EventEmitter<boolean>(); |
|
| 110 |
this.animation = 'topIn'; |
|
| 111 |
this._position = 'bottom'; |
|
| 112 |
this.cookieLawSeen = this._service.seen(); |
|
| 113 |
} |
|
| 114 |
|
|
| 115 |
ngOnInit(): void {
|
|
| 116 |
if (typeof document !== 'undefined') {
|
|
| 117 |
this.animation = this.position === 'bottom' ? 'bottomIn' : 'topIn'; |
|
| 118 |
|
|
| 119 |
this.closeSvg = '<span class="clickable uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="1"><path fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.06" d="M16,4 L4,16"></path></svg></span> ' ; |
|
| 120 |
|
|
| 121 |
if (this.cookieLawSeen) {
|
|
| 122 |
this.isSeen = true; |
|
| 123 |
} |
|
| 124 |
|
|
| 125 |
this.currentStyles = {
|
|
| 126 |
'top': this.position === 'top' ? '0' : null, |
|
| 127 |
'bottom': this.position === 'top' ? 'initial' : null, |
|
| 128 |
}; |
|
| 129 |
} |
|
| 130 |
} |
|
| 131 |
|
|
| 132 |
afterDismissAnimation(evt: AnimationEvent) {
|
|
| 133 |
if (evt.toState === 'topOut' || |
|
| 134 |
evt.toState === 'bottomOut') {
|
|
| 135 |
this.isSeen = true; |
|
| 136 |
this.isSeenEvt.emit(this.isSeen); |
|
| 137 |
} |
|
| 138 |
} |
|
| 139 |
|
|
| 140 |
public dismiss(evt?: MouseEvent): void {
|
|
| 141 |
if (evt) {
|
|
| 142 |
evt.preventDefault(); |
|
| 143 |
} |
|
| 144 |
|
|
| 145 |
this._service.storeCookie(); |
|
| 146 |
this.animation = this.position === 'top' ? 'topOut' : 'bottomOut'; |
|
| 147 |
} |
|
| 148 |
} |
|
| modules/uoa-services-library/branches/angular-7/ng-openaire-library/src/app/sharedComponents/cookie-law/icons.ts | ||
|---|---|---|
| 1 |
/** |
|
| 2 |
* angular2-cookie-law |
|
| 3 |
* |
|
| 4 |
* Copyright 2016-2017, @andreasonny83, All rights reserved. |
|
| 5 |
* |
|
| 6 |
* @author: @andreasonny83 <andreasonny83@gmail.com> |
|
| 7 |
*/ |
|
| 8 |
|
|
| 9 |
export const closeIcon: string = ` |
|
| 10 |
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> |
|
| 11 |
<path d="M377.047 184.198q0 8.26-6.037 14.297L313.505 256l57.505 57.505q6.037 6.037 6.037 14.297 0 8.578-6.037 14.615l-28.593 28.593q-6.037 6.037-14.615 6.037-8.26 0-14.297-6.037L256 313.505l-57.505 57.505q-6.037 6.037-14.297 6.037-8.578 0-14.615-6.037l-28.593-28.593q-6.037-6.037-6.037-14.615 0-8.26 6.037-14.297L198.495 256l-57.505-57.505q-6.037-6.037-6.037-14.297 0-8.578 6.037-14.615l28.593-28.593q6.037-6.037 14.615-6.037 8.26 0 14.297 6.037L256 198.495l57.505-57.505q6.037-6.037 14.297-6.037 8.578 0 14.615 6.037l28.593 28.593q6.037 6.037 6.037 14.615zM500 256q0-66.401-32.724-122.477-32.724-56.075-88.799-88.799Q322.401 12 256 12q-66.401 0-122.477 32.724-56.075 32.724-88.799 88.799Q12 189.599 12 256q0 66.401 32.724 122.477 32.724 56.075 88.799 88.799Q189.599 500 256 500q66.401 0 122.477-32.724 56.075-32.724 88.799-88.799Q500 322.401 500 256z"></path> |
|
| 12 |
</svg> |
|
| 13 |
`; |
|
| modules/uoa-services-library/branches/angular-7/ng-openaire-library/src/app/sharedComponents/other-portals/other-portals.component.ts | ||
|---|---|---|
| 1 |
import {Component, Input} from '@angular/core';
|
|
| 2 |
import {EnvProperties} from "../../utils/properties/env-properties";
|
|
| 3 |
|
|
Also available in: Unified diff
Creating a branch with name angular-7 for library