MaDgIK
/
connect-admin
13
0
Fork 0
Code Issues Pull Requests Projects Releases 9 Wiki Activity

[Admin | Trunk]: Merge from NewUI branch 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-admin-portal/trunk@61027 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
k.triantafyllou 2021-05-19 11:40:29 +00:00
parent d543670b19
commit 9362e91aa3
220 changed files with 7387 additions and 14691 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
angular.json
View File

@ -21,11 +21,11 @@
"src/robots.txt"
],
"styles": [
"src/styles.css",
"src/material.scss",
"node_modules/datatables.net-dt/css/jquery.dataTables.css",
"node_modules/interactiveminingv3/assets/css/interactive-mining.css",
"node_modules/interactiveminingv3/assets/css/animations.css"
"node_modules/interactiveminingv3/assets/css/animations.css",
"src/styles.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.js",

0
interactivemining-clean-install.sh → interactivemining-install.sh
View File

1
interactivemining.sh
View File

@ -1 +0,0 @@
npm install --no-save ./interactiveminingv3.tgz

BIN
interactiveminingv3.tgz
View File

Binary file not shown.

4
package.json
View File

@ -4,13 +4,15 @@
"license": "MIT",
"scripts": {
"ng": "ng",
"clean-install": "rm -rf node_modules; npm install; npm run mining",
"mining": "./interactivemining-install.sh",
"start": "ng serve --host 0.0.0.0 --disable-host-check --port=5000",
"build": "ng build --prod; npm run after-build-clean",
"build-beta": "ng build --configuration=beta; npm run after-build-clean",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"after-build-clean": "rm -rf dist/assets/common-assets/.svn/ dist/assets/connect-assets/.svn/"
"after-build-clean": "rm -rf dist/assets/common-assets/.svn/ dist/assets/connect-assets/.svn/ dist/assets/dashboard-theme/.svn/"
},
"private": true,
"dependencies": {

0
src/app/app.component.css
View File

37
src/app/app.component.html
View File

@ -1,30 +1,15 @@
<navbar *ngIf="properties && showMenu && header" portal="connect-admin" logoPath="assets/imgs/" [onlyTop]="false"
[header]="header" [userMenu]="true" [user]="user" [userMenuItems]="userMenuItems" [menuItems]="menuItems"
[properties]="properties"></navbar>
<div id="wrapper" class="uk-section uk-padding-remove">
<div class="uk-grid-collapse" uk-height-viewport="expand: true" uk-grid>
<sidebar *ngIf="showSidebar && this.router.url.split('?')[0]!= '/customize-layout'"
[menuItems]="sideMenuItems"
class="uk-width-1-5 uk-light sidebar "></sidebar>
<div class="uk-width-expand uk-overflow-auto"
[ngClass]="(!wellcome)?('uk-container uk-container-large uk-padding' + (this.router.url.split('?')[0]!=
'/customize-layout'?'':' uk-padding-remove-top uk-padding-remove-bottom')):''"
[ngStyle]="{height: (!wellcome)?'85vh':'90vh'}">
<router-outlet></router-outlet>
<div *ngIf="loading == true">
<loading [full]="true"></loading>
</div>
<div *ngIf="loading == false">
<div class="sidebar_main_swipe" [class.sidebar_main_active]="open && hasSidebar"
[class.sidebar_mini]="!open && hasSidebar">
<div *ngIf="hasHeader" style="right: 0; top: 0; position: fixed; width: 100%; z-index:981;">
<navbar *ngIf="properties" [properties]="properties" portal="connect-admin" [header]="menuHeader"
[userMenuItems]=userMenuItems [menuItems]="menuItems" [user]="user" [offCanvasFlip]="true"></navbar>
</div>
<!--
<feedback *ngIf= "properties" portalName="Admin" [feedbackQuestionaire]=properties.feedbackQuestionaire></feedback>
-->
<dashboard-sidebar *ngIf="hasSidebar" [headerUrl]="headerUrl" [items]="sideBarItems" [headerLogoUrl]="headerLogoUrl" [specialMenuItem]="specialSideBarMenuItem"></dashboard-sidebar>
<router-outlet></router-outlet>
</div>
</div>
<!--cookie-law *ngIf= "isClient" position="bottom">
OpenAIRE uses cookies in order to function properly.<br>
Cookies are small pieces of data that websites store in your browser to allow us to give you the best browsing experience possible.
By using the OpenAIRE portal you accept our use of cookies. <a href="//ec.europa.eu/ipg/basics/legal/cookies/index_en.htm" target="_blank"> Read more <span class="uk-icon">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="chevron-right" ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.03" points="7 4 13 10 7 16"></polyline></svg>
</span></a>
</cookie-law-->
<!-- <bottom *ngIf= "isClient"></bottom> -->

32
src/app/app.component.spec.ts
View File

@ -1,32 +0,0 @@
import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent
],
}).compileComponents();
}));
it('should create the app', async(() => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
}));
it(`should have as title 'app'`, async(() => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app.title).toEqual('app');
}));
it('should render title in a h1 tag', async(() => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
}));
});

596
src/app/app.component.ts
View File

@ -1,414 +1,226 @@
/**
* Created by stefania on 3/21/16.
*/
import {Component, OnInit} from '@angular/core';
import {MenuItem, RootMenuItem, SideMenuItem} from './openaireLibrary/sharedComponents/menu';
import {ActivatedRoute, NavigationStart, Router} from '@angular/router';
import {EnvironmentSpecificService} from './openaireLibrary/utils/properties/environment-specific.service';
import {CommunitiesService} from './openaireLibrary/connect/communities/communities.service';
import {ChangeDetectorRef, Component, HostListener, OnInit} from '@angular/core';
import {MenuItem, RootMenuItem} from './openaireLibrary/sharedComponents/menu';
import {ActivatedRoute, NavigationEnd, Params, Router} from '@angular/router';
import {EnvProperties} from './openaireLibrary/utils/properties/env-properties';
import {Session, User} from './openaireLibrary/login/utils/helper.class';
import {HelperFunctions} from './openaireLibrary/utils/HelperFunctions.class';
import {UserManagementService} from './openaireLibrary/services/user-management.service';
import {ConnectHelper} from "./openaireLibrary/connect/connectHelper";
import {Header} from './openaireLibrary/sharedComponents/navigationBar.component';
declare var UIkit: any;
import {LayoutService} from "./openaireLibrary/dashboard/sharedComponents/sidebar/layout.service";
import {properties} from "../environments/environment";
import {BehaviorSubject, Subscriber} from "rxjs";
import {CommunityInfo} from "./openaireLibrary/connect/community/communityInfo";
import {CommunityService} from "./openaireLibrary/connect/community/community.service";
import {arrow_left} from "./openaireLibrary/utils/icons/icons";
import {SmoothScroll} from "./openaireLibrary/utils/smooth-scroll";
@Component({
selector: 'app',
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
title = 'Metadata Registry Service';
userMenuItems: MenuItem[] = [];
menuItems: RootMenuItem [] = [];
sideMenuItems: SideMenuItem[] = [];
logInUrl = null;
logOutUrl = null;
community: { id: string, name: string, logoUrl: string } = null;
communityId = '';
communityType = null;
properties: EnvProperties = null;
isPortalAdministrator = false;
showSidebar: boolean;
wellcome = false;
showMenu: boolean = false;
title = 'Research Community Dashboard | Administrator';
properties: EnvProperties = properties;
user: User;
logoPath: string = 'assets/common-assets/';
header: Header;
params: BehaviorSubject<Params> = new BehaviorSubject<Params>(null);
hasSidebar: boolean = false;
hasHeader: boolean = false;
hasAdminMenu: boolean = false;
isFrontPage: boolean = false;
isDashboard: boolean = false;
sideBarItems: MenuItem[] = [];
specialSideBarMenuItem: MenuItem = null;
menuItems: RootMenuItem[] = [];
menuHeader: Header = {
route: "/",
url: null,
title: "Default menu header",
logoUrl: null,
logoSmallUrl: null,
position: 'center',
badge: false,
stickyAnimation: false
};
userMenuItems: MenuItem[] = [];
loading: boolean = true;
paramsResolved: boolean = false;
innerWidth;
public community: CommunityInfo = null;
private subscriptions: any[] = [];
headerLogoUrl: string;
headerUrl: string;
constructor(private route: ActivatedRoute,
private propertiesService: EnvironmentSpecificService,
private _communitiesService: CommunitiesService,
public router: Router,
private communityService: CommunityService,
private router: Router,
private cdr: ChangeDetectorRef,
private smoothScroll: SmoothScroll,
private layoutService: LayoutService,
private userManagementService: UserManagementService) {
this.router.events.forEach((event) => {
if (event instanceof NavigationStart) {
HelperFunctions.scroll();
this.wellcome = event.url === '/';
this.subscriptions.push(this.router.events.subscribe(event => {
if (event instanceof NavigationEnd) {
let r = this.route;
let params = r.snapshot.params;
while (r.firstChild && !params['community']) {
r = r.firstChild;
params = r.snapshot.params
}
this.paramsResolved = true;
this.params.next(params);
}
}));
}
ngOnInit() {
if (typeof document !== 'undefined' && window) {
this.innerWidth = window.innerWidth;
}
this.subscriptions.push(this.layoutService.hasSidebar.subscribe(hasSidebar => {
this.hasSidebar = hasSidebar;
this.cdr.detectChanges();
}));
this.subscriptions.push(this.layoutService.hasHeader.subscribe(hasHeader => {
this.hasHeader = hasHeader;
this.cdr.detectChanges();
}));
this.subscriptions.push(this.layoutService.hasAdminMenu.subscribe(hasAdminMenu => {
this.hasAdminMenu = hasAdminMenu;
this.cdr.detectChanges();
}));
this.subscriptions.push(this.layoutService.isFrontPage.subscribe(isFrontPage => {
this.isFrontPage = isFrontPage;
this.cdr.detectChanges();
}));
this.subscriptions.push(this.layoutService.isDashboard.subscribe(isDashboard => {
this.isDashboard = isDashboard;
this.cdr.detectChanges();
}));
this.layoutService.setSmallScreen((this.innerWidth && this.innerWidth < 1219));
this.layoutService.setOpen(!(this.innerWidth && this.innerWidth < 1219));
this.subscriptions.push(this.params.subscribe(params => {
if (this.paramsResolved) {
this.loading = true;
if (params && params['community']) {
if (!this.community || this.community.communityId !== params['community']) {
this.subscriptions.push(this.communityService.getCommunity(params['community']).subscribe(community => {
if (community) {
this.community = community;
this.buildMenu();
this.loading = false;
} else {
this.community = null;
this.buildMenu();
this.loading = false;
}
}));
} else {
this.buildMenu();
this.loading = false;
}
} else {
this.communityService.setCommunity(null);
this.layoutService.setOpen(!(this.innerWidth && this.innerWidth < 1219));
this.community = null;
this.buildMenu();
this.loading = false;
}
}
}));
this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {
this.user = user;
if (this.user) {
localStorage.setItem('user_id', this.user.id);
localStorage.setItem('mining_backend_address', this.properties.miningBackendURL);
localStorage.setItem('isCommunityManager', Session.isCommunityCurator(this.user) + '');
this.buildMenu();
}
}));
}
@HostListener('window:resize', ['$event'])
onResize(event) {
if (this.layoutService.isSmallScreen && event.target.innerWidth > 1219) {
this.layoutService.setSmallScreen(false);
} else if (!this.layoutService.isSmallScreen && event.target.innerWidth < 1219) {
this.layoutService.setSmallScreen(true);
this.layoutService.setOpen(false);
}
}
public ngOnDestroy() {
this.subscriptions.forEach(value => {
if (value instanceof Subscriber) {
value.unsubscribe();
}
});
this.communityService.clearSubscriptions();
this.userManagementService.clearSubscriptions();
this.layoutService.clearSubscriptions();
this.smoothScroll.clearSubscriptions();
}
ngOnInit() {
this.propertiesService.loadEnvironment()
.then(es => {
this.propertiesService.setEnvProperties(es);
this.properties = this.propertiesService.envSpecific;
this.logInUrl = this.properties.loginUrl;
this.logOutUrl = this.properties.logoutUrl;
this.showSidebar = false;
this.showMenu = false;
this.userManagementService.getUserInfo().subscribe(user => {
this.user = user;
if (this.user) {
localStorage.setItem('user_id', this.user.id);
localStorage.setItem('mining_backend_address', this.properties.miningBackendURL);
localStorage.setItem('isCommunityManager', Session.isCommunityCurator(this.user) + '');
this.isPortalAdministrator = Session.isPortalAdministrator(this.user);
}
this._communitiesService.updateCommunities(this.properties, this.properties.communityAPI + 'communities');
this.route.queryParams.subscribe(params => {
this.communityId = (params['communityId']) ? params['communityId'] : '';
ConnectHelper.setPortalTypeFromPid(this.communityId);
this.communityType = null;
this.menuItems = [];
this.userMenuItems = [];
this._communitiesService.getCommunitiesState().subscribe(
communities => {
// this.community = community;
if (!communities || communities.length === 0) {
return;
}
this.userMenuItems = [];
let countCommunities = 0;
let index_managerOfCommunity = null;
for (let i = 0; i < communities.length; i++) {
const com = communities[i];
if (Session.isPortalAdministrator(this.user) || Session.isCommunityCurator(this.user)) {
this.userMenuItems.push(new MenuItem('manage' + com.communityId, 'Manage ' + ((com.shortTitle) ? com.shortTitle : com.title), '', '/dashboard', false, [], [], {communityId: com.communityId}));
} else {
for (const manager of com.managers) {
if (this.user && manager == this.user.email) {
countCommunities++;
index_managerOfCommunity = i;
this.userMenuItems.push(new MenuItem('manage' + com.communityId, 'Manage ' + ((com.shortTitle) ? com.shortTitle : com.title), '', '/dashboard', false, [], [], {communityId: com.communityId}));
break;
}
}
}
if (com.communityId === this.communityId) {
this.community = {
id: com.communityId,
name: (com.shortTitle) ? com.shortTitle : com.title,
logoUrl: com.logoUrl
};
this.header = {
url: 'https://' + (this.properties.environment == 'beta' ? 'beta.' : '') + this.community.id + '.openaire.eu',
title: this.community.name,
logoUrl: this.community.logoUrl,
logoSmallUrl: this.community.logoUrl,
position: 'left',
badge: true
};
this.communityType = com.type;
this.menuItems = [
{
rootItem: new MenuItem('dashboard', 'Overview', '/dashboard', '/dashboard', false, [], null, {communityId: com.communityId}),
items: []
}
];
} else if (countCommunities === 1 && index_managerOfCommunity != null) {
this.community = {
id: communities[index_managerOfCommunity].communityId,
name: (communities[index_managerOfCommunity].shortTitle) ? communities[index_managerOfCommunity].shortTitle : com.title,
logoUrl: communities[index_managerOfCommunity].logoUrl
};
this.header = {
url: 'https://' + (this.properties.environment == 'beta' ? 'beta.' : '') + this.community.id + '.openaire.eu',
title: this.community.name,
logoUrl: this.community.logoUrl,
logoSmallUrl: this.community.logoUrl,
position: 'left',
badge: true
};
this.menuItems = [
{
rootItem: new MenuItem('dashboard', 'Overview', '/dashboard', '/dashboard', false, [], null, {communityId: communities[index_managerOfCommunity].communityId}),
items: []
}
];
}
}
if (!this.communityId || this.communityId === '') {
this.header = {
route: "/",
url: null,
title: 'connect-admin',
logoUrl: this.logoPath + 'logo-large-connect.png',
logoSmallUrl:this.logoPath + 'logo-small-connect.png',
position:'left',
badge:true
};
this.community = null;
}
if (this.communityId) {
this.userMenuItems.push(new MenuItem('manage-user-notifications', 'Manage notification settings', '', '/manage-user-notifications', false, [], [], {communityId: this.communityId}));
this.userMenuItems.push(new MenuItem('personal', 'Manage Personal Info', '', '/personal', false, [], [], {communityId: this.communityId}));
this.userMenuItems.push(new MenuItem('', 'Support', 'https://openaire-connect.d4science.org/group/openaire-connect-gateway/explore?siteId=172366611', '', false, [], [], {}));
}
this.showMenu = true;
this.buildSideBar();
},
error => {
if ((this.communityId && this.communityId !== '') || window.location.pathname === '/') {
UIkit.notification({
message: '<strong>System error retrieving communities.<strong>',
status: 'warning',
timeout: 3000,
pos: 'top-center'
});
}
}
);
});
});
});
public get open() {
return this.layoutService.open;
}
private buildSideBar() {
this.sideMenuItems = [];
this.showSidebar = false;
if ((!this.communityId || this.communityId == '') && this.isPortalAdministrator) {
const adminTools: SideMenuItem = {
rootItem: new MenuItem('adminTools', 'Admin Tools', '',
'', false, [], [], null),
items: [],
ukIcon: 'desktop'
};
adminTools.items.push({
rootItem: new MenuItem('communities', 'Communities', '/communities',
'/communities', false, [], [], null),
items: []
}
);
adminTools.items.push({
rootItem: new MenuItem('classes', 'Classes', '/classes',
'/classes', false, [], [], null),
items: []
}
);
adminTools.items.push({
rootItem: new MenuItem('pages', 'Pages', '/pages',
'/pages', false, [], [], null),
items: []
}
);
adminTools.items.push({
rootItem: new MenuItem('entities', 'Entities', '/entities',
'/entities', false, [], [], null),
items: []
}
);
this.sideMenuItems.push(adminTools);
this.sideMenuItems.push({
rootItem: new MenuItem('communities', 'Manage Communities', '/',
'/', false, [], [], null),
items: [],
ukIcon: 'cog'
});
this.sideMenuItems.push({
rootItem: new MenuItem('communities', 'Explore', '',
'/dashboard', false, [], [], {communityId: 'openaire'}),
items: [],
ukIcon: 'cog'
});
this.sideMenuItems.push({
rootItem: new MenuItem('communities', 'Connect', '',
'/dashboard', false, [], [], {communityId: 'connect'}),
items: [],
ukIcon: 'cog'
});
} else if (this.communityId && this.communityId !== '') {
this.sideMenuItems.push({
rootItem: new MenuItem('overview', 'Overview', '/dashboard',
'/dashboard', false, [], [], {communityId: this.communityId}),
items: [],
ukIcon: 'home'
});
if (this.isPortalAdministrator) {
const adminTools: SideMenuItem = {
rootItem: new MenuItem('adminTools', 'Admin Tools', '/communities',
'/communities', false, [], [], null),
items: [],
ukIcon: 'desktop'
};
this.sideMenuItems.push(adminTools);
private buildMenu() {
this.menuItems = [];
this.userMenuItems = [];
this.sideBarItems = [];
if (this.user) {
if (this.isCurator()) {
this.userMenuItems.push(new MenuItem("", "Manage communities",
"", "/", false, [], [], {}));
}
if (this.communityId !== 'openaire' && this.communityId !== 'connect') {
const community: SideMenuItem = {
rootItem: new MenuItem('community', 'Community', '',
'', false, [], [], null),
items: [],
ukIcon: 'album'
};
community.items.push({
rootItem: new MenuItem('communityProfile', 'Community Profile', '/community-edit-form',
'/community-edit-form', false, [], [], {communityId: this.communityId}),
items: []
});
community.items.push({
rootItem: new MenuItem('communityAffiliations', 'Organizations', '/organizations',
'/organizations', false, [], [], {communityId: this.communityId}),
items: []
});
/*community.items.push({
rootItem: new MenuItem('layout', 'Customize Layout', '/customize-layout',
'/customize-layout', false, [], [], {communityId: this.communityId}),
items: []
});*/
this.sideMenuItems.push(community);
const communityContent: SideMenuItem = {
rootItem: new MenuItem('communityContent', 'Community Content', '',
'', false, [], [], null),
items: [],
ukIcon: 'list'
};
communityContent.items.push({
rootItem: new MenuItem('projects', 'Projects', '/manage-projects',
'/manage-projects', false, [], [], {communityId: this.communityId}),
items: []
}
);
communityContent.items.push({
rootItem: new MenuItem('contentProviders', 'Content providers', '/manage-content-providers',
'/manage-content-providers', false, [], [], {communityId: this.communityId}),
items: []
});
if (this.communityType && this.communityType != 'ri') {
communityContent.items.push({
rootItem: new MenuItem('subjects', 'Subjects', '/manage-subjects',
'/manage-subjects', false, [], [], {communityId: this.communityId}),
items: []
});
}
communityContent.items.push({
rootItem: new MenuItem('zenodoCommunities', 'Zenodo communities', '/manage-zenodo-communities',
'/manage-zenodo-communities', false, [], [], {communityId: this.communityId}),
items: []
});
this.sideMenuItems.push(communityContent);
}
const entities: SideMenuItem = {
rootItem: new MenuItem('entitiesPages', 'Entities & pages', '',
'', false, [], [], null),
items: [],
ukIcon: 'world'
};
entities.items.push({
rootItem: new MenuItem('entities', 'Activate Entities', '/entities',
'/entities', false, [], [], {communityId: this.communityId}),
items: []
});
const pages: MenuItem[] = [];
pages.push(new MenuItem('search', 'Search', '/pages',
'/pages', false, [], [], {communityId: this.communityId, type: 'search'}));
pages.push(new MenuItem('link', 'Link', '/pages',
'/pages', false, [], [], {communityId: this.communityId, type: 'link'}));
pages.push(new MenuItem('share', 'Share', '/pages',
'/pages', false, [], [], {communityId: this.communityId, type: 'share'}));
pages.push(new MenuItem('landing', 'Landing', '/pages',
'/pages', false, [], [], {communityId: this.communityId, type: 'landing'}));
// pages.push(new MenuItem('html', 'HTML', '/pages',
// '/pages', false, [], [], {communityId: this.communityId, type: 'html'}));
pages.push(new MenuItem('other', 'Other', '/pages',
'/pages', false, [], [], {communityId: this.communityId, type: 'other'}));
entities.items.push({
rootItem: new MenuItem('pages', 'Pages', '/pages',
'/pages', false, [], [], {communityId: this.communityId}),
items: pages
});
this.sideMenuItems.push(entities);
const help: SideMenuItem = {
rootItem: new MenuItem('help', 'Help Texts', '',
'', false, [], [], null),
items: [],
ukIcon: 'file-edit'
};
help.items.push({
rootItem: new MenuItem('pages', 'Page Help Texts', '/pageContents',
'/pageContents', false, [], [], {communityId: this.communityId}),
items: []
});
if (this.communityId === 'openaire' || this.communityId === 'connect') {
help.items.push({
rootItem: new MenuItem('classes', 'Class Help Texts', '/classContents',
'/classContents', false, [], [], {communityId: this.communityId}),
items: []
});
}
this.sideMenuItems.push(help);
if (this.communityId !== 'openaire' && this.communityId !== 'connect') {
const stats: SideMenuItem = {
rootItem: new MenuItem('stats', 'Statistics & Charts', '/stats',
'/stats', false, [], [], {communityId: this.communityId}),
items: [],
ukIcon: 'image'
};
this.sideMenuItems.push(stats);
const claims: SideMenuItem = {
rootItem: new MenuItem('claims', 'Links', '/claims',
'/claims', false, [], [], {communityId: this.communityId}),
items: [],
ukIcon: 'link'
};
this.sideMenuItems.push(claims);
if (this.communityType && this.communityType === 'ri') {
const mining: SideMenuItem = {
rootItem: new MenuItem('mining', 'Text Mining Rules', '/mining/manage-profiles',
'/mining/manage-profiles', false, [], [], {communityId: this.communityId}),
items: [],
ukIcon: 'settings'
};
this.sideMenuItems.push(mining);
}
const users: SideMenuItem = {
rootItem: new MenuItem('users', 'Users', '',
'', false, [], [], null),
items: [],
ukIcon: 'user'
};
users.items.push({
rootItem: new MenuItem('invite', 'Invite to Subscribe', 'https://beta.' + this.communityId + '.openaire.eu/invite',
'', false, [], [], null),
items: []
});
users.items.push({
rootItem: new MenuItem('subscribers', 'Subscribers', '/manage-subscribers',
'/manage-subscribers', false, [], [], {communityId: this.communityId}),
items: []
});
users.items.push({
rootItem: new MenuItem('personalInfo', 'Personal Info', '/personal',
'/personal', false, [], [], {communityId: this.communityId}),
items: []
});
users.items.push({
rootItem: new MenuItem('notifications', 'Notification settings', '/manage-user-notifications',
'/manage-user-notifications', false, [], [], {communityId: this.communityId}),
items: []
});
this.sideMenuItems.push(users);
if (Session.isPortalAdministrator(this.user)) {
this.userMenuItems.push(new MenuItem("adminOptions", "Super Admin options", "", "/admin-tools/portals", false, [], [], {}));
this.userMenuItems.push(new MenuItem("connectOptions", "Connect portal options", "", "/connect/admin-tools/pages", false, [], [], {}));
this.userMenuItems.push(new MenuItem("exploreOptions", "Explore portal options", "", "/openaire/admin-tools/pages", false, [], [], {}));
}
this.userMenuItems.push(new MenuItem("", "User information", "", "/user-info", false, [], [], {}));
}
if (this.sideMenuItems.length > 0) {
this.showSidebar = true;
if (this.community) {
this.headerLogoUrl = this.community.logoUrl;
this.headerUrl = 'https://' + ((properties.environment !== 'production')?'beta.':'') + this.community.communityId + '.openaire.eu';
this.menuHeader = {
route: "/" + this.community.communityId,
url: null,
title: 'Admin - ' + this.community.shortTitle,
logoUrl: null,
logoSmallUrl: null,
position: 'center',
badge: false,
stickyAnimation: false
};
this.sideBarItems.push(new MenuItem("community", "Community Info", "", "/" + this.community.communityId, false, [], [], {}, null, null, null, "/" + this.community.communityId + "/info"));
this.sideBarItems.push(new MenuItem("users", "Users", "", "/" + this.community.communityId + "/users", false, [], [], {}, null, null, null, "/" + this.community.communityId + "/users"));
this.sideBarItems.push(new MenuItem("admin-tools", "Pages & Entities", "", "/" + this.community.communityId + "/admin-tools/pages", false, [], [], {}, null, null, null, "/" + this.community.communityId + "/admin-tools"));
this.sideBarItems.push(new MenuItem("customization", "Customization", "", "/" + this.community.communityId + "/customize-layout", false, [], [], {}));
if (this.community.type === 'ri') {
this.sideBarItems.push(new MenuItem("mining", "Mining", "", "/" + this.community.communityId + "/mining/manage-profiles", false, [], [], {}, null, null, null, "/" + this.community.communityId + "/mining"));
}
this.specialSideBarMenuItem = new MenuItem("back", "Manage communities", "", "/", false, [], null, {});
this.specialSideBarMenuItem.icon = '<span class="uk-icon-button small uk-icon uk-button-secondary">' + arrow_left.data + '</span>';
this.specialSideBarMenuItem.customClass = 'uk-text-uppercase uk-text-bold uk-text-secondary';
} else {
this.headerLogoUrl = null;
this.headerUrl = 'https://' + ((properties.environment !== 'production')?'beta.':'') + 'connect.openaire.eu';
this.menuHeader = {
route: null,
url: null,
title: 'Admin - Research Community Dashboard',
logoUrl: null,
logoSmallUrl: null,
position: 'center',
badge: false,
stickyAnimation: false
};
this.sideBarItems.push(new MenuItem("communities", "Manage Communities", "", "/", false, [], [], {}));
this.specialSideBarMenuItem = null;
}
}
private isCurator() {
return this.user && (Session.isPortalAdministrator(this.user) || Session.isCommunityCurator(this.user) || Session.isKindOfCommunityManager(this.user));
}
}

94
src/app/app.module.ts
View File

@ -1,65 +1,59 @@
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { AppRoutingModule} from './app.routing';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HelpContentService } from './services/help-content.service';
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
import {AppComponent} from './app.component';
import {AppRoutingModule} from './app.routing';
import {ReactiveFormsModule} from '@angular/forms';
import {NavigationBarModule} from './openaireLibrary/sharedComponents/navigationBar.module';
import { CookieLawModule } from './openaireLibrary/sharedComponents/cookie-law/cookie-law.module';
import {BottomModule} from './openaireLibrary/sharedComponents/bottom.module';
import { ConnectAdminLoginGuard} from './openaireLibrary/connect/communityGuard/connectAdminLoginGuard.guard';
import { EnvironmentSpecificResolver} from './openaireLibrary/utils/properties/environmentSpecificResolver';
import { EnvironmentSpecificService} from './openaireLibrary/utils/properties/environment-specific.service';
import {CommunitiesService} from './openaireLibrary/connect/communities/communities.service';
import {CommunityErrorPageComponent} from './openaireLibrary/connect/communityGuard/communityErrorPage.component';
import {ConnectAdminLoginGuard} from './openaireLibrary/connect/communityGuard/connectAdminLoginGuard.guard';
import {IsCommunity} from './openaireLibrary/connect/communityGuard/isCommunity.guard';
import {AdminErrorPageComponent} from './pages/error/errorPage.component';
import {ErrorModule} from './openaireLibrary/error/error.module';
import {TitleCasePipe} from '@angular/common';
import {AlertModalModule} from './openaireLibrary/utils/modal/alertModal.module';
import {FABModule} from './utils/fabModule.module';
import {SafeHtmlPipeModule} from './openaireLibrary/utils/pipes/safeHTMLPipe.module';
import {InteractiveMiningModule} from 'interactiveminingv3';
import {CommunityService} from './openaireLibrary/connect/community/community.service';
import {SubscribeService} from './openaireLibrary/utils/subscribe/subscribe.service';
import {ConnectRIGuard} from './openaireLibrary/connect/communityGuard/connectRIGuard.guard';
import {SideBarModule} from "./openaireLibrary/sharedComponents/sidebar/sideBar.module";
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {CommunityErrorModule} from './openaireLibrary/connect/communityGuard/communityError.module';
import {LoadingModule} from "./openaireLibrary/utils/loading/loading.module";
import {SideBarModule} from "./openaireLibrary/dashboard/sharedComponents/sidebar/sideBar.module";
import {SharedModule} from "./openaireLibrary/shared/shared.module";
import {ErrorInterceptorService} from "./openaireLibrary/error-interceptor.service";
import {DEFAULT_TIMEOUT, TimeoutInterceptor} from "./openaireLibrary/timeout-interceptor.service";
import {AdminLoginGuard} from "./openaireLibrary/login/adminLoginGuard.guard";
import {LoginGuard} from "./openaireLibrary/login/loginGuard.guard";
@NgModule({
imports: [
AppRoutingModule,
BrowserModule,
HttpClientModule,
FormsModule,
ReactiveFormsModule,
BottomModule, NavigationBarModule, CookieLawModule,
ErrorModule,
AlertModalModule, SafeHtmlPipeModule, FABModule,
InteractiveMiningModule,
SideBarModule,
BrowserAnimationsModule, CommunityErrorModule
],
declarations: [
AppComponent,
// CommunityErrorPageComponent,
AdminErrorPageComponent
],
providers: [
HelpContentService, CommunityService, SubscribeService,
ConnectAdminLoginGuard,
EnvironmentSpecificResolver, EnvironmentSpecificService,
IsCommunity, ConnectRIGuard, CommunitiesService, TitleCasePipe
],
bootstrap: [ AppComponent ]
imports: [
AppRoutingModule,
BrowserModule,
HttpClientModule,
ReactiveFormsModule,
BottomModule, NavigationBarModule,
ErrorModule,
SharedModule,
InteractiveMiningModule,
BrowserAnimationsModule, LoadingModule, SideBarModule
],
declarations: [
AppComponent,
AdminErrorPageComponent
],
providers: [
SubscribeService,
ConnectAdminLoginGuard, AdminLoginGuard, LoginGuard,
IsCommunity, ConnectRIGuard, TitleCasePipe,
{
provide: HTTP_INTERCEPTORS,
useClass: ErrorInterceptorService,
multi: true
},
[{provide: HTTP_INTERCEPTORS, useClass: TimeoutInterceptor, multi: true}],
[{provide: DEFAULT_TIMEOUT, useValue: 30000}]
],
bootstrap: [AppComponent]
})
export class AppModule { }
export class AppModule {
}

176
src/app/app.routing.ts
View File

@ -1,176 +1,70 @@
/**
* Created by stefania on 9/16/16.
*/
import { NgModule} from '@angular/core';
import { Routes, RouterModule} from '@angular/router';
import {NgModule} from '@angular/core';
import {PreloadAllModules, RouterModule, Routes} from '@angular/router';
import {IsCommunity} from './openaireLibrary/connect/communityGuard/isCommunity.guard';
import {ConnectAdminLoginGuard} from './openaireLibrary/connect/communityGuard/connectAdminLoginGuard.guard';
import {ConnectRIGuard} from './openaireLibrary/connect/communityGuard/connectRIGuard.guard';
import {EnvironmentSpecificResolver} from './openaireLibrary/utils/properties/environmentSpecificResolver';
import {CommunityErrorPageComponent} from './openaireLibrary/connect/communityGuard/communityErrorPage.component';
import {AdminErrorPageComponent} from './pages/error/errorPage.component';
import {AdminLoginGuard} from "./openaireLibrary/login/adminLoginGuard.guard";
import {LoginGuard} from "./openaireLibrary/login/loginGuard.guard";
const appRoutes: Routes = [
const routes: Routes = [
{
path: '',
loadChildren: './pages/wellcome/wellcome.module#WellcomeModule',
resolve: { envSpecific: EnvironmentSpecificResolver }
},
{
path: 'dashboard',
loadChildren: './pages/dashboard/dashboard.module#DashboardModule',
resolve: {envSpecific: EnvironmentSpecificResolver}
},
{
path: 'manage-user-notifications',
loadChildren: './pages/usernotifications/manage-user-notifications.module#ManageUserNotificationsModule',
resolve: {envSpecific: EnvironmentSpecificResolver}
},
{
path: 'personal',
loadChildren: './pages/curator/curator.module#CuratorModule',
resolve: { envSpecific: EnvironmentSpecificResolver }
},
{
path: 'organizations',
loadChildren: './pages/affiliations/affiliations.module#AffiliationsModule',
resolve: { envSpecific: EnvironmentSpecificResolver }
},
{
path: 'communities',
loadChildren: './pages/community/communities.module#CommunitiesModule',
resolve: { envSpecific: EnvironmentSpecificResolver }
},
{
path: 'community-edit-form',
loadChildren: './pages/community/community-edit-form/community-edit-form.module#CommunityEditFormModule',
resolve: { envSpecific: EnvironmentSpecificResolver }
},
{
path: 'manage-zenodo-communities',
loadChildren: './pages/zenodo-communities/zenodo-communities.module#ZenodoCommunitiesModule',
resolve: { envSpecific: EnvironmentSpecificResolver }
},
{
path: 'manage-subscribers',
loadChildren: './pages/subscribers/manage-subscribers.module#ManageSubscribersModule',
resolve: { envSpecific: EnvironmentSpecificResolver }
},
{
path: 'manage-subjects',
loadChildren: './pages/subjects/subjects-edit-form/subjects-edit-form.module#SubjectsEditFormModule',
resolve: { envSpecific: EnvironmentSpecificResolver }
},
{
path: 'entities',
loadChildren: './pages/entity/entities.module#EntitiesModule',
resolve: { envSpecific: EnvironmentSpecificResolver }
},
{
path: 'classes',
loadChildren: './pages/divId/divIds.module#DivIdsModule',
resolve: { envSpecific: EnvironmentSpecificResolver }
},
{
path: 'pages',
loadChildren: './pages/page/pages.module#PagesModule',
resolve: { envSpecific: EnvironmentSpecificResolver }
},
{
path: 'pageContents',
loadChildren: './pages/helpcontent/page-help-contents.module#PageHelpContentsModule',
resolve: { envSpecific: EnvironmentSpecificResolver }
},
{
path: 'pageContents/new',
loadChildren: './pages/helpcontent/new-page-help-content.module#NewPageHelpContentModule',
resolve: { envSpecific: EnvironmentSpecificResolver }
},
{
path: 'pageContents/edit',
loadChildren: './pages/helpcontent/edit-page-help-content.module#EditPageHelpContentModule',
resolve: { envSpecific: EnvironmentSpecificResolver }
},
{
path: 'classContents',
loadChildren: './pages/divhelpcontent/div-help-contents.module#DivHelpContentsModule',
resolve: { envSpecific: EnvironmentSpecificResolver }
},
{
path: 'classContents/new',
loadChildren: './pages/divhelpcontent/new-div-help-content.module#NewDivHelpContentModule',
resolve: { envSpecific: EnvironmentSpecificResolver }
},
{
path: 'classContents/edit',
loadChildren: './pages/divhelpcontent/edit-div-help-content.module#EditDivHelpContentModule',
resolve: { envSpecific: EnvironmentSpecificResolver }
},
{
path: 'htmlPageContent/edit',
loadChildren: './pages/htmlpagecontent/edit-html-page-content.module#EditHtmlPageContentModule',
resolve: { envSpecific: EnvironmentSpecificResolver }
},
{
path: 'claims',
loadChildren: './pages/claims/claims.module#ClaimsModule',
resolve: { envSpecific: EnvironmentSpecificResolver }
loadChildren: './pages/manage-communities/manage-communities.module#ManageCommunitiesModule',
canActivateChild: [LoginGuard]
},
{
path: 'reload',
loadChildren: './reload/libReload.module#LibReloadModule',
resolve: { envSpecific: EnvironmentSpecificResolver }
data: {hasSidebar: false, hasHeader: false}
},
{
path: 'user-info',
loadChildren: './login/libUser.module#LibUserModule',
resolve: { envSpecific: EnvironmentSpecificResolver }
data: {hasSidebar: false}
},
{ path: 'error',
pathMatch: 'full',
component: AdminErrorPageComponent,
data: {hasSidebar: false}
},
{
path: 'stats',
loadChildren: './pages/stats/stats.module#StatsModule',
resolve: { envSpecific: EnvironmentSpecificResolver }
path: 'connect/admin-tools',
loadChildren: './pages/admin-tools/admin-tools-routing.module#AdminToolsRoutingModule',
canActivateChild: [AdminLoginGuard],
data: {portal: 'connect'}
},
{
path: 'manage-projects',
loadChildren: './pages/community/projects/communityProjects.module#CommunityProjectsModule',
resolve: { envSpecific: EnvironmentSpecificResolver }
path: 'openaire/admin-tools',
loadChildren: './pages/admin-tools/admin-tools-routing.module#AdminToolsRoutingModule',
canActivateChild: [AdminLoginGuard],
data: {portal: 'openaire'}
},
{
path: 'manage-content-providers',
loadChildren: './pages/community/content-providers/communityContentProviders.module#CommunityContentProvidersModule',
resolve: { envSpecific: EnvironmentSpecificResolver }
},
/*{
path: 'customize-layout',
loadChildren: './pages/customization/customization.module#CustomizationModule',
resolve: { envSpecific: EnvironmentSpecificResolver }
},*/
{
path: 'manage-content-providers/criteria',
loadChildren: './pages/community/content-providers/criteria/criteria.module#CriteriaModule',
resolve: { envSpecific: EnvironmentSpecificResolver }
path: 'admin-tools',
loadChildren: './pages/admin-tools/portal-admin-tools-routing.module#PortalAdminToolsRoutingModule',
canActivateChild: [AdminLoginGuard]
},
{
path: 'mining',
loadChildren: './pages/mining/mining.module#MiningModule',
canLoad: [IsCommunity, ConnectAdminLoginGuard, ConnectRIGuard]
path: ':community', redirectTo: '/:community/info/profile', pathMatch: 'full'
},
{
path: 'errorcommunity',
component: CommunityErrorPageComponent
path: ':community',
loadChildren: './pages/community-routing.module#CommunityRoutingModule',
canActivateChild: [IsCommunity, ConnectAdminLoginGuard]
},
{ path: '**',
pathMatch: 'full',
component: AdminErrorPageComponent
}
];
];
@NgModule({
imports: [ RouterModule.forRoot(appRoutes) ],
imports: [RouterModule.forRoot(routes, {
preloadingStrategy: PreloadAllModules,
onSameUrlNavigation: "reload",
relativeLinkResolution: 'corrected'
})],
exports: [ RouterModule ]
})
export class AppRoutingModule {}

41
src/app/pages/admin-tools/admin-tools-routing.module.ts Normal file
View File

@ -0,0 +1,41 @@
import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';
@NgModule({
imports: [
RouterModule.forChild([
{
path: 'entities',
loadChildren: '../../openaireLibrary/dashboard/entity/entities.module#EntitiesModule',
pathMatch: 'full'
},
{
path: 'classContents',
loadChildren: '../../openaireLibrary/dashboard/divhelpcontent/class-help-contents.module#ClassHelpContentsModule',
pathMatch: 'full'
},
{
path: 'classContents/edit',
loadChildren: '../../openaireLibrary/dashboard/divhelpcontent/class-help-content-form.module#ClassHelpContentFormModule',
pathMatch: 'full'
},
{
path: 'helptexts',
loadChildren: '../../openaireLibrary/dashboard/helpTexts/page-help-contents.module#PageHelpContentsModule',
pathMatch: 'full'
},
{
path: 'helptexts/edit',
loadChildren: '../../openaireLibrary/dashboard/helpTexts/page-help-content-form.module#PageHelpContentFormModule',
pathMatch: 'full'
},
{
path: 'pages',
loadChildren: '../../openaireLibrary/dashboard/page/pages.module#PagesModule',
pathMatch: 'full'
}
])
]
})
export class AdminToolsRoutingModule {
}

13
src/app/pages/admin-tools/portal-admin-tools-routing.module.ts Normal file
View File

@ -0,0 +1,13 @@
import {NgModule} from "@angular/core";
import {RouterModule} from "@angular/router";
@NgModule({
imports: [RouterModule.forChild([
{path: '', loadChildren: './admin-tools-routing.module#AdminToolsRoutingModule'},
{path: 'portals', loadChildren: '../../openaireLibrary/dashboard/portal/portals.module#PortalsModule'},
{path: 'classes', loadChildren: '../../openaireLibrary/dashboard/divId/divIds.module#DivIdsModule'}
])]
})
export class PortalAdminToolsRoutingModule {
}

6
src/app/pages/affiliations/affiliations-routing.module.ts
View File

@ -1,13 +1,11 @@
import { NgModule } from '@angular/core';
import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';
import {AffiliationsComponent} from './affiliations.component';
import {IsCommunity} from '../../openaireLibrary/connect/communityGuard/isCommunity.guard';
import {ConnectAdminLoginGuard} from '../../openaireLibrary/connect/communityGuard/connectAdminLoginGuard.guard';
@NgModule({
imports: [
RouterModule.forChild([
{ path: '', canActivate: [IsCommunity, ConnectAdminLoginGuard], component: AffiliationsComponent}
{ path: '', component: AffiliationsComponent}
])
]
})

202
src/app/pages/affiliations/affiliations.component.html
View File

@ -1,135 +1,83 @@
<ng-template #card let-organization="organization">
<div class="uk-card-media-top affiliation-logo uk-padding-small">
<img *ngIf= "organization.logo_url != null && organization.logo_url != '' " class="uk-text-center"
src="{{urlPrefix(organization.logo_url) + organization.logo_url}}" alt="{{(organization.name)?organization.name:''}} logo">
<span *ngIf= "organization.logo_url == null || organization.logo_url == '' "class="uk-icon uk-padding-small">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" icon="image" ratio="2.5"><circle cx="16.1" cy="6.1" r="1.1"></circle><rect fill="none" stroke="#000" x="0.5" y="2.5" width="19" height="15"></rect><polyline fill="none" stroke="#000" stroke-width="1.01" points="4,13 8,9 13,14"></polyline><polyline fill="none" stroke="#000" stroke-width="1.01" points="11,12 12.5,10.5 16,14"></polyline></svg>
</span>
</div>
</ng-template>
<ng-template #affiliations_list>
<div class="uk-margin uk-flex uk-flex-middle" uk-grid>
<h4 class="uk-width-2-5">
<span *ngIf="curatorAffiliations">My Affiliations</span>
<span *ngIf="!curatorAffiliations">Related Organizations</span>
</h4>
<div class="uk-width-expand">
<button class="uk-button portal-button uk-align-right" (click)="initAffiliation()">
<span uk-icon="plus"></span>
<span *ngIf="curatorAffiliations">Add new Affiliation</span>
<span *ngIf="!curatorAffiliations">Add new Organization</span>
</button>
</div>
<div *ngIf="!curatorAffiliations && organizationsPageId" class="uk-width-1-1 uk-margin">
Do you need to add more information about the Related Organizations? Click
<!-- classContentId: ,-->
<!-- /edit-->
<a [queryParams]="{communityId: communityId, pageId: organizationsPageId}" routerLink="/pageContents"
routerLinkActive="router-link-active">
here
<div page-content>
<div header>
<community-info tab="organizations"></community-info>
<div class="uk-flex uk-flex-right@m uk-flex-center uk-margin-small-top">
<a *ngIf="!organizationsEnabled" (click)="enableAffiliations()" class="uk-flex uk-flex-middle uk-text-uppercase uk-margin-right">
<button class="large uk-icon-button uk-button-secondary">
<icon name="preview"></icon>
</button>
<button class="uk-button uk-button-link uk-margin-small-left uk-text-secondary">
Enable Organizations Page
</button>
</a>
.
<div *ngIf="!organizationsEnabled" class="uk-alert uk-alert-warning" role="alert">
<span class="uk-margin-small-right uk-icon" uk-icon="warning">
</span>
Community's Organizations page is disabled. Please enable it <a routerLink="/pages" routerLinkActive="router-link-active" [queryParams]="{communityId: communityId, type: 'other'}">here</a>.
<a (click)="editAffiliationOpen()" class="uk-flex uk-flex-middle uk-text-uppercase">
<button class="large uk-icon-button uk-button-secondary">
<icon name="add"></icon>
</button>
<button class="uk-button uk-button-link uk-margin-small-left uk-text-secondary">
Add New Organization
</button>
</a>
</div>
</div>
<div inner>
<div *ngIf="loading" class="uk-position-center">
<loading></loading>
</div>
<div *ngIf="!loading && affiliations">
<div *ngIf="affiliations.length == 0"
class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
<div>No organizations found</div>
</div>
<div *ngIf="affiliations.length > 0">
<no-load-paging (pageChange)="updatePage($event)" [page]="page" [totalResults]="affiliations.length"
[pageSize]="pageSize" [type]="'supporting organization' + (affiliations.length > 1?'s':'')">
</no-load-paging>
<div class="uk-margin-medium">
<div *ngFor="let affiliation of currentPage; let i=index"
class="uk-card uk-card-default uk-card-body uk-text-small uk-margin-bottom">
<div class="uk-grid uk-grid-divider uk-flex-middle" uk-grid>
<div class="uk-width-expand@m uk-width-1-1 uk-grid uk-flex-middle" uk-grid>
<div class="uk-width-small">
<img [src]="affiliation.logo_url | urlPrefix">
</div>
<div class="uk-width-auto">
<h6>{{affiliation.name}}</h6>
URL: <a [href]="affiliation.website_url | urlPrefix" target="_blank">{{affiliation.website_url}}</a>
</div>
</div>
<div class="uk-width-auto@m uk-width-1-1">
<div class="uk-width-1-1 uk-flex uk-flex-center">
<div class="uk-padding-small uk-padding-remove-horizontal">
<a (click)="editAffiliationOpen(getIndex(i))" class="uk-button action uk-flex uk-flex-middle">
<icon name="edit"></icon>
<span class="uk-margin-small-left">Edit Organization</span>
</a>
<a (click)="deleteAffiliationOpen(getIndex(i))" class="uk-button action uk-flex uk-flex-middle uk-margin-small-top">
<icon name="remove" ratio="0.9"></icon>
<span class="uk-margin-small-left">Delete Organization</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<no-load-paging (pageChange)="updatePage($event)" [page]="page" [totalResults]="affiliations.length"
[pageSize]="pageSize" [type]="'supporting organization' + (affiliations.length > 1?'s':'')">
</no-load-paging>
</div>
</div>
</div>
<ul [class]="'uk-list uk-list-divider uk-margin' + (curatorAffiliations ? ' uk-height-max-large uk-overflow-auto' : '')"
uk-height-match="target: > li > div > .uk-card; row: false">
<li *ngFor="let result of affiliations; let i=index"
class="uk-animation-fade uk-height-small uk-flex uk-flex-middle" uk-grid>
<div class="uk-width-1-5">
<a *ngIf="result.website_url" target="_blank" [href]="urlPrefix(result.website_url) + result.website_url"
class="affiliation-content uk-card uk-card-small uk-card-default uk-flex uk-flex-middle uk-flex-center">
<ng-container *ngTemplateOutlet="card; context: { organization: result, fullView: true}"></ng-container>
</a>
<span *ngIf="!result.website_url"
class="affiliation-content uk-card uk-card-small uk-card-default uk-flex uk-flex-middle uk-flex-center">
<ng-container *ngTemplateOutlet="card; context: { organization: result, fullView: true}"></ng-container>
</span>
</div>
<div class="uk-width-3-5">
<h5 title="{{result.name}}">{{_format(result.name)}}</h5>
<a href="{{urlPrefix(affiliation.website_url) + result.website_url}}" title="{{result.website_url}}" class="uk-margin-auto-top" target="_blank">{{_format(result.website_url)}}</a>
</div>
<div class="uk-width-1-5">
<button class="uk-icon-button uk-icon uk-button-secondary uk-margin-small-right uk-margin-small-bottom" title="Edit" uk-icon="pencil" (click)="chooseAffiliation(i, 'edit')"></button>
<button class="uk-icon-button uk-icon uk-button-danger uk-margin-small-bottom" title="Remove" uk-icon="minus" (click)="chooseAffiliation(i)"></button>
</div>
</li>
</ul>
</ng-template>
<div *ngIf="!curatorAffiliations">
<!-- <div class="uk-padding uk-padding-remove-top uk-text-large uk-text-center uk-width">Edit Community Affiliations</div>-->
<div class="uk-flex" uk-grid>
<div *ngIf="showLoading" class="uk-align-center uk-animation-fade uk-width-1-2" role="alert">
<span class="loading-gif uk-align-center"></span>
</div>
<div *ngIf="!showLoading" class="uk-padding-large">
<div *ngIf="message" [class]="'uk-animation-fade uk-alert uk-alert-' + messageType" role="alert">
{{message}}
</div>
<ng-container *ngTemplateOutlet="affiliations_list;"></ng-container>
</div>
</div>
</div>
<div *ngIf="curatorAffiliations">
<ng-container *ngTemplateOutlet="affiliations_list;"></ng-container>
</div>
<modal-alert #affiliationModal [okDisabled]="isEmptyAffiliation()" (alertOutput)="addAffiliation()">
<table class="uk-align-center">
<tbody class="uk-table">
<tr>
<td for="name" class="uk-text-bold uk-text-right">
Name
<span class="uk-text-danger uk-text-bold">
*
</span>
:
</td>
<td class="uk-text-left">
<input type="text"
class="form-control uk-input uk-width-medium@l uk-width-medium@m" id="afname"
[(ngModel)]="affiliation.name" required>
</td>
</tr>
<tr>
<td for="name" class="uk-text-bold uk-text-right">
Logo Url
<span class="uk-text-danger uk-text-bold">
*
</span>
:
</td>
<td class="uk-text-left">
<input type="text"
class="form-control uk-input" id="logourl"
[(ngModel)]="affiliation.logo_url" required>
</td>
</tr>
<tr>
<td for="name" class="uk-text-bold uk-text-right">
Website Url
<span class="uk-text-danger uk-text-bold">
*
</span>
:
</td>
<td class="uk-text-left">
<input type="text"
class="form-control uk-input" id="websiteurl"
[(ngModel)]="affiliation.website_url" required>
</td>
</tr>
</tbody>
</table>
<modal-alert #affiliationModal [okDisabled]="affiliationFb && affiliationFb.invalid" (alertOutput)="editAffiliation()">
<form *ngIf="affiliationFb" [formGroup]="affiliationFb">
<div class="uk-grid uk-padding uk-padding-remove-horizontal uk-child-width-1-1" uk-grid>
<div dashboard-input label="Name" placeholder="Write organization's name" [formInput]="affiliationFb.get('name')"></div>
<div dashboard-input label="Logo URL" type="logoURL" placeholder="Write your organization's logo URL" [formInput]="affiliationFb.get('logo_url')"></div>
<div dashboard-input label="Website URL" type="URL" placeholder="Write your organization's website URL" [formInput]="affiliationFb.get('website_url')"></div>
</div>
</form>
</modal-alert>
<modal-alert #removeAffiliationModal (alertOutput)="removeAffiliation()">
</modal-alert>

386
src/app/pages/affiliations/affiliations.component.ts
View File

@ -1,288 +1,210 @@
import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
import {Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {EnvProperties} from '../../openaireLibrary/utils/properties/env-properties';
import {Session} from '../../openaireLibrary/login/utils/helper.class';
import {LoginErrorCodes} from '../../openaireLibrary/login/utils/guardHelper.class';
import {Affiliation} from '../../openaireLibrary/utils/entities/CuratorInfo';
import {HelperFunctions} from '../../openaireLibrary/utils/HelperFunctions.class';
import {AlertModal} from '../../openaireLibrary/utils/modal/alert';
import {UtilitiesService} from '../../openaireLibrary/services/utilities.service';
import {AffiliationService} from "../../openaireLibrary/connect/affiliations/affiliation.service";
import {HelpContentService} from "../../services/help-content.service";
import {Title} from '@angular/platform-browser';
import {StringUtils} from "../../openaireLibrary/utils/string-utils.class";
import {properties} from "../../../environments/environment";
import {Page} from "../../openaireLibrary/utils/entities/adminTool/page";
import {FormBuilder, FormGroup, Validators} from "@angular/forms";
import {Subscription} from "rxjs";
import {CommunityService} from "../../openaireLibrary/connect/community/community.service";
declare var UIkit;
@Component({
selector: 'affiliations',
templateUrl: './affiliations.component.html',
})
export class AffiliationsComponent implements OnInit {
export class AffiliationsComponent implements OnInit, OnDestroy {
public loading = true;
public properties: EnvProperties = properties;
public index = 0;
public affiliations: Affiliation[];
public affiliationFb: FormGroup;
public communityId: string;
public organizationsPage: Page;
public page: number = 1;
public pageSize: number = 10;
private subs: any[] = [];
@ViewChild('affiliationModal') affiliationModal: AlertModal;
@ViewChild('removeAffiliationModal') removeAffiliationModal: AlertModal;
public showLoading = false;
public message = '';
public messageType = '';
public affiliation: Affiliation = new Affiliation();
public properties: EnvProperties = null;
private index = 0;
private maxCharacters = 70;
@Input() hasChanged: boolean = false;
@Input() curatorAffiliations: boolean = false;
@Input() public affiliations: Affiliation[] = [];
@Output() affiliationsChange: EventEmitter<boolean> = new EventEmitter();
@Output() resetCuratorMessages: EventEmitter<boolean> = new EventEmitter();
public communityId: string;
public organizationsPageId: string;
public organizationsEnabled = false;
constructor(private element: ElementRef,
private route: ActivatedRoute,
private _router: Router,
constructor(private route: ActivatedRoute,
private router: Router,
private title: Title,
private fb: FormBuilder,
private communityService: CommunityService,
private affiliationService: AffiliationService,
private _helpContentService: HelpContentService) {
private helpContentService: HelpContentService) {
}
ngOnInit() {
this.route.data.subscribe((data: { envSpecific: EnvProperties }) => {
this.properties = data.envSpecific;
if(!this.curatorAffiliations) {
this.title.setTitle('Administration Dashboard | Related Organizations');
}
if (!Session.isLoggedIn()) {
this._router.navigate(['/user-info'], {
queryParams: {'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url}
});
} else {
this.showLoading = true;
this.message = '';
this.route.queryParams.subscribe(
communityId => {
this.communityId = communityId['communityId'];
if(!this.curatorAffiliations) {
this.getAffiliations();
}
this.organizationsPageStatus();
}
);
}
});
this.loading = true;
this.subs.push(this.route.params.subscribe(params => {
this.communityId = params['community'];
this.title.setTitle(this.communityId.toUpperCase() + ' | Organizations');
this.getAffiliations();
this.organizationsPageStatus();
}));
}
ngOnDestroy() {
this.subs.forEach(sub => {
if (sub instanceof Subscription) {
sub.unsubscribe();
}
})
}
getAffiliations() {
this.loading = true;
this.affiliationService.initAffiliations(this.communityId);
this.affiliationService.affiliations.subscribe(
affiliations => {
this.affiliations = affiliations;
this.getOrganizationsPageId();
//this.showLoading = false;
this.loading = false;
},
error => {
console.error("Affiliations Component: Error getting affiliations for community with id: "+this.communityId, error);
this.showLoading = false;
console.error("Affiliations Component: Error getting affiliations for community with id: " + this.communityId, error);
this.loading = false;
}
);
}
getOrganizationsPageId() {
this._helpContentService.getCommunityPageByRoute("/organizations", this.properties.adminToolsAPIURL, this.communityId).subscribe(
page => {
if(page) {
this.organizationsPageId = page._id;
}
this.showLoading = false;
},
error => {
console.error("Affiliations Component: Error getting page with route '/organizations' for community with id: "+this.communityId, error);
this.showLoading = false;
}
);
public get organizationsEnabled(): boolean {
return !this.organizationsPage || this.organizationsPage.isEnabled;
}
initAffiliation(affiliation: Affiliation = null) {
this.resetMessages();
if (affiliation) {
this.affiliation = {...affiliation};
if(!this.curatorAffiliations) {
this.affiliation.communityId = affiliation.communityId;
this.affiliation.id = affiliation.id;
}
if(this.curatorAffiliations) {
this.affiliationModal.okButtonText = 'OK';
} else {
this.affiliationModal.okButtonText = 'Save Affiliation';
}
editAffiliationOpen(index: number = -1) {
let affiliation: Affiliation;
this.index = index;
if (index === -1) {
affiliation = new Affiliation();
affiliation.communityId = this.communityId;
this.affiliationModal.alertTitle = 'Add Organization';
this.affiliationModal.okButtonText = 'Add';
} else {
this.index = -1;
this.affiliation = new Affiliation();
if(!this.curatorAffiliations) {
this.affiliation.communityId = this.communityId;
}
affiliation = this.affiliations[this.index];
this.affiliationModal.alertTitle = 'Edit Organization';
this.affiliationModal.okButtonText = 'Update';
}
this.affiliationFb = this.fb.group({
communityId: this.fb.control(affiliation.communityId, Validators.required),
id: this.fb.control(affiliation.id),
name: this.fb.control(affiliation.name, Validators.required),
logo_url: this.fb.control(affiliation.logo_url, [Validators.required, StringUtils.urlValidator()]),
website_url: this.fb.control(affiliation.website_url, [Validators.required, StringUtils.urlValidator()])
});
this.affiliationModal.okButtonLeft = false;
if(this.curatorAffiliations) {
this.affiliationModal.okButtonText = 'OK';
} else {
this.affiliationModal.okButtonText = 'Save Affiliation';
}
this.affiliationModal.cancelButtonText = 'Cancel';
this.affiliationModal.open();
}
public chooseAffiliation(index: number, action: string = 'delete') {
this.resetMessages();
deleteAffiliationOpen(index: number) {
this.index = index;
const affiliation: Affiliation = this.affiliations[index];
if (action === 'delete') {
this.removeAffiliationModal.message = 'Do you want to remove ' +
affiliation.name + ' from your Affiliations?';
this.removeAffiliationModal.okButtonText = 'Yes';
this.removeAffiliationModal.cancelButtonText = 'No';
this.removeAffiliationModal.open();
} else if (action === 'edit') {
this.initAffiliation(affiliation);
}
let affiliation: Affiliation = this.affiliations[index];
this.removeAffiliationModal.alertTitle = 'Delete Organization';
this.removeAffiliationModal.message = 'Do you want to remove <b>' +
affiliation.name + '</b> from Organizations?';
this.removeAffiliationModal.okButtonText = 'Yes';
this.removeAffiliationModal.cancelButtonText = 'No';
this.removeAffiliationModal.open();
}
updateCommunityAffiliations(index: number) {
if (!Session.isLoggedIn()) {
this._router.navigate(['/user-info'], {
queryParams:
{'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url}
});
get currentPage(): Affiliation[] {
if (this.affiliations) {
return this.affiliations.slice((this.page - 1) * this.pageSize, this.page * this.pageSize);
} else {
HelperFunctions.scroll();
this.showLoading = true;
this.affiliationService.updateAffiliation(this.properties.communityAPI + this.communityId + '/organizations',
this.affiliation).subscribe((affiliation) => {
if (affiliation) {
if (index === -1) {
this.affiliations.push(affiliation);
} else {
this.affiliations[index] = affiliation;
}
if(this.affiliation.id) {
this.handleUpdateSuccess('Your organization has been updated successfully!');
} else {
this.handleUpdateSuccess('Your organization has been saved successfully!');
}
}
},
error => {
if(this.affiliation.id) {
this.handleUpdateError('Your organization could not be updated. Try again later!', error);
} else {
this.handleUpdateError('Organization could not be saved. Try again later!', error);
}
});
return [];
}
}
addAffiliation() {
if (!this.isEmptyAffiliation()) {
if (!this.curatorAffiliations) {
this.updateCommunityAffiliations(this.index);
getIndex(index: number): number {
return (this.page - 1)*this.pageSize + index;
}
public updatePage(event) {
this.page = event.value;
}
editAffiliation() {
this.loading = true;
this.affiliationService.updateAffiliation(this.properties.communityAPI + this.communityId + '/organizations',
this.affiliationFb.value).subscribe((affiliation) => {
if (affiliation) {
if (this.index === -1) {
this.affiliations.push(affiliation);
this.page = Math.ceil(this.affiliations.length/this.pageSize);
} else {
if (this.index === -1) {
this.affiliations.push(this.affiliation);
} else {
this.affiliations[this.index] = this.affiliation;
}
this.affiliations[this.index] = affiliation;
}
this.change();
}
if (affiliation.id) {
this.handleUpdateSuccess('Your organization has been updated successfully!');
} else {
this.handleUpdateSuccess('Your organization has been saved successfully!');
}
}
},
error => {
this.handleUpdateError('An error has been occurred. Try again later!');
});
}
removeAffiliation() {
if(!this.curatorAffiliations) {
HelperFunctions.scroll();
this.showLoading = true;
this.affiliationService.deleteAffiliation(this.properties.communityAPI + this.communityId + '/organizations',
this.affiliations[this.index].id).subscribe((deleteOK) => {
this.affiliations.splice(this.index, 1);
this.handleUpdateSuccess('Organization has been deleted');
},
error => {
this.handleUpdateError('Organization could not be deleted. Try again later!', error);
this.loading = true;
this.affiliationService.deleteAffiliation(this.properties.communityAPI + this.communityId + '/organizations',
this.affiliations[this.index].id).subscribe((deleteOK) => {
this.affiliations.splice(this.index, 1);
if (this.currentPage.length === 0) {
this.page = 1;
}
);
} else {
this.affiliations.splice(this.index, 1);
this.change();
}
this.handleUpdateSuccess('Organization has been deleted');
},
error => {
this.handleUpdateError('An error has been occurred. Try again later!');
});
}
private organizationsPageStatus() {
this._helpContentService.getCommunityFull(this.communityId, this.properties.adminToolsAPIURL).subscribe((community) => {
for(let page of community.pages) {
if(page['route'] === '/organizations') {
this.organizationsEnabled = page['isEnabled'];
return;
}
}
this.organizationsEnabled = false;
this.helpContentService.getCommunityPagesByRoute(this.communityId, '/organizations', this.properties.adminToolsAPIURL).subscribe((page) => {
this.organizationsPage = page;
})
}
private change() {
this.hasChanged = true;
if(this.curatorAffiliations) {
this.affiliationsChange.emit(this.hasChanged);
}
handleUpdateError(message: string) {
UIkit.notification(message, {
status: 'danger',
timeout: 6000,
pos: 'bottom-right'
});
this.loading = false;
}
private resetMessages() {
this.message = '';
if(this.curatorAffiliations) {
this.resetCuratorMessages.emit(true);
}
}
handleUpdateError(message: string, error) {
this.resetMessages();
this.message = message;
this.messageType = "warning";
console.log('Server responded: ', error);
this.showLoading = false;
}
handleUpdateSuccess(message) {
this.resetMessages();
this.message = message;
this.messageType = "success";
this.showLoading = false;
UIkit.notification(message, {
status: 'success',
timeout: 6000,
pos: 'bottom-right'
});
this.loading = false;
}
isEmptyAffiliation(): boolean {
return ((!this.affiliation.name || this.affiliation.name === '') ||
(!this.affiliation.logo_url || this.affiliation.logo_url === '') ||
(!this.affiliation.website_url || this.affiliation.website_url === ''));
enableAffiliations() {
this.helpContentService.togglePages(this.communityId, [this.organizationsPage._id], true, this.properties.adminToolsAPIURL).subscribe(() => {
this.organizationsPage.isEnabled = true;
UIkit.notification('Organizations Page has been <b>enabled successfully</b>', {
status: 'success',
timeout: 6000,
pos: 'bottom-right'
});
}, error => {
this.handleUpdateError('An error has been occurred. Try again later!');
});
}
_format(name: string){
if(name) {
return (((name).length > this.maxCharacters) ? (name.substring(0, (this.maxCharacters - ('...').length)) + '...') : name);
} else {
return null;
}
}
public urlPrefix(url: string): string {
return StringUtils.urlPrefix(url);
}
}

25
src/app/pages/affiliations/affiliations.module.ts
View File

@ -1,31 +1,44 @@
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {FormsModule} from '@angular/forms';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {RouterModule} from '@angular/router';
import {AffiliationsComponent} from './affiliations.component';
import {AffiliationsRoutingModule} from './affiliations-routing.module';
import {IsCommunity} from '../../openaireLibrary/connect/communityGuard/isCommunity.guard';
import {ConnectAdminLoginGuard} from '../../openaireLibrary/connect/communityGuard/connectAdminLoginGuard.guard';
import {AffiliationService} from '../../openaireLibrary/connect/affiliations/affiliation.service';
import {AlertModalModule} from '../../openaireLibrary/utils/modal/alertModal.module';
import {UtilitiesService} from '../../openaireLibrary/services/utilities.service';
import {InputModule} from "../../openaireLibrary/sharedComponents/input/input.module";
import {PageContentModule} from "../../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module";
import {CommunityInfoModule} from "../community-info/community-info.module";
import {IconsModule} from "../../openaireLibrary/utils/icons/icons.module";
import {IconsService} from "../../openaireLibrary/utils/icons/icons.service";
import {add, edit, preview, remove} from "../../openaireLibrary/utils/icons/icons";
import {NoLoadPaging} from "../../openaireLibrary/searchPages/searchUtils/no-load-paging.module";
import {LoadingModule} from "../../openaireLibrary/utils/loading/loading.module";
import {UrlPrefixModule} from "../../openaireLibrary/utils/pipes/url-prefix.module";
import {HelpContentService} from "../../services/help-content.service";
@NgModule({
imports: [
AffiliationsRoutingModule, CommonModule, FormsModule, RouterModule,
AlertModalModule
AlertModalModule, ReactiveFormsModule, InputModule, PageContentModule, CommunityInfoModule, IconsModule, NoLoadPaging, LoadingModule, UrlPrefixModule
],
declarations: [
AffiliationsComponent
],
providers: [
AffiliationService, UtilitiesService, IsCommunity, ConnectAdminLoginGuard
AffiliationService, UtilitiesService, HelpContentService
],
exports: [
AffiliationsComponent
]
})
export class AffiliationsModule { }
export class AffiliationsModule {
constructor(private iconsService: IconsService) {
this.iconsService.registerIcons([add, preview, edit, remove])
}
}

6
src/app/pages/claims/claims-routing.module.ts
View File

@ -1,13 +1,11 @@
import { NgModule } from '@angular/core';
import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';
import {IsCommunity} from '../../openaireLibrary/connect/communityGuard/isCommunity.guard';
import {ConnectAdminLoginGuard} from '../../openaireLibrary/connect/communityGuard/connectAdminLoginGuard.guard';
import {ClaimsComponent} from './claims.component';
@NgModule({
imports: [
RouterModule.forChild([
{ path: '', canActivate: [IsCommunity, ConnectAdminLoginGuard], component: ClaimsComponent}
{ path: '', component: ClaimsComponent}
])
]
})

67
src/app/pages/claims/claims.component.ts
View File

@ -1,33 +1,48 @@
import { Component, ViewChild, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import {EnvProperties} from '../../openaireLibrary/utils/properties/env-properties';
import {Component, OnInit} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {properties} from '../../../environments/environment';
import {Subscriber} from 'rxjs';
import {Title} from "@angular/platform-browser";
@Component({
selector: 'claims',
template: ` <claims-admin fetchBy="Context" [fetchId]=communityPid [isConnect]="true" [claimsInfoURL]=claimsInfoURL [externalPortalUrl]="externalPortalUrl">
</claims-admin>`,
selector: 'claims',
template: `
<div page-content class="admin-pages">
<div header>
<users-tabs tab="claims"></users-tabs>
</div>
<div inner>
<claims-admin fetchBy="Context" [fetchId]=communityId [isConnect]="true" [claimsInfoURL]=claimsInfoURL
[externalPortalUrl]="externalPortalUrl">
</claims-admin>
</div>
</div>
`,
})
export class ClaimsComponent implements OnInit {
communityPid:string;
claimsInfoURL:string;
externalPortalUrl:string ="";
ngOnInit() {
this.route.queryParams.subscribe(params => {
this.communityPid = params['communityId'];
});
this.route.data.subscribe((data: { envSpecific: EnvProperties }) => {
this.claimsInfoURL = data.envSpecific.claimsInformationLink;
console.log(this.claimsInfoURL);
this.externalPortalUrl = "https://"+(data.envSpecific.environment =='beta'?'beta.':'')+((this.communityPid == "openaire")?"explore":this.communityPid)+".openaire.eu"
});
communityId: string;
claimsInfoURL: string;
externalPortalUrl = '';
sub;
constructor(private route: ActivatedRoute,
private title: Title) {
}
ngOnInit() {
this.sub = this.route.params.subscribe(params => {
this.communityId = params['community'];
this.title.setTitle(this.communityId.toUpperCase() + ' | Manage Links');
this.claimsInfoURL = properties.claimsInformationLink;
this.externalPortalUrl = 'https://' + (properties.environment == 'beta' ? 'beta.' : '') + ((this.communityId == 'openaire') ? 'explore' : this.communityId) + '.openaire.eu';
});
}
ngOnDestroy() {
if (this.sub instanceof Subscriber) {
this.sub.unsubscribe();
}
constructor(private route: ActivatedRoute) {}
}
}

4
src/app/pages/claims/claims.module.ts
View File

@ -2,9 +2,11 @@ import { NgModule } from '@angular/core';
import {ClaimsAdminModule} from '../../openaireLibrary/claims/claimsAdmin/claimsAdmin.module';
import {ClaimsComponent} from './claims.component';
import {ClaimsRoutingModule} from './claims-routing.module';
import {PageContentModule} from '../../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module';
import {UsersTabsModule} from '../users/users-tabs.module';
@NgModule({
imports: [
ClaimsAdminModule, ClaimsRoutingModule
ClaimsAdminModule, ClaimsRoutingModule, PageContentModule, UsersTabsModule, PageContentModule
],
declarations: [ClaimsComponent],
exports: [ClaimsComponent]

21
src/app/pages/community-info/community-info-routing.module.ts Normal file
View File

@ -0,0 +1,21 @@
import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';
import {ConnectCommunityGuard} from "../../openaireLibrary/connect/communityGuard/connectCommunityGuard.guard";
@NgModule({
imports: [
RouterModule.forChild([
{path: '', redirectTo: 'profile', pathMatch: 'full'},
{path: 'profile', loadChildren: './profile/profile.module#ProfileModule'},
{path: 'organizations', loadChildren: '../affiliations/affiliations.module#AffiliationsModule'},
{path: 'projects', loadChildren: '../projects/communityProjects.module#CommunityProjectsModule'},
{path: 'content-providers', loadChildren: '../content-providers/communityContentProviders.module#CommunityContentProvidersModule'},
{path: 'content-providers/:provider', loadChildren: '../content-providers/criteria/criteria.module#CriteriaModule'},
{path: 'zenodo-communities', loadChildren: '../zenodo-communities/zenodo-communities.module#ZenodoCommunitiesModule'},
{path: 'subjects', canActivateChild: [ConnectCommunityGuard], loadChildren: '../subjects/subjects-edit-form/subjects-edit-form.module#SubjectsEditFormModule'},
])
],
providers: [ConnectCommunityGuard]
})
export class CommunityInfoRoutingModule {
}

40
src/app/pages/community-info/community-info.component.ts Normal file
View File

@ -0,0 +1,40 @@
import {Component, Input, OnInit} from '@angular/core';
import {CommunityInfo} from '../../openaireLibrary/connect/community/communityInfo';
import {CommunityService} from '../../openaireLibrary/connect/community/community.service';
import {Subscription} from 'rxjs';
@Component({
selector: 'community-info',
template: `
<ul *ngIf="community" class="uk-tab customTabs admin uk-flex uk-flex-center uk-flex-left@m" uk-tab>
<li [class.uk-active]="tab === 'profile'"><a routerLink="../profile"><span class="title">Profile</span></a></li>
<li [class.uk-active]="tab === 'organizations'"><a routerLink="../organizations"><span class="title">Organizations</span></a></li>
<li [class.uk-active]="tab === 'projects'"><a routerLink="../projects"><span class="title">Projects</span></a></li>
<li [class.uk-active]="tab === 'content-providers'"><a routerLink="../content-providers"><span class="title">Content Providers</span></a></li>
<li *ngIf="community.type !='ri'" [class.uk-active]="tab === 'subjects'"><a routerLink="../subjects"><span class="title">Subjects</span></a></li>
<li [class.uk-active]="tab === 'zenodo-communities'"><a routerLink="../zenodo-communities"><span class="title">Zenodo Communities</span></a></li>
</ul>
`
})
export class CommunityInfoComponent implements OnInit {
@Input()
public type: string;
@Input()
public tab: "profile"| "organizations" | "projects" | "content-providers" | "subjects" | "zenodo-communities" = 'profile';
public community: CommunityInfo;
private sub;
constructor(private communityService: CommunityService) {
}
ngOnInit() {
this.sub =this.communityService.getCommunityAsObservable().subscribe(community => {
this.community = community;
});
}
ngOnDestroy() {
if (this.sub instanceof Subscription) {
this.sub.unsubscribe();
}
}
}

14
src/app/pages/community-info/community-info.module.ts Normal file
View File

@ -0,0 +1,14 @@
import {NgModule} from '@angular/core';
import {RouterModule} from "@angular/router";
import {CommonModule} from "@angular/common";
import {CommunityInfoComponent} from "./community-info.component";
@NgModule({
imports: [
CommonModule, RouterModule
],
declarations: [CommunityInfoComponent],
exports: [CommunityInfoComponent]
})
export class CommunityInfoModule {
}

10
src/app/pages/community-info/profile/edit-community/edit-community.component.css Normal file
View File

@ -0,0 +1,10 @@
.uk-border-circle {
width: 100px;
height: 100px;
position: relative;
}
.uk-border-circle > img {
max-width: 64px;
max-height: 64px;
}

318
src/app/pages/community-info/profile/edit-community/edit-community.component.ts Normal file
View File

@ -0,0 +1,318 @@
import {Component, Input} from "@angular/core";
import {FormBuilder, FormGroup, Validators} from "@angular/forms";
import {EnvProperties} from "../../../../openaireLibrary/utils/properties/env-properties";
import {properties} from "../../../../../environments/environment";
import {CommunityInfo} from "../../../../openaireLibrary/connect/community/communityInfo";
import {Session, User} from "../../../../openaireLibrary/login/utils/helper.class";
import {CommunityService} from "../../../../openaireLibrary/connect/community/community.service";
import {UtilitiesService} from "../../../../openaireLibrary/services/utilities.service";
import {UserManagementService} from "../../../../openaireLibrary/services/user-management.service";
import {StringUtils} from "../../../../openaireLibrary/utils/string-utils.class";
import {Subscription} from "rxjs";
import {Option} from "../../../../openaireLibrary/sharedComponents/input/input.component";
declare var UIkit;
@Component({
selector: 'edit-community',
template: `
<div [ngStyle]="{'max-height': maxHeight}"
[class.uk-padding-small]="!paddingLarge" [class.uk-padding-large]="paddingLarge"
class="uk-overflow-auto uk-padding-remove-bottom">
<form *ngIf="communityFb" [formGroup]="communityFb">
<div class="uk-grid" [class.uk-margin-small-bottom]="!paddingLarge"
[class.uk-margin-large-bottom]="paddingLarge" uk-grid uk-height-match=".uk-form-hint">
<div dashboard-input class="uk-width-1-1" [formInput]="communityFb.get('name')" label="Name"
placeholder="Write a name..."
hint="Name of the community profile."></div>
<div dashboard-input class="uk-width-1-1" [formInput]="communityFb.get('shortName')"
hint="Short name of the community."
label="Short Name" placeholder="Write an acronym..."></div>
<!-- <div dashboard-input class="uk-width-1-1" [type]="'textarea'" placeholder="Write a description..."-->
<!-- hint="The description of the community."-->
<!-- [rows]="4" [formInput]="communityFb.get('description')" label="Description"></div>-->
<div class="uk-width-1-1">
<div class="uk-text-bold uk-form-label uk-margin-small-bottom">Description</div>
<div class="uk-margin-bottom uk-form-hint">The description of the community</div>
<ckeditor [readonly]="false"
debounce="500"
[formControl]="communityFb.get('description')"
[config]="{ extraAllowedContent: '* [uk-*](*) ; span', disallowedContent: 'script; *[on*]',
removeButtons: 'Save,NewPage,DocProps,Preview,Print,' +
'Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,' +
'CreateDiv,Flash,PageBreak,' +
'Subscript,Superscript,Anchor,Smiley,Iframe,Styles,Font,About,Language',
extraPlugins: 'divarea'}">
</ckeditor>
</div>
<input #file id="photo" type="file" class="uk-hidden" (change)="fileChangeEvent($event)"/>
<div dashboard-input class="uk-width-1-1" type="logoURL" [hideControl]="communityFb.get('isUpload').value" flex="top"
hint="Upload or link the logo of the community." [placeholder]="'Write link to the logo'"
[formInput]="communityFb.get('logoUrl')" label="Logo">
<div *ngIf="!communityFb.get('isUpload').value" class="uk-width-2-5@l uk-width-1-1" style="margin-top: 7px;">
<div class="uk-grid uk-flex uk-flex-middle" uk-grid>
<div class="uk-width-3-4@l uk-width-1-1 uk-flex uk-flex-center">
<button class="uk-button uk-button-secondary uk-flex uk-flex-middle uk-flex-wrap"
(click)="file.click()">
<icon name="cloud_upload" [flex]="true"></icon>
<span class="uk-margin-small-left">Upload a file</span>
</button>
</div>
<div class="uk-text-center uk-text-bold uk-width-expand">
OR
</div>
</div>
</div>
<div *ngIf="communityFb.get('isUpload').value" class="uk-width-1-1 uk-flex uk-flex-middle">
<div class="uk-card uk-card-default uk-text-center uk-border-circle">
<img class="uk-position-center" [src]="photo">
</div>
<div class="uk-margin-left">
<button (click)="remove()" class="uk-button-secondary outlined uk-icon-button">
<icon name="remove"></icon>
</button>
</div>
<div class="uk-margin-small-left">
<button class="uk-button-secondary uk-icon-button" (click)="file.click()">
<icon name="edit"></icon>
</button>
</div>
</div>
</div>
<div *ngIf="uploadError" class="uk-text-danger uk-width-1-1">{{uploadError}}</div>
<div dashboard-input class="uk-width-1-1" [formInput]="communityFb.get('status')"
hint="Set the visibility status for your community's profile." type="select" [options]="statuses"
label="Status" placeholder="Choose a status"></div>
</div>
</form>
</div>`,
styleUrls: ['edit-community.component.css']
})
export class EditCommunityComponent {
@Input()
public maxHeight = 'none';
@Input()
public paddingLarge: boolean = false;
public communityFb: FormGroup;
public statuses: Option[] = [
{label: 'Visible', value: 'all'},
{label: 'Visible to managers', value: 'manager'},
{label: 'Hidden', value: 'hidden'}
]
public community: CommunityInfo;
public isNew: boolean;
public properties: EnvProperties = properties
;
private subscriptions: any[] = [];
/**
* Photo upload
* */
public file: File;
public photo: string | ArrayBuffer;
public uploadError: string;
public deleteCurrentPhoto: boolean = false;
private maxsize: number = 200 * 1024;
user: User;
constructor(private fb: FormBuilder,
private communityService: CommunityService,
private utilsService: UtilitiesService,
private userManagementService: UserManagementService) {
}
ngOnDestroy() {
this.reset();
}
public init(community: CommunityInfo, isNew: boolean = false) {
this.reset();
this.deleteCurrentPhoto = false;
this.community = community;
this.isNew = isNew;
this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {
this.user = user;
this.communityFb = this.fb.group({
communityId: this.fb.control(this.community.communityId),
name: this.fb.control(this.community.title, Validators.required),
shortName: this.fb.control(this.community.shortTitle, Validators.required),
description: this.fb.control(this.community.description),
status: this.fb.control(this.community.status),
managers: this.fb.control(this.community.managers),
isUpload: this.fb.control(this.community.isUpload),
logoUrl: this.fb.control(this.community.logoUrl)
});
if (this.community.isUpload) {
this.communityFb.get('logoUrl').clearValidators();
this.communityFb.get('logoUrl').updateValueAndValidity();
} else {
this.communityFb.get('logoUrl').setValidators([StringUtils.urlValidator()]);
this.communityFb.get('logoUrl').updateValueAndValidity();
}
this.subscriptions.push(this.communityFb.get('isUpload').valueChanges.subscribe(value => {
if (value == true) {
this.communityFb.get('logoUrl').clearValidators();
this.communityFb.updateValueAndValidity();
} else {
this.communityFb.get('logoUrl').setValidators([StringUtils.urlValidator()]);
this.communityFb.updateValueAndValidity();
}
}));
this.initPhoto();
if (!isNew) {
if (!this.isAdmin) {
setTimeout(() => {
this.communityFb.get('shortName').disable();
}, 0);
}
}
}
));
}
public get isAdmin() {
return Session.isPortalAdministrator(this.user);
}
public get disabled(): boolean {
return (this.communityFb && this.communityFb.invalid) ||
(this.communityFb && this.communityFb.pristine && !this.isNew && !this.file) ||
(this.uploadError && this.uploadError.length > 0);
}
public get dirty(): boolean {
return this.communityFb && this.communityFb.dirty;
}
reset() {
this.uploadError = null;
this.communityFb = null;
this.subscriptions.forEach(subscription => {
if (subscription instanceof Subscription) {
subscription.unsubscribe();
}
});
}
public save(callback: Function, errorCallback: Function = null) {
if (this.file) {
this.communityFb.get('shortName').enable();
this.subscriptions.push(this.utilsService.uploadPhoto(this.properties.utilsService + "/upload/stakeholder/" + encodeURIComponent(this.communityFb.value.communityId), this.file).subscribe(res => {
this.deletePhoto();
this.removePhoto();
this.communityFb.get('logoUrl').setValue(res.filename);
this.saveCommunity(callback, errorCallback);
}, error => {
this.uploadError = "An error has been occurred during upload your image. Try again later";
this.saveCommunity(callback, errorCallback);
}));
} else if (this.deleteCurrentPhoto) {
this.deletePhoto();
this.saveCommunity(callback, errorCallback);
} else {
this.saveCommunity(callback, errorCallback);
}
}
public saveCommunity(callback: Function, errorCallback: Function = null) {
if (this.isNew) {
this.removePhoto();
this.subscriptions.push(this.communityService.updateCommunity(
this.properties.communityAPI + this.community.communityId, this.communityFb.value).subscribe(() => {
this.communityService.getCommunity(this.community.communityId, true).subscribe(community => {
UIkit.notification(community.shortTitle + ' has been <b>successfully created</b>', {
status: 'success',
timeout: 6000,
pos: 'bottom-right'
});
callback(community);
});
}, error => {
UIkit.notification('An error has occurred. Please try again later', {
status: 'danger',
timeout: 6000,
pos: 'bottom-right'
});
if (errorCallback) {
errorCallback(error)
}
}));
} else {
this.subscriptions.push(this.communityService.updateCommunity(this.properties.communityAPI + this.community.communityId, this.communityFb.value).subscribe(() => {
this.communityService.getCommunity(this.community.communityId, true).subscribe(community => {
UIkit.notification(community.shortTitle + ' has been <b>successfully saved</b>', {
status: 'success',
timeout: 6000,
pos: 'bottom-right'
});
callback(community);
});
}, error => {
UIkit.notification('An error has occurred. Please try again later', {
status: 'danger',
timeout: 6000,
pos: 'bottom-right'
});
}));
}
}
fileChangeEvent(event) {
if (event.target.files && event.target.files[0]) {
this.file = event.target.files[0];
if (this.file.type !== 'image/png' && this.file.type !== 'image/jpeg') {
this.uploadError = 'You must choose a file with type: image/png or image/jpeg!';
this.communityFb.get('isUpload').setValue(false);
this.communityFb.get('isUpload').markAsDirty();
this.removePhoto();
} else if (this.file.size > this.maxsize) {
this.uploadError = 'File exceeds size\'s limit! Maximum resolution is 256x256 pixels.';
this.communityFb.get('isUpload').setValue(false);
this.communityFb.get('isUpload').markAsDirty();
this.removePhoto();
} else {
this.uploadError = null;
const reader = new FileReader();
reader.readAsDataURL(this.file);
reader.onload = () => {
this.photo = reader.result;
this.communityFb.get('isUpload').setValue(true);
this.communityFb.get('isUpload').markAsDirty();
};
}
}
}
initPhoto() {
if (this.communityFb.value.isUpload) {
this.photo = this.properties.utilsService + "/download/" + this.communityFb.get('logoUrl').value;
}
}
removePhoto() {
if (this.file) {
if (typeof document != 'undefined') {
(<HTMLInputElement>document.getElementById("photo")).value = "";
}
this.initPhoto();
this.file = null;
}
}
remove() {
this.communityFb.get('isUpload').setValue(false);
this.communityFb.get('isUpload').markAsDirty();
this.removePhoto();
this.communityFb.get('logoUrl').setValue(null);
if (this.community.isUpload) {
this.deleteCurrentPhoto = true;
}
}
public deletePhoto() {
if (this.community.logoUrl) {
this.subscriptions.push(this.utilsService.deletePhoto(this.properties.utilsService + '/delete/stakeholder/' + this.community.logoUrl).subscribe());
}
}
}

24
src/app/pages/community-info/profile/edit-community/edit-community.module.ts Normal file
View File

@ -0,0 +1,24 @@
import {NgModule} from "@angular/core";
import {EditCommunityComponent} from "./edit-community.component";
import {CommonModule} from "@angular/common";
import {ReactiveFormsModule} from "@angular/forms";
import {CKEditorModule} from 'ng2-ckeditor';
// import { CKEditorModule } from 'ckeditor4-angular';
import {InputModule} from "../../../../openaireLibrary/sharedComponents/input/input.module";
import {IconsModule} from "../../../../openaireLibrary/utils/icons/icons.module";
import {IconsService} from "../../../../openaireLibrary/utils/icons/icons.service";
import {cloud_upload, edit, remove} from "../../../../openaireLibrary/utils/icons/icons";
@NgModule({
imports: [CommonModule, ReactiveFormsModule, InputModule, IconsModule
, CKEditorModule
],
declarations: [EditCommunityComponent],
exports: [EditCommunityComponent]
})
export class EditCommunityModule {
constructor(private iconsService: IconsService) {
this.iconsService.registerIcons([remove, edit, cloud_upload])
}
}

101
src/app/pages/community-info/profile/profile.component.ts Normal file
View File

@ -0,0 +1,101 @@
import {Component, OnDestroy, OnInit, ViewChild} from "@angular/core";
import {CommunityInfo} from "../../../openaireLibrary/connect/community/communityInfo";
import {EnvProperties} from "../../../openaireLibrary/utils/properties/env-properties";
import {properties} from "../../../../environments/environment";
import {EditCommunityComponent} from "./edit-community/edit-community.component";
import {CommunityService} from "../../../openaireLibrary/connect/community/community.service";
import {Title} from "@angular/platform-browser";
import {Subscription} from "rxjs";
@Component({
selector: 'community-profile',
template: `
<div page-content>
<div header>
<community-info tab="profile"></community-info>
</div>
<div inner>
<div class="uk-card-header">
<div class="uk-flex uk-child-width-1-1 uk-child-width-1-2@m uk-grid" uk-grid>
<div>
<div class="uk-text-small title">
Manage Community Profile
</div>
<div>
<span *ngIf="community" class="uk-text-bold">{{community.shortTitle}}</span>
<span *ngIf="editCommunityComponent.dirty && !loading"> (unsaved changes)</span>
</div>
</div>
<div class="uk-text-right@m uk-text-center">
<button class="uk-button uk-button-secondary outlined uk-margin-right"
(click)="reset()"
[disabled]="loading || !editCommunityComponent.dirty">Reset
</button>
<button class="uk-button uk-button-secondary"
(click)="save()"
[disabled]="loading || editCommunityComponent.disabled">Save
</button>
</div>
</div>
</div>
<div class="uk-card uk-card-default uk-position-relative" style="min-height: 60vh">
<div [class.hidden]="loading">
<edit-community #editCommunityComponent [maxHeight]="'60vh'" [paddingLarge]="true"></edit-community>
</div>
<div *ngIf="loading" class="uk-position-center">
<loading></loading>
</div>
</div>
</div>
</div>
`
})
export class ProfileComponent implements OnInit, OnDestroy {
public community: CommunityInfo;
public properties: EnvProperties = properties;
public loading: boolean = false;
private subscriptions: any[] = [];
@ViewChild('editCommunityComponent') editCommunityComponent: EditCommunityComponent;
constructor(private communityService: CommunityService,
private title: Title) {
}
ngOnInit() {
this.loading = true;
this.subscriptions.push(this.communityService.getCommunityAsObservable().subscribe(community => {
this.community = community;
if (this.community) {
this.title.setTitle(this.community.communityId.toUpperCase() + " | Profile");
setTimeout(() => {
this.reset();
this.loading = false;
}, 200);
}
}));
}
public reset() {
this.editCommunityComponent.init(this.community);
}
public save() {
this.loading = true;
this.editCommunityComponent.save((community) => {
this.community = community;
this.reset();
this.loading = false;
}, (error) => {
this.loading = false;
});
}
ngOnDestroy() {
this.subscriptions.forEach(subscription => {
if (subscription instanceof Subscription) {
subscription.unsubscribe();
}
});
}
}

27
src/app/pages/community-info/profile/profile.module.ts Normal file
View File

@ -0,0 +1,27 @@
import {NgModule} from '@angular/core';
import {RouterModule} from "@angular/router";
import {CommonModule} from "@angular/common";
import {PageContentModule} from "../../../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module";
import {ProfileComponent} from "./profile.component";
import {EditCommunityModule} from "./edit-community/edit-community.module";
import {LoadingModule} from "../../../openaireLibrary/utils/loading/loading.module";
import {CommunityInfoModule} from "../community-info.module";
@NgModule({
imports: [
CommonModule,
RouterModule.forChild([
{
path: '', component: ProfileComponent
}
]),
PageContentModule,
EditCommunityModule,
LoadingModule,
CommunityInfoModule,
],
declarations: [ProfileComponent],
exports: [ProfileComponent]
})
export class ProfileModule {
}

37
src/app/pages/community-routing.module.ts Normal file
View File

@ -0,0 +1,37 @@
import {NgModule} from "@angular/core";
import {RouterModule} from "@angular/router";
import {ConnectRIGuard} from "../openaireLibrary/connect/communityGuard/connectRIGuard.guard";
@NgModule({
imports: [RouterModule.forChild([
{
path: 'info',
loadChildren: './community-info/community-info-routing.module#CommunityInfoRoutingModule',
},
{
path: 'users',
loadChildren: './users/users-routing.module#UsersRoutingModule'
},
{
path: 'mining',
loadChildren: './mining/mining.module#MiningModule',
canActivateChild: [ConnectRIGuard]
},
{
path: 'admin-tools',
loadChildren: './admin-tools/admin-tools-routing.module#AdminToolsRoutingModule',
data: {
param: 'community'
}
},
{
path: 'stats',
loadChildren: './stats/stats.module#StatsModule'
},
{
path: 'customize-layout',
loadChildren: './customization/customization.module#CustomizationModule',
}
])]
})
export class CommunityRoutingModule {}

13
src/app/pages/community/communities-routing.module.ts
View File

@ -1,13 +0,0 @@
import { NgModule } from '@angular/core';
import {RouterModule} from '@angular/router';
import {CommunitiesComponent} from './communities.component';
import {AdminLoginGuard} from '../../openaireLibrary/login/adminLoginGuard.guard';
@NgModule({
imports: [
RouterModule.forChild([
{ path: '', canActivate: [AdminLoginGuard], component: CommunitiesComponent}
])
]
})
export class CommunitiesRoutingModule { }

112
src/app/pages/community/communities.component.html
View File

@ -1,112 +0,0 @@
<div id="communities">
<div class="menubar ">
<div class="community-title uk-text-large">Communities</div>
<div *ngIf="updateErrorMessage" class="uk-alert-danger" uk-alert>
<a class="uk-alert-close" uk-close></a>
{{updateErrorMessage}}
</div>
<form target="BSFormPanel_Admin_1" class="search">
<!-- <input #inputstring (keyup.enter)="filterBySearch(inputstring.value)" placeholder="Community name..." type="text" class="uk-input uk-width-medium"/>
<button class="uk-button" type="submit">Search</button> -->
<input type="text" class="uk-input uk-width-medium" placeholder="Community name, type..." aria-describedby="sizing-addon2" [(ngModel)]="keyword" name="keyword" >
<button (click)="filterBySearch(keyword)" type="submit" class=" uk-button">
<span class="uk-icon">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="search" ratio="1"><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>
</span>Search
</button>
</form>
<!-- <a (click)="showModal()" class="uk-button uk-button-primary uk-float-right"><i></i> New Community </a> -->
</div>
<div class="content-wrapper" id="contentWrapper">
<div>
<div class="contentPanel">
<div *ngIf="errorMessage" class="uk-alert uk-alert-danger uk-margin-large-top" role="alert">{{errorMessage}}</div>
<div [style.display]="showLoading ? 'inline' : 'none'" class="uk-animation-fade uk-margin-large-top uk-width-1-1" role="alert"><img class="uk-align-center loading-gif"></div>
<div *ngIf="!errorMessage && !showLoading" class="page-controls">
<div class=" filters ">
<div class="show-options uk-float-right">
<button class="uk-button" type="button">Bulk Actions</button>
<div uk-dropdown="mode: click">
<ul class="uk-nav uk-navbar-dropdown-nav"
[attr.uk-tooltip]="getSelectedCommunities().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
title="Select at least one community">
<li><a [class]="getSelectedCommunities().length == 0 ? 'uk-disabled' : ''" (click)="confirmDeleteSelectedCommunities()"><i></i> Delete </a></li>
</ul>
</div>
</div>
</div>
</div>
<div *ngIf="!errorMessage && !showLoading">
<div class="gwt-HTML">
<div class="users-list"> <!--"row" class removed"-->
<div class="col-md-12">
<table class="uk-table uk-table-striped">
<thead>
<tr>
<th><input id="allCommunityCheckbox" type="checkbox" (change)="toggleCheckBoxes($event)"></th>
<th>Name</th>
<th>Type</th>
<th>Actions</th>
</tr>
</thead>
<tbody >
<tr *ngFor="let check of checkboxes; let i=index">
<td><input id="{{check.community._id}}" class="checkBox" type="checkbox"
name="communitiescb[]" value="{{check.community._id}}" [(ngModel)]="check.checked">
</td>
<td>
<div class="name" href="#">{{check.community.name}}</div>
</td>
<td>
<div class="type" href="#">{{check.community.type}}</div>
</td>
<td>
<div class="actions" href="#">
<input title="Edit" src="assets/imgs/icn_edit.png" class="edit uk-margin-small-right" type="image" (click)="editCommunity(i)">
<input title="Delete" src="assets/imgs/icn_trash.png" class="delete" type="image" (click)="confirmDeleteCommunity(check.community._id)">
</div>
</td>
</tr>
</tbody>
</table>
<div *ngIf="checkboxes.length==0" class="col-md-12">
<div class="uk-alert-warning" uk-alert>No communities found</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <fab (clicked)="showModal()"></fab> -->
<fab (clicked)="newCommunity()"></fab>
</div>
<!-- <modal-form #saveModal [saveText]="'Save'" [titleText]="'Add a new Community'" [formGroup]="formGroup" [type]="'community'"
[isModalShown]="isModalShown" (emmitObject)="communitySavedSuccessfully($event)" (emmitError)="handleUpdateError($event)">
<community-form [group]="formGroup"></community-form>
</modal-form>
<modal-form #updateModal [saveText]="'Update'" [titleText]="'Update Community'" [formGroup]="formGroup" [type]="'community'"
[isModalShown]="isModalShown" (emmitObject)="communityUpdatedSuccessfully($event)" (emmitError)="handleUpdateError($event)">
<community-form [group]="formGroup"></community-form>
</modal-form> -->
<modal-alert #AlertModalSaveCommunity (alertOutput)="communitySaveConfirmed($event)">
<div *ngIf="modalErrorMessage" class="uk-alert-danger" uk-alert aria-hidden="true">{{ modalErrorMessage }}</div>
<community-form [group]="formGroup"></community-form>
</modal-alert>
<modal-alert #AlertModalUpdateCommunity (alertOutput)="communityUpdateConfirmed($event)">
<div *ngIf="modalErrorMessage" class="uk-alert-danger" uk-alert aria-hidden="true">{{ modalErrorMessage }}</div>
<community-form [group]="formGroup"></community-form>
</modal-alert>
<!-- <delete-confirmation-dialog #deleteConfirmationModal [isModalShown]="isModalShown" (emmitObject)="confirmedDeleteCommunities($event)">
Are you sure you want to delete the selected community(-ies)?
</delete-confirmation-dialog> -->
<modal-alert #AlertModalDeleteCommunities (alertOutput)="confirmedDeleteCommunities($event)"></modal-alert>

289
src/app/pages/community/communities.component.ts
View File

@ -1,289 +0,0 @@
/**
* Created by stefania on 7/13/17.
*/
import { Component, ViewChild, OnInit, ElementRef } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { HelpContentService } from '../../services/help-content.service';
import { FormGroup } from '@angular/forms';
import { CommunityFormComponent } from './community-form.component';
import { CheckPortal, Portal } from '../../domain/portal';
import { EnvProperties } from '../../openaireLibrary/utils/properties/env-properties';
import {Session} from '../../openaireLibrary/login/utils/helper.class';
import {LoginErrorCodes} from '../../openaireLibrary/login/utils/guardHelper.class';
import {HelperFunctions} from "../../openaireLibrary/utils/HelperFunctions.class";
import {Title} from '@angular/platform-browser';
import {ClearCacheService} from "../../openaireLibrary/services/clear-cache.service";
@Component({
selector: 'communities',
templateUrl: './communities.component.html',
})
export class CommunitiesComponent implements OnInit {
// @ViewChild(ModalFormComponent)
// @ViewChild('saveModal')
// public modal:ModalFormComponent;
//
// @ViewChild('updateModal')
// public updateModal:ModalFormComponent;
// @ViewChild('deleteConfirmationModal')
// public deleteConfirmationModal : DeleteConfirmationDialogComponent;
@ViewChild('AlertModalSaveCommunity') alertModalSaveCommunity;
@ViewChild('AlertModalUpdateCommunity') alertModalUpdateCommunity;
@ViewChild('AlertModalDeleteCommunities') alertModalDeleteCommunities;
private selectedCommunities: string[] = [];
@ViewChild(CommunityFormComponent)
public formComponent: CommunityFormComponent;
public checkboxes: CheckPortal[] = [];
public communities: Portal[] = [];
// public errorMessage: string;
public formGroup: FormGroup;
private searchText: RegExp = new RegExp('');
public keyword = '';
public properties: EnvProperties = null;
public showLoading = true;
public errorMessage = '';
public updateErrorMessage = '';
public modalErrorMessage = '';
ngOnInit() {
this.formGroup = this.formComponent.form;
this.route.data
.subscribe((data: { envSpecific: EnvProperties }) => {
HelperFunctions.scroll();
this.title.setTitle('Administration Dashboard | Communities');
this.properties = data.envSpecific;
this.getCommunities();
});
}
constructor(private element: ElementRef, private route: ActivatedRoute,
private title: Title,
private _router: Router, private _helpContentService: HelpContentService,
private _clearCacheService: ClearCacheService) {}
getCommunities() {
if (!Session.isLoggedIn()) {
this._router.navigate(['/user-info'], {
queryParams: { 'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url} });
} else {
this.showLoading = true;
this.updateErrorMessage = '';
this.errorMessage = '';
this._helpContentService.getCommunitiesFull( this.properties.adminToolsAPIURL).subscribe(
communities => {
this.communities = communities;
communities.forEach(_ => {
this.checkboxes.push(<CheckPortal>{community : _, checked : false});
});
this.showLoading = false;
},
error => this.handleError('System error retrieving communities', error));
}
}
// public showModal():void {
// this.modal.showModal();
// }
public toggleCheckBoxes(event) {
this.checkboxes.forEach(_ => _.checked = event.target.checked);
}
public applyCheck(flag: boolean) {
this.checkboxes.forEach(_ => _.checked = flag);
}
public getSelectedCommunities(): string[] {
return this.checkboxes.filter(community => community.checked === true).
map(checkedCommunity => checkedCommunity.community).map(res => res._id);
}
private deleteCommunitiesFromArray(ids: string[]): void {
for (let id of ids) {
let i = this.checkboxes.findIndex(_ => _.community._id === id);
this.checkboxes.splice(i, 1);
}
}
public confirmDeleteCommunity(id: string) {
// this.deleteConfirmationModal.ids = [id];
// this.deleteConfirmationModal.showModal();
this.selectedCommunities = [id];
this.confirmModalOpen();
}
public confirmDeleteSelectedCommunities() {
// this.deleteConfirmationModal.ids = this.getSelectedCommunities();
// this.deleteConfirmationModal.showModal();
this.selectedCommunities = this.getSelectedCommunities();
this.confirmModalOpen();
}
private confirmModalOpen() {
if (!Session.isLoggedIn()) {
this._router.navigate(['/user-info'], {
queryParams: { 'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url} });
} else {
this.alertModalDeleteCommunities.cancelButton = true;
this.alertModalDeleteCommunities.okButton = true;
this.alertModalDeleteCommunities.alertTitle = 'Delete Confirmation';
this.alertModalDeleteCommunities.message = 'Are you sure you want to delete the selected community(-ies)?';
this.alertModalDeleteCommunities.okButtonText = 'Yes';
this.alertModalDeleteCommunities.open();
}
}
public confirmedDeleteCommunities(data: any) {
if (!Session.isLoggedIn()) {
this._router.navigate(['/user-info'], {
queryParams: { 'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url} });
} else {
this.showLoading = true;
this.updateErrorMessage = '';
this._helpContentService.deleteCommunities(this.selectedCommunities, this.properties.adminToolsAPIURL).
subscribe(
_ => {
this.deleteCommunitiesFromArray(this.selectedCommunities);
this.showLoading = false;
this._clearCacheService.clearCache("communities deleted");
},
error => this.handleUpdateError('System error deleting the selected communities', error)
);
}
}
public editCommunity(i: number) {
const community: Portal = this.checkboxes[i].community;
this.formGroup.patchValue(community);
this.formGroup.controls['type'].disable();
// this.updateModal.showModal();
this.modalErrorMessage = '';
this.communitiesModalOpen(this.alertModalUpdateCommunity, 'Update', 'Update Community');
}
public newCommunity() {
this.formGroup.controls['type'].enable();
this.formComponent.reset();
this.modalErrorMessage = '';
this.communitiesModalOpen(this.alertModalSaveCommunity, 'Save', 'Add a new Community');
}
private communitiesModalOpen(modal: any, title: string, yesBtn: string) {
if (!Session.isLoggedIn()) {
this._router.navigate(['/user-info'], {
queryParams: { 'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url} });
} else {
modal.cancelButton = true;
modal.okButton = true;
modal.alertTitle = title;
modal.okButtonText = yesBtn;
modal.open();
}
}
public communitySaveConfirmed(data: any) {
if (!Session.isLoggedIn()) {
this._router.navigate(['/user-info'], {
queryParams: { 'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url} });
} else {
if (!this.formGroup.valid) {
this.communitiesModalOpen(this.alertModalSaveCommunity, 'Save', 'Add a new Community');
this.modalErrorMessage = 'Please fill in all required fields marked with *';
} else {
this.modalErrorMessage = '';
this._helpContentService.saveCommunity(<Portal> this.formGroup.value,
this.properties.adminToolsAPIURL).subscribe(
community => {
this.communitySavedSuccessfully(community);
this._clearCacheService.clearCache("community saved");
},
error => this.handleUpdateError('System error creating community', error)
);
}
}
}
public communityUpdateConfirmed(data: any) {
if (!Session.isLoggedIn()) {
this._router.navigate(['/user-info'], {
queryParams: { 'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url} });
} else {
if (!this.formGroup.valid) {
this.communitiesModalOpen(this.alertModalUpdateCommunity, 'Update', 'Update Community');
this.modalErrorMessage = 'Please fill in all required fields marked with *';
} else {
this.formGroup.controls['type'].enable();
this._helpContentService.updateCommunity(<Portal> this.formGroup.value,
this.properties.adminToolsAPIURL).subscribe(
community => {
this.communityUpdatedSuccessfully(community);
this._clearCacheService.clearCache("community updated");
},
error => this.handleUpdateError('System error updating community', error)
);
}
}
}
public communitySavedSuccessfully(community: Portal) {
this.checkboxes.push(<CheckPortal>{community : community, checked : false});
this.applyCheck(false);
}
public communityUpdatedSuccessfully(community: Portal) {
this.checkboxes.find(checkItem => checkItem.community._id === community._id).community = community;
this.applyCheck(false);
}
public filterBySearch(text: string) {
this.searchText = new RegExp(text, 'i');
this.applyFilter();
}
public applyFilter() {
this.checkboxes = [];
this.communities.filter(item => this.filterCommunities(item)).forEach(
_ => this.checkboxes.push(<CheckPortal>{community: _, checked: false})
);
}
public filterCommunities(community: Portal): boolean {
const textFlag = this.searchText.toString() === '' || (community.name || community.type).match(this.searchText) != null;
return textFlag;
}
handleUpdateError(message: string, error) {
if (error == null) {
this.formComponent.reset();
} else {
this.updateErrorMessage = message;
console.log('Server responded: ' + error);
}
this.showLoading = false;
}
handleError(message: string, error) {
this.errorMessage = message;
console.log('Server responded: ' + error);
this.showLoading = false;
}
}

22
src/app/pages/community/communities.module.ts
View File

@ -1,22 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {CommunitiesComponent} from './communities.component';
import {CommunityFormComponent} from './community-form.component';
import {CommunitiesRoutingModule} from './communities-routing.module';
import {RouterModule} from '@angular/router';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {FABModule} from '../../utils/fabModule.module';
import {AlertModalModule} from '../../openaireLibrary/utils/modal/alertModal.module';
import {AdminLoginGuard} from '../../openaireLibrary/login/adminLoginGuard.guard';
@NgModule({
imports: [
CommonModule, FormsModule, FABModule, AlertModalModule,
ReactiveFormsModule,
CommunitiesRoutingModule, RouterModule
],
declarations: [CommunitiesComponent, CommunityFormComponent],
providers: [AdminLoginGuard],
exports: [CommunitiesComponent]
})
export class CommunitiesModule { }

14
src/app/pages/community/community-edit-form/community-edit-form-routing.module.ts
View File

@ -1,14 +0,0 @@
import { NgModule } from '@angular/core';
import {RouterModule} from '@angular/router';
import {CommunityEditFormComponent} from './community-edit-form.component';
import {IsCommunity} from '../../../openaireLibrary/connect/communityGuard/isCommunity.guard';
import {ConnectAdminLoginGuard} from '../../../openaireLibrary/connect/communityGuard/connectAdminLoginGuard.guard';
@NgModule({
imports: [
RouterModule.forChild([
{ path: '', canActivate: [IsCommunity, ConnectAdminLoginGuard], component: CommunityEditFormComponent}
])
]
})
export class CommunityEditFormRoutingModule { }

117
src/app/pages/community/community-edit-form/community-edit-form.component.html
View File

@ -1,117 +0,0 @@
<div id="community-edit-form " class=" uk-card uk-card-default uk-padding">
<div class="uk-text-large uk-text-center uk-width-5-6@l uk-width ">Manage community profile</div>
<div>
<!-- <div *ngIf="updateErrorMessage" class="uk-alert uk-alert-danger" role="alert">{{updateErrorMessage}}</div>
<div *ngIf="errorMessage" class="uk-alert uk-alert-danger" role="alert">{{errorMessage}}</div>
<div *ngIf="successfulSaveMessage" class="uk-alert uk-alert-success" role="alert">{{successfulSaveMessage}}</div>
<div *ngIf="successfulResetMessage" class="uk-alert uk-alert-warning" role="alert">{{successfulResetMessage}}</div> -->
<div *ngIf="showLoading" class="uk-animation-fade uk-width-1-1" role="alert"><span class="loading-gif uk-align-center"></span></div>
<table *ngIf="communityId != null && community != null && !showLoading && !errorMessage" class="uk-width-1-1">
<tbody class="uk-table uk-align-center">
<tr>
<td for="name" class="uk-text-bold uk-width-1-2@xl uk-width-1-3@m uk-width-expand@s uk-text-right">Name <span class="uk-text-danger uk-text-bold">*</span> :</td>
<td class="uk-text-left uk-width-expand">
<div *ngIf="community.title == '' " class=" uk-text-danger uk-text-small style=display:none"> Please add name. </div>
<input *ngIf="community.title != null" placeholder={{community.title}} type="text"
class="form-control uk-input uk-width-large@l uk-width-medium@s" id="name"
required [(ngModel)] = "community.title" (input)="change()"></td>
</tr>
<tr>
<td for="shortName" class="uk-text-bold uk-text-right">Short Name:</td>
<td class="uk-text-left">
<input *ngIf="community.shortTitle != null" placeholder={{community.shortTitle}} type="text"
class="form-control uk-input uk-width-large@l uk-width-medium@s" id="shortName"
[(ngModel)] = "community.shortTitle" (input)="change()" disabled></td>
</tr>
<tr>
<td for="description" class="uk-text-bold uk-text-right">Description:</td>
<td class="uk-text-left">
<textarea *ngIf="community.description != null" placeholder={{community.description}} type="text"
class="form-control uk-textarea uk-width-large@l uk-width-medium@s" rows="6" id="description"
[(ngModel)] = "community.description" (input)="change()">
</textarea></td>
</tr>
<tr>
<td for="logoUrl" class="uk-text-bold uk-text-right">Logo Url:</td>
<td class="uk-text-left">
<input *ngIf="community.logoUrl != null" placeholder={{community.logoUrl}} type="text"
class="form-control uk-input uk-width-large@l uk-width-medium@s" id="logoUrl"
[(ngModel)] = "community.logoUrl" (input)="change()"></td>
</tr>
<tr>
<td for="status" class="uk-text-bold uk-text-right">Status:</td>
<td class="uk-text-left uk-margin">
<select class="form-control uk-select uk-width-large@l uk-width-medium@s" id="status"
[(ngModel)] = "community.status" (input)="change()">
<option value="all">Visible</option>
<option value="manager">Visible to managers</option>
<option value="hidden">Hidden</option>
</select></td>
</tr>
<tr>
<td for="managers" class="uk-text-bold uk-text-right">Managers:</td>
<td class="uk-text-left">
<div *ngIf="community.managers != null">
<div *ngFor='let manager of community.managers, let i = index; trackBy:trackByFn'>
<div *ngIf="!validEmail(community.managers[i]) && community.managers[i] != '' "
class="uk-width-large uk-text-danger uk-text-small uk-margin-top"> Please add a valid email. </div>
<input placeholder="Type managers" type="text" class="form-control uk-input uk-width-large@l uk-width-medium@s"
id="{{'manager'+i}}" name="{{'manager'+i}}" [(ngModel)] = "community.managers[i]" (input)="change()">
<!-- <img type="uk-image" src="assets/imgs/delete-icon.png" height="25" width="25" title="Remove" onmouseover="" style="cursor: pointer;" (click)="removeManager(i)"/> -->
<!-- red_background_color red_color-->
<a class="uk-icon-button remove uk-button-danger" uk-icon="close" title="Remove" (click)="removeManager(i); change()"></a>
<!-- green_background_color green_color-->
<a *ngIf="i == community.managers.length - 1" class="uk-icon-button add uk-button-primary" uk-icon="plus" title="Add" (click)="addManager()"></a>
</div>
<!-- green_background_color green_color-->
<a *ngIf="community.managers.length == 0" class="uk-icon-button add uk-button-primary" uk-icon="plus" title="Add" (click)="addManager()"></a>
<!-- <img type="uk-image" src="assets/imgs/add-icon.png" height="25" width="25" title="Add" onmouseover="" style="cursor: pointer;" (click)="addManager()"/> -->
</div>
</td>
</tr>
<!-- <tr>
<td for="subjects" class="uk-text-bold uk-text-right">Subjects:</td>
<td class="uk-text-left">
<div *ngIf="community.subjects != null">
<div *ngFor='let subject of community.subjects; let i = index; trackBy:trackByFn'>
<input placeholder="Type subjects" type="text" class="form-control uk-input uk-width-large@l uk-width-medium@s"
id="{{'subject'+i}}" name="{{'subject'+i}}" [(ngModel)] = "community.subjects[i]" (input)="change()">
<a class="uk-icon-button remove red_background_color red_color" uk-icon="close" title="Remove" (click)="removeSubject(i)"></a>
<a *ngIf="i == community.subjects.length - 1" class="uk-icon-button add green_background_color green_color" uk-icon="plus" title="Add" (click)="addSubject()"></a>
</div>
<a *ngIf="community.subjects.length == 0" class="uk-icon-button add green_background_color green_color" uk-icon="plus" title="Add" (click)="addSubject()"></a>
</div>
</td>
</tr> -->
<tr>
<td class="uk-text-right"></td>
<td><div class="uk-padding uk-padding-remove-top uk-padding-remove-bottom uk-text-danger uk-text-bold">* Required fields</div>
</td>
</tr>
</tbody>
</table>
<div *ngIf="updateErrorMessage" class="uk-alert uk-alert-danger" role="alert">{{updateErrorMessage}}</div>
<div *ngIf="errorMessage" class="uk-alert uk-alert-danger" role="alert">{{errorMessage}}</div>
<div *ngIf="successfulSaveMessage" class="uk-alert uk-alert-success" role="alert">{{successfulSaveMessage}}</div>
<div *ngIf="successfulResetMessage" class="uk-alert uk-alert-warning" role="alert">{{successfulResetMessage}}</div>
<table *ngIf="communityId != null && community != null && !showLoading && !errorMessage" class="uk-width-1-1">
<tbody class="uk-table uk-align-center">
<tr>
<td class="uk-width-2-3@xl uk-width-1-2@m uk-width-1-2@s uk-text-right"></td>
<td class="uk-text-left">
<div class="uk-grid-margin uk-first-column uk-align-center uk-text-left uk-padding uk-padding-remove-top uk-padding-remove-bottom">
<button *ngIf="hasChanged" class="uk-button uk-button-primary" (click)="updateCommunity()">Save</button>
<button *ngIf="!hasChanged" class="uk-button uk-button-default" disabled>Save</button>
<button class="uk-button" (click)="resetForm(communityId)">Reset</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>

352
src/app/pages/community/community-edit-form/community-edit-form.component.ts
View File

@ -1,352 +0,0 @@
import {Component, OnInit, Input, ElementRef} from '@angular/core';
import {FormGroup, FormBuilder, Validators} from '@angular/forms';
import {ActivatedRoute, Router} from '@angular/router';
import {HelpContentService} from '../../../services/help-content.service';
import {CommunityService} from '../../../openaireLibrary/connect/community/community.service';
import {SubscribeService} from '../../../openaireLibrary/utils/subscribe/subscribe.service';
import {EmailService} from '../../../openaireLibrary/utils/email/email.service';
import {EnvProperties} from '../../../openaireLibrary/utils/properties/env-properties';
import {Email} from '../../../openaireLibrary/utils/email/email';
import {Composer} from '../../../openaireLibrary/utils/email/composer';
import {Validator} from '../../../openaireLibrary/utils/email/validator';
import {Session} from '../../../openaireLibrary/login/utils/helper.class';
import {LoginErrorCodes} from '../../../openaireLibrary/login/utils/guardHelper.class';
import {HelperFunctions} from "../../../openaireLibrary/utils/HelperFunctions.class";
import {Title} from '@angular/platform-browser';
@Component({
selector: 'community-edit-form',
templateUrl: './community-edit-form.component.html',
})
export class CommunityEditFormComponent implements OnInit{
@Input('group')
myForm: FormGroup;
public showLoading = true;
public errorMessage = '';
public updateErrorMessage = '';
public successfulSaveMessage = '';
public successfulResetMessage = '';
public hasChanged = false;
public res = [];
params: any;
public communityId = null;
public community = null;
public firstVersionOfManagers: string[];
public newManagersToSubscribe: string[];
public email: Email;
public emailToInform: Email;
public note = '';
public properties: EnvProperties = null;
constructor (private element: ElementRef,
private title: Title,
private route: ActivatedRoute,
private _router: Router,
public _fb: FormBuilder,
private _helpContentService: HelpContentService,
private _communityService: CommunityService,
private _subscribeService: SubscribeService,
private _emailService: EmailService) { }
ngOnInit() {
this.route.data.subscribe((data: { envSpecific: EnvProperties }) => {
this.properties = data.envSpecific;
this.route.queryParams.subscribe(
communityId => {
HelperFunctions.scroll();
this.title.setTitle('Administration Dashboard | Community Profile');
this.communityId = communityId['communityId'];
this.email = {body: '', subject: '', recipients: []};
this.emailToInform = {body: '', subject: '', recipients: []};
if (!Session.isLoggedIn()) {
this._router.navigate(['/user-info'], {
queryParams: { 'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url} });
} else {
if (this.communityId != null && this.communityId !== '') {
this.showLoading = true;
this.updateErrorMessage = '';
this.errorMessage = '';
this._communityService.getCommunity(this.properties,
this.properties.communityAPI + this.communityId).subscribe (
community => {
this.community = community;
this.params = {community: encodeURIComponent(
'"' + community.queryId + '"')};
this.firstVersionOfManagers = community.managers.slice();
this.showLoading = false;
},
error => this.handleError('System error retrieving community profile', error)
);
}
}
});
});
}
public addManager() {
this.community.managers.push('');
}
public removeManager(i: any) {
this.community.managers.splice(i, 1);
}
// public addSubject() {
// this.community.subjects.push("");
// }
//
// public removeSubject(i : any) {
// this.community.subjects.splice(i,1);
// }
public resetForm(communityId: string) {
if (!Session.isLoggedIn()) {
this._router.navigate(['/user-info'], { queryParams:
{ 'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url} });
} else {
if (communityId != null && communityId !== '') {
this.showLoading = true;
this.updateErrorMessage = '';
this.errorMessage = '';
this._communityService.getCommunity(this.properties,
this.properties.communityAPI + communityId).subscribe (
community => {
this.community = community;
this.params = {community: encodeURIComponent(
'"' + community.queryId + '"')};
this.showLoading = false;
this.handleSuccessfulReset('Form reset!');
},
error => this.handleError('System error retrieving community profile', error)
);
}
this.resetChange();
}
}
public validEmail(email: string): boolean {
return Validator.emailValidator(email);
}
public updateCommunity() {
if (!Session.isLoggedIn()) {
this._router.navigate(['/user-info'], { queryParams:
{ 'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url} });
} else {
if (this.communityId != null && this.communityId !== '') {
const community = this.parseUpdatedCommunity();
if (!Validator.hasValidEmails(community['managers']) || !this.hasFilled(community['name'])) {
return;
} else {
this.showLoading = true;
const newManagers = this.getNewManagers();
this._communityService.updateCommunity(
this.properties.communityAPI + this.communityId, community).subscribe(
community => {
if (newManagers !== null) {
this.sendMailToNewManagers(newManagers);
this.informOldManagersForTheNewOnes();
for (let i = 0; i < newManagers.length; i++) {
this._subscribeService.subscribeToCommunityByEmail(this.properties, this.communityId, newManagers[i]).subscribe(
res => {
// console.log(res);
}
);
this._subscribeService.getCommunitySubscribers
(this.properties, this.communityId).subscribe(
res => {
// console.log(res);
}
);
}
}
this.handleSuccessfulSave('Community saved!');
},
error => {
this.handleUpdateError('System error updating community profile', error);
},
() => { this.firstVersionOfManagers = this.community['managers'].slice(); }
);
this._router.navigate(['/community-edit-form'], {
queryParams: { 'communityId': this.communityId}});
}
}
this.resetChange();
}
}
private parseUpdatedCommunity(): {} {
const community = {};
community['name'] = this.community.title;
community['shortName'] = this.community.shortTitle;
community['status'] = this.community.status;
community['description'] = this.community.description;
community['logoUrl'] = this.community.logoUrl;
community['managers'] = new Array<string>();
this.community.managers = this.getNonEmptyItems(this.community.managers);
community['managers'] = this.community.managers;
return community;
}
private getNewManagers(): Array<string> {
let newManagers = null;
for (let i = 0; i < this.community['managers'].length; i++) {
if (!this.firstVersionOfManagers.includes(this.community['managers'][i])) {
if(newManagers === null) {
newManagers = new Array<string>();
}
newManagers.push(this.community['managers'][i]);
}
}
return newManagers;
}
private sendMailToNewManagers(managers: any) {
this._emailService.sendEmail(this.properties,
Composer.composeEmailForNewManager(this.communityId,
this.community.title, managers, this.properties.admins[0])).subscribe(
res => {
// console.log("The email has been sent successfully!")
},
error => console.log(error)
);
}
private informOldManagersForTheNewOnes() {
this._emailService.notifyForNewManagers(
this.properties, this.communityId,
Composer.composeEmailToInformOldManagersForTheNewOnes(this.community.title, this.communityId,
this.firstVersionOfManagers,
this.community.managers, this.properties.admins[0])).subscribe(
res => {
// console.log("The email has been sent successfully!")
},
error => console.log(error)
);
}
private subscribeNewManagers(newManagers: string[]): boolean {
return true;
}
private getNonEmptyItems(data: string[]): string[] {
const length = data.length;
const arrayNonEmpty = new Array<string>();
let j = 0;
for (let i = 0; i < length; i++) {
if (this.isEmpty(data[i])) {
// console.log(data[i]);
} else if (this.isNonEmpty(data[i])) {
arrayNonEmpty[j] = data[i];
j++;
// console.log(data[i]);
}
}
return arrayNonEmpty;
}
private hasFilled(data: any): boolean {
if (this.isNonEmpty(data) && !this.isEmpty(data)) {
return true;
}
return false;
}
private isEmpty(data: string): boolean {
if (data !== undefined && !data.replace(/\s/g, '').length) {
return true;
} else {
return false;
}
}
private isNonEmpty(data: string): boolean {
if (data !== undefined && data != null) {
return true;
} else {
return false;
}
}
private change() {
this.hasChanged = true;
this.successfulSaveMessage = '';
this.successfulResetMessage = '';
}
private resetChange() {
this.hasChanged = false;
}
public get form() {
return this._fb.group({
_id : '',
name : ['', Validators.required]
});
}
public reset() {
this.myForm.patchValue({
name : '',
_id : ''
});
}
handleUpdateError(message: string, error) {
this.updateErrorMessage = message;
console.log('Server responded: ' + error);
this.showLoading = false;
}
handleError(message: string, error) {
this.errorMessage = message;
console.log('Server responded: ' + error);
this.showLoading = false;
}
handleSuccessfulSave(message) {
this.showLoading = false;
this.successfulSaveMessage = message;
}
handleSuccessfulReset(message) {
this.showLoading = false;
this.successfulResetMessage = message;
}
trackByFn(index: any, item: any) {
return index;
}
}

29
src/app/pages/community/community-edit-form/community-edit-form.module.ts
View File

@ -1,29 +0,0 @@
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {FormsModule} from '@angular/forms';
import {RouterModule} from '@angular/router';
import {CommunityEditFormComponent} from './community-edit-form.component';
import {CommunityService} from '../../../openaireLibrary/connect/community/community.service';
import {EmailService} from '../../../openaireLibrary/utils/email/email.service';
import {CommunityEditFormRoutingModule} from './community-edit-form-routing.module';
import {IsCommunity} from '../../../openaireLibrary/connect/communityGuard/isCommunity.guard';
import {ConnectAdminLoginGuard} from '../../../openaireLibrary/connect/communityGuard/connectAdminLoginGuard.guard';
@NgModule({
imports: [
CommunityEditFormRoutingModule, CommonModule, FormsModule, RouterModule
],
declarations: [
CommunityEditFormComponent
],
providers: [
CommunityService, EmailService, IsCommunity, ConnectAdminLoginGuard
],
exports: [
CommunityEditFormComponent
]
})
export class CommunityEditFormModule { }

20
src/app/pages/community/community-form.component.html
View File

@ -1,20 +0,0 @@
<form [formGroup]="myForm">
<div class="form-group" [ngClass]="{'has-error':!myForm.controls.name.valid && myForm.controls.name.dirty}">
<label for="portalNameTag">*Portal Name</label>
<input type="text" class="form-control" formControlName="name" id="portalNameTag" placeholder="Portal Name">
</div>
<div class="form-group" [ngClass]="{'has-error':!myForm.controls.type.valid && myForm.controls.type.dirty}">
<label for="portalTypeTag">*Portal Type</label>
<select formControlName="type" id="portalTypeTag" class="form-control uk-select">
<option [value]="'explore'">OpenAIRE Explore Portal</option>
<option [value]="'connect'">OpenAIRE Connect Portal</option>
<option [value]="'monitor'">OpenAIRE Monitor Portal</option>
<option [value]="'community'">OpenAIRE Community Gateway</option>
</select>
</div>
<div class="form-group" [ngClass]="{'has-error':!myForm.controls.pid.valid && myForm.controls.pid.dirty}">
<label for="communityPidTag">*Portal persistent id</label>
<input type="text" class="uk-input uk-width-medium uk-margin-small-left" formControlName="pid" id="communityPidTag" placeholder="Portal Pid">
</div>
<input type="hidden" formControlName="_id">
</form>

44
src/app/pages/community/community-form.component.ts
View File

@ -1,44 +0,0 @@
import {Component, OnInit, Input} from '@angular/core';
import {FormGroup, FormBuilder, Validators} from "@angular/forms";
@Component({
selector: 'community-form',
templateUrl: './community-form.component.html',
})
export class CommunityFormComponent implements OnInit{
@Input('group')
myForm: FormGroup;
public errorMessage: string;
constructor(public _fb: FormBuilder) {}
ngOnInit(): void {}
public get form() {
return this._fb.group({
_id: '',
pid: ['', Validators.required],
name: ['', Validators.required],
type: ['', Validators.required]
});
}
public reset() {
this.myForm.patchValue({
name : '',
_id : '',
pid: '',
type: ''
});
}
handleError(message: string, error) {
if(error == null) {
this.reset();
}
this.errorMessage = message + ' (Server responded: ' + error + ')';
}
}

130
src/app/pages/community/content-providers/add-content-providers.component.html
View File

@ -1,130 +0,0 @@
<div class="uk-child-width-expand@s uk-text-center uk-margin-bottom" uk-grid>
<div>
<form class="uk-text-center uk-animation uk-card uk-card-default uk-padding">
<div>
<input type="text" class="uk-input uk-width-1-2" placeholder="Search content providers in OpenAIRE..." aria-describedby="sizing-addon2" [(ngModel)]="openaireSearchUtils.keyword" name="keyword" >
<button (click)="keywordChanged(openaireSearchUtils.keyword)" type="submit" class=" uk-button">
<span class="uk-icon">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="search" ratio="1"><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>
</span>Search
</button>
</div>
</form>
</div>
</div>
<div *ngIf="openaireSearchUtils.status != errorCodes.LOADING" class="uk-alert uk-alert-primary">
<span class="uk-margin-small-right uk-icon" uk-icon="warning"></span>
Newly added content providers will be linked to your community on the next run of our algorithms.
</div>
<errorMessages [status]="[openaireSearchUtils.status]" [type]="'OpenAIRE content providers'"></errorMessages>
<div *ngIf="openaireSearchUtils.status != errorCodes.LOADING" class="uk-alert uk-alert-primary">
<span class="uk-margin-small-right uk-icon" uk-icon="warning"></span>
If you cannot find a content provider relevant to your community, probably it is not OpenAIRE compliant.
Feel free to contact us (<a [href]="'mailto:' + properties.feedbackmailForMissingEntities +'?Subject=[OpenAIRE Connect - '+ community + '] report missing content provider' + '&body=' + body" target="_top">feedback@openaire.eu</a>) to let us know and we'll try to get the provider on board!
</div>
<div *ngIf="openaireSearchUtils.totalResults > 0" class="uk-align-center uk-margin-remove-bottom">
<div class="searchPaging uk-panel uk-margin-top uk-grid uk-margin-bottom">
<span class="uk-h6 uk-width-1-1@s uk-width-1-2@m">
{{openaireSearchUtils.totalResults | number}} content providers, page {{openaireSearchUtils.page | number}} of {{(totalPages()) | number}}
</span>
<span class="float-children-right-at-medium margin-small-top-at-small uk-width-1-1@s uk-width-1-2@m">
<paging-no-load [limitPaging]=true [currentPage]="openaireSearchUtils.page" [totalResults]="openaireSearchUtils.totalResults" [size]="rowsOnPage" (pageChange)="goTo($event.value)"></paging-no-load>
</span>
</div>
</div>
<ul *ngIf="(openaireSearchUtils.page <= pagingLimit)" [class]="'uk-list uk-list-divider uk-margin '+custom_class">
<!-- <errorMessages [status]="[status]" [type]="'results'"></errorMessages> -->
<li *ngFor="let result of openaireContentProviders" class="uk-animation-fade">
<h6 class="uk-grid" uk-grid>
<span class="uk-width-5-6">
<a target="_blank" [href]="properties.baseOpenaireLink+'/search/dataprovider?datasourceId='+result.id">
<span *ngIf="result['title'].name">
<span [innerHTML]="result['title'].name"></span>
</span>
<span *ngIf="!result['title'].name">
[no title available]
</span>
<span class="custom-external custom-icon space"></span>
</a>
</span>
<span class="uk-width-1-6 uk-text-center">
<!-- green_background_color green_color-->
<a *ngIf="!inCommunity(result)" (click)="addContentProvider(result)" class="uk-icon-button add uk-button-primary" uk-icon="plus" title="Add"></a>
<span *ngIf="inCommunity(result)" class="uk-label uk-label-success">Added</span>
<!-- red_background_color red_color-->
<a *ngIf="undo[result.id]" (click)="removeContentProvider(undo[result.id], result.id)" class="uk-icon-button remove uk-button-danger" uk-icon="close" title="Undo"></a>
</span>
</h6>
<span *ngIf="result['type'] != undefined && result['type'] != ''" class="uk-label custom-label label-blue label-dataprovider" title="Type"> {{result['type']}}</span>
<span *ngIf="result['compatibility'] != undefined && result['compatibility'] != ''" class="uk-label custom-label label-compatibility" title="Compatibility">{{result.compatibility}}</span>
<div *ngIf="result.startYear && result.endYear"> Start year: {{result.startYear}} - End year: {{result.endYear}}</div>
<div *ngIf="result['organizations'] != undefined && result['organizations'].length > 0">
<span> Organization: </span>
<span *ngFor="let organization of result['organizations'].slice(0,10) let i=index">
<a *ngIf="organization.id" target="_blank"
[href]="properties.baseOpenaireLink+'/search/organization?organizationId='+organization.id">
<span>{{organization.name}}</span>
<span class="custom-external custom-icon space"></span>
</a>
<span
*ngIf="!organization.id">
{{organization.name}}</span><span
*ngIf="(i < result['organizations'].length-1) && (i < 9)">,</span>
</span>
<span *ngIf="result['organizations'].length > 10">...</span>
</div>
<div *ngIf="result['countries'] && result['countries'].length > 0">
Country: <span *ngFor="let country of result['countries'].slice(0,10) let i = index">{{country}}{{(i < ( result['countries'].slice(0,10).length-1))?", ":""}}{{(i == result['countries'].slice(0,10).length-1 && result['countries'].length > 10)?"...":""}}</span>
</div>
<div *ngIf="result['websiteURL'] != undefined && result['websiteURL'] != ''">
<span>Website URL: </span>
<span>
<a href="{{result['websiteURL']}}" target="_blank">
<span>{{result['websiteURL']}}</span>
<span class="custom-external custom-icon space"></span>
</a>
</span>
</div>
<div *ngIf="result['OAIPMHURL'] != undefined && result['OAIPMHURL'] != ''">
<span>OAI-PMH URL: </span>
<span>
<a href="{{result['OAIPMHURL']}}" target="_blank">
<span>{{result['OAIPMHURL']}}</span>
<span class="custom-external custom-icon space"></span>
</a>
</span>
</div>
<!-- <div *ngIf="result['subjects'] && result['subjects'].length > 0">
Subject: <span *ngFor="let subject of result['subjects'].slice(0,10) let i = index">{{subject}}{{(i < ( result['subjects'].slice(0,10).length-1))?", ":""}}{{(i == result['subjects'].slice(0,10).length-1 && result['subjects'].length > 10)?"...":""}}</span>
</div> -->
</li>
</ul>
<div [class]="openaireSearchUtils.page > pagingLimit ? 'search-results' : ''" *ngIf="(openaireSearchUtils.page >= pagingLimit) && (openaireSearchUtils.totalResults > resultsPerPage*pagingLimit)">
<p class="uk-alert-warning" uk-alert>For more results please try a new, more specific query</p>
</div>
<div *ngIf="openaireSearchUtils.totalResults > 0" class="uk-align-center uk-margin-remove-bottom">
<div class="searchPaging uk-panel uk-margin-top uk-grid uk-margin-bottom">
<span class="uk-h6 uk-width-1-1@s uk-width-1-2@m">
{{openaireSearchUtils.totalResults | number}} content providers, page {{openaireSearchUtils.page | number}} of {{(totalPages()) | number}}
</span>
<span class="float-children-right-at-medium margin-small-top-at-small uk-width-1-1@s uk-width-1-2@m">
<paging-no-load [limitPaging]=true [currentPage]="openaireSearchUtils.page" [totalResults]="openaireSearchUtils.totalResults" [size]="rowsOnPage" (pageChange)="goTo($event.value)"></paging-no-load>
</span>
</div>
</div>

218
src/app/pages/community/content-providers/add-content-providers.component.ts
View File

@ -1,218 +0,0 @@
import { Component, ViewChild, OnInit, ViewEncapsulation, Input, Output, EventEmitter } from '@angular/core';
import { ActivatedRoute, Router } from "@angular/router";
import {SearchResult} from '../../../openaireLibrary/utils/entities/searchResult';
import {ErrorCodes} from '../../../openaireLibrary/utils/properties/errorCodes';
import {SearchFields, FieldDetails} from '../../../openaireLibrary/utils/properties/searchFields';
import {SearchUtilsClass } from '../../../openaireLibrary/searchPages/searchUtils/searchUtils.class';
import {EnvProperties} from '../../../openaireLibrary/utils/properties/env-properties';
import {SearchDataprovidersService} from '../../../openaireLibrary/services/searchDataproviders.service';
import {RouterHelper} from '../../../openaireLibrary/utils/routerHelper.class';
import {DOI, StringUtils} from '../../../openaireLibrary/utils/string-utils.class';
import {ManageCommunityContentProvidersService} from '../../../services/manageContentProviders.service';
import {Session} from '../../../openaireLibrary/login/utils/helper.class';
import {LoginErrorCodes} from '../../../openaireLibrary/login/utils/guardHelper.class';
@Component({
selector: 'add-content-providers',
templateUrl: './add-content-providers.component.html',
})
export class AddContentProvidersComponent implements OnInit {
@Input() communityContentProviders = [];
private community: string = '';
public openaireContentProviders = [];
public undo = {};
public queryParameters: string = "";
public disableForms: boolean = false;
public warningMessage = "";
public infoMessage = "";
public rowsOnPage:number = 10;
public routerHelper:RouterHelper = new RouterHelper();
public errorCodes: ErrorCodes;
public openaireSearchUtils:SearchUtilsClass = new SearchUtilsClass();
public properties:EnvProperties = null;
public pagingLimit:number = 0;
public resultsPerPage: number = 0;
public subResults: any; subAdd: any; subRemove: any;
public body:string = "Send from page";
ngOnInit() {
this.route.data
.subscribe((data: { envSpecific: EnvProperties }) => {
this.properties = data.envSpecific;
this.pagingLimit = data.envSpecific.pagingLimit;
this.resultsPerPage =data.envSpecific.resultsPerPage;
this.route.queryParams.subscribe(params => {
this.community = params['communityId'];
this._getOpenaireContentProviders("", 1, 10);
var referrer = null;
if (typeof location !== 'undefined') {
referrer = location.href;
}
this.body = "[Please write your message here]";
this.body = StringUtils.URIEncode(this.body);
});
});
}
constructor(private route: ActivatedRoute, private _router: Router, private _searchContentProvidersService: SearchDataprovidersService, private _manageCommunityContentProvidersService: ManageCommunityContentProvidersService) {
this.errorCodes = new ErrorCodes();
this.openaireSearchUtils.status = this.errorCodes.LOADING;
}
public ngOnDestroy() {
if(this.subResults){
this.subResults.unsubscribe();
}
if(this.subAdd) {
this.subAdd.unsubscribe();
}
if(this.subRemove) {
this.subRemove.unsubscribe();
}
}
public addContentProvider(contenProvider: SearchResult) {
if(!Session.isLoggedIn()){
this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl": this._router.url} });
} else {
this.subAdd = this._manageCommunityContentProvidersService.addContentProvider(this.properties, this.community, contenProvider).subscribe(
data => {
this.undo[contenProvider.id] = data.id;
},
err => {
console.log(err.status);
}/*,
() => {
console.info("completed ADD");
}*/
);
}
}
public removeContentProvider(contentProviderId: string, communityContentProviderId: string) {
if(!Session.isLoggedIn()){
this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl": this._router.url} });
} else {
this.subRemove = this._manageCommunityContentProvidersService.removeContentProvider(this.properties, this.community, contentProviderId).subscribe(
data => {
//console.info(data);
},
err => {
console.log(err);
},
() => {
this.undo[communityContentProviderId] = "";
}
)
}
}
public inCommunity(contentProvider: any): any {
for(let communityContentProvider of this.communityContentProviders) {
if(communityContentProvider.openaireId == contentProvider.id) {
return true;
}
}
if(this.undo[contentProvider.id]) {
return true;
}
return false;
}
private _getOpenaireContentProviders(parameters:string, page: number, size: number){
if(!Session.isLoggedIn()){
this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl": this._router.url} });
} else {
if(page > this.pagingLimit) {
size=0;
}
if(this.openaireSearchUtils.status == this.errorCodes.LOADING) {
this.openaireSearchUtils.status = this.errorCodes.LOADING;
this.disableForms = true;
this.openaireContentProviders = [];
this.openaireSearchUtils.totalResults = 0;
this.subResults = this._searchContentProvidersService.searchDataproviders(parameters, null, page, size, [], this.properties).subscribe(
data => {
this.undo = {};
this.openaireSearchUtils.totalResults = data[0];
this.openaireContentProviders = data[1];
this.openaireSearchUtils.status = this.errorCodes.DONE;
if(this.openaireSearchUtils.totalResults == 0 ){
this.openaireSearchUtils.status = this.errorCodes.NONE;
}
this.disableForms = false;
if(this.openaireSearchUtils.status == this.errorCodes.DONE) {
// Page out of limit!!!
let totalPages:any = this.openaireSearchUtils.totalResults/(this.openaireSearchUtils.size);
if(!(Number.isInteger(totalPages))) {
totalPages = (parseInt(totalPages, 10) + 1);
}
if(totalPages < page) {
this.openaireSearchUtils.totalResults = 0;
this.openaireSearchUtils.status = this.errorCodes.OUT_OF_BOUND;
}
}
},
err => {
console.log(err);
//TODO check erros (service not available, bad request)
if(err.status == '404') {
this.openaireSearchUtils.status = this.errorCodes.NOT_FOUND;
} else if(err.status == '500') {
this.openaireSearchUtils.status = this.errorCodes.ERROR;
} else {
this.openaireSearchUtils.status = this.errorCodes.NOT_AVAILABLE;
}
this.disableForms = false;
}
);
}
}
}
totalPages(): number {
let totalPages:any = this.openaireSearchUtils.totalResults/(this.rowsOnPage);
if(!(Number.isInteger(totalPages))) {
totalPages = (parseInt(totalPages, 10) + 1);
}
return totalPages;
}
keywordChanged(keyword) {
this.openaireSearchUtils.keyword = keyword;
this.buildQueryParameters();
this.goTo(1);
}
buildQueryParameters() {
this.queryParameters = "";
if(this.openaireSearchUtils.keyword) {
this.queryParameters = "q="+StringUtils.URIEncode(this.openaireSearchUtils.keyword);
}
}
goTo(page:number = 1){
this.openaireSearchUtils.page=page;
this.openaireSearchUtils.status = this.errorCodes.LOADING;
this._getOpenaireContentProviders(this.queryParameters, page, 10);
}
}

14
src/app/pages/community/content-providers/communityContentProviders-routing.module.ts
View File

@ -1,14 +0,0 @@
import { NgModule } from '@angular/core';
import {RouterModule} from '@angular/router';
import {IsCommunity} from '../../../openaireLibrary/connect/communityGuard/isCommunity.guard';
import {ConnectAdminLoginGuard} from '../../../openaireLibrary/connect/communityGuard/connectAdminLoginGuard.guard';
import {ManageContentProvidersComponent} from './manage-content-providers.component';
@NgModule({
imports: [
RouterModule.forChild([
{ path: '', canActivate: [IsCommunity, ConnectAdminLoginGuard], component: ManageContentProvidersComponent}
])
]
})
export class CommunityContentProvidersRoutingModule { }

55
src/app/pages/community/content-providers/communityContentProviders.module.ts
View File

@ -1,55 +0,0 @@
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { EnvironmentSpecificResolver } from '../../../openaireLibrary/utils/properties/environmentSpecificResolver';
import { EnvironmentSpecificService } from '../../../openaireLibrary/utils/properties/environment-specific.service';
import { DataTablesModule } from 'angular-datatables';
import { ManageContentProvidersComponent } from './manage-content-providers.component';
import { ManageCommunityContentProvidersService } from '../../../services/manageContentProviders.service';
import {SearchDataprovidersServiceModule} from '../../../openaireLibrary/connect/contentProviders/searchDataprovidersService.module';
import { RemoveContentProvidersComponent } from './remove-content-providers.component';
import { AddContentProvidersComponent } from './add-content-providers.component';
import { SearchDataprovidersService } from '../../../openaireLibrary/services/searchDataproviders.service';
import { PagingModule } from '../../../openaireLibrary/utils/paging.module';
import { SearchPagingModule } from '../../../openaireLibrary/searchPages/searchUtils/searchPaging.module';
import {ErrorMessagesModule} from '../../../openaireLibrary/utils/errorMessages.module';
import {AlertModalModule} from '../../../openaireLibrary/utils/modal/alertModal.module';
import {FABModule} from '../../../utils/fabModule.module';
import {CommonModule} from '@angular/common';
import {CommunityContentProvidersRoutingModule} from './communityContentProviders-routing.module';
@NgModule({
imports: [
CommonModule,
HttpClientModule,
FormsModule,
FormsModule,
ReactiveFormsModule,
RouterModule,
DataTablesModule,
PagingModule, SearchPagingModule,
ErrorMessagesModule,
AlertModalModule,
SearchDataprovidersServiceModule,
FABModule,
CommunityContentProvidersRoutingModule
],
declarations: [
ManageContentProvidersComponent,
RemoveContentProvidersComponent,
AddContentProvidersComponent
],
providers: [
ManageCommunityContentProvidersService,
SearchDataprovidersService,
EnvironmentSpecificResolver, EnvironmentSpecificService
],
exports: [ManageContentProvidersComponent]
})
export class CommunityContentProvidersModule { }

14
src/app/pages/community/content-providers/criteria/criteria-routing.module.ts
View File

@ -1,14 +0,0 @@
import { NgModule } from '@angular/core';
import {RouterModule} from '@angular/router';
import {IsCommunity} from '../../../../openaireLibrary/connect/communityGuard/isCommunity.guard';
import {ConnectAdminLoginGuard} from '../../../../openaireLibrary/connect/communityGuard/connectAdminLoginGuard.guard';
import {CriteriaComponent} from './criteria.component';
@NgModule({
imports: [
RouterModule.forChild([
{ path: '', canActivate: [IsCommunity, ConnectAdminLoginGuard], component: CriteriaComponent}
])
]
})
export class CriteriaRoutingModule { }

108
src/app/pages/community/content-providers/criteria/criteria.component.html
View File

@ -1,108 +0,0 @@
<div *ngIf="showLoading" class="uk-animation-fade uk-width-1-1" role="alert">
<span class="loading-gif uk-align-center"></span>
</div>
<div *ngIf="dataProvider" class="uk-padding uk-padding-remove-bottom">
<div class="uk-flex uk-flex-middle" uk-grid>
<div class="uk-flex uk-flex-middle uk-width-4-5">
<a class="uk-icon uk-margin-right" uk-icon="icon: arrow-left; ratio: 2"
routerLink="/manage-content-providers" [queryParams]="{communityId: community}"></a>
<div class="uk-width-expand">
<span>Criteria for</span><br>
<span class="uk-text-large uk-text-bold">{{dataProvider.officialname}}</span>
</div>
</div>
<div class="uk-width-expand uk-text-right">
<button class="uk-button uk-width-1-2@l uk-button-danger"
(click)="save()">Save</button>
</div>
</div>
<div class="uk-alert uk-alert-primary uk-flex uk-flex-middle uk-margin-medium-top">
<span class="uk-icon uk-margin-small-right" uk-icon="info"></span>
<div class="uk-width-expand">
If no criteria are specified, all research results of this content provider will be included in your community.
</div>
</div>
<div class="uk-margin-top uk-margin-bottom">
<span>Add criteria to limit research results.</span><br>
<span>Results which satisfy any of the above criteria will be included in your community.</span>
</div>
<div *ngIf="errorMessage" class="uk-alert uk-alert-danger" role="alert">{{errorMessage}}</div>
<div *ngIf="criteria.length === 0"
class="uk-padding uk-position-relative">
<div class="uk-position-center">
No criteria are specified
</div>
</div>
<div *ngIf="criteria.controls.length > 0" [formGroup]="selectioncriteria">
<div formArrayName="criteria">
<div class="uk-margin-top" *ngFor="let criterion of criteria.controls; let i=index" [formGroupName]="i">
<span class="uk-text-uppercase uk-text-large uk-margin-small-bottom">Criterion {{i + 1}}</span><br>
<div class="uk-padding" style="border: solid 1px;" formArrayName="constraint">
<div class="uk-flex uk-flex-middle uk-grid-small uk-margin-small-bottom" uk-grid>
<div class="uk-width-1-5">
<label class="uk-text-uppercase uk-text-muted">Constraint Field</label>
</div>
<div class="uk-width-1-5">
<label class="uk-text-uppercase uk-text-muted">Operator</label>
</div>
<div class="uk-width-2-5">
<label class="uk-text-uppercase uk-text-muted">Term</label>
</div>
</div>
<div *ngFor="let constraint of getConstraint(i).controls; let j=index"
[formGroupName]="j" class="uk-margin-bottom">
<div class="uk-flex uk-flex-middle uk-grid-small" uk-grid>
<div class="uk-width-1-5">
<select formControlName="field" class="form-control uk-select"
[class.uk-text-muted]="constraint.get('field').value === ''"
[class.uk-form-danger]="constraint.get('field').status === 'INVALID'">
<option [value]="''" disabled selected hidden>Select a field...</option>
<option [value]="'title'">title</option>
<option [value]="'author'">author's name</option>
<option [value]="'author ORCID'">author's ORCID</option>
<option [value]="'contributor'">contributor</option>
<option [value]="'description'">description</option>
</select>
</div>
<div class="uk-width-1-5">
<select formControlName="verb" class="form-control uk-select"
[class.uk-form-danger]="constraint.get('verb').status === 'INVALID'">
<option [value]="'contains'">contains</option>
<option [value]="'equals'">equals</option>
<option [value]="'not_contains'">not contains</option>
<option [value]="'not_equals'">not equals</option>
</select>
</div>
<div class="uk-width-2-5">
<input type="text" class="uk-input" formControlName="value" placeholder="Type term..."
[class.uk-form-danger]="constraint.get('value').status === 'INVALID'">
</div>
<div class="uk-width-1-6">
<span *ngIf="getConstraint(i).length > j + 1">AND</span>
</div>
<div class="uk-width-expand" *ngIf="getConstraint(i).length > 1">
<button class="uk-icon-button uk-button-danger uk-icon uk-margin-small-right"
uk-icon="minus" (click)="removeConstraint(i, j)"></button>
</div>
<div class="uk-width-expand" *ngIf="getConstraint(i).length === 1">
<button class="uk-icon-button uk-button-danger uk-icon uk-margin-small-right"
uk-icon="minus" (click)="removeConstraint(i, j)"
uk-tooltip="title: By removing this constraint, the criterion will be removed too."></button>
</div>
</div>
</div>
<div class="uk-margin-top uk-flex uk-flex-middle uk-flex-right">
<button class="uk-icon-button uk-button-danger uk-icon uk-margin-small-right"
(click)="addConstraint(i)" uk-icon="plus"></button>
<span class="uk-text-uppercase clickable" (click)="addConstraint(i)">Add Constraint</span>
</div>
</div>
</div>
</div>
</div>
<div class="uk-margin-top uk-flex uk-flex-middle">
<button class="uk-icon-button uk-button-danger uk-icon uk-margin-small-right"
(click)="addCriteria()" uk-icon="plus"></button>
<span class="uk-text-uppercase clickable" (click)="addCriteria()">Add Criterion</span>
</div>
</div>

138
src/app/pages/community/content-providers/criteria/criteria.component.ts
View File

@ -1,138 +0,0 @@
import {Component, OnInit} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {HelperFunctions} from '../../../../openaireLibrary/utils/HelperFunctions.class';
import {SearchCommunityDataprovidersService} from '../../../../openaireLibrary/connect/contentProviders/searchDataproviders.service';
import {EnvProperties} from '../../../../openaireLibrary/utils/properties/env-properties';
import {ContentProvider} from '../../../../openaireLibrary/utils/entities/contentProvider';
import {FormArray, FormBuilder, FormGroup, Validators} from '@angular/forms';
import {ManageCommunityContentProvidersService} from '../../../../services/manageContentProviders.service';
import {Title} from '@angular/platform-browser';
@Component({
selector: 'criteria',
templateUrl: './criteria.component.html'
})
export class CriteriaComponent implements OnInit {
public community: string = '';
public openaireId: string = '';
public dataProvider: ContentProvider = null;
public selectioncriteria: FormGroup;
private properties: EnvProperties;
showLoading = true;
public errorMessage: string;
constructor(private route: ActivatedRoute, private _router: Router,
private title: Title,
private searchCommunityDataprovidersService: SearchCommunityDataprovidersService,
private manageCommunityContentProvidersService: ManageCommunityContentProvidersService,
private fb: FormBuilder) {
}
ngOnInit() {
this.route.data.subscribe((data: { envSpecific: EnvProperties }) => {
this.properties = data.envSpecific;
this.route.queryParams.subscribe(params => {
if (params['communityId']) {
this.community = params['communityId'];
}
if (params['openaireId']) {
this.openaireId = params['openaireId'];
}
this.title.setTitle('Administration Dashboard | Criteria');
this.searchCommunityDataprovidersService.searchDataproviders(this.properties, this.community).subscribe(dataProviders => {
dataProviders.forEach(dataProvider => {
if (dataProvider.openaireId == this.openaireId) {
this.dataProvider = dataProvider;
}
});
if (!this.dataProvider) {
this._router.navigate(['manage-content-providers'],
{queryParams: {'communityId': this.community}});
}
this.buildForm();
this.showLoading = false;
});
HelperFunctions.scroll();
});
});
}
public ngOnDestroy() {
}
buildForm() {
this.selectioncriteria = this.fb.group({
criteria: this.fb.array([])
});
let selectionCriteria = this.dataProvider.selectioncriteria;
if (selectionCriteria) {
selectionCriteria.criteria.forEach(criterion => {
let constraintArray: FormArray = this.fb.array([]);
criterion.constraint.forEach(constraint => {
constraintArray.push(this.fb.group({
field: this.fb.control(constraint.field, Validators.required),
verb: this.fb.control(constraint.verb, Validators.required),
value: this.fb.control(constraint.value, Validators.required)
}));
});
this.criteria.push(this.fb.group({
constraint: constraintArray
}));
});
}
}
public get criteria(): FormArray {
return this.selectioncriteria.get('criteria') as FormArray;
}
public getConstraint(i: number): FormArray {
return this.criteria.at(i).get('constraint') as FormArray;
}
public addCriteria() {
let constraintArray: FormArray = this.fb.array([
this.fb.group({
field: this.fb.control('', Validators.required),
verb: this.fb.control('contains', Validators.required),
value: this.fb.control('', Validators.required)
})
]);
this.criteria.push(this.fb.group({
constraint: constraintArray
}));
}
public addConstraint(i: number) {
let constraintArray: FormArray = this.criteria.at(i).get('constraint') as FormArray;
constraintArray.push(this.fb.group({
field: this.fb.control('', Validators.required),
verb: this.fb.control('contains', Validators.required),
value: this.fb.control('', Validators.required)
}));
}
public removeConstraint(i: number, j: number) {
let constraintArray: FormArray = this.criteria.at(i).get('constraint') as FormArray;
constraintArray.removeAt(j);
if (constraintArray.length === 0) {
this.criteria.removeAt(i);
}
}
save() {
this.errorMessage = null;
if (this.selectioncriteria.status === 'VALID') {
this.dataProvider.selectioncriteria = this.selectioncriteria.value;
this.manageCommunityContentProvidersService.
saveContentProvider(this.properties, this.dataProvider).subscribe( () => {
this._router.navigate(['manage-content-providers'], {
queryParams: {communityId: this.dataProvider.communityId}
});
});
} else {
this.errorMessage = 'Please fill all fields of each constraint or remove all constraints with empty fields.';
}
}
}

32
src/app/pages/community/content-providers/criteria/criteria.module.ts
View File

@ -1,32 +0,0 @@
import {NgModule} from '@angular/core';
import {EnvironmentSpecificResolver} from '../../../../openaireLibrary/utils/properties/environmentSpecificResolver';
import {EnvironmentSpecificService} from '../../../../openaireLibrary/utils/properties/environment-specific.service';
import {CommonModule} from '@angular/common';
import {CriteriaComponent} from './criteria.component';
import {CriteriaRoutingModule} from './criteria-routing.module';
import {SearchCommunityDataprovidersService} from '../../../../openaireLibrary/connect/contentProviders/searchDataproviders.service';
import {RouterModule} from '@angular/router';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {ManageCommunityContentProvidersService} from '../../../../services/manageContentProviders.service';
@NgModule({
imports: [
CommonModule,
CriteriaRoutingModule,
RouterModule,
FormsModule,
ReactiveFormsModule,
],
declarations: [
CriteriaComponent
],
providers: [
SearchCommunityDataprovidersService,
ManageCommunityContentProvidersService,
EnvironmentSpecificResolver, EnvironmentSpecificService
],
exports: [CriteriaComponent]
})
export class CriteriaModule { }

87
src/app/pages/community/content-providers/manage-content-providers.component.ts
View File

@ -1,87 +0,0 @@
import { Component, ViewChild, OnInit, ViewEncapsulation, Input, ElementRef } from '@angular/core';
import { ActivatedRoute, Router } from "@angular/router";
import {RemoveContentProvidersComponent} from './remove-content-providers.component';
import {AddContentProvidersComponent} from './add-content-providers.component';
import {Session} from '../../../openaireLibrary/login/utils/helper.class';
import {LoginErrorCodes} from '../../../openaireLibrary/login/utils/guardHelper.class';
import {HelperFunctions} from "../../../openaireLibrary/utils/HelperFunctions.class";
import {Title} from '@angular/platform-browser';
@Component({
selector: 'manage-content-providers',
template: `
<div id="manage-content-providers">
<div class="menubar uk-margin-bottom ">
<a *ngIf="!toggle" (click)="updateCommunityContentProviders()" uk-toggle="target: .toggle-usage" class="uk-button uk-button-primary uk-float-right">{{toggleLinkMessage}}</a>
<div class="manage-content-providers-title uk-text-large">{{pageTitle}}</div>
</div>
<div class="toggle-usage">
<remove-content-providers (communityContentProvidersChanged)="communityContentProvidersChanged($event)"></remove-content-providers>
<fab (clicked)="updateCommunityContentProviders()" uk-toggle="target: .toggle-usage"></fab>
</div>
<div class="toggle-usage" hidden>
<add-content-providers [(communityContentProviders)]="communityContentProviders"></add-content-providers>
</div>
</div>
`
})
export class ManageContentProvidersComponent implements OnInit {
private community: string = '';
@Input() communityContentProviders =[];
@ViewChild (RemoveContentProvidersComponent) removeContentProvidersComponent : RemoveContentProvidersComponent ;
@ViewChild (AddContentProvidersComponent) addContentProvidersComponent : AddContentProvidersComponent ;
public warningMessage = "";
public infoMessage = "";
public toggle: boolean = true;
public updateCommunityContentProvidersOnToggle: boolean = false;
public pageTitle: string = "Manage content providers";
public toggleLinkMessage: string = "Manage content providers";
ngOnInit() {
this.route.queryParams.subscribe(params => {
if(params['communityId']) {
this.community = params['communityId'];
this.title.setTitle('Administration Dashboard | Content Providers');
}
HelperFunctions.scroll();
});
}
constructor(private element: ElementRef,
private title: Title,
private route: ActivatedRoute, private _router: Router) {}
public ngOnDestroy() {}
public updateCommunityContentProviders() {
if(!Session.isLoggedIn()){
this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl": this._router.url} });
} else {
HelperFunctions.scroll();
this.toggle = !this.toggle;
if(this.toggle) {
this.pageTitle = "Manage content providers";
//this.toggleLinkMessage = "Missing content providers?";
this.removeContentProvidersComponent._getCommunityContentProviders();
this.addContentProvidersComponent.undo = {};
} else {
this.updateCommunityContentProvidersOnToggle = false;
this.pageTitle = "Search content providers";
//this.toggleLinkMessage = "Manage content providers";
}
}
}
public communityContentProvidersChanged($event) {
this.communityContentProviders = $event.value;
}
}

99
src/app/pages/community/content-providers/remove-content-providers.component.html
View File

@ -1,99 +0,0 @@
<div class="uk-child-width-expand@s uk-text-center uk-margin-bottom" uk-grid>
<div>
<form class="uk-text-center uk-animation uk-card uk-card-default uk-padding">
<div>
<input type="text" class="uk-input uk-width-1-2" placeholder="Search community content providers..."
aria-describedby="sizing-addon2" [(ngModel)]="communitySearchUtils.keyword" name="keyword">
<button (click)="goTo(1)" type="submit" class=" uk-button">
<span class="uk-icon">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="search" ratio="1"><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>
</span>Search
</button>
</div>
</form>
</div>
</div>
<div class="uk-alert uk-alert-primary uk-margin-top-large">
<div><span class="uk-margin-small-right uk-icon" uk-icon="warning"></span>
All the research results collected from the content providers specified here will be automatically linked to your
community dashboard.
</div>
</div>
<errorMessages [status]="[communitySearchUtils.status]" [type]="'community Content Providers'"></errorMessages>
<div *ngIf="communitySearchUtils.totalResults > 0" class="uk-align-center uk-margin-remove-bottom">
<div class="searchPaging uk-panel uk-margin-top uk-grid uk-margin-bottom">
<span class="uk-h6 uk-width-1-1@s uk-width-1-2@m">
{{communitySearchUtils.totalResults | number}} content providers, page {{communitySearchUtils.page | number}}
of {{(totalPages()) | number}}
</span>
<span class="float-children-right-at-medium margin-small-top-at-small uk-width-1-1@s uk-width-1-2@m">
<paging-no-load [currentPage]="communitySearchUtils.page" [totalResults]="communitySearchUtils.totalResults"
[size]="10" (pageChange)="goTo($event.value, false)"></paging-no-load>
</span>
</div>
</div>
<!-- uk-first-column uk-width-expand -->
<div class="custom-dataTable-content">
<div class="uk-overflow-container">
<table datatable class="uk-table uk-table-striped divider-table" [dtOptions]="dtOptions" id="dpTable"
[dtTrigger]="dtTrigger" dtInstance="dtInstanceCallback">
<thead>
<tr>
<th class="uk-text-center">Name</th>
<th class="uk-text-center">Official Name</th>
<th class="uk-text-center" *ngIf="properties.environment !== 'production'">Criteria</th>
<th class="uk-text-center">Action</th>
</tr>
</thead>
<tbody>
<tr class="uk-table-middle" *ngFor="let result of communityContentProviders">
<td class="uk-text-center uk-width-1-4">
<a target="_blank"
[href]="communityUrl+'/search/dataprovider?datasourceId=' +result.openaireId">
<span *ngIf="result.name">{{result.name}}</span>
<span *ngIf="!result.name">[no name available]</span>
<span class="custom-external custom-icon space"></span>
</a>
</td>
<td class="uk-text-center uk-width-1-4">
<span *ngIf="result.officialname">{{result.officialname}}</span>
<span *ngIf="!result.officialname">-</span>
</td>
<td class="uk-text-center uk-width-1-4" *ngIf="properties.environment !== 'production'">
<input title="Edit" src="assets/imgs/icn_edit.png"
(click)="goToCriteria(result.openaireId)"
class="edit uk-margin-small-right" type="image">
<span (click)="goToCriteria(result.openaireId)"
class="clickable">{{getCriteriaLabel(result.selectioncriteria)}}</span>
</td>
<td class="uk-text-center uk-width-1-4">
<!-- red_background_color red_color-->
<a (click)="removeContentProvider(result)" class="uk-icon-button remove uk-button-danger"
uk-icon="icon: close; ratio: 1" title="Remove"></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div *ngIf="communitySearchUtils.totalResults > 0" class="uk-align-center uk-margin-remove-bottom">
<div class="searchPaging uk-panel uk-margin-top uk-grid uk-margin-bottom">
<span class="uk-h6 uk-width-1-1@s uk-width-1-2@m">
{{communitySearchUtils.totalResults | number}} content providers, page {{communitySearchUtils.page | number}}
of {{(totalPages()) | number}}
</span>
<span class="float-children-right-at-medium margin-small-top-at-small uk-width-1-1@s uk-width-1-2@m">
<paging-no-load [currentPage]="communitySearchUtils.page" [totalResults]="communitySearchUtils.totalResults"
[size]="10" (pageChange)="goTo($event.value, false)"></paging-no-load>
</span>
</div>
</div>
<modal-alert #AlertModalDeleteCommunity (alertOutput)="confirmedDeleteContentProvider($event)"></modal-alert>

329
src/app/pages/community/content-providers/remove-content-providers.component.ts
View File

@ -1,329 +0,0 @@
import { Component, ViewChild, OnInit, ViewEncapsulation, Input, Output, EventEmitter } from '@angular/core';
import { ActivatedRoute, Router } from "@angular/router";
import { Subject } from 'rxjs';
import { DataTableDirective } from 'angular-datatables';
import {ErrorCodes} from '../../../openaireLibrary/utils/properties/errorCodes';
import {SearchUtilsClass } from '../../../openaireLibrary/searchPages/searchUtils/searchUtils.class';
import {EnvProperties} from '../../../openaireLibrary/utils/properties/env-properties';
import {ManageCommunityContentProvidersService} from '../../../services/manageContentProviders.service';
import {SearchCommunityDataprovidersService} from '../../../openaireLibrary/connect/contentProviders/searchDataproviders.service';
import {RouterHelper} from '../../../openaireLibrary/utils/routerHelper.class';
import {DOI, StringUtils} from '../../../openaireLibrary/utils/string-utils.class';
import {Session} from '../../../openaireLibrary/login/utils/helper.class';
import {LoginErrorCodes} from '../../../openaireLibrary/login/utils/guardHelper.class';
import {SelectionCriteria} from '../../../openaireLibrary/utils/entities/contentProvider';
import {CriteriaComponent} from './criteria/criteria.component';
@Component({
selector: 'remove-content-providers',
templateUrl: './remove-content-providers.component.html',
styles: [`
#dpTable_info, #dpTable_paginate, #dpTable_length, #dpTable_filter{
display: none;
}
`],
encapsulation: ViewEncapsulation.None // this used in order styles to work
})
export class RemoveContentProvidersComponent implements OnInit {
public routerHelper:RouterHelper = new RouterHelper();
private community: string = '';
public communityUrl: string = "https://beta.explore.openaire.eu";
private errorCodes: ErrorCodes;
@Output() communityContentProvidersChanged = new EventEmitter();
public communityContentProviders = [];
public communitySearchUtils:SearchUtilsClass = new SearchUtilsClass();
public sub: any; public subResults: any; subRemove: any;
properties:EnvProperties;
public disableForms: boolean = false;
dtOptions: DataTables.Settings = {};
showTable = false; filteringAdded = false;
@ViewChild(DataTableDirective) datatableElement: DataTableDirective;
dtTrigger: Subject<any> = new Subject(); //necessary
public rowsOnPage:number = 10;
public queryParameters: string = "";
public query = '';
public selectedContentProviders=[] ;
public elementRef;
public contentProviders:string[];
private triggered: boolean = false;
private selectedCommunityContentProvider: any;
@ViewChild('AlertModalDeleteCommunity') alertModalDeleteCommunity;
ngOnInit() {
this.route.data.subscribe((data: { envSpecific: EnvProperties }) => {
this.properties = data.envSpecific;
});
this.route.queryParams.subscribe(params => {
if(params['communityId']) {
this.community = params['communityId'];
this.communityUrl = "https://beta."+this.community+".openaire.eu";
this._getCommunityContentProviders();
}
});
this.dtOptions = {
"pageLength": this.rowsOnPage,
"language": {
"search": "",
"searchPlaceholder": "Search content providers..."
}
};
this.communitySearchUtils.keyword = "";
}
constructor(private route: ActivatedRoute, private _router: Router,
private _manageCommunityContentProvidersService: ManageCommunityContentProvidersService,
private _searchCommunityContentProvidersService: SearchCommunityDataprovidersService) {
this.errorCodes = new ErrorCodes();
this.communitySearchUtils.status = this.errorCodes.LOADING;
}
public ngOnDestroy() {
if(this.sub){
this.sub.unsubscribe();
}
if(this.subResults){
this.subResults.unsubscribe();
}
if(this.subRemove){
this.subRemove.unsubscribe();
}
$.fn['dataTable'].ext.search.pop();
}
rerender(): void {
this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
// Destroy the table first
dtInstance.destroy();
// Call the dtTrigger to rerender again
this.dtTrigger.next();
});
}
ngAfterViewInit(): void {
$.fn['dataTable'].ext.search.push((settings, data, dataIndex) => {
if (this.filterData(data, this.communitySearchUtils.keyword)) {
return true;
}
return false;
});
//console.info("ngAfterViewInit");
}
public getCriteriaLabel(selectionCriteria: SelectionCriteria): string {
if(selectionCriteria && selectionCriteria.criteria.length > 0) {
return (selectionCriteria.criteria.length === 1)?'1 criterion':(selectionCriteria.criteria.length + ' criteria')
} else {
return 'no criteria';
}
}
filterData(row: any, query: string) {
let returnValue: boolean = false;
if(query) {
for(var i=0; i <2; i++){
var r= this.filterQuery(row[i], query);
if(r) {
returnValue = true;
break;
}
}
if(!returnValue) {
return false;
}
}
return true;
}
filterQuery(data, query){
if(data.toLowerCase().indexOf(query.toLowerCase()) > -1){
return true;
}else{
return false;
}
}
/*
Trigger a table draw in order to get the initial filtering
*/
triggerInitialLoad(){
this.triggered = true;
//console.info("triggerInitialLoad");
setTimeout(function(){
var table = (<any>$('#dpTable')).DataTable();
table.page( 0 ).draw( false );
}, 500);
this.dtTrigger.next();
}
goTo(page:number = 1){
this.communitySearchUtils.page=page;
var table = $('#dpTable').DataTable();
table.page( page - 1 ).draw( false );
var info = table.page.info();
this.communitySearchUtils.totalResults = info.recordsDisplay;
}
totalPages(): number {
let totalPages:any = this.communitySearchUtils.totalResults/(this.rowsOnPage);
if(!(Number.isInteger(totalPages))) {
totalPages = (parseInt(totalPages, 10) + 1);
}
return totalPages;
}
public confirmedDeleteContentProvider(data : any) {
if(!Session.isLoggedIn()){
this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl": this._router.url} });
} else {
this.subRemove = this._manageCommunityContentProvidersService.removeContentProvider(this.properties, this.community, this.selectedCommunityContentProvider.id).subscribe(
data => {
//console.info(data);
},
err => {
console.log(err);
},
() => {
let index = this.communityContentProviders.indexOf(this.selectedCommunityContentProvider);
this.communityContentProviders.splice(index, 1);
this.communitySearchUtils.totalResults--;
this.communitySearchUtils.page=1;
this.rerender();
}
)
}
}
public removeContentProvider(communityContentProvider: any) {
if(!Session.isLoggedIn()){
this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl": this._router.url} });
} else {
this.selectedCommunityContentProvider = communityContentProvider;
this.alertModalDeleteCommunity.cancelButton = true;
this.alertModalDeleteCommunity.okButton = true;
this.alertModalDeleteCommunity.alertTitle = "Remove content provider?";
let title = "";
if(communityContentProvider.name) {
title = communityContentProvider.name;
}
if(communityContentProvider.name && communityContentProvider.acronym) {
title += " (";
}
if(communityContentProvider.acronym) {
title += communityContentProvider.acronym;
}
if(communityContentProvider.name && communityContentProvider.acronym) {
title += ") ";
}
this.alertModalDeleteCommunity.message = "Content Provider";
if(title) {
this.alertModalDeleteCommunity.message += " '"+title+"' ";
}
this.alertModalDeleteCommunity.message += "will be removed from your community. Are you sure?";
this.alertModalDeleteCommunity.okButtonText = "Yes";
this.alertModalDeleteCommunity.open();
}
}
public _getCommunityContentProviders(){
if(!Session.isLoggedIn()){
this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl": this._router.url} });
} else {
this.communitySearchUtils.status = this.errorCodes.LOADING;
this.disableForms = true;
this.communityContentProviders = [];
this.communitySearchUtils.totalResults = 0;
this.communitySearchUtils.page=1;
this.communitySearchUtils.keyword = "";
this.subResults = this._searchCommunityContentProvidersService.searchDataproviders(this.properties, this.community).subscribe(
data => {
//console.info("search Content Providers [total communityContentProviders:"+data.length+"]");
this.communityContentProviders = data;
this.communitySearchUtils.totalResults = data.length;
this.communitySearchUtils.status = this.errorCodes.DONE;
// if(this.communitySearchUtils.totalResults == 0 ){
// this.communitySearchUtils.status = this.errorCodes.NONE;
// }
this.disableForms = false;
if(!this.triggered) {
this.triggerInitialLoad();
} else {
var table = $('#dpTable').DataTable();
table.clear();
this.rerender();
}
this.communityContentProvidersChanged.emit({
value: this.communityContentProviders,
});
},
err => {
console.log(err);
//TODO check erros (service not available, bad request)
if(err.status == '404') {
this.communitySearchUtils.status = this.errorCodes.NOT_FOUND;
} else if(err.status == '500') {
this.communitySearchUtils.status = this.errorCodes.ERROR;
} else {
this.communitySearchUtils.status = this.errorCodes.NOT_AVAILABLE;
}
this.disableForms = false;
if(!this.triggered) {
this.triggerInitialLoad();
} else {
var table = $('#dpTable').DataTable();
table.clear();
this.rerender();
}
}
);
}
}
goToCriteria(openaireId: string) {
this._router.navigate(['criteria'], {
queryParams: {
communityId: this.community,
openaireId: openaireId
},
relativeTo: this.route
})
}
}

132
src/app/pages/community/projects/add-projects.component.html
View File

@ -1,132 +0,0 @@
<div class="uk-child-width-expand@s uk-text-center uk-margin-bottom" uk-grid>
<div>
<form class=" uk-animation uk-card uk-card-default uk-padding" >
<div>
<select class="uk-select" [(ngModel)]="selectedFunderId" name="select_funder" >
<option value="0" (click)="funderChanged('0','Select funder:')">Select funder:</option>
<option *ngFor="let funder of funders" [value]="funder.id" (click)="funderChanged(funder.id,funder.name)">{{(funder.name.split("||").length > 0)?(funder.name.split("||")[0]+" ("+funder.name.split("||")[1]+")"):(funder.name)}}</option>
</select>
</div>
</form>
</div>
<div>
<form class="uk-text-center uk-animation uk-card uk-card-default uk-padding">
<div>
<input type="text" class="uk-input uk-width-1-2" placeholder="Project name or ID" aria-describedby="sizing-addon2" [(ngModel)]="openaireSearchUtils.keyword" name="keyword" >
<button (click)="keywordChanged(openaireSearchUtils.keyword)" type="submit" class=" uk-button">
<span class="uk-icon">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="search" ratio="1"><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>
</span>Search
</button>
</div>
</form>
</div>
</div>
<div *ngIf="openaireSearchUtils.status == errorCodes.DONE" class="uk-alert uk-alert-primary">
<span class="uk-margin-small-right uk-icon" uk-icon="warning"></span>
Newly added projects will be linked to your community on the next run of our algorithms.
<!-- <div> If you cannot find a funder that is relevant for your community, please contact us (<a [href]="'mailto:' + properties.feedbackmailForMissingEntities +'?Subject=[OpenAIRE Connect - '+ community + '] report missing Funder' + '&body=' + body" target="_top">feedback@openaire.eu</a>) and we'll try to get the funder on board!</div> -->
</div>
<div *ngIf="openaireSearchUtils.status == errorCodes.DONE" class="uk-alert uk-alert-primary">
<span class="uk-margin-small-right uk-icon" uk-icon="warning"></span>
If you cannot find a funder that is relevant for your community, please contact us (<a [href]="'mailto:' + properties.feedbackmailForMissingEntities +'?Subject=[OpenAIRE Connect - '+ community + '] report missing Funder' + '&body=' + body" target="_top">feedback@openaire.eu</a>) and we'll try to get the funder on board!
</div>
<errorMessages [status]="[openaireSearchUtils.status]" [type]="'OpenAIRE projects'"></errorMessages>
<div *ngIf="openaireSearchUtils.status == errorCodes.NONE" class="uk-alert uk-alert-primary">
<span class="uk-margin-small-right uk-icon" uk-icon="warning"></span>
If you wish to suggest a new funder to include or report a missing project, please contact us via
<a [href]="'mailto:' + properties.feedbackmailForMissingEntities +'?Subject=[OpenAIRE Connect - '+ community + '] report missing project' + '&body=' + body" target="_top">feedback@openaire.eu</a>.
</div>
<div *ngIf="openaireSearchUtils.totalResults > 0" class="uk-align-center uk-margin-remove-bottom">
<div class="searchPaging uk-panel uk-margin-top uk-grid uk-margin-bottom">
<span class="uk-h6 uk-width-1-1@s uk-width-1-2@m">
{{openaireSearchUtils.totalResults | number}} projects, page {{openaireSearchUtils.page | number}} of {{(totalPages()) | number}}
</span>
<span class="float-children-right-at-medium margin-small-top-at-small uk-width-1-1@s uk-width-1-2@m">
<paging-no-load [limitPaging]=true [currentPage]="openaireSearchUtils.page" [totalResults]="openaireSearchUtils.totalResults" [size]="rowsOnPage" (pageChange)="goTo($event.value)"></paging-no-load>
</span>
</div>
</div>
<ul *ngIf="(openaireSearchUtils.page <= pagingLimit)" [class]="'uk-list uk-list-divider uk-margin '+custom_class">
<!-- <errorMessages [status]="[status]" [type]="'results'"></errorMessages> -->
<li *ngFor="let result of openaireProjects" class="uk-animation-fade">
<h6 class="uk-grid" uk-grid>
<span class="uk-width-5-6">
<a target="_blank" [href]="properties.baseOpenaireLink+'/search/project?projectId='+result.id">
<span *ngIf="result['title'].name || result.acronym">
<span *ngIf="result.acronym">{{result.acronym}}</span>
<span *ngIf="result.acronym && result['title'].name">-</span>
<span [innerHTML]="result['title'].name"></span>
<span *ngIf="result.code">({{result.code}})</span>
</span>
<span *ngIf="!result['title'].name && !result.acronym">
[no title available]
<span *ngIf="result.code">({{result.code}})</span>
</span>
<span class="custom-external custom-icon space"></span>
</a>
</span>
<span class="uk-width-1-6 uk-text-center">
<!-- <a *ngIf="!inCommunity(result)" (click)="addProject(result)" class="uk-icon-button"><svg height="20" icon="plus" ratio="1" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><rect height="17" width="1" x="9" y="1"></rect><rect height="1" width="17" x="1" y="9"></rect></svg></a> -->
<!-- green_background_color green_color-->
<a *ngIf="!inCommunity(result)" (click)="addProject(result)" class="uk-icon-button add uk-button-primary" uk-icon="plus" title="Add"></a>
<span *ngIf="inCommunity(result)" class="uk-label uk-label-success">Added</span>
<!-- <svg *ngIf="inCommunity(result)" class="added" src="assets/imgs/check-icon.png" title="Added" width="20" type="image" height="20"></svg> -->
<!-- <button *ngIf="undo[result.id]" class="uk-button uk-button-danger uk-button-small" (click)="removeProject(result.id)">Undo</button> -->
<!-- <input *ngIf="undo[result.id]" (click)="removeProject(result.id)" class="remove" src="assets/imgs/x-icon.png" title="Undo" width="20" type="image" height="20"> -->
<!-- <a *ngIf="undo[result.id]" (click)="removeProject(result.id)" class="remove red_colour"><svg height="20" icon="close" ratio="1" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><rect height="17" width="1" x="9" y="1"></rect><rect height="1" width="17" x="1" y="9"></rect></svg></a> -->
<!-- red_background_color red_color-->
<a *ngIf="undo[result.id]" (click)="removeProject(undo[result.id], result.id)" class="uk-icon-button remove uk-button-danger" uk-icon="close" title="Undo"></a>
</span>
</h6>
<span *ngIf="result.title && result.title.accessMode" [class]="'uk-label custom-label label-'+ result.title.accessMode " title="Access Mode">{{result.title.accessMode}}</span>
<span *ngIf="result.funderShortname" class="uk-label custom-label label-funder " title="Funder">{{result.funderShortname}}</span>
<span *ngIf="result.title && result.title.sc39" class="uk-label custom-label label-sc39 " title="Special Clause 39">Special Clause 39</span>
<div *ngIf="result.startYear && result.endYear"> Start year: {{result.startYear}} - End year: {{result.endYear}}</div>
<div *ngIf="result['organizations'] != undefined && result['organizations'].length > 0">
<span> Organization: </span>
<span *ngFor="let organization of result['organizations'].slice(0,10) let i=index">
<a *ngIf="organization.id" target="_blank"
[href]="properties.baseOpenaireLink+'/search/organization?organizationId='+organization.id">
<span>{{organization.name}}</span>
<span class="custom-external custom-icon space"></span>
</a>
<span
*ngIf="!organization.id">
{{organization.name}}</span><span
*ngIf="(i < result['organizations'].length-1) && (i < 9)">,</span>
</span>
<span *ngIf="result['organizations'].length > 10">...</span>
</div>
</li>
</ul>
<div [class]="openaireSearchUtils.page > pagingLimit ? 'search-results' : ''" *ngIf="(openaireSearchUtils.page >= pagingLimit) && (openaireSearchUtils.totalResults > resultsPerPage*pagingLimit)">
<p class="uk-alert-warning" uk-alert>For more results please try a new, more specific query</p>
</div>
<div *ngIf="openaireSearchUtils.totalResults > 0" class="uk-align-center uk-margin-remove-bottom">
<div class="searchPaging uk-panel uk-margin-top uk-grid uk-margin-bottom">
<span class="uk-h6 uk-width-1-1@s uk-width-1-2@m">
{{openaireSearchUtils.totalResults | number}} projects, page {{openaireSearchUtils.page | number}} of {{(totalPages()) | number}}
</span>
<span class="float-children-right-at-medium margin-small-top-at-small uk-width-1-1@s uk-width-1-2@m">
<paging-no-load [limitPaging]=true [currentPage]="openaireSearchUtils.page" [totalResults]="openaireSearchUtils.totalResults" [size]="rowsOnPage" (pageChange)="goTo($event.value)"></paging-no-load>
</span>
</div>
</div>

260
src/app/pages/community/projects/add-projects.component.ts
View File

@ -1,260 +0,0 @@
import { Component, ViewChild, OnInit, ViewEncapsulation, Input, Output, EventEmitter } from '@angular/core';
import { ActivatedRoute, Router } from "@angular/router";
//import { Subject } from 'rxjs/Subject';
import {SearchResult} from '../../../openaireLibrary/utils/entities/searchResult';
import {ErrorCodes} from '../../../openaireLibrary/utils/properties/errorCodes';
import {SearchFields, FieldDetails} from '../../../openaireLibrary/utils/properties/searchFields';
import {SearchUtilsClass } from '../../../openaireLibrary/searchPages/searchUtils/searchUtils.class';
import {EnvProperties} from '../../../openaireLibrary/utils/properties/env-properties';
import {SearchProjectsService} from '../../../openaireLibrary/services/searchProjects.service';
import {RouterHelper} from '../../../openaireLibrary/utils/routerHelper.class';
import {DOI, StringUtils} from '../../../openaireLibrary/utils/string-utils.class';
import {ManageCommunityProjectsService} from '../../../services/manageProjects.service';
import {Session} from '../../../openaireLibrary/login/utils/helper.class';
import {LoginErrorCodes} from '../../../openaireLibrary/login/utils/guardHelper.class';
@Component({
selector: 'add-projects',
templateUrl: './add-projects.component.html',
})
export class AddProjectsComponent implements OnInit {
@Input() communityProjects = [];
//@Output() communityProjectsChanged = new EventEmitter();
private community: string = '';
public openaireProjects = [];
public undo = {};
public queryParameters: string = "";
public funders:string[];
public selectedFunderId:string ="0";
selectedFunderName:string ="Select funder:";
public disableForms: boolean = false;
public warningMessage = "";
public infoMessage = "";
public rowsOnPage:number = 10;
public routerHelper:RouterHelper = new RouterHelper();
public errorCodes: ErrorCodes;
public openaireSearchUtils:SearchUtilsClass = new SearchUtilsClass();
public properties:EnvProperties = null;
public pagingLimit:number = 0;
public resultsPerPage: number = 0;
public subFunders: any; public subResults: any; subAdd: any; subRemove: any;
public body:string = "Send from page";
ngOnInit() {
this.route.data
.subscribe((data: { envSpecific: EnvProperties }) => {
this.properties = data.envSpecific;
this.pagingLimit = data.envSpecific.pagingLimit;
this.resultsPerPage =data.envSpecific.resultsPerPage;
this.route.queryParams.subscribe(params => {
this.community = params['communityId'];
this.getFunders();
this._getOpenaireProjects("", 1, 10);
var referrer = null;
if (typeof location !== 'undefined') {
referrer = location.href;
}
this.body = "[Please write your message here]";
this.body = StringUtils.URIEncode(this.body);
});
});
}
constructor(private route: ActivatedRoute, private _router: Router, private _searchProjectsService: SearchProjectsService, private _manageCommunityProjectsService: ManageCommunityProjectsService) {
this.errorCodes = new ErrorCodes();
this.openaireSearchUtils.status = this.errorCodes.LOADING;
}
public ngOnDestroy() {
if(this.subFunders){
this.subFunders.unsubscribe();
}
if(this.subResults){
this.subResults.unsubscribe();
}
if(this.subAdd) {
this.subAdd.unsubscribe();
}
if(this.subRemove) {
this.subRemove.unsubscribe();
}
}
public addProject(project: SearchResult) {
if(!Session.isLoggedIn()){
this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl": this._router.url} });
} else {
this.subAdd = this._manageCommunityProjectsService.addProject(this.properties, this.community, project).subscribe(
data => {
this.undo[project.id] = data.id;
},
err => {
console.log(err.status);
}/*,
() => {
console.info("completed ADD");
}*/
);
}
}
public removeProject(projectId: string, communityProjectId: string) {
if(!Session.isLoggedIn()){
this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl": this._router.url} });
} else {
this.subRemove = this._manageCommunityProjectsService.removeProject(this.properties, this.community, projectId).subscribe(
data => {
//console.info(data);
},
err => {
console.log(err);
},
() => {
this.undo[communityProjectId] = "";
}
)
}
}
public inCommunity(project: any): any {
for(let communityProject of this.communityProjects) {
if(communityProject.openaireId == project.id) {
return true;
} else if(project.code == communityProject.grantId && project.funderShortname == communityProject.funder) {
return true;
}
}
if(this.undo[project.id]) {
return true;
}
return false;
}
getFunders () {
if(!Session.isLoggedIn()){
this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl": this._router.url} });
} else {
this.subFunders = this._searchProjectsService.getFunders(this.properties).subscribe(
data => {
this.funders = data[1];
},
err => console.log(err)
);
}
}
private _getOpenaireProjects(parameters:string, page: number, size: number){
if(!Session.isLoggedIn()){
this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl": this._router.url} });
} else {
if(page > this.pagingLimit) {
size=0;
}
if(this.openaireSearchUtils.status == this.errorCodes.LOADING) {
this.openaireSearchUtils.status = this.errorCodes.LOADING;
this.disableForms = true;
this.openaireProjects = [];
this.openaireSearchUtils.totalResults = 0;
this.subResults = this._searchProjectsService.searchProjects(parameters, null, page, size, [], this.properties).subscribe(
data => {
this.undo = {};
//console.info("total openaire projects = "+data[0]);
this.openaireSearchUtils.totalResults = data[0];
this.openaireProjects = data[1];
//this.searchPage.checkSelectedFilters(this.filters);
this.openaireSearchUtils.status = this.errorCodes.DONE;
if(this.openaireSearchUtils.totalResults == 0 ){
this.openaireSearchUtils.status = this.errorCodes.NONE;
}
this.disableForms = false;
if(this.openaireSearchUtils.status == this.errorCodes.DONE) {
// Page out of limit!!!
let totalPages:any = this.openaireSearchUtils.totalResults/(this.openaireSearchUtils.size);
if(!(Number.isInteger(totalPages))) {
totalPages = (parseInt(totalPages, 10) + 1);
}
if(totalPages < page) {
this.openaireSearchUtils.totalResults = 0;
this.openaireSearchUtils.status = this.errorCodes.OUT_OF_BOUND;
}
}
},
err => {
console.log(err);
//TODO check erros (service not available, bad request)
if(err.status == '404') {
this.openaireSearchUtils.status = this.errorCodes.NOT_FOUND;
} else if(err.status == '500') {
this.openaireSearchUtils.status = this.errorCodes.ERROR;
} else {
this.openaireSearchUtils.status = this.errorCodes.NOT_AVAILABLE;
}
this.disableForms = false;
}
);
}
}
}
totalPages(): number {
let totalPages:any = this.openaireSearchUtils.totalResults/(this.rowsOnPage);
if(!(Number.isInteger(totalPages))) {
totalPages = (parseInt(totalPages, 10) + 1);
}
return totalPages;
}
keywordChanged(keyword) {
this.openaireSearchUtils.keyword = keyword;
this.buildQueryParameters();
this.goTo(1);
}
funderChanged(funderId:string, funderName:string){
this.selectedFunderId = funderId;
this.selectedFunderName = funderName;
this.buildQueryParameters();
this.goTo(1);
}
buildQueryParameters() {
this.queryParameters = "";
if(this.openaireSearchUtils.keyword) {
this.queryParameters = "q="+StringUtils.URIEncode(this.openaireSearchUtils.keyword);
}
if(this.selectedFunderId != "0") {
this.queryParameters += this.queryParameters ? "&" : "";
this.queryParameters += "fq=funder exact " + '"'+StringUtils.URIEncode(this.selectedFunderId)+ '"';
}
}
goTo(page:number = 1){
this.openaireSearchUtils.page=page;
this.openaireSearchUtils.status = this.errorCodes.LOADING;
this._getOpenaireProjects(this.queryParameters, page, 10);
}
}

14
src/app/pages/community/projects/communityProjects-routing.module.ts
View File

@ -1,14 +0,0 @@
import { NgModule } from '@angular/core';
import {RouterModule} from '@angular/router';
import {IsCommunity} from '../../../openaireLibrary/connect/communityGuard/isCommunity.guard';
import {ConnectAdminLoginGuard} from '../../../openaireLibrary/connect/communityGuard/connectAdminLoginGuard.guard';
import {ManageProjectsComponent} from './manage-projects.component';
@NgModule({
imports: [
RouterModule.forChild([
{ path: '', canActivate: [IsCommunity, ConnectAdminLoginGuard], component: ManageProjectsComponent}
])
]
})
export class CommunityProjectsRoutingModule { }

55
src/app/pages/community/projects/communityProjects.module.ts
View File

@ -1,55 +0,0 @@
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { EnvironmentSpecificResolver } from '../../../openaireLibrary/utils/properties/environmentSpecificResolver';
import { EnvironmentSpecificService } from '../../../openaireLibrary/utils/properties/environment-specific.service';
import { DataTablesModule } from 'angular-datatables';
import { ManageProjectsComponent } from './manage-projects.component';
import { ManageCommunityProjectsService } from '../../../services/manageProjects.service';
import { SearchProjectsServiceModule } from '../../../openaireLibrary/connect/projects/searchProjectsService.module';
import { RemoveProjectsComponent } from './remove-projects.component';
import { AddProjectsComponent } from './add-projects.component';
import { SearchProjectsService } from '../../../openaireLibrary/services/searchProjects.service';
import { PagingModule } from '../../../openaireLibrary/utils/paging.module';
import { SearchPagingModule } from '../../../openaireLibrary/searchPages/searchUtils/searchPaging.module';
import {ErrorMessagesModule} from '../../../openaireLibrary/utils/errorMessages.module';
import {AlertModalModule} from '../../../openaireLibrary/utils/modal/alertModal.module';
import {FABModule} from '../../../utils/fabModule.module';
import {CommonModule} from '@angular/common';
import {CommunityProjectsRoutingModule} from './communityProjects-routing.module';
@NgModule({
imports: [
CommonModule,
HttpClientModule,
FormsModule,
ReactiveFormsModule,
RouterModule,
DataTablesModule,
PagingModule, SearchPagingModule,
ErrorMessagesModule,
AlertModalModule,
SearchProjectsServiceModule,
FABModule,
CommunityProjectsRoutingModule
],
declarations: [
ManageProjectsComponent,
RemoveProjectsComponent,
AddProjectsComponent
],
providers: [
ManageCommunityProjectsService,
SearchProjectsService,
EnvironmentSpecificResolver, EnvironmentSpecificService
],
exports: [ManageProjectsComponent]
})
export class CommunityProjectsModule { }

93
src/app/pages/community/projects/manage-projects.component.ts
View File

@ -1,93 +0,0 @@
import { Component, ViewChild, OnInit, ViewEncapsulation, Input, ElementRef } from '@angular/core';
import { ActivatedRoute, Router } from "@angular/router";
import {RemoveProjectsComponent} from './remove-projects.component';
import {AddProjectsComponent} from './add-projects.component';
import {Session} from '../../../openaireLibrary/login/utils/helper.class';
import {LoginErrorCodes} from '../../../openaireLibrary/login/utils/guardHelper.class';
import {HelperFunctions} from "../../../openaireLibrary/utils/HelperFunctions.class";
import {Title} from '@angular/platform-browser';
@Component({
selector: 'manage-projects',
template: `
<div id="manage-projects">
<div class="menubar uk-margin-bottom ">
<a *ngIf="!toggle" (click)="updateCommunityProjects()" uk-toggle="target: .toggle-usage" class="uk-button uk-button-primary uk-float-right">{{toggleLinkMessage}}</a>
<div class="manage-projects-title uk-text-large">{{pageTitle}}</div>
</div>
<div class="toggle-usage">
<remove-projects (communityProjectsChanged)="communityProjectsChanged($event)"></remove-projects>
<fab (clicked)="updateCommunityProjects()" uk-toggle="target: .toggle-usage"></fab>
</div>
<div class="toggle-usage" hidden>
<!-- (updateCommunityProjects)="updateCommunityProjects($event)" -->
<add-projects [(communityProjects)]="communityProjects"></add-projects>
</div>
</div>
`
})
export class ManageProjectsComponent implements OnInit {
private community: string = '';
@Input() communityProjects =[];
@ViewChild (RemoveProjectsComponent) removeProjectsComponent : RemoveProjectsComponent ;
@ViewChild (AddProjectsComponent) addProjectsComponent : AddProjectsComponent ;
public warningMessage = "";
public infoMessage = "";
public toggle: boolean = true;
public updateCommunityProjectsOnToggle: boolean = false;
public pageTitle: string = "Manage projects";
public toggleLinkMessage: string = "Manage projects";
ngOnInit() {
this.route.queryParams.subscribe(params => {
if(params['communityId']) {
this.community = params['communityId'];
this.title.setTitle('Administration Dashboard | Projects');
}
});
}
constructor(private element: ElementRef,
private title: Title,
private route: ActivatedRoute, private _router: Router) {}
public ngOnDestroy() {}
public updateCommunityProjects() {
if(!Session.isLoggedIn()){
this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl": this._router.url} });
} else {
HelperFunctions.scroll();
this.toggle = !this.toggle;
if(this.toggle) {
this.pageTitle = "Manage projects";
// this.toggleLinkMessage = "Missing projects?";
//if(this.updateCommunityProjectsOnToggle) {
this.removeProjectsComponent._getCommunityProjects();
this.addProjectsComponent.undo = {};
//}
} else {
this.updateCommunityProjectsOnToggle = false;
this.pageTitle = "Search projects";
//this.toggleLinkMessage = "Manage projects";
}
}
}
public communityProjectsChanged($event) {
this.communityProjects = $event.value;
}
// public updateCommunityProjects($event) {
// this.updateCommunityProjectsOnToggle = true;
// }
}

99
src/app/pages/community/projects/remove-projects.component.html
View File

@ -1,99 +0,0 @@
<div class="uk-child-width-expand@s uk-text-center uk-margin-bottom" uk-grid>
<div>
<form class=" uk-animation uk-card uk-card-default uk-padding" >
<div>
<select class="uk-select" [(ngModel)]="selectedFunder" name="select_funder" >
<option value="" (click)="goTo(1)">Select funder:</option>
<option *ngFor="let funder of funders" [value]="funder" (click)="goTo(1)">{{funder}}</option>
</select>
</div>
</form>
</div>
<div>
<form class="uk-text-center uk-animation uk-card uk-card-default uk-padding">
<div>
<input type="text" class="uk-input uk-width-1-2" placeholder="Search community projects..." aria-describedby="sizing-addon2" [(ngModel)]="communitySearchUtils.keyword" name="keyword" >
<button (click)="goTo(1)" type="submit" class=" uk-button">
<span class="uk-icon">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="search" ratio="1"><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>
</span>Search
</button>
</div>
</form>
</div>
</div>
<errorMessages [status]="[communitySearchUtils.status]" [type]="'community projects'"></errorMessages>
<div *ngIf="communitySearchUtils.status == errorCodes.DONE" class="uk-alert uk-alert-primary">
<span class="uk-margin-small-right uk-icon" uk-icon="warning"></span>
All the research results linked to the projects specified here will be automatically linked to your community dashboard.
</div>
<div *ngIf="communitySearchUtils.totalResults > 0" class="uk-align-center uk-margin-remove-bottom">
<div class="searchPaging uk-panel uk-margin-top uk-grid uk-margin-bottom">
<span class="uk-h6 uk-width-1-1@s uk-width-1-2@m">
{{communitySearchUtils.totalResults | number}} projects, page {{communitySearchUtils.page | number}} of {{(totalPages()) | number}}
</span>
<span class="float-children-right-at-medium margin-small-top-at-small uk-width-1-1@s uk-width-1-2@m">
<paging-no-load [currentPage]="communitySearchUtils.page" [totalResults]="communitySearchUtils.totalResults" [size]="10" (pageChange)="goTo($event.value, false)"></paging-no-load>
</span>
</div>
</div>
<!-- uk-first-column uk-width-expand -->
<div class="custom-dataTable-content">
<div class="uk-overflow-container">
<table datatable class="uk-table uk-table-striped divider-table" [dtOptions]="dtOptions" id="dpTable" [dtTrigger]="dtTrigger" dtInstance="dtInstanceCallback">
<thead>
<tr>
<th class="uk-text-center">Project</th>
<th class="uk-text-center">Grant Id</th>
<th class="uk-text-center">Funder</th>
<th class="uk-text-center">Action</th>
</tr>
</thead>
<tbody>
<tr class="uk-table-middle" *ngFor="let result of communityProjects">
<td class="uk-text-center uk-width-1-4">
<a target="_blank"
[href]="communityUrl+'/search/project?' + ((result.openaireId) ? 'projectId='+result.openaireId : 'grantId='+result.grantId+'&funder='+result.funder)">
<span *ngIf="result.name">{{result.name}}</span>
<span *ngIf="result.name && result.acronym">(</span><span *ngIf="result.acronym">{{result.acronym}}</span><span *ngIf="result.name && result.acronym">)</span>
<span *ngIf="!result.name && !result.acronym">[no title available]</span>
<span class="custom-external custom-icon space"></span>
</a>
</td>
<td class="uk-text-center uk-width-1-4">
<span *ngIf="result.grantId">{{result.grantId}}</span>
<span *ngIf="!result.grantId">-</span>
</td>
<td class="uk-text-center uk-width-1-4">
<span *ngIf="result.funder">{{result.funder}}</span>
<span *ngIf="!result.funder">-</span>
</td>
<td class="uk-text-center uk-width-1-4">
<!-- red_background_color red_color-->
<a (click)="removeProject(result)" class="uk-icon-button remove uk-button-danger" uk-icon="icon: close; ratio: 1" title="Remove"></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div *ngIf="communitySearchUtils.totalResults > 0" class="uk-align-center uk-margin-remove-bottom">
<div class="searchPaging uk-panel uk-margin-top uk-grid uk-margin-bottom">
<span class="uk-h6 uk-width-1-1@s uk-width-1-2@m">
{{communitySearchUtils.totalResults | number}} projects, page {{communitySearchUtils.page | number}} of {{(totalPages()) | number}}
</span>
<span class="float-children-right-at-medium margin-small-top-at-small uk-width-1-1@s uk-width-1-2@m">
<paging-no-load [currentPage]="communitySearchUtils.page" [totalResults]="communitySearchUtils.totalResults" [size]="10" (pageChange)="goTo($event.value, false)"></paging-no-load>
</span>
</div>
</div>
<modal-alert #AlertModalDeleteCommunity (alertOutput)="confirmedDeleteProject($event)"></modal-alert>
<!-- <delete-confirmation-dialog #deleteConfirmationModal [isModalShown]="isModalShown" (emmitObject)="confirmedDeleteProject($event)">
Are you sure you want to remove the selected project from your community?
</delete-confirmation-dialog> -->
<!-- </div> -->

349
src/app/pages/community/projects/remove-projects.component.ts
View File

@ -1,349 +0,0 @@
import { Component, ViewChild, OnInit, ViewEncapsulation, Input, Output, EventEmitter } from '@angular/core';
import { ActivatedRoute, Router } from "@angular/router";
import { Subject } from 'rxjs';
import { DataTableDirective } from 'angular-datatables';
import {ErrorCodes} from '../../../openaireLibrary/utils/properties/errorCodes';
import {SearchUtilsClass } from '../../../openaireLibrary/searchPages/searchUtils/searchUtils.class';
import {EnvProperties} from '../../../openaireLibrary/utils/properties/env-properties';
import {ManageCommunityProjectsService} from '../../../services/manageProjects.service';
import {SearchCommunityProjectsService} from '../../../openaireLibrary/connect/projects/searchProjects.service';
import {RouterHelper} from '../../../openaireLibrary/utils/routerHelper.class';
import {DOI, StringUtils} from '../../../openaireLibrary/utils/string-utils.class';
import {Session} from '../../../openaireLibrary/login/utils/helper.class';
import {LoginErrorCodes} from '../../../openaireLibrary/login/utils/guardHelper.class';
@Component({
selector: 'remove-projects',
templateUrl: './remove-projects.component.html',
styles: [`
#dpTable_info, #dpTable_paginate, #dpTable_length, #dpTable_filter{
display: none;
}
`],
encapsulation: ViewEncapsulation.None // this used in order styles to work
})
export class RemoveProjectsComponent implements OnInit {
public routerHelper:RouterHelper = new RouterHelper();
private community: string = '';
private communityUrl = "https://beta.explore.openaire.eu";
public errorCodes: ErrorCodes;
@Output() communityProjectsChanged = new EventEmitter();
public communityProjects = [];
public communitySearchUtils:SearchUtilsClass = new SearchUtilsClass();
public sub: any; public subResults: any; subRemove: any;
properties:EnvProperties;
public disableForms: boolean = false;
dtOptions: DataTables.Settings = {};
showTable = false; filteringAdded = false;
@ViewChild(DataTableDirective) datatableElement: DataTableDirective;
dtTrigger: Subject<any> = new Subject(); //necessary
public rowsOnPage:number = 10;
public queryParameters: string = "";
public query = '';
public selectedProjects=[] ;
public elementRef;
public funders:Set<string>;
public selectedFunder:string ="";
//@Output() projectSelected = new EventEmitter();
//@Input() public properties:EnvProperties;
public projects:string[];
private triggered: boolean = false;
private selectedCommunityProject: any;
@ViewChild('AlertModalDeleteCommunity') alertModalDeleteCommunity;
ngOnInit() {
this.route.data.subscribe((data: { envSpecific: EnvProperties }) => {
this.properties = data.envSpecific;
});
this.route.queryParams.subscribe(params => {
if(params['communityId']) {
this.community = params['communityId'];
this.communityUrl = "https://beta."+this.community+".openaire.eu";
this._getCommunityProjects();
//this.getFunders();
//this._getOpenaireProjects("", 1, 10);
}
});
this.dtOptions = {
// "paging": true,
// "searching": true,
// "lengthChange": false,
"pageLength": this.rowsOnPage,
"language": {
"search": "",
"searchPlaceholder": "Search projects..."
}
};
this.communitySearchUtils.keyword = "";
}
constructor(private route: ActivatedRoute, private _router: Router, private _manageCommunityProjectsService: ManageCommunityProjectsService, private _searchCommunityProjectsService: SearchCommunityProjectsService) {
this.errorCodes = new ErrorCodes();
this.communitySearchUtils.status = this.errorCodes.LOADING;
}
public ngOnDestroy() {
if(this.sub){
this.sub.unsubscribe();
}
if(this.subResults){
this.subResults.unsubscribe();
}
if(this.subRemove){
this.subRemove.unsubscribe();
}
$.fn['dataTable'].ext.search.pop();
}
rerender(): void {
this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
// Destroy the table first
dtInstance.destroy();
// Call the dtTrigger to rerender again
this.dtTrigger.next();
});
}
ngAfterViewInit(): void {
$.fn['dataTable'].ext.search.push((settings, data, dataIndex) => {
if (this.filterData(data, this.communitySearchUtils.keyword, this.selectedFunder)) {
return true;
}
return false;
});
//console.info("ngAfterViewInit");
}
filterData(row: any, query: string, selectedFunder: string) {
let returnValue: boolean = false;
if(query) {
for(var i=0; i <3; i++){
var r= this.filterQuery(row[i], query);
if(r) {
returnValue = true;
break;
}
}
if(!returnValue) {
return false;
}
}
if(selectedFunder){
return this.filterQuery(row[2], selectedFunder);
}
return true;
}
filterQuery(data, query){
if(data.toLowerCase().indexOf(query.toLowerCase()) > -1){
return true;
}else{
return false;
}
}
/*
Trigger a table draw in order to get the initial filtering
*/
triggerInitialLoad(){
this.triggered = true;
//console.info("triggerInitialLoad");
setTimeout(function(){
var table = (<any>$('#dpTable')).DataTable();
table.page( 0 ).draw( false );
}, 500);
this.dtTrigger.next();
}
public inCommunity(result: any): any {
let found = false;
for(let project of this.communityProjects) {
if(project.opeaireId == result.id) {
return true;
} else if(result['title'].name.search("("+project.grantId+")") != -1 && result.funderShortname == project.funder) {
return true;
}
}
return found;
}
goTo(page:number = 1){
this.communitySearchUtils.page=page;
var table = $('#dpTable').DataTable();
table.page( page - 1 ).draw( false );
var info = table.page.info();
this.communitySearchUtils.totalResults = info.recordsDisplay;
}
totalPages(): number {
let totalPages:any = this.communitySearchUtils.totalResults/(this.rowsOnPage);
if(!(Number.isInteger(totalPages))) {
totalPages = (parseInt(totalPages, 10) + 1);
}
return totalPages;
}
public confirmedDeleteProject(data : any) {
if(!Session.isLoggedIn()){
this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl": this._router.url} });
} else {
this.subRemove = this._manageCommunityProjectsService.removeProject(this.properties, this.community, this.selectedCommunityProject.id).subscribe(
data => {
//console.info(data);
},
err => {
console.log(err);
},
() => {
let index = this.communityProjects.indexOf(this.selectedCommunityProject);
this.communityProjects.splice(index, 1);
this.communitySearchUtils.totalResults--;
this.communitySearchUtils.page=1;
this.rerender();
}
)
}
}
public removeProject(communityProject: any) {
if(!Session.isLoggedIn()){
this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl": this._router.url} });
} else {
this.selectedCommunityProject = communityProject;
this.alertModalDeleteCommunity.cancelButton = true;
this.alertModalDeleteCommunity.okButton = true;
this.alertModalDeleteCommunity.alertTitle = "Remove project?";
let title = "";
if(communityProject.name) {
title = communityProject.name;
}
if(communityProject.name && communityProject.acronym) {
title += " (";
}
if(communityProject.acronym) {
title += communityProject.acronym;
}
if(communityProject.name && communityProject.acronym) {
title += ")";
}
this.alertModalDeleteCommunity.message = "Project";
if(title) {
this.alertModalDeleteCommunity.message += " '"+title+"' ";
}
this.alertModalDeleteCommunity.message += "will be removed from your community. Are you sure?";
this.alertModalDeleteCommunity.okButtonText = "Yes";
this.alertModalDeleteCommunity.open();
}
}
public _getCommunityProjects(){
if(!Session.isLoggedIn()){
this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl": this._router.url} });
} else {
this.communitySearchUtils.status = this.errorCodes.LOADING;
this.disableForms = true;
this.communityProjects = [];
this.communitySearchUtils.totalResults = 0;
this.communitySearchUtils.page=1;
this.communitySearchUtils.keyword = "";
this.selectedFunder = "";
this.subResults = this._searchCommunityProjectsService.searchProjects(this.properties, this.community).subscribe(
data => {
//console.info("search Projects [total communityProjects:"+data.length+"]");
this.communityProjects = data;
this.communitySearchUtils.totalResults = data.length;
this.communitySearchUtils.status = this.errorCodes.DONE;
// if(this.communitySearchUtils.totalResults == 0 ){
// this.communitySearchUtils.status = this.errorCodes.NONE;
// }
this.disableForms = false;
if(!this.triggered) {
this.triggerInitialLoad();
} else {
var table = $('#dpTable').DataTable();
table.clear();
this.rerender();
}
this.communityProjectsChanged.emit({
value: this.communityProjects,
});
this.createFunderFilter();
},
err => {
console.log(err);
//TODO check erros (service not available, bad request)
if(err.status == '404') {
this.communitySearchUtils.status = this.errorCodes.NOT_FOUND;
} else if(err.status == '500') {
this.communitySearchUtils.status = this.errorCodes.ERROR;
} else {
this.communitySearchUtils.status = this.errorCodes.NOT_AVAILABLE;
}
this.disableForms = false;
if(!this.triggered) {
this.triggerInitialLoad();
} else {
var table = $('#dpTable').DataTable();
table.clear();
this.rerender();
}
}
);
}
}
private createFunderFilter(): Set<String> {
this.funders = new Set<string>();
let i;
for(i=0; i<this.communityProjects.length; i++) {
let funder = this.communityProjects[i].funder;
if(funder && !this.funders.has(funder)) {
this.funders.add(funder);
}
}
return this.funders;
}
}

78
src/app/pages/content-providers/add-content-providers.component.html Normal file
View File

@ -0,0 +1,78 @@
<div class="uk-width-1-1 uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-grid uk-margin-medium-bottom" uk-grid>
<div #searchInputComponent search-input [control]="filterForm.controls.keyword" [showSearch]="false"
placeholder="Search Content Providers"
[selected]="openaireSearchUtils.keyword" (closeEmitter)="onSearchClose()" (resetEmitter)="resetInput()"
[bordered]="true" colorClass="uk-text-secondary"
class="uk-width-1-2@l uk-width-1-2@m uk-width-1-1"></div>
</div>
<div id="manage-content-providers">
<div *ngIf="openaireSearchUtils.status == errorCodes.LOADING" class="uk-position-large-top">
<loading></loading>
</div>
<div *ngIf="openaireSearchUtils.totalResults == 0"
class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
<div>
<div *ngIf="openaireSearchUtils.status == errorCodes.NONE">No OpenAIRE content providers available</div>
<div *ngIf="openaireSearchUtils.status == errorCodes.ERROR">An Error Occurred. No OpenAIRE content providers found</div>
<div *ngIf="openaireSearchUtils.status == errorCodes.NOT_AVAILABLE">Service temporarily unavailable. Please try again later.</div>
<div *ngIf="openaireSearchUtils.status == errorCodes.NOT_FOUND">No OpenAIRE content providers found</div>
</div>
</div>
<!-- <errorMessages [status]="[openaireSearchUtils.status]" [type]="'OpenAIRE content providers'"></errorMessages>-->
<ng-container *ngIf="openaireSearchUtils.totalResults > 0">
<no-load-paging [type]="'Content Providers'"
[page]="openaireSearchUtils.page" [pageSize]="resultsPerPage" (pageChange)="goTo($event.value)"
[totalResults]="openaireSearchUtils.totalResults">
</no-load-paging>
<ul class="uk-list search-results uk-margin-medium-top uk-margin-medium-bottom">
<li *ngFor="let result of openaireContentProviders" class="uk-animation-fade">
<div class="uk-card uk-card-default uk-card-hover uk-text-small uk-margin-bottom">
<div class="uk-grid uk-grid-divider uk-padding-small" uk-grid>
<div class="uk-width-expand@m uk-width-1-1">
<result-preview [properties]="properties" [showOrganizations]="true"
[showSubjects]="true" [result]="getResultPreview(result)"
[externalUrl]="contentProviderUrl">
</result-preview>
</div>
<div class="uk-width-auto@m uk-width-1-1">
<div class="uk-flex uk-flex-middle uk-flex-center uk-flex-column uk-height-1-1">
<div class="uk-padding-small uk-padding-remove-horizontal">
<div [class.hide-element]="!getCommunityContentProvider(result)">
<a (click)="removeContentProvider(result)" class="uk-button action uk-flex uk-flex-middle">
<icon name="remove_circle_outline"></icon>
<span class="uk-margin-small-left">Remove content provider</span>
</a>
</div>
<div [class.hide-element]="getCommunityContentProvider(result)">
<a (click)="addContentProvider(result)" class="uk-button action uk-flex uk-flex-middle"
uk-tooltip="title:<div class='uk-padding-small'><div class='uk-margin-bottom uk-text-bold'>Add new content provider </div><div>Newly added content providers will be linked to your community on the next run of our algorithms.</div></div>">
<div class="uk-text-success">
<icon name="add"></icon>
</div>
<span class="uk-margin-small-left">Add content provider</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
<!-- <div [class]="openaireSearchUtils.page > pagingLimit ? 'search-results' : ''"-->
<!-- *ngIf="(openaireSearchUtils.page >= pagingLimit) && (openaireSearchUtils.totalResults > resultsPerPage*pagingLimit)">-->
<!-- <p class="uk-alert-warning" uk-alert>For more results please try a new, more specific query</p>-->
<!-- </div>-->
<no-load-paging [type]="'Content Providers'"
[page]="openaireSearchUtils.page" [pageSize]="resultsPerPage" (pageChange)="goTo($event.value)"
[totalResults]="openaireSearchUtils.totalResults">
</no-load-paging>
</ng-container>
</div>

299
src/app/pages/content-providers/add-content-providers.component.ts Normal file
View File

@ -0,0 +1,299 @@
import {Component, OnInit, Input, Output, EventEmitter, ViewChild} from '@angular/core';
import { ActivatedRoute, Router } from "@angular/router";
import {SearchResult} from '../../openaireLibrary/utils/entities/searchResult';
import {ErrorCodes} from '../../openaireLibrary/utils/properties/errorCodes';
import {SearchUtilsClass } from '../../openaireLibrary/searchPages/searchUtils/searchUtils.class';
import {EnvProperties} from '../../openaireLibrary/utils/properties/env-properties';
import {SearchDataprovidersService} from '../../openaireLibrary/services/searchDataproviders.service';
import {RouterHelper} from '../../openaireLibrary/utils/routerHelper.class';
import {StringUtils} from '../../openaireLibrary/utils/string-utils.class';
import {ManageCommunityContentProvidersService} from '../../services/manageContentProviders.service';
import {Session} from '../../openaireLibrary/login/utils/helper.class';
import {LoginErrorCodes} from '../../openaireLibrary/login/utils/guardHelper.class';
import {properties} from "../../../environments/environment";
import {FormBuilder, FormGroup} from "@angular/forms";
import {SearchInputComponent} from "../../openaireLibrary/sharedComponents/search-input/search-input.component";
import {Subscriber} from "rxjs";
import {debounceTime, distinctUntilChanged} from "rxjs/operators";
import {ResultPreview} from "../../openaireLibrary/utils/result-preview/result-preview";
declare var UIkit;
@Component({
selector: 'add-content-providers',
templateUrl: './add-content-providers.component.html',
})
export class AddContentProvidersComponent implements OnInit {
private subscriptions: any[] = [];
public subResults: any;
private community: string = '';
public routerHelper: RouterHelper = new RouterHelper();
public properties: EnvProperties = properties;
public errorCodes: ErrorCodes;
public openaireSearchUtils: SearchUtilsClass = new SearchUtilsClass();
@Output() communityContentProvidersChanged = new EventEmitter();
@Input() communityContentProviders = [];
public openaireContentProviders = [];
public queryParameters: string = "";
// public pagingLimit: number = properties.pagingLimit;
public resultsPerPage: number = properties.resultsPerPage;
filterForm: FormGroup;
@ViewChild('searchInputComponent') searchInputComponent: SearchInputComponent;
private contentProviderUrl: string = "https://" + ((properties.environment == "beta" || properties.environment == "development") ? "beta." : "") + "explore.openaire.eu" + properties.searchLinkToDataProvider;
public body: string = "Send from page";
@Output() toggleView: EventEmitter<any> = new EventEmitter();
constructor(private route: ActivatedRoute, private _router: Router,
private _searchContentProvidersService: SearchDataprovidersService,
private _manageCommunityContentProvidersService: ManageCommunityContentProvidersService,
private _fb: FormBuilder) {
this.errorCodes = new ErrorCodes();
this.openaireSearchUtils.status = this.errorCodes.LOADING;
}
ngOnInit() {
this.subscriptions.push(this.route.params.subscribe(params => {
this.openaireSearchUtils.status = this.errorCodes.LOADING;
this.community = params['community'];
// this.contentProviderUrl = "https://" + ((this.properties.environment == "beta" || this.properties.environment == "development") ? "beta." : "")
// + this.community + ".openaire.eu" + this.properties.searchLinkToDataProvider;
this._getOpenaireContentProviders("", 1, this.resultsPerPage);
this.body = "[Please write your message here]";
this.body = StringUtils.URIEncode(this.body);
}));
this.openaireSearchUtils.keyword = "";
this.filterForm = this._fb.group({
keyword: [''],
});
this.subscriptions.push(this.filterForm.get('keyword').valueChanges
.pipe(debounceTime(1000), distinctUntilChanged())
.subscribe(value => {
this.keywordChanged(value);
})
);
}
public ngOnDestroy() {
this.subscriptions.forEach(sub => {
if (sub instanceof Subscriber) {
sub.unsubscribe();
}
});
if(this.subResults){
this.subResults.unsubscribe();
}
}
public addContentProvider(contenProvider: SearchResult) {
if (!Session.isLoggedIn()) {
this._router.navigate(['/user-info'], {
queryParams: {
"errorCode": LoginErrorCodes.NOT_VALID,
"redirectUrl": this._router.url
}
});
} else {
this.subscriptions.push(this._manageCommunityContentProvidersService.addContentProvider(this.properties, this.community, contenProvider).subscribe(
data => {
this.communityContentProviders.push(data);
UIkit.notification('Content Provider successfully added!', {
status: 'success',
timeout: 6000,
pos: 'bottom-right'
});
this.communityContentProvidersChanged.emit({
value: this.communityContentProviders,
});
},
err => {
this.handleError('An error has been occurred. Try again later!');
console.error(err.status);
}
));
}
}
public removeContentProvider(contentProvider) {
if (!Session.isLoggedIn()) {
this._router.navigate(['/user-info'], {
queryParams: {
"errorCode": LoginErrorCodes.NOT_VALID,
"redirectUrl": this._router.url
}
});
} else {
let communityContentProvider = this.getCommunityContentProvider(contentProvider);
let contentProviderId: string = communityContentProvider['id'];
this.subscriptions.push(this._manageCommunityContentProvidersService.removeContentProvider(this.properties, this.community, contentProviderId).subscribe(
data => {
let index = this.communityContentProviders.indexOf(communityContentProvider);
this.communityContentProviders.splice(index, 1);
UIkit.notification('Content Provider successfully removed!', {
status: 'success',
timeout: 6000,
pos: 'bottom-right'
});
this.communityContentProvidersChanged.emit({
value: this.communityContentProviders,
});
},
err => {
this.handleError('An error has been occurred. Try again later!');
console.error(err);
}
));
}
}
public getCommunityContentProvider(contentProvider: any): string {
let index: number = 0;
for (let communityContentProvider of this.communityContentProviders) {
if (communityContentProvider.openaireId == contentProvider.id) {
return communityContentProvider;
}
index++;
}
return "";
}
public getResultPreview(result: SearchResult): ResultPreview {
return ResultPreview.searchResultConvert(result, "dataprovider");
}
// public inCommunity(contentProvider: any): any {
// for(let communityContentProvider of this.communityContentProviders) {
// if(communityContentProvider.openaireId == contentProvider.id) {
// return true;
// }
// }
//
// if(this.undo[contentProvider.id]) {
// return true;
// }
// return false;
// }
private _getOpenaireContentProviders(parameters: string, page: number, size: number) {
if (!Session.isLoggedIn()) {
this._router.navigate(['/user-info'], {
queryParams: {
"errorCode": LoginErrorCodes.NOT_VALID,
"redirectUrl": this._router.url
}
});
} else {
// if (page > this.pagingLimit) {
// size = 0;
// }
if (this.openaireSearchUtils.status == this.errorCodes.LOADING) {
this.openaireSearchUtils.status = this.errorCodes.LOADING;
this.openaireContentProviders = [];
this.openaireSearchUtils.totalResults = 0;
if(this.subResults){
this.subResults.unsubscribe();
}
this.subResults = this._searchContentProvidersService.searchDataproviders(parameters, null, page, size, [], this.properties).subscribe(
data => {
this.openaireSearchUtils.totalResults = data[0];
this.openaireContentProviders = data[1];
//this.searchPage.checkSelectedFilters(this.filters);
this.openaireSearchUtils.status = this.errorCodes.DONE;
if (this.openaireSearchUtils.totalResults == 0) {
this.openaireSearchUtils.status = this.errorCodes.NONE;
}
// if (this.openaireSearchUtils.status == this.errorCodes.DONE) {
// // Page out of limit!!!
// let totalPages: any = this.openaireSearchUtils.totalResults / (this.openaireSearchUtils.size);
// if (!(Number.isInteger(totalPages))) {
// totalPages = (parseInt(totalPages, 10) + 1);
// }
// if (totalPages < page) {
// this.openaireSearchUtils.totalResults = 0;
// this.openaireSearchUtils.status = this.errorCodes.OUT_OF_BOUND;
// }
// }
},
err => {
console.error(err);
//TODO check erros (service not available, bad request)
if (err.status == '404') {
this.openaireSearchUtils.status = this.errorCodes.NOT_FOUND;
} else if (err.status == '500') {
this.openaireSearchUtils.status = this.errorCodes.ERROR;
} else {
this.openaireSearchUtils.status = this.errorCodes.NOT_AVAILABLE;
}
}
);
}
}
}
totalPages(): number {
let totalPages: any = this.openaireSearchUtils.totalResults / (this.resultsPerPage);
if (!(Number.isInteger(totalPages))) {
totalPages = (parseInt(totalPages, 10) + 1);
}
return totalPages;
}
keywordChanged(keyword) {
this.openaireSearchUtils.keyword = keyword;
this.buildQueryParameters();
this.goTo(1);
}
buildQueryParameters() {
this.queryParameters = "";
if (this.openaireSearchUtils.keyword) {
this.queryParameters = "q=" + StringUtils.URIEncode(this.openaireSearchUtils.keyword);
}
}
goTo(page: number = 1) {
this.openaireSearchUtils.page = page;
this.openaireSearchUtils.status = this.errorCodes.LOADING;
this._getOpenaireContentProviders(this.queryParameters, page, this.resultsPerPage);
}
back() {
this.toggleView.emit(null);
}
public onSearchClose() {
this.openaireSearchUtils.keyword = this.filterForm.get('keyword').value;
}
public resetInput() {
this.openaireSearchUtils.keyword = null;
this.searchInputComponent.reset()
}
handleError(message: string) {
UIkit.notification(message, {
status: 'danger',
timeout: 6000,
pos: 'bottom-right'
});
}
}

68
src/app/pages/content-providers/communityContentProviders.module.ts Normal file
View File

@ -0,0 +1,68 @@
import {NgModule} from '@angular/core';
import {HttpClientModule} from '@angular/common/http';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {RouterModule} from '@angular/router';
import {PagingModule} from '../../openaireLibrary/utils/paging.module';
import {SearchPagingModule} from '../../openaireLibrary/searchPages/searchUtils/searchPaging.module';
import {ErrorMessagesModule} from '../../openaireLibrary/utils/errorMessages.module';
import {AlertModalModule} from '../../openaireLibrary/utils/modal/alertModal.module';
import {CommonModule} from '@angular/common';
import {PageContentModule} from "../../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module";
import {CommunityInfoModule} from "../community-info/community-info.module";
import {InputModule} from "../../openaireLibrary/sharedComponents/input/input.module";
import {SearchInputModule} from "../../openaireLibrary/sharedComponents/search-input/search-input.module";
import {NoLoadPaging} from "../../openaireLibrary/searchPages/searchUtils/no-load-paging.module";
import {LoadingModule} from "../../openaireLibrary/utils/loading/loading.module";
import {IconsModule} from "../../openaireLibrary/utils/icons/icons.module";
import {IconsService} from "../../openaireLibrary/utils/icons/icons.service";
import {add, arrow_left, close, edit, remove_circle_outline} from "../../openaireLibrary/utils/icons/icons";
import {FullScreenModalModule} from "../../openaireLibrary/utils/modal/full-screen-modal/full-screen-modal.module";
import {ResultPreviewModule} from "../../openaireLibrary/utils/result-preview/result-preview.module";
import {SearchDataprovidersServiceModule} from "../../openaireLibrary/connect/contentProviders/searchDataprovidersService.module";
import {ManageContentProvidersComponent} from "./manage-content-providers.component";
import {RemoveContentProvidersComponent} from "./remove-content-providers.component";
import {AddContentProvidersComponent} from "./add-content-providers.component";
import {ManageCommunityContentProvidersService} from "../../services/manageContentProviders.service";
import {SearchDataprovidersService} from "../../openaireLibrary/services/searchDataproviders.service";
@NgModule({
imports: [
CommonModule,
HttpClientModule,
FormsModule,
ReactiveFormsModule,
RouterModule,
PagingModule, SearchPagingModule,
ErrorMessagesModule,
AlertModalModule,
SearchDataprovidersServiceModule,
PageContentModule,
CommunityInfoModule,
InputModule,
SearchInputModule,
RouterModule.forChild([
{
path: '', component: ManageContentProvidersComponent
}
]),
NoLoadPaging, LoadingModule, IconsModule, FullScreenModalModule, ResultPreviewModule
],
declarations: [
ManageContentProvidersComponent,
RemoveContentProvidersComponent,
AddContentProvidersComponent
],
providers: [
ManageCommunityContentProvidersService,
SearchDataprovidersService
],
exports: [ManageContentProvidersComponent]
})
export class CommunityContentProvidersModule {
constructor(private iconsService: IconsService) {
this.iconsService.registerIcons([remove_circle_outline, add, edit, close, arrow_left]);
}
}

18
src/app/pages/content-providers/criteria-utils.ts Normal file
View File

@ -0,0 +1,18 @@
import {Option} from "../../openaireLibrary/sharedComponents/input/input.component";
export class CriteriaUtils {
public static readonly fields: Option[] = [
{value: 'title', label: 'Title'},
{value: 'author', label: 'Author\'s name'},
{value: 'author ORCID', label: 'Author\'s ORCID'},
{value: 'contributor', label: 'Contributor'},
{value: 'description', label: 'Description'}
]
public static readonly verbs: Option[] = [
{value: 'contains', label: 'contains'},
{value: 'equals', label: 'equals'},
{value: 'not_contains', label: 'not contains'},
{value: 'not_equals', label: 'not equals'}
]
}

13
src/app/pages/content-providers/criteria/criteria-routing.module.ts Normal file
View File

@ -0,0 +1,13 @@
import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';
import {CriteriaComponent} from './criteria.component';
@NgModule({
imports: [
RouterModule.forChild([
{path: '', component: CriteriaComponent}
])
]
})
export class CriteriaRoutingModule {
}

6
src/app/pages/content-providers/criteria/criteria.component.css Normal file
View File

@ -0,0 +1,6 @@
.criterion {
border: rgba(26,26,26,0.5) solid 1px;
border-radius: 4px;
max-height: 400px;
overflow: auto;
}

170
src/app/pages/content-providers/criteria/criteria.component.html Normal file
View File

@ -0,0 +1,170 @@
<div page-content>
<div header>
<div class="uk-margin-top">
<a routerLink="../" class="uk-text-secondary uk-text-uppercase uk-text-bold uk-text-small">
<span class="uk-icon-button uk-icon small uk-button-secondary">
<icon name="arrow_left"></icon>
</span>
<span class="space">
Go back to Content Providers
</span>
</a>
</div>
</div>
<div inner>
<div class="uk-card-header">
<div class="uk-flex uk-flex-middle uk-child-width-1-1 uk-child-width-1-2@m uk-grid" uk-grid>
<div>
<div class="uk-text-small uk-text-muted">Filters for</div>
<div>
<span *ngIf="dataProvider" class="uk-text-bold">{{dataProvider.officialname}}</span>
<span *ngIf="dirty"> (unsaved changes)</span>
</div>
</div>
<div class=" uk-flex uk-flex-right">
<button (click)="reset()" [disabled]="loading || !dirty"
class="uk-button uk-button-secondary outlined uk-margin-small-right">Reset
</button>
<button (click)="save()" class="uk-button uk-button-secondary uk-margin-small-right"
[disabled]="loading || !dirty || selectionCriteria.invalid ">Save
</button>
</div>
</div>
</div>
<div class="uk-card uk-card-default uk-position-relative" style="min-height: 60vh">
<div *ngIf="!loading" class="uk-padding-large uk-padding-remove-bottom uk-overflow-auto"
style="max-height: 60vh;">
<div *ngIf="criteria.length == 0" class="uk-padding-large uk-text-center uk-text-bold">
<div *ngIf="dataProvider">No filters for {{dataProvider.officialname}}.</div>
<div>If no filters are specified, all research results of this content provider will be included in your
community.
</div>
</div>
<form *ngIf="criteria.length > 0" [formGroup]="selectionCriteria">
<div formArrayName="criteria" class="uk-margin-bottom">
<no-load-paging (pageChange)="page = $event.value" [page]="page" [totalResults]="criteria.length" [pageSize]="pageSize" [type]="'filter' + (criteria.length > 1?'s':'')">
</no-load-paging>
<div class="uk-margin-top" *ngFor="let criterion of currentPage; let i=index" [formGroupName]="getIndex(i).toString()">
<h6 class="uk-text-bold uk-form-label uk-margin-small-bottom">Filter {{getIndex(i) + 1}}</h6>
<div class="uk-padding criterion" formArrayName="constraint">
<div class="uk-flex uk-flex-middle uk-grid-small uk-margin-small-bottom uk-visible@l" uk-grid>
<div style="width: 50px"></div>
<div class="uk-width-1-4">
<label class="uk-text-uppercase uk-text-bold">Field</label>
</div>
<div class="uk-width-1-4">
<label class="uk-text-uppercase uk-text-bold">Operator</label>
</div>
<div class="uk-width-1-4">
<label class="uk-text-uppercase uk-text-bold">Term</label>
</div>
<div class="uk-width-expand uk-text-truncate">
<label class="uk-text-bold uk-text-uppercase">Match Case</label>
</div>
</div>
<div *ngFor="let constraint of getConstraint(getIndex(i)).controls; let j=index" [formGroupName]="j.toString()"
class="uk-margin-bottom uk-hidden@l">
<div class="uk-flex uk-flex-middle uk-grid-small uk-margin-medium-bottom" uk-grid>
<div class="uk-flex uk-flex-center uk-width-1-1">
<span *ngIf="j > 0">AND</span>
</div>
<div class="uk-flex uk-flex-right uk-width-1-1">
<a class="uk-link-heading" (click)="removeConstraint(getIndex(i), j)">
<icon name="close"
[attr.uk-tooltip]="(getConstraint(getIndex(i)).length === 1?'By removing this constraint, the filter will be removed too':null)"></icon>
</a>
</div>
<div class="uk-width-1-1" dashboard-input type="select" placeholder="Select a field"
[options]="fields" [formInput]="constraint.get('field')">
<label class="uk-text-uppercase uk-text-bold uk-width-1-3 uk-text-truncate">Field:</label>
</div>
<div class="uk-width-1-1" dashboard-input type="select" placeholder="Select an operator"
[options]="verbs" [formInput]="constraint.get('verb')">
<label class="uk-text-uppercase uk-text-bold uk-width-1-3 uk-text-truncate">Operator:</label>
</div>
<div class="uk-width-1-1" dashboard-input placeholder="Write a term"
[formInput]="constraint.get('value')">
<label class="uk-text-uppercase uk-text-bold uk-width-1-3 uk-text-truncate">Term:</label>
</div>
<div class="uk-width-1-1">
<div class="uk-grid" uk-grid>
<label class="uk-text-uppercase uk-text-bold uk-width-1-3 uk-text-truncate">Match Case</label>
<div class="uk-width-expand">
<mat-slide-toggle [checked]="constraint.get('verb_suffix').value === ''"
[attr.uk-tooltip]="(constraint.get('verb_suffix').value === ''?('Only \'\'' + constraint.get('value').value + '\'\' matches'):
('Both \'\'' + constraint.get('value').value.toUpperCase() + '\'\' and \'\'' + constraint.get('value').value.toLowerCase() + '\'\' match'))"
(change)="caseSensitive($event, constraint)"></mat-slide-toggle>
</div>
</div>
</div>
</div>
</div>
<div *ngFor="let constraint of getConstraint(getIndex(i)).controls; let j=index"
[formGroupName]="j.toString()" class="uk-margin-bottom uk-visible@l">
<div class="uk-flex uk-flex-middle uk-grid-small" uk-grid>
<div class="uk-flex uk-flex-center" style="width: 50px">
<span *ngIf="j > 0">AND</span>
</div>
<div class="uk-width-1-4" dashboard-input type="select" placeholder="Select a field"
[options]="fields" [formInput]="constraint.get('field')"></div>
<div class="uk-width-1-4" dashboard-input type="select" placeholder="Select an operator"
[options]="verbs" [formInput]="constraint.get('verb')"></div>
<div class="uk-width-1-4" dashboard-input placeholder="Write a term"
[formInput]="constraint.get('value')"></div>
<div class="uk-width-expand">
<mat-slide-toggle [checked]="constraint.get('verb_suffix').value === ''" class="uk-margin-left"
[attr.uk-tooltip]="(constraint.get('verb_suffix').value === ''?('Only \'\'' + constraint.get('value').value + '\'\' matches'):
('Both \'\'' + constraint.get('value').value.toUpperCase() + '\'\' and \'\'' + constraint.get('value').value.toLowerCase() + '\'\' match'))"
(change)="caseSensitive($event, constraint)"></mat-slide-toggle>
</div>
<div class="uk-flex uk-flex-center">
<a class="uk-link-heading" (click)="removeConstraint(getIndex(i), j)">
<icon name="close"
[attr.uk-tooltip]="(getConstraint(getIndex(i)).length === 1?'By removing this constraint, the filter will be removed too':null)"></icon>
</a>
</div>
</div>
</div>
<div class="uk-margin-top uk-width-1-1 uk-flex uk-flex-center uk-hidden@l">
<a (click)="addConstraint(getIndex(i))" class="uk-flex uk-flex-middle uk-text-uppercase">
<button class="large uk-icon-button uk-button-secondary">
<icon name="add"></icon>
</button>
<button class="uk-button uk-button-link uk-margin-small-left uk-text-secondary">
Add Constraint
</button>
</a>
</div>
<div class="uk-flex uk-flex-middle uk-grid-small uk-visible@l" uk-grid>
<div style="width: 50px"></div>
<a (click)="addConstraint(getIndex(i))" class="uk-flex uk-flex-middle uk-text-uppercase">
<button class="large uk-icon-button uk-button-secondary">
<icon name="add"></icon>
</button>
<button class="uk-button uk-button-link uk-margin-small-left uk-text-secondary">
Add Constraint
</button>
</a>
</div>
</div>
</div>
</div>
</form>
<div class="uk-flex uk-flex-center uk-margin-large-bottom">
<a (click)="addCriteria()" class="uk-flex uk-flex-middle uk-text-uppercase"
uk-tooltip="<div class='uk-padding-small'>Add filter to limit research results.<br>Results which satisfy any of the selected filters will be included in your community.</div>">
<button class="large uk-icon-button uk-button-secondary">
<icon name="add"></icon>
</button>
<button class="uk-button uk-button-link uk-margin-small-left uk-text-secondary">
Add filter
</button>
</a>
</div>
</div>
<div *ngIf="loading" class="uk-position-center">
<loading></loading>
</div>
</div>
</div>
</div>

257
src/app/pages/content-providers/criteria/criteria.component.ts Normal file
View File

@ -0,0 +1,257 @@
import {ChangeDetectorRef, Component, OnDestroy, OnInit} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {SearchCommunityDataprovidersService} from '../../../openaireLibrary/connect/contentProviders/searchDataproviders.service';
import {EnvProperties} from '../../../openaireLibrary/utils/properties/env-properties';
import {
Constraint,
ContentProvider,
Criteria,
SelectionCriteria
} from '../../../openaireLibrary/utils/entities/contentProvider';
import {AbstractControl, FormArray, FormBuilder, FormGroup, Validators} from '@angular/forms';
import {ManageCommunityContentProvidersService} from '../../../services/manageContentProviders.service';
import {Title} from '@angular/platform-browser';
import {properties} from "../../../../environments/environment";
import {Subscription} from "rxjs";
import {Option} from "../../../openaireLibrary/sharedComponents/input/input.component";
import {MatSlideToggleChange} from "@angular/material/slide-toggle";
import {HelperFunctions} from "../../../openaireLibrary/utils/HelperFunctions.class";
import {CriteriaUtils} from "../criteria-utils";
declare var UIkit;
@Component({
selector: 'criteria',
templateUrl: './criteria.component.html',
styleUrls: ['criteria.component.css'],
})
export class CriteriaComponent implements OnInit, OnDestroy {
public community: string = '';
public openaireId: string = '';
public dataProvider: ContentProvider = null;
public selectionCriteria: FormGroup;
public properties: EnvProperties = properties;
public fields: Option[] = CriteriaUtils.fields;
public verbs: Option[] = CriteriaUtils.verbs;
public loading = true;
/** Paging */
public page: number = 1;
public pageSize: number = 5;
private subs: any[] = [];
constructor(private route: ActivatedRoute, private router: Router,
private title: Title,
private searchCommunityDataprovidersService: SearchCommunityDataprovidersService,
private manageCommunityContentProvidersService: ManageCommunityContentProvidersService,
private cdr: ChangeDetectorRef,
private fb: FormBuilder) {
}
ngOnInit() {
this.subs.push(this.route.params.subscribe(params => {
this.community = params['community'];
this.route.params.subscribe(params => {
if (params['provider']) {
this.openaireId = params['provider'];
}
this.searchCommunityDataprovidersService.searchDataproviders(this.properties, this.community).subscribe(dataProviders => {
dataProviders.forEach(dataProvider => {
if (dataProvider.openaireId == this.openaireId) {
this.dataProvider = dataProvider;
this.title.setTitle(this.community.toUpperCase() + ' | Criteria for ' + this.dataProvider.officialname);
}
});
if (!this.dataProvider) {
this.navigateToError();
} else {
this.reset();
this.loading = false;
}
});
});
}));
}
public ngOnDestroy() {
this.subs.forEach(subscription => {
if (subscription instanceof Subscription) {
subscription.unsubscribe();
}
})
}
private navigateToError() {
this.router.navigate(['/error'], {queryParams: {'page': this.properties.baseLink + this.router.url}});
}
reset() {
this.page = 1;
if (this.dataProvider) {
this.selectionCriteria = this.fb.group({
criteria: this.fb.array([])
});
let selectionCriteria = this.dataProvider.selectioncriteria;
if (selectionCriteria) {
selectionCriteria.criteria.forEach(criterion => {
let constraintArray: FormArray = this.fb.array([]);
criterion.constraint.forEach(constraint => {
constraintArray.push(this.fb.group({
field: this.fb.control(constraint.field, Validators.required),
verb: this.fb.control(this.removeSuffix(constraint.verb), Validators.required),
value: this.fb.control(constraint.value, Validators.required),
verb_suffix: this.fb.control(this.getSuffix(constraint.verb))
}));
});
this.criteria.push(this.fb.group({
constraint: constraintArray
}));
});
}
}
}
get currentPage(): AbstractControl[] {
if (this.criteria) {
return this.criteria.controls.slice((this.page - 1) * this.pageSize, this.page * this.pageSize);
} else {
return [];
}
}
getIndex(index: number): number {
return (this.page - 1)*this.pageSize + index;
}
public get criteria(): FormArray {
return this.selectionCriteria.get('criteria') as FormArray;
}
public getConstraint(i: number): FormArray {
return this.criteria.at(i).get('constraint') as FormArray;
}
public addCriteria() {
let constraintArray: FormArray = this.fb.array([
this.fb.group({
field: this.fb.control('', Validators.required),
verb: this.fb.control('contains', Validators.required),
value: this.fb.control('', Validators.required),
verb_suffix: this.fb.control('_caseinsensitive')
})
]);
this.criteria.push(this.fb.group({
constraint: constraintArray
}));
this.page = Math.ceil(this.criteria.length/this.pageSize);
this.cdr.detectChanges();
}
public addConstraint(i: number) {
let constraintArray: FormArray = this.criteria.at(i).get('constraint') as FormArray;
constraintArray.push(this.fb.group({
field: this.fb.control('', Validators.required),
verb: this.fb.control('contains', Validators.required),
value: this.fb.control('', Validators.required),
verb_suffix: this.fb.control('_caseinsensitive')
}));
this.cdr.detectChanges();
}
public removeConstraint(i: number, j: number) {
let constraintArray: FormArray = this.criteria.at(i).get('constraint') as FormArray;
constraintArray.removeAt(j);
if (constraintArray.length === 0) {
this.criteria.removeAt(i);
if (this.currentPage.length === 0) {
this.page = 1;
}
}
this.cdr.detectChanges();
}
get dataProviderCriteria(): Criteria[] {
return (this.dataProvider && this.dataProvider.selectioncriteria && this.dataProvider.selectioncriteria.criteria)?this.dataProvider.selectioncriteria.criteria:[];
}
get dirty() {
if(!this.dataProvider || !this.criteria) {
return false;
} else if(this.criteria.length !== this.dataProviderCriteria.length) {
return true;
} else {
return this.dataProviderCriteria.filter((criterion, i) => {
if(criterion.constraint.length !== this.getConstraint(i).length) {
return true;
} else {
let temp = this.getConstraint(i).value;
return criterion.constraint.filter((constraint, j) => {
return constraint.field !== temp[j].field || constraint.verb !== (temp[j].verb + temp[j].verb_suffix) || constraint.value !== temp[j].value;
}).length > 0;
}
}).length > 0;
}
}
save() {
if (this.selectionCriteria.valid) {
this.loading = true;
this.dataProvider.selectioncriteria = this.parseForm(this.selectionCriteria.value);
this.manageCommunityContentProvidersService.saveContentProvider(this.properties, this.dataProvider).subscribe(() => {
this.reset();
this.loading = false;
UIkit.notification('Filters has been <b>successfully updated</b>', {
status: 'success',
timeout: 6000,
pos: 'bottom-right'
});
}, error => {
UIkit.notification('An error has been occurred. Try again later!', {
status: 'danger',
timeout: 6000,
pos: 'bottom-right'
});
});
} else {
UIkit.notification('An error has been occurred. Try again later!', {
status: 'danger',
timeout: 6000,
pos: 'bottom-right'
});
}
}
caseSensitive(event: MatSlideToggleChange, constraint: AbstractControl) {
if(event.checked) {
constraint.get('verb_suffix').setValue('');
} else {
constraint.get('verb_suffix').setValue('_caseinsensitive');
}
}
removeSuffix(verb: string) {
return verb.replace('_caseinsensitive', '');
}
getSuffix(verb: string) {
if(verb.includes('_caseinsensitive')) {
return '_caseinsensitive';
} else {
return '';
}
}
parseForm(formValue): SelectionCriteria {
let value = HelperFunctions.copy(formValue);
let selectionCriteria: SelectionCriteria = new SelectionCriteria();
selectionCriteria.criteria = [];
value.criteria.forEach(criterion => {
let criteria = new Criteria();
criteria.constraint = [];
criterion.constraint.forEach(constraint => {
criteria.constraint.push(new Constraint(constraint.verb + constraint.verb_suffix, constraint.field, constraint.value));
});
selectionCriteria.criteria.push(criteria);
})
return selectionCriteria;
}
}

48
src/app/pages/content-providers/criteria/criteria.module.ts Normal file
View File

@ -0,0 +1,48 @@
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {CriteriaComponent} from './criteria.component';
import {CriteriaRoutingModule} from './criteria-routing.module';
import {SearchCommunityDataprovidersService} from '../../../openaireLibrary/connect/contentProviders/searchDataproviders.service';
import {RouterModule} from '@angular/router';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {ManageCommunityContentProvidersService} from '../../../services/manageContentProviders.service';
import {PageContentModule} from "../../../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module";
import {IconsModule} from "../../../openaireLibrary/utils/icons/icons.module";
import {IconsService} from "../../../openaireLibrary/utils/icons/icons.service";
import {add, arrow_left, close} from "../../../openaireLibrary/utils/icons/icons";
import {LoadingModule} from "../../../openaireLibrary/utils/loading/loading.module";
import {InputModule} from "../../../openaireLibrary/sharedComponents/input/input.module";
import {MatSlideToggleModule} from "@angular/material/slide-toggle";
import {ScrollingModule} from "@angular/cdk/scrolling";
import {NoLoadPaging} from "../../../openaireLibrary/searchPages/searchUtils/no-load-paging.module";
@NgModule({
imports: [
CommonModule,
CriteriaRoutingModule,
RouterModule,
FormsModule,
ReactiveFormsModule,
PageContentModule,
IconsModule,
LoadingModule,
InputModule,
MatSlideToggleModule,
ScrollingModule,
NoLoadPaging,
],
declarations: [
CriteriaComponent
],
providers: [
SearchCommunityDataprovidersService,
ManageCommunityContentProvidersService
],
exports: [CriteriaComponent]
})
export class CriteriaModule {
constructor(private iconsService: IconsService) {
this.iconsService.registerIcons([arrow_left, add, close])
}
}

111
src/app/pages/content-providers/manage-content-providers.component.ts Normal file
View File

@ -0,0 +1,111 @@
import {Component, ElementRef, Input, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from "@angular/router";
import {RemoveContentProvidersComponent} from './remove-content-providers.component';
import {Session} from '../../openaireLibrary/login/utils/helper.class';
import {LoginErrorCodes} from '../../openaireLibrary/login/utils/guardHelper.class';
import {HelperFunctions} from "../../openaireLibrary/utils/HelperFunctions.class";
import {Title} from '@angular/platform-browser';
import {FullScreenModalComponent} from "../../openaireLibrary/utils/modal/full-screen-modal/full-screen-modal.component";
import {StringUtils} from "../../openaireLibrary/utils/string-utils.class";
import {EnvProperties} from "../../openaireLibrary/utils/properties/env-properties";
import {properties} from "../../../environments/environment";
import {Subscriber} from "rxjs";
@Component({
selector: 'manage-content-providers',
template: `
<remove-content-providers (toggleView)="toggleAction()" [communityContentProviders]="communityContentProviders"
[showLoading]="showLoadingInRemove"
(communityContentProvidersChanged)="communityContentProvidersChanged($event)" [toggle]="toggle">
</remove-content-providers>
<fs-modal #fsModal (cancelEmitter)="toggleAction()">
<div actions class="uk-flex uk-flex-middle uk-height-1-1">
<span class="uk-button uk-text-secondary" uk-icon="icon: info; ratio: 1.3"></span>
<div *ngIf="communityId" uk-drop="mode: hover">
<div class="uk-card uk-card-body uk-card-default">
If you cannot find a content provider relevant to your community, probably it is not OpenAIRE compliant.
Feel free to contact us
(<a
[href]="'mailto:' + properties.feedbackmailForMissingEntities +'?Subject=[OpenAIRE Connect - '+ communityId + '] report missing Funder' + '&body=' + body"
target="_top">{{properties.feedbackmailForMissingEntities}}</a>)
to let us know and we'll try to get the provider on board!
</div>
</div>
</div>
<add-content-providers [communityContentProviders]="communityContentProviders"
(communityContentProvidersChanged)="communityContentProvidersChanged($event)"></add-content-providers>
</fs-modal>
`
})
export class ManageContentProvidersComponent implements OnInit {
@Input() communityContentProviders = [];
@ViewChild(RemoveContentProvidersComponent) removeContentProvidersComponent: RemoveContentProvidersComponent;
@ViewChild('fsModal') fullscreen: FullScreenModalComponent;
public toggle: boolean = false;
private subscriptions: any[] = [];
public showLoadingInRemove: boolean = true;
public body: string = "Send from page";
public properties: EnvProperties = properties;
public communityId: string = "";
constructor(private element: ElementRef,
private title: Title,
private route: ActivatedRoute, private _router: Router) {
}
ngOnInit() {
this.subscriptions.push(this.route.params.subscribe(params => {
this.communityId = params['community'];
if (this.communityId) {
this.title.setTitle(this.communityId.toUpperCase() + ' | Content Providers');
this.body = "[Please write your message here]";
this.body = StringUtils.URIEncode(this.body);
}
}));
this.fullscreen.title = "Search and Add Content Providers";
this.fullscreen.okButtonText = "Done";
this.fullscreen.okButton = true;
}
public ngOnDestroy() {
this.subscriptions.forEach(sub => {
if (sub instanceof Subscriber) {
sub.unsubscribe();
}
});
}
public toggleAction() {
if (!Session.isLoggedIn()) {
this._router.navigate(['/user-info'], {
queryParams: {'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url}
});
} else {
HelperFunctions.scroll();
this.toggle = !this.toggle;
if (this.toggle) {
this.fullscreen.open();
}
}
}
public communityContentProvidersChanged($event) {
this.communityContentProviders = $event.value;
this.showLoadingInRemove = false;
if (this.toggle) {
this.removeContentProvidersComponent.applyFilters();
}
}
}

150
src/app/pages/content-providers/remove-content-providers.component.html Normal file
View File

@ -0,0 +1,150 @@
<div page-content>
<div header>
<community-info tab="content-providers"></community-info>
<div [class.uk-invisible]="showLoading"
class="uk-width-1-1 uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-grid" uk-grid>
<div class="uk-flex-last@m">
<a class="uk-text-uppercase uk-flex uk-flex-middle" (click)="addNew()"
[attr.uk-tooltip]="(toggle? 'cls: uk-invisible; ' : 'cls: uk-active; ') +
'title: <div class=\'uk-padding-small\'><div class=\'uk-margin-bottom uk-text-bold\'> Search and add more Content Providers</div><div>The research results collected from the content providers specified here will be automatically linked to your community dashboard.</div></div>'">
<button class="uk-icon-button large uk-button-secondary">
<icon name="add"></icon>
</button>
<button class="uk-button uk-button-link uk-margin-small-left uk-text-secondary">Add new content provider
</button>
</a>
</div>
<div #searchInputComponent search-input [control]="filterForm.controls.keyword" [showSearch]="false"
placeholder="Search Content Providers"
[selected]="communitySearchUtils.keyword" (closeEmitter)="onSearchClose()" (resetEmitter)="resetInput()"
[bordered]="true" colorClass="uk-text-secondary"
class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1"></div>
</div>
</div>
<div inner>
<div *ngIf="showLoading" class="uk-margin-large-top">
<loading></loading>
</div>
<div *ngIf="!showLoading">
<div>
<!-- <div class="uk-grid uk-flex uk-flex-middle uk-margin-medium-bottom" uk-grid>-->
<!-- <div *ngIf="previewCommunityContentProviders.length > 0"-->
<!-- class="uk-width-expand@m uk-width-1-1">-->
<!-- <div class="uk-flex-middle uk-flex-right@m uk-flex-center uk-grid">-->
<!-- <span class="">Sort by: </span>-->
<!-- <div class="uk-width-medium uk-padding-remove uk-margin-small-left" dashboard-input-->
<!-- [formInput]="filterForm.get('sort')"-->
<!-- type="select"-->
<!-- [options]="sortOptions">-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<no-load-paging *ngIf="previewCommunityContentProviders.length > 0" [type]="'content providers'"
(pageChange)="updatePage($event)"
[page]="page" [pageSize]="resultsPerPage"
[totalResults]="previewCommunityContentProviders.length">
</no-load-paging>
<div class="uk-margin-medium-top uk-margin-medium-bottom">
<div *ngIf="previewCommunityContentProviders.length == 0"
class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
<div>No content providers for {{name}}</div>
</div>
<div class="uk-card uk-card-default uk-text-small uk-margin-bottom"
*ngFor="let item of previewCommunityContentProviders.slice((page - 1)*resultsPerPage, page*resultsPerPage)">
<div class="uk-grid uk-grid-divider uk-padding" uk-grid>
<div class="uk-width-expand@m uk-width-1-1">
<div class="uk-padding-small uk-padding-remove-horizontal">
<!-- <h6 *ngIf="item.name || item.officialname || item.openaireId || item.selectioncriteria"-->
<!-- class="uk-margin-small-bottom">-->
<!-- <a *ngIf="item.openaireId"-->
<!-- target="_blank"-->
<!-- [href]="contentProviderUrl+item.openaireId">-->
<!-- <span *ngIf="item.name">{{item.name}}</span>-->
<!-- <span *ngIf="!item.name && item.officialname">{{item.officialname}}</span>-->
<!-- <span *ngIf="!item.name && !item.officialname">[no title available]</span>-->
<!-- <span class="custom-external custom-icon space"></span>-->
<!-- </a>-->
<!-- <span *ngIf="!item.openaireId">-->
<!-- <span *ngIf="item.name">{{item.name}}</span>-->
<!-- <span *ngIf="!item.name && item.officialname">{{item.officialname}}</span>-->
<!-- <span *ngIf="!item.name && !item.officialname">[no title available]</span>-->
<!-- </span>-->
<!-- </h6>-->
<!-- <h6 *ngIf="item.name || item.officialname || item.openaireId || item.selectioncriteria"-->
<!-- class="uk-margin-small-bottom">-->
<!-- <a *ngIf="item.openaireId"-->
<!-- target="_blank"-->
<!-- [href]="contentProviderUrl+item.openaireId">-->
<!-- <span *ngIf="item.name">{{item.name}}</span>-->
<!-- <span *ngIf="!item.name">[no title available]</span>-->
<!-- <span class="custom-external custom-icon space"></span>-->
<!-- </a>-->
<!-- <span *ngIf="!item.openaireId">-->
<!-- <span *ngIf="item.name">{{item.name}}</span>-->
<!-- <span *ngIf="!item.name">[no title available]</span>-->
<!-- </span>-->
<!-- </h6>-->
<h6 class="uk-margin-small-bottom">
<a *ngIf="item.openaireId"
target="_blank"
[href]="contentProviderUrl+item.openaireId">
<span *ngIf="item.officialname">{{item.officialname}}</span>
<span *ngIf="!item.officialname && item.name">{{item.name}}</span>
<span *ngIf="!item.officialname && !item.name">[no title available]</span>
<span class="custom-external custom-icon space"></span>
</a>
<span *ngIf="!item.openaireId">
<span *ngIf="item.officialname">{{item.officialname}}</span>
<span *ngIf="!item.officialname && item.name">{{item.name}}</span>
<span *ngIf="!item.officialname && !item.name">[no title available]</span>
</span>
</h6>
<!-- <div *ngIf="item.name && item.officialname" class="uk-margin-small-bottom">-->
<!-- <div *ngIf="item.officialname" class="uk-margin-small-bottom">-->
<!-- <span class="title">Official Name: </span>-->
<!-- <span>{{item.officialname}}</span>-->
<!-- </div>-->
<div *ngIf="item.selectioncriteria?.criteria?.length > 0" class="uk-margin-small-bottom">
<div class="title uk-margin-small-bottom">Filters</div>
<div [innerHTML]="getFiltersAsText(item.selectioncriteria.criteria)"></div>
<a *ngIf="item.selectioncriteria.criteria.length > 3" class="uk-link uk-margin-top" [routerLink]="'./' + item.openaireId">View all {{item.selectioncriteria.criteria.length}} filters</a>
</div>
</div>
</div>
<div class="uk-width-auto@m uk-width-1-1">
<div class="uk-flex uk-flex-middle uk-flex-center uk-flex-column uk-height-1-1">
<div class="uk-padding-small uk-padding-remove-horizontal">
<a (click)="goToCriteria(item.openaireId)" class="uk-button action uk-flex uk-flex-middle">
<icon name="edit"></icon>
<span *ngIf="item.selectioncriteria?.criteria?.length > 0" class="uk-margin-small-left"
uk-tooltip="<div class='uk-padding-small'>Edit filters to limit research results.<br>Results which satisfy any of the selected filters will be included in your community.</div>">
Edit filters
</span>
<span *ngIf="!(item.selectioncriteria?.criteria?.length > 0)" class="uk-margin-small-left"
uk-tooltip="<div class='uk-padding-small'>Add filter to limit research results.<br>Results which satisfy any of the selected filters will be included in your community.</div>">
Add filters
</span>
</a>
<a (click)="removeContentProvider(item)"
class="uk-button action uk-flex uk-flex-middle uk-margin-small-top">
<icon name="remove_circle_outline"></icon>
<span class="uk-margin-small-left">Remove content provider</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<no-load-paging *ngIf="previewCommunityContentProviders.length > 0" [type]="'content providers'"
(pageChange)="updatePage($event)"
[page]="page" [pageSize]="resultsPerPage"
[totalResults]="previewCommunityContentProviders.length">
</no-load-paging>
</div>
</div>
<modal-alert #AlertModalDeleteCommunity (alertOutput)="confirmedDeleteContentProvider($event)"></modal-alert>
</div>
</div>

386
src/app/pages/content-providers/remove-content-providers.component.ts Normal file
View File

@ -0,0 +1,386 @@
import {Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from "@angular/router";
import {Subscriber} from 'rxjs';
import {ErrorCodes} from '../../openaireLibrary/utils/properties/errorCodes';
import {SearchUtilsClass} from '../../openaireLibrary/searchPages/searchUtils/searchUtils.class';
import {EnvProperties} from '../../openaireLibrary/utils/properties/env-properties';
import {ManageCommunityContentProvidersService} from '../../services/manageContentProviders.service';
import {SearchCommunityDataprovidersService} from '../../openaireLibrary/connect/contentProviders/searchDataproviders.service';
import {RouterHelper} from '../../openaireLibrary/utils/routerHelper.class';
import {Session} from '../../openaireLibrary/login/utils/helper.class';
import {LoginErrorCodes} from '../../openaireLibrary/login/utils/guardHelper.class';
import {Criteria, SelectionCriteria} from '../../openaireLibrary/utils/entities/contentProvider';
import {properties} from "../../../environments/environment";
import {SearchInputComponent} from "../../openaireLibrary/sharedComponents/search-input/search-input.component";
import {FormBuilder, FormGroup} from "@angular/forms";
import {Option} from "../../openaireLibrary/sharedComponents/input/input.component";
import {CommunityService} from "../../openaireLibrary/connect/community/community.service";
import {CriteriaUtils} from "./criteria-utils";
declare var UIkit;
@Component({
selector: 'remove-content-providers',
templateUrl: './remove-content-providers.component.html'
})
export class RemoveContentProvidersComponent implements OnInit {
public portal: string;
public name: string;
public routerHelper: RouterHelper = new RouterHelper();
public contentProviderUrl = "https://" + ((properties.environment == "beta" || properties.environment == "development") ? "beta." : "") + "explore.openaire.eu" + properties.searchLinkToDataProvider;
public previewCommunityContentProviders = [];
public communitySearchUtils: SearchUtilsClass = new SearchUtilsClass();
public errorCodes: ErrorCodes;
@Input() public showLoading: boolean = true;
@Input() public communityContentProviders = [];
@Output() communityContentProvidersChanged = new EventEmitter();
private properties: EnvProperties = properties;
private subscriptions: any[] = [];
private selectedCommunityContentProvider: any;
@ViewChild('AlertModalDeleteCommunity') alertModalDeleteCommunity;
/** Criteria */
private fields = CriteriaUtils.fields;
private verbs = CriteriaUtils.verbs;
/** Paging */
page: number = 1;
resultsPerPage: number = properties.resultsPerPage;
/** Search */
@ViewChild('searchInputComponent') searchInputComponent: SearchInputComponent;
filterForm: FormGroup;
private searchText: RegExp = new RegExp('');
public keyword: string = '';
sortOptions: Option[] = [
{label: "Name ", value: {sort: "name", descending: false}},
{label: "Official Name ", value: {sort: "officialname", descending: false}}
];
@Output() toggleView: EventEmitter<any> = new EventEmitter();
@Input() public toggle: boolean = true;
constructor(private route: ActivatedRoute, private _router: Router,
private _fb: FormBuilder, private communityService: CommunityService,
private _manageCommunityContentProvidersService: ManageCommunityContentProvidersService,
private _searchCommunityContentProvidersService: SearchCommunityDataprovidersService) {
this.errorCodes = new ErrorCodes();
this.communitySearchUtils.status = this.errorCodes.LOADING;
}
ngOnInit() {
this.communitySearchUtils.keyword = "";
this.filterForm = this._fb.group({
keyword: [''],
// sort: this._fb.control(this.sortOptions[0].value)
});
this.subscriptions.push(this.filterForm.get('keyword').valueChanges.subscribe(value => {
this.searchText = new RegExp(value, 'i');
this.page = 1;
this.applyFilters();
}));
// this.subscriptions.push(this.filterForm.get('sort').valueChanges.subscribe(value => {
// this.page = 1;
// this.sort();
// }));
this.subscriptions.push(this.communityService.getCommunityAsObservable().subscribe(community => {
if (community) {
this.portal = community.communityId;
this.name = community.shortTitle;
this.contentProviderUrl = "https://"
+ ((this.properties.environment == "beta" || this.properties.environment == "development") ? "beta." : "")
+ this.portal + ".openaire.eu" + this.properties.searchLinkToDataProvider;
this.keyword = '';
this._getCommunityContentProviders();
}
}));
}
public ngOnDestroy() {
this.subscriptions.forEach(sub => {
if (sub instanceof Subscriber) {
sub.unsubscribe();
}
});
}
public getCriteriaLabel(selectionCriteria: SelectionCriteria): string {
if (selectionCriteria && selectionCriteria.criteria.length > 0) {
return (selectionCriteria.criteria.length === 1) ? '1 criterion' : (selectionCriteria.criteria.length + ' criteria')
} else {
return 'no criteria';
}
}
// filterData(row: any, query: string) {
// let returnValue: boolean = false;
//
// if(query) {
// for(var i=0; i <2; i++){
// var r= this.filterQuery(row[i], query);
// if(r) {
// returnValue = true;
// break;
// }
// }
//
// if(!returnValue) {
// return false;
// }
// }
//
// return true;
// }
//
// filterQuery(data, query){
// if(data.toLowerCase().indexOf(query.toLowerCase()) > -1){
// return true;
// }else{
// return false;
// }
// }
public inCommunity(result: any): any {
let found = false;
for (let contentProvider of this.communityContentProviders) {
if (contentProvider.opeaireId == result.id) {
return true;
}
}
return found;
}
totalPages(): number {
let totalPages: any = this.communitySearchUtils.totalResults / (this.resultsPerPage);
if (!(Number.isInteger(totalPages))) {
totalPages = (parseInt(totalPages, 10) + 1);
}
return totalPages;
}
getFiltersAsText(criteria: Criteria[]): string {
let text = criteria.slice(0,3).map((criterion, index) => (index + 1) + ". " + criterion.constraint.map(constraint => {
let field = this.fields.find(field => field.value === constraint.field).label;
let matchCase = false;
if(!constraint.verb.includes('_caseinsensitive')) {
matchCase = true;
}
let verb = this.verbs.find(verb => verb.value === constraint.verb.replace("_caseinsensitive", "")).label;
let value = '"' + constraint.value + '"' + (matchCase?" (Match case)":"");
return field + " " + verb + " " + value;
}).join(" <b>and</b> "));
return text.join("<br>");
}
// goTo(page:number = 1){
// this.communitySearchUtils.page=page;
//
// var table = $('#dpTable').DataTable();
// table.page( page - 1 ).draw( false );
//
// var info = table.page.info();
// this.communitySearchUtils.totalResults = info.recordsDisplay;
// }
public confirmedDeleteContentProvider(data: any) {
if (!Session.isLoggedIn()) {
this._router.navigate(['/user-info'], {
queryParams: {
"errorCode": LoginErrorCodes.NOT_VALID,
"redirectUrl": this._router.url
}
});
} else {
this.subscriptions.push(this._manageCommunityContentProvidersService.removeContentProvider(this.properties, this.portal, this.selectedCommunityContentProvider.id).subscribe(
data => {
let index = this.communityContentProviders.indexOf(this.selectedCommunityContentProvider);
this.communityContentProviders.splice(index, 1);
this.applyFilters();
UIkit.notification('Content Provider successfully removed!', {
status: 'success',
timeout: 6000,
pos: 'bottom-right'
});
this.communityContentProvidersChanged.emit({
value: this.communityContentProviders,
});
this.communitySearchUtils.totalResults--;
this.communitySearchUtils.page = 1;
},
err => {
this.handleError('An error has been occurred. Try again later!');
console.error(err);
}
));
}
}
public removeContentProvider(communityContentProvider: any) {
if (!Session.isLoggedIn()) {
this._router.navigate(['/user-info'], {
queryParams: {
"errorCode": LoginErrorCodes.NOT_VALID,
"redirectUrl": this._router.url
}
});
} else {
this.selectedCommunityContentProvider = communityContentProvider;
this.alertModalDeleteCommunity.cancelButton = true;
this.alertModalDeleteCommunity.okButton = true;
this.alertModalDeleteCommunity.alertTitle = "Remove content provider?";
let title = "";
if (communityContentProvider.name) {
title = communityContentProvider.name;
}
if (communityContentProvider.name && communityContentProvider.acronym) {
title += " (";
}
if (communityContentProvider.acronym) {
title += communityContentProvider.acronym;
}
if (communityContentProvider.name && communityContentProvider.acronym) {
title += ")";
}
this.alertModalDeleteCommunity.message = "Content Provider";
if (title) {
this.alertModalDeleteCommunity.message += " '" + title + "' ";
}
this.alertModalDeleteCommunity.message += "will be removed from your community. Are you sure?";
this.alertModalDeleteCommunity.okButtonText = "Yes";
this.alertModalDeleteCommunity.open();
}
}
public _getCommunityContentProviders() {
if (!Session.isLoggedIn()) {
this._router.navigate(['/user-info'], {
queryParams: {
"errorCode": LoginErrorCodes.NOT_VALID,
"redirectUrl": this._router.url
}
});
} else {
this.communitySearchUtils.status = this.errorCodes.LOADING;
this.communityContentProviders = [];
this.communitySearchUtils.totalResults = 0;
this.communitySearchUtils.page = 1;
this.communitySearchUtils.keyword = "";
this.subscriptions.push(this._searchCommunityContentProvidersService.searchDataproviders(this.properties, this.portal).subscribe(
data => {
this.communityContentProviders = data;
this.previewCommunityContentProviders = this.communityContentProviders;
// this.sort();
this.communitySearchUtils.totalResults = data.length;
this.communitySearchUtils.status = this.errorCodes.DONE;
this.communityContentProvidersChanged.emit({
value: this.communityContentProviders,
});
this.showLoading = false;
},
err => {
console.error(err);
//TODO check erros (service not available, bad request)
if (err.status == '404') {
this.communitySearchUtils.status = this.errorCodes.NOT_FOUND;
} else if (err.status == '500') {
this.communitySearchUtils.status = this.errorCodes.ERROR;
} else {
this.communitySearchUtils.status = this.errorCodes.NOT_AVAILABLE;
}
this.showLoading = false;
}
));
}
}
public updatePage($event) {
this.page = $event.value;
}
addNew() {
this.toggleView.emit(null);
}
public applyFilters() {
this.previewCommunityContentProviders = this.communityContentProviders.filter(contentProvider => {
return this.filterCommunityContentProviderByKeyword(contentProvider);
});
// check paging here!!!
if (this.previewCommunityContentProviders.slice((this.page - 1) * this.resultsPerPage, this.page * this.resultsPerPage).length == 0) {
this.page = 1;
}
// this.sort();
}
public filterCommunityContentProviderByKeyword(contentProvider): boolean {
const textFlag = this.searchText.toString() === ''
|| (contentProvider.name + " " + contentProvider.officialname).match(this.searchText) != null;
return textFlag;
}
private sort() {
let sortOption: { sort: string, descending: boolean } = this.filterForm.get('sort').value;
this.previewCommunityContentProviders.sort((left, right): number => {
if (sortOption.sort == "name") {
if (left.name > right.name) {
return sortOption.descending ? -1 : 1;
} else if (left.name < right.name) {
return sortOption.descending ? 1 : -1;
}
} else if (sortOption.sort == "officialname") {
if (left.officialname > right.officialname) {
return sortOption.descending ? -1 : 1;
} else if (left.officialname < right.officialname) {
return sortOption.descending ? 1 : -1;
}
}
return 0;
});
}
public onSearchClose() {
this.communitySearchUtils.keyword = this.filterForm.get('keyword').value;
}
public resetInput() {
this.communitySearchUtils.keyword = null;
this.searchInputComponent.reset()
}
handleError(message: string) {
UIkit.notification(message, {
status: 'danger',
timeout: 6000,
pos: 'bottom-right'
});
}
goToCriteria(openaireId: string) {
this._router.navigate([openaireId], {
queryParams: {
// community: this.portal,
// provider: openaireId
},
relativeTo: this.route
})
}
}

14
src/app/pages/curator/curator-routing.module.ts
View File

@ -1,14 +0,0 @@
import { NgModule } from '@angular/core';
import {RouterModule} from '@angular/router';
import {CuratorComponent} from './curator.component';
import {IsCommunity} from '../../openaireLibrary/connect/communityGuard/isCommunity.guard';
import {ConnectAdminLoginGuard} from '../../openaireLibrary/connect/communityGuard/connectAdminLoginGuard.guard';
@NgModule({
imports: [
RouterModule.forChild([
{ path: '', canActivate: [IsCommunity, ConnectAdminLoginGuard], component: CuratorComponent}
])
]
})
export class CuratorRoutingModule { }

119
src/app/pages/curator/curator.component.html
View File

@ -1,119 +0,0 @@
<ng-template #buttons>
<!--<a class="portal-link uk-margin-small-right" (click)="privacy()">Privacy policy statement</a>-->
<button class="uk-button uk-margin-small-right" (click)="resetMessages(); resetForm()">Cancel</button>
<button *ngIf="enabled && (hasChanged || affiliationsChanged)" class="uk-button uk-button-primary" (click)="resetMessages(); updateCurator()">Save</button>
<button *ngIf="!enabled || (!hasChanged && !affiliationsChanged)" class="uk-button uk-button-default" disabled>Save</button>
</ng-template>
<div class="uk-padding uk-padding-remove-top uk-text-large uk-text-center uk-width">Manage Personal Info</div>
<div class="uk-margin-large-bottom uk-flex uk-grid-divider" uk-grid>
<div *ngIf="showLoading" class="uk-animation-fade uk-width-1-1" role="alert">
<span class="loading-gif uk-align-center"></span>
</div>
<div *ngIf="curatorId != null && curator != null && !showLoading" class="uk-width-1-1 uk-margin-left">
<div class="uk-alert uk-alert-primary uk-flex uk-flex-middle">
<span class="uk-icon uk-margin-small-right" uk-icon="info"></span>
<div>
Your personal info will be visible in the Curators' page of your Community Gateway.
Read <a (click)="privacy()">privacy policy statement</a>.<br>
<span *ngIf="!newCurator && !curatorsEnabled">
Curators' page is disabled. Please enable it <a routerLink="/pages" routerLinkActive="router-link-active" [queryParams]="{communityId: communityId, type: 'other'}">here</a>.
</span>
</div>
</div>
</div>
<table *ngIf="curatorId != null && curator != null && !showLoading" class="uk-width-1-2@m uk-width-1-1@s uk-align-center">
<tbody class="uk-table uk-align-center">
<tr *ngIf="curator.name != null">
<td for="name" class="uk-text-bold uk-text-right">
Name
<span class="uk-text-danger uk-text-bold">
*
</span>
:
</td>
<td class="uk-text-left uk-width-1-1">
<div *ngIf="!curator.name || curator.name === ''" class=" uk-text-danger uk-text-small style=display:none"> Please add name. </div>
<input type="text"
class="form-control uk-input" id="name"
[(ngModel)]="curator.name" (input)="resetMessages(); onNameChange()" #name="ngModel" required>
</td>
</tr>
<tr *ngIf="photo != null">
<td for="photo" class="uk-text-bold uk-align-right">Photo:</td>
<td class="uk-text-left">
<div class="uk-flex uk-flex-middle" uk-grid>
<div class="uk-width-auto@l">
<img class="uk-border-circle curator-photo" src="{{photo}}" alt="Curator Photo">
</div>
<div class="uk-width-expand@l uk-grid-margin-small" uk-grid>
<div uk-form-custom class="uk-width-auto">
<input id="photo" type="file" (change)="fileChangeEvent($event)" (input)="resetMessages(); change()"/>
<button class="uk-button portal-button" type="button" tabindex="-1">
Upload a photo
</button>
</div>
<div *ngIf="photo !== 'assets/common-assets/curator-default.png'" class="uk-width-auto">
<button class="uk-button uk-button-danger" type="button" (click)="resetMessages(); removePhotoModal.open()">
Remove
</button>
</div>
</div>
</div>
<div class="uk-margin-small-top uk-text-warning">
Maximum photo resolution is 256x256 pixels.
</div>
</td>
</tr>
<tr *ngIf="curator.bio != null">
<td for="bio" class="uk-text-bold uk-text-right">Biography:</td>
<td class="uk-text-left">
<textarea placeholder={{curator.bio}} type="text"
class="form-control uk-textarea" rows="6"
id="bio"
[(ngModel)]="curator.bio"
(input)="resetMessages(); change()">
</textarea>
</td>
</tr>
<tr *ngIf="curator.bio != null">
<td class="uk-text-right"></td>
<td class="uk-text-left">
<div class="uk-text-danger uk-text-bold">
* Required fields
</div>
</td>
</tr>
<tr>
<td class="uk-text-right"></td>
<td>
<div *ngIf="updateErrorMessage" class="uk-alert uk-alert-danger" role="alert">{{updateErrorMessage}}</div>
<div *ngIf="successfulSaveMessage" class="uk-alert uk-alert-success" role="alert">{{successfulSaveMessage}}</div>
</tr>
</tbody>
</table>
<div *ngIf="curatorId != null && curator != null && !showLoading" class="uk-width-1-2@m uk-width-1-1@s">
<affiliations [curatorAffiliations]="true" [affiliations]="curator.affiliations"
(affiliationsChange)="affiliationsChanged = $event"
(resetCuratorMessages)="resetMessages();">
</affiliations>
</div>
</div>
<div class="uk-float-right uk-flex uk-flex-middle uk-visible@m" style="z-index: 100; bottom: 45px; position: fixed; right: 45px;">
<ng-container *ngTemplateOutlet="buttons"></ng-container>
</div>
<div class="uk-float-right uk-margin-bottom uk-hidden@m">
<ng-container *ngTemplateOutlet="buttons"></ng-container>
</div>
<modal-alert #removePhotoModal (alertOutput)="removePhoto()">
Your photo will be removed after you save your data. Are you sure you want to proceed?
</modal-alert>
<modal-alert #privacyStatement (alertOutput)="privacyStatement.cancel()">
<div class="">
Your personal data and photo are processed by OpenAIRE in conformity with personal data protection legal framework.
They will be stored safely in our system for as long as OpenAIRE exists. Since you press the "save" button,
you give us the consent to make them public in your Community Gateway to let users know who is
configuring the platform. You always have the right to exercise your rights and ask for access,
rectification, erasure and restriction of your data. Please contact <a href="mailto:rcd-helpdesk@openaire.eu">rcd-helpdesk@openaire.eu</a> if
you have any inquiries.
</div>
</modal-alert>

268
src/app/pages/curator/curator.component.ts
View File

@ -1,268 +0,0 @@
import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {EnvProperties} from '../../openaireLibrary/utils/properties/env-properties';
import {Session, User} from '../../openaireLibrary/login/utils/helper.class';
import {LoginErrorCodes} from '../../openaireLibrary/login/utils/guardHelper.class';
import {CuratorService} from '../../openaireLibrary/connect/curators/curator.service';
import {Curator} from '../../openaireLibrary/utils/entities/CuratorInfo';
import {HelperFunctions} from '../../openaireLibrary/utils/HelperFunctions.class';
import {UtilitiesService} from '../../openaireLibrary/services/utilities.service';
import {HelpContentService} from '../../services/help-content.service';
import {AlertModal} from '../../openaireLibrary/utils/modal/alert';
import {UserManagementService} from '../../openaireLibrary/services/user-management.service';
import {Title} from '@angular/platform-browser';
@Component({
selector: 'curator',
templateUrl: './curator.component.html',
})
export class CuratorComponent implements OnInit {
public showLoading = true;
public updateErrorMessage = '';
public successfulSaveMessage = '';
public curatorsEnabled = false;
public newCurator = false;
public communityId = null;
public affiliationsChanged = false;
public hasChanged = false;
public curatorId = null;
public curator: Curator = null;
public photo: any = null;
public properties: EnvProperties = null;
public user: User;
private file: File = null;
private maxsize: number = 200 * 1024;
public enabled = true;
private deletePhoto = false;
@ViewChild('privacyStatement') privacyStatement: AlertModal;
constructor(private element: ElementRef,
private route: ActivatedRoute,
private _router: Router,
private title: Title,
private curatorService: CuratorService,
private utilitiesService: UtilitiesService,
private helpContentService: HelpContentService,
private userManagementService: UserManagementService) {
}
ngOnInit() {
this.route.data.subscribe((data: { envSpecific: EnvProperties }) => {
this.properties = data.envSpecific;
if (!Session.isLoggedIn()) {
this._router.navigate(['/user-info'], {
queryParams: {'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url}
});
} else {
this.route.queryParams.subscribe((params) => {
this.communityId = params['communityId'];
this.title.setTitle('Administration Dashboard | Personal Info');
this.showLoading = true;
this.updateErrorMessage = '';
this.userManagementService.getUserInfo().subscribe(user => {
this.user = user;
if(this.user) {
this.curatorId = this.user.id;
this.getCurator();
}
});
});
}
});
}
public getCurator() {
this.curatorService.getCurator(this.properties, this.curatorId).subscribe(
curator => {
if (curator && Object.keys(curator).length > 0) {
this.curator = curator;
this.curator.email = this.user.email;
if (this.curator.photo && this.curator.photo !== '') {
this.photo = this.properties.utilsService + '/download/' + this.curator.photo;
} else {
this.photo = 'assets/common-assets/curator-default.png';
}
this.curatorsPageStatus();
this.showLoading = false;
HelperFunctions.scroll();
} else {
this.newCurator = true;
this.curator = new Curator();
this.curator._id = this.curatorId;
this.curator.email = this.user.email;
this.curator.name = this.user.fullname;
this.curator.affiliations = [];
this.curator.bio = '';
this.curator.photo = null;
this.photo = 'assets/common-assets/curator-default.png';
this.showLoading = false;
HelperFunctions.scroll();
}
},
error => {
}
);
}
public resetForm() {
if (!Session.isLoggedIn()) {
this._router.navigate(['/user-info'], {
queryParams:
{'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url}
});
} else {
if (this.curatorId != null && this.curatorId !== '') {
this.showLoading = true;
this.updateErrorMessage = '';
this.getCurator();
}
this.resetChange();
}
}
private curatorsPageStatus() {
this.curatorsEnabled = false;
this.helpContentService.getCommunityFull(this.communityId, this.properties.adminToolsAPIURL).subscribe((community) => {
for (let page of community.pages) {
if (page['route'] === '/curators') {
this.curatorsEnabled = page['isEnabled'];
return;
}
}
});
}
private change() {
this.hasChanged = true;
this.affiliationsChanged = true;
}
private resetChange() {
this.hasChanged = false;
this.affiliationsChanged = false;
}
public resetMessages() {
this.successfulSaveMessage = '';
this.updateErrorMessage = '';
}
handleUpdateError(message: string, error) {
this.resetMessages();
this.updateErrorMessage = message;
console.log('Server responded: ' + error);
this.showLoading = false;
}
handleSuccessfulSave(message) {
this.resetMessages();
this.showLoading = false;
HelperFunctions.scroll();
this.successfulSaveMessage = message;
}
fileChangeEvent(event) {
this.showLoading = true;
if (event.target.files && event.target.files[0]) {
this.file = event.target.files[0];
if (this.file.type !== 'image/png' && this.file.type !== 'image/jpeg') {
this.handleUpdateError('You must choose a file with type: image/png or image/jpeg!', null);
this.file = null;
} else if (this.file.size > this.maxsize) {
this.handleUpdateError('File exceeds size\'s limit! Maximum resolution is 256x256 pixels.', null);
this.file = null;
} else {
this.updateErrorMessage = '';
const reader = new FileReader();
reader.readAsDataURL(this.file);
reader.onload = () => {
this.photo = reader.result;
this.showLoading = false;
HelperFunctions.scroll();
};
}
}
}
saveCurator() {
this.curatorService.updateCurator(this.properties, this.curator).subscribe((curator) => {
if (curator) {
this.handleSuccessfulSave('Your data has been saved successfully!');
this.newCurator = false;
this.file = null;
this.deletePhoto = false;
this.resetChange();
}
},
error => {
this.handleUpdateError('An error has occurred. Try again later!', error);
this.resetChange();
});
}
updateCurator() {
if (!Session.isLoggedIn()) {
this._router.navigate(['/user-info'], {
queryParams:
{'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url}
});
} else {
if ((this.hasChanged || this.affiliationsChanged) && this.curator && this.curator.name && this.curator.name !== '') {
this.showLoading = true;
if (this.file) {
this.utilitiesService.uploadPhoto(this.properties.utilsService + '/upload/' + this.curator._id, this.file).subscribe((res) => {
if (this.curator.photo && this.curator.photo !== '') {
this.utilitiesService.deletePhoto(this.properties.utilsService + '/delete/' + this.curator.photo).subscribe();
}
this.curator.photo = res.filename;
this.saveCurator();
}, error => {
this.handleUpdateError('An error has occurred during photo uploading.', error);
}
);
} else {
if (this.deletePhoto) {
if(this.curator.photo && this.curator.photo != '') {
this.utilitiesService.deletePhoto(this.properties.utilsService + '/delete/' + this.curator.photo).subscribe();
this.curator.photo = '';
}
}
this.saveCurator();
}
}
}
}
onNameChange() {
this.hasChanged = true;
this.enabled = !(!this.curator.name || this.curator.name === '');
}
removePhoto() {
this.deletePhoto = true;
this.hasChanged = true;
this.file = null;
this.photo = 'assets/common-assets/curator-default.png';
}
privacy() {
this.privacyStatement.cancelButton = false;
this.privacyStatement.okButtonText = 'Close';
this.privacyStatement.alertTitle = 'Privacy policy statement';
this.privacyStatement.open();
}
}

32
src/app/pages/curator/curator.module.ts
View File

@ -1,32 +0,0 @@
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {FormsModule} from '@angular/forms';
import {RouterModule} from '@angular/router';
import {CuratorComponent} from './curator.component';
import {CuratorRoutingModule} from './curator-routing.module';
import {IsCommunity} from '../../openaireLibrary/connect/communityGuard/isCommunity.guard';
import {ConnectAdminLoginGuard} from '../../openaireLibrary/connect/communityGuard/connectAdminLoginGuard.guard';
import {CuratorService} from '../../openaireLibrary/connect/curators/curator.service';
import {AlertModalModule} from '../../openaireLibrary/utils/modal/alertModal.module';
import {UtilitiesService} from '../../openaireLibrary/services/utilities.service';
import {AffiliationsModule} from "../affiliations/affiliations.module";
@NgModule({
imports: [
CuratorRoutingModule, CommonModule, FormsModule, RouterModule,
AlertModalModule, AffiliationsModule
],
declarations: [
CuratorComponent
],
providers: [
CuratorService, UtilitiesService, IsCommunity, ConnectAdminLoginGuard
],
exports: [
CuratorComponent
]
})
export class CuratorModule { }

51
src/app/pages/customization/Border.component.ts
View File

@ -4,32 +4,41 @@ import {Component, EventEmitter, Input, OnInit, Output,} from '@angular/core';
@Component({
selector: 'border',
template: `
<div class="uk-grid uk-margin-remove">
<div class="uk-width-1-3 uk-margin-small-top uk-padding-remove-left"> Radius:</div>
<div class="uk-width-2-3 uk-padding-remove-left">
<input class="uk-input uk-width-small uk-margin-small-left" [(ngModel)]="radius" (ngModelChange)="borderChanged()" type="number" min="0" />
<div class="uk-grid uk-child-width-1-2" >
<div class="uk-margin-remove">
<div class="uk-text-bold uk-form-label uk-margin-small-bottom"> Border radius (px)</div>
<!-- <div class="uk-margin-bottom uk-form-hint ">hint</div>-->
<div class="input-box">
<input class="uk-input " [(ngModel)]="radius" (ngModelChange)="borderChanged()" type="number" min="0" />
</div>
</div>
</div>
<div class="uk-grid uk-margin-remove">
<div class="uk-width-1-3 uk-margin-small-top uk-padding-remove-left"> Width:</div>
<div class="uk-width-2-3 uk-padding-remove-left">
<input class="uk-input uk-width-small uk-margin-small-left" [(ngModel)]="width" (ngModelChange)="borderChanged()" type="number" min="0" />
<div class="uk-margin-remove">
<div class="uk-text-bold uk-form-label uk-margin-small-bottom"> Border width (px)</div>
<!-- <div class="uk-margin-bottom uk-form-hint "> hint</div>-->
<div class="input-box">
<input class="uk-input " [(ngModel)]="width" (ngModelChange)="borderChanged()" type="number" min="0" />
</div>
</div>
</div>
<div class="uk-grid uk-margin-remove">
<div class="uk-width-1-3 uk-margin-small-top uk-padding-remove-left"> Style:</div>
<div class="uk-width-2-3 uk-padding-remove-left">
<!-- <input class="uk-input uk-width-small uk-margin-small-left" [(ngModel)]="style" (ngModelChange)="borderChanged()"/>-->
<select [(ngModel)]="style" name="{{'select_type_'}}"
class="uk-select uk-width-small" (ngModelChange)="borderChanged()">
<option [value]="'solid'" >solid</option>
<option [value]="'dotted'" >dotted</option>
<option [value]="'dashed'" >dashed</option>
</select>
<div class="uk-margin-small-top">
<div class="uk-text-bold uk-form-label uk-margin-small-bottom"> Border style</div>
<!-- <div class="uk-margin-bottom uk-form-hint "> hint</div>-->
<div class="input-box ">
<mat-form-field class="uk-width-1-1">
<mat-select class="" [(ngModel)]="style" name="{{'select_type_'}}"
(ngModelChange)="borderChanged()"
[disableOptionCentering]="true"
panelClass="">
<mat-option [value]="'solid'" >solid</mat-option>
<mat-option [value]="'dotted'" >dotted</mat-option>
<mat-option [value]="'dashed'" >dashed</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
</div>
`
})

17
src/app/pages/customization/Color.component.ts
View File

@ -1,17 +1,19 @@
import {Component, EventEmitter, Input, OnInit, Output,} from '@angular/core';
import {CustomizationOptions} from '../../openaireLibrary/connect/community/CustomizationOptions';
@Component({
selector: 'color',
template: `
<div [class]="(addMargin?'uk-margin-small-top':'') + ' colorPicker'">
<div class="uk-grid uk-flex uk-flex-middle uk-remove-margin">
<div class="uk-width-2-3"> {{label}}:</div>
<div class="uk-width-1-3 uk-padding-remove-left">
<input class="uk-margin-small-left uk-width-small " color-picker [colorPicker]="color" [style.background]="color"
<div [class]="(addMargin?'uk-margin-small-top':'') + ' colorPicker uk-flex uk-flex-middle'">
<div class=" uk-flex">
<div class="">
<input id="colorPickerInput" class="uk-margin-small-left uk-width-small " color-picker [colorPicker]="color" [style.background]="color"
(colorPickerChange)="color=$event; colorChanged();"/>
</div>
<div class="uk-margin-small-left"> {{label}}</div>
</div>
<span class="uk-text-warning uk-text-small uk-margin-small-left" *ngIf="warningForContrast(color)">Contrast ratio may be too low.</span>
</div>
`
})
@ -21,7 +23,10 @@ export class ColorComponent implements OnInit {
@Input() label = 'Color';
@Input() addMargin: boolean = false;
@Output() colorChange = new EventEmitter();
@Input() light:boolean;
public warningForContrast(color:string){
return (this.light && CustomizationOptions.isForLightBackground(color)) || (!this.light && !CustomizationOptions.isForLightBackground(color));
}
constructor() {
}

149
src/app/pages/customization/background.component.ts Normal file
View File

@ -0,0 +1,149 @@
import {Component, Input, OnInit} from '@angular/core';
import {CustomizationOptions} from '../../openaireLibrary/connect/community/CustomizationOptions';
import {properties} from '../../../environments/environment';
import {UtilitiesService} from '../../openaireLibrary/services/utilities.service';
import {Subscription} from 'rxjs';
declare var UIkit;
@Component({
selector: 'background',
template: `
<color [color]="background.color"
[label]="label" [light]="light"
(colorChange)=
" background.color = $event;"></color>
<div *ngIf="upload" >
<input #file id="photo" type="file" class="uk-hidden" (change)="fileChangeEvent($event)"/>
<div *ngIf="!background.imageFile" class=" uk-width-1-1"
style="margin-top: 7px;">
<div class="uk-grid uk-flex uk-flex-middle" uk-grid>
<div class=" uk-width-1-1 uk-flex uk-flex-center">
<button class="uk-button uk-button-secondary uk-flex uk-flex-middle uk-flex-wrap"
(click)="file.click()">
<icon name="cloud_upload" [flex]="true"></icon>
<span class="uk-margin-small-left">Upload a file</span>
</button>
</div>
</div>
</div>
<div *ngIf="background.imageFile" class="uk-width-1-1 uk-flex uk-flex-middle">
<div class="uk-card uk-card-default uk-text-center ">
<img class="" [src]="background.imageFile.indexOf('data:')==-1?(properties.utilsService + '/download/'+background.imageFile):background.imageFile">
</div>
<div class="uk-margin-left">
<button (click)="removePhoto()" uk-tooltip="Remove" class="uk-button-secondary outlined uk-icon-button">
<icon name="remove"></icon>
</button>
</div>
<div class="uk-margin-small-left">
<button class="uk-button-secondary uk-icon-button" (click)="file.click()" uk-tooltip="Edit">
<icon name="edit"></icon>
</button>
</div>
</div>
</div>
`
})
export class BackgroundComponent implements OnInit {
@Input() label:string = "";
@Input() background;
@Input() oldBackground;
@Input() light:boolean;
@Input() upload:boolean = false;
@Input() communityId:string = "";
public file: File;
// public photo: string | ArrayBuffer;
private maxsize: number = 200 * 1024;
properties;
private subscriptions: any[] = [];
constructor(private utilsService: UtilitiesService) {
}
ngOnInit() {
this.properties = properties;
}
ngOnDestroy() {
this.subscriptions.forEach(subscription => {
if (subscription instanceof Subscription) {
subscription.unsubscribe();
}
});
}
removePhoto() {
if (typeof document != 'undefined') {
(<HTMLInputElement>document.getElementById("photo")).value = "";
}
// this.initPhoto();
console.log(this.background.imageFile + " " + this.oldBackground.imageFile)
if(this.background.imageFile != this.oldBackground.imageFile){
this.deletePhoto();
}
this.background.imageFile = null;
this.file = null;
}
public deletePhoto() {
console.log("deletePhoto")
if (this.background.imageFile) {
console.log("deletePhoto@@")
this.subscriptions.push(this.utilsService.deletePhoto(properties.utilsService + '/delete/stakeholder/' +this.background.imageFile).subscribe());
}
}
fileChangeEvent(event) {
if (event.target.files && event.target.files[0]) {
this.file = event.target.files[0];
if (this.file.type !== 'image/png' && this.file.type !== 'image/jpeg') {
UIkit.notification('You must choose a file with type: image/png or image/jpeg!', {
status: 'danger',
timeout: 6000,
pos: 'bottom-right'
});
this.removePhoto();
} else if (this.file.size > this.maxsize) {
UIkit.notification('File exceeds size\'s limit ('+this.maxsize/1024+'KB)! ', {
status: 'danger',
timeout: 6000,
pos: 'bottom-right'
});
this.removePhoto();
} else {
/*const reader = new FileReader();
reader.readAsDataURL(this.file);
reader.onload = () => {
this.background.imageFile = reader.result;
};*/
this.save();
}
}
}
public save() {
if (this.file) {
this.subscriptions.push(this.utilsService.uploadPhoto(this.properties.utilsService + "/upload/stakeholder/" + encodeURIComponent(this.communityId+"-"+this.label), this.file).subscribe(res => {
this.deletePhoto();
this.removePhoto();
this.background.imageFile = res.filename;
}, error => {
UIkit.notification("An error has been occurred during upload your image. Try again later", {
status: 'danger',
timeout: 6000,
pos: 'bottom-right'
});
}));
}
}
}

6
src/app/pages/customization/customization-routing.module.ts
View File

@ -1,13 +1,11 @@
import { NgModule } from '@angular/core';
import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';
import {CustomizationComponent} from './customization.component';
import {IsCommunity} from '../../openaireLibrary/connect/communityGuard/isCommunity.guard';
import {ConnectAdminLoginGuard} from '../../openaireLibrary/connect/communityGuard/connectAdminLoginGuard.guard';
@NgModule({
imports: [
RouterModule.forChild([
{ path: '', canActivate: [IsCommunity, ConnectAdminLoginGuard], component: CustomizationComponent}
{ path: '', component: CustomizationComponent}
])
]
})

867
src/app/pages/customization/customization.component.html
View File

@ -1,675 +1,214 @@
<ng-template #applyResetButtons>
<div class="uk-margin-small">
<button class="uk-button uk-button-small uk-button-primary"
<!-- <div class="uk-margin-small">-->
<button class="uk-float-right uk-button uk-margin-left uk-button-secondary "
[disabled]="!hasChanges(publishedCustomizationOptions, draftCustomizationOptions)"
[title]="(hasChanges(publishedCustomizationOptions, draftCustomizationOptions)?'Save changes':'No changes to save')"
(click)="saveLayout()">
Publish
</button>
<button class="uk-float-right uk-button uk-margin-left uk-button-secondary outlined" [disabled]="!hasChanges(publishedCustomizationOptions, draftCustomizationOptions)"
(click)="resetLayout()">
<span class="uk-icon"><svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
data-svg="refresh"><path fill="none" stroke="#000" stroke-width="1.1"
d="M17.08,11.15 C17.09,11.31 17.1,11.47 17.1,11.64 C17.1,15.53 13.94,18.69 10.05,18.69 C6.16,18.68 3,15.53 3,11.63 C3,7.74 6.16,4.58 10.05,4.58 C10.9,4.58 11.71,4.73 12.46,5"></path><polyline
fill="none" stroke="#000" points="9.9 2 12.79 4.89 9.79 7.9"></polyline></svg></span>
<span> Reset</span>
<span>Reset all</span>
</button>
<button class="uk-button uk-button-small uk-button-primary uk-float-right"
[disabled]="!hasChanges(draftCustomizationOptions, appliedCustomizationOptions)"
[title]="(hasChanges(draftCustomizationOptions, appliedCustomizationOptions)?'Apply changes to preview on the right':'No changes to apply')"
(click)="applyLayout();">Apply
</button>
</div>
</ng-template>
<div class="uk-grid uk-height-1-1">
<div class="uk-width-1-5 uk-background-muted customizationMenuPanel uk-padding-small ">
<div *ngIf="menuSelected == 'main'" class=" ">
<div class="uk-background-primary uk-padding-small uk-light">
<a class="uk-margin-right uk-link " (click)="exit();">
<span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
data-svg="close"><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>
</a>
<span> Customization</span>
</div>
<div class="uk-margin-small-top uk-alert uk-text-small uk-grid uk-margin-small-left uk-padding-small">
<div class="uk-padding-remove">Download the saved customization settings and upload a customization file:</div>
<div class="uk-width-1-2 uk-padding-remove"><a
(click)="downloadCustomization()" class="uk-link"
><span
uk-icon="icon: download; ratio:0.7"></span>Download </a>
</div>
<div class="js-upload uk-width-1-2 uk-text-right uk-float-right" uk-form-custom
>
<input id="exampleInputFile" class="uk-width-medium" type="file" (change)="fileChangeEvent($event)"/>
<span class="uk-link " style=""><span uk-icon="icon: upload; ratio:0.7"></span>Upload </span>
</div>
</div>
<div>{{errorMessage}}</div>
<div class="">
<div class="uk-h5 uk-margin-small-top">
Style
</div>
<div class="uk-padding-small customizationMenuItems">
<ul class="uk-list uk-list-divider">
<li><a (click)="menuSelected = 'backgrounds'">Backgrounds</a></li>
<li><a (click)="menuSelected = 'fonts'">Fonts</a></li>
<li><a (click)="menuSelected = 'elements'">Elements</a></li>
<li><a (click)="menuSelected = 'identity'">Identity</a></li>
<li><a (click)="menuSelected = 'buttons'">Buttons</a></li>
</ul>
</div>
<div class="uk-h5 uk-margin-small-top">
View
</div>
<div class="uk-padding-small customizationMenuItems">
<a [href]="previewUrl" target="_blank">Preview page</a>
</div>
<div class="uk-h5 uk-margin-small-top">
Go to
</div>
<div class="uk-padding-small customizationMenuItems">
<a [href]="getCommunityUrl()" target="_blank">Community Page</a>
</div>
</div>
</div>
<div *ngIf="menuSelected == 'backgrounds'" class=" ">
<div class="uk-background-primary uk-padding-small uk-light">
<a class="uk-margin-right uk-link " (click)="back();">
<span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
data-svg="arrow-left"><polyline fill="none" stroke="#000"
points="10 14 5 9.5 10 5"></polyline><line
fill="none" stroke="#000" x1="16" y1="9.5" x2="5" y2="9.52"></line></svg></span>
</a>
<span> Backgrounds</span>
</div>
<ng-container
*ngTemplateOutlet="applyResetButtons ; context: { }"></ng-container>
<div class="uk-alert uk-text-small uk-padding-small">
<span class="uk-icon"><svg width="14" height="14" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
data-svg="info"><path
d="M12.13,11.59 C11.97,12.84 10.35,14.12 9.1,14.16 C6.17,14.2 9.89,9.46 8.74,8.37 C9.3,8.16 10.62,7.83 10.62,8.81 C10.62,9.63 10.12,10.55 9.88,11.32 C8.66,15.16 12.13,11.15 12.14,11.18 C12.16,11.21 12.16,11.35 12.13,11.59 C12.08,11.95 12.16,11.35 12.13,11.59 L12.13,11.59 Z M11.56,5.67 C11.56,6.67 9.36,7.15 9.36,6.03 C9.36,5 11.56,4.54 11.56,5.67 L11.56,5.67 Z"></path><circle
fill="none" stroke="#000" stroke-width="1.1" cx="10" cy="10" r="9"></circle></svg></span>
Set the banner background color and which fonts to be used (for dark or light background).
</div>
<div class="uk-padding-small customizationMenuItems uk-margin-small">
<ul uk-accordion>
<li class="uk-open">
<a class="uk-accordion-title" href="#">Banners </a>
<div class="uk-accordion-content uk-margin-remove-top">
<!-- <div>Appereance</div>-->
<color [color]="draftCustomizationOptions.panel.background.color" label="Background color"
(colorChange)=
" draftCustomizationOptions.panel.background.color = $event;"></color>
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold">BUTTONS & LINKS</div>
<div class=" uk-grid-small uk-child-width-auto uk-grid">
<label><input [value]="true"
[(ngModel)]="draftCustomizationOptions.panel.onDarkBackground" name="true"
type="radio"/>
for dark background</label>
<label><input [value]="false"
[(ngModel)]="draftCustomizationOptions.panel.onDarkBackground" name="false"
type="radio"/> for light background</label>
</div>
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold">QUICK LOOK
<span class="uk-icon uk-link " (click)="resetBackgrounds()">
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
data-svg="refresh"><path fill="none" stroke="#000" stroke-width="1.1"
d="M17.08,11.15 C17.09,11.31 17.1,11.47 17.1,11.64 C17.1,15.53 13.94,18.69 10.05,18.69 C6.16,18.68 3,15.53 3,11.63 C3,7.74 6.16,4.58 10.05,4.58 C10.9,4.58 11.71,4.73 12.46,5"></path><polyline
fill="none" stroke="#000" points="9.9 2 12.79 4.89 9.79 7.9"></polyline></svg>
</span>
</div>
<div class="uk-padding-small uk-text-center"
[style.background-color]="draftCustomizationOptions.panel.background.color">
<div [style.color]="draftCustomizationOptions.panel.title.color"
[style.font-family]="draftCustomizationOptions.panel.title.family"
[style.font-size]="draftCustomizationOptions.panel.title.size+'px'"
[style.font-weight]="draftCustomizationOptions.panel.title.weight">Banner Big Text
</div>
<div [style.color]="draftCustomizationOptions.panel.fonts.color"
[style.font-family]="draftCustomizationOptions.panel.fonts.family"
[style.font-size]="draftCustomizationOptions.panel.fonts.size+'px'"
[style.font-weight]="draftCustomizationOptions.panel.fonts.weight">Banner Small Text
</div>
<div *ngIf="draftCustomizationOptions.panel.onDarkBackground">
<a class="" [style]="linkDarkBackgroundPreview"
(mouseover)="linkDarkBackgroundPreview=changeFontsStyle(draftCustomizationOptions.links.darkBackground, draftCustomizationOptions.links.darkBackground.onHover.color);"
(mouseout)="linkDarkBackgroundPreview=changeFontsStyle(draftCustomizationOptions.links.darkBackground, draftCustomizationOptions.links.darkBackground.color);">Link</a>
<br>
<a class="uk-button" [style]="buttonDarkBackgroundPreview"
(mouseover)="buttonDarkBackgroundPreview=changeStyle(draftCustomizationOptions.buttons.darkBackground.onHover, draftCustomizationOptions.buttons.darkBackground);"
(mouseout)="buttonDarkBackgroundPreview=changeStyle(draftCustomizationOptions.buttons.darkBackground);">Button</a>
</div>
<div *ngIf="!draftCustomizationOptions.panel.onDarkBackground">
<a class="" [style]="linkLightBackgroundPreview"
(mouseover)="linkLightBackgroundPreview=changeFontsStyle(draftCustomizationOptions.links.lightBackground,
draftCustomizationOptions.links.lightBackground.onHover.color);"
(mouseout)="linkLightBackgroundPreview=changeFontsStyle(draftCustomizationOptions.links.lightBackground, draftCustomizationOptions.links.lightBackground.color);">Link</a>
<br>
<a class="uk-button" [style]="buttonLightBackgroundPreview"
(mouseover)="buttonLightBackgroundPreview=changeStyle(draftCustomizationOptions.buttons.lightBackground.onHover, draftCustomizationOptions.buttons.lightBackground);"
(mouseout)="buttonLightBackgroundPreview=changeStyle(draftCustomizationOptions.buttons.lightBackground);">
Button</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div *ngIf="menuSelected == 'fonts'" class=" ">
<div class="uk-background-primary uk-padding-small uk-light">
<a class="uk-margin-right uk-link " (click)="back();">
<span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
data-svg="arrow-left"><polyline fill="none" stroke="#000"
points="10 14 5 9.5 10 5"></polyline><line
fill="none" stroke="#000" x1="16" y1="9.5" x2="5" y2="9.52"></line></svg></span>
</a>
<span> Fonts</span>
</div>
<ng-container
*ngTemplateOutlet="applyResetButtons ; context: { }"></ng-container>
<div class="uk-alert uk-text-small uk-padding-small">
<span class="uk-icon"><svg width="14" height="14" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
data-svg="info"><path
d="M12.13,11.59 C11.97,12.84 10.35,14.12 9.1,14.16 C6.17,14.2 9.89,9.46 8.74,8.37 C9.3,8.16 10.62,7.83 10.62,8.81 C10.62,9.63 10.12,10.55 9.88,11.32 C8.66,15.16 12.13,11.15 12.14,11.18 C12.16,11.21 12.16,11.35 12.13,11.59 C12.08,11.95 12.16,11.35 12.13,11.59 L12.13,11.59 Z M11.56,5.67 C11.56,6.67 9.36,7.15 9.36,6.03 C9.36,5 11.56,4.54 11.56,5.67 L11.56,5.67 Z"></path><circle
fill="none" stroke="#000" stroke-width="1.1" cx="10" cy="10" r="9"></circle></svg></span>
Customize the banner fonts, and the links for dark and light background
</div>
<div class="uk-padding-small customizationMenuItems uk-margin-small">
<ul uk-accordion>
<li class="uk-open">
<a class="uk-accordion-title" href="#">Banner Big Text</a>
<div class="uk-accordion-content uk-margin-remove-top">
<font-size [font]="draftCustomizationOptions.panel.title.family"
[size]="draftCustomizationOptions.panel.title.size"
[weight]="draftCustomizationOptions.panel.title.weight"
(fontChange)="draftCustomizationOptions.panel.title.family=$event.font;
draftCustomizationOptions.panel.title.size=$event.size;
draftCustomizationOptions.panel.title.weight=$event.weight"></font-size>
<color [color]="draftCustomizationOptions.panel.title.color"
(colorChange)=
" draftCustomizationOptions.panel.title.color = $event;" [addMargin]="true"></color>
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold">QUICK LOOK
<span class="uk-icon uk-link " (click)="resetFontsBig()">
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
data-svg="refresh"><path fill="none" stroke="#000" stroke-width="1.1"
d="M17.08,11.15 C17.09,11.31 17.1,11.47 17.1,11.64 C17.1,15.53 13.94,18.69 10.05,18.69 C6.16,18.68 3,15.53 3,11.63 C3,7.74 6.16,4.58 10.05,4.58 C10.9,4.58 11.71,4.73 12.46,5"></path><polyline
fill="none" stroke="#000" points="9.9 2 12.79 4.89 9.79 7.9"></polyline></svg>
</span>
</div>
<div class="uk-padding-small uk-text-center"
[style.background-color]="draftCustomizationOptions.panel.background.color">
<div [style.color]="draftCustomizationOptions.panel.title.color"
[style.font-family]="draftCustomizationOptions.panel.title.family"
[style.font-size]="draftCustomizationOptions.panel.title.size+'px'"
[style.font-weight]="draftCustomizationOptions.panel.title.weight">Banner Big Text
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="uk-padding-small customizationMenuItems uk-margin-small">
<ul uk-accordion>
<li>
<a class="uk-accordion-title" href="#">Banner Small Text</a>
<div class="uk-accordion-content uk-margin-remove-top">
<font-size [font]="draftCustomizationOptions.panel.fonts.family"
[size]="draftCustomizationOptions.panel.fonts.size"
[weight]="draftCustomizationOptions.panel.fonts.weight"
(fontChange)="draftCustomizationOptions.panel.fonts.family=$event.font;
draftCustomizationOptions.panel.fonts.size=$event.size;
draftCustomizationOptions.panel.fonts.weight=$event.weight"
></font-size>
<color [color]="draftCustomizationOptions.panel.fonts.color"
(colorChange)=
" draftCustomizationOptions.panel.fonts.color = $event;" [addMargin]="true"></color>
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold">QUICK LOOK
<span class="uk-icon uk-link " (click)="resetFontsSmall()">
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
data-svg="refresh"><path fill="none" stroke="#000" stroke-width="1.1"
d="M17.08,11.15 C17.09,11.31 17.1,11.47 17.1,11.64 C17.1,15.53 13.94,18.69 10.05,18.69 C6.16,18.68 3,15.53 3,11.63 C3,7.74 6.16,4.58 10.05,4.58 C10.9,4.58 11.71,4.73 12.46,5"></path><polyline
fill="none" stroke="#000" points="9.9 2 12.79 4.89 9.79 7.9"></polyline></svg>
</span>
</div>
<div class="uk-padding-small uk-text-center"
[style.background-color]="draftCustomizationOptions.panel.background.color">
<div [style.color]="draftCustomizationOptions.panel.fonts.color"
[style.font-family]="draftCustomizationOptions.panel.fonts.family"
[style.font-size]="draftCustomizationOptions.panel.fonts.size+'px'"
[style.font-weight]="draftCustomizationOptions.panel.fonts.weight">Banner Small Text
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="uk-padding-small customizationMenuItems uk-margin-small">
<ul uk-accordion>
<li>
<a class="uk-accordion-title" href="#">Links</a>
<div class="uk-accordion-content uk-margin-remove-top">
<ul class="uk-tab" uk-switcher>
<li><a href="#">On dark <br>background</a></li>
<li><a href="#">On light <br>background</a></li>
</ul>
<ul class="uk-switcher uk-margin">
<li>
<font-size [font]="draftCustomizationOptions.links.darkBackground.family"
[size]="draftCustomizationOptions.links.darkBackground.size"
[weight]="draftCustomizationOptions.links.darkBackground.weight"
(fontChange)="draftCustomizationOptions.links.darkBackground.family=$event.font;
draftCustomizationOptions.links.darkBackground.size=$event.size;
draftCustomizationOptions.links.darkBackground.weight=$event.weight; linkDarkBackgroundPreview=changeFontsStyle(draftCustomizationOptions.links.darkBackground, draftCustomizationOptions.links.darkBackground.color);"
></font-size>
<!-- <div>Appereance</div>-->
<color [color]="draftCustomizationOptions.links.darkBackground.color" (colorChange)=
" draftCustomizationOptions.links.darkBackground.color = $event; linkDarkBackgroundPreview =
changeFontsStyle(draftCustomizationOptions.links.darkBackground, draftCustomizationOptions.links.darkBackground.color)"></color>
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold">ON HOVER</div>
<color [color]="draftCustomizationOptions.links.darkBackground.onHover.color" (colorChange)=
" draftCustomizationOptions.links.darkBackground.onHover.color = $event;"></color>
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold">QUICK LOOK
<span class="uk-icon uk-link " (click)="resetFontsLinksDark();">
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
data-svg="refresh"><path fill="none" stroke="#000" stroke-width="1.1"
d="M17.08,11.15 C17.09,11.31 17.1,11.47 17.1,11.64 C17.1,15.53 13.94,18.69 10.05,18.69 C6.16,18.68 3,15.53 3,11.63 C3,7.74 6.16,4.58 10.05,4.58 C10.9,4.58 11.71,4.73 12.46,5"></path><polyline
fill="none" stroke="#000" points="9.9 2 12.79 4.89 9.79 7.9"></polyline></svg>
</span>
</div>
<div class="uk-padding-small uk-text-center uk-background-primary ">
<a class="" [style]="linkDarkBackgroundPreview"
(mouseover)="linkDarkBackgroundPreview=changeFontsStyle(draftCustomizationOptions.links.darkBackground, draftCustomizationOptions.links.darkBackground.onHover.color);"
(mouseout)="linkDarkBackgroundPreview=changeFontsStyle(draftCustomizationOptions.links.darkBackground, draftCustomizationOptions.links.darkBackground.color);">Link</a>
</div>
</li>
<li>
<!-- <div>Appereance</div>-->
<color [color]="draftCustomizationOptions.links.lightBackground.color" (colorChange)=
" draftCustomizationOptions.links.lightBackground.color = $event; linkLightBackgroundPreview=changeFontsStyle(draftCustomizationOptions.links.lightBackground, draftCustomizationOptions.links.lightBackground.color);"></color>
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold">ON HOVER</div>
<color [color]="draftCustomizationOptions.links.lightBackground.onHover.color" (colorChange)=
" draftCustomizationOptions.links.lightBackground.onHover.color = $event;"></color>
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold">QUICK LOOK
<span class="uk-icon uk-link " (click)="resetFontsLinksLight();">
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
data-svg="refresh"><path fill="none" stroke="#000" stroke-width="1.1"
d="M17.08,11.15 C17.09,11.31 17.1,11.47 17.1,11.64 C17.1,15.53 13.94,18.69 10.05,18.69 C6.16,18.68 3,15.53 3,11.63 C3,7.74 6.16,4.58 10.05,4.58 C10.9,4.58 11.71,4.73 12.46,5"></path><polyline
fill="none" stroke="#000" points="9.9 2 12.79 4.89 9.79 7.9"></polyline></svg>
</span>
</div>
<div class="uk-padding-small uk-text-center ">
<a class="" [style]="linkLightBackgroundPreview"
(mouseover)="linkLightBackgroundPreview=changeFontsStyle(draftCustomizationOptions.links.lightBackground,
draftCustomizationOptions.links.lightBackground.onHover.color);"
(mouseout)="linkLightBackgroundPreview=changeFontsStyle(draftCustomizationOptions.links.lightBackground, draftCustomizationOptions.links.lightBackground.color);">Link</a>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<div *ngIf="menuSelected == 'elements'" class=" ">
<div class="uk-background-primary uk-padding-small uk-light">
<a class="uk-margin-right uk-link " (click)="back();">
<span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
data-svg="arrow-left"><polyline fill="none" stroke="#000"
points="10 14 5 9.5 10 5"></polyline><line
fill="none" stroke="#000" x1="16" y1="9.5" x2="5" y2="9.52"></line></svg></span></a>
<span> Elements</span>
</div>
<ng-container
*ngTemplateOutlet="applyResetButtons ; context: { }"></ng-container>
<div class="uk-alert uk-text-small uk-padding-small">
<span class="uk-icon"><svg width="14" height="14" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
data-svg="info"><path
d="M12.13,11.59 C11.97,12.84 10.35,14.12 9.1,14.16 C6.17,14.2 9.89,9.46 8.74,8.37 C9.3,8.16 10.62,7.83 10.62,8.81 C10.62,9.63 10.12,10.55 9.88,11.32 C8.66,15.16 12.13,11.15 12.14,11.18 C12.16,11.21 12.16,11.35 12.13,11.59 C12.08,11.95 12.16,11.35 12.13,11.59 L12.13,11.59 Z M11.56,5.67 C11.56,6.67 9.36,7.15 9.36,6.03 C9.36,5 11.56,4.54 11.56,5.67 L11.56,5.67 Z"></path><circle
fill="none" stroke="#000" stroke-width="1.1" cx="10" cy="10" r="9"></circle></svg></span>
Customize the layout of dashboard elements.
</div>
<div class="uk-padding-small customizationMenuItems uk-margin-small">
<ul uk-accordion>
<li class="uk-open">
<a class="uk-accordion-title" href="#"> Subject tags & Statistics cubes</a>
<div class="uk-accordion-content uk-margin-remove-top">
<!-- <div>Appereance</div>-->
<color [color]="draftCustomizationOptions.panel.panelElements.backgroundColor" (colorChange)=
" draftCustomizationOptions.panel.panelElements.backgroundColor= $event;"
label="Background Color"></color>
<div class="uk-margin-small-top">FONTS</div>
<color [color]="draftCustomizationOptions.panel.panelElements.color" (colorChange)=
" draftCustomizationOptions.panel.panelElements.color= $event;"></color>
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold">QUICK LOOK
<span class="uk-icon uk-link " (click)="resetElements()">
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
data-svg="refresh"><path fill="none" stroke="#000" stroke-width="1.1"
d="M17.08,11.15 C17.09,11.31 17.1,11.47 17.1,11.64 C17.1,15.53 13.94,18.69 10.05,18.69 C6.16,18.68 3,15.53 3,11.63 C3,7.74 6.16,4.58 10.05,4.58 C10.9,4.58 11.71,4.73 12.46,5"></path><polyline
fill="none" stroke="#000" points="9.9 2 12.79 4.89 9.79 7.9"></polyline></svg>
</span>
</div>
<div class="uk-padding-small uk-text-center"
[style.background-color]="draftCustomizationOptions.panel.background.color">
<div class="uk-card uk-padding-small uk-margin-auto" style="width:100px; height:100px"
[style.background-color]="draftCustomizationOptions.panel.panelElements.backgroundColor"
[style.color]="draftCustomizationOptions.panel.panelElements.color">Statistics cube
</div>
<div class="uk-label uk-margin-top"
[style.background-color]="draftCustomizationOptions.panel.panelElements.backgroundColor"
[style.color]="draftCustomizationOptions.panel.panelElements.color">Subject tag
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div *ngIf="menuSelected == 'identity'" class=" ">
<div class="uk-background-primary uk-padding-small uk-light">
<a class="uk-margin-right uk-link " (click)="back();">
<span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
data-svg="arrow-left"><polyline fill="none" stroke="#000"
points="10 14 5 9.5 10 5"></polyline><line
fill="none" stroke="#000" x1="16" y1="9.5" x2="5" y2="9.52"></line></svg></span></a>
<span> Identity</span>
</div>
<ng-container
*ngTemplateOutlet="applyResetButtons ; context: { }"></ng-container>
<div class="uk-alert uk-text-small uk-padding-small">
<span class="uk-icon"><svg width="14" height="14" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
data-svg="info"><path
d="M12.13,11.59 C11.97,12.84 10.35,14.12 9.1,14.16 C6.17,14.2 9.89,9.46 8.74,8.37 C9.3,8.16 10.62,7.83 10.62,8.81 C10.62,9.63 10.12,10.55 9.88,11.32 C8.66,15.16 12.13,11.15 12.14,11.18 C12.16,11.21 12.16,11.35 12.13,11.59 C12.08,11.95 12.16,11.35 12.13,11.59 L12.13,11.59 Z M11.56,5.67 C11.56,6.67 9.36,7.15 9.36,6.03 C9.36,5 11.56,4.54 11.56,5.67 L11.56,5.67 Z"></path><circle
fill="none" stroke="#000" stroke-width="1.1" cx="10" cy="10" r="9"></circle></svg></span>
Identity colors are used in several spots in your community Dashboard. Check the <b>quick look</b> section!
</div>
<div class="uk-padding-small customizationMenuItems uk-margin-small">
<ul uk-accordion>
<li class="uk-open">
<a class="uk-accordion-title" href="#"> Identity Colors</a>
<div class="uk-accordion-content uk-margin-remove-top">
<!-- <div>Primary color</div>-->
<color [color]="draftCustomizationOptions.mainColor" (colorChange)=
" draftCustomizationOptions.mainColor= $event;" label="Primary color"></color>
<!-- <div class="uk-margin-small-top">Secondary color</div>-->
<color [color]="draftCustomizationOptions.secondaryColor" (colorChange)=
" draftCustomizationOptions.secondaryColor= $event;" label="Secondary color"></color>
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold">QUICK LOOK
<span class="uk-icon uk-link " (click)="resetIdentity(); ">
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
data-svg="refresh"><path fill="none" stroke="#000" stroke-width="1.1"
d="M17.08,11.15 C17.09,11.31 17.1,11.47 17.1,11.64 C17.1,15.53 13.94,18.69 10.05,18.69 C6.16,18.68 3,15.53 3,11.63 C3,7.74 6.16,4.58 10.05,4.58 C10.9,4.58 11.71,4.73 12.46,5"></path><polyline
fill="none" stroke="#000" points="9.9 2 12.79 4.89 9.79 7.9"></polyline></svg>
</span>
</div>
<div style="border-style: solid; border-width: 2px; border-radius: 6px;" class="uk-padding-small"
[style.border-color]="draftCustomizationOptions.mainColor">
<ul class="uk-pagination uk-flex-center" uk-margin="">
<li class="uk-first-column"><a><span class="uk-icon uk-pagination-previous"
uk-pagination-previous="">
<svg [style.color]="draftCustomizationOptions.mainColor" data-svg="pagination-previous" height="12"
viewBox="0 0 7 12" width="7"
xmlns="http://www.w3.org/2000/svg"><polyline fill="none" points="6 1 1 6 6 11" stroke="#000"
stroke-width="1.2"></polyline></svg></span></a></li>
<li><a [style.color]="(hoveredText ==
'page-1'?draftCustomizationOptions.mainColor:'inherit')"
(mouseover)="hoveredText ='page-1'" (mouseout)="hoveredText =''">1</a></li>
<li><a class="uk-active" [style.background-color]="draftCustomizationOptions.mainColor"
[style.color]="'white'">2</a></li>
<li><a [style.color]="(hoveredText ==
'page-3'?draftCustomizationOptions.mainColor:'inherit')"
(mouseover)="hoveredText ='page-3'" (mouseout)="hoveredText =''">3</a></li>
<li><a><span
class="uk-icon uk-pagination-next" uk-pagination-next=""><svg
[style.color]="draftCustomizationOptions.mainColor"
data-svg="pagination-next" height="12" viewBox="0 0 7 12" width="7"
xmlns="http://www.w3.org/2000/svg"><polyline fill="none" points="1 1 6 6 1 11" stroke="#000"
stroke-width="1.2"></polyline></svg></span></a></li>
</ul>
<hr [style.border-color]="draftCustomizationOptions.mainColor">
<ul class="uk-accordion" uk-accordion="">
<li class=""><a class="uk-accordion-title"
[style.border-color]="draftCustomizationOptions.mainColor"
[style.color]="(hoveredText ==
'accordion-1'?draftCustomizationOptions.secondaryColor:draftCustomizationOptions.mainColor)"
(mouseover)="hoveredText ='accordion-1'" (mouseout)="hoveredText =''">Item
1</a>
<div aria-hidden="true" class="uk-accordion-content" hidden="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
</li>
<li><a class="uk-accordion-title"
[style.border-color]="draftCustomizationOptions.mainColor" [style.color]="(hoveredText ==
'accordion-2'?draftCustomizationOptions.secondaryColor:draftCustomizationOptions.mainColor)"
(mouseover)="hoveredText ='accordion-2'" (mouseout)="hoveredText =''">Item
2</a>
<div aria-hidden="false" class="uk-accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
</li>
<li><a class="uk-accordion-title"
[style.border-color]="draftCustomizationOptions.mainColor" [style.color]="(hoveredText ==
'accordion-3'?draftCustomizationOptions.secondaryColor:draftCustomizationOptions.mainColor)"
(mouseover)="hoveredText ='accordion-3'" (mouseout)="hoveredText =''">Item 3</a>
<div aria-hidden="true" class="uk-accordion-content" hidden="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
</li>
</ul>
<hr [style.border-color]="draftCustomizationOptions.mainColor">
<ul class="uk-tab">
<li class="uk-active"><a [style.border-color]="draftCustomizationOptions.mainColor"
[style.color]="draftCustomizationOptions.mainColor">Active</a></li>
<li><a [style.border-color]="(hoveredText ==
'tab-2'?draftCustomizationOptions.secondaryColor:'')"
[style.color]="(hoveredText ==
'tab-2'?draftCustomizationOptions.secondaryColor:'inherit')"
(mouseover)="hoveredText ='tab-2'" (mouseout)="hoveredText =''">Item</a></li>
</ul>
<div [style.color]="draftCustomizationOptions.mainColor">Text in primary
color
</div>
<div [style.color]="draftCustomizationOptions.secondaryColor">Text in secondary
color
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div *ngIf="menuSelected == 'buttons'" class=" ">
<div class="uk-background-primary uk-padding-small uk-light">
<a class="uk-margin-right uk-link " (click)="back();">
<span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
data-svg="arrow-left"><polyline fill="none" stroke="#000"
points="10 14 5 9.5 10 5"></polyline><line
fill="none" stroke="#000" x1="16" y1="9.5" x2="5" y2="9.52"></line></svg></span></a>
<span> Buttons</span>
</div>
<ng-container
*ngTemplateOutlet="applyResetButtons ; context: { }"></ng-container>
<div class="uk-alert uk-text-small uk-padding-small">
<span class="uk-icon"><svg width="14" height="14" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
data-svg="info"><path
d="M12.13,11.59 C11.97,12.84 10.35,14.12 9.1,14.16 C6.17,14.2 9.89,9.46 8.74,8.37 C9.3,8.16 10.62,7.83 10.62,8.81 C10.62,9.63 10.12,10.55 9.88,11.32 C8.66,15.16 12.13,11.15 12.14,11.18 C12.16,11.21 12.16,11.35 12.13,11.59 C12.08,11.95 12.16,11.35 12.13,11.59 L12.13,11.59 Z M11.56,5.67 C11.56,6.67 9.36,7.15 9.36,6.03 C9.36,5 11.56,4.54 11.56,5.67 L11.56,5.67 Z"></path><circle
fill="none" stroke="#000" stroke-width="1.1" cx="10" cy="10" r="9"></circle></svg></span>
Customize the buttons for dark and light backgrounds
</div>
<div class="uk-padding-small customizationMenuItems uk-margin-small">
<ul uk-accordion>
<li class="uk-open">
<a class="uk-accordion-title" href="#">Buttons</a>
<div class="uk-accordion-content uk-margin-remove-top">
<ul class="uk-tab" uk-switcher>
<li><a href="#">On dark <br>background</a></li>
<li><a href="#">On light <br>background</a></li>
</ul>
<ul class="uk-switcher uk-margin">
<li>
<border [style]="draftCustomizationOptions.buttons.darkBackground.borderStyle" [width]=
"draftCustomizationOptions.buttons.darkBackground.borderWidth" [radius]=
"draftCustomizationOptions.buttons.darkBackground.borderRadius" (borderChange)=
" draftCustomizationOptions.buttons.darkBackground.borderStyle = $event.style;
draftCustomizationOptions.buttons.darkBackground.borderRadius = $event.radius;
draftCustomizationOptions.buttons.darkBackground.borderWidth = $event.width; buttonDarkBackgroundPreview=changeStyle(draftCustomizationOptions.buttons.darkBackground);"></border>
<color [color]="draftCustomizationOptions.buttons.darkBackground.color" (colorChange)=
" draftCustomizationOptions.buttons.darkBackground.color = $event; buttonDarkBackgroundPreview=changeStyle(draftCustomizationOptions.buttons.darkBackground);"
label="Fonts Color"
[addMargin]="true"></color>
<color [color]="draftCustomizationOptions.buttons.darkBackground.backgroundColor" (colorChange)=
" draftCustomizationOptions.buttons.darkBackground.backgroundColor = $event; buttonDarkBackgroundPreview=changeStyle(draftCustomizationOptions.buttons.darkBackground);"
label="Background Color" [addMargin]="true"></color>
<color [color]="draftCustomizationOptions.buttons.darkBackground.borderColor" (colorChange)=
" draftCustomizationOptions.buttons.darkBackground.borderColor = $event; buttonDarkBackgroundPreview=changeStyle(draftCustomizationOptions.buttons.darkBackground);"
label="Border Color"
[addMargin]="true"
></color>
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold">ON HOVER</div>
<color [color]="draftCustomizationOptions.buttons.darkBackground.onHover.color" (colorChange)=
" draftCustomizationOptions.buttons.darkBackground.onHover.color = $event;" label="Fonts Color"
></color>
<color [color]="draftCustomizationOptions.buttons.darkBackground.onHover.backgroundColor"
(colorChange)=
" draftCustomizationOptions.buttons.darkBackground.onHover.backgroundColor = $event;"
label="Background Color" [addMargin]="true"></color>
<color [color]="draftCustomizationOptions.buttons.darkBackground.onHover.borderColor" (colorChange)=
" draftCustomizationOptions.buttons.darkBackground.onHover.borderColor = $event;"
label="Border Color" [addMargin]="true"></color>
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold">QUICK LOOK
<span class="uk-icon uk-link " (click)="resetButtonsDark();">
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
data-svg="refresh"><path fill="none" stroke="#000" stroke-width="1.1"
d="M17.08,11.15 C17.09,11.31 17.1,11.47 17.1,11.64 C17.1,15.53 13.94,18.69 10.05,18.69 C6.16,18.68 3,15.53 3,11.63 C3,7.74 6.16,4.58 10.05,4.58 C10.9,4.58 11.71,4.73 12.46,5"></path><polyline
fill="none" stroke="#000" points="9.9 2 12.79 4.89 9.79 7.9"></polyline></svg>
</span>
</div>
<div class="uk-background-primary uk-padding-small uk-text-center">
<a class="uk-button" [style]="buttonDarkBackgroundPreview"
(mouseover)="buttonDarkBackgroundPreview=changeStyle(draftCustomizationOptions.buttons.darkBackground.onHover, draftCustomizationOptions.buttons.darkBackground);"
(mouseout)="buttonDarkBackgroundPreview=changeStyle(draftCustomizationOptions.buttons.darkBackground);">Button</a>
</div>
<!-- style="{color:green;} :hover { color: red; }"-->
</li>
<li>
<border [style]="draftCustomizationOptions.buttons.lightBackground.borderStyle" [width]=
"draftCustomizationOptions.buttons.lightBackground.borderWidth" [radius]=
"draftCustomizationOptions.buttons.lightBackground.borderRadius" (borderChange)=
" draftCustomizationOptions.buttons.lightBackground.borderStyle = $event.style;
draftCustomizationOptions.buttons.lightBackground.borderRadius = $event.radius;
draftCustomizationOptions.buttons.lightBackground.borderWidth = $event.width;
buttonLightBackgroundPreview=changeStyle(draftCustomizationOptions.buttons.lightBackground); "></border>
<color [color]="draftCustomizationOptions.buttons.lightBackground.color" (colorChange)=
" draftCustomizationOptions.buttons.lightBackground.color = $event; buttonLightBackgroundPreview=changeStyle(draftCustomizationOptions.buttons.lightBackground);"
label="Fonts Color"
[addMargin]="true"></color>
<color [color]="draftCustomizationOptions.buttons.lightBackground.backgroundColor" (colorChange)=
" draftCustomizationOptions.buttons.lightBackground.backgroundColor = $event; buttonLightBackgroundPreview=changeStyle(draftCustomizationOptions.buttons.lightBackground);"
label="Background Color" [addMargin]="true"></color>
<color [color]="draftCustomizationOptions.buttons.lightBackground.borderColor" (colorChange)=
" draftCustomizationOptions.buttons.lightBackground.borderColor = $event; buttonLightBackgroundPreview=changeStyle(draftCustomizationOptions.buttons.lightBackground);"
label="Border Color"
[addMargin]="true"
></color>
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold">ON HOVER</div>
<color [color]="draftCustomizationOptions.buttons.lightBackground.onHover.color" (colorChange)=
" draftCustomizationOptions.buttons.lightBackground.onHover.color = $event; " label="Fonts Color"
></color>
<color [color]="draftCustomizationOptions.buttons.lightBackground.onHover.backgroundColor"
(colorChange)=
" draftCustomizationOptions.buttons.lightBackground.onHover.backgroundColor = $event;"
label="Background Color" [addMargin]="true"></color>
<color [color]="draftCustomizationOptions.buttons.lightBackground.onHover.borderColor"
(colorChange)=
" draftCustomizationOptions.buttons.lightBackground.onHover.borderColor = $event;"
label="Border Color" [addMargin]="true"></color>
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold">QUICK LOOK
<span class="uk-icon uk-link " (click)="resetButtonsLight();">
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
data-svg="refresh"><path fill="none" stroke="#000" stroke-width="1.1"
d="M17.08,11.15 C17.09,11.31 17.1,11.47 17.1,11.64 C17.1,15.53 13.94,18.69 10.05,18.69 C6.16,18.68 3,15.53 3,11.63 C3,7.74 6.16,4.58 10.05,4.58 C10.9,4.58 11.71,4.73 12.46,5"></path><polyline
fill="none" stroke="#000" points="9.9 2 12.79 4.89 9.79 7.9"></polyline></svg>
</span>
</div>
<div class=" uk-padding-small uk-text-center">
<a class="uk-button" [style]="buttonLightBackgroundPreview"
(mouseover)="buttonLightBackgroundPreview=changeStyle(draftCustomizationOptions.buttons.lightBackground.onHover, draftCustomizationOptions.buttons.lightBackground);"
(mouseout)="buttonLightBackgroundPreview=changeStyle(draftCustomizationOptions.buttons.lightBackground);">
Button</a>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<div *ngIf="successfulSaveMessage.length > 0" class="uk-alert uk-alert-primary">{{successfulSaveMessage}}</div>
<div *ngIf="errorMessage.length > 0" class="uk-alert uk-alert-danger">{{errorMessage}}</div>
<button class="uk-button uk-margin uk-button-primary uk-button-small uk-align-right"
[disabled]="!hasChanges(publishedCustomizationOptions, draftCustomizationOptions)"
[title]="(hasChanges(publishedCustomizationOptions, draftCustomizationOptions)?'Save changes':'No changes to save')"
(click)="saveLayout()">
Publish
</button>
<div page-content class="admin-pages">
<div header>
</div>
<div class="uk-width-4-5 uk-padding-remove-left">
<!-- sandbox="allow-scripts allow-same-origin" -->
<iframe *ngIf="previewUrl" [src]="previewUrl" class="" width="100%" height="100%" ></iframe>
<div inner>
<div class="" >
<div *ngIf="draftCustomizationOptions" class="uk-card-default uk-card">
<div class = "uk-card-header" style="z-index: 2" uk-sticky="offset:100">
<div class = " uk-margin-small-top uk-margin-small-bottom">
<ng-container
*ngTemplateOutlet="applyResetButtons ; context: { }"></ng-container>
<div>Customization <span *ngIf="hasChanges(publishedCustomizationOptions, draftCustomizationOptions)">(Unsaved changes)</span></div>
</div>
</div>
<div class="uk-padding">
<ul class="uk-tab customTabs admin uk-flex uk-flex-center uk-flex-left@m" uk-tab >
<li [class.uk-active]="menuSelected === 'identity'"
uk-tooltip="title:<div class='uk-padding-small uk-width-large'><b>Identity colors</b> are used in several places in your community Dashboard and they are the default colors used for the backgrounds and buttons.</div>"
><a
(click)="menuSelected = 'identity'" ><span class="title">Identity</span></a></li>
<li [class.uk-active]="menuSelected === 'backgrounds'"><a (click)="menuSelected = 'backgrounds'"><span
class="title">Backgrounds & buttons
</span></a></li>
</ul>
<div *ngIf="menuSelected == 'backgrounds'" class=" uk-padding-small ">
<div class="customizationMenuItems uk-margin-small">
<div class="uk-grid">
<div class="uk-width-2-3@m uk-width-1-1@s">
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold"> Quick look
<!--<span class="uk-icon uk-link " (click)="resetBackgrounds()">
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
data-svg="refresh"><path fill="none" stroke="#000" stroke-width="1.1"
d="M17.08,11.15 C17.09,11.31 17.1,11.47 17.1,11.64 C17.1,15.53 13.94,18.69 10.05,18.69 C6.16,18.68 3,15.53 3,11.63 C3,7.74 6.16,4.58 10.05,4.58 C10.9,4.58 11.71,4.73 12.46,5"></path><polyline
fill="none" stroke="#000" points="9.9 2 12.79 4.89 9.79 7.9"></polyline></svg>
</span>-->
</div>
<quick-look-backgrounds [darkBackgroundColor]="draftCustomizationOptions.backgrounds.dark.color "
[lightBackgroundColor]="draftCustomizationOptions.backgrounds.light.color "
[primaryColor]="draftCustomizationOptions.identity.mainColor"
[secondaryColor]="draftCustomizationOptions.identity.secondaryColor"
[buttonsOnDark]="draftCustomizationOptions.buttons.darkBackground"
[buttonsOnLight]="draftCustomizationOptions.buttons.lightBackground"
></quick-look-backgrounds>
</div>
<div class="uk-width-1-3@m uk-width-1-1@s">
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold" >Backgrounds & Buttons
<a *ngIf="(hasChanges(publishedCustomizationOptions.backgrounds, draftCustomizationOptions.backgrounds)
|| hasChanges(publishedCustomizationOptions.buttons, draftCustomizationOptions.buttons) )
&& draftCustomizationOptions.backgroundsAndButtonsIsCustom"
(click)="resetBackgroundsAndButtonsToPublished();" class="uk-margin-small-left"
uk-tooltip="title:<div class='uk-padding-small uk-width-large'>Reset to previously saved options</div>"
> <icon name="reset"></icon></a>
</div>
<div class="uk-margin-top">
<span>Custom style </span>
<span >
<mat-slide-toggle class="uk-margin-large-left"
[checked]="draftCustomizationOptions.backgroundsAndButtonsIsCustom"
(change)="draftCustomizationOptions.backgroundsAndButtonsIsCustom=!draftCustomizationOptions.backgroundsAndButtonsIsCustom;
draftCustomizationOptions.backgroundsAndButtonsIsCustom?'':this.resetBackgroundsAndButtonsToDefault(); "
[attr.uk-tooltip]="'title:<div class=\'uk-padding-small uk-width-large\'>' +
(draftCustomizationOptions.backgroundsAndButtonsIsCustom?'Change to default values produced based on the identity colors':'Customize options for background and buttons')+'</div>'"
>
</mat-slide-toggle>
</span>
</div>
<div *ngIf="!draftCustomizationOptions.backgroundsAndButtonsIsCustom" class="uk-margin-top uk-text-small"
style="font-style: italic">
Backgrounds and buttons are set in the default values.
</div>
<div *ngIf="draftCustomizationOptions.backgroundsAndButtonsIsCustom" class=" uk-margin-large-top">
<div class="uk-margin-small-bottom uk-text-uppercase">Background Colors</div>
<background label="Dark" [background]="draftCustomizationOptions.backgrounds.dark"
[light]="false"></background>
<background label="Light" [background]="draftCustomizationOptions.backgrounds.light"
[light]="true"></background>
<background label="Form" [background]="draftCustomizationOptions.backgrounds.form"
[light]="true" [upload]="properties.environment == 'development'"
[oldBackground]="publishedCustomizationOptions.backgrounds.form" [communityId]="communityId"></background>
<div class="uk-margin-large-top uk-text-uppercase">Buttons </div>
<ul class="uk-tab" uk-switcher>
<li><a href="#">On dark background</a></li>
<li><a href="#">On light background</a></li>
</ul>
<ul class="uk-switcher uk-margin">
<li>
<customize-buttons
[buttons]="draftCustomizationOptions.buttons.darkBackground" [light]="true"
></customize-buttons>
</li>
<li>
<customize-buttons
[buttons]="draftCustomizationOptions.buttons.lightBackground" [light]="false"
></customize-buttons>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div *ngIf="menuSelected == 'identity'" class=" uk-padding-small ">
<div class=" customizationMenuItems uk-margin-small">
<div class="uk-grid">
<div class="uk-width-2-3@m uk-width-1-1@s">
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold">Quick look
</div>
<div style="border-radius: 6px;" class="uk-alert uk-padding-small">
<quick-look [primaryColor]="draftCustomizationOptions.identity.mainColor"
[secondaryColor]="draftCustomizationOptions.identity.secondaryColor" preview="identity"></quick-look>
</div>
</div>
<div class="uk-width-1-3@m uk-width-1-1@s">
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold" > Identity
<a *ngIf="hasChanges(publishedCustomizationOptions.identity, draftCustomizationOptions.identity) &&
draftCustomizationOptions.identityIsCustom" class="uk-margin-small-left"
uk-tooltip="title:<div class='uk-padding-small uk-width-large'>Reset to previously saved options</div>"
(click)="resetIdentityToPublished();"> <icon name="reset"></icon></a></div>
<div class="uk-margin-top">
<div class="">
<span>Custom style</span>
<mat-slide-toggle class="uk-margin-large-left"
[checked]="draftCustomizationOptions.identityIsCustom"
(change)="draftCustomizationOptions.identityIsCustom =
!draftCustomizationOptions.identityIsCustom;
draftCustomizationOptions.identityIsCustom?'':this.resetIdentityToDefault();"
[attr.uk-tooltip]="'title:<div class=\'uk-padding-small uk-width-large\'>' +
(draftCustomizationOptions.identityIsCustom?'Change to default identity values':'Customize identity colors')+'</div>'"
>
</mat-slide-toggle>
</div>
<div *ngIf="!draftCustomizationOptions.identityIsCustom" class="uk-margin-top uk-text-small"
style="font-style: italic">
Identity is set in the default values.
</div>
</div>
<div *ngIf="draftCustomizationOptions.identityIsCustom" class=" uk-margin-large-top">
<div class=" uk-margin-small-bottom uk-text-uppercase uk-margin-small-left">Colors</div>
<color [color]="draftCustomizationOptions.identity.mainColor" [light]="false" (colorChange)=
" draftCustomizationOptions.identity.mainColor= $event; updateBackgroundsAndButtonsBasedOnIdentity()"
label="Primary"></color>
<color [color]="draftCustomizationOptions.identity.secondaryColor" [light]="false" (colorChange)=
" draftCustomizationOptions.identity.secondaryColor= $event; updateBackgroundsAndButtonsBasedOnIdentity()" label="Secondary"></color>
</div>
</div>
</div>
</div>
</div>
<div class=" uk-padding-small ">
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold">Preview</div>
<div
class="uk-margin-medium-top uk-position-relative uk-width-1-1 uk-flex uk-flex-center">
<div *ngIf="hasChanges(draftCustomizationOptions, appliedCustomizationOptions)"
class=" uk-width-1-1 refresh-indicator" >
<div class="uk-position-relative uk-height-1-1">
<div class="uk-position-center uk-text-center clickable uk-h3" style="color:white"
(click)="applyLayout()">
<div>
<icon name="refresh" ratio="2.5"></icon>
</div>
<div class="uk-margin-medium-top">Style has been changed.</div>
<div class="uk-margin-top"> Click to refresh the view.</div>
</div>
</div>
</div>
<iframe *ngIf="previewUrl" [src]="previewUrl" class="uk-width-1-1 "
></iframe>
</div>
</div>
</div>
</div>
</div>
<modal-alert #backAlert (alertOutput)="resetToAppliedOptions()">
<div class="uk-text-bold uk-h5">If you leave that Page without applying or publishing, changes will be lost.</div>
<div> Are you sure that you want to proceed?</div>
</modal-alert>
</div>
</div>
<modal-alert #exitAlert (alertOutput)="exitCustomization()">
<div class="uk-text-bold uk-h5">If you leave that Page without applying or publishing, changes will be lost.</div>
<div> Are you sure that you want to proceed?</div>
</modal-alert>

444
src/app/pages/customization/customization.component.ts
View File

@ -1,83 +1,109 @@
import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {Component, ElementRef, OnInit} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {EnvProperties} from '../../openaireLibrary/utils/properties/env-properties';
import {Session} from '../../openaireLibrary/login/utils/helper.class';
import {LoginErrorCodes} from '../../openaireLibrary/login/utils/guardHelper.class';
import {Curator} from '../../openaireLibrary/utils/entities/CuratorInfo';
import {DomSanitizer, Title} from '@angular/platform-browser';
import {CustomizationOptions} from '../../openaireLibrary/connect/community/CustomizationOptions';
import {CustomizationOptions, Layout} from '../../openaireLibrary/connect/community/CustomizationOptions';
import {StringUtils} from '../../openaireLibrary/utils/string-utils.class';
import {LayoutService} from '../../openaireLibrary/services/layout.service';
import {AlertModal} from '../../openaireLibrary/utils/modal/alert';
import {properties} from '../../../environments/environment';
import {UtilitiesService} from '../../openaireLibrary/services/utilities.service';
import {Subscription} from 'rxjs';
declare var UIkit;
@Component({
selector: 'customization',
templateUrl: './customization.component.html',
styles:[`
.refresh-indicator {
background-color: rgba(0, 0, 0, 0.50);
border-radius: 4px;
position: absolute;
color: white;
}
iframe, .refresh-indicator{
height:900px;
}
`]
})
export class CustomizationComponent implements OnInit {
menuSelected = 'main';
menuSelected = 'identity';
color = 'white';
defaultCustomizationOptions:CustomizationOptions = new CustomizationOptions();
publishedLayout: Layout = null;
publishedCustomizationOptions: CustomizationOptions = null;
draftCustomizationOptions: CustomizationOptions = null;
appliedCustomizationOptions: CustomizationOptions = null;
previewUrl = null;
previewCustomization = null;
buttonDarkBackgroundPreview;
buttonLightBackgroundPreview;
linkDarkBackgroundPreview;
linkLightBackgroundPreview;
hoveredText;
public showLoading = true;
public errorMessage = '';
public successfulSaveMessage = '';
public communityId = null;
public properties: EnvProperties = null;
private subscriptions: any[] = [];
public enabled = true;
@ViewChild('backAlert') backAlert: AlertModal;
@ViewChild('exitAlert') exitAlert: AlertModal;
constructor(private element: ElementRef,
private route: ActivatedRoute,
private _router: Router,
private title: Title,
private sanitizer: DomSanitizer,
private layoutService: LayoutService) {
private layoutService: LayoutService,
private utilsService: UtilitiesService) {
}
ngOnDestroy() {
this.deleteDraftImages();
ngOnInit() {
this.route.data.subscribe((data: { envSpecific: EnvProperties }) => {
this.properties = data.envSpecific;
if (!Session.isLoggedIn()) {
this._router.navigate(['/user-info'], {
queryParams: {'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url}
});
} else {
this.route.queryParams.subscribe((params) => {
this.communityId = params['communityId'];
this.title.setTitle('Administration Dashboard | Customization');
this.showLoading = true;
this.errorMessage = '';
this.successfulSaveMessage = '';
this.layoutService.getLayout(this.properties, this.communityId).subscribe(layout => {
this.publishedCustomizationOptions = (layout?layout:new CustomizationOptions());
this.initializeCustomizationOptions(true);
}, error => {
this.publishedCustomizationOptions = new CustomizationOptions();
this.initializeCustomizationOptions(true);
this.errorMessage = "An error occured fetching customizations options"
});
});
}
cleanUp(){
this.subscriptions.forEach(subscription => {
if (subscription instanceof Subscription) {
subscription.unsubscribe();
}
});
}
ngOnInit() {
this.properties = properties;
if (!Session.isLoggedIn()) {
this._router.navigate(['/user-info'], {
queryParams: {'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url}
});
} else {
this.subscriptions.push(this.route.params.subscribe((params) => {
this.communityId = params['community'];
if(this.communityId == "covid-19"){
this.defaultCustomizationOptions= new CustomizationOptions(CustomizationOptions.getIdentity(this.communityId).mainColor,CustomizationOptions.getIdentity(this.communityId).secondaryColor);
}
this.title.setTitle('Administration Dashboard | Customization');
this.showLoading = true;
this.subscriptions.push(this.layoutService.getLayout(this.properties, this.communityId).subscribe(layout => {
this.publishedLayout = (layout?layout:new Layout(this.communityId,this.defaultCustomizationOptions));
this.publishedCustomizationOptions = (layout?CustomizationOptions.checkForObsoleteVersion(layout.layoutOptions,this.communityId):Object.assign({},this.defaultCustomizationOptions));
this.initializeCustomizationOptions(true);
}, error => {
this.publishedCustomizationOptions = new CustomizationOptions(CustomizationOptions.getIdentity(this.communityId).mainColor,CustomizationOptions.getIdentity(this.communityId).secondaryColor);
this.initializeCustomizationOptions(true);
UIkit.notification("An error occured fetching customizations options", {
status: 'danger',
timeout: 6000,
pos: 'bottom-right'
});
}));
}));
}
}
hasChanges(object1,object2):boolean{
@ -89,28 +115,54 @@ export class CustomizationComponent implements OnInit {
queryParams: {'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url}
});
}
this.layoutService.saveLayout(this.properties, this.communityId, this.draftCustomizationOptions).subscribe(layout => {
this.publishedCustomizationOptions = layout;
this.publishedLayout.layoutOptions = this.draftCustomizationOptions;
this.subscriptions.push(this.layoutService.saveLayout(this.properties, this.communityId, this.publishedLayout).subscribe(layout => {
this.deleteOldImages();
this.publishedLayout = layout;
this.publishedCustomizationOptions = layout.layoutOptions;
this.initializeCustomizationOptions(JSON.stringify(this.publishedCustomizationOptions) != this.previewCustomization);
this.successfulSaveMessage = "Customization Options saved!"
UIkit.notification("Customizations was succesfully saved!", {
status: 'success',
timeout: 6000,
pos: 'bottom-right'
});
}, error => {
this.errorMessage = "An error occured on save"
});
}
UIkit.notification("An error occured on save", {
status: 'danger',
timeout: 6000,
pos: 'bottom-right'
});
}));
}
private deleteOldImages( ) {
if( this.publishedCustomizationOptions.backgrounds.form.imageFile && this.draftCustomizationOptions.backgrounds.form.imageFile !=this.publishedCustomizationOptions.backgrounds.form.imageFile){
this.deleteImage(this.publishedCustomizationOptions.backgrounds.form.imageFile)
}
}
private deleteDraftImages( ) {
console.log("delete drafr images")
if( this.draftCustomizationOptions.backgrounds.form.imageFile && this.draftCustomizationOptions.backgrounds.form.imageFile !=this.publishedCustomizationOptions.backgrounds.form.imageFile){
this.subscriptions.push(this.utilsService.deletePhoto(this.properties.utilsService + '/delete/stakeholder/' + this.draftCustomizationOptions.backgrounds.form.imageFile).subscribe(
re => {
console.log("delete!!!!!!!!")
this.cleanUp()
}
));
}else{
this.cleanUp()
}
}
private deleteImage( filename:string) {
this.subscriptions.push(this.utilsService.deletePhoto(this.properties.utilsService + '/delete/stakeholder/' + filename).subscribe());
}
initializeCustomizationOptions(updatePreviewUrl) {
this.draftCustomizationOptions = this.copyObject(this.publishedCustomizationOptions);
this.appliedCustomizationOptions = this.copyObject(this.publishedCustomizationOptions);
if(updatePreviewUrl){
this.previewUrl = this.getCommunityUrlSatinized(JSON.stringify(this.appliedCustomizationOptions));
}
this.buttonDarkBackgroundPreview = this.changeStyle(this.draftCustomizationOptions.buttons.darkBackground);
this.buttonLightBackgroundPreview = this.changeStyle(this.draftCustomizationOptions.buttons.lightBackground);
this.linkDarkBackgroundPreview = this.changeFontsStyle(this.draftCustomizationOptions.links.darkBackground, this.draftCustomizationOptions.links.darkBackground.color);
this.linkLightBackgroundPreview = this.changeStyle(this.draftCustomizationOptions.links.lightBackground, this.draftCustomizationOptions.links.lightBackground.color);
}
applyLayout() {
@ -121,288 +173,68 @@ export class CustomizationComponent implements OnInit {
}
resetLayout() {
if (this.menuSelected == 'backgrounds') {
this.resetBackgrounds();
} else if (this.menuSelected == 'fonts') {
this.resetFonts();
} else if (this.menuSelected == 'elements') {
this.resetElements();
} else if (this.menuSelected == 'buttons') {
this.resetButtons();
} else if (this.menuSelected == 'identity') {
this.resetIdentity();
} else {
this.draftCustomizationOptions = this.copyObject(this.publishedCustomizationOptions);
this.appliedCustomizationOptions = this.copyObject(this.publishedCustomizationOptions);
}
// console.log(JSON.stringify(this.appliedCustomizationOptions))
// console.log(this.previewCustomization)
this.initializeCustomizationOptions(JSON.stringify(this.appliedCustomizationOptions) != this.previewCustomization);
}
resetBackgroundsTo(backgrounds) {
this.draftCustomizationOptions.backgrounds.dark.color = backgrounds.dark.color;
this.draftCustomizationOptions.backgrounds.light.color = backgrounds.light.color;
this.draftCustomizationOptions.backgrounds.form.color = backgrounds.form.color;
}
resetBackgrounds() {
this.draftCustomizationOptions.panel.onDarkBackground = this.publishedCustomizationOptions.panel.onDarkBackground;
this.draftCustomizationOptions.panel.background.color = this.publishedCustomizationOptions.panel.background.color;
this.appliedCustomizationOptions.panel.onDarkBackground = this.publishedCustomizationOptions.panel.onDarkBackground;
this.appliedCustomizationOptions.panel.background.color = this.publishedCustomizationOptions.panel.background.color;
resetBackgroundsAndButtonsTo(c:CustomizationOptions){
this.resetBackgroundsTo(c.backgrounds);
this.resetButtonsTo(c.buttons);
}
resetBackgroundsAndButtonsToPublished(){
this.resetBackgroundsAndButtonsTo(this.publishedCustomizationOptions);
}
resetBackgroundsAndButtonsToDefault(){
this.resetBackgroundsAndButtonsTo(this.publishedCustomizationOptions);
this.updateBackgroundsAndButtonsBasedOnIdentity();
}
resetFonts() {
this.resetFontsBig();
this.resetFontsSmall();
this.resetFontsLinksDark();
this.resetFontsLinksLight();
resetButtonsTo(buttonsToRevert) {
this.draftCustomizationOptions.buttons= this.copyObject(buttonsToRevert);
}
resetFontsBig() {
this.draftCustomizationOptions.panel.title = this.copyObject(this.publishedCustomizationOptions.panel.title);
this.appliedCustomizationOptions.panel.title = this.copyObject(this.publishedCustomizationOptions.panel.title);
resetIdentityTo( original:CustomizationOptions) {
this.draftCustomizationOptions.identity.mainColor = this.copyObject(original.identity.mainColor);
this.draftCustomizationOptions.identity.secondaryColor = this.copyObject(original.identity.secondaryColor);
}
resetFontsSmall() {
this.draftCustomizationOptions.panel.fonts = this.copyObject(this.publishedCustomizationOptions.panel.fonts);
this.appliedCustomizationOptions.panel.fonts = this.copyObject(this.publishedCustomizationOptions.panel.fonts);
resetIdentityToPublished() {
this.resetIdentityTo( this.publishedCustomizationOptions);
this.updateBackgroundsAndButtonsBasedOnIdentity()
}
resetIdentityToDefault() {
this.resetIdentityTo( this.defaultCustomizationOptions);
this.draftCustomizationOptions.identityIsCustom = false;
this.updateBackgroundsAndButtonsBasedOnIdentity()
}
resetFontsLinksDark() {
this.draftCustomizationOptions.links.darkBackground = this.copyObject(this.publishedCustomizationOptions.links.darkBackground);
this.appliedCustomizationOptions.links.darkBackground = this.copyObject(this.publishedCustomizationOptions.links.darkBackground);
this.linkDarkBackgroundPreview=this.changeFontsStyle(this.publishedCustomizationOptions.links.darkBackground, this.publishedCustomizationOptions.links.darkBackground.color);
}
resetFontsLinksLight() {
this.draftCustomizationOptions.panel.title = this.copyObject(this.publishedCustomizationOptions.panel.title);
this.draftCustomizationOptions.links.lightBackground = this.copyObject(this.publishedCustomizationOptions.links.lightBackground);
this.appliedCustomizationOptions.panel.title = this.copyObject(this.publishedCustomizationOptions.panel.title);
this.appliedCustomizationOptions.links.lightBackground = this.copyObject(this.publishedCustomizationOptions.links.lightBackground);
this.linkLightBackgroundPreview=this.changeFontsStyle(this.publishedCustomizationOptions.links.lightBackground, this.publishedCustomizationOptions.links.lightBackground.color);
}
resetElements() {
this.draftCustomizationOptions.panel.panelElements = this.copyObject(this.publishedCustomizationOptions.panel.panelElements);
this.appliedCustomizationOptions.panel.panelElements = this.copyObject(this.publishedCustomizationOptions.panel.panelElements);
}
resetButtons() {
this.resetButtonsDark();
this.resetButtonsLight();
}
resetButtonsDark() {
this.draftCustomizationOptions.buttons.darkBackground = this.copyObject(this.publishedCustomizationOptions.buttons.darkBackground);
this.appliedCustomizationOptions.buttons.darkBackground = this.copyObject(this.publishedCustomizationOptions.buttons.darkBackground);
this.buttonDarkBackgroundPreview=this.changeStyle(this.publishedCustomizationOptions.buttons.darkBackground);
}
resetButtonsLight() {
this.draftCustomizationOptions.buttons.lightBackground = this.copyObject(this.publishedCustomizationOptions.buttons.lightBackground);
this.appliedCustomizationOptions.buttons.lightBackground = this.copyObject(this.publishedCustomizationOptions.buttons.lightBackground);
this.buttonLightBackgroundPreview=this.changeStyle(this.publishedCustomizationOptions.buttons.lightBackground);
}
resetIdentity() {
this.draftCustomizationOptions.mainColor = this.publishedCustomizationOptions.mainColor;
this.draftCustomizationOptions.secondaryColor = this.publishedCustomizationOptions.secondaryColor;
this.appliedCustomizationOptions.mainColor = this.publishedCustomizationOptions.mainColor;
this.appliedCustomizationOptions.secondaryColor = this.publishedCustomizationOptions.secondaryColor;
}
changeStyle(colorOptions, borderOptions = null) {
let style = '';
if (!borderOptions) {
borderOptions = colorOptions;
updateBackgroundsAndButtonsBasedOnIdentity(){
if(!this.draftCustomizationOptions.backgroundsAndButtonsIsCustom){
let tmp = new CustomizationOptions(this.draftCustomizationOptions.identity.mainColor, this.draftCustomizationOptions.identity.secondaryColor);
this.resetBackgroundsAndButtonsTo(tmp);
}
if (colorOptions.color) {
style = style.concat('; color:' + colorOptions.color);
}
if (colorOptions.backgroundColor) {
style = style.concat( '; background-color:' + colorOptions.backgroundColor);
}
if (colorOptions.borderColor) {
style = style.concat('; border-color:' + colorOptions.borderColor);
}
if (borderOptions.borderStyle) {
style = style.concat('; border-style:' + borderOptions.borderStyle);
}
if (borderOptions.borderWidth) {
style = style.concat( '; border-width:' + borderOptions.borderWidth + 'px');
}
if (borderOptions.borderRadius) {
style = style.concat('; border-radius:' + borderOptions.borderRadius + 'px');
}
return this.sanitizer.bypassSecurityTrustStyle(style);
}
changeFontsStyle(options, color = null) {
let style = '';
if (options.family) {
style = style.concat('; font-family:' + options.family);
}
if (options.size) {
style = style.concat('; font-size:' + options.size + 'px');
}
if (options.weight) {
style = style.concat('; font-weight:' + options.weight);
}
if (color) {
style = style.concat('; color:' + color);
}
return this.sanitizer.bypassSecurityTrustStyle(style);
}
getCommunityUrlSatinized(layout: string) {
return this.sanitizer.bypassSecurityTrustResourceUrl(this.getCommunityUrlNewLayout(layout));
}
getCommunityUrl() {
/* if(this.properties.environment == "development") {
return 'http://spitoo.di.uoa.gr:4200';
}*/
return 'https://'+ (this.properties.environment == 'production'?'':'beta.')+this.communityId+'.openaire.eu';
}
getCommunityUrlNewLayout(layout: string) {
this.previewCustomization = layout;
return this.getCommunityUrl()+'/?' + 'layout=' + StringUtils.URIEncode(layout);
return this.getCommunityUrl()+'/preview/?' + 'layout=' + StringUtils.URIEncode(layout);
}
copyObject(obj) {
return JSON.parse(JSON.stringify(obj));
}
back() {
if (JSON.stringify(this.draftCustomizationOptions) == JSON.stringify(this.publishedCustomizationOptions) ||
JSON.stringify(this.draftCustomizationOptions) == JSON.stringify(this.appliedCustomizationOptions)) {
this.menuSelected = 'main';
} else {
this.backAlert.okButtonText = 'Yes';
this.backAlert.cancelButtonText = 'No';
this.backAlert.alertTitle = '';
this.backAlert.okButtonLeft = true;
this.backAlert.open();
}
}
resetToAppliedOptions() {
this.draftCustomizationOptions = this.copyObject(this.appliedCustomizationOptions);
this.menuSelected = 'main';
}
exit() {
if (JSON.stringify(this.appliedCustomizationOptions) == JSON.stringify(this.publishedCustomizationOptions)) {
this.exitCustomization();
} else {
this.exitAlert.okButtonText = 'Yes';
this.exitAlert.cancelButtonText = 'No';
this.exitAlert.alertTitle = '';
this.exitAlert.okButtonLeft = true;
this.exitAlert.open();
}
}
exitCustomization() {
this._router.navigate(['/dashboard'], {
queryParams: {'communityId': this.communityId}
});
}
downloadCustomization(){
this.errorMessage = "";
let options= JSON.parse(JSON.stringify(this.publishedCustomizationOptions));
delete options['_id'];
console.info("Here!" +JSON.stringify(options));
if(typeof document !== 'undefined') {
let dataStr = JSON.stringify(options);
let dataUri = 'data:application/json;charset=utf-8,' + encodeURIComponent(dataStr);
let exportFileDefaultName = 'layoutOptions.json';
let linkElement = document.createElement('a');
linkElement.setAttribute('href', dataUri);
linkElement.setAttribute('download', exportFileDefaultName);
linkElement.click();
}
}
fileChangeEvent(fileInput: any) {
this.errorMessage = "";
let filesToUpload = <Array<File>>fileInput.target.files;
if (filesToUpload.length == 0) {
this.errorMessage = "There is no selected file to upload.";
return;
} else {
if (filesToUpload[0].name.indexOf(".json") == -1 ||
(filesToUpload[0].type != "application/json" )) {
this.errorMessage = "No valid file type. The required type is json "+filesToUpload[0].type;
return;
}
}
this.makeFileRequest(this.properties.utilsService + '/upload?type=json', [], filesToUpload).then((result) => {
let layout:CustomizationOptions = JSON.parse(result.toString());
if( layout && layout.panel && layout.links && layout.buttons && layout.box){
this.draftCustomizationOptions = layout;
//put the same id to not have any difference
if(this.publishedCustomizationOptions['_id']){
this.draftCustomizationOptions['_id'] = this.publishedCustomizationOptions['_id'];
}
}else{
this.errorMessage = "No valid file";
}
}, (error) => {
this.errorMessage = "No valid file";
});
}
makeFileRequest(url: string, params: Array<string>, files: Array<File>) {
return new Promise((resolve, reject) => {
const formData: any = new FormData();
const xhr = new XMLHttpRequest();
for (let i = 0; i < files.length; i++) {
formData.append("uploads[]", files[i], files[i].name);
}
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
resolve(xhr.response);
} else {
reject(xhr.response);
}
}
}
xhr.open("POST", url, true);
xhr.send(formData);
});
}
}

20
src/app/pages/customization/customization.module.ts
View File

@ -12,15 +12,24 @@ import {ColorComponent} from './Color.component';
import {BorderComponent} from './Border.component';
import {LayoutService} from '../../openaireLibrary/services/layout.service';
import {AlertModalModule} from '../../openaireLibrary/utils/modal/alertModal.module';
import {PageContentModule} from '../../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module';
import {QuickLookComponent} from './quickLook.component';
import {QuickLookBackgroundsComponent} from './quickLook-backgrounds.component';
import {QuickLookButtonsComponent} from './quickLook-buttons.component';
import {MatFormFieldModule, MatSelectModule, MatSlideToggleModule} from '@angular/material';
import {CustomizeButtonsComponent} from './customize-buttons.component';
import {IconsModule} from '../../openaireLibrary/utils/icons/icons.module';
import {IconsService} from '../../openaireLibrary/utils/icons/icons.service';
import {refresh, reset} from '../../openaireLibrary/utils/icons/icons';
import {BackgroundComponent} from './background.component';
import {InputModule} from '../../openaireLibrary/sharedComponents/input/input.module';
// import {IsCommunity} from '../../openaireLibrary/connect/communityGuard/isCommunity.guard';
// import {ConnectAdminLoginGuard} from '../../openaireLibrary/connect/communityGuard/connectAdminLoginGuard.guard';
@NgModule({
imports: [
CustomizationRoutingModule, CommonModule, FormsModule, RouterModule, ColorPickerModule, AlertModalModule
CustomizationRoutingModule, CommonModule, FormsModule, RouterModule, ColorPickerModule, AlertModalModule, PageContentModule, MatFormFieldModule, MatSelectModule, MatSlideToggleModule, IconsModule, InputModule
],
declarations: [
CustomizationComponent, FontSizeComponent, ColorComponent, BorderComponent
CustomizationComponent, FontSizeComponent, ColorComponent, BorderComponent, QuickLookComponent, QuickLookBackgroundsComponent, QuickLookButtonsComponent, CustomizeButtonsComponent, BackgroundComponent
],
providers: [
LayoutService
@ -30,4 +39,7 @@ import {AlertModalModule} from '../../openaireLibrary/utils/modal/alertModal.mod
]
})
export class CustomizationModule {
constructor(private iconsService: IconsService) {
this.iconsService.registerIcons([reset, refresh]);
}
}

62
src/app/pages/customization/customize-buttons.component.ts Normal file
View File

@ -0,0 +1,62 @@
import {Component, Input} from '@angular/core';
import {ButtonsCustomization} from '../../openaireLibrary/connect/community/CustomizationOptions';
@Component({
selector: 'customize-buttons',
template: `
<div class="">
<border [style]="buttons.borderStyle" [width]=
"buttons.borderWidth" [radius]=
"buttons.borderRadius" (borderChange)=
" buttons.borderStyle = $event.style;
buttons.borderRadius = $event.radius;
buttons.borderWidth = $event.width; "></border>
<div class="uk-grid uk-child-width-1-2 uk-margin-top" >
<div class="">
<div class=" uk-margin-small-bottom uk-text-bold uk-margin-small-left">Colors</div>
<color [color]="buttons.color" (colorChange)=
" buttons.color = $event; "
label="Fonts" [light]="!light"
></color>
<color [color]="buttons.backgroundColor" (colorChange)=
" buttons.backgroundColor = $event; " [light]="light"
label="Background" ></color>
<color [color]="buttons.borderColor" (colorChange)=
" buttons.borderColor = $event; " [light]="light"
label="Border"
></color>
</div>
<div>
<div class=" uk-margin-small-bottom uk-text-bold uk-margin-small-left">Colors on hover</div>
<div class="">
<color [color]="buttons.onHover.color" (colorChange)=
" buttons.onHover.color = $event;" label="Fonts" [light]="!light"
></color>
<color [color]="buttons.onHover.backgroundColor"
(colorChange)=
" buttons.onHover.backgroundColor = $event;" [light]="light"
label="Background" ></color>
<color [color]="buttons.onHover.borderColor" (colorChange)=
" buttons.onHover.borderColor = $event;" [light]="light"
label="Border" ></color>
</div>
</div>
</div>
</div>
`,
styles:[` `]
})
export class CustomizeButtonsComponent {
@Input() buttons:ButtonsCustomization;
@Input() light:boolean;
constructor() {
}
}

63
src/app/pages/customization/quickLook-backgrounds.component.ts Normal file
View File

@ -0,0 +1,63 @@
import {Component, HostBinding, Input} from '@angular/core';
import {DomSanitizer} from '@angular/platform-browser';
import {ButtonsCustomization} from '../../openaireLibrary/connect/community/CustomizationOptions';
@Component({
selector: 'quick-look-backgrounds',
template: `
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold uk-text-large">Dark background</div>
<div class="uk-padding-small uk-text-center darkBackground uk-height-medium uk-light uk-flex uk-flex-center uk-flex-middle" >
<div>
<h1 >Heading</h1>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis velit ornare, auctor lectus at, rutrum magna. Aenean vehicula elementum lacinia.</div>
<a class="">Link</a>
<quick-look-buttons
[buttons]="buttonsOnDark"
></quick-look-buttons>
</div>
</div>
<div class="uk-margin-top">
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold uk-text-large">Light background</div>
<div class="uk-padding-small uk-text-center uk-width-1-1 uk-height-medium lightBackground uk-flex uk-flex-center uk-flex-middle" >
<div>
<h1 >Heading</h1>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis velit ornare, auctor lectus at, rutrum magna. Aenean vehicula elementum lacinia.</div>
<a class="portal-link">Link</a>
<br>
<quick-look-buttons
[buttons]="buttonsOnLight" ></quick-look-buttons>
</div>
</div>
</div>
`,
styles:[`
.darkBackground{
background-color: var(--background-dark-color);
}
.lightBackground{
background-color: var(--background-low-color);
}
`]
})
export class QuickLookBackgroundsComponent {
@Input() primaryColor;
@Input() secondaryColor;
@Input() darkBackgroundColor;
@Input() lightBackgroundColor;
@Input() buttonsOnDark:ButtonsCustomization;
@Input() buttonsOnLight:ButtonsCustomization;
constructor( private sanitizer: DomSanitizer) {
}
@HostBinding("attr.style")
public get valueAsStyle(): any {
return this.sanitizer.bypassSecurityTrustStyle(`--portal-main-color: ${this.primaryColor}; --portal-dark-color: ${this.secondaryColor};
--background-dark-color: ${this.darkBackgroundColor}; --background-low-color: ${this.lightBackgroundColor};`);
}
}

58
src/app/pages/customization/quickLook-buttons.component.ts Normal file
View File

@ -0,0 +1,58 @@
import {Component, HostBinding, Input} from '@angular/core';
import {DomSanitizer} from '@angular/platform-browser';
import {ButtonsCustomization} from '../../openaireLibrary/connect/community/CustomizationOptions';
@Component({
selector: 'quick-look-buttons',
template: `
<div>
<a class="uk-button preview-button" >Button</a>
</div>
`,
styles:[`
.preview-button {
color: var(--color);
background-color: var(--background-color);
border-color: var(--border-color);
border-style: var(--border-style);
border-width: var(--border-width);
border-radius: var(--border-radius);
}
.preview-button:hover {
color: var(--color-hover);
background-color: var(--background-color-hover);
border-color: var(--border-color-hover);
}
`]
})
export class QuickLookButtonsComponent {
@Input() buttons:ButtonsCustomization;
@HostBinding("attr.style")
public get valueAsStyle(): any {
return this.sanitizer.bypassSecurityTrustStyle(`
--color: ${this.buttons.color};
--background-color: ${this.buttons.backgroundColor};
--border-color: ${this.buttons.borderColor};
--border-style: ${this.buttons.borderStyle};
--border-width: ${this.buttons.borderWidth + 'px'};
--border-radius: ${this.buttons.borderRadius + 'px'};
--color-hover: ${this.buttons.onHover.color};
--background-color-hover: ${this.buttons.onHover.backgroundColor};
--border-color-hover: ${this.buttons.onHover.borderColor};
`);
}
constructor( private sanitizer: DomSanitizer) {
}
}

88
src/app/pages/customization/quickLook.component.ts Normal file
View File

@ -0,0 +1,88 @@
import {Component, HostBinding, Input} from '@angular/core';
import {DomSanitizer} from '@angular/platform-browser';
@Component({
selector: 'quick-look',
template: `
<div *ngIf="preview=='identity'">
<ul class="uk-pagination uk-flex-center" uk-margin="">
<li class="uk-first-column"><a><span class="uk-icon uk-pagination-previous" uk-pagination-previous=""></span></a></li>
<li><a >1</a></li>
<li><a class="uk-active" >2</a></li>
<li><a>3</a></li>
<li><a><span
class="uk-icon uk-pagination-next" uk-pagination-next=""> </span></a></li>
</ul>
<hr>
<ul class="uk-tab">
<li class="uk-active"><a >Active</a></li>
<li><a>Item</a></li>
</ul>
<div class="portal-color">Text in primary
color
</div>
<div class="portal-secondary-color">Text in secondary
color
</div>
<div >
<a class="link1">Link 1</a>
</div>
<div >
<a class="portal-link">Link 2</a>
</div>
</div>
`,
styles:[`
/*Override inside this component*/
/* :host {
--portal-main-color: #fe3c52;
--portal-dark-color: #b40238;
--new:#fe3c52;
}*/
/*
overrides root
::ng-deep :root {
--portal-main-color: #fe3c52;
--portal-dark-color: #b40238;
--new:#fe3c52;
}*/
.uk-pagination li a.uk-active{
background-color: var(--portal-main-color);
color:white;
}
.uk-pagination li a, .uk-tab li a{
text-decoration: none;
}
a.link1{
color: var(--portal-main-color);
}
a.link1:hover{
color: var(--portal-dark-color);
}
.uk-tab li.uk-active a{
color: var(--portal-main-color) !important;
border-color:var(--portal-main-color) !important;
}
`]
})
export class QuickLookComponent {
@Input() primaryColor;
@Input() secondaryColor;
@Input() preview :"identity"|"backgrounds"|"buttons" = "identity";
constructor( private sanitizer: DomSanitizer) {
}
@HostBinding("attr.style")
public get valueAsStyle(): any {
return this.sanitizer.bypassSecurityTrustStyle(`--portal-main-color: ${this.primaryColor}; --portal-dark-color: ${this.secondaryColor};`);
}
}

14
src/app/pages/dashboard/dashboard-routing.module.ts
View File

@ -1,14 +0,0 @@
import { NgModule } from '@angular/core';
import {RouterModule} from '@angular/router';
import {DashboardComponent} from './dashboard.component';
import {IsCommunity} from '../../openaireLibrary/connect/communityGuard/isCommunity.guard';
import {ConnectAdminLoginGuard} from '../../openaireLibrary/connect/communityGuard/connectAdminLoginGuard.guard';
@NgModule({
imports: [
RouterModule.forChild([
{ path: '', canActivate: [IsCommunity, ConnectAdminLoginGuard], component: DashboardComponent}
])
]
})
export class DashboardRoutingModule { }

117
src/app/pages/dashboard/dashboard.component.html
View File

@ -1,117 +0,0 @@
<div id="dashboard" class="uk-margin-large-bottom">
<div id="content">
<div class="content-wrapper">
<div class="uk-child-width-1-3@m uk-grid-small uk-grid-margin uk-margin-top" uk-grid="" uk-height-match=".target">
<div *ngIf="communityId != 'openaire' && this.communityId !== 'connect'" class="uk-card uk-card-default uk-card-body uk-card-hover">
<h4 class="uk-card-title">
<span class="uk-margin-small-right uk-icon" uk-icon="album"></span>
Profile
</h4>
<div class="target uk-margin">
Edit community information, change logo url, add community managers or organizations related to
community <span *ngIf="properties.environment == 'development'"> and customize css layout</span>.
</div>
<div>
<a routerLink="/community-edit-form" [queryParams]="{communityId: this.communityId}" class="uk-button uk-button-text">Community Profile</a><br>
<a routerLink="/organizations" [queryParams]="{communityId: this.communityId}" class="uk-button uk-button-text">Organizations</a><br>
<!--<a routerLink="/customize-layout"
[queryParams]="{communityId: this.communityId}"
class="uk-button uk-button-text">Customize Layout</a>-->
</div>
</div>
<div *ngIf="communityId != 'openaire' && this.communityId !== 'connect'" class="uk-card uk-card-default uk-card-body uk-card-hover">
<h4 class="uk-card-title">
<span class="uk-margin-small-right uk-icon" uk-icon="list"></span>
Content
</h4>
<div class="target uk-margin">
Manage projects, content providers{{(communityType && communityType != 'ri')?', subjects':''}} and zenodo communities that are related to the research community.
</div>
<div>
<a routerLink="/manage-projects" [queryParams]="{communityId: this.communityId}" class="uk-button uk-button-text">Projects</a> <br>
<a routerLink="/manage-content-providers" [queryParams]="{communityId: this.communityId}" class="uk-button uk-button-text">Content providers</a> <br>
<a routerLink="/manage-zenodo-communities" [queryParams]="{communityId: this.communityId}" class="uk-button uk-button-text">Zenodo communities</a> <br>
<a *ngIf="communityType && communityType != 'ri'" routerLink="/manage-subjects" [queryParams]="{communityId: this.communityId}" class="uk-button uk-button-text">Subjects</a> <br>
</div>
</div>
<div *ngIf="communityId != 'openaire' && this.communityId !== 'connect'" class="uk-card uk-card-default uk-card-body uk-card-hover">
<h4 class="uk-card-title">
<span class="uk-margin-small-right uk-icon" uk-icon="image"></span>
Statistics &amp; Charts
</h4>
<div class="target uk-margin">
Manage statistical numbers & charts that will be displayed in the community overview and graph analysis views.
</div>
<div>
<a routerLink="/stats" [queryParams]="{communityId: this.communityId}" class="uk-button uk-button-text">Statistics &amp; charts</a>
</div>
</div>
<div *ngIf="communityId != 'openaire' && this.communityId !== 'connect'" class="uk-card uk-card-default uk-card-body uk-card-hover">
<h4 class="uk-card-title">
<span class="uk-margin-small-right uk-icon" uk-icon="link"></span>
Links
</h4>
<div class="target uk-margin">
Manage user claims related to the research community.
</div>
<div>
<a routerLink="/claims" [queryParams]="{communityId: this.communityId}" class="uk-button uk-button-text">Links</a>
</div>
</div>
<div class="uk-card uk-card-default uk-card-body uk-card-hover">
<h4 class="uk-card-title">
<span class="uk-margin-small-right uk-icon" uk-icon="file-edit"></span>
Help texts
</h4>
<div class="target uk-margin">
Add or edit help text in research community pages.
</div>
<div>
<a routerLink="/pageContents" [queryParams]="{communityId: this.communityId}" class="uk-button uk-button-text">Help texts in pages</a><br>
<a *ngIf="communityId === 'openaire' || communityId === 'connect'"
routerLink="/classContents" [queryParams]="{communityId: this.communityId}" class="uk-button uk-button-text">Help texts in classes</a>
</div>
</div>
<div *ngIf="communityType && communityType == 'ri' && communityId!='openaire' && this.communityId !== 'connect'" class="uk-card uk-card-default uk-card-body uk-card-hover">
<h4 class="uk-card-title">
<span class="uk-margin-small-right uk-icon" uk-icon="settings"></span>
Text mining rules
</h4>
<div class="target uk-margin">
Manage text mining rules, test the rules and see the results, save and load mining profiles.
</div>
<div>
<a routerLink="/mining/manage-profiles" [queryParams]="{communityId: this.communityId}" class="uk-button uk-button-text">Text mining rules</a>
</div>
</div>
<div *ngIf="communityId!='openaire' && this.communityId !== 'connect'" class="uk-card uk-card-default uk-card-body uk-card-hover">
<h4 class="uk-card-title">
<span class="uk-margin-small-right uk-icon" uk-icon="user"></span>
Users
</h4>
<div class="target uk-margin">
Invite more users to subscribe, manage community subscribers, your personal info and notification settings.
</div>
<div>
<a [href]="'https://beta.'+this.communityId+'.openaire.eu/invite'" target="_blank" class="uk-button uk-button-text">
<span>Invite to subscribe </span>
</a>
<br>
<a routerLink="/manage-subscribers" routerLinkActive="active" [queryParams]="{communityId: this.communityId}" class="uk-button uk-button-text">
<span>Subscribers</span>
</a>
<br>
<a routerLink="/personal" routerLinkActive="active" [queryParams]="{communityId: this.communityId}" class="uk-button uk-button-text">
<span>Personal Info </span>
</a>
<br>
<a routerLink="/manage-user-notifications" routerLinkActive="active" [queryParams]="{communityId: this.communityId}" class="uk-button uk-button-text">
<span>Notification settings </span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>

48
src/app/pages/dashboard/dashboard.component.ts
View File

@ -1,48 +0,0 @@
/**
* Created by stefania on 3/21/16.
*/
import {Component, ElementRef, OnInit} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {CommunityService} from '../../openaireLibrary/connect/community/community.service';
import {EnvProperties} from '../../openaireLibrary/utils/properties/env-properties';
import {HelperFunctions} from "../../openaireLibrary/utils/HelperFunctions.class";
import {Title} from '@angular/platform-browser';
import {ConnectHelper} from "../../openaireLibrary/connect/connectHelper";
@Component({
selector: 'dashboard',
templateUrl: 'dashboard.component.html',
})
export class DashboardComponent implements OnInit {
communityId: string = null;
communityType = null;
properties: EnvProperties;
constructor( private element: ElementRef,
private route: ActivatedRoute,
private title: Title,
private _communityService: CommunityService) {}
ngOnInit() {
this.route.data.subscribe((data: { envSpecific: EnvProperties }) => {
this.title.setTitle('Administration Dashboard | Overview');
this.properties = data.envSpecific;
this.route.queryParams.subscribe(data => {
HelperFunctions.scroll();
this.communityId = ((data['communityId']) ? data['communityId'] : data['community']);
ConnectHelper.setPortalTypeFromPid(this.communityId);
this._communityService.getCommunity(this.properties, this.properties.communityAPI + this.communityId).subscribe (
community => {
this.communityType = community.type;
},
error => {
console.error('Server responded: ' + error);
}
);
});
});
}
}

17
src/app/pages/dashboard/dashboard.module.ts
View File

@ -1,17 +0,0 @@
import { NgModule } from '@angular/core';
import {DashboardRoutingModule} from './dashboard-routing.module';
import {RouterModule} from '@angular/router';
import {DashboardComponent} from './dashboard.component';
import {CommonModule} from '@angular/common';
import {IsCommunity} from '../../openaireLibrary/connect/communityGuard/isCommunity.guard';
import {ConnectAdminLoginGuard} from '../../openaireLibrary/connect/communityGuard/connectAdminLoginGuard.guard';
@NgModule({
imports: [
CommonModule, DashboardRoutingModule, RouterModule
],
declarations: [DashboardComponent],
providers: [IsCommunity, ConnectAdminLoginGuard],
exports: [DashboardComponent]
})
export class DashboardModule { }

68
src/app/pages/divId/divId-form.component.html
View File

@ -1,68 +0,0 @@
<form [formGroup]="myForm">
<div class="form-group" [ngClass]="{'has-error':!myForm.controls.name.valid && myForm.controls.name.dirty}">
<label for="divIdNameTag">*Class Name</label>
<input type="text" class="form-control" formControlName="name" id="divIdNameTag" placeholder="Class Name">
</div>
<div [ngClass]="{'has-error':!myForm.controls.portalType.valid && myForm.controls.portalType.dirty}" class="form-group uk-grid-small uk-margin-medium-bottom" uk-grid>
<label class="uk-width-1-1 uk-margin-small-bottom">
*Class exists in:
</label>
<label class="uk-width-1-1 radio uk-margin-large-left">
<span class="uk-margin-small-right" style="font-weight: normal;">OpenAIRE portal</span>
<!-- <input tabindex="0" type="checkbox" formControlName="openaire">-->
<input type="radio" value="explore" formControlName="portalType">
</label>
<label class="uk-width-1-1 radio uk-margin-large-left">
<span class="uk-margin-small-right" style="font-weight: normal;">OpenAIRE Connect portal</span>
<!-- <input tabindex="0" type="checkbox" formControlName="connect">-->
<input type="radio" value="connect" formControlName="portalType">
</label>
<label class="uk-width-1-1 radio uk-margin-large-left">
<span class="uk-margin-small-right" style="font-weight: normal;">Communities' Gateway</span>
<!-- <input tabindex="0" type="checkbox" formControlName="communities">-->
<input type="radio" value="community" formControlName="portalType">
</label>
<div class="uk-text-small">If portal changes, selected pages will be lost</div>
</div>
<div formArrayName="pages" [class]="(!myForm.controls.portalType.value ? 'uk-disabled' : '') + ' form-group'"
[ngClass]="{'has-error':!myForm.controls.pages.valid && myForm.controls.pages.dirty}">
<label for="pageNameTag">Page Name (*at least 1)</label>
<div id="pageNameTag">
<pre class="card card-block card-header"><span *ngFor="let page of myForm.controls.pages.value; let i=index">{{page.name}}<span *ngIf="i<(myForm.controls.pages.value.length-1)">, </span></span></pre>
<button type="button" class="uk-button-small" (click)="toggle()">Add / Remove pages</button>
<ng-container *ngIf="!myForm.value.isCollapsed">
<div *ngIf="errorMessage" class="uk-alert uk-alert-danger" role="alert">{{errorMessage}}</div>
<div [style.display]="showLoading ? 'inline' : 'none'" class="uk-animation-fade uk-width-1-1" role="alert"><img class="uk-align-center loading-gif"></div>
<!-- <div *ngFor="let page of availablePages">
<span>
<span *ngIf="indexOfPageInForm(page._id) >= 0" class="activated" >
<input (click)="togglePage(false, page)" class="deactivate" src="assets/imgs/delete-icon.png" title="Disable" width="20" type="image" height="20">
</span>
<span *ngIf="indexOfPageInForm(page._id) < 0" class="deactivated" >
<input (click)="togglePage(true, page)" class="activate" src="assets/imgs/add-icon.png" title="Enable" width="20" type="image" height="20">
</span>
{{page.name}}
</span>
</div> -->
<div *ngFor="let page of getKeys(allPagesFiltered)">
<span>
<span *ngIf="allPagesFiltered.get(page)" class="activated" >
<input (click)="togglePage(false, page)" class="deactivate" src="assets/imgs/delete-icon.png" title="Disable" width="20" type="image" height="20">
</span>
<span *ngIf="!allPagesFiltered.get(page)" class="deactivated" >
<input (click)="togglePage(true, page)" class="activate" src="assets/imgs/add-icon.png" title="Enable" width="20" type="image" height="20">
</span>
{{page.name}}
</span>
</div>
</ng-container>
</div>
</div>
<input type="hidden" formControlName="_id">
</form>

235
src/app/pages/divId/divId-form.component.ts
View File

@ -1,235 +0,0 @@
import {Component, OnInit, Input} from '@angular/core';
import { ActivatedRoute, Router } from "@angular/router";
import {FormGroup, FormArray, FormBuilder, Validators, FormControl} from "@angular/forms";
import { HelpContentService } from "../../services/help-content.service";
import { Page } from "../../domain/page";
import { EnvProperties } from '../../openaireLibrary/utils/properties/env-properties';
import {Session} from '../../openaireLibrary/login/utils/helper.class';
import {LoginErrorCodes} from '../../openaireLibrary/login/utils/guardHelper.class';
import {Subscription} from "rxjs";
@Component({
selector: 'divId-form',
templateUrl: './divId-form.component.html',
})
export class DivIdFormComponent implements OnInit{
@Input('group')
myForm: FormGroup;
@Input('pageId')
pageId: string;
@Input('formPages')
formPages: Page[] = [];
public allPages : Page[] = [];
public allPagesFiltered: Map<Page, boolean> = new Map<Page, boolean>();
private gotPages: boolean = false;
public properties:EnvProperties = null;
public showLoading: boolean = false;
public errorMessage: string = '';
selectedCommunityPid = null;
private sub: Subscription = null;
constructor(private route: ActivatedRoute, private _router: Router, public _fb: FormBuilder, private _helpContentService: HelpContentService){}
ngOnInit(): void {
this.route.data
.subscribe((data: { envSpecific: EnvProperties }) => {
this.properties = data.envSpecific;
// this.route.queryParams.subscribe(params => {
// this.selectedCommunityPid = params['communityId'];
// });
});
this. sub = this.myForm.get('portalType').valueChanges.subscribe(portalType => {
let pages = this.myForm.get('pages').value;
//pages = pages.filter(page => page.portalType == portalType);
//this.setPages(pages);
pages.forEach((page, i) => {
if(page.portalType != portalType) {
this.pages.removeAt(i);
}
});
this.allPagesFiltered.clear();
this.allPages.filter(page => page.portalType == portalType).forEach(page => {
this.allPagesFiltered.set(page, false);
})
//this.myForm.value.pages = [];
});
}
ngOnDestroy() {
if(this.sub) {
this.sub.unsubscribe();
}
}
public getKeys( map) {
return Array.from(map.keys());
}
getPages(includedPages: Set<String>) {
if(!Session.isLoggedIn()){
this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl": this._router.url} });
} else {
this.showLoading = true;
this.errorMessage = "";
this._helpContentService.getAllPages(this.properties.adminToolsAPIURL).subscribe(
pages => {
this.allPages = pages;
let self = this;
pages = pages.filter(page => page.portalType == self.myForm.get('portalType').value);
for(let page of pages) {
if(includedPages.has(page._id)) {
this.allPagesFiltered.set(page, true);
} else {
this.allPagesFiltered.set(page, false);
}
}
this.showLoading = false;
},
error => this.handleError('System error retrieving pages', error)
);
}
}
public toggle() {
if(!Session.isLoggedIn()){
this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl": this._router.url} });
} else {
this.myForm.value.isCollapsed = !this.myForm.value.isCollapsed;
///////
if(!this.myForm.value.isCollapsed) {
let includedPages: Set<String> = new Set<String>();
for(let pageName of this.myForm.value.pages) {
includedPages.add(pageName._id);
}
let allPages = this.allPagesFiltered;
let self = this;
allPages.forEach(function (status, page, map) {
if(includedPages.has(page._id)) {
self.allPagesFiltered.set(page, true);
} else {
self.allPagesFiltered.set(page, false);
}
});
if(!this.gotPages) {
this.gotPages = true;
this.getPages(includedPages);
}
}
}
/////
}
public get form() {
return this._fb.group({
_id: '',
name : ['', Validators.required],
pages: this._fb.array([], Validators.required),
portalType: ['', Validators.required],
isCollapsed: [true]
});
}
public reset() {
this.myForm.patchValue({
_id : '',
name : '',
portalType: '',
pages: [],
isCollapsed: [true]
});
this.formPages = [];
}
public get pages(): FormArray {
return this.myForm.get('pages') as FormArray;
};
setPages(pages: Page[]) {
//const pageFormArray = this._fb.array(pages);
//this.myForm.setControl('pages', pageFormArray);
//const pageFGs = pages.map(page => this._fb.group(page));
//if(pages && pages.length > 0) {
// const pageCtrls = pages.map(page => this._fb.control(page));
// const pageFormArray = this._fb.array(pageCtrls);
// this.myForm.setControl('pages', pageFormArray);
//}
while (this.pages.length !== 0) {
this.pages.removeAt(0)
}
pages.forEach(page => {
//array.push(new FormControl(page));
this.pages.push(this._fb.control(page));
});
}
indexOfPageInForm(pageId: string): number {
let index: number = -1;
for(let i=0; i<this.formPages.length; i++) {
if(this.formPages[i]._id == pageId) {
index = i;
break;
}
}
return index;
}
public togglePage(status : boolean, page: Page) {
/*let index: number = this.indexOfPageInForm(page._id);
if(status && index<0) {
this.formPages.push(page);
this.myForm.value.pages.push(page._id);
} else if(!status){
if(index >= 0) {
this.formPages.splice(index, 1);
this.myForm.value.pages.splice(index, 1);
}
}*/
if(!Session.isLoggedIn()){
this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl": this._router.url} });
} else {
let index: number = -1;
for(let i=0; i<this.myForm.get('pages').value.length; i++) {
if(this.myForm.get('pages').value[i]._id == page._id) {
index = i;
break;
}
}
this.allPagesFiltered.set(page, status);
if(status && index<0) {
this.pages.push(this._fb.control(page));
} else if(!status){
if(index >= 0) {
this.pages.removeAt(index);
}
}
}
}
handleError(message: string, error) {
this.errorMessage = message;
console.log('Server responded: ' + error);
this.showLoading = false;
}
}

13
src/app/pages/divId/divIds-routing.module.ts
View File

@ -1,13 +0,0 @@
import { NgModule } from '@angular/core';
import {RouterModule} from '@angular/router';
import {DivIdsComponent} from './divIds.component';
import {AdminLoginGuard} from "../../openaireLibrary/login/adminLoginGuard.guard";
@NgModule({
imports: [
RouterModule.forChild([
{ path: '', canActivate: [AdminLoginGuard], component: DivIdsComponent}
])
]
})
export class DivIdsRoutingModule { }

131
src/app/pages/divId/divIds.component.html
View File

@ -1,131 +0,0 @@
<div id="divIds">
<div class="menubar ">
<div class="divId-title uk-text-large">Predefined classes for contents</div>
<div *ngIf="updateErrorMessage" class="uk-alert-danger" uk-alert>
<a class="uk-alert-close" uk-close></a>
{{updateErrorMessage}}
</div>
<form target="BSFormPanel_Admin_1" class="search">
<!-- <input #inputstring (keyup.enter)="filterBySearch(inputstring.value)" placeholder="Class name..." type="text" class="uk-input uk-width-medium"/>
<button class="uk-button" type="submit">Search</button> -->
<input type="text" class="uk-input uk-width-medium" placeholder="Class name, portal type..." aria-describedby="sizing-addon2" [(ngModel)]="keyword" name="keyword" >
<button (click)="filterBySearch(keyword)" type="submit" class=" uk-button">
<span class="uk-icon">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="search" ratio="1"><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>
</span>Search
</button>
</form>
<!-- <a (click)="showModal()" class="uk-button uk-button-primary uk-float-right"><i></i> New Class </a> -->
</div>
<div class="content-wrapper" id="contentWrapper">
<div>
<div class="contentPanel">
<div *ngIf="errorMessage" class="uk-alert uk-alert-danger uk-margin-large-top" role="alert">{{errorMessage}}</div>
<div [style.display]="showLoading ? 'inline' : 'none'" class="uk-animation-fade uk-margin-large-top uk-width-1-1" role="alert"><img class="uk-align-center loading-gif"></div>
<div *ngIf="!errorMessage && !showLoading" class="page-controls">
<div class=" filters ">
<div class="show-options uk-float-right">
<button class="uk-button" type="button">Bulk Actions</button>
<div uk-dropdown="mode: click">
<ul class="uk-nav uk-navbar-dropdown-nav"
[attr.uk-tooltip]="getSelectedDivIds().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
title="Select at least one class">
<li><a [class]="getSelectedDivIds().length == 0 ? 'uk-disabled' : ''" (click)="confirmDeleteSelectedCommunities()"><i></i> Delete </a></li>
</ul>
</div>
</div>
</div>
</div>
<div *ngIf="!errorMessage && !showLoading">
<div class="gwt-HTML">
<div class="users-list"> <!--"row" class removed"-->
<div class="col-md-12">
<!-- <div class="filters marginBottom20">
<div class="links form-group form-inline">
<span>Filter by community:</span>
<select class="uk-select uk-width-medium" (change)="filterByCommunity($event)">
<option *ngFor="let community of communities" value="{{community.pid}}">{{community.name}}</option>
</select>
</div>
</div> -->
<table class="uk-table uk-table-striped">
<thead>
<tr>
<th><input id="allDivIdCheckbox" type="checkbox" (change)="toggleCheckBoxes($event)"></th>
<th>Name</th>
<!-- <th>Community</th> -->
<th>Page</th>
<th>Portal Type</th>
<th>Actions</th>
</tr>
</thead>
<tbody >
<tr *ngFor="let check of checkboxes; let i=index">
<td><input id="{{check.divId._id}}" class="checkBox" type="checkbox"
name="divIdscb[]" value="{{check.divId._id}}" [(ngModel)]="check.checked">
</td>
<td>
<div class="name" href="#">{{check.divId.name}}</div>
</td>
<!-- <td>
<div class="community" href="#">{{check.divId.community.name}}</div>
</td> -->
<td>
<!-- <div class="page" href="#">{{check.divId.page.name}}</div> -->
<div class="pages" href="#">
<span *ngFor="let page of check.divId.pages let i=index">{{page.name}}<span *ngIf="i<(check.divId.pages.length-1)">, </span></span>
</div>
</td>
<td>
<div class="portalType" href="#">{{check.divId.portalType}}</div>
</td>
<td>
<div class="actions" href="#">
<input title="Edit" src="assets/imgs/icn_edit.png" class="edit uk-margin-small-right" type="image" (click)="editDivId(i)">
<input title="Delete" src="assets/imgs/icn_trash.png" class="delete" type="image" (click)="confirmDeleteDivId(check.divId._id)">
</div>
</td>
</tr>
</tbody>
</table>
<div *ngIf="checkboxes.length==0" class="col-md-12">
<div class="uk-alert-warning" uk-alert>No classes found</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <fab (clicked)="showModal()"></fab> -->
<fab (clicked)="newDivId()"></fab>
</div>
<!-- <modal-form #saveModal [saveText]="'Save'" [titleText]="'Add a new Class'" [formGroup]="formGroup" [type]="'divId'"
[isModalShown]="isModalShown" (emmitObject)="divIdSavedSuccessfully($event)" (emmitError)="handleUpdateError($event)">
<divId-form [group]="formGroup"></divId-form>
</modal-form>
<modal-form #updateModal [saveText]="'Update'" [titleText]="'Update Class'" [formGroup]="formGroup" [type]="'divId'"
[isModalShown]="isModalShown" (emmitObject)="divIdUpdatedSuccessfully($event)" (emmitError)="handleUpdateError($event)">
<divId-form [group]="formGroup" [formPages]="formPages"></divId-form>
</modal-form> -->
<modal-alert #AlertModalSaveDivId (alertOutput)="divIdSaveConfirmed($event)">
<div *ngIf="modalErrorMessage" class="uk-alert-danger" uk-alert aria-hidden="true">{{ modalErrorMessage }}</div>
<divId-form [group]="formGroup" [formPages]="formPages"></divId-form>
</modal-alert>
<modal-alert #AlertModalUpdateDivId (alertOutput)="divIdUpdateConfirmed($event)">
<div *ngIf="modalErrorMessage" class="uk-alert-danger" uk-alert aria-hidden="true">{{ modalErrorMessage }}</div>
<divId-form [group]="formGroup" [formPages]="formPages"></divId-form>
</modal-alert>
<!-- <delete-confirmation-dialog #deleteConfirmationModal [isModalShown]="isModalShown" (emmitObject)="confirmedDeleteDivIds($event)">
Are you sure you want to delete the selected class(-es)?
</delete-confirmation-dialog> -->
<modal-alert #AlertModalDeleteDivIds (alertOutput)="confirmedDeleteDivIds($event)"></modal-alert>

292
src/app/pages/divId/divIds.component.ts
View File

@ -1,292 +0,0 @@
import { Component, ViewChild, OnInit, ElementRef } from '@angular/core';
import { ActivatedRoute, Router } from "@angular/router";
import { HelpContentService } from "../../services/help-content.service";
import { FormGroup } from "@angular/forms";
import { DivIdFormComponent } from "./divId-form.component";
import { CheckDivId, DivId } from "../../domain/divId";
//import { Community } from "../../domain/community";
import { Page } from "../../domain/page";
import { EnvProperties } from '../../openaireLibrary/utils/properties/env-properties';
import {Session} from '../../openaireLibrary/login/utils/helper.class';
import {LoginErrorCodes} from '../../openaireLibrary/login/utils/guardHelper.class';
import {HelperFunctions} from "../../openaireLibrary/utils/HelperFunctions.class";
import {Title} from '@angular/platform-browser';
import {ClearCacheService} from "../../openaireLibrary/services/clear-cache.service";
@Component({
selector: 'divIds',
templateUrl: './divIds.component.html',
})
export class DivIdsComponent implements OnInit {
// @ViewChild(ModalFormComponent)
// @ViewChild('saveModal')
// public modal:ModalFormComponent;
//
// @ViewChild('updateModal')
// public updateModal:ModalFormComponent;
// @ViewChild('deleteConfirmationModal')
// public deleteConfirmationModal : DeleteConfirmationDialogComponent;
@ViewChild('AlertModalSaveDivId') alertModalSaveDivId;
@ViewChild('AlertModalUpdateDivId') alertModalUpdateDivId;
@ViewChild('AlertModalDeleteDivIds') alertModalDeleteDivIds;
private selectedDivIds: string[] = [];
@ViewChild(DivIdFormComponent)
public formComponent : DivIdFormComponent;
public checkboxes : CheckDivId[] = [];
public divIds : DivId[] = [];
//public errorMessage: string;
public formGroup : FormGroup;
private searchText : RegExp = new RegExp('');
public keyword: string = "";
public pages: Page[] = [];
public properties:EnvProperties = null;
public formPages: Page[] = [];
public showLoading: boolean = true;
public errorMessage: string = '';
public updateErrorMessage: string = '';
public modalErrorMessage: string = '';
ngOnInit() {
this.route.data
.subscribe((data: { envSpecific: EnvProperties }) => {
HelperFunctions.scroll();
this.title.setTitle('Administration Dashboard | Classes');
this.properties = data.envSpecific;
this.formGroup = this.formComponent.form;
this.getDivIds();
});
}
constructor(private element: ElementRef, private route: ActivatedRoute,
private _router: Router, private title: Title,
private _helpContentService: HelpContentService,
private _clearCacheService: ClearCacheService) {}
getDivIds() {
if(!Session.isLoggedIn()){
this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl": this._router.url} });
} else {
this.showLoading = true;
this.updateErrorMessage = "";
this.errorMessage = "";
this._helpContentService.getAllDivIdsFull(this.properties.adminToolsAPIURL).subscribe(
divIds => {
this.divIds = divIds;
this.checkboxes = [];
let self = this;
divIds.forEach(_ => {
self.checkboxes.push(<CheckDivId>{divId : _, checked : false});
});
this.showLoading = false;
},
error => this.handleError('System error retrieving classes', error));
}
}
// public showModal():void {
// this.modal.showModal();
// }
public toggleCheckBoxes(event) {
this.checkboxes.forEach(_ => _.checked = event.target.checked);
}
public applyCheck(flag : boolean) {
this.checkboxes.forEach(_ => _.checked = flag);
}
public getSelectedDivIds() : string[] {
return this.checkboxes.filter(divId => divId.checked == true).map(checkedDivId => checkedDivId.divId).map(res => res._id);
}
private deleteDivIdsFromArray(ids : string[]) : void {
for(let id of ids) {
let i = this.checkboxes.findIndex(_ => _.divId._id == id);
this.checkboxes.splice(i, 1);
}
}
public confirmDeleteDivId(id : string) {
//this.deleteConfirmationModal.ids = [id];
//this.deleteConfirmationModal.showModal();
this.selectedDivIds = [id];
this.confirmModalOpen();
}
public confirmDeleteSelectedDivIds() {
//this.deleteConfirmationModal.ids = this.getSelectedDivIds();
//this.deleteConfirmationModal.showModal();
this.selectedDivIds = this.getSelectedDivIds();
this.confirmModalOpen();
}
private confirmModalOpen() {
if(!Session.isLoggedIn()){
this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl": this._router.url} });
} else {
this.alertModalDeleteDivIds.cancelButton = true;
this.alertModalDeleteDivIds.okButton = true;
this.alertModalDeleteDivIds.alertTitle = "Delete Confirmation";
this.alertModalDeleteDivIds.message = "Are you sure you want to delete the selected class(es)?";
this.alertModalDeleteDivIds.okButtonText = "Yes";
this.alertModalDeleteDivIds.open();
}
}
public confirmedDeleteDivIds(data: any) {
if(!Session.isLoggedIn()){
this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl": this._router.url} });
} else {
this.showLoading = true;
this.updateErrorMessage = "";
this._helpContentService.deleteDivIds(this.selectedDivIds, this.properties.adminToolsAPIURL).subscribe(
_ => {
this.deleteDivIdsFromArray(this.selectedDivIds);
this.showLoading = false;
this._clearCacheService.clearCache("classes deleted");
},
error => this.handleUpdateError('System error deleting the selected classes', error)
);
}
}
public editDivId(i : number) {
let divId : DivId = this.checkboxes[i].divId;
this.formPages = <Page[]>divId.pages;
/*let pageIds: string[] = [];
let index = 0;
for(let page of <Page[]>divId.pages) {
pageIds[index] = page._id;
index++;
}*/
this.formGroup.patchValue(divId);
this.formComponent.setPages(divId.pages as Page[]);//pageIds);
this.formGroup.controls['portalType'].disable();
//this.updateModal.showModal();
this.divIdsModalOpen(this.alertModalUpdateDivId, "Update", "Update Class");
}
public newDivId() {
this.formGroup.controls['portalType'].enable();
this.formComponent.reset();
this.modalErrorMessage = "";
this.divIdsModalOpen(this.alertModalSaveDivId, "Save", "Add a new Class");
}
private divIdsModalOpen(modal: any, title: string, yesBtn: string) {
if(!Session.isLoggedIn()){
this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl": this._router.url} });
} else {
modal.cancelButton = true;
modal.okButton = true;
modal.alertTitle = title;
modal.okButtonText = yesBtn;
modal.open();
}
}
public divIdSaveConfirmed(data: any) {
if(!Session.isLoggedIn()){
this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl": this._router.url} });
} else {
if(!this.formGroup.valid) {
this.divIdsModalOpen(this.alertModalSaveDivId, "Save", "Add a new Class");
this.modalErrorMessage = "Please fill in all required fields marked with *";
} else {
this.modalErrorMessage = "";
this._helpContentService.saveDivId(<DivId> this.formGroup.value, this.properties.adminToolsAPIURL).subscribe(
divId => {
this.divIdSavedSuccessfully(divId);
this._clearCacheService.clearCache("class saved");
},
error => this.handleUpdateError("System error creating class", error)
);
}
}
}
public divIdUpdateConfirmed(data: any) {
if(!Session.isLoggedIn()){
this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl": this._router.url} });
} else {
if(!this.formGroup.valid) {
this.divIdsModalOpen(this.alertModalUpdateDivId, "Update", "Update Class");
this.modalErrorMessage = "Please fill in all required fields marked with *";
} else {
this.formGroup.controls['portalType'].enable();
this._helpContentService.updateDivId(<DivId> this.formGroup.value, this.properties.adminToolsAPIURL).subscribe(
divId => {
this.divIdUpdatedSuccessfully(divId);
this._clearCacheService.clearCache("class updated");
},
error => this.handleUpdateError("System error updating class", error)
);
}
}
}
public divIdSavedSuccessfully(divId: DivId) {
this.checkboxes.push(<CheckDivId>{divId : divId, checked : false});
this.applyCheck(false);
}
public divIdUpdatedSuccessfully(divId : DivId) {
this.checkboxes.find(checkItem => checkItem.divId._id==divId._id).divId = divId;
this.applyCheck(false);
}
public filterBySearch(text : string) {
this.searchText = new RegExp(text,'i');
this.applyFilter();
}
public applyFilter() {
this.checkboxes = [];
this.divIds.filter(item => this.filterDivIds(item)).forEach(
_ => this.checkboxes.push(<CheckDivId>{divId: _, checked: false})
);
}
public filterDivIds(divId : DivId) : boolean {
let textFlag = this.searchText.toString() == '' || (divId.name + ' ' + divId.portalType).match(this.searchText) != null;
return textFlag;
}
handleUpdateError(message: string, error) {
if(error == null) {
this.formComponent.reset();
} else {
this.updateErrorMessage = message;
console.log('Server responded: ' +error);
}
this.showLoading = false;
}
handleError(message: string, error) {
this.errorMessage = message;
console.log('Server responded: ' + error);
this.showLoading = false;
}
}

21
src/app/pages/divId/divIds.module.ts
View File

@ -1,21 +0,0 @@
import { NgModule } from '@angular/core';
import {RouterModule} from '@angular/router';
import {CommonModule} from '@angular/common';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {FABModule} from '../../utils/fabModule.module';
import {AlertModalModule} from '../../openaireLibrary/utils/modal/alertModal.module';
import {DivIdsComponent} from './divIds.component';
import {DivIdFormComponent} from './divId-form.component';
import {DivIdsRoutingModule} from './divIds-routing.module';
import {AdminLoginGuard} from "../../openaireLibrary/login/adminLoginGuard.guard";
@NgModule({
imports: [
CommonModule, RouterModule, FormsModule, FABModule,
AlertModalModule, ReactiveFormsModule, DivIdsRoutingModule
],
declarations: [DivIdsComponent, DivIdFormComponent],
providers: [AdminLoginGuard],
exports: [DivIdsComponent]
})
export class DivIdsModule { }

56
src/app/pages/divhelpcontent/div-help-content-form.component.html
View File

@ -1,56 +0,0 @@
<div *ngIf="updateErrorMessage" class="uk-alert uk-alert-danger" role="alert">{{updateErrorMessage}}</div>
<div *ngIf="errorMessage" class="uk-alert uk-alert-danger" role="alert">{{errorMessage}}</div>
<div [style.display]="showLoading ? 'inline' : 'none'" class="uk-animation-fade uk-width-1-1" role="alert"><img class="uk-align-center loading-gif"></div>
<div class="uk-alert uk-alert-primary uk-margin-top-large">
<span class="uk-margin-small-right uk-icon" uk-icon="info"></span>
Create or edit help text
<div class="uk-text-small">
Select the class to be displayed, add the content and click active to make it visible to dashboard
</div>
</div>
<form *ngIf="!errorMessage && !showLoading" [formGroup]="myForm">
<div class="form-group">
<div class="uk-margin-bottom" *ngIf="selectedDiv">Class content displayed in page(s): <span *ngFor="let page of selectedDiv.pages let i=index">{{page.name}}<span *ngIf="i<(selectedDiv.pages.length-1)">, </span></span></div>
<div *ngIf="showPageSelect && !editMode" class="form-group">
<label for="pageTag">Select Page</label>
<select id="pageTag" (change)="pageSelected($event)" [value]="pageId ? pageId : ''">
<option *ngIf="!pageId"></option>
<option *ngFor="let page of availablePages" [value]="page._id">{{page.name}}</option>
</select>
</div>
<div *ngIf="pageId || selectedDiv" class="form-group">
<label for="divTag">Select Class</label>
<select formControlName="divId" id="divTag" class="form-control">
<!-- <option *ngIf="selectedDiv" [value]="selectedDiv._id">{{selectedDiv.name}}</option> -->
<option *ngFor="let div of availableDivs" [value]="div._id" (click)="divIdSelected(div)">{{div.name}}</option>
</select>
</div>
</div>
<div class="form-group" [ngClass]="{'has-error':!myForm.controls.content.valid && myForm.controls.content.dirty}">
<label>Content</label>
<div>
<!-- [config]="{allowedContent: true,extraAllowedContent : '*(*)'}"> -->
<ckeditor
[readonly]="false"
debounce="500"
formControlName="content"
[config]="{ extraAllowedContent: '* [uk-*](*) ; span', disallowedContent: 'script; *[on*]', removeButtons: 'Save,NewPage,DocProps,Preview,Print',
extraPlugins: 'divarea'}">
</ckeditor>
</div>
</div>
<div class="form-group">
<label>Select Status</label>
<label class="checkbox">
<span style="font-weight: normal;">Active</span>
<input tabindex="0" type="checkbox" formControlName="isActive">
</label>
</div>
<input type="hidden" formControlName="_id">
</form>
<!-- <div *ngIf="selectedDiv"><span *ngFor="let page of selectedDiv.pages">{{page.name}} </span></div> -->

161
src/app/pages/divhelpcontent/div-help-content-form.component.ts
View File

@ -1,161 +0,0 @@
import { Component, OnInit, Input } from '@angular/core';
import { ActivatedRoute, Router } from "@angular/router";
import { FormGroup, FormBuilder, Validators } from "@angular/forms";
import { Page } from "../../domain/page";
import { DivId } from "../../domain/divId";
import { HelpContentService } from "../../services/help-content.service";
import { EnvProperties } from '../../openaireLibrary/utils/properties/env-properties';
import {Session} from '../../openaireLibrary/login/utils/helper.class';
import {LoginErrorCodes} from '../../openaireLibrary/login/utils/guardHelper.class';
@Component({
selector: 'div-content-form',
templateUrl: './div-help-content-form.component.html',
})
export class DivContentFormComponent implements OnInit{
@Input('group')
myForm: FormGroup;
@Input('communityPid')
communityPid: string;
@Input('pageId')
pageId: string;
@Input('editMode')
editMode: boolean = false;
//public divIdName: string = '';
private communityId: string = '';
showPageSelect: boolean = true;
selectedDiv: DivId;
private availablePages : Page[] = [];
private availableDivs : DivId[] = [];
private ckeditorContent : string;
public properties:EnvProperties = null;
public showLoading: boolean = true;
public errorMessage: string = '';
@Input() updateErrorMessage: string = '';
constructor(private route: ActivatedRoute, private _router: Router, private _fb: FormBuilder, private _helpContentService: HelpContentService){}
ngOnInit() {
this.myForm = this.form;
this.route.data
.subscribe((data: { envSpecific: EnvProperties }) => {
this.properties = data.envSpecific;
this.route.queryParams.subscribe(params => {
if(!Session.isLoggedIn()){
this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl": this._router.url} });
} else {
if(this.pageId) {
this.showPageSelect = false;
this.getDivs(this.pageId);
} else {
if(!this.editMode) {
this._helpContentService.getCommunityPagesWithDivId(this.communityPid, this.properties.adminToolsAPIURL).subscribe(
pages => {
this.availablePages = pages;
this.showLoading = false;
},
error => this.handleError('System error retrieving pages', error));
}
}
this.getCommunity(this.communityPid);
}
});
});
}
public pageSelected(event) {
if(!Session.isLoggedIn()){
this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl": this._router.url} });
} else {
this.getDivs(event.target.value);
}
}
public divIdSelected(div: DivId) {
this.selectedDiv = div;
}
public getCommunity(communityPid: string) {
if(!Session.isLoggedIn()){
this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl": this._router.url} });
} else {
this.showLoading = true;
this.errorMessage = '';
this._helpContentService.getCommunity(this.communityPid, this.properties.adminToolsAPIURL).subscribe(
community => {
this.communityId = community._id;
this.myForm.patchValue({
community: this.communityId
});
this.showLoading = false;
},
error => this.handleError('System error retrieving community', error)
);
}
}
public getDivs(pageId: string) {
if(!Session.isLoggedIn()){
this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl": this._router.url} });
} else {
//this.showLoading = true;
this.errorMessage = '';
this._helpContentService.getDivIdsFullByPortal(pageId, this.properties.adminToolsAPIURL, this.communityPid).subscribe(
divs => {
this.availableDivs = divs;
this.pageId = pageId;
this.showLoading = false;
},
error => this.handleError('System error retrieving pages', error));
}
}
// public selectedDiv(event) {
// console.info(event.target.value);
// }
public get form() {
return this._fb.group({
divId: ['', Validators.required],
content: ['', Validators.required],
isActive: true,
portal: this.communityPid,
_id : '',
});
}
public reset() {
this.myForm.patchValue({
divId: '',
content: '',
isActive: true,
portal: this.communityPid,
_id : ''
});
this.myForm.markAsPristine();
}
handleError(message: string, error) {
this.errorMessage = message;
console.log('Server responded: ' + error);
this.showLoading = false;
}
}

21
src/app/pages/divhelpcontent/div-help-content-form.module.ts
View File

@ -1,21 +0,0 @@
import { NgModule } from '@angular/core';
import {CommonModule} from '@angular/common';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {FABModule} from '../../utils/fabModule.module';
import {AlertModalModule} from '../../openaireLibrary/utils/modal/alertModal.module';
import {SafeHtmlPipeModule} from '../../openaireLibrary/utils/pipes/safeHTMLPipe.module';
import {DivContentFormComponent} from './div-help-content-form.component';
import {CKEditorModule} from 'ng2-ckeditor';
@NgModule({
imports: [
CommonModule, FormsModule,
FABModule, SafeHtmlPipeModule, CKEditorModule,
AlertModalModule, ReactiveFormsModule
],
declarations: [
DivContentFormComponent
],
exports: [DivContentFormComponent]
})
export class DivHelpContentFormModule { }

14
src/app/pages/divhelpcontent/div-help-contents-routing.module.ts
View File

@ -1,14 +0,0 @@
import { NgModule } from '@angular/core';
import {RouterModule} from '@angular/router';
import {IsCommunity} from '../../openaireLibrary/connect/communityGuard/isCommunity.guard';
import {ConnectAdminLoginGuard} from '../../openaireLibrary/connect/communityGuard/connectAdminLoginGuard.guard';
import {DivHelpContentsComponent} from './div-help-contents.component';
@NgModule({
imports: [
RouterModule.forChild([
{ path: '', canActivate: [IsCommunity, ConnectAdminLoginGuard], component: DivHelpContentsComponent}
])
]
})
export class DivHelpContentsRoutingModule { }

155
src/app/pages/divhelpcontent/div-help-contents.component.html
View File

@ -1,155 +0,0 @@
<div id="divHelpContents">
<div class="menubar ">
<div *ngIf="!selectedPageId" class="divHelpContent-title uk-text-large">Class help texts</div>
<div *ngIf="selectedPageId && page" class="divHelpContent-title uk-text-large">Class help texts of page '{{page.name}}'</div>
<div *ngIf="updateErrorMessage" class="uk-alert-danger" uk-alert>
<a class="uk-alert-close" uk-close></a>
{{updateErrorMessage}}
</div>
<div *ngIf="!errorMessage && !showLoading" class="page-controls">
<div class=" filters ">
<div class="show-options uk-float-right">
<button class="uk-button" type="button">Bulk Actions</button>
<div uk-dropdown="mode: click">
<ul class="uk-nav uk-navbar-dropdown-nav"
[attr.uk-tooltip]="getSelectedDivHelpContents().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
title="Select at least one help text">
<li><a [class]="getSelectedDivHelpContents().length == 0 ? 'uk-disabled' : ''" (click)="toggleDivHelpContents(true,getSelectedDivHelpContents())"><i></i> Activate </a></li>
<li><a [class]="getSelectedDivHelpContents().length == 0 ? 'uk-disabled' : ''" (click)="toggleDivHelpContents(false,getSelectedDivHelpContents())"><i></i> Deactivate </a></li>
<li><a [class]="getSelectedDivHelpContents().length == 0 ? 'uk-disabled' : ''" (click)="confirmDeleteSelectedDivHelpContents()"><i></i> Delete </a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- <a *ngIf="!selectedPageId" [queryParams]="{communityId: selectedCommunityPid}" routerLink="/classContents/new" class="uk-button uk-button-primary uk-float-right"><i></i> New help text </a> -->
<!-- <a *ngIf="selectedPageId" [queryParams]="{communityId: selectedCommunityPid, pageId: selectedPageId}" routerLink="/classContents/new" class="uk-button uk-button-primary uk-float-right"><i></i> New class help text </a> -->
<div class="uk-grid uk-margin-bottom">
<form target="BSFormPanel_Admin_1" class="search">
<!-- <input #inputstring (keyup.enter)="filterBySearch(inputstring.value)" placeholder="Class Help text..." type="text" class="uk-input uk-width-medium"/>
<button class="uk-button" type="submit">Search</button> -->
<input type="text" class="uk-input uk-width-medium" placeholder="Class name, content..." aria-describedby="sizing-addon2" [(ngModel)]="keyword" name="keyword" >
<button (click)="filterBySearch(keyword)" type="submit" class=" uk-button">
<span class="uk-icon">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="search" ratio="1"><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>
</span>Search
</button>
</form>
<div *ngIf="!selectedPageId" class="filters marginBottom20">
<div class="links form-group form-inline">
<span>Filter by page:</span>
<select class="uk-select uk-width-medium" (change)="filterByPage($event)">
<option value="">-- none selected --</option>
<option *ngFor="let page of pages" value="{{page._id}}">{{page.name}}</option>
</select>
</div>
</div>
</div>
</div>
<div class="content-wrapper" id="contentWrapper">
<div>
<div class="contentPanel">
<div *ngIf="errorMessage" class="uk-alert uk-alert-danger uk-margin-large-top" role="alert">{{errorMessage}}</div>
<div [style.display]="showLoading ? 'inline' : 'none'" class="uk-animation-fade uk-margin-large-top uk-width-1-1" role="alert"><img class="uk-align-center loading-gif"></div>
<div *ngIf="!errorMessage && !showLoading">
<div class="gwt-HTML">
<div class="users-list"> <!--"row" class removed"-->
<div class="col-md-12">
<!-- <div *ngIf="!selectedPageId" class="filters marginBottom20">
<div class="links form-group form-inline">
<span>Filter by community:</span>
<select class="uk-select uk-width-medium" (change)="filterByCommunity($event)">
<option *ngFor="let community of communities" value="{{community.pid}}">{{community.name}}</option>
</select>
</div>
</div> -->
<div class="uk-alert uk-alert-primary uk-margin-top-large">
<span class="uk-margin-small-right uk-icon" uk-icon="info"></span>
Enable or disable help text to show or hide it from the dashboard
</div>
<ul uk-tab class="links">
<li [ngClass]="{'uk-active' : filters.active==null}" (click)="displayAllDivHelpContents()">
<a>All class help texts <span class="uk-badge">{{counter.all | number}}</span></a>
</li>
<li [ngClass]="{'uk-active' : filters.active==true}" (click)="displayActiveDivHelpContents()">
<a>Active <span class="uk-badge">{{counter.active | number}}</span></a>
</li>
<li [ngClass]="{'uk-active' : filters.active==false}" (click)="displayInactiveDivHelpContents()">
<a>Inactive <span class="uk-badge">{{counter.inactive | number}}</span></a>
</li>
</ul>
<table class="uk-table uk-table-striped">
<thead>
<tr>
<th><input id="allDivHelpContentsCheckbox" type="checkbox" (change)="toggleCheckBoxes($event)"></th>
<th *ngIf="!selectedPageId">Page</th>
<!--th *ngIf="!selectedPageId">Community</th-->
<th>Class</th>
<th>Content</th>
<th>Change status</th>
<th>Actions</th>
</tr>
</thead>
<tbody >
<tr *ngFor="let check of checkboxes; let i=index">
<td><input id="{{check.divHelpContent._id}}" class="checkBox" type="checkbox"
name="entitiescb[]" value="{{check.divHelpContent._id}}" [(ngModel)]="check.checked">
</td>
<td *ngIf="!selectedPageId">
<!-- <div class="page" href="#">{{check.divHelpContent.divId.page.name}}</div> -->
<div class="pages" href="#">
<span *ngFor="let page of check.divHelpContent.divId.pages let i=index">{{page.name}}<span *ngIf="i<(check.divHelpContent.divId.pages.length-1)">, </span></span>
</div>
</td>
<!--td *ngIf="!selectedPageId">
<div class="community" href="#">{{check.divHelpContent.community.name}}</div>
</td-->
<td>
<div class="divId" href="#">{{check.divHelpContent.divId.name}}</div>
</td>
<td>
<!-- <div class="content" [innerHTML]="check.divHelpContent.content | safeHtml"></div>-->
<div class="content">{{check.divHelpContent.content}}</div>
</td>
<td>
<mat-slide-toggle [checked]="check.divHelpContent.isActive"
(change)="($event.source.checked = check.divHelpContent.isActive);toggleDivHelpContents(!check.divHelpContent.isActive,[check.divHelpContent._id])"></mat-slide-toggle>
</td>
<td>
<div class="actions" href="#">
<input title="Edit" src="assets/imgs/icn_edit.png" class="edit uk-margin-small-right" type="image" (click)="editDivHelpContent(check.divHelpContent._id)">
<input title="Delete" src="assets/imgs/icn_trash.png" class="delete" type="image" (click)="confirmDeleteDivHelpContent(check.divHelpContent._id)">
</div>
</td>
</tr>
</tbody>
</table>
<div *ngIf="checkboxes.length==0" class="col-md-12">
<div class="uk-alert-warning" uk-alert>No class help texts found</div>
</div>
</div>
</div>
</div>
<a *ngIf="selectedPageId && page" [queryParams]="{type: page.type, communityId: selectedCommunityPid}" routerLink="/pages">Go back to {{page.type}} pages</a>
</div>
</div>
</div>
</div>
<fab (clicked)="newClassContent()"></fab>
</div>
<!-- <delete-confirmation-dialog #deleteConfirmationModal [isModalShown]="isModalShown" (emmitObject)="confirmedDeleteDivHelpContents($event)">
Are you sure you want to delete the selected help text(s)?
</delete-confirmation-dialog> -->
<modal-alert #AlertModalDeleteDivHelpContents (alertOutput)="confirmedDeleteDivHelpContents($event)"></modal-alert>

368
src/app/pages/divhelpcontent/div-help-contents.component.ts
View File

@ -1,368 +0,0 @@
import { Component, ViewChild, OnInit, ElementRef } from '@angular/core';
import { Router, ActivatedRoute } from "@angular/router";
import { FormGroup } from "@angular/forms";
import { HelpContentService } from "../../services/help-content.service";
import { DivHelpContent, CheckDivHelpContent, DivHelpContentFilterOptions } from "../../domain/div-help-content";
import { Page } from "../../domain/page";
import { Portal } from "../../domain/portal";
import { DivId } from "../../domain/divId";
import { EnvProperties } from '../../openaireLibrary/utils/properties/env-properties';
import {SafeHtmlPipe} from '../../openaireLibrary/utils/pipes/safeHTML.pipe';
import {Session} from '../../openaireLibrary/login/utils/helper.class';
import {LoginErrorCodes} from '../../openaireLibrary/login/utils/guardHelper.class';
import {HelperFunctions} from "../../openaireLibrary/utils/HelperFunctions.class";
import {PageHelpContent} from "../../domain/page-help-content";
import {Title} from '@angular/platform-browser';
import {ClearCacheService} from "../../openaireLibrary/services/clear-cache.service";
@Component({
selector: 'div-help-contents',
templateUrl: './div-help-contents.component.html',
})
export class DivHelpContentsComponent implements OnInit {
// @ViewChild('deleteConfirmationModal')
// public deleteConfirmationModal : DeleteConfirmationDialogComponent;
@ViewChild('AlertModalDeleteDivHelpContents') alertModalDeleteDivHelpContents;
private selectedDivContents: string[] = [];
public checkboxes : CheckDivHelpContent[] = [];
public divHelpContents : DivHelpContent[] = [];
//public errorMessage: string;
public formGroup : FormGroup;
public pages: Page[];
public checkboxAll : boolean = false;
public filters : DivHelpContentFilterOptions = {id : '', active : null, text : new RegExp('')};
public keyword: string = "";
public counter = {all : 0, active : 0, inactive : 0};
public communities: Portal[] = [];
public selectedCommunityPid: string;
public selectedPageId: string;
public community: Portal;
public page: Page;
public properties:EnvProperties = null;
public showLoading: boolean = true;
public errorMessage: string = '';
public updateErrorMessage: string = '';
ngOnInit() {
this.route.data
.subscribe((data: { envSpecific: EnvProperties }) => {
this.properties = data.envSpecific;
this.route.queryParams.subscribe(params => {
HelperFunctions.scroll();
this.title.setTitle('Administration Dashboard | Class Help Texts');
this.selectedCommunityPid = params['communityId'];
this.selectedPageId = params['pageId'];
if(this.selectedCommunityPid && this.selectedPageId) {
this.getPage(this.selectedPageId);
} else if(this.selectedCommunityPid){
this.selectedPageId = "";
this.getPages(this.selectedCommunityPid);
}
});
});
}
constructor(private element: ElementRef, private route: ActivatedRoute,
private title: Title,
private _helpService: HelpContentService, private router : Router,
private _clearCacheService: ClearCacheService) {}
getPage(pageId: string) {
if(!Session.isLoggedIn()){
this.router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl": this.router.url} });
} else {
this.showLoading = true;
this.updateErrorMessage = "";
this.errorMessage = "";
this._helpService.getPageByPortal(pageId, this.properties.adminToolsAPIURL, this.selectedCommunityPid).subscribe(
page => {
// if( (this.selectedCommunityPid == 'openaire' && !page.openaire)
// || (this.selectedCommunityPid == 'connect' && !page.connect)
// || (this.selectedCommunityPid != 'openaire' && this.selectedCommunityPid != 'connect' && !page.communities)) {
if(this.properties.adminToolsPortalType != page.portalType) {
this.router.navigate(['/classContents'], { queryParams: { "communityId": this.selectedCommunityPid} });
} else {
this.page = page;
this.getDivHelpContents(this.selectedCommunityPid);
}
},
error => this.handleError('System error retrieving page', error));
}
}
getPages(community_pid: string) {
if(!Session.isLoggedIn()){
this.router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl": this.router.url} });
} else {
this.showLoading = true;
this.updateErrorMessage = "";
this.errorMessage = "";
this._helpService.getCommunityPagesWithDivId(community_pid, this.properties.adminToolsAPIURL).subscribe(
//this._helpService.getPagesWithDivIds(community_pid, this.properties.adminToolsAPIURL).subscribe(
pages => {
this.pages = pages;
this.getDivHelpContents(this.selectedCommunityPid);
},
error => this.handleError('System error retrieving pages', error));
}
}
public countDivHelpContents() {
this.counter = {all : 0, active : 0, inactive : 0};
let filter = Object.assign({},this.filters);
filter.active = null;
this.divHelpContents.forEach(_ => {
if(this.filterDivHelpContent(_,filter)){
if (_.isActive==true) this.counter.active++;
else this.counter.inactive++
}
});
this.counter.all = this.counter.active + this.counter.inactive;
}
getDivHelpContents(community_pid: string) {
if(!Session.isLoggedIn()){
this.router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl": this.router.url} });
} else {
this._helpService.getCommunityDivHelpContents(community_pid, this.properties.adminToolsAPIURL).subscribe(
divHelpContents => {
this.divHelpContents = divHelpContents as Array<DivHelpContent>;
this.counter.all = this.divHelpContents.length;
this.checkboxes = [];
for (let i = this.divHelpContents.length - 1; i >= 0; i -= 1) {
//for (let i = 0; i < this.divHelpContents.length; i++) {
let divId: DivId = this.divHelpContents[i].divId as DivId;
let pages: Page[] = divId.pages as Page[];
const pageIds = pages.map(x => x._id);
if(!this.selectedPageId || pageIds.includes(this.selectedPageId)) {
this.cutContent(this.divHelpContents[i]);
this.checkboxes.unshift(<CheckDivHelpContent>{divHelpContent : this.divHelpContents[i], checked : false});
} else {
this.divHelpContents.splice(i, 1);
}
}
this.countDivHelpContents();
this.showLoading = false;
},
error => this.handleError('System error retrieving page contents', error));
}
}
public toggleCheckBoxes(event) {
this.checkboxes.forEach(_ => _.checked = event.target.checked);
this.checkboxAll = event.target.checked;
}
public applyCheck(flag : boolean) {
this.checkboxes.forEach(_ => _.checked = flag);
this.checkboxAll = false;
}
public getSelectedDivHelpContents() : string[] {
return this.checkboxes.filter(divHelpContent => divHelpContent.checked == true)
.map(checkedDivHelpContent => checkedDivHelpContent.divHelpContent).map(res => res._id);
}
public confirmDeleteDivHelpContent(id : string) {
//this.deleteConfirmationModal.ids = [id];
//this.deleteConfirmationModal.showModal();
this.selectedDivContents = [id];
this.confirmModalOpen();
}
public confirmDeleteSelectedDivHelpContents() {
//this.deleteConfirmationModal.ids = this.getSelectedDivHelpContents();
//this.deleteConfirmationModal.showModal();
this.selectedDivContents = this.getSelectedDivHelpContents();
this.confirmModalOpen();
}
private confirmModalOpen() {
if(!Session.isLoggedIn()){
this.router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl": this.router.url} });
} else {
this.alertModalDeleteDivHelpContents.cancelButton = true;
this.alertModalDeleteDivHelpContents.okButton = true;
this.alertModalDeleteDivHelpContents.alertTitle = "Delete Confirmation";
this.alertModalDeleteDivHelpContents.message = "Are you sure you want to delete the help text(s)?";
this.alertModalDeleteDivHelpContents.okButtonText = "Yes";
this.alertModalDeleteDivHelpContents.open();
}
}
public confirmedDeleteDivHelpContents(data: any) {
if(!Session.isLoggedIn()){
this.router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl": this.router.url} });
} else {
this.showLoading = true;
this.updateErrorMessage = "";
this._helpService.deleteDivHelpContents(this.selectedDivContents, this.properties.adminToolsAPIURL, this.selectedCommunityPid).subscribe(
_ => {
this.deleteDivHelpContentsFromArray(this.selectedDivContents);
this.showLoading = false;
this._clearCacheService.clearCache("class help contents deleted");
},
error => this.handleUpdateError('System error deleting the selected class content(s)', error)
);
}
}
private deleteDivHelpContentsFromArray(ids : string[]) : void {
for(let id of ids) {
let iqc = this.checkboxes.findIndex(_ => _.divHelpContent._id == id);
let iq = this.divHelpContents.findIndex(_ => _._id == id);
this.checkboxes.splice(iqc, 1);
this.divHelpContents.splice(iqc, 1);
}
this.countDivHelpContents();
}
public editDivHelpContent(id : string) {
//this.router.navigate(['/pageContents/edit/', _id]);
if(this.selectedPageId) {
this.router.navigate( ['/classContents/edit/'], { queryParams: { "classContentId": id, "communityId": this.selectedCommunityPid, "pageId": this.selectedPageId } } );
} else {
this.router.navigate( ['/classContents/edit/'], { queryParams: { "classContentId": id, "communityId": this.selectedCommunityPid } } );
}
}
public toggleDivHelpContents(status : boolean, ids : string[]) {
if(!Session.isLoggedIn()){
this.router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl": this.router.url} });
} else {
this.updateErrorMessage = "";
this._helpService.toggleDivHelpContents(ids,status, this.properties.adminToolsAPIURL, this.selectedCommunityPid).subscribe(
() => {
for(let id of ids) {
let i = this.checkboxes.findIndex(_ => _.divHelpContent._id == id);
this.checkboxes[i].divHelpContent.isActive=status;
}
this.countDivHelpContents();
this.applyCheck(false);
this._clearCacheService.clearCache("class help contents toggled (status: "+status+")");
},
error => this.handleUpdateError('System error changing the status of the selected page content(s)', error)
);
}
}
public divHelpContentSavedSuccessfully(divHelpContent: DivHelpContent) {
this.cutContent(divHelpContent);
this.checkboxes.push(<CheckDivHelpContent>{divHelpContent : divHelpContent, checked : false});
this.divHelpContents.push(divHelpContent);
this.applyCheck(false);
this.countDivHelpContents();
}
public divHelpContentUpdatedSuccessfully(divHelpContent : DivHelpContent) {
this.checkboxes.find(checkItem => checkItem.divHelpContent._id==divHelpContent._id).divHelpContent = divHelpContent;
let index = this.divHelpContents.findIndex(checkItem => checkItem._id==divHelpContent._id);
this.divHelpContents[index] = divHelpContent;
this.applyCheck(false);
this.countDivHelpContents();
}
public filterDivHelpContent(divHelpContent : DivHelpContent, filters : DivHelpContentFilterOptions) : boolean {
let divId: DivId = divHelpContent.divId as DivId;
let pages: Page[] = <Page[]>divId.pages;
let pageIds: string[] = pages.map(x => x._id);
let idFlag = filters.id == '' || /*(<Page[]>divId.pages)._id == filters.id*/ pageIds.includes(filters.id);
let activeFlag = filters.active == null || divHelpContent.isActive == filters.active;
let textFlag = filters.text.toString() == '' || (divHelpContent.content).match(filters.text) != null
|| ((<DivId>divHelpContent.divId).name).match(filters.text) != null;
return idFlag && activeFlag && textFlag;
}
public cutContent(divHelpContent: DivHelpContent) {
divHelpContent.content = divHelpContent.content.replace(/<[^>]*>/g, '');
divHelpContent.content = divHelpContent.content.replace(/(\r\n|\n|\r| +(?= ))|\s\s+/gm," ");
if(divHelpContent.content.length > 200) {
divHelpContent.content = divHelpContent.content.substr(0, 200) + "...";
}
}
public applyFilter() {
this.checkboxes = [];
this.divHelpContents.filter(item => this.filterDivHelpContent(item,this.filters)).forEach(
_ => {
this.cutContent(_);
this.checkboxes.push(<CheckDivHelpContent>{divHelpContent: _, checked: false})
}
);
this.countDivHelpContents();
}
public filterByPage(event: any) {
this.filters.id = event.target.value;
this.applyFilter();
}
public displayAllDivHelpContents() {
this.filters.active = null;
this.applyFilter();
}
public displayActiveDivHelpContents() {
this.filters.active = true;
this.applyFilter();
}
public filterBySearch(text : string) {
this.filters.text = new RegExp(text, "i");
this.applyFilter();
}
public displayInactiveDivHelpContents() {
this.filters.active = false;
this.applyFilter();
}
handleError(message: string, error) {
this.errorMessage = message;
console.log('Server responded: ' + error);
this.showLoading = false;
}
handleUpdateError(message: string, error) {
this.updateErrorMessage = message;
console.log('Server responded: ' +error);
this.showLoading = false;
}
public newClassContent() {
if(this.selectedPageId) {
this.router.navigate( ['/classContents/new'], { queryParams: {communityId: this.selectedCommunityPid, pageId: this.selectedPageId} } );
} else {
this.router.navigate( ['/classContents/new'], { queryParams: {communityId: this.selectedCommunityPid} } );
}
}
}

Some files were not shown because too many files have changed in this diff Show More