MaDgIK
/
connect-admin
13
0
Fork 0
Code Issues Pull Requests Projects Releases 9 Wiki Activity

Merge branch 'master' of code-repo.d4science.org:MaDgIK/connect-admin

This commit is contained in:
Konstantinos Triantafyllou 2021-11-30 12:00:21 +02:00
parent e73ce0c083 fffd6e1afc
commit 67f9b75eed
10 changed files with 275 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/openaireLibrary

@ -1 +1 @@
Subproject commit 1fbb461faa26047e350ab3319684f7ab62154c3e Subproject commit 2eb06717dd681898ef47da0f5da39a9005df3878

2
src/app/pages/customization/Color.component.ts
View File

@ -13,8 +13,8 @@ import {CustomizationOptions} from '../../openaireLibrary/connect/community/Cust
</div> </div>
<div class="uk-margin-small-left"> {{label}}</div> <div class="uk-margin-small-left"> {{label}}</div>
</div> </div>
<span class="uk-text-warning uk-text-small uk-margin-small-left" *ngIf="warningForContrast(color)">Contrast ratio may be too low.</span>
</div> </div>
<div class="uk-text-warning uk-text-small uk-margin-small-left" *ngIf="warningForContrast(color)">Contrast ratio may be too low.</div>
` `
}) })

166
src/app/pages/customization/background-upload.component.ts Normal file
View File

@ -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: `
<input #file id="photo" type="file" class="uk-hidden" (change)="fileChangeEvent($event)"/>
<!-- <span class="uk-text-middle">Attach binaries by dropping them here or</span>-->
<div *ngIf="!background.imageFile" class=" uk-placeholder uk-text-center uk-height-small">
<span uk-icon="icon: cloud-upload"></span>
<div uk-form-custom>
<span class="uk-link uk-margin-small-left" (click)="file.click()">upload an image</span>
</div>
</div>
<!-- <input #file id="photo" type="file" class="uk-hidden" (change)="fileChangeEvent($event)"/>-->
<!--<div *ngIf="!background.imageFile" class=" uk-width-1-1"
style="margin-top: 7px;">
<div class="uk-grid uk-flex uk-flex-middle" uk-grid>
<div class=" uk-width-1-1 uk-flex uk-flex-center">
<button class="uk-button uk-button-secondary uk-flex uk-flex-middle uk-flex-wrap"
(click)="file.click()">
<icon name="cloud_upload" [flex]="true"></icon>
<span class="uk-margin-small-left">Upload a file</span>
</button>
</div>
</div>
</div>-->
<div *ngIf="background.imageFile" class="uk-width-1-1 uk-flex uk-flex-middle ">
<div class="uk-card uk-card-default uk-text-center uk-width-expand">
<img class="uk-height-small uk-width-expand" [src]="background.imageFile.indexOf('data:')==-1?(properties.utilsService + '/download/'+background.imageFile):background.imageFile">
</div>
<div class="uk-margin-left">
<button (click)="removePhoto()" uk-tooltip="Remove" class="uk-button-secondary outlined uk-icon-button">
<icon name="remove"></icon>
</button>
</div>
<div class="uk-margin-small-left">
<button class="uk-button-secondary uk-icon-button" (click)="file.click()" uk-tooltip="Edit">
<icon name="edit"></icon>
</button>
</div>
</div>
<div class="uk-margin-medium-top">
<div class="uk-text-bold uk-form-label uk-margin-small-bottom"> Position</div>
<!-- <div class="uk-margin-bottom uk-form-hint "> hint</div>-->
<div class="input-box ">
<mat-form-field class="uk-width-1-1">
<!-- (ngModelChange)="positionChanged()"-->
<mat-select class="" [(ngModel)]="background.position" name="{{'select_type_'}}"
[disableOptionCentering]="true"
panelClass="">
<mat-option [value]="'top'">Top</mat-option>
<mat-option [value]="'center'">Center</mat-option>
<mat-option [value]="'bottom'">Bottom</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
`
})
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') {
(<HTMLInputElement>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'
});
}));
}
}
}

118
src/app/pages/customization/background.component.ts
View File

