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

[Monitor Dashboard | Trunk]: Add upload image functionality for stakeholder's logo 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@59496 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
Konstantinos Triantafyllou 2020-10-01 09:18:13 +00:00
parent 5dec22375a
commit 21ed77a926
8 changed files with 111 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -31,6 +31,11 @@ const routes: Routes = [
resolve: {envSpecific: EnvironmentSpecificResolver},
data: {hasAdminMenu: true}
},
/*{
path: 'admin/:stakeholder/users',
loadChildren: './users/users.module#UsersModule',
resolve: {envSpecific: EnvironmentSpecificResolver}
},*/
{
path: 'admin/:stakeholder',
loadChildren: './stakeholder/stakeholder.module#StakeholderModule',

27
src/app/manageStakeholders/manageStakeholders.component.html
View File

@ -202,6 +202,7 @@
</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">
@ -221,24 +222,32 @@
label="Index short name">
</div>
</div>
<div class="uk-grid uk-flex uk-flex-top" uk-grid>
<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 class="uk-width-expand">
<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 class="uk-text-center uk-margin-bottom">
<div *ngIf="!stakeholderFb.get('isUpload').value" class="uk-text-center uk-margin-bottom">
<div>- OR -</div>
<div class="uk-margin-small-top">
<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" class="md-btn md-btn-danger md-btn-small uk-margin-small-left" (click)="removePhoto()">Remove</button>
<ng-container [ngTemplateOutlet]="uploadPhoto"></ng-container>
</div>
<div *ngIf="uploadError" class="uk-text-danger uk-margin-small-top">{{uploadError}}</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')"

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

@ -12,7 +12,6 @@ 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 {templateJitUrl} from "@angular/compiler";
declare var UIkit;
@ -59,8 +58,9 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
* */
public file: File;
public photo: string | ArrayBuffer;
public uploadError: string;
public deleteCurrentPhoto: boolean = false;
private maxsize: number = 200 * 1024;
private uploadError: string;
@ViewChild('editStakeholderModal') editStakeholderModal: AlertModal;
@ViewChild('deleteStakeholderModal') deleteStakeholderModal: AlertModal;
@ -94,12 +94,17 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
this.loading = false;
});
});
this.subscriptions.push(UIkit.util.on(document, 'hidden', '#edit_modal', (): void => {
this.removePhoto();
}));
}
ngOnDestroy(): void {
this.subscriptions.forEach(value => {
if (value instanceof Subscriber) {
value.unsubscribe();
} else if (value instanceof Function) {
value();
}
});
}
@ -222,6 +227,7 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
type: this.fb.control(this.stakeholder.type, Validators.required),
topics: this.fb.control(this.stakeholder.topics),
managers: this.fb.control(this.stakeholder.managers),
isUpload: this.fb.control(this.stakeholder.isUpload),
logoUrl: this.fb.control(this.stakeholder.logoUrl),
});
this.initPhoto();
@ -231,6 +237,8 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
this.subscriptions.push(this.stakeholderFb.get('logoUrl').valueChanges.subscribe(value => {
if(value) {
this.photo = value;
} else {
this.photo = 'assets/common-assets/curator-default.png';
}
}));
if (!isDefault) {
@ -253,6 +261,8 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
}, 0);
this.editStakeholderModal.okButtonText = 'Create';
}
this.uploadError = null;
this.deleteCurrentPhoto = false;
this.editStakeholderModal.cancelButtonText = 'Cancel';
this.editStakeholderModal.okButtonLeft = false;
this.editStakeholderModal.alertMessage = false;
@ -263,12 +273,16 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
if (this.file) {
this.utilsService.uploadPhoto(this.properties.utilsService + "/upload/stakeholder/" + encodeURIComponent(this.stakeholder.alias), this.file).subscribe(res => {
this.deletePhoto();
this.stakeholderFb.get('logoUrl').setValue(this.properties.utilsService + "/download/" + res.filename);
this.removePhoto();
this.stakeholderFb.get('logoUrl').setValue(res.filename);
this.saveStakeholder();
}, error => {
this.uploadError = "An error has been occurred during upload your image. Try again later";
this.saveStakeholder();
});
} else if (this.deleteCurrentPhoto) {
this.deletePhoto();
this.saveStakeholder();
} else {
this.saveStakeholder();
}
@ -280,9 +294,8 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
let stakeholder = this.defaultStakeholders.find(value => value._id === this.stakeholderFb.value.defaultId);
this.stakeholderFb.setValue(this.stakeholderUtils.createFunderFromDefaultProfile(this.stakeholderFb.value,
(stakeholder ? stakeholder.topics : [])));
} /*else {
this.stakeholderFb.setValue(StakeholderCreator.createFunderDefaultProfile(this.stakeholderFb.value));
}*/
}
this.removePhoto();
this.stakeholderService.buildStakeholder(this.properties.monitorServiceAPIURL,
this.stakeholderFb.value).subscribe(stakeholder => {
if (stakeholder.defaultId === null) {
@ -293,7 +306,6 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
});
} else {
this.stakeholderFb.get('type').enable();
this.removePhoto();
this.stakeholderService.saveElement(this.properties.monitorServiceAPIURL, this.stakeholderFb.value).subscribe(stakeholder => {
if (stakeholder.defaultId == null) {
this.defaultStakeholders[this.index] = stakeholder;
@ -351,11 +363,8 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
}
public deletePhoto() {
if(this.stakeholderFb.get('logoUrl').value) {
let filename = this.stakeholderFb.get('logoUrl').value.split(this.properties.utilsService + "/download/")[1];
if(filename) {
this.utilsService.deletePhoto(this.properties.utilsService + '/delete/stakeholder/' + filename).subscribe();
}
if (this.stakeholder.logoUrl) {
this.utilsService.deletePhoto(this.properties.utilsService + '/delete/stakeholder/' + this.stakeholder.logoUrl).subscribe();
}
}
@ -364,19 +373,19 @@ export class ManageStakeholdersComponent implements OnInit, 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.file = null;
this.stakeholderFb.get('isUpload').setValue(false);
this.removePhoto();
} else if (this.file.size > this.maxsize) {
this.uploadError = 'File exceeds size\'s limit! Maximum resolution is 256x256 pixels.';
this.file = null;
this.stakeholderFb.get('isUpload').setValue(false);
this.removePhoto()
} else {
this.uploadError = null;
const reader = new FileReader();
reader.readAsDataURL(this.file);
reader.onload = () => {
this.photo = reader.result;
setTimeout(() => {
this.stakeholderFb.get('logoUrl').disable();
}, 0);
this.stakeholderFb.get('isUpload').setValue(true);
};
}
}
@ -384,7 +393,11 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
initPhoto() {
if (this.stakeholderFb.get('logoUrl').value) {
this.photo = this.stakeholderFb.get('logoUrl').value;
if (!this.stakeholderFb.value.isUpload) {
this.photo = this.stakeholderFb.get('logoUrl').value;
} else {
this.photo = this.properties.utilsService + "/download/" + this.stakeholderFb.get('logoUrl').value;
}
} else {
this.photo = 'assets/common-assets/curator-default.png';
}
@ -396,6 +409,16 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
}
this.initPhoto();
this.file = null;
this.stakeholderFb.get('logoUrl').enable();
}
remove() {
this.stakeholderFb.get('isUpload').setValue(false);
if (this.file) {
this.removePhoto();
}
if (this.stakeholder.isUpload) {
this.stakeholderFb.get('logoUrl').setValue(null);
this.deleteCurrentPhoto = true;
}
}
}

