MaDgIK
/
monitor-dashboard
13
0
Fork 0
Code Issues Pull Requests Projects Releases 17 Wiki Activity

[Monitor Dashboard | Trunk]: Add edit stakeholder page 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@59630 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
Konstantinos Triantafyllou 2020-10-19 21:18:09 +00:00
parent 4da9a7cc9c
commit 2f2c55cef7
14 changed files with 164 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/app-routing.module.ts
View File

@ -39,7 +39,7 @@ const routes: Routes = [
},
{
path: 'admin/:stakeholder',
loadChildren: './manageStakeholder/manageStakeholder.module#ManageStakeholderModule',
loadChildren: './general/general.module#GeneralModule',
resolve: {envSpecific: EnvironmentSpecificResolver},
data: {hasAdminMenu: true}
},

0
src/app/manageStakeholder/edit-stakeholder/edit-stakeholder.component.css → src/app/general/edit-stakeholder/edit-stakeholder.component.css
View File

30
src/app/manageStakeholder/edit-stakeholder/edit-stakeholder.component.ts → src/app/general/edit-stakeholder/edit-stakeholder.component.ts
View File

@ -12,7 +12,9 @@ import {UtilitiesService} from "../../openaireLibrary/services/utilities.service
@Component({
selector: 'edit-stakeholder',
template: `
<div *ngIf="stakeholderFb" [ngStyle]="{'max-height': maxHeight}" class="uk-padding-small uk-overflow-auto"
<div *ngIf="stakeholderFb" [ngStyle]="{'max-height': maxHeight}"
[class.uk-padding-small]="!paddingLarge" [class.uk-padding-large]="paddingLarge"
class="uk-overflow-auto"
[formGroup]="stakeholderFb">
<div class="uk-flex uk-flex-bottom" uk-grid>
<div dashboard-input class="uk-width-1-2@m" [formInput]="stakeholderFb.get('name')" label="Name"
@ -87,6 +89,10 @@ import {UtilitiesService} from "../../openaireLibrary/services/utilities.service
export class EditStakeholderComponent implements OnDestroy {
@Input()
public maxHeight = 'none';
@Input()
public paddingLarge: boolean = false;
@Input()
public disableAlias: boolean = false;
public stakeholderFb: FormGroup;
public stakeholderUtils: StakeholderUtils = new StakeholderUtils();
public defaultStakeholdersOptions: Option[];
@ -136,12 +142,12 @@ export class EditStakeholderComponent implements OnDestroy {
[
Validators.required,
this.stakeholderUtils.aliasValidator(
(isDefault) ?
(this.isDefault) ?
this.defaultStakeholders.filter(stakeholder => stakeholder.alias !== this.stakeholder.alias) :
this.stakeholders.filter(stakeholder => stakeholder.alias !== this.stakeholder.alias)
)]
),
isDefault: this.fb.control(isDefault),
isDefault: this.fb.control((this.isDefault)),
visibility: this.fb.control(this.stakeholder.visibility, Validators.required),
type: this.fb.control(this.stakeholder.type, Validators.required),
topics: this.fb.control(this.stakeholder.topics),
@ -156,6 +162,11 @@ export class EditStakeholderComponent implements OnDestroy {
}));
this.stakeholderFb.setControl('defaultId', this.fb.control(stakeholder.defaultId, Validators.required));
}
if(this.disableAlias) {
setTimeout(() => {
this.stakeholderFb.get('alias').disable();
}, 0);
}
if (isNew) {
setTimeout(() => {
this.stakeholderFb.get('type').enable();
@ -179,6 +190,10 @@ export class EditStakeholderComponent implements OnDestroy {
(this.uploadError && this.uploadError.length > 0);
}
public get dirty(): boolean {
return this.stakeholderFb && this.stakeholderFb.dirty;
}
reset() {
this.uploadError = null;
this.stakeholderFb = null;
@ -236,6 +251,7 @@ export class EditStakeholderComponent implements OnDestroy {
});
} else {
this.stakeholderFb.get('type').enable();
this.stakeholderFb.get('alias').enable();
this.stakeholderService.saveElement(this.properties.monitorServiceAPIURL, this.stakeholderFb.value).subscribe(stakeholder => {
callback(stakeholder);
});
@ -247,9 +263,13 @@ export class EditStakeholderComponent implements OnDestroy {
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.stakeholderFb.get('isUpload').setValue(false);
this.stakeholderFb.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.stakeholderFb.get('isUpload').setValue(false);
this.stakeholderFb.get('isUpload').markAsDirty();
this.removePhoto();
} else {
this.uploadError = null;
@ -271,8 +291,6 @@ export class EditStakeholderComponent implements OnDestroy {
}
removePhoto() {
this.stakeholderFb.get('isUpload').setValue(false);
this.stakeholderFb.get('isUpload').markAsDirty();
if (this.file) {
if (typeof document != 'undefined') {
(<HTMLInputElement>document.getElementById("photo")).value = "";
@ -283,6 +301,8 @@ export class EditStakeholderComponent implements OnDestroy {
}
remove() {
this.stakeholderFb.get('isUpload').setValue(false);
this.stakeholderFb.get('isUpload').markAsDirty();
this.removePhoto();
this.stakeholderFb.setControl('logoUrl', this.fb.control(null));
if (this.stakeholder.isUpload) {

0
src/app/manageStakeholder/edit-stakeholder/edit-stakeholder.module.ts → src/app/general/edit-stakeholder/edit-stakeholder.module.ts
View File

6
src/app/manageStakeholder/manageStakeholder-routing.module.ts → src/app/general/general-routing.module.ts
View File

@ -1,7 +1,7 @@
import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';
import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
import {ManageStakeholderComponent} from "./manageStakeholder.component";
import {GeneralComponent} from "./general.component";
import {AdminDashboardGuard} from "../utils/adminDashboard.guard";
@NgModule({
@ -9,7 +9,7 @@ import {AdminDashboardGuard} from "../utils/adminDashboard.guard";
RouterModule.forChild([
{
path: '',
component: ManageStakeholderComponent,
component: GeneralComponent,
canActivate: [AdminDashboardGuard],
canDeactivate: [PreviousRouteRecorder],
data: {hasSidebar: true}
@ -17,5 +17,5 @@ import {AdminDashboardGuard} from "../utils/adminDashboard.guard";
])
]
})
export class ManageStakeholderRoutingModule {
export class GeneralRoutingModule {
}

9
src/app/general/general.component.css Normal file
View File

@ -0,0 +1,9 @@
.form-header {
background-color: #F2F2F2;
box-shadow: 0 3px 6px #00000029;
padding: 10px 20px;
color: #7A7A7A;
font-family: "Roboto", sans-serif;
z-index: 1;
position: relative;
}

38
src/app/general/general.component.html Normal file
View File

@ -0,0 +1,38 @@
<div id="page_content">
<div id="page_content_inner">
<div *ngIf="stakeholder">
<div class="form-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">
Manage Profile
</div>
<div>
<span class="uk-text-bold">{{stakeholder.name}}</span>
<span *ngIf="editStakeholderComponent.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 || !editStakeholderComponent.dirty">Reset
</button>
<button class="uk-button uk-button-secondary"
(click)="save()"
[disabled]="loading || editStakeholderComponent.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-stakeholder #editStakeholderComponent [disableAlias]="true"
[maxHeight]="'60vh'" [paddingLarge]="true"></edit-stakeholder>
</div>
<div *ngIf="loading" class="uk-position-center">
<loading *ngIf="loading"></loading>
</div>
</div>
</div>
</div>
</div>

76
src/app/general/general.component.ts Normal file
View File

@ -0,0 +1,76 @@
import {Component, OnDestroy, OnInit, ViewChild} from "@angular/core";
import {StakeholderService} from "../openaireLibrary/monitor/services/stakeholder.service";
import {EnvProperties} from "../openaireLibrary/utils/properties/env-properties";
import {EnvironmentSpecificService} from "../openaireLibrary/utils/properties/environment-specific.service";
import {Stakeholder} from "../openaireLibrary/monitor/entities/stakeholder";
import {Subscriber, Subscription, zip} from "rxjs";
import {StakeholderUtils} from "../utils/indicator-utils";
import {FormBuilder, FormGroup, Validators} from "@angular/forms";
import {AlertModal} from "../openaireLibrary/utils/modal/alert";
import {Option} from "../openaireLibrary/dashboard/sharedComponents/input/input.component";
import {Title} from "@angular/platform-browser";
import {UserManagementService} from "../openaireLibrary/services/user-management.service";
import {Session} from "../openaireLibrary/login/utils/helper.class";
import {UtilitiesService} from "../openaireLibrary/services/utilities.service";
import {EditStakeholderComponent} from "./edit-stakeholder/edit-stakeholder.component";
import {properties} from "../../environments/environment";
@Component({
selector: 'general',
templateUrl: "./general.component.html",
styleUrls: ['general.component.css']
})
export class GeneralComponent implements OnInit, OnDestroy {
public stakeholder: Stakeholder;
public stakeholders: Stakeholder[];
public properties: EnvProperties = properties;
public defaultStakeholders: Stakeholder[];
public loading: boolean = false;
private subscriptions: any[] = [];
@ViewChild('editStakeholderComponent') editStakeholderComponent: EditStakeholderComponent;
constructor(private stakeholderService: StakeholderService) {
}
ngOnInit() {
this.loading = true;
this.subscriptions.push(this.stakeholderService.getStakeholderAsObservable().subscribe(stakeholder => {
this.stakeholder = stakeholder;
if(this.stakeholder) {
let data = zip(
this.stakeholderService.getDefaultStakeholders(this.properties.monitorServiceAPIURL),
this.stakeholderService.getStakeholders(this.properties.monitorServiceAPIURL)
);
this.subscriptions.push(data.subscribe(res => {
this.defaultStakeholders = res[0];
this.stakeholders = res[1];
this.reset();
this.loading = false;
}));
}
}));
}
public reset() {
this.editStakeholderComponent.init(this.stakeholder, this.stakeholders, this.defaultStakeholders, this.stakeholder.defaultId == null, false)
}
public save() {
this.loading = true;
this.editStakeholderComponent.save((stakeholder) => {
this.stakeholder = stakeholder;
this.reset();
this.loading = false;
});
}
ngOnDestroy() {
this.subscriptions.forEach(subscription => {
if(subscription instanceof Subscription) {
subscription.unsubscribe();
}
});
}
}

16
src/app/manageStakeholder/manageStakeholder.module.ts → src/app/general/general.module.ts
View File

@ -1,6 +1,6 @@
import {NgModule} from "@angular/core";
import {ManageStakeholderComponent} from "./manageStakeholder.component";
import {ManageStakeholderRoutingModule} from "./manageStakeholder-routing.module";
import {GeneralComponent} from "./general.component";
import {GeneralRoutingModule} from "./general-routing.module";
import {PreviousRouteRecorder} from "../openaireLibrary/utils/piwik/previousRouteRecorder.guard";
import {CommonModule} from "@angular/common";
import {RouterModule} from "@angular/router";
@ -9,23 +9,25 @@ import {LoadingModule} from "../openaireLibrary/utils/loading/loading.module";
import {AlertModalModule} from "../openaireLibrary/utils/modal/alertModal.module";
import {ReactiveFormsModule} from "@angular/forms";
import {AdminDashboardGuard} from "../utils/adminDashboard.guard";
import {EditStakeholderModule} from "./edit-stakeholder/edit-stakeholder.module";
@NgModule({
declarations: [ManageStakeholderComponent],
declarations: [GeneralComponent],
imports: [
ManageStakeholderRoutingModule,
GeneralRoutingModule,
CommonModule,
RouterModule,
InputModule,
LoadingModule,
AlertModalModule,
ReactiveFormsModule
ReactiveFormsModule,
EditStakeholderModule
],
providers: [
AdminDashboardGuard, PreviousRouteRecorder,
],
exports: [ManageStakeholderComponent]
exports: [GeneralComponent]
})
export class ManageStakeholderModule {
export class GeneralModule {
}

79
src/app/manageStakeholder/manageStakeholder.component.html
View File

@ -1,79 +0,0 @@
<div id="page_content">
<div id="page_content_inner">
<div *ngIf="stakeholderFb" class="uk-padding-small" [formGroup]="stakeholderFb">
<div dashboard-input [formInput]="stakeholderFb.get('name')" label="Name"></div>
</div>
</div>
</div>
<modal-alert #editStakeholderModal
id="edit_modal"
(alertOutput)="save()"
[okDisabled]="stakeholderFb && (stakeholderFb.invalid || (stakeholderFb.pristine && index !==-1 && !file))">
<div *ngIf="stakeholderFb" class="uk-padding-small" [formGroup]="stakeholderFb">
<div class="uk-form-row uk-flex uk-flex-middle uk-child-width-1-2" uk-grid>
<div dashboard-input [formInput]="stakeholderFb.get('name')" label="Name"></div>
<div dashboard-input [formInput]="stakeholderFb.get('alias')" label="Alias"></div>
</div>
<div dashboard-input class="uk-form-row" [type]="'textarea'" [rows]="4"
[formInput]="stakeholderFb.get('description')" label="Description"></div>
<div class="uk-form-row uk-flex uk-flex-middle uk-child-width-1-3" uk-grid>
<div dashboard-input [formInput]="stakeholderFb.get('index_id')"
label="Index id">
</div>
<div dashboard-input [formInput]="stakeholderFb.get('index_name')"
label="Index name">
</div>
<div dashboard-input [formInput]="stakeholderFb.get('index_shortName')"
label="Index short name">
</div>
</div>
<div class="uk-grid uk-flex uk-flex-center uk-flex-middle" uk-grid>
<div class="uk-width-1-5">
<img [src]="photo">
</div>
<div *ngIf="!stakeholderFb.get('isUpload').value" class="uk-width-expand">
<div dashboard-input [formInput]="stakeholderFb.get('logoUrl')" label="Logo Path/URL"></div>
</div>
<ng-template #uploadPhoto>
<div>
<div uk-form-custom class="uk-width-auto">
<input id="photo" type="file" (change)="fileChangeEvent($event)"/>
<button class="md-btn md-btn-primary md-btn-small" tabindex="-1">Upload</button>
</div>
<button *ngIf="file || (stakeholder.isUpload && !deleteCurrentPhoto)"
class="md-btn md-btn-danger md-btn-small uk-margin-small-left" (click)="remove()">Remove
</button>
</div>
<div *ngIf="uploadError" class="uk-text-danger uk-margin-small-top">{{uploadError}}</div>
</ng-template>
<div *ngIf="stakeholderFb.get('isUpload').value" class="uk-width-expand uk-text-center">
<ng-container [ngTemplateOutlet]="uploadPhoto"></ng-container>
</div>
</div>
<div *ngIf="!stakeholderFb.get('isUpload').value" class="uk-text-center uk-margin-bottom">
<div>- OR -</div>
<div class="uk-margin-small-top">
<ng-container [ngTemplateOutlet]="uploadPhoto"></ng-container>
</div>
</div>
<div class="uk-form-row uk-flex uk-flex-middle uk-child-width-1-3" uk-grid>
<div dashboard-input [formInput]="stakeholderFb.get('isPublic')"
label="Privacy" [options]="stakeholderUtils.isPublic" type="select">
</div>
<div dashboard-input [formInput]="stakeholderFb.get('isActive')"
label="Status" [options]="stakeholderUtils.isActive" type="select">
</div>
<div dashboard-input [formInput]="stakeholderFb.get('type')"
label="Type" [options]="stakeholderUtils.types" type="select">
</div>
</div>
<div *ngIf="!stakeholderFb.get('isDefault').value && index === -1 && stakeholderFb.get('type').valid">
<div *ngIf="defaultStakeholdersOptions.length === 0" class="uk-text-danger">No default profiles has been found for
this type.
</div>
<div *ngIf="defaultStakeholdersOptions.length > 0"
dashboard-input class="uk-form-row" [formInput]="stakeholderFb.get('defaultId')"
label="Indicators" [options]="defaultStakeholdersOptions" type="select"></div>
</div>
</div>
</modal-alert>

22
src/app/manageStakeholder/manageStakeholder.component.ts
View File

@ -1,22 +0,0 @@
import {Component, OnDestroy, OnInit, ViewChild} from "@angular/core";
import {StakeholderService} from "../openaireLibrary/monitor/services/stakeholder.service";
import {EnvProperties} from "../openaireLibrary/utils/properties/env-properties";
import {EnvironmentSpecificService} from "../openaireLibrary/utils/properties/environment-specific.service";
import {Stakeholder} from "../openaireLibrary/monitor/entities/stakeholder";
import {Subscriber, zip} from "rxjs";
import {StakeholderUtils} from "../utils/indicator-utils";
import {FormBuilder, FormGroup, Validators} from "@angular/forms";
import {AlertModal} from "../openaireLibrary/utils/modal/alert";
import {Option} from "../openaireLibrary/dashboard/sharedComponents/input/input.component";
import {Title} from "@angular/platform-browser";
import {UserManagementService} from "../openaireLibrary/services/user-management.service";
import {Session} from "../openaireLibrary/login/utils/helper.class";
import {UtilitiesService} from "../openaireLibrary/services/utilities.service";
@Component({
selector: 'manage-stakeholder',
templateUrl: "./manageStakeholder.component.html"
})
export class ManageStakeholderComponent {
}

2
src/app/manageStakeholders/manageStakeholders.component.ts
View File

@ -11,7 +11,7 @@ import {Option} from "../openaireLibrary/dashboard/sharedComponents/input/input.
import {Title} from "@angular/platform-browser";
import {UserManagementService} from "../openaireLibrary/services/user-management.service";
import {Session} from "../openaireLibrary/login/utils/helper.class";
import {EditStakeholderComponent} from "../manageStakeholder/edit-stakeholder/edit-stakeholder.component";
import {EditStakeholderComponent} from "../general/edit-stakeholder/edit-stakeholder.component";
declare var UIkit;

2
src/app/manageStakeholders/manageStakeholders.module.ts
View File

@ -9,7 +9,7 @@ import {LoadingModule} from "../openaireLibrary/utils/loading/loading.module";
import {AlertModalModule} from "../openaireLibrary/utils/modal/alertModal.module";
import {ReactiveFormsModule} from "@angular/forms";
import {AdminDashboardGuard} from "../utils/adminDashboard.guard";
import {EditStakeholderModule} from "../manageStakeholder/edit-stakeholder/edit-stakeholder.module";
import {EditStakeholderModule} from "../general/edit-stakeholder/edit-stakeholder.module";
@NgModule({
declarations: [ManageStakeholdersComponent],

2
src/assets/dashboard-theme/structure.css
View File

@ -103,7 +103,7 @@
}
#page_content_inner {
padding: 50px 50px 100px 50px;
padding: 90px;
}
navbar > * {