@ -1,8 +1,5 @@
import {Component, Input, OnInit} from '@angular/core'; import {Component, Input, OnInit} from '@angular/core';
import {CustomizationOptions} from '../../openaireLibrary/connect/community/CustomizationOptions';
import {properties} from '../../../environments/environment'; import {properties} from '../../../environments/environment';
import {UtilitiesService} from '../../openaireLibrary/services/utilities.service';
import {Subscription} from 'rxjs';
declare var UIkit; declare var UIkit;
@ -13,37 +10,6 @@ declare var UIkit;
[label]="label" [light]="light" [label]="label" [light]="light"
(colorChange)= (colorChange)=
" background.color = $event;"></color> " background.color = $event;"></color>
<div *ngIf="upload" >
<input #file id="photo" type="file" class="uk-hidden" (change)="fileChangeEvent($event)"/>
<div *ngIf="!background.imageFile" class=" uk-width-1-1"
style="margin-top: 7px;">
<div class="uk-grid uk-flex uk-flex-middle" uk-grid>
<div class=" uk-width-1-1 uk-flex uk-flex-center">
<button class="uk-button uk-button-secondary uk-flex uk-flex-middle uk-flex-wrap"
(click)="file.click()">
<icon name="cloud_upload" [flex]="true"></icon>
<span class="uk-margin-small-left">Upload a file</span>
</button>
</div>
</div>
</div>
<div *ngIf="background.imageFile" class="uk-width-1-1 uk-flex uk-flex-middle">
<div class="uk-card uk-card-default uk-text-center ">
<img class="" [src]="background.imageFile.indexOf('data:')==-1?(properties.utilsService + '/download/'+background.imageFile):background.imageFile">
</div>
<div class="uk-margin-left">
<button (click)="removePhoto()" uk-tooltip="Remove" class="uk-button-secondary outlined uk-icon-button">
<icon name="remove"></icon>
</button>
</div>
<div class="uk-margin-small-left">
<button class="uk-button-secondary uk-icon-button" (click)="file.click()" uk-tooltip="Edit">
<icon name="edit"></icon>
</button>
</div>
</div>
</div>
` `
}) })
@ -52,98 +18,16 @@ export class BackgroundComponent implements OnInit {
@Input() background; @Input() background;
@Input() oldBackground; @Input() oldBackground;
@Input() light:boolean; @Input() light:boolean;
@Input() upload:boolean = false;
@Input() communityId:string = ""; @Input() communityId:string = "";
public file: File; public file: File;
// public photo: string | ArrayBuffer;
private maxsize: number = 200 * 1024;
properties; properties;
private subscriptions: any[] = [];
constructor(private utilsService: UtilitiesService) { constructor() {
} }
ngOnInit() { ngOnInit() {
this.properties = properties; this.properties = properties;
} }
ngOnDestroy() {
this.subscriptions.forEach(subscription => {
if (subscription instanceof Subscription) {
subscription.unsubscribe();
}
});
}
removePhoto() {
if (typeof document != 'undefined') {
(<HTMLInputElement>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'
});
}));
}
}
} }

26
src/app/pages/customization/customization.component.html
View File

