From 9ab748a890ade6e85727416b21c3aa713e89c7c8 Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Thu, 4 Jun 2020 11:38:43 +0000 Subject: [PATCH] [Connect | Trunk]: Change communityCard to portalSearchCard git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-connect-portal/trunk@58838 d315682c-612b-4755-9ff5-7f18f6832af3 --- .../affiliations/affiliations.component.html | 2 +- .../communities/communities.component.html | 2 +- .../my-communities.component.html | 6 +- .../searchCommunities.component.ts | 391 +++++++++--------- src/assets/connect-custom.css | 18 - 5 files changed, 202 insertions(+), 217 deletions(-) diff --git a/src/app/affiliations/affiliations.component.html b/src/app/affiliations/affiliations.component.html index 26c6fc4..c2de73c 100644 --- a/src/app/affiliations/affiliations.component.html +++ b/src/app/affiliations/affiliations.component.html @@ -34,7 +34,7 @@ uk-grid>
-
+
diff --git a/src/app/communities/communities.component.html b/src/app/communities/communities.component.html index 5c72ecb..4faea90 100644 --- a/src/app/communities/communities.component.html +++ b/src/app/communities/communities.component.html @@ -19,7 +19,7 @@ class="uk-grid-match uk-grid-medium uk-child-width-1-5@m uk-child-width-1-2 uk-text-center" uk-grid uk-height-match=".community">
-
+
diff --git a/src/app/my-communities/my-communities.component.html b/src/app/my-communities/my-communities.component.html index 2acbad7..0d618cb 100644 --- a/src/app/my-communities/my-communities.component.html +++ b/src/app/my-communities/my-communities.component.html @@ -27,7 +27,7 @@ class="uk-grid-match uk-grid-small uk-child-width-1-3@s uk-child-width-1-2 uk-text-center" uk-grid >
-
@@ -57,7 +57,7 @@ class="uk-grid-match uk-grid-small uk-child-width-1-3@s uk-child-width-1-2 uk-text-center" uk-grid>
-
@@ -101,7 +101,7 @@ class="uk-grid-match uk-grid-medium uk-child-width-1-5@m uk-child-width-1-2 uk-text-center" uk-grid uk-height-match=".community;">
-
+
diff --git a/src/app/searchPages/communities/searchCommunities.component.ts b/src/app/searchPages/communities/searchCommunities.component.ts index 4123770..df0e129 100644 --- a/src/app/searchPages/communities/searchCommunities.component.ts +++ b/src/app/searchPages/communities/searchCommunities.component.ts @@ -3,7 +3,6 @@ import {SearchUtilsClass} from "../../openaireLibrary/searchPages/searchUtils/se import {ErrorMessagesComponent} from "../../openaireLibrary/utils/errorMessages.component"; import {ErrorCodes} from "../../openaireLibrary/utils/properties/errorCodes"; import {EnvProperties} from "../../openaireLibrary/utils/properties/env-properties"; -import {SearchPageComponent} from "../../openaireLibrary/searchPages/searchUtils/searchPage.component"; import {ActivatedRoute} from "@angular/router"; import {AdvancedField, Filter, Value} from "../../openaireLibrary/searchPages/searchUtils/searchHelperClasses.class"; import {SearchFields} from "../../openaireLibrary/utils/properties/searchFields"; @@ -20,23 +19,19 @@ import {NewSearchPageComponent} from "../../openaireLibrary/searchPages/searchUt @Component({ selector: 'search-communities', template: ` - - - - + + ` }) export class SearchCommunitiesComponent { @@ -45,85 +40,93 @@ export class SearchCommunitiesComponent { private errorMessages: ErrorMessagesComponent; public results: CommunityInfo[] = []; public totalResults: CommunityInfo[] = []; - public sub: any; public subResults: any; + public sub: any; + public subResults: any; public filters = []; - public searchFields:SearchFields = new SearchFields(); - public searchUtils:SearchUtilsClass = new SearchUtilsClass(); + public searchFields: SearchFields = new SearchFields(); + public searchUtils: SearchUtilsClass = new SearchUtilsClass(); + public selectedFields: AdvancedField[] = []; public disableForms: boolean = false; public baseUrl: string = null; public fieldIds: string[] = ["q"]; - public refineFields: string[] = this.searchFields.COMMUNITIES_SEARCH_FIELDS; - public fieldIdsMap = {["q"]:{name:"All fields", type:"keyword", param:"q", operator: "op", equalityOperator: "=", filterType: null}}; - public selectedFields: AdvancedField[] = [];//[new AdvancedField(this.fieldIds[0], "", this.fieldIdsMap[this.fieldIds[0]].name, this.fieldIdsMap[this.fieldIds[0]].type,"", "and")]; + public refineFields: string[] = this.searchFields.COMMUNITIES_SEARCH_FIELDS; + public fieldIdsMap = { + ["q"]: { + name: "All fields", + type: "keyword", + param: "q", + operator: "op", + equalityOperator: "=", + filterType: null + } + }; public keyword = ""; public searchLink; public showType = false; public breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'communities'}]; - properties:EnvProperties; - @ViewChild (NewSearchPageComponent) searchPage : NewSearchPageComponent ; + properties: EnvProperties; + @ViewChild(NewSearchPageComponent) searchPage: NewSearchPageComponent; private user: User; - private userFilterLoaded:boolean = false; - - constructor (private route: ActivatedRoute, - private _communitiesService: CommunitiesService, - private _subscribeService: SubscribeService, - private userManagementService: UserManagementService) { + private userFilterLoaded: boolean = false; + + constructor(private route: ActivatedRoute, + private _communitiesService: CommunitiesService, + private _subscribeService: SubscribeService, + private userManagementService: UserManagementService) { this.errorCodes = new ErrorCodes(); this.errorMessages = new ErrorMessagesComponent(); this.searchUtils.status = this.errorCodes.LOADING; } - + public ngOnInit() { var firstLoad = true; this.route.data - .subscribe((data: { envSpecific: EnvProperties }) => { - this.properties = data.envSpecific; - this.piwikSiteId = this.properties.piwikSiteId; - this.baseUrl = data.envSpecific.searchLinkToCommunities; - }); - this.sub = this.route.queryParams.subscribe(params => { + .subscribe((data: { envSpecific: EnvProperties }) => { + this.properties = data.envSpecific; + this.piwikSiteId = this.properties.piwikSiteId; + this.baseUrl = data.envSpecific.searchLinkToCommunities; + }); + this.sub = this.route.queryParams.subscribe(params => { this.searchPage.resultsPerPage = 10; - // this.searchUtils.keyword = (params['fv0']?params['fv0']:''); - // this.searchUtils.keyword = StringUtils.URIDecode(this.searchUtils.keyword); - this.keyword = (params['fv0']?params['fv0']:''); + this.keyword = (params['fv0'] ? params['fv0'] : ''); this.keyword = StringUtils.URIDecode(this.keyword); - this.searchUtils.page = (params['page'] === undefined) ? 1: + params['page']; - this.searchUtils.sortBy = (params['sortBy'] === undefined)? '' : params['sortBy']; - this.searchUtils.size = (params['size'] === undefined) ? this.searchPage.resultsPerPage: +params['size']; + this.searchUtils.page = (params['page'] === undefined) ? 1 : +params['page']; + this.searchUtils.sortBy = (params['sortBy'] === undefined) ? '' : params['sortBy']; + this.searchUtils.size = (params['size'] === undefined) ? this.searchPage.resultsPerPage : +params['size']; this.searchUtils.baseUrl = this.baseUrl; this.searchPage.searchUtils = this.searchUtils; - if(this.searchUtils.size != 5 && this.searchUtils.size != 10 && this.searchUtils.size != 20 && this.searchUtils.size != 50) { + if (this.searchUtils.size != 5 && this.searchUtils.size != 10 && this.searchUtils.size != 20 && this.searchUtils.size != 50) { this.searchUtils.size = this.searchPage.resultsPerPage; } - if(this.searchUtils.sortBy && this.searchUtils.sortBy != "creationdate,descending" && this.searchUtils.sortBy != "creationdate,ascending") { + if (this.searchUtils.sortBy && this.searchUtils.sortBy != "creationdate,descending" && this.searchUtils.sortBy != "creationdate,ascending") { this.searchUtils.sortBy = ""; } this.searchPage.refineFields = this.refineFields; this.searchLink = this.properties.searchLinkToCommunities; this.selectedFields = []; - this.searchPage.prepareSearchPage(this.fieldIds, this.selectedFields, this.refineFields,[], this.fieldIdsMap,null,params, "community", null); - + this.searchPage.prepareSearchPage(this.fieldIds, this.selectedFields, this.refineFields, [], this.fieldIdsMap, null, params, "community", null); + let queryParams = params;//this.searchPage.getQueryParamsFromUrl(params); - if(typeof document !== 'undefined') { + if (typeof document !== 'undefined') { this.userManagementService.getUserInfo().subscribe(user => { this.user = user; this.initCommunities(queryParams); }); - } else { + } else { this.initCommunities(queryParams); } }); } - + public ngOnDestroy() { - if(this.sub){ + if (this.sub) { this.sub.unsubscribe(); } - if(this.subResults){ + if (this.subResults) { this.subResults.unsubscribe(); } } - + /** * Initialize communities from Communities APIs * @@ -131,42 +134,41 @@ export class SearchCommunitiesComponent { */ private initCommunities(params) { this.subResults = this._communitiesService.getCommunitiesState().subscribe( - data => { - if(!data){ - return; - } - for(let i = 0; i < data.length; i++) { - this.totalResults[i] = data[i]; - this.totalResults[i].isManager = false; - this.totalResults[i].isSubscribed = false; - if(this.user) { - this.totalResults[i].isManager = this.isCommunityManager(this.totalResults[i]); - } - } - if(this.user) { - this._subscribeService.getCommunitiesSubscribedTo(this.properties/*, this.user.email*/).subscribe( - res => { - for (let i = 0; i < this.totalResults.length; i++) { - this.totalResults[i].isSubscribed = (res.indexOf(this.totalResults[i].communityId) != -1); - } - this._getResults(params); - } - ); - } - else { - this._getResults(params); - } - }, - err => { - this.handleError('Error getting communities', err); - this.searchUtils.status = this.errorMessages.getErrorCode(err.status); - this.disableForms = false; - HelperFunctions.scroll(); + data => { + if (!data) { + return; } - ); + for (let i = 0; i < data.length; i++) { + this.totalResults[i] = data[i]; + this.totalResults[i].isManager = false; + this.totalResults[i].isSubscribed = false; + if (this.user) { + this.totalResults[i].isManager = this.isCommunityManager(this.totalResults[i]); + } + } + if (this.user) { + this._subscribeService.getCommunitiesSubscribedTo(this.properties/*, this.user.email*/).subscribe( + res => { + for (let i = 0; i < this.totalResults.length; i++) { + this.totalResults[i].isSubscribed = (res.indexOf(this.totalResults[i].communityId) != -1); + } + this._getResults(params); + } + ); + } else { + this._getResults(params); + } + }, + err => { + this.handleError('Error getting communities', err); + this.searchUtils.status = this.errorMessages.getErrorCode(err.status); + this.disableForms = false; + HelperFunctions.scroll(); + } + ); } - - + + /** * Get all communities from Communities API and apply permission access validator, * keyword searching, filter, paging and sorting. @@ -174,27 +176,27 @@ export class SearchCommunitiesComponent { * @param params, status * @private */ - private _getResults(params: Map){ + private _getResults(params: Map) { this.searchUtils.status = this.errorCodes.LOADING; this.disableForms = true; this.results = this.totalResults; - if(this.filters.length === 0 || (this.user && !this.userFilterLoaded)) { + if (this.filters.length === 0 || (this.user && !this.userFilterLoaded)) { this.filters = this.createFilters(); } this.searchUtils.totalResults = 0; this.applyParams(params); } - + /** * Return the communities in which user has permission to view or manage. */ private showCommunities() { let ret: CommunityInfo[] = []; - for(let result of this.results) { + for (let result of this.results) { if (result.status == 'hidden') { continue; } else if (result.status == "manager") { - let mail = (this.user)?this.user.email:null; + let mail = (this.user) ? this.user.email : null; if (mail == null) { // no user continue; } else if (Session.isCommunityCurator(this.user) || Session.isPortalAdministrator(this.user)) { @@ -208,7 +210,7 @@ export class SearchCommunitiesComponent { } this.results = ret; } - + /** * Apply permission access validator, * keyword searching, filter, paging and sorting. @@ -218,59 +220,55 @@ export class SearchCommunitiesComponent { */ public applyParams(params: Map) { this.showCommunities(); - if(this.keyword && this.keyword != '') { + if (this.keyword && this.keyword != '') { this.searchForKeywords(); } this.checkFilters(params); this.sort(); this.searchUtils.totalResults = this.results.length; - // this.searchPage.checkSelectedFilters(this.filters); - // this.searchPage.updateBaseUrlWithParameters(this.filters); - // this.searchPage.buildPageURLParameters(this.filters, [], false); - //this.filters = - this.searchPage.prepareFiltersToShow(this.filters,this.searchUtils.totalResults); - - this.results = this.results.slice((this.searchUtils.page-1)*this.searchUtils.size, (this.searchUtils.page*this.searchUtils.size)); + this.searchPage.prepareFiltersToShow(this.filters, this.searchUtils.totalResults); + + this.results = this.results.slice((this.searchUtils.page - 1) * this.searchUtils.size, (this.searchUtils.page * this.searchUtils.size)); this.searchUtils.status = this.errorCodes.DONE; - if(this.searchUtils.totalResults == 0 ){ + if (this.searchUtils.totalResults == 0) { this.searchUtils.status = this.errorCodes.NONE; } this.disableForms = false; - if(this.searchUtils.status == this.errorCodes.DONE) { + if (this.searchUtils.status == this.errorCodes.DONE) { // Page out of limit!!! - let totalPages:any = this.searchUtils.totalResults/(this.searchUtils.size); - if(!(Number.isInteger(totalPages))) { + let totalPages: any = this.searchUtils.totalResults / (this.searchUtils.size); + if (!(Number.isInteger(totalPages))) { totalPages = (parseInt(totalPages, 10) + 1); } - if(totalPages < this.searchUtils.page) { + if (totalPages < this.searchUtils.page) { this.searchUtils.totalResults = 0; this.searchUtils.status = this.errorCodes.OUT_OF_BOUND; } } HelperFunctions.scroll(); } - - + + /** * Parse the given keywords into array and check if any of the requirements field of a community includes * one of the given words. */ private searchForKeywords() { - let ret: CommunityInfo[] = []; - let keywords: string[] = this.keyword.split(/,(?=(?:[^\"]*\"[^\"]*\")*[^\"]*$)/,-1); - for(let i = 0; i < this.results.length; i++) { - for(let keyword of keywords) { - keyword = keyword.toLowerCase(); - if (keyword != '' && (this.results[i].title.toLowerCase().includes(keyword) || this.results[i].shortTitle.toLowerCase().includes(keyword) || - this.results[i].communityId.toLowerCase().includes(keyword) || this.results[i].description.toLowerCase().includes(keyword))) { - ret.push(this.results[i]); - break; - } - } + let ret: CommunityInfo[] = []; + let keywords: string[] = this.keyword.split(/,(?=(?:[^\"]*\"[^\"]*\")*[^\"]*$)/, -1); + for (let i = 0; i < this.results.length; i++) { + for (let keyword of keywords) { + keyword = keyword.toLowerCase(); + if (keyword != '' && (this.results[i].title.toLowerCase().includes(keyword) || this.results[i].shortTitle.toLowerCase().includes(keyword) || + this.results[i].communityId.toLowerCase().includes(keyword) || this.results[i].description.toLowerCase().includes(keyword))) { + ret.push(this.results[i]); + break; + } } - this.results = ret; + } + this.results = ret; } - + /** * Check the current results if they satisfy the values of each filter category and * update the number of possible results in each value. @@ -281,7 +279,7 @@ export class SearchCommunitiesComponent { let typeResults: CommunityInfo[] = this.applyFilter('type', params); let statusResults: CommunityInfo[] = this.results; let roleResults: CommunityInfo[] = this.results; - if(this.user) { + if (this.user) { statusResults = this.applyFilter('status', params); roleResults = this.applyFilter('role', params); this.resetFilterNumbers('status'); @@ -304,7 +302,7 @@ export class SearchCommunitiesComponent { return roleResults.includes(value); }); } - + /** * Apply filter with filterId and return the results * @@ -312,12 +310,12 @@ export class SearchCommunitiesComponent { * @param params */ private applyFilter(filterId: string, params): CommunityInfo[] { - let results:CommunityInfo[] = []; + let results: CommunityInfo[] = []; let values: string[] = []; - if(params[filterId] != undefined) { - values = (StringUtils.URIDecode(params[filterId])).split(/,(?=(?:[^\"]*\"[^\"]*\")*[^\"]*$)/,-1); + if (params[filterId] != undefined) { + values = (StringUtils.URIDecode(params[filterId])).split(/,(?=(?:[^\"]*\"[^\"]*\")*[^\"]*$)/, -1); } - if(filterId == 'type') { + if (filterId == 'type') { for (let i = 0; i < this.results.length; i++) { if (values.length == 0) { results.push(this.results[i]); @@ -330,8 +328,7 @@ export class SearchCommunitiesComponent { } } } - } - else if(filterId == 'status') { + } else if (filterId == 'status') { for (let i = 0; i < this.results.length; i++) { if (values.length == 0) { results.push(this.results[i]); @@ -351,8 +348,7 @@ export class SearchCommunitiesComponent { } } } - } - else if(filterId == 'role') { + } else if (filterId == 'role') { for (let i = 0; i < this.results.length; i++) { if (values.length == 0) { results.push(this.results[i]); @@ -370,15 +366,15 @@ export class SearchCommunitiesComponent { } return results; } - - /** - * Reset the values of filter with id filterId with zero. - * - * @param filterId - */ + + /** + * Reset the values of filter with id filterId with zero. + * + * @param filterId + */ private resetFilterNumbers(filterId: string) { for (let i = 0; i < this.filters.length; i++) { - if(this.filters[i].filterId == filterId) { + if (this.filters[i].filterId == filterId) { for (let j = 0; j < this.filters[i].values.length; j++) { this.filters[i].values[j].number = 0; } @@ -386,48 +382,46 @@ export class SearchCommunitiesComponent { } } } - - /** - * Update the values of filter with id filterId based on - * results. - * - * @param results - * @param filterId - */ + + /** + * Update the values of filter with id filterId based on + * results. + * + * @param results + * @param filterId + */ private updateFilterNumbers(results: CommunityInfo[], filterId: string) { - for(let k = 0; k < results.length; k++) { + for (let k = 0; k < results.length; k++) { for (let i = 0; i < this.filters.length; i++) { - if(this.filters[i].filterId == filterId) { - if (this.filters[i].filterId == 'type') { - for (let j = 0; j < this.filters[i].values.length; j++) { - if (results[k].type == this.filters[i].values[j].id) { - this.filters[i].values[j].number++; - } - } + if (this.filters[i].filterId == filterId) { + if (this.filters[i].filterId == 'type') { + for (let j = 0; j < this.filters[i].values.length; j++) { + if (results[k].type == this.filters[i].values[j].id) { + this.filters[i].values[j].number++; + } } - else if (this.filters[i].filterId == 'status') { - if (results[k].isSubscribed) { - this.filters[i].values[0].number++; - } else { - this.filters[i].values[1].number++; - } + } else if (this.filters[i].filterId == 'status') { + if (results[k].isSubscribed) { + this.filters[i].values[0].number++; + } else { + this.filters[i].values[1].number++; } - else if (this.filters[i].filterId == 'role') { - if (results[k].isManager) { - this.filters[i].values[0].number++; - } + } else if (this.filters[i].filterId == 'role') { + if (results[k].isManager) { + this.filters[i].values[0].number++; } - break; + } + break; } } } } - - /** - * Sorting results based on sortBy. - */ + + /** + * Sorting results based on sortBy. + */ private sort() { - if(this.searchUtils.sortBy == '') { + if (this.searchUtils.sortBy == '') { this.results.sort((left, right): number => { if (left.title > right.title) { return 1; @@ -437,7 +431,7 @@ export class SearchCommunitiesComponent { return 0; } }) - } else if(this.searchUtils.sortBy == 'creationdate,descending') { + } else if (this.searchUtils.sortBy == 'creationdate,descending') { this.results.sort((left, right): number => { if (!right.date || left.date > right.date) { return -1; @@ -447,7 +441,7 @@ export class SearchCommunitiesComponent { return 0; } }) - } else if(this.searchUtils.sortBy == 'creationdate,ascending') { + } else if (this.searchUtils.sortBy == 'creationdate,ascending') { this.results.sort((left, right): number => { if (!right.date || left.date > right.date) { return 1; @@ -459,58 +453,67 @@ export class SearchCommunitiesComponent { }) } } - - + + private isCommunityManager(community: CommunityInfo): boolean { return Session.isCommunityCurator(this.user) || community.managers.indexOf(this.user.email) != -1; } - - /** - * Create Search Communities filters. - * - */ + + /** + * Create Search Communities filters. + * + */ private createFilters(): Filter[] { let filter_names = []; let filter_ids = []; let searchFields = new SearchFields(); let filter_original_ids = searchFields.COMMUNITIES_SEARCH_FIELDS; let value_names = []; - let value_original_ids=[]; + let value_original_ids = []; this.showType = this.results.filter(community => community.type === 'ri').length > 0; - if(this.showType) { + if (this.showType) { filter_names.push("Type"); filter_ids.push("type"); - value_names.push([ "Research Communities", "Research Initiatives" ]); - value_original_ids.push(["community","ri"]); + value_names.push(["Research Communities", "Research Initiatives"]); + value_original_ids.push(["community", "ri"]); } else { filter_original_ids = searchFields.COMMUNITIES_SEARCH_FIELDS.splice(0, 1); } - if(this.user) { + if (this.user) { filter_names.push("Status"); filter_ids.push("status"); - value_names.push([ "Subscribed", "Non-subscribed"]); + value_names.push(["Subscribed", "Non-subscribed"]); value_original_ids.push(["subscribed", "nonsubscribed"]); filter_names.push("Role"); filter_ids.push("role"); - value_names.push([ "Manager"]); + value_names.push(["Manager"]); value_original_ids.push(["manager"]); this.userFilterLoaded = true; } let filters: Filter[] = []; - for(let i =0 ; i < filter_names.length; i++){ + for (let i = 0; i < filter_names.length; i++) { let values: Value[] = []; - for(let j =0 ; j < value_names[i].length; j++){ - let value: Value = {name: value_names[i][j], id: value_original_ids[i][j], number:0, selected:false}; + for (let j = 0; j < value_names[i].length; j++) { + let value: Value = {name: value_names[i][j], id: value_original_ids[i][j], number: 0, selected: false}; values.push(value); } - let filter: Filter = {title: filter_names[i], filterId: filter_ids[i], originalFilterId: filter_original_ids[i], values : values, countSelectedValues:0, "filterOperator": 'or', valueIsExact: true , filterType: "checkbox"}; + let filter: Filter = { + title: filter_names[i], + filterId: filter_ids[i], + originalFilterId: filter_original_ids[i], + values: values, + countSelectedValues: 0, + "filterOperator": 'or', + valueIsExact: true, + filterType: "checkbox" + }; filters.push(filter); } return filters; } - + private handleError(message: string, error) { console.error('Communities Search Page: ' + message, error); } - + } diff --git a/src/assets/connect-custom.css b/src/assets/connect-custom.css index 70f7fdb..42511c5 100644 --- a/src/assets/connect-custom.css +++ b/src/assets/connect-custom.css @@ -40,24 +40,6 @@ color: white; } -.communityCard { - box-shadow: 0 1px 3px #00000029; - border-radius: 2px; - padding: 20px; - position: relative; - background-color: white; -} - -.rc-label { - color: black !important; - background-color: #FFC700 !important; -} - -.private-view-label { - color: black !important; -} - - .searchForm, .communitiesSearchForm { background: transparent linear-gradient(0deg, #FAFAFA 0%, #E2EEFA 100%); }