[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

View File

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

View File

@ -202,6 +202,7 @@
</div> </div>
</div> </div>
<modal-alert #editStakeholderModal <modal-alert #editStakeholderModal
id="edit_modal"
(alertOutput)="save()" (alertOutput)="save()"
[okDisabled]="stakeholderFb && (stakeholderFb.invalid || (stakeholderFb.pristine && index !==-1 && !file))"> [okDisabled]="stakeholderFb && (stakeholderFb.invalid || (stakeholderFb.pristine && index !==-1 && !file))">
<div *ngIf="stakeholderFb" class="uk-padding-small" [formGroup]="stakeholderFb"> <div *ngIf="stakeholderFb" class="uk-padding-small" [formGroup]="stakeholderFb">
@ -221,24 +222,32 @@
label="Index short name"> label="Index short name">
</div> </div>
</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"> <div class="uk-width-1-5">
<img [src]="photo"> <img [src]="photo">
</div> </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 dashboard-input [formInput]="stakeholderFb.get('logoUrl')" label="Logo Path/URL"></div>
</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>
<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>- OR -</div>
<div class="uk-margin-small-top"> <div class="uk-margin-small-top">
<div uk-form-custom class="uk-width-auto"> <ng-container [ngTemplateOutlet]="uploadPhoto"></ng-container>
<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>
</div> </div>
<div *ngIf="uploadError" class="uk-text-danger uk-margin-small-top">{{uploadError}}</div>
</div> </div>
<div class="uk-form-row uk-flex uk-flex-middle uk-child-width-1-3" uk-grid> <div class="uk-form-row uk-flex uk-flex-middle uk-child-width-1-3" uk-grid>
<div dashboard-input [formInput]="stakeholderFb.get('isPublic')" <div dashboard-input [formInput]="stakeholderFb.get('isPublic')"

View File

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

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 {
}

View File

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

View File

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

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 {}

View File

@ -49,6 +49,10 @@ export let properties: EnvProperties = {
vocabulariesAPI: "https://dev-openaire.d4science.org/provision/mvc/vocabularies/", vocabulariesAPI: "https://dev-openaire.d4science.org/provision/mvc/vocabularies/",
piwikBaseUrl: "https://analytics.openaire.eu/piwik.php?idsite=", piwikBaseUrl: "https://analytics.openaire.eu/piwik.php?idsite=",
piwikSiteId: "80", 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", 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=", 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=", logoutUrl: "https://aai.openaire.eu/proxy/saml2/idp/SingleLogoutService.php?ReturnTo=",