@ -44,7 +44,7 @@
<div class="customizationMenuItems uk-margin-small"> <div class="customizationMenuItems uk-margin-small">
<div class="uk-grid"> <div class="uk-grid">
<div class="uk-width-2-3@m uk-width-1-1@s"> <div class="uk-width-2-3@m uk-width-1-1@s">
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold"> Quick look <div class="uk-margin-top uk-margin-small-bottom uk-h4"> Quick look
<!--<span class="uk-icon uk-link " (click)="resetBackgrounds()"> <!--<span class="uk-icon uk-link " (click)="resetBackgrounds()">
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
data-svg="refresh"><path fill="none" stroke="#000" stroke-width="1.1" data-svg="refresh"><path fill="none" stroke="#000" stroke-width="1.1"
@ -54,6 +54,7 @@
</div> </div>
<quick-look-backgrounds [darkBackgroundColor]="draftCustomizationOptions.backgrounds.dark.color " <quick-look-backgrounds [darkBackgroundColor]="draftCustomizationOptions.backgrounds.dark.color "
[lightBackgroundColor]="draftCustomizationOptions.backgrounds.light.color " [lightBackgroundColor]="draftCustomizationOptions.backgrounds.light.color "
[formBackgroundColor]="draftCustomizationOptions.backgrounds.form.color"
[primaryColor]="draftCustomizationOptions.identity.mainColor" [primaryColor]="draftCustomizationOptions.identity.mainColor"
[secondaryColor]="draftCustomizationOptions.identity.secondaryColor" [secondaryColor]="draftCustomizationOptions.identity.secondaryColor"
[buttonsOnDark]="draftCustomizationOptions.buttons.darkBackground" [buttonsOnDark]="draftCustomizationOptions.buttons.darkBackground"
@ -63,7 +64,7 @@
</div> </div>
<div class="uk-width-1-3@m uk-width-1-1@s"> <div class="uk-width-1-3@m uk-width-1-1@s">
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold" >Backgrounds & Buttons <div class="uk-margin-top uk-margin-small-bottom uk-text-bold uk-h4" >Backgrounds & Buttons
<a *ngIf="(hasChanges(publishedCustomizationOptions.backgrounds, draftCustomizationOptions.backgrounds) <a *ngIf="(hasChanges(publishedCustomizationOptions.backgrounds, draftCustomizationOptions.backgrounds)
|| hasChanges(publishedCustomizationOptions.buttons, draftCustomizationOptions.buttons) ) || hasChanges(publishedCustomizationOptions.buttons, draftCustomizationOptions.buttons) )
&& draftCustomizationOptions.backgroundsAndButtonsIsCustom" && draftCustomizationOptions.backgroundsAndButtonsIsCustom"
@ -91,21 +92,24 @@
</div> </div>
<div *ngIf="draftCustomizationOptions.backgroundsAndButtonsIsCustom" class=" uk-margin-large-top"> <div *ngIf="draftCustomizationOptions.backgroundsAndButtonsIsCustom" class=" uk-margin-large-top">
<div class="uk-margin-small-bottom uk-text-uppercase">Background Colors</div> <div class="uk-margin-medium-bottom uk-text-uppercase uk-h5">Backgrounds</div>
<div class="uk-margin-small-bottom uk-text-bold">Colors</div>
<background label="Dark" [background]="draftCustomizationOptions.backgrounds.dark" <background label="Dark" [background]="draftCustomizationOptions.backgrounds.dark"
[light]="false"></background> [light]="false"></background>
<background label="Light" [background]="draftCustomizationOptions.backgrounds.light" <background label="Light" [background]="draftCustomizationOptions.backgrounds.light"
[light]="true"></background> [light]="true"></background>
<background label="Form" [background]="draftCustomizationOptions.backgrounds.form" <background label="Form" [background]="draftCustomizationOptions.backgrounds.form"
[light]="true" [upload]="properties.environment == 'development'" [light]="true"
[oldBackground]="publishedCustomizationOptions.backgrounds.form" [communityId]="communityId"></background> [oldBackground]="publishedCustomizationOptions.backgrounds.form" [communityId]="communityId"></background>
<div class="uk-margin-medium-top uk-margin-small-bottom uk-text-bold">Form Background image</div>
<div class="uk-margin-large-top uk-text-uppercase">Buttons </div> <background-upload label="Form" [background]="draftCustomizationOptions.backgrounds.form"
<ul class="uk-tab" uk-switcher> [oldBackground]="publishedCustomizationOptions.backgrounds.form" [communityId]="communityId"></background-upload>
<div class="uk-margin-xlarge-top uk-text-uppercase uk-h5">Buttons </div>
<ul class="uk-tab uk-margin-medium-top" uk-switcher>
<li><a href="#">On dark background</a></li> <li><a href="#">On dark background</a></li>
<li><a href="#">On light background</a></li> <li><a href="#">On light background</a></li>
</ul> </ul>
<ul class="uk-switcher uk-margin"> <ul class="uk-switcher uk-margin-medium-top uk-margin">
<li> <li>
<customize-buttons <customize-buttons
[buttons]="draftCustomizationOptions.buttons.darkBackground" [light]="true" [buttons]="draftCustomizationOptions.buttons.darkBackground" [light]="true"
@ -131,7 +135,7 @@
<div class="uk-grid"> <div class="uk-grid">
<div class="uk-width-2-3@m uk-width-1-1@s"> <div class="uk-width-2-3@m uk-width-1-1@s">
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold">Quick look <div class="uk-margin-top uk-margin-small-bottom uk-h4">Quick look
</div> </div>
<div style="border-radius: 6px;" class="uk-alert uk-padding-small"> <div style="border-radius: 6px;" class="uk-alert uk-padding-small">
<quick-look [primaryColor]="draftCustomizationOptions.identity.mainColor" <quick-look [primaryColor]="draftCustomizationOptions.identity.mainColor"
@ -140,7 +144,7 @@
</div> </div>
<div class="uk-width-1-3@m uk-width-1-1@s"> <div class="uk-width-1-3@m uk-width-1-1@s">
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold" > Identity <div class="uk-margin-top uk-margin-small-bottom uk-text-bold uk-h4" > Identity
<a *ngIf="hasChanges(publishedCustomizationOptions.identity, draftCustomizationOptions.identity) && <a *ngIf="hasChanges(publishedCustomizationOptions.identity, draftCustomizationOptions.identity) &&
draftCustomizationOptions.identityIsCustom" class="uk-margin-small-left" draftCustomizationOptions.identityIsCustom" class="uk-margin-small-left"
uk-tooltip="title:<div class='uk-padding-small uk-width-large'>Reset to previously saved options</div>" uk-tooltip="title:<div class='uk-padding-small uk-width-large'>Reset to previously saved options</div>"
@ -165,7 +169,7 @@
</div> </div>
</div> </div>
<div *ngIf="draftCustomizationOptions.identityIsCustom" class=" uk-margin-large-top"> <div *ngIf="draftCustomizationOptions.identityIsCustom" class=" uk-margin-large-top">
<div class=" uk-margin-small-bottom uk-text-uppercase uk-margin-small-left">Colors</div> <div class=" uk-margin-medium-bottom uk-text-uppercase uk-h5">Colors</div>
<color [color]="draftCustomizationOptions.identity.mainColor" [light]="false" (colorChange)= <color [color]="draftCustomizationOptions.identity.mainColor" [light]="false" (colorChange)=
" draftCustomizationOptions.identity.mainColor= $event; updateBackgroundsAndButtonsBasedOnIdentity()" " draftCustomizationOptions.identity.mainColor= $event; updateBackgroundsAndButtonsBasedOnIdentity()"
label="Primary"></color> label="Primary"></color>

