Revision 60557
Added by Konstantinos Triantafyllou about 3 years ago
| affiliations.component.ts | ||
|---|---|---|
| 1 |
import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
|
|
| 1 |
import {Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
|
|
| 2 | 2 |
import {ActivatedRoute, Router} from '@angular/router';
|
| 3 | 3 |
|
| 4 | 4 |
import {EnvProperties} from '../../openaireLibrary/utils/properties/env-properties';
|
| 5 |
|
|
| 6 |
import {Session} from '../../openaireLibrary/login/utils/helper.class';
|
|
| 7 |
import {LoginErrorCodes} from '../../openaireLibrary/login/utils/guardHelper.class';
|
|
| 8 | 5 |
import {Affiliation} from '../../openaireLibrary/utils/entities/CuratorInfo';
|
| 9 |
import {HelperFunctions} from '../../openaireLibrary/utils/HelperFunctions.class';
|
|
| 10 | 6 |
import {AlertModal} from '../../openaireLibrary/utils/modal/alert';
|
| 11 | 7 |
import {AffiliationService} from "../../openaireLibrary/connect/affiliations/affiliation.service";
|
| 12 | 8 |
import {HelpContentService} from "../../services/help-content.service";
|
| 13 | 9 |
import {Title} from '@angular/platform-browser';
|
| 14 | 10 |
import {StringUtils} from "../../openaireLibrary/utils/string-utils.class";
|
| 11 |
import {properties} from "../../../environments/environment";
|
|
| 12 |
import {Page} from "../../openaireLibrary/utils/entities/adminTool/page";
|
|
| 13 |
import {FormBuilder, FormGroup, Validators} from "@angular/forms";
|
|
| 14 |
import {Subscription} from "rxjs";
|
|
| 15 |
import {CommunityService} from "../../openaireLibrary/connect/community/community.service";
|
|
| 15 | 16 |
|
| 17 |
declare var UIkit; |
|
| 18 |
|
|
| 16 | 19 |
@Component({
|
| 17 | 20 |
selector: 'affiliations', |
| 18 | 21 |
templateUrl: './affiliations.component.html', |
| 19 | 22 |
}) |
| 20 |
|
|
| 21 |
export class AffiliationsComponent implements OnInit {
|
|
| 22 |
|
|
| 23 |
export class AffiliationsComponent implements OnInit, OnDestroy {
|
|
| 24 |
public loading = false; |
|
| 25 |
public properties: EnvProperties = properties; |
|
| 26 |
public index = 0; |
|
| 27 |
public affiliations: Affiliation[] = []; |
|
| 28 |
public affiliationFb: FormGroup; |
|
| 29 |
public communityId: string; |
|
| 30 |
public organizationsPage: Page; |
|
| 31 |
public page: number = 1; |
|
| 32 |
public pageSize: number = 10; |
|
| 33 |
private subs: any[] = []; |
|
| 23 | 34 |
@ViewChild('affiliationModal') affiliationModal: AlertModal;
|
| 24 | 35 |
@ViewChild('removeAffiliationModal') removeAffiliationModal: AlertModal;
|
| 25 |
public showLoading = false; |
|
| 26 |
public message = ''; |
|
| 27 |
public messageType = ''; |
|
| 28 |
|
|
| 29 |
public affiliation: Affiliation = new Affiliation(); |
|
| 30 |
public properties: EnvProperties = null; |
|
| 31 |
|
|
| 32 |
private index = 0; |
|
| 33 |
private maxCharacters = 70; |
|
| 34 |
|
|
| 35 |
@Input() hasChanged: boolean = false; |
|
| 36 |
@Input() curatorAffiliations: boolean = false; |
|
| 37 |
@Input() public affiliations: Affiliation[] = []; |
|
| 38 |
@Output() affiliationsChange: EventEmitter<boolean> = new EventEmitter(); |
|
| 39 |
@Output() resetCuratorMessages: EventEmitter<boolean> = new EventEmitter(); |
|
| 40 |
public communityId: string; |
|
| 41 |
public organizationsPageId: string; |
|
| 42 |
public organizationsEnabled = false; |
|
| 43 |
|
|
| 44 |
constructor(private element: ElementRef, |
|
| 45 |
private route: ActivatedRoute, |
|
| 46 |
private _router: Router, |
|
| 36 |
|
|
| 37 |
constructor(private route: ActivatedRoute, |
|
| 38 |
private router: Router, |
|
| 47 | 39 |
private title: Title, |
| 40 |
private fb: FormBuilder, |
|
| 41 |
private communityService: CommunityService, |
|
| 48 | 42 |
private affiliationService: AffiliationService, |
| 49 |
private _helpContentService: HelpContentService) {
|
|
| 43 |
private helpContentService: HelpContentService) {
|
|
| 50 | 44 |
} |
| 51 |
|
|
| 52 |
|
|
| 45 |
|
|
| 46 |
|
|
| 53 | 47 |
ngOnInit() {
|
| 54 |
this.route.data.subscribe((data: { envSpecific: EnvProperties }) => {
|
|
| 55 |
this.properties = data.envSpecific; |
|
| 56 |
if(!this.curatorAffiliations) {
|
|
| 57 |
this.title.setTitle('Administration Dashboard | Related Organizations');
|
|
| 48 |
this.loading = true; |
|
| 49 |
this.subs.push(this.communityService.getCommunityAsObservable().subscribe(community => {
|
|
| 50 |
this.communityId = community.communityId; |
|
| 51 |
this.title.setTitle(community.shortTitle + ' | Related Organizations'); |
|
| 52 |
this.getAffiliations(); |
|
| 53 |
this.organizationsPageStatus(); |
|
| 54 |
})); |
|
| 55 |
} |
|
| 56 |
|
|
| 57 |
ngOnDestroy() {
|
|
| 58 |
this.subs.forEach(sub => {
|
|
| 59 |
if (sub instanceof Subscription) {
|
|
| 60 |
sub.unsubscribe(); |
|
| 58 | 61 |
} |
| 59 |
if (!Session.isLoggedIn()) {
|
|
| 60 |
this._router.navigate(['/user-info'], {
|
|
| 61 |
queryParams: {'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url}
|
|
| 62 |
}); |
|
| 63 |
} else {
|
|
| 64 |
this.showLoading = true; |
|
| 65 |
this.message = ''; |
|
| 66 |
|
|
| 67 |
this.route.queryParams.subscribe( |
|
| 68 |
communityId => {
|
|
| 69 |
this.communityId = communityId['communityId']; |
|
| 70 |
|
|
| 71 |
if(!this.curatorAffiliations) {
|
|
| 72 |
this.getAffiliations(); |
|
| 73 |
} |
|
| 74 |
this.organizationsPageStatus(); |
|
| 75 |
} |
|
| 76 |
); |
|
| 77 |
} |
|
| 78 |
}); |
|
| 62 |
}) |
|
| 79 | 63 |
} |
| 80 |
|
|
| 64 |
|
|
| 81 | 65 |
getAffiliations() {
|
| 82 | 66 |
this.affiliationService.initAffiliations(this.communityId); |
| 83 | 67 |
this.affiliationService.affiliations.subscribe( |
| 84 | 68 |
affiliations => {
|
| 85 | 69 |
this.affiliations = affiliations; |
| 86 |
this.getOrganizationsPageId(); |
|
| 87 |
//this.showLoading = false; |
|
| 70 |
this.loading = false; |
|
| 88 | 71 |
}, |
| 89 | 72 |
error => {
|
| 90 |
console.error("Affiliations Component: Error getting affiliations for community with id: "+this.communityId, error);
|
|
| 91 |
this.showLoading = false;
|
|
| 73 |
console.error("Affiliations Component: Error getting affiliations for community with id: " + this.communityId, error);
|
|
| 74 |
this.loading = false;
|
|
| 92 | 75 |
} |
| 93 | 76 |
); |
| 94 | 77 |
} |
| 95 |
|
|
| 96 |
getOrganizationsPageId() {
|
|
| 97 |
this._helpContentService.getCommunityPageByRoute("/organizations", this.properties.adminToolsAPIURL, this.communityId).subscribe(
|
|
| 98 |
page => {
|
|
| 99 |
if(page) {
|
|
| 100 |
this.organizationsPageId = page._id; |
|
| 101 |
} |
|
| 102 |
this.showLoading = false; |
|
| 103 |
}, |
|
| 104 |
error => {
|
|
| 105 |
console.error("Affiliations Component: Error getting page with route '/organizations' for community with id: "+this.communityId, error);
|
|
| 106 |
this.showLoading = false; |
|
| 107 |
} |
|
| 108 |
); |
|
| 109 |
} |
|
| 110 |
|
|
| 111 |
initAffiliation(affiliation: Affiliation = null) {
|
|
| 112 |
this.resetMessages(); |
|
| 113 |
|
|
| 114 |
if (affiliation) {
|
|
| 115 |
this.affiliation = {...affiliation};
|
|
| 116 |
if(!this.curatorAffiliations) {
|
|
| 117 |
this.affiliation.communityId = affiliation.communityId; |
|
| 118 |
this.affiliation.id = affiliation.id; |
|
| 119 |
} |
|
| 120 |
if(this.curatorAffiliations) {
|
|
| 121 |
this.affiliationModal.okButtonText = 'OK'; |
|
| 122 |
} else {
|
|
| 123 |
this.affiliationModal.okButtonText = 'Save Affiliation'; |
|
| 124 |
} |
|
| 78 |
|
|
| 79 |
editAffiliationOpen(index: number = -1) {
|
|
| 80 |
let affiliation: Affiliation; |
|
| 81 |
this.index = index; |
|
| 82 |
if (index === -1) {
|
|
| 83 |
affiliation = new Affiliation(); |
|
| 84 |
affiliation.communityId = this.communityId; |
|
| 85 |
this.affiliationModal.alertTitle = 'Add Organization'; |
|
| 86 |
this.affiliationModal.okButtonText = 'Add'; |
|
| 125 | 87 |
} else {
|
| 126 |
this.index = -1; |
|
| 127 |
this.affiliation = new Affiliation(); |
|
| 128 |
if(!this.curatorAffiliations) {
|
|
| 129 |
this.affiliation.communityId = this.communityId; |
|
| 130 |
} |
|
| 88 |
affiliation = this.affiliations[this.index]; |
|
| 89 |
this.affiliationModal.alertTitle = 'Edit Organization'; |
|
| 90 |
this.affiliationModal.okButtonText = 'Update'; |
|
| 131 | 91 |
} |
| 92 |
this.affiliationFb = this.fb.group({
|
|
| 93 |
communityId: this.fb.control(affiliation.communityId, Validators.required), |
|
| 94 |
id: this.fb.control(affiliation.id), |
|
| 95 |
name: this.fb.control(affiliation.name, Validators.required), |
|
| 96 |
logo_url: this.fb.control(affiliation.logo_url, Validators.required), |
|
| 97 |
website_url: this.fb.control(affiliation.website_url, Validators.required) |
|
| 98 |
}); |
|
| 132 | 99 |
this.affiliationModal.okButtonLeft = false; |
| 133 |
if(this.curatorAffiliations) {
|
|
| 134 |
this.affiliationModal.okButtonText = 'OK'; |
|
| 135 |
} else {
|
|
| 136 |
this.affiliationModal.okButtonText = 'Save Affiliation'; |
|
| 137 |
} |
|
| 100 |
this.affiliationModal.cancelButtonText = 'Cancel'; |
|
| 138 | 101 |
this.affiliationModal.open(); |
| 139 | 102 |
} |
| 140 |
|
|
| 141 |
public chooseAffiliation(index: number, action: string = 'delete') {
|
|
| 142 |
this.resetMessages(); |
|
| 103 |
|
|
| 104 |
deleteAffiliationOpen(index: number) {
|
|
| 143 | 105 |
this.index = index; |
| 144 |
const affiliation: Affiliation = this.affiliations[index]; |
|
| 145 |
if (action === 'delete') {
|
|
| 146 |
this.removeAffiliationModal.message = 'Do you want to remove ' + |
|
| 147 |
affiliation.name + ' from your Affiliations?'; |
|
| 148 |
this.removeAffiliationModal.okButtonText = 'Yes'; |
|
| 149 |
this.removeAffiliationModal.cancelButtonText = 'No'; |
|
| 150 |
this.removeAffiliationModal.open(); |
|
| 151 |
} else if (action === 'edit') {
|
|
| 152 |
this.initAffiliation(affiliation); |
|
| 153 |
} |
|
| 106 |
let affiliation: Affiliation = this.affiliations[index]; |
|
| 107 |
this.removeAffiliationModal.alertTitle = 'Delete Organization'; |
|
| 108 |
this.removeAffiliationModal.message = 'Do you want to remove <b>' + |
|
| 109 |
affiliation.name + '</b> from Related Organizations?'; |
|
| 110 |
this.removeAffiliationModal.okButtonText = 'Yes'; |
|
| 111 |
this.removeAffiliationModal.cancelButtonText = 'No'; |
|
| 112 |
this.removeAffiliationModal.open(); |
|
| 154 | 113 |
} |
| 155 |
|
|
| 156 |
updateCommunityAffiliations(index: number) {
|
|
| 157 |
if (!Session.isLoggedIn()) {
|
|
| 158 |
this._router.navigate(['/user-info'], {
|
|
| 159 |
queryParams: |
|
| 160 |
{'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url}
|
|
| 161 |
}); |
|
| 162 |
} else {
|
|
| 163 |
HelperFunctions.scroll(); |
|
| 164 |
|
|
| 165 |
this.showLoading = true; |
|
| 166 |
|
|
| 167 |
this.affiliationService.updateAffiliation(this.properties.communityAPI + this.communityId + '/organizations', |
|
| 168 |
this.affiliation).subscribe((affiliation) => {
|
|
| 169 |
if (affiliation) {
|
|
| 170 |
if (index === -1) {
|
|
| 171 |
this.affiliations.push(affiliation); |
|
| 172 |
} else {
|
|
| 173 |
this.affiliations[index] = affiliation; |
|
| 174 |
} |
|
| 175 |
if(this.affiliation.id) {
|
|
| 176 |
this.handleUpdateSuccess('Your organization has been updated successfully!');
|
|
| 177 |
} else {
|
|
| 178 |
this.handleUpdateSuccess('Your organization has been saved successfully!');
|
|
| 179 |
} |
|
| 180 |
} |
|
| 181 |
}, |
|
| 182 |
error => {
|
|
| 183 |
if(this.affiliation.id) {
|
|
| 184 |
this.handleUpdateError('Your organization could not be updated. Try again later!', error);
|
|
| 185 |
} else {
|
|
| 186 |
this.handleUpdateError('Organization could not be saved. Try again later!', error);
|
|
| 187 |
} |
|
| 188 |
}); |
|
| 189 |
} |
|
| 190 |
} |
|
| 191 |
|
|
| 192 |
addAffiliation() {
|
|
| 193 |
if (!this.isEmptyAffiliation()) {
|
|
| 194 |
if (!this.curatorAffiliations) {
|
|
| 195 |
this.updateCommunityAffiliations(this.index); |
|
| 114 |
|
|
| 115 |
editAffiliation() {
|
|
| 116 |
this.loading = true; |
|
| 117 |
this.affiliationService.updateAffiliation(this.properties.communityAPI + this.communityId + '/organizations', |
|
| 118 |
this.affiliationFb.value).subscribe((affiliation) => {
|
|
| 119 |
if (affiliation) {
|
|
| 120 |
if (this.index === -1) {
|
|
| 121 |
this.affiliations.push(affiliation); |
|
| 196 | 122 |
} else {
|
| 197 |
if (this.index === -1) {
|
|
| 198 |
this.affiliations.push(this.affiliation); |
|
| 199 |
} else {
|
|
| 200 |
this.affiliations[this.index] = this.affiliation; |
|
| 201 |
} |
|
| 123 |
this.affiliations[this.index] = affiliation; |
|
| 202 | 124 |
} |
| 203 |
this.change(); |
|
| 204 |
} |
|
| 125 |
if (affiliation.id) {
|
|
| 126 |
this.handleUpdateSuccess('Your organization has been updated successfully!');
|
|
| 127 |
} else {
|
|
| 128 |
this.handleUpdateSuccess('Your organization has been saved successfully!');
|
|
| 129 |
} |
|
| 130 |
} |
|
| 131 |
}, |
|
| 132 |
error => {
|
|
| 133 |
this.handleUpdateError('An error has been occurred. Try again later!', error);
|
|
| 134 |
}); |
|
| 205 | 135 |
} |
| 206 |
|
|
| 136 |
|
|
| 207 | 137 |
removeAffiliation() {
|
| 208 |
if(!this.curatorAffiliations) {
|
|
| 209 |
HelperFunctions.scroll(); |
|
| 210 |
|
|
| 211 |
this.showLoading = true; |
|
| 212 |
this.affiliationService.deleteAffiliation(this.properties.communityAPI + this.communityId + '/organizations', |
|
| 213 |
this.affiliations[this.index].id).subscribe((deleteOK) => {
|
|
| 214 |
this.affiliations.splice(this.index, 1); |
|
| 215 |
this.handleUpdateSuccess('Organization has been deleted');
|
|
| 216 |
}, |
|
| 217 |
error => {
|
|
| 218 |
this.handleUpdateError('Organization could not be deleted. Try again later!', error);
|
|
| 219 |
} |
|
| 220 |
); |
|
| 221 |
} else {
|
|
| 222 |
this.affiliations.splice(this.index, 1); |
|
| 223 |
this.change(); |
|
| 224 |
} |
|
| 138 |
this.loading = true; |
|
| 139 |
this.affiliationService.deleteAffiliation(this.properties.communityAPI + this.communityId + '/organizations', |
|
| 140 |
this.affiliations[this.index].id).subscribe((deleteOK) => {
|
|
| 141 |
this.affiliations.splice(this.index, 1); |
|
| 142 |
this.handleUpdateSuccess('Organization has been deleted');
|
|
| 143 |
}, |
|
| 144 |
error => {
|
|
| 145 |
this.handleUpdateError('An error has been occurred. Try again later!', error);
|
|
| 146 |
}); |
|
| 225 | 147 |
} |
| 226 |
|
|
| 148 |
|
|
| 227 | 149 |
private organizationsPageStatus() {
|
| 228 |
this._helpContentService.getCommunityFull(this.communityId, this.properties.adminToolsAPIURL).subscribe((community) => {
|
|
| 229 |
for(let page of community.pages) {
|
|
| 230 |
if(page['route'] === '/organizations') {
|
|
| 231 |
this.organizationsEnabled = page['isEnabled']; |
|
| 232 |
return; |
|
| 233 |
} |
|
| 234 |
} |
|
| 235 |
this.organizationsEnabled = false; |
|
| 150 |
this.helpContentService.getCommunityPagesByRoute(this.communityId, '/organizations', this.properties.adminToolsAPIURL).subscribe((page) => {
|
|
| 151 |
this.organizationsPage = page; |
|
| 236 | 152 |
}) |
| 237 | 153 |
} |
| 238 |
|
|
| 239 |
private change() {
|
|
| 240 |
this.hasChanged = true; |
|
| 241 |
if(this.curatorAffiliations) {
|
|
| 242 |
this.affiliationsChange.emit(this.hasChanged); |
|
| 243 |
} |
|
| 244 |
} |
|
| 245 |
|
|
| 246 |
private resetMessages() {
|
|
| 247 |
this.message = ''; |
|
| 248 |
if(this.curatorAffiliations) {
|
|
| 249 |
this.resetCuratorMessages.emit(true); |
|
| 250 |
} |
|
| 251 |
} |
|
| 252 |
|
|
| 154 |
|
|
| 253 | 155 |
handleUpdateError(message: string, error) {
|
| 254 |
this.resetMessages();
|
|
| 255 |
this.message = message;
|
|
| 256 |
this.messageType = "warning";
|
|
| 257 |
console.log('Server responded: ', error);
|
|
| 258 |
|
|
| 259 |
this.showLoading = false;
|
|
| 156 |
UIkit.notification(message, {
|
|
| 157 |
status: 'danger',
|
|
| 158 |
timeout: 6000,
|
|
| 159 |
pos: 'bottom-right'
|
|
| 160 |
}); |
|
| 161 |
this.loading = false;
|
|
| 260 | 162 |
} |
| 261 |
|
|
| 163 |
|
|
| 262 | 164 |
handleUpdateSuccess(message) {
|
| 263 |
this.resetMessages(); |
|
| 264 |
this.message = message; |
|
| 265 |
this.messageType = "success"; |
|
| 266 |
this.showLoading = false; |
|
| 165 |
UIkit.notification(message, {
|
|
| 166 |
status: 'success', |
|
| 167 |
timeout: 6000, |
|
| 168 |
pos: 'bottom-right' |
|
| 169 |
}); |
|
| 170 |
this.loading = false; |
|
| 267 | 171 |
} |
| 268 |
|
|
| 269 |
isEmptyAffiliation(): boolean {
|
|
| 270 |
return ((!this.affiliation.name || this.affiliation.name === '') || |
|
| 271 |
(!this.affiliation.logo_url || this.affiliation.logo_url === '') || |
|
| 272 |
(!this.affiliation.website_url || this.affiliation.website_url === '')); |
|
| 273 |
} |
|
| 274 |
|
|
| 275 |
_format(name: string){
|
|
| 276 |
if(name) {
|
|
| 277 |
return (((name).length > this.maxCharacters) ? (name.substring(0, (this.maxCharacters - ('...').length)) + '...') : name);
|
|
| 278 |
} else {
|
|
| 279 |
return null; |
|
| 280 |
} |
|
| 281 |
} |
|
| 282 |
|
|
| 172 |
|
|
| 283 | 173 |
public urlPrefix(url: string): string {
|
| 284 | 174 |
return StringUtils.urlPrefix(url); |
| 285 | 175 |
} |
| 286 |
|
|
| 176 |
|
|
| 287 | 177 |
} |
Also available in: Unified diff
[Admin | New-UI]: Organizations page finished