[Trunk|Admin]: 1. Add Community Layout Component. 2. Add module ngx-color-picker. 3.Change property AdminToolesUrl to mpagasas(for test)

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-admin-portal/trunk@55028 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
k.triantafyllou 2019-03-19 10:30:15 +00:00
parent 8ad9d70834
commit a5d711b6c7
9 changed files with 228 additions and 2 deletions

View File

@ -32,6 +32,7 @@
"jquery": "^3.2.1",
"ng2-ckeditor": "1.1.9",
"ngx-bootstrap": "^1.6.6",
"ngx-color-picker": "^4.5.3",
"ngx-json-ld": "0.1.6",
"rxjs": "^5.4.2",
"ts-md5": "^1.2.0",

View File

@ -30,6 +30,12 @@
<span>Community profile</span>
</a>
</li>
<li >
<a routerLink="/community-layout" routerLinkActive="active" [queryParams]="{communityId: this.communityId}">
<span>Community Layout</span>
</a>
</li>
</ul>
</li>
<li *ngIf="communityId != 'openaire'" class="uk-nav-header uk-parent">

View File

@ -38,6 +38,11 @@ const appRoutes: Routes = [
loadChildren: './pages/community/community-edit-form/community-edit-form.module#CommunityEditFormModule',
resolve: { envSpecific: EnvironmentSpecificResolver }
},
{
path: 'community-layout',
loadChildren: './pages/community/layout/community-layout.module#CommunityLayoutModule',
resolve: { envSpecific: EnvironmentSpecificResolver }
},
{
path: 'manage-zenodo-communities',
loadChildren: './pages/zenodo-communities/zenodo-communities.module#ZenodoCommunitiesModule',

View File

@ -0,0 +1,14 @@
import { NgModule } from '@angular/core';
import {RouterModule} from '@angular/router';
import {CommunityLayoutComponent} from './community-layout.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: CommunityLayoutComponent}
])
]
})
export class CommunityLayoutRoutingModule { }

View File

@ -0,0 +1,39 @@
<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 ">Edit community layout</div>
<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 && layout !== null && !showLoading && !errorMessage" class="uk-width-1-1">
<tbody class="uk-table uk-align-center">
<tr>
<td for="color" class="uk-text-bold uk-width-1-2@xl uk-width-1-3@m uk-width-expand@s uk-text-right">Color:</td>
<td class="uk-text-left uk-width-1-3@xl uk-width-1-3@m uk-width-expand@s">
<button [(colorPicker)]="layout.color" [style.background]="layout.color"
id="color" class="uk-icon-button"
(click)="change()">
</button>
</td>
<td for="color" class="uk-text uk-width-1-3@xl uk-width-1-3@m uk-width-expand@s uk-text-left" [style.color]="layout.color">Change your community color</td>
</tr>
</tbody>
</table>
<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 && layout != 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)="updateLayout()">Save</button>
<button *ngIf="!hasChanged" class="uk-button uk-button-default" disabled>Save</button>
<button class="uk-button" (click)="resetLayout()">Reset</button>
<button class="uk-button connect-default-button" (click)="loadDefaultLayout()">Default Layout</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>

View File

