From 9c75d63171eb09f0d4e09d92f054ac1be94ce555 Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Mon, 4 Jul 2022 11:53:55 +0300 Subject: [PATCH] Add contente providers modal with new UI --- src/app/app.component.ts | 13 +- src/app/openaireLibrary | 2 +- .../affiliations/affiliations.component.html | 62 ++-- .../add-content-providers.component.html | 117 ++++--- .../add-content-providers.component.ts | 294 ++++++------------ .../manage-content-providers.component.ts | 48 +-- .../remove-content-providers.component.html | 8 +- .../remove-content-providers.component.ts | 5 +- src/assets/dashboard-theme | 2 +- src/assets/openaire-theme | 2 +- 10 files changed, 209 insertions(+), 344 deletions(-) diff --git a/src/app/app.component.ts b/src/app/app.component.ts index e91838e..bfdf853 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -83,11 +83,6 @@ export class AppComponent implements OnInit { })); this.subscriptions.push(this.layoutService.hasHeader.subscribe(hasHeader => { this.hasHeader = hasHeader; - if(!this.hasHeader) { - document.documentElement.style.setProperty('--header-height', '0'); - } else { - document.documentElement.style.setProperty('--header-height', '65px'); - } this.cdr.detectChanges(); })); this.subscriptions.push(this.layoutService.hasAdminMenu.subscribe(hasAdminMenu => { @@ -121,11 +116,9 @@ export class AppComponent implements OnInit { this.loading = false; } } else { - if(this.community) { - this.communityService.setCommunity(null); - this.community = null; - this.buildMenu(); - } + this.communityService.setCommunity(null); + this.community = null; + this.buildMenu(); this.loading = false; } } diff --git a/src/app/openaireLibrary b/src/app/openaireLibrary index a738d3b..de493c8 160000 --- a/src/app/openaireLibrary +++ b/src/app/openaireLibrary @@ -1 +1 @@ -Subproject commit a738d3bb49d1af38f7eaf3ce34d519c76f075e4a +Subproject commit de493c84923348f8289d4e507c04cfec80c30d69 diff --git a/src/app/pages/affiliations/affiliations.component.html b/src/app/pages/affiliations/affiliations.component.html index 224a528..b89164a 100644 --- a/src/app/pages/affiliations/affiliations.component.html +++ b/src/app/pages/affiliations/affiliations.component.html @@ -36,46 +36,46 @@ [pageSize]="pageSize" [type]="'supporting organization' + (affiliations.length > 1?'s':'')">
-
-
-
-
-
- -
-
{{affiliation.name}}
-
- URL: - {{affiliation.website_url}} -
+
+
+
+
+
+ +
+
{{affiliation.name}}
+
+ URL: + {{affiliation.website_url}}
-
-
-
-
- - - Edit - -
+
+
+
+
+
+ + + Edit +
-
-
- -
+
+
+
+
+
-
-
- -
-
- -
-
-
-
No OpenAIRE content providers available
-
An Error Occurred. No OpenAIRE content providers found
-
Service temporarily unavailable. Please try again later.
-
No OpenAIRE content providers found
+
+
+ +
+ If you cannot find a content provider relevant to your community, probably it is not OpenAIRE compliant. + Feel free to contact us + ({{properties.feedbackmailForMissingEntities}}) + to let us know and we'll try to get the provider on board!
- - - - - - - - - - - - - - - - +
+
+ + +
+ +
diff --git a/src/app/pages/content-providers/add-content-providers.component.ts b/src/app/pages/content-providers/add-content-providers.component.ts index eb4ffe9..7220ba5 100644 --- a/src/app/pages/content-providers/add-content-providers.component.ts +++ b/src/app/pages/content-providers/add-content-providers.component.ts @@ -1,8 +1,8 @@ import {Component, OnInit, Input, Output, EventEmitter, ViewChild} from '@angular/core'; -import { ActivatedRoute, Router } from "@angular/router"; -import {SearchResult} from '../../openaireLibrary/utils/entities/searchResult'; +import {ActivatedRoute, Router} from "@angular/router"; +import {SearchResult} from '../../openaireLibrary/utils/entities/searchResult'; import {ErrorCodes} from '../../openaireLibrary/utils/properties/errorCodes'; -import {SearchUtilsClass } from '../../openaireLibrary/searchPages/searchUtils/searchUtils.class'; +import {SearchUtilsClass} from '../../openaireLibrary/searchPages/searchUtils/searchUtils.class'; import {EnvProperties} from '../../openaireLibrary/utils/properties/env-properties'; import {SearchDataprovidersService} from '../../openaireLibrary/services/searchDataproviders.service'; import {RouterHelper} from '../../openaireLibrary/utils/routerHelper.class'; @@ -16,20 +16,17 @@ import {SearchInputComponent} from "../../openaireLibrary/sharedComponents/searc import {Subscriber} from "rxjs"; import {debounceTime, distinctUntilChanged} from "rxjs/operators"; import {ResultPreview} from "../../openaireLibrary/utils/result-preview/result-preview"; - -declare var UIkit; +import {NotificationHandler} from "../../openaireLibrary/utils/notification-handler"; +import {CommunityInfo} from "../../openaireLibrary/connect/community/communityInfo"; @Component({ - selector: 'add-content-providers', - templateUrl: './add-content-providers.component.html', + selector: 'add-content-providers', + templateUrl: './add-content-providers.component.html', }) - export class AddContentProvidersComponent implements OnInit { private subscriptions: any[] = []; public subResults: any; - - private community: string = ''; - + @Input() public community: CommunityInfo; public routerHelper: RouterHelper = new RouterHelper(); public properties: EnvProperties = properties; public errorCodes: ErrorCodes; @@ -38,46 +35,33 @@ export class AddContentProvidersComponent implements OnInit { @Input() communityContentProviders = []; public openaireContentProviders = []; public queryParameters: string = ""; - - // public pagingLimit: number = properties.pagingLimit; public resultsPerPage: number = properties.resultsPerPage; - filterForm: FormGroup; @ViewChild('searchInputComponent') searchInputComponent: SearchInputComponent; - - private contentProviderUrl: string = "https://" + ((properties.environment == "beta" || properties.environment == "development") ? "beta." : "") + "explore.openaire.eu" + properties.searchLinkToDataProvider; + public contentProviderUrl: string = "https://" + ((properties.environment == "beta" || properties.environment == "development") ? "beta." : "") + "explore.openaire.eu" + properties.searchLinkToDataProvider; public body: string = "Send from page"; - + @Output() toggleView: EventEmitter = new EventEmitter(); - - constructor(private route: ActivatedRoute, private _router: Router, - private _searchContentProvidersService: SearchDataprovidersService, - private _manageCommunityContentProvidersService: ManageCommunityContentProvidersService, - private _fb: FormBuilder) { + + constructor(private route: ActivatedRoute, private router: Router, + private searchDataprovidersService: SearchDataprovidersService, + private manageCommunityContentProvidersService: ManageCommunityContentProvidersService, + private fb: FormBuilder) { this.errorCodes = new ErrorCodes(); this.openaireSearchUtils.status = this.errorCodes.LOADING; } - + ngOnInit() { this.subscriptions.push(this.route.params.subscribe(params => { this.openaireSearchUtils.status = this.errorCodes.LOADING; - - this.community = params['community']; - // this.contentProviderUrl = "https://" + ((this.properties.environment == "beta" || this.properties.environment == "development") ? "beta." : "") - // + this.community + ".openaire.eu" + this.properties.searchLinkToDataProvider; - this._getOpenaireContentProviders("", 1, this.resultsPerPage); - this.body = "[Please write your message here]"; this.body = StringUtils.URIEncode(this.body); })); - this.openaireSearchUtils.keyword = ""; - - this.filterForm = this._fb.group({ + this.filterForm = this.fb.group({ keyword: [''], }); - this.subscriptions.push(this.filterForm.get('keyword').valueChanges .pipe(debounceTime(1000), distinctUntilChanged()) .subscribe(value => { @@ -85,81 +69,57 @@ export class AddContentProvidersComponent implements OnInit { }) ); } - + public ngOnDestroy() { this.subscriptions.forEach(sub => { if (sub instanceof Subscriber) { sub.unsubscribe(); } }); - - if(this.subResults){ + + if (this.subResults) { this.subResults.unsubscribe(); } } - + + get loading() { + return this.openaireSearchUtils.status == this.errorCodes.LOADING + } + public addContentProvider(contenProvider: SearchResult) { - if (!Session.isLoggedIn()) { - this._router.navigate(['/user-info'], { - queryParams: { - "errorCode": LoginErrorCodes.NOT_VALID, - "redirectUrl": this._router.url - } - }); - } else { - this.subscriptions.push(this._manageCommunityContentProvidersService.addContentProvider(this.properties, this.community, contenProvider).subscribe( - data => { - this.communityContentProviders.push(data); - UIkit.notification('Content Provider successfully added!', { - status: 'success', - timeout: 6000, - pos: 'bottom-right' - }); - this.communityContentProvidersChanged.emit({ - value: this.communityContentProviders, - }); - }, - err => { - this.handleError('An error has been occurred. Try again later!'); - console.error(err.status); - } - )); - } + this.subscriptions.push(this.manageCommunityContentProvidersService.addContentProvider(this.properties, this.community.communityId, contenProvider).subscribe( + data => { + this.communityContentProviders.push(data); + NotificationHandler.rise('Content Provider successfully added!') + this.communityContentProvidersChanged.emit({ + value: this.communityContentProviders, + }); + }, + error => { + this.handleError('An error has been occurred. Try again later!', error); + } + )); } - + public removeContentProvider(contentProvider) { - if (!Session.isLoggedIn()) { - this._router.navigate(['/user-info'], { - queryParams: { - "errorCode": LoginErrorCodes.NOT_VALID, - "redirectUrl": this._router.url - } - }); - } else { - let communityContentProvider = this.getCommunityContentProvider(contentProvider); - let contentProviderId: string = communityContentProvider['id']; - this.subscriptions.push(this._manageCommunityContentProvidersService.removeContentProvider(this.properties, this.community, contentProviderId).subscribe( - data => { - let index = this.communityContentProviders.indexOf(communityContentProvider); - this.communityContentProviders.splice(index, 1); - UIkit.notification('Content Provider successfully removed!', { - status: 'success', - timeout: 6000, - pos: 'bottom-right' - }); - this.communityContentProvidersChanged.emit({ - value: this.communityContentProviders, - }); - }, - err => { - this.handleError('An error has been occurred. Try again later!'); - console.error(err); - } - )); - } + let communityContentProvider = this.getCommunityContentProvider(contentProvider); + let contentProviderId: string = communityContentProvider['id']; + this.subscriptions.push(this.manageCommunityContentProvidersService.removeContentProvider(this.properties, this.community.communityId, contentProviderId).subscribe( + data => { + let index = this.communityContentProviders.indexOf(communityContentProvider); + this.communityContentProviders.splice(index, 1); + NotificationHandler.rise('Content Provider successfully removed!') + this.communityContentProvidersChanged.emit({ + value: this.communityContentProviders, + }); + }, + error => { + this.handleError('An error has been occurred. Try again later!', error); + } + )); } - - public getCommunityContentProvider(contentProvider: any): string { + + public getCommunityContentProvider(contentProvider: any): any { let index: number = 0; for (let communityContentProvider of this.communityContentProviders) { if (communityContentProvider.openaireId == contentProvider.id) { @@ -167,133 +127,69 @@ export class AddContentProvidersComponent implements OnInit { } index++; } - return ""; + return null; } - + public getResultPreview(result: SearchResult): ResultPreview { return ResultPreview.searchResultConvert(result, "dataprovider"); } - - // public inCommunity(contentProvider: any): any { - // for(let communityContentProvider of this.communityContentProviders) { - // if(communityContentProvider.openaireId == contentProvider.id) { - // return true; - // } - // } - // - // if(this.undo[contentProvider.id]) { - // return true; - // } - // return false; - // } - + private _getOpenaireContentProviders(parameters: string, page: number, size: number) { - if (!Session.isLoggedIn()) { - this._router.navigate(['/user-info'], { - queryParams: { - "errorCode": LoginErrorCodes.NOT_VALID, - "redirectUrl": this._router.url - } - }); - } else { - // if (page > this.pagingLimit) { - // size = 0; - // } - - if (this.openaireSearchUtils.status == this.errorCodes.LOADING) { - this.openaireSearchUtils.status = this.errorCodes.LOADING; - - this.openaireContentProviders = []; - this.openaireSearchUtils.totalResults = 0; - - if(this.subResults){ - this.subResults.unsubscribe(); - } - this.subResults = this._searchContentProvidersService.searchDataproviders(parameters, null, page, size, [], this.properties).subscribe( - data => { - this.openaireSearchUtils.totalResults = data[0]; - this.openaireContentProviders = data[1]; - - //this.searchPage.checkSelectedFilters(this.filters); - this.openaireSearchUtils.status = this.errorCodes.DONE; - if (this.openaireSearchUtils.totalResults == 0) { - this.openaireSearchUtils.status = this.errorCodes.NONE; - } - - // if (this.openaireSearchUtils.status == this.errorCodes.DONE) { - // // Page out of limit!!! - // let totalPages: any = this.openaireSearchUtils.totalResults / (this.openaireSearchUtils.size); - // if (!(Number.isInteger(totalPages))) { - // totalPages = (parseInt(totalPages, 10) + 1); - // } - // if (totalPages < page) { - // this.openaireSearchUtils.totalResults = 0; - // this.openaireSearchUtils.status = this.errorCodes.OUT_OF_BOUND; - // } - // } - }, - err => { - console.error(err); - //TODO check erros (service not available, bad request) - if (err.status == '404') { - this.openaireSearchUtils.status = this.errorCodes.NOT_FOUND; - } else if (err.status == '500') { - this.openaireSearchUtils.status = this.errorCodes.ERROR; - } else { - this.openaireSearchUtils.status = this.errorCodes.NOT_AVAILABLE; - } - } - ); + if (this.openaireSearchUtils.status == this.errorCodes.LOADING) { + this.openaireSearchUtils.status = this.errorCodes.LOADING; + + this.openaireContentProviders = []; + this.openaireSearchUtils.totalResults = 0; + + if (this.subResults) { + this.subResults.unsubscribe(); } + this.subResults = this.searchDataprovidersService.searchDataproviders(parameters, null, page, size, [], this.properties).subscribe( + data => { + this.openaireSearchUtils.totalResults = data[0]; + this.openaireContentProviders = data[1]; + this.openaireSearchUtils.status = this.errorCodes.DONE; + if (this.openaireSearchUtils.totalResults == 0) { + this.openaireSearchUtils.status = this.errorCodes.NONE; + } + }, + error => { + if (error.status == '404') { + this.handleError('No OpenAIRE content providers found.', error); + this.openaireSearchUtils.status = this.errorCodes.NOT_FOUND; + } else if (error.status == '500') { + this.handleError('An Error Occurred. No OpenAIRE content providers found.', error); + this.openaireSearchUtils.status = this.errorCodes.ERROR; + } else { + this.handleError('Service temporarily unavailable. Please try again later.', error); + this.openaireSearchUtils.status = this.errorCodes.NOT_AVAILABLE; + } + } + ); } } - - totalPages(): number { - let totalPages: any = this.openaireSearchUtils.totalResults / (this.resultsPerPage); - if (!(Number.isInteger(totalPages))) { - totalPages = (parseInt(totalPages, 10) + 1); - } - return totalPages; - } - + keywordChanged(keyword) { this.openaireSearchUtils.keyword = keyword; this.buildQueryParameters(); this.goTo(1); } - + buildQueryParameters() { this.queryParameters = ""; - if (this.openaireSearchUtils.keyword) { this.queryParameters = "q=" + StringUtils.URIEncode(this.openaireSearchUtils.keyword); } } - + goTo(page: number = 1) { this.openaireSearchUtils.page = page; this.openaireSearchUtils.status = this.errorCodes.LOADING; this._getOpenaireContentProviders(this.queryParameters, page, this.resultsPerPage); } - - back() { - this.toggleView.emit(null); - } - - public onSearchClose() { - this.openaireSearchUtils.keyword = this.filterForm.get('keyword').value; - } - - public resetInput() { - this.openaireSearchUtils.keyword = null; - this.searchInputComponent.reset() - } - - handleError(message: string) { - UIkit.notification(message, { - status: 'danger', - timeout: 6000, - pos: 'bottom-right' - }); + + handleError(message: string, error = null) { + console.error(error); + NotificationHandler.rise(message, 'danger'); } } diff --git a/src/app/pages/content-providers/manage-content-providers.component.ts b/src/app/pages/content-providers/manage-content-providers.component.ts index 362c86c..3f15e5e 100644 --- a/src/app/pages/content-providers/manage-content-providers.component.ts +++ b/src/app/pages/content-providers/manage-content-providers.component.ts @@ -1,8 +1,6 @@ import {Component, ElementRef, Input, OnInit, ViewChild} from '@angular/core'; import {Router} from "@angular/router"; - import {RemoveContentProvidersComponent} from './remove-content-providers.component'; -import {HelperFunctions} from "../../openaireLibrary/utils/HelperFunctions.class"; import {Title} from '@angular/platform-browser'; import { FullScreenModalComponent @@ -17,27 +15,13 @@ import {CommunityService} from "../../openaireLibrary/connect/community/communit @Component({ selector: 'manage-content-providers', template: ` - + - -
- -
-
- If you cannot find a content provider relevant to your community, probably it is not OpenAIRE compliant. - Feel free to contact us - ({{properties.feedbackmailForMissingEntities}}) - to let us know and we'll try to get the provider on board! -
-
-
- - + + ` }) @@ -46,7 +30,6 @@ export class ManageContentProvidersComponent implements OnInit { @Input() communityContentProviders = []; @ViewChild(RemoveContentProvidersComponent) removeContentProvidersComponent: RemoveContentProvidersComponent; @ViewChild('fsModal', { static: true }) fullscreen: FullScreenModalComponent; - public toggle: boolean = false; private subscriptions: any[] = []; public showLoadingInRemove: boolean = true; public body: string = "Send from page"; @@ -67,9 +50,6 @@ export class ManageContentProvidersComponent implements OnInit { this.body = StringUtils.URIEncode(this.body); } })); - this.fullscreen.title = "Search and Add Content Providers"; - this.fullscreen.okButtonText = "Done"; - this.fullscreen.okButton = true; } public ngOnDestroy() { @@ -79,20 +59,20 @@ export class ManageContentProvidersComponent implements OnInit { } }); } - - public toggleAction() { - HelperFunctions.scroll(); - this.toggle = !this.toggle; - if (this.toggle) { - this.fullscreen.open(); - } + + public openAddContentProviders() { + this.fullscreen.title = "Search and Add Content Providers"; + this.fullscreen.okButtonText = "Done"; + this.fullscreen.back = true; + this.fullscreen.okButton = true; + this.fullscreen.open(); } public communityContentProvidersChanged($event) { this.communityContentProviders = $event.value; this.showLoadingInRemove = false; - if (this.toggle) { + if (this.fullscreen.isOpen) { this.removeContentProvidersComponent.applyFilters(); } } diff --git a/src/app/pages/content-providers/remove-content-providers.component.html b/src/app/pages/content-providers/remove-content-providers.component.html index 3e1c700..66a80a8 100644 --- a/src/app/pages/content-providers/remove-content-providers.component.html +++ b/src/app/pages/content-providers/remove-content-providers.component.html @@ -18,14 +18,14 @@
-
+
@@ -87,8 +87,8 @@
- - Delete + + Remove
diff --git a/src/app/pages/content-providers/remove-content-providers.component.ts b/src/app/pages/content-providers/remove-content-providers.component.ts index 0c312c5..0e832ae 100644 --- a/src/app/pages/content-providers/remove-content-providers.component.ts +++ b/src/app/pages/content-providers/remove-content-providers.component.ts @@ -28,6 +28,7 @@ export class RemoveContentProvidersComponent implements OnInit { public previewCommunityContentProviders = []; public errorCodes: ErrorCodes; @Input() public loading: boolean = true; + @Input() public disableAdd: boolean = false; @Input() public community: CommunityInfo; @Input() public communityContentProviders = []; @Output() communityContentProvidersChanged = new EventEmitter(); @@ -47,7 +48,7 @@ export class RemoveContentProvidersComponent implements OnInit { filterForm: FormGroup; private searchText: RegExp = new RegExp(''); public keyword: string = ''; - @Output() toggleView: EventEmitter = new EventEmitter(); + @Output() addContentProviders: EventEmitter = new EventEmitter(); @Input() public toggle: boolean = true; constructor(private route: ActivatedRoute, private _router: Router, @@ -164,7 +165,7 @@ export class RemoveContentProvidersComponent implements OnInit { } addNew() { - this.toggleView.emit(null); + this.addContentProviders.emit(); } public applyFilters() { diff --git a/src/assets/dashboard-theme b/src/assets/dashboard-theme index 318b3cd..319eff1 160000 --- a/src/assets/dashboard-theme +++ b/src/assets/dashboard-theme @@ -1 +1 @@ -Subproject commit 318b3cdf42922d8b04400bb010733b78fcf1fe1c +Subproject commit 319eff1cc355ffc4148cf20c4ba23e15fbc6a6f6 diff --git a/src/assets/openaire-theme b/src/assets/openaire-theme index 25f7f7d..35bca0f 160000 --- a/src/assets/openaire-theme +++ b/src/assets/openaire-theme @@ -1 +1 @@ -Subproject commit 25f7f7dd34fae80d1e2e25935c2f2772c5800e70 +Subproject commit 35bca0f68bf19337413167ecf770f1027902964f