Revision 60306
Added by Argiro Kokogiannaki almost 4 years ago
| modules/uoa-admin-portal/branches/new-UI/src/app/pages/community-routing.module.ts | ||
|---|---|---|
| 20 | 20 |
data: {
|
| 21 | 21 |
param: 'community' |
| 22 | 22 |
} |
| 23 |
}, |
|
| 24 |
{
|
|
| 25 |
path: 'claims', |
|
| 26 |
loadChildren: './claims/claims.module#ClaimsModule' |
|
| 27 |
}, |
|
| 28 |
{
|
|
| 29 |
path: 'customize-layout', |
|
| 30 |
loadChildren: './customization/customization.module#CustomizationModule', |
|
| 23 | 31 |
} |
| 24 | 32 |
])] |
| 25 | 33 |
}) |
| modules/uoa-admin-portal/branches/new-UI/src/app/pages/customization/customization.module.ts | ||
|---|---|---|
| 12 | 12 |
import {BorderComponent} from './Border.component';
|
| 13 | 13 |
import {LayoutService} from '../../openaireLibrary/services/layout.service';
|
| 14 | 14 |
import {AlertModalModule} from '../../openaireLibrary/utils/modal/alertModal.module';
|
| 15 |
import {PageContentModule} from '../../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module';
|
|
| 15 | 16 |
|
| 16 |
// import {IsCommunity} from '../../openaireLibrary/connect/communityGuard/isCommunity.guard';
|
|
| 17 |
// import {ConnectAdminLoginGuard} from '../../openaireLibrary/connect/communityGuard/connectAdminLoginGuard.guard';
|
|
| 18 | 17 |
@NgModule({
|
| 19 | 18 |
imports: [ |
| 20 |
CustomizationRoutingModule, CommonModule, FormsModule, RouterModule, ColorPickerModule, AlertModalModule |
|
| 19 |
CustomizationRoutingModule, CommonModule, FormsModule, RouterModule, ColorPickerModule, AlertModalModule, PageContentModule
|
|
| 21 | 20 |
], |
| 22 | 21 |
declarations: [ |
| 23 | 22 |
CustomizationComponent, FontSizeComponent, ColorComponent, BorderComponent |
| modules/uoa-admin-portal/branches/new-UI/src/app/pages/customization/customization.component.html | ||
|---|---|---|
| 16 | 16 |
</div> |
| 17 | 17 |
</ng-template> |
| 18 | 18 |
|
| 19 |
|
|
| 19 |
<div page-content class="admin-pages"> |
|
| 20 |
<div header> |
|
| 21 |
</div> |
|
| 22 |
<div inner> |
|
| 20 | 23 |
<div class="uk-grid uk-height-1-1"> |
| 21 | 24 |
<div class="uk-width-1-5 uk-background-muted customizationMenuPanel uk-padding-small "> |
| 22 | 25 |
<div *ngIf="menuSelected == 'main'" class=" "> |
| ... | ... | |
| 53 | 56 |
<ul class="uk-list uk-list-divider"> |
| 54 | 57 |
<li><a (click)="menuSelected = 'backgrounds'">Backgrounds</a></li> |
| 55 | 58 |
<li><a (click)="menuSelected = 'fonts'">Fonts</a></li> |
| 56 |
<li><a (click)="menuSelected = 'elements'">Elements</a></li> |
|
| 57 | 59 |
<li><a (click)="menuSelected = 'identity'">Identity</a></li> |
| 58 | 60 |
<li><a (click)="menuSelected = 'buttons'">Buttons</a></li> |
| 59 | 61 |
</ul> |
| ... | ... | |
| 341 | 343 |
|
| 342 | 344 |
</div> |
| 343 | 345 |
|
| 344 |
<div *ngIf="menuSelected == 'elements'" class=" "> |
|
| 345 |
<div class="uk-background-primary uk-padding-small uk-light"> |
|
| 346 |
<a class="uk-margin-right uk-link " (click)="back();"> |
|
| 347 |
<span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" |
|
| 348 |
data-svg="arrow-left"><polyline fill="none" stroke="#000" |
|
| 349 |
points="10 14 5 9.5 10 5"></polyline><line |
|
| 350 |
fill="none" stroke="#000" x1="16" y1="9.5" x2="5" y2="9.52"></line></svg></span></a> |
|
| 351 |
<span> Elements</span> |
|
| 352 |
</div> |
|
| 353 |
<ng-container |
|
| 354 |
*ngTemplateOutlet="applyResetButtons ; context: { }"></ng-container>
|
|
| 355 |
<div class="uk-alert uk-text-small uk-padding-small"> |
|
| 356 |
<span class="uk-icon"><svg width="14" height="14" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" |
|
| 357 |
data-svg="info"><path |
|
| 358 |
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 |
|
| 359 |
fill="none" stroke="#000" stroke-width="1.1" cx="10" cy="10" r="9"></circle></svg></span> |
|
| 360 |
Customize the layout of dashboard elements. |
|
| 361 |
</div> |
|
| 362 |
<div class="uk-padding-small customizationMenuItems uk-margin-small"> |
|
| 363 |
<ul uk-accordion> |
|
| 364 |
<li class="uk-open"> |
|
| 365 |
<a class="uk-accordion-title" href="#"> Subject tags & Statistics cubes</a> |
|
| 366 |
<div class="uk-accordion-content uk-margin-remove-top"> |
|
| 367 |
<!-- <div>Appereance</div>--> |
|
| 368 |
<color [color]="draftCustomizationOptions.panel.panelElements.backgroundColor" (colorChange)= |
|
| 369 |
" draftCustomizationOptions.panel.panelElements.backgroundColor= $event;" |
|
| 370 |
label="Background Color"></color> |
|
| 371 |
<div class="uk-margin-small-top">FONTS</div> |
|
| 372 |
<color [color]="draftCustomizationOptions.panel.panelElements.color" (colorChange)= |
|
| 373 |
" draftCustomizationOptions.panel.panelElements.color= $event;"></color> |
|
| 374 |
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold">QUICK LOOK |
|
| 375 |
<span class="uk-icon uk-link " (click)="resetElements()"> |
|
| 376 |
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" |
|
| 377 |
data-svg="refresh"><path fill="none" stroke="#000" stroke-width="1.1" |
|
| 378 |
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 |
|
| 379 |
fill="none" stroke="#000" points="9.9 2 12.79 4.89 9.79 7.9"></polyline></svg> |
|
| 380 |
</span> |
|
| 381 |
</div> |
|
| 382 |
<div class="uk-padding-small uk-text-center" |
|
| 383 |
[style.background-color]="draftCustomizationOptions.panel.background.color"> |
|
| 384 |
<div class="uk-card uk-padding-small uk-margin-auto" style="width:100px; height:100px" |
|
| 385 |
[style.background-color]="draftCustomizationOptions.panel.panelElements.backgroundColor" |
|
| 386 |
[style.color]="draftCustomizationOptions.panel.panelElements.color">Statistics cube |
|
| 387 |
</div> |
|
| 388 |
<div class="uk-label uk-margin-top" |
|
| 389 |
[style.background-color]="draftCustomizationOptions.panel.panelElements.backgroundColor" |
|
| 390 |
[style.color]="draftCustomizationOptions.panel.panelElements.color">Subject tag |
|
| 391 |
</div> |
|
| 392 |
</div> |
|
| 393 |
|
|
| 394 |
</div> |
|
| 395 |
</li> |
|
| 396 |
</ul> |
|
| 397 |
</div> |
|
| 398 |
|
|
| 399 |
|
|
| 400 |
</div> |
|
| 401 |
|
|
| 402 | 346 |
<div *ngIf="menuSelected == 'identity'" class=" "> |
| 403 | 347 |
<div class="uk-background-primary uk-padding-small uk-light"> |
| 404 | 348 |
<a class="uk-margin-right uk-link " (click)="back();"> |
| ... | ... | |
| 663 | 607 |
</div> |
| 664 | 608 |
|
| 665 | 609 |
</div> |
| 610 |
</div> |
|
| 611 |
</div> |
|
| 666 | 612 |
<modal-alert #backAlert (alertOutput)="resetToAppliedOptions()"> |
| 667 | 613 |
<div class="uk-text-bold uk-h5">If you leave that Page without applying or publishing, changes will be lost.</div> |
| 668 | 614 |
<div> Are you sure that you want to proceed?</div> |
| modules/uoa-admin-portal/branches/new-UI/src/app/pages/customization/customization.component.ts | ||
|---|---|---|
| 5 | 5 |
|
| 6 | 6 |
import {Session} from '../../openaireLibrary/login/utils/helper.class';
|
| 7 | 7 |
import {LoginErrorCodes} from '../../openaireLibrary/login/utils/guardHelper.class';
|
| 8 |
import {Curator} from '../../openaireLibrary/utils/entities/CuratorInfo';
|
|
| 9 | 8 |
import {DomSanitizer, Title} from '@angular/platform-browser';
|
| 10 | 9 |
import {CustomizationOptions} from '../../openaireLibrary/connect/community/CustomizationOptions';
|
| 11 | 10 |
import {StringUtils} from '../../openaireLibrary/utils/string-utils.class';
|
| 12 | 11 |
import {LayoutService} from '../../openaireLibrary/services/layout.service';
|
| 13 | 12 |
import {AlertModal} from '../../openaireLibrary/utils/modal/alert';
|
| 13 |
import {properties} from '../../../environments/environment';
|
|
| 14 | 14 |
|
| 15 | 15 |
@Component({
|
| 16 | 16 |
selector: 'customization', |
| ... | ... | |
| 54 | 54 |
|
| 55 | 55 |
|
| 56 | 56 |
ngOnInit() {
|
| 57 |
this.route.data.subscribe((data: { envSpecific: EnvProperties }) => {
|
|
| 58 |
this.properties = data.envSpecific; |
|
| 59 |
if (!Session.isLoggedIn()) {
|
|
| 60 |
this._router.navigate(['/user-info'], {
|
|
| 61 |
queryParams: {'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url}
|
|
| 57 |
this.properties = properties; |
|
| 58 |
if (!Session.isLoggedIn()) {
|
|
| 59 |
this._router.navigate(['/user-info'], {
|
|
| 60 |
queryParams: {'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url}
|
|
| 61 |
}); |
|
| 62 |
} else {
|
|
| 63 |
this.route.params.subscribe((params) => {
|
|
| 64 |
this.communityId = params['community']; |
|
| 65 |
this.title.setTitle('Administration Dashboard | Customization');
|
|
| 66 |
this.showLoading = true; |
|
| 67 |
this.errorMessage = ''; |
|
| 68 |
this.successfulSaveMessage = ''; |
|
| 69 |
this.layoutService.getLayout(this.properties, this.communityId).subscribe(layout => {
|
|
| 70 |
this.publishedCustomizationOptions = (layout?layout:new CustomizationOptions()); |
|
| 71 |
this.initializeCustomizationOptions(true); |
|
| 72 |
}, error => {
|
|
| 73 |
this.publishedCustomizationOptions = new CustomizationOptions(); |
|
| 74 |
this.initializeCustomizationOptions(true); |
|
| 75 |
this.errorMessage = "An error occured fetching customizations options" |
|
| 62 | 76 |
}); |
| 63 |
} else {
|
|
| 64 |
this.route.queryParams.subscribe((params) => {
|
|
| 65 |
this.communityId = params['communityId']; |
|
| 66 |
this.title.setTitle('Administration Dashboard | Customization');
|
|
| 67 |
this.showLoading = true; |
|
| 68 |
this.errorMessage = ''; |
|
| 69 |
this.successfulSaveMessage = ''; |
|
| 70 |
this.layoutService.getLayout(this.properties, this.communityId).subscribe(layout => {
|
|
| 71 |
this.publishedCustomizationOptions = (layout?layout:new CustomizationOptions()); |
|
| 72 |
this.initializeCustomizationOptions(true); |
|
| 73 |
}, error => {
|
|
| 74 |
this.publishedCustomizationOptions = new CustomizationOptions(); |
|
| 75 |
this.initializeCustomizationOptions(true); |
|
| 76 |
this.errorMessage = "An error occured fetching customizations options" |
|
| 77 |
}); |
|
| 78 |
}); |
|
| 79 |
} |
|
| 80 |
}); |
|
| 77 |
}); |
|
| 78 |
} |
|
| 81 | 79 |
|
| 80 |
|
|
| 82 | 81 |
} |
| 83 | 82 |
hasChanges(object1,object2):boolean{
|
| 84 | 83 |
return JSON.stringify(object1) != JSON.stringify(object2); |
| ... | ... | |
| 126 | 125 |
this.resetBackgrounds(); |
| 127 | 126 |
} else if (this.menuSelected == 'fonts') {
|
| 128 | 127 |
this.resetFonts(); |
| 129 |
} else if (this.menuSelected == 'elements') {
|
|
| 130 |
this.resetElements(); |
|
| 131 | 128 |
} else if (this.menuSelected == 'buttons') {
|
| 132 | 129 |
this.resetButtons(); |
| 133 | 130 |
} else if (this.menuSelected == 'identity') {
|
| ... | ... | |
| 191 | 188 |
this.linkLightBackgroundPreview=this.changeFontsStyle(this.publishedCustomizationOptions.links.lightBackground, this.publishedCustomizationOptions.links.lightBackground.color); |
| 192 | 189 |
} |
| 193 | 190 |
|
| 194 |
resetElements() {
|
|
| 195 |
this.draftCustomizationOptions.panel.panelElements = this.copyObject(this.publishedCustomizationOptions.panel.panelElements); |
|
| 196 | 191 |
|
| 197 |
this.appliedCustomizationOptions.panel.panelElements = this.copyObject(this.publishedCustomizationOptions.panel.panelElements); |
|
| 198 |
} |
|
| 199 |
|
|
| 200 | 192 |
resetButtons() {
|
| 201 | 193 |
this.resetButtonsDark(); |
| 202 | 194 |
this.resetButtonsLight(); |
| ... | ... | |
| 365 | 357 |
|
| 366 | 358 |
this.makeFileRequest(this.properties.utilsService + '/upload?type=json', [], filesToUpload).then((result) => {
|
| 367 | 359 |
let layout:CustomizationOptions = JSON.parse(result.toString()); |
| 368 |
if( layout && layout.panel && layout.links && layout.buttons && layout.box){
|
|
| 360 |
if( layout && layout.panel && layout.links && layout.buttons){
|
|
| 369 | 361 |
this.draftCustomizationOptions = layout; |
| 370 | 362 |
//put the same id to not have any difference |
| 371 | 363 |
if(this.publishedCustomizationOptions['_id']){
|
| modules/uoa-admin-portal/branches/new-UI/src/app/pages/claims/claims.module.ts | ||
|---|---|---|
| 2 | 2 |
import {ClaimsAdminModule} from '../../openaireLibrary/claims/claimsAdmin/claimsAdmin.module';
|
| 3 | 3 |
import {ClaimsComponent} from './claims.component';
|
| 4 | 4 |
import {ClaimsRoutingModule} from './claims-routing.module';
|
| 5 |
import {PageContentModule} from '../../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module';
|
|
| 5 | 6 |
@NgModule({
|
| 6 | 7 |
imports: [ |
| 7 |
ClaimsAdminModule, ClaimsRoutingModule |
|
| 8 |
ClaimsAdminModule, ClaimsRoutingModule, PageContentModule
|
|
| 8 | 9 |
], |
| 9 | 10 |
declarations: [ClaimsComponent], |
| 10 | 11 |
exports: [ClaimsComponent] |
| modules/uoa-admin-portal/branches/new-UI/src/app/pages/claims/claims-routing.module.ts | ||
|---|---|---|
| 1 |
import { NgModule } from '@angular/core';
|
|
| 1 |
import {NgModule} from '@angular/core';
|
|
| 2 | 2 |
import {RouterModule} from '@angular/router';
|
| 3 |
import {IsCommunity} from '../../openaireLibrary/connect/communityGuard/isCommunity.guard';
|
|
| 4 |
import {ConnectAdminLoginGuard} from '../../openaireLibrary/connect/communityGuard/connectAdminLoginGuard.guard';
|
|
| 5 | 3 |
import {ClaimsComponent} from './claims.component';
|
| 6 | 4 |
|
| 7 | 5 |
@NgModule({
|
| 8 | 6 |
imports: [ |
| 9 | 7 |
RouterModule.forChild([ |
| 10 |
{ path: '', canActivate: [IsCommunity, ConnectAdminLoginGuard], component: ClaimsComponent}
|
|
| 8 |
{ path: '', component: ClaimsComponent}
|
|
| 11 | 9 |
]) |
| 12 | 10 |
] |
| 13 | 11 |
}) |
| modules/uoa-admin-portal/branches/new-UI/src/app/pages/claims/claims.component.ts | ||
|---|---|---|
| 1 |
import {Component, OnInit} from '@angular/core';
|
|
| 2 |
import {ActivatedRoute} from '@angular/router';
|
|
| 3 |
import {properties} from '../../../environments/environment';
|
|
| 1 | 4 |
|
| 2 |
import { Component, ViewChild, OnInit } from '@angular/core';
|
|
| 3 |
import { ActivatedRoute } from '@angular/router';
|
|
| 4 |
import {EnvProperties} from '../../openaireLibrary/utils/properties/env-properties';
|
|
| 5 |
|
|
| 6 | 5 |
@Component({
|
| 7 | 6 |
selector: 'claims', |
| 8 |
template: ` <claims-admin fetchBy="Context" [fetchId]=communityPid [isConnect]="true" [claimsInfoURL]=claimsInfoURL [externalPortalUrl]="externalPortalUrl"> |
|
| 9 |
</claims-admin>`, |
|
| 7 |
template: ` |
|
| 8 |
<div page-content class="admin-pages"> |
|
| 9 |
<div header> |
|
| 10 |
</div> |
|
| 11 |
<div inner> |
|
| 12 |
<claims-admin fetchBy="Context" [fetchId]=communityPid [isConnect]="true" [claimsInfoURL]=claimsInfoURL [externalPortalUrl]="externalPortalUrl"> |
|
| 13 |
</claims-admin> |
|
| 14 |
</div> |
|
| 15 |
</div> |
|
| 16 |
`, |
|
| 10 | 17 |
}) |
| 11 | 18 |
|
| 12 | 19 |
export class ClaimsComponent implements OnInit {
|
| 13 | 20 |
|
| 14 |
communityPid:string; |
|
| 15 |
claimsInfoURL:string; |
|
| 16 |
externalPortalUrl:string ="";
|
|
| 21 |
communityPid: string;
|
|
| 22 |
claimsInfoURL: string;
|
|
| 23 |
externalPortalUrl = '';
|
|
| 17 | 24 |
|
| 18 | 25 |
ngOnInit() {
|
| 26 |
this.route.params.subscribe(params => {
|
|
| 27 |
if (params && params['community']) {
|
|
| 28 |
this.communityPid = params['community']; |
|
| 29 |
this.claimsInfoURL = properties.claimsInformationLink; |
|
| 30 |
this.externalPortalUrl = 'https://' + (properties.environment == 'beta' ? 'beta.' : '') + ((this.communityPid == 'openaire') ? 'explore' : this.communityPid) + '.openaire.eu'; |
|
| 31 |
} |
|
| 32 |
}); |
|
| 19 | 33 |
|
| 20 |
this.route.queryParams.subscribe(params => {
|
|
| 21 |
this.communityPid = params['communityId']; |
|
| 22 |
|
|
| 23 |
}); |
|
| 24 |
this.route.data.subscribe((data: { envSpecific: EnvProperties }) => {
|
|
| 25 |
this.claimsInfoURL = data.envSpecific.claimsInformationLink; |
|
| 26 |
console.log(this.claimsInfoURL); |
|
| 27 |
this.externalPortalUrl = "https://"+(data.envSpecific.environment =='beta'?'beta.':'')+((this.communityPid == "openaire")?"explore":this.communityPid)+".openaire.eu" |
|
| 28 |
}); |
|
| 29 | 34 |
} |
| 30 |
|
|
| 31 | 35 |
constructor(private route: ActivatedRoute) {}
|
| 32 |
|
|
| 33 | 36 |
} |
| modules/uoa-admin-portal/branches/new-UI/src/app/app.component.ts | ||
|---|---|---|
| 206 | 206 |
this.sideBarItems.push(new MenuItem("community", "Community Info", "", "/" + this.community.communityId, false, [], [], {}));
|
| 207 | 207 |
this.sideBarItems.push(new MenuItem("users", "Users", "", "/" + this.community.communityId + "/users", false, [], [], {}));
|
| 208 | 208 |
this.sideBarItems.push(new MenuItem("admin-tools", "Pages & Entities", "", "/" + this.community.communityId + "/admin-tools/pages", false, [], [], {}, null, null, null, "/" + this.community.communityId + "/admin-tools"));
|
| 209 |
this.sideBarItems.push(new MenuItem("claims", "Claims", "", "/" + this.community.communityId + "/claims", false, [], [], {}));
|
|
| 210 |
this.sideBarItems.push(new MenuItem("customize", "Customize", "", "/" + this.community.communityId + "/customize-layout", false, [], [], {}));
|
|
| 211 |
|
|
| 209 | 212 |
if (this.community.type === 'ri') {
|
| 210 | 213 |
this.sideBarItems.push(new MenuItem("mining", "Mining", "", "/" + this.community.communityId + "/mining/manage-profiles", false, [], [], {}, null, null, null, "/" + this.community.communityId + "/mining"));
|
| 211 | 214 |
} |
| modules/uoa-admin-portal/branches/new-UI/src/assets/css/connect-custom.css | ||
|---|---|---|
| 65 | 65 |
/*Customization*/ |
| 66 | 66 |
|
| 67 | 67 |
.customizationMenuPanel {
|
| 68 |
background-color: #999999;
|
|
| 68 |
/*background-color: #999999;*/
|
|
| 69 | 69 |
} |
| 70 | 70 |
|
| 71 | 71 |
.customizationMenuPanel .customizationMenuItems {
|
Also available in: Unified diff
[Admin tool|NEW UI - branch]
Changes for claims page + customization page