@ -0,0 +1,134 @@
import {Component, OnInit, ElementRef} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {EnvProperties} from '../../../openaireLibrary/utils/properties/env-properties';
import {LayoutService} from '../../../openaireLibrary/services/layout.service';
@Component({
selector: 'community-layout',
templateUrl: './community-layout.component.html',
})
export class CommunityLayoutComponent implements OnInit {
public showLoading = true;
public errorMessage = '';
public successfulSaveMessage = '';
public successfulResetMessage = '';
public hasChanged = false;
public communityId = null;
public layout = null;
public properties: EnvProperties = null;
constructor (private element: ElementRef,
private route: ActivatedRoute,
private _layoutService: LayoutService) { }
ngOnInit() {
this.route.data.subscribe((data: { envSpecific: EnvProperties }) => {
this.properties = data.envSpecific;
this.route.queryParams.subscribe(
communityId => {
this.scroll();
this.communityId = communityId['communityId'];
if (this.communityId != null && this.communityId !== '') {
this.showLoading = true;
this.errorMessage = '';
this._layoutService.getLayout(this.communityId,
this.properties.adminToolsAPIURL).subscribe (
layout => {
this.layout = layout;
this.showLoading = false;
},
error => this.handleError('System error retrieving community layout', error)
);
}
});
});
}
public scroll() {
if (typeof document !== 'undefined') {
this.element.nativeElement.scrollIntoView();
}
}
public updateLayout() {
if (this.communityId != null && this.communityId !== '') {
this.showLoading = true;
this._layoutService.saveLayout(this.communityId,
this.properties.adminToolsAPIURL, this.layout).subscribe (
layout => {
this.layout = layout;
this.showLoading = false;
this.handleSuccessfulSave('Community Layout saved!');
},
error => this.handleError('System error saving community layout', error)
);
this.resetChange();
}
}
public resetLayout() {
if (this.communityId != null && this.communityId !== '') {
this.showLoading = true;
this._layoutService.getLayout(this.communityId,
this.properties.adminToolsAPIURL).subscribe (
layout => {
this.layout = layout;
this.showLoading = false;
this.handleSuccessfulReset('Community Layout reset!');
},
error => this.handleError('System error retrieving community layout', error)
);
this.resetChange();
}
}
public loadDefaultLayout() {
if (this.communityId != null && this.communityId !== '') {
this.showLoading = true;
this._layoutService.loadDefaultLayout(this.communityId,
this.properties.adminToolsAPIURL).subscribe (
layout => {
this.layout = layout;
this.showLoading = false;
this.handleSuccessfulReset('Default Community Layout has been loaded!');
},
error => this.handleError('System error loading default community layout', error)
);
this.resetChange();
}
}
private change() {
this.hasChanged = true;
this.successfulSaveMessage = '';
this.successfulResetMessage = '';
}
private resetChange() {
this.hasChanged = 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;
}
}

View File

@ -0,0 +1,28 @@
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {RouterModule} from '@angular/router';
import {CommunityLayoutComponent} from './community-layout.component';
import {CommunityLayoutRoutingModule} from './community-layout-routing.module';
import {IsCommunity} from '../../../openaireLibrary/connect/communityGuard/isCommunity.guard';
import {ConnectAdminLoginGuard} from '../../../openaireLibrary/connect/communityGuard/connectAdminLoginGuard.guard';
import {ColorPickerModule} from 'ngx-color-picker';
import {LayoutService} from '../../../openaireLibrary/services/layout.service';
@NgModule({
imports: [
CommunityLayoutRoutingModule, CommonModule, RouterModule, ColorPickerModule
],
declarations: [
CommunityLayoutComponent
],
providers: [
IsCommunity, ConnectAdminLoginGuard, LayoutService
],
exports: [
CommunityLayoutComponent
]
})
export class CommunityLayoutModule { }

View File

@ -10,7 +10,6 @@ import { Community } from "../domain/community";
import { Entity } from "../domain/entity";
import { DivId } from "../domain/divId";
import { DivHelpContent } from "../domain/div-help-content";
import {COOKIE} from "../openaireLibrary/login/utils/helper.class"
import {StatisticsDisplay, StatisticsSummary} from '../openaireLibrary/connect/statistics/statisticsEntities';
import { CustomOptions } from '../openaireLibrary/services/servicesUtils/customOptions.class';

View File

@ -49,7 +49,7 @@
"cacheUrl" :"http://scoobydoo.di.uoa.gr:3000/get?url=",
"adminToolsAPIURL" :"http://duffy.di.uoa.gr:8080/uoa-admin-tools/",
"adminToolsAPIURL" :"http://mpagasas.di.uoa.gr:8080/uoa-admin-tools/",
"adminToolsCommunity" :"openaire",
"communityAPI": "https://dev-openaire.d4science.org/openaire/community/",