diff --git a/src/app/openaireLibrary b/src/app/openaireLibrary index 1fbb461..2eb0671 160000 --- a/src/app/openaireLibrary +++ b/src/app/openaireLibrary @@ -1 +1 @@ -Subproject commit 1fbb461faa26047e350ab3319684f7ab62154c3e +Subproject commit 2eb06717dd681898ef47da0f5da39a9005df3878 diff --git a/src/app/pages/customization/Color.component.ts b/src/app/pages/customization/Color.component.ts index 596e92c..9bc1512 100644 --- a/src/app/pages/customization/Color.component.ts +++ b/src/app/pages/customization/Color.component.ts @@ -13,8 +13,8 @@ import {CustomizationOptions} from '../../openaireLibrary/connect/community/Cust
{{label}}
- Contrast ratio may be too low. +
Contrast ratio may be too low.
` }) diff --git a/src/app/pages/customization/background-upload.component.ts b/src/app/pages/customization/background-upload.component.ts new file mode 100644 index 0000000..635a60f --- /dev/null +++ b/src/app/pages/customization/background-upload.component.ts @@ -0,0 +1,166 @@ +import {Component, Input, OnInit} from '@angular/core'; +import {properties} from '../../../environments/environment'; +import {UtilitiesService} from '../../openaireLibrary/services/utilities.service'; +import {Subscription} from 'rxjs'; + +declare var UIkit; + +@Component({ + selector: 'background-upload', + template: ` + + +
+ +
+ upload an image +
+
+ + +
+
+ +
+
+ +
+
+ +
+
+
+
Position
+ +
+ + + + Top + Center + Bottom + + + +
+
+ + ` +}) + +export class BackgroundUploadComponent implements OnInit { + @Input() label:string = ""; + @Input() background; + @Input() oldBackground; + // @Input() light:boolean; + @Input() communityId:string = ""; + + public file: File; + // public photo: string | ArrayBuffer; + private maxsize: number = 2000 * 1024; + properties; + private subscriptions: any[] = []; + + + constructor(private utilsService: UtilitiesService) { + } + + + ngOnInit() { + this.properties = properties; + } + ngOnDestroy() { + this.subscriptions.forEach(subscription => { + if (subscription instanceof Subscription) { + subscription.unsubscribe(); + } + }); + } + + removePhoto() { + + if (typeof document != 'undefined') { + (document.getElementById("photo")).value = ""; + } + // this.initPhoto(); + console.log(this.background.imageFile + " " + this.oldBackground.imageFile) + if(this.background.imageFile != this.oldBackground.imageFile){ + this.deletePhoto(); + } + this.background.imageFile = null; + this.file = null; + + } + + + + public deletePhoto() { + if (this.background.imageFile) { + this.subscriptions.push(this.utilsService.deletePhoto(properties.utilsService + '/delete/community/' + this.communityId + "/" +this.background.imageFile).subscribe()); + } + } + + fileChangeEvent(event) { + if (event.target.files && event.target.files[0]) { + this.file = event.target.files[0]; + if (this.file.type !== 'image/png' && this.file.type !== 'image/jpeg') { + UIkit.notification('You must choose a file with type: image/png or image/jpeg!', { + status: 'danger', + timeout: 6000, + pos: 'bottom-right' + }); + this.removePhoto(); + } else if (this.file.size > this.maxsize) { + UIkit.notification('File exceeds size\'s limit ('+this.maxsize/1024+'KB)! ', { + status: 'danger', + timeout: 6000, + pos: 'bottom-right' + }); + this.removePhoto(); + } else { + /*const reader = new FileReader(); + reader.readAsDataURL(this.file); + reader.onload = () => { + this.background.imageFile = reader.result; + + };*/ + this.save(); + } + } + } + + public save() { + if (this.file) { + this.subscriptions.push(this.utilsService.uploadPhoto(this.properties.utilsService + "/upload/community/"+ this.communityId + "/" + encodeURIComponent(this.communityId+"-"+this.label)+"?big=1", this.file).subscribe(res => { + this.deletePhoto(); + this.removePhoto(); + this.background.imageFile = res.filename; + + }, error => { + UIkit.notification("An error has been occurred during upload your image. Try again later", { + status: 'danger', + timeout: 6000, + pos: 'bottom-right' + }); + })); + } + } +} diff --git a/src/app/pages/customization/background.component.ts b/src/app/pages/customization/background.component.ts index bf0f794..8867c80 100644 --- a/src/app/pages/customization/background.component.ts +++ b/src/app/pages/customization/background.component.ts @@ -1,8 +1,5 @@ import {Component, Input, OnInit} from '@angular/core'; -import {CustomizationOptions} from '../../openaireLibrary/connect/community/CustomizationOptions'; import {properties} from '../../../environments/environment'; -import {UtilitiesService} from '../../openaireLibrary/services/utilities.service'; -import {Subscription} from 'rxjs'; declare var UIkit; @@ -13,37 +10,6 @@ declare var UIkit; [label]="label" [light]="light" (colorChange)= " background.color = $event;"> -
- -
-
-
- -
- -
-
-
-
- -
-
- -
-
- -
-
-
` }) @@ -52,98 +18,16 @@ export class BackgroundComponent implements OnInit { @Input() background; @Input() oldBackground; @Input() light:boolean; - @Input() upload:boolean = false; @Input() communityId:string = ""; public file: File; - // public photo: string | ArrayBuffer; - private maxsize: number = 200 * 1024; properties; - private subscriptions: any[] = []; - constructor(private utilsService: UtilitiesService) { + constructor() { } ngOnInit() { this.properties = properties; } - ngOnDestroy() { - this.subscriptions.forEach(subscription => { - if (subscription instanceof Subscription) { - subscription.unsubscribe(); - } - }); - } - - removePhoto() { - - if (typeof document != 'undefined') { - (document.getElementById("photo")).value = ""; - } - // this.initPhoto(); - console.log(this.background.imageFile + " " + this.oldBackground.imageFile) - if(this.background.imageFile != this.oldBackground.imageFile){ - this.deletePhoto(); - } - this.background.imageFile = null; - this.file = null; - - } - - - - public deletePhoto() { - console.log("deletePhoto") - if (this.background.imageFile) { - console.log("deletePhoto@@") - this.subscriptions.push(this.utilsService.deletePhoto(properties.utilsService + '/delete/stakeholder/' +this.background.imageFile).subscribe()); - } - } - - fileChangeEvent(event) { - if (event.target.files && event.target.files[0]) { - this.file = event.target.files[0]; - if (this.file.type !== 'image/png' && this.file.type !== 'image/jpeg') { - UIkit.notification('You must choose a file with type: image/png or image/jpeg!', { - status: 'danger', - timeout: 6000, - pos: 'bottom-right' - }); - this.removePhoto(); - } else if (this.file.size > this.maxsize) { - UIkit.notification('File exceeds size\'s limit ('+this.maxsize/1024+'KB)! ', { - status: 'danger', - timeout: 6000, - pos: 'bottom-right' - }); - this.removePhoto(); - } else { - /*const reader = new FileReader(); - reader.readAsDataURL(this.file); - reader.onload = () => { - this.background.imageFile = reader.result; - - };*/ - this.save(); - } - } - } - - public save() { - if (this.file) { - this.subscriptions.push(this.utilsService.uploadPhoto(this.properties.utilsService + "/upload/stakeholder/" + encodeURIComponent(this.communityId+"-"+this.label), this.file).subscribe(res => { - this.deletePhoto(); - this.removePhoto(); - this.background.imageFile = res.filename; - - }, error => { - UIkit.notification("An error has been occurred during upload your image. Try again later", { - status: 'danger', - timeout: 6000, - pos: 'bottom-right' - }); - })); - } - } } diff --git a/src/app/pages/customization/customization.component.html b/src/app/pages/customization/customization.component.html index 670e4b1..7fe08c5 100644 --- a/src/app/pages/customization/customization.component.html +++ b/src/app/pages/customization/customization.component.html @@ -44,7 +44,7 @@
-
Quick look +
Quick look
Dark background
@@ -40,7 +51,15 @@ import {ButtonsCustomization} from '../../openaireLibrary/connect/community/Cust } .lightBackground{ background-color: var(--background-low-color); - } + } + .searchForm { + background: var(--svgURL) transparent no-repeat center bottom; + + + background-size: auto; + background-size: cover !important; + height: inherit; + } `] }) @@ -50,6 +69,7 @@ export class QuickLookBackgroundsComponent { @Input() secondaryColor; @Input() darkBackgroundColor; @Input() lightBackgroundColor; + @Input() formBackgroundColor; @Input() buttonsOnDark:ButtonsCustomization; @Input() buttonsOnLight:ButtonsCustomization; constructor( private sanitizer: DomSanitizer) { @@ -57,7 +77,9 @@ export class QuickLookBackgroundsComponent { @HostBinding("attr.style") public get valueAsStyle(): any { + let search = `Asset 3`; + let svg = 'data:image/svg+xml,' + (search.replace('{{color}}', this.formBackgroundColor)); return this.sanitizer.bypassSecurityTrustStyle(`--portal-main-color: ${this.primaryColor}; --portal-dark-color: ${this.secondaryColor}; - --background-dark-color: ${this.darkBackgroundColor}; --background-low-color: ${this.lightBackgroundColor};`); + --background-dark-color: ${this.darkBackgroundColor}; --background-low-color: ${this.lightBackgroundColor}; --svgURL: url('${svg}');`); } } diff --git a/src/app/pages/manage-communities/manage-communities.component.ts b/src/app/pages/manage-communities/manage-communities.component.ts index 465bf78..dd97f3d 100644 --- a/src/app/pages/manage-communities/manage-communities.component.ts +++ b/src/app/pages/manage-communities/manage-communities.component.ts @@ -1,4 +1,4 @@ -import {Component, OnDestroy, OnInit} from '@angular/core'; +import {Component, OnDestroy, OnInit, ViewChild} from '@angular/core'; import {Session, User} from '../../openaireLibrary/login/utils/helper.class'; import {EnvProperties} from '../../openaireLibrary/utils/properties/env-properties'; import {ActivatedRoute} from '@angular/router'; @@ -8,6 +8,10 @@ import {UserManagementService} from '../../openaireLibrary/services/user-managem import {Title} from '@angular/platform-browser'; import {properties} from "../../../environments/environment"; import {Subscription} from "rxjs"; +import {SearchInputComponent} from '../../openaireLibrary/sharedComponents/search-input/search-input.component'; +import {FormBuilder, FormGroup} from '@angular/forms'; +import {SearchUtilsClass} from '../../openaireLibrary/searchPages/searchUtils/searchUtils.class'; +import {ErrorCodes} from '../../openaireLibrary/utils/properties/errorCodes'; type Tab = 'all' | 'communities' | 'ris'; @@ -23,7 +27,15 @@ type Tab = 'all' | 'communities' | 'ris';
  • Research Initiatives
    • -
    +
    +
    +
    +
    +
    @@ -33,7 +45,7 @@ type Tab = 'all' | 'communities' | 'ris';
    Research Communities
    - +
    @@ -47,7 +59,7 @@ type Tab = 'all' | 'communities' | 'ris';
    Research Initiatives
    - +
    @@ -81,19 +93,44 @@ type Tab = 'all' | 'communities' | 'ris'; export class ManageCommunitiesComponent implements OnInit, OnDestroy { public properties: EnvProperties = properties; public communities: CommunityInfo[] = []; + public filteredCommunities: CommunityInfo[] = []; public ris: CommunityInfo[] = []; + public filteredRis: CommunityInfo[] = []; public loading: boolean; public user: User; public tab: Tab = "all"; private subscriptions: any[] = []; + public communitySearchUtils: SearchUtilsClass = new SearchUtilsClass(); + public errorCodes: ErrorCodes; + + // Search + @ViewChild('searchInputComponent') searchInputComponent: SearchInputComponent; + filterForm: FormGroup; + // private searchText: RegExp = new RegExp(''); + private searchText: string = ''; + public keyword: string = ''; constructor(private route: ActivatedRoute, + private _fb: FormBuilder, private communitiesService: CommunitiesService, private title: Title, private userManagementService: UserManagementService) { + this.errorCodes = new ErrorCodes(); + this.communitySearchUtils.status = this.errorCodes.LOADING; } ngOnInit() { + this.communitySearchUtils.keyword = ""; + + this.filterForm = this._fb.group({ + keyword: [''], + }); + + this.subscriptions.push(this.filterForm.get('keyword').valueChanges.subscribe(value => { + this.searchText = value.toLowerCase(); + this.applyFilters(); + })); + this.loading = true; this.title.setTitle('Administrator Dashboard | Manage Communities'); this.subscriptions.push(this.route.fragment.subscribe((fragment: Tab) => { @@ -109,18 +146,22 @@ export class ManageCommunitiesComponent implements OnInit, OnDestroy { this.subscriptions.push(this.communitiesService.getCommunities(this.properties, this.properties.communityAPI + 'communities').subscribe( communities => { this.communities = []; + this.filteredCommunities = []; this.ris = []; - console.log(communities); + this.filteredRis = []; communities.forEach(community => { if (Session.isPortalAdministrator(this.user) || Session.isCommunityCurator(this.user) || Session.isManager('community', community.communityId, this.user)) { if (community.type === 'community') { this.communities.push(community); + this.filteredCommunities.push(community); } else { this.ris.push(community); + this.filteredRis.push(community); } } }) this.loading = false; + this.keyword = ''; })); } })); @@ -151,5 +192,19 @@ export class ManageCommunitiesComponent implements OnInit, OnDestroy { default: return false; } + } + + public applyFilters() { + this.filteredCommunities = this.communities.filter(community => community.shortTitle.toLowerCase().includes(this.searchText) || community.title.toLowerCase().includes(this.searchText)); + this.filteredRis = this.ris.filter(community => community.shortTitle.toLowerCase().includes(this.searchText) || community.title.toLowerCase().includes(this.searchText)); + } + + public onSearchClose() { + this.communitySearchUtils.keyword = this.filterForm.get('keyword').value; + } + + public resetInput() { + this.communitySearchUtils.keyword = null; + this.searchInputComponent.reset() } } diff --git a/src/app/pages/manage-communities/manage-communities.module.ts b/src/app/pages/manage-communities/manage-communities.module.ts index db83fdd..bf73f92 100644 --- a/src/app/pages/manage-communities/manage-communities.module.ts +++ b/src/app/pages/manage-communities/manage-communities.module.ts @@ -12,10 +12,11 @@ import {IconsModule} from '../../openaireLibrary/utils/icons/icons.module'; import {IconsService} from '../../openaireLibrary/utils/icons/icons.service'; import {earth, group, lock} from '../../openaireLibrary/utils/icons/icons'; import {LogoUrlPipeModule} from "../../openaireLibrary/utils/pipes/logoUrlPipe.module"; +import {SearchInputModule} from '../../openaireLibrary/sharedComponents/search-input/search-input.module'; @NgModule({ imports: [ - CommonModule, ManageCommunitiesRoutingModule, RouterModule, PageContentModule, LoadingModule, UrlPrefixModule, IconsModule, LogoUrlPipeModule + CommonModule, ManageCommunitiesRoutingModule, RouterModule, PageContentModule, LoadingModule, UrlPrefixModule, IconsModule, LogoUrlPipeModule, SearchInputModule ], declarations: [ManageCommunitiesComponent], providers: [LoginGuard, CommunitiesService],