From 4688d48db6c48a32532c71584f7abcd76a8cfc2d Mon Sep 17 00:00:00 2001 From: Konstantinos Triantafyllou Date: Mon, 19 Oct 2020 15:06:06 +0000 Subject: [PATCH] [Monitor Dashboard | Trunk]: Finish stakeholder form git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@59624 d315682c-612b-4755-9ff5-7f18f6832af3 --- .../edit-stakeholder.component.css | 10 ++ .../edit-stakeholder.component.ts | 141 +++++++++--------- .../edit-stakeholder.module.ts | 11 +- .../manageStakeholders.component.ts | 12 +- src/assets/dashboard-theme/button.css | 0 src/assets/dashboard-theme/dropdowns.css | 2 +- src/assets/dashboard-theme/main.css | 5 +- 7 files changed, 100 insertions(+), 81 deletions(-) create mode 100644 src/app/manageStakeholder/edit-stakeholder/edit-stakeholder.component.css create mode 100644 src/assets/dashboard-theme/button.css diff --git a/src/app/manageStakeholder/edit-stakeholder/edit-stakeholder.component.css b/src/app/manageStakeholder/edit-stakeholder/edit-stakeholder.component.css new file mode 100644 index 0000000..d279cde --- /dev/null +++ b/src/app/manageStakeholder/edit-stakeholder/edit-stakeholder.component.css @@ -0,0 +1,10 @@ +.uk-border-circle { + width: 100px; + height: 100px; + position: relative; +} + +.uk-border-circle > img { + max-width: 64px; + max-height: 64px; +} diff --git a/src/app/manageStakeholder/edit-stakeholder/edit-stakeholder.component.ts b/src/app/manageStakeholder/edit-stakeholder/edit-stakeholder.component.ts index b9ceb52..e847ffe 100644 --- a/src/app/manageStakeholder/edit-stakeholder/edit-stakeholder.component.ts +++ b/src/app/manageStakeholder/edit-stakeholder/edit-stakeholder.component.ts @@ -1,4 +1,4 @@ -import {Component, Input} from "@angular/core"; +import {Component, Input, OnDestroy} from "@angular/core"; import {Stakeholder} from "../../openaireLibrary/monitor/entities/stakeholder"; import {FormBuilder, FormGroup, Validators} from "@angular/forms"; import {StakeholderUtils} from "../../utils/indicator-utils"; @@ -12,9 +12,11 @@ import {UtilitiesService} from "../../openaireLibrary/services/utilities.service @Component({ selector: 'edit-stakeholder', template: ` -
+
-
-
+
+
+
+
+ +
+
+ OR +
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
{{uploadError}}
+
-
-
No default profiles has been found +
No default profiles + has been found for this type.
-
- -
-
-
-
- -
- -
` +
`, + styleUrls: ['edit-stakeholder.component.css'] }) -export class EditStakeholderComponent { +export class EditStakeholderComponent implements OnDestroy { @Input() public maxHeight = 'none'; public stakeholderFb: FormGroup; @@ -108,8 +115,12 @@ export class EditStakeholderComponent { private utilsService: UtilitiesService) { } + ngOnDestroy() { + this.reset(); + } + public init(stakeholder: Stakeholder, stakeholders: Stakeholder[], defaultStakeholders: Stakeholder[], isDefault: boolean, isNew: boolean) { - this.uploadError = null; + this.reset(); this.deleteCurrentPhoto = false; this.stakeholder = stakeholder; this.stakeholders = stakeholders; @@ -143,17 +154,10 @@ export class EditStakeholderComponent { logoUrl: this.fb.control(this.stakeholder.logoUrl), }); this.initPhoto(); - this.subscriptions.push(this.stakeholderFb.get('type').valueChanges.subscribe(value => { - this.onTypeChange(value, defaultStakeholders); - })); - 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) { + this.subscriptions.push(this.stakeholderFb.get('type').valueChanges.subscribe(value => { + this.onTypeChange(value, defaultStakeholders); + })); this.stakeholderFb.setControl('defaultId', this.fb.control(stakeholder.defaultId, Validators.required)); } if (isNew) { @@ -174,10 +178,13 @@ export class EditStakeholderComponent { } public get disabled(): boolean { - return this.stakeholderFb && (this.stakeholderFb.invalid || (this.stakeholderFb.pristine && !this.isNew && !this.file)); + return (this.stakeholderFb && this.stakeholderFb.invalid) || + (this.stakeholderFb && this.stakeholderFb.pristine && !this.isNew && !this.file) || + (this.uploadError && this.uploadError.length > 0); } reset() { + this.uploadError = null; this.stakeholderFb = null; this.subscriptions.forEach(subscription => { if (subscription instanceof Subscription) { @@ -202,7 +209,7 @@ export class EditStakeholderComponent { public save(callback: Function) { 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.stakeholderFb.value.alias), this.file).subscribe(res => { this.deletePhoto(); this.removePhoto(); this.stakeholderFb.get('logoUrl').setValue(res.filename); @@ -244,12 +251,10 @@ export class EditStakeholderComponent { 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.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.removePhoto() + this.removePhoto(); } else { this.uploadError = null; const reader = new FileReader(); @@ -257,38 +262,34 @@ export class EditStakeholderComponent { reader.onload = () => { this.photo = reader.result; this.stakeholderFb.get('isUpload').setValue(true); + this.stakeholderFb.get('isUpload').markAsDirty(); }; } } } initPhoto() { - if (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'; + if (this.stakeholderFb.value.isUpload) { + this.photo = this.properties.utilsService + "/download/" + this.stakeholderFb.get('logoUrl').value; } } removePhoto() { - if (typeof document != 'undefined') { - (document.getElementById("photo")).value = ""; + this.stakeholderFb.get('isUpload').setValue(false); + this.stakeholderFb.get('isUpload').markAsDirty(); + if (this.file) { + if (typeof document != 'undefined') { + (document.getElementById("photo")).value = ""; + } + this.initPhoto(); + this.file = null; } - this.initPhoto(); - this.file = null; } remove() { - this.stakeholderFb.get('isUpload').setValue(false); - if (this.file) { - this.removePhoto(); - } + this.removePhoto(); + this.stakeholderFb.setControl('logoUrl', this.fb.control(null)); if (this.stakeholder.isUpload) { - this.stakeholderFb.get('logoUrl').setValue(null); this.deleteCurrentPhoto = true; } } diff --git a/src/app/manageStakeholder/edit-stakeholder/edit-stakeholder.module.ts b/src/app/manageStakeholder/edit-stakeholder/edit-stakeholder.module.ts index d713c88..a5d24de 100644 --- a/src/app/manageStakeholder/edit-stakeholder/edit-stakeholder.module.ts +++ b/src/app/manageStakeholder/edit-stakeholder/edit-stakeholder.module.ts @@ -3,10 +3,17 @@ import {EditStakeholderComponent} from "./edit-stakeholder.component"; import {CommonModule} from "@angular/common"; import {InputModule} from "../../openaireLibrary/dashboard/sharedComponents/input/input.module"; import {ReactiveFormsModule} from "@angular/forms"; +import {IconsModule} from "../../openaireLibrary/utils/icons/icons.module"; +import {IconsService} from "../../openaireLibrary/utils/icons/icons.service"; +import {edit, remove} from "../../openaireLibrary/utils/icons/icons"; @NgModule({ - imports: [CommonModule, InputModule, ReactiveFormsModule], + imports: [CommonModule, InputModule, ReactiveFormsModule, IconsModule], declarations: [EditStakeholderComponent], exports: [EditStakeholderComponent] }) -export class EditStakeholderModule {} +export class EditStakeholderModule { + constructor(private iconsService: IconsService) { + this.iconsService.registerIcons([remove, edit]); + } +} diff --git a/src/app/manageStakeholders/manageStakeholders.component.ts b/src/app/manageStakeholders/manageStakeholders.component.ts index a6c6399..bc323d1 100644 --- a/src/app/manageStakeholders/manageStakeholders.component.ts +++ b/src/app/manageStakeholders/manageStakeholders.component.ts @@ -181,19 +181,19 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy { this.editStakeholderComponent.init(this.stakeholder, this.stakeholders, this.defaultStakeholders, isDefault, this.index === -1); if (this.index !== -1) { this.callback = (stakeholder: Stakeholder) => { - if (stakeholder.defaultId === null) { - this.defaultStakeholders.push(stakeholder); + if (stakeholder.defaultId == null) { + this.defaultStakeholders[this.index] = stakeholder; } else { - this.stakeholders.push(stakeholder); + this.stakeholders[this.index] = stakeholder; } }; this.editStakeholderModal.okButtonText = 'Save Changes'; } else { this.callback = (stakeholder: Stakeholder) => { - if (stakeholder.defaultId == null) { - this.defaultStakeholders[this.index] = stakeholder; + if (stakeholder.defaultId === null) { + this.defaultStakeholders.push(stakeholder); } else { - this.stakeholders[this.index] = stakeholder; + this.stakeholders.push(stakeholder); } }; this.editStakeholderModal.okButtonText = 'Create'; diff --git a/src/assets/dashboard-theme/button.css b/src/assets/dashboard-theme/button.css new file mode 100644 index 0000000..e69de29 diff --git a/src/assets/dashboard-theme/dropdowns.css b/src/assets/dashboard-theme/dropdowns.css index fc1038e..c8be2c2 100644 --- a/src/assets/dashboard-theme/dropdowns.css +++ b/src/assets/dashboard-theme/dropdowns.css @@ -5,7 +5,7 @@ text-align: left; } -.uk-dropdown ul { +.uk-dropdown > ul { padding: 0 !important; } diff --git a/src/assets/dashboard-theme/main.css b/src/assets/dashboard-theme/main.css index af55d59..a5b2540 100644 --- a/src/assets/dashboard-theme/main.css +++ b/src/assets/dashboard-theme/main.css @@ -2,6 +2,7 @@ @import "text.css"; @import "structure.css"; @import "input.css"; -@import "tabs-pills.css"; -@import "card.css"; @import "dropdowns.css"; +/*@import "tabs-pills.css"; +@import "card.css"; +@import "button.css";*/