6
src/app/pages/customization/customization.component.ts
View File

@ -141,11 +141,9 @@ export class CustomizationComponent implements OnInit {
} }
} }
private deleteDraftImages( ) { private deleteDraftImages( ) {
console.log("delete drafr images")
if( this.draftCustomizationOptions.backgrounds.form.imageFile && this.draftCustomizationOptions.backgrounds.form.imageFile !=this.publishedCustomizationOptions.backgrounds.form.imageFile){ if( this.draftCustomizationOptions.backgrounds.form.imageFile && this.draftCustomizationOptions.backgrounds.form.imageFile !=this.publishedCustomizationOptions.backgrounds.form.imageFile){
this.subscriptions.push(this.utilsService.deletePhoto(this.properties.utilsService + '/delete/stakeholder/' + this.draftCustomizationOptions.backgrounds.form.imageFile).subscribe( this.subscriptions.push(this.utilsService.deletePhoto(this.properties.utilsService + '/delete/stakeholder/' + this.draftCustomizationOptions.backgrounds.form.imageFile).subscribe(
re => { re => {
console.log("delete!!!!!!!!")
this.cleanUp() this.cleanUp()
} }
)); ));
@ -173,6 +171,7 @@ export class CustomizationComponent implements OnInit {
} }
resetLayout() { resetLayout() {
this.deleteDraftImages();
this.initializeCustomizationOptions(JSON.stringify(this.publishedCustomizationOptions) != this.previewCustomization); this.initializeCustomizationOptions(JSON.stringify(this.publishedCustomizationOptions) != this.previewCustomization);
} }
resetBackgroundsTo(backgrounds) { resetBackgroundsTo(backgrounds) {
@ -222,9 +221,6 @@ export class CustomizationComponent implements OnInit {
return this.sanitizer.bypassSecurityTrustResourceUrl(this.getCommunityUrlNewLayout(layout)); return this.sanitizer.bypassSecurityTrustResourceUrl(this.getCommunityUrlNewLayout(layout));
} }
getCommunityUrl() { getCommunityUrl() {
/* if(this.properties.environment == "development") {
return 'http://spitoo.di.uoa.gr:4200';
}*/
return 'https://'+ (this.properties.environment == 'production'?'':'beta.')+this.communityId+'.openaire.eu'; return 'https://'+ (this.properties.environment == 'production'?'':'beta.')+this.communityId+'.openaire.eu';
} }

7
src/app/pages/customization/customization.module.ts
View File

@ -25,14 +25,15 @@ import {IconsService} from '../../openaireLibrary/utils/icons/icons.service';
import {refresh, reset} from '../../openaireLibrary/utils/icons/icons'; import {refresh, reset} from '../../openaireLibrary/utils/icons/icons';
import {BackgroundComponent} from './background.component'; import {BackgroundComponent} from './background.component';
import {InputModule} from '../../openaireLibrary/sharedComponents/input/input.module'; import {InputModule} from '../../openaireLibrary/sharedComponents/input/input.module';
import {BackgroundUploadComponent} from "./background-upload.component";
@NgModule({ @NgModule({
imports: [ imports: [
CustomizationRoutingModule, CommonModule, FormsModule, RouterModule, ColorPickerModule, AlertModalModule, PageContentModule, MatFormFieldModule, MatSelectModule, MatSlideToggleModule, IconsModule, InputModule CustomizationRoutingModule, CommonModule, FormsModule, RouterModule, ColorPickerModule, AlertModalModule, PageContentModule, MatFormFieldModule, MatSelectModule, MatSlideToggleModule, IconsModule, InputModule
], ],
declarations: [ declarations: [
CustomizationComponent, FontSizeComponent, ColorComponent, BorderComponent, QuickLookComponent, QuickLookBackgroundsComponent, QuickLookButtonsComponent, CustomizeButtonsComponent, BackgroundComponent CustomizationComponent, FontSizeComponent, ColorComponent, BorderComponent, QuickLookComponent, QuickLookBackgroundsComponent, QuickLookButtonsComponent, CustomizeButtonsComponent, BackgroundComponent, BackgroundUploadComponent
], ],
providers: [ providers: [
LayoutService LayoutService
], ],

26
src/app/pages/customization/quickLook-backgrounds.component.ts
View File

@ -6,6 +6,17 @@ import {ButtonsCustomization} from '../../openaireLibrary/connect/community/Cust
@Component({ @Component({
selector: 'quick-look-backgrounds', selector: 'quick-look-backgrounds',
template: ` template: `
<!-- <div class="uk-margin-top uk-margin-small-bottom uk-text-bold uk-text-large">Search background</div>
<div class="uk-padding-small uk-text-center searchForm uk-height-medium uk-flex uk-flex-center uk-flex-middle" >
<div>
<h1 >Heading</h1>
<input placeholder="Search for...">
<quick-look-buttons
[buttons]="buttonsOnLight"
></quick-look-buttons>
</div>
</div>-->
<div class="uk-margin-top uk-margin-small-bottom uk-text-bold uk-text-large">Dark background</div> <div class="uk-margin-top uk-margin-small-bottom uk-text-bold uk-text-large">Dark background</div>
<div class="uk-padding-small uk-text-center darkBackground uk-height-medium uk-light uk-flex uk-flex-center uk-flex-middle" > <div class="uk-padding-small uk-text-center darkBackground uk-height-medium uk-light uk-flex uk-flex-center uk-flex-middle" >
@ -40,7 +51,15 @@ import {ButtonsCustomization} from '../../openaireLibrary/connect/community/Cust
} }
.lightBackground{ .lightBackground{
background-color: var(--background-low-color); 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() secondaryColor;
@Input() darkBackgroundColor; @Input() darkBackgroundColor;
@Input() lightBackgroundColor; @Input() lightBackgroundColor;
@Input() formBackgroundColor;
@Input() buttonsOnDark:ButtonsCustomization; @Input() buttonsOnDark:ButtonsCustomization;
@Input() buttonsOnLight:ButtonsCustomization; @Input() buttonsOnLight:ButtonsCustomization;
constructor( private sanitizer: DomSanitizer) { constructor( private sanitizer: DomSanitizer) {
@ -57,7 +77,9 @@ export class QuickLookBackgroundsComponent {
@HostBinding("attr.style") @HostBinding("attr.style")
public get valueAsStyle(): any { public get valueAsStyle(): any {
let search = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 532"><defs><style>.cls-1{isolation:isolate;}.cls-2{fill:{{color}};mix-blend-mode:multiply;}</style></defs><title>Asset 3</title><g class="cls-1"><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-2" d="M0,431s362,109,841,62,632,68,1159-9V0H0Z"/><path class="cls-2" d="M0,514s1401,71,2000-69V0H0Z"/></g></g></g></svg>`;
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}; 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}');`);
} }
} }

65
src/app/pages/manage-communities/manage-communities.component.ts
View File

@ -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 {Session, User} from '../../openaireLibrary/login/utils/helper.class';
import {EnvProperties} from '../../openaireLibrary/utils/properties/env-properties'; import {EnvProperties} from '../../openaireLibrary/utils/properties/env-properties';
import {ActivatedRoute} from '@angular/router'; import {ActivatedRoute} from '@angular/router';
@ -8,6 +8,10 @@ import {UserManagementService} from '../../openaireLibrary/services/user-managem
import {Title} from '@angular/platform-browser'; import {Title} from '@angular/platform-browser';
import {properties} from "../../../environments/environment"; import {properties} from "../../../environments/environment";
import {Subscription} from "rxjs"; 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'; type Tab = 'all' | 'communities' | 'ris';
@ -23,7 +27,15 @@ type Tab = 'all' | 'communities' | 'ris';
<li [class.uk-active]="tab === 'ris'"><a routerLink="./" fragment="ris"><span class="title">Research Initiatives</span></a> <li [class.uk-active]="tab === 'ris'"><a routerLink="./" fragment="ris"><span class="title">Research Initiatives</span></a>
</li> </li>
</ul> </ul>
</div> <div *ngIf="properties.environment == 'development'" class="uk-width-1-1 uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-grid" uk-grid>
<div #searchInputComponent search-input [control]="filterForm.controls.keyword" [showSearch]="false"
placeholder="Search"
[selected]="communitySearchUtils.keyword" (closeEmitter)="onSearchClose()" (resetEmitter)="resetInput()"
[bordered]="true" colorClass="uk-text-secondary"
class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1">
</div>
</div>
</div>
<div inner> <div inner>
<div *ngIf="loading" class="uk-margin-medium-top uk-padding-large"> <div *ngIf="loading" class="uk-margin-medium-top uk-padding-large">
<loading></loading> <loading></loading>
@ -33,7 +45,7 @@ type Tab = 'all' | 'communities' | 'ris';
<h6 class="uk-text-bold">Research Communities</h6> <h6 class="uk-text-bold">Research Communities</h6>
<div class="uk-grid uk-child-width-1-4@xl uk-child-width-1-3@l uk-child-width-1-2@m uk-grid-match" uk-grid <div class="uk-grid uk-child-width-1-4@xl uk-child-width-1-3@l uk-child-width-1-2@m uk-grid-match" uk-grid
uk-height-match="target: .name;"> uk-height-match="target: .name;">
<ng-template ngFor [ngForOf]="communities" let-community let-i="index"> <ng-template ngFor [ngForOf]="filteredCommunities" let-community let-i="index">
<ng-container *ngTemplateOutlet="communityBox; context: {community:community}"></ng-container> <ng-container *ngTemplateOutlet="communityBox; context: {community:community}"></ng-container>
</ng-template> </ng-template>
</div> </div>
@ -47,7 +59,7 @@ type Tab = 'all' | 'communities' | 'ris';
<h6 class="uk-text-bold">Research Initiatives</h6> <h6 class="uk-text-bold">Research Initiatives</h6>
<div class="uk-grid uk-grid-match uk-child-width-1-4@xl uk-child-width-1-3@l uk-child-width-1-2@m" uk-grid <div class="uk-grid uk-grid-match uk-child-width-1-4@xl uk-child-width-1-3@l uk-child-width-1-2@m" uk-grid
uk-height-match="target: .name;"> uk-height-match="target: .name;">
<ng-template ngFor [ngForOf]="ris" let-community let-i="index"> <ng-template ngFor [ngForOf]="filteredRis" let-community let-i="index">
<ng-container *ngTemplateOutlet="communityBox; context: {community:community}"></ng-container> <ng-container *ngTemplateOutlet="communityBox; context: {community:community}"></ng-container>
</ng-template> </ng-template>
</div> </div>
@ -81,19 +93,44 @@ type Tab = 'all' | 'communities' | 'ris';
export class ManageCommunitiesComponent implements OnInit, OnDestroy { export class ManageCommunitiesComponent implements OnInit, OnDestroy {
public properties: EnvProperties = properties; public properties: EnvProperties = properties;
public communities: CommunityInfo[] = []; public communities: CommunityInfo[] = [];
public filteredCommunities: CommunityInfo[] = [];
public ris: CommunityInfo[] = []; public ris: CommunityInfo[] = [];
public filteredRis: CommunityInfo[] = [];
public loading: boolean; public loading: boolean;
public user: User; public user: User;
public tab: Tab = "all"; public tab: Tab = "all";
private subscriptions: any[] = []; 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, constructor(private route: ActivatedRoute,
private _fb: FormBuilder,
private communitiesService: CommunitiesService, private communitiesService: CommunitiesService,
private title: Title, private title: Title,
private userManagementService: UserManagementService) { private userManagementService: UserManagementService) {
this.errorCodes = new ErrorCodes();
this.communitySearchUtils.status = this.errorCodes.LOADING;
} }
ngOnInit() { 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.loading = true;
this.title.setTitle('Administrator Dashboard | Manage Communities'); this.title.setTitle('Administrator Dashboard | Manage Communities');
this.subscriptions.push(this.route.fragment.subscribe((fragment: Tab) => { 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( this.subscriptions.push(this.communitiesService.getCommunities(this.properties, this.properties.communityAPI + 'communities').subscribe(
communities => { communities => {
this.communities = []; this.communities = [];
this.filteredCommunities = [];
this.ris = []; this.ris = [];
console.log(communities); this.filteredRis = [];
communities.forEach(community => { communities.forEach(community => {
if (Session.isPortalAdministrator(this.user) || Session.isCommunityCurator(this.user) || Session.isManager('community', community.communityId, this.user)) { if (Session.isPortalAdministrator(this.user) || Session.isCommunityCurator(this.user) || Session.isManager('community', community.communityId, this.user)) {
if (community.type === 'community') { if (community.type === 'community') {
this.communities.push(community); this.communities.push(community);
this.filteredCommunities.push(community);
} else { } else {
this.ris.push(community); this.ris.push(community);
this.filteredRis.push(community);
} }
} }
}) })
this.loading = false; this.loading = false;
this.keyword = '';
})); }));
} }
})); }));
@ -151,5 +192,19 @@ export class ManageCommunitiesComponent implements OnInit, OnDestroy {
default: default:
return false; 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()
} }
} }

3
src/app/pages/manage-communities/manage-communities.module.ts
View File

@ -12,10 +12,11 @@ import {IconsModule} from '../../openaireLibrary/utils/icons/icons.module';
import {IconsService} from '../../openaireLibrary/utils/icons/icons.service'; import {IconsService} from '../../openaireLibrary/utils/icons/icons.service';
import {earth, group, lock} from '../../openaireLibrary/utils/icons/icons'; import {earth, group, lock} from '../../openaireLibrary/utils/icons/icons';
import {LogoUrlPipeModule} from "../../openaireLibrary/utils/pipes/logoUrlPipe.module"; import {LogoUrlPipeModule} from "../../openaireLibrary/utils/pipes/logoUrlPipe.module";
import {SearchInputModule} from '../../openaireLibrary/sharedComponents/search-input/search-input.module';
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, ManageCommunitiesRoutingModule, RouterModule, PageContentModule, LoadingModule, UrlPrefixModule, IconsModule, LogoUrlPipeModule CommonModule, ManageCommunitiesRoutingModule, RouterModule, PageContentModule, LoadingModule, UrlPrefixModule, IconsModule, LogoUrlPipeModule, SearchInputModule
], ],
declarations: [ManageCommunitiesComponent], declarations: [ManageCommunitiesComponent],
providers: [LoginGuard, CommunitiesService], providers: [LoginGuard, CommunitiesService],