20
src/app/users/users-routing.module.ts Normal file
View File

@ -0,0 +1,20 @@
import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';
import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
import {AdminDashboardGuard} from "../utils/adminDashboard.guard";
import {UsersComponent} from "./users.component";
@NgModule({
imports: [
RouterModule.forChild([
{
path: '',
component: UsersComponent,
canActivate: [AdminDashboardGuard],
canDeactivate: [PreviousRouteRecorder]
}
])
]
})
export class UsersRoutingModule {
}

2
src/app/users/users.component.html Normal file
View File

@ -0,0 +1,2 @@
<div id="page_content">
</div>

7
src/app/users/users.component.ts Normal file
View File

@ -0,0 +1,7 @@
import {Component} from "@angular/core";
@Component({
selector: 'users',
templateUrl: 'users.component.html'
})
export class UsersComponent {}

13
src/app/users/users.module.ts Normal file
View File

@ -0,0 +1,13 @@
import {NgModule} from "@angular/core";
import {UsersComponent} from "./users.component";
import {CommonModule} from "@angular/common";
import {UsersRoutingModule} from "./users-routing.module";
import {AdminDashboardGuard} from "../utils/adminDashboard.guard";
@NgModule({
imports: [CommonModule, UsersRoutingModule],
declarations: [UsersComponent],
exports: [UsersComponent],
providers: [AdminDashboardGuard]
})
export class UsersModule {}

4
src/environments/environment.ts
View File

@ -49,6 +49,10 @@ export let properties: EnvProperties = {
vocabulariesAPI: "https://dev-openaire.d4science.org/provision/mvc/vocabularies/",
piwikBaseUrl: "https://analytics.openaire.eu/piwik.php?idsite=",
piwikSiteId: "80",
/*registryUrl: 'http://mpagasas.di.uoa.gr:8080/dnet-openaire-users-1.0.0-SNAPSHOT/api/registry/',
loginUrl: "http://mpagasas.di.uoa.gr:8180/dnet-login/openid_connect_login",
userInfoUrl: "http://mpagasas.di.uoa.gr:8080/dnet-openaire-users-1.0.0-SNAPSHOT/api/users/getUserInfo?accessToken=",
logoutUrl: 'http://mpagasas.di.uoa.gr:8180/dnet-login/openid_logout',*/
loginUrl: "http://dl170.madgik.di.uoa.gr:8180/dnet-login/openid_connect_login",
userInfoUrl: "http://dl170.madgik.di.uoa.gr:8180/dnet-openaire-users-1.0.0-SNAPSHOT/api/users/getUserInfo?accessToken=",
logoutUrl: "https://aai.openaire.eu/proxy/saml2/idp/SingleLogoutService.php?ReturnTo=",