[plugins-functionality | DONE | ADDED ] add generic plugin card info, add search bar plugin, remove separate learn and connect

This commit is contained in:
argirok 2024-04-25 15:26:36 +03:00
parent 678908df5f
commit 005f636446
21 changed files with 303 additions and 272 deletions

View File

@ -1,15 +1,17 @@
import {Component, Input, SimpleChanges} from '@angular/core'; import {Component, Input, SimpleChanges} from '@angular/core';
import {PluginHowToUse} from "./plugin-how-to-use.component";
import {PluginBaseFormComponent, PluginEditEvent} from "../../utils/base-plugin.form.component"; import {PluginBaseFormComponent, PluginEditEvent} from "../../utils/base-plugin.form.component";
import {PluginCardInfo} from "./plugin-card-info.component";
@Component({ @Component({
selector: 'plugin-how-to-use-form', selector: 'plugin-card-info-form',
template: ` template: `
<div *ngIf="pluginObject" class="uk-padding-xsmall"> <div *ngIf="pluginObject" class="uk-padding-xsmall">
<ng-container *ngIf="selectedIndex == -1"> <ng-container *ngIf="selectedIndex == -1">
<plugin-field-edit [value]=" pluginObject.title" <plugin-field-edit [value]=" pluginObject.title"
type="text" field="title" (changed)="valueChanged($event)"></plugin-field-edit> type="text" field="title" (changed)="valueChanged($event)"></plugin-field-edit>
<plugin-field-edit [value]=" pluginObject.description"
type="textarea" field="description" (changed)="valueChanged($event)"></plugin-field-edit>
<hr class="uk-margin-left">
<div class="uk-margin-top uk-text-muted"> <div class="uk-margin-top uk-text-muted">
Cards: Cards:
</div> </div>
@ -59,7 +61,14 @@ import {PluginBaseFormComponent, PluginEditEvent} from "../../utils/base-plugin.
</div> </div>
<div class="uk-margin-top"> <div class="uk-margin-top">
<plugin-field-edit [value]=" pluginObject.cardInfoArray[selectedIndex].description" <plugin-field-edit [value]=" pluginObject.cardInfoArray[selectedIndex].description"
type="text" field="description" type="textarea" field="description"
(changed)="cardValueChanged(selectedIndex, $event)"></plugin-field-edit>
</div>
<hr class="uk-margin-left">
<div class="uk-margin-top">
<a href="https://fonts.google.com/icons" target="_blank" class="uk-text-xsmall uk-float-right">Check icons</a>
<plugin-field-edit [value]=" pluginObject.cardInfoArray[selectedIndex].icon"
type="text" field="icon" placeholder="Material icon"
(changed)="cardValueChanged(selectedIndex, $event)"></plugin-field-edit> (changed)="cardValueChanged(selectedIndex, $event)"></plugin-field-edit>
</div> </div>
<ng-container *ngFor="let cardUrl of pluginObject.cardInfoArray[selectedIndex].urlsArray; let j = index "> <ng-container *ngFor="let cardUrl of pluginObject.cardInfoArray[selectedIndex].urlsArray; let j = index ">
@ -82,7 +91,7 @@ import {PluginBaseFormComponent, PluginEditEvent} from "../../utils/base-plugin.
}) })
export class PluginHowToUseFormComponent extends PluginBaseFormComponent<PluginHowToUse> { export class PluginCardInfoFormComponent extends PluginBaseFormComponent<PluginCardInfo> {
selectedIndex = -1; selectedIndex = -1;
@Input() editSubmenuOpen; @Input() editSubmenuOpen;

View File

@ -1,15 +1,16 @@
<div class="plugin-how-to-use uk-container uk-container-large uk-section"> <div *ngIf="pluginObject" class="plugin-how-to-use uk-container uk-container-large uk-section">
<h3 class="uk-h2 uk-margin-large-bottom"> <h3 class="uk-h2 uk-margin-large-bottom">
{{pluginObject.title}} {{pluginObject.title}}
</h3> </h3>
<p *ngIf="pluginObject.description && pluginObject.description.length > 0"> {{pluginObject.description}}</p>
<div class="uk-padding" uk-height-match=".title"> <div class="uk-padding" uk-height-match=".title">
<div class="uk-padding uk-grid uk-child-width-1-3@m uk-child-width-1-1 uk-grid-large" uk-grid <div class="uk-padding uk-grid uk-child-width-1-3@m uk-child-width-1-1 uk-grid-large" uk-grid
uk-height-match=".description"> uk-height-match=".description">
<ng-container *ngFor="let card of pluginObject.cardInfoArray"> <ng-container *ngFor="let card of pluginObject.cardInfoArray">
<ng-container *ngIf="card.show"> <ng-container *ngIf="card.show">
<div class="uk-flex uk-flex-column uk-flex-middle"> <div class="uk-flex uk-flex-column uk-flex-middle">
<div class="uk-card uk-card-default uk-card-body"> <div *ngIf="card.icon" class="uk-card uk-card-default uk-card-body">
<icon [name]="'description'" [type]="'outlined'" [ratio]="3" [flex]="true"></icon> <icon [name]="card.icon" [type]="'outlined'" [ratio]="3" [flex]="true"></icon>
</div> </div>
<h5 class="title"> <h5 class="title">
{{card.title}} {{card.title}}

View File

@ -0,0 +1,24 @@
import {Component} from '@angular/core';
import {PluginBaseComponent, PluginBaseInfo, PluginInfoCards, PluginURL} from "../../utils/base-plugin.component";
export class PluginCardInfo extends PluginBaseInfo{
title:string ="Lorem ipsum";
description:string = "Lorem ipsum";
cardInfoArray: PluginInfoCards[] = [
{title: "Card 1", description: "Lorem ipsum", icon:"description", urlsArray:[ new PluginURL("https://exapmle.com","View all")], show:true},
{title: "Card 2", description: "Lorem ipsum", icon:"description", urlsArray:[ new PluginURL("https://exapmle.com","")/*, new PluginURL("","Guide for the managers")*/], show:true},
{title: "Card 3", description: "Lorem ipsum", icon:"description", urlsArray:[ new PluginURL("https://exapmle.com","View all")], show:true}
];
compare(oldObject){
oldObject = super.compare(oldObject)
return oldObject;
}
}
@Component({
selector: 'plugin-card-info',
templateUrl: 'plugin-card-info.component.html'
})
export class PluginCardInfoComponent extends PluginBaseComponent<PluginCardInfo>{
constructor() {
super()
}
}

View File

@ -8,17 +8,17 @@ import {NumberRoundModule} from "../../../../utils/pipes/number-round.module";
import {IconsService} from "../../../../utils/icons/icons.service"; import {IconsService} from "../../../../utils/icons/icons.service";
import {SearchResearchResultsServiceModule} from "../../../../services/searchResearchResultsService.module"; import {SearchResearchResultsServiceModule} from "../../../../services/searchResearchResultsService.module";
import {PluginFieldEditModule} from "../../utils/plugin-field-edit.module"; import {PluginFieldEditModule} from "../../utils/plugin-field-edit.module";
import {PluginHowToUseComponent} from './plugin-how-to-use.component'; import {PluginCardInfoComponent} from "./plugin-card-info.component";
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, RouterModule, FormsModule, IconsModule, NumberRoundModule, SearchResearchResultsServiceModule, PluginFieldEditModule CommonModule, RouterModule, FormsModule, IconsModule, NumberRoundModule, SearchResearchResultsServiceModule, PluginFieldEditModule
], ],
providers:[PluginsService], providers:[PluginsService],
declarations: [PluginHowToUseComponent], declarations: [PluginCardInfoComponent],
exports: [PluginHowToUseComponent] exports: [PluginCardInfoComponent]
}) })
export class PluginHowToUseModule { export class PluginCardInfoModule {
constructor(private iconsService: IconsService) { constructor(private iconsService: IconsService) {
this.iconsService.registerIcons([]) this.iconsService.registerIcons([])
} }

View File

@ -1,27 +0,0 @@
import {Component} from '@angular/core';
import {PluginBaseComponent, PluginBaseInfo, PluginInfoCards, PluginURL} from "../../utils/base-plugin.component";
export class PluginHowToUse extends PluginBaseInfo{
title:string ="How to use the gateway?";
cardInfoArray: PluginInfoCards[] = [
{title: "Tutorials", description: "Mini-video tutorials for gateway managers", urlsArray:[ new PluginURL("https://www.youtube.com/playlist?list=PL0c4IRNUxuKcyRUQ_J9BH_EE1amXU6kgp","View all")], show:true},
{title: "Guides", description: "Textual guides on gateway functionalities.", urlsArray:[ new PluginURL("https://www.openaire.eu/research-community-gateway-guide","Guide for the users")/*, new PluginURL("","Guide for the managers")*/], show:true},
{title: "Webinars", description: "Recordings and slides of webinars on different aspects of Open Science.", urlsArray:[ new PluginURL("","View all")], show:true}
];
compare(oldObject){
oldObject = super.compare(oldObject)
for(let card of this.cardInfoArray){
}
return oldObject;
}
}
@Component({
selector: 'plugin-how-to-use',
templateUrl: 'plugin-how-to-use.component.html'
})
export class PluginHowToUseComponent extends PluginBaseComponent<PluginHowToUse>{
constructor() {
super()
}
}

View File

@ -1,33 +0,0 @@
<div class="plugin-learn-and-connect uk-container uk-container-large uk-section">
<h3 class="uk-h2 uk-margin-large-bottom">
{{pluginObject.title}}
</h3>
<div class="uk-padding" uk-height-match=".title">
<div
class="uk-padding uk-grid uk-child-width-1-3@m uk-child-width-1-1 uk-grid-large" uk-grid uk-height-match=".description">
<ng-container *ngFor="let card of pluginObject.cardInfoArray">
<ng-container *ngIf="card.show">
<div
class="uk-flex uk-flex-column uk-flex-middle">
<div class="uk-card uk-card-default uk-card-body">
<icon [name]="'description'" [type]="'outlined'" [ratio]="3" [flex]="true"></icon>
</div>
<h5 class="title">
{{card.title}}
</h5>
<div class="uk-text-center uk-margin-bottom description">
{{card.description}}
</div>
<a *ngFor="let url of card.urlsArray" [href]="url.url" class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text uk-text-default" [target]="url.target"
[class.uk-hidden]="!(url.url && url.url.length > 0)">
{{url.linkText}}
</a>
</div>
</ng-container>
</ng-container>
</div>
<!-- icon1, title1, description1, link1 -->
</div>
</div>

View File

@ -1,20 +0,0 @@
import {Component} from '@angular/core';
import {PluginBaseComponent, PluginBaseInfo, PluginInfoCards, PluginURL} from "../../utils/base-plugin.component";
export class PluginLearnAndConnect extends PluginBaseInfo{
title:string ="Learn & Connect with Open Science";
cardInfoArray:PluginInfoCards[] = [
{title: "OS Practices", description: "Open Science best practices for your community, policies and mandates.",
urlsArray:[ new PluginURL("","")], show:true},
{title: "OS Guides for beginners", description: "New to Open Science? Learn the basics!",urlsArray:[ new PluginURL("https://www.openaire.eu/guides","Learn more")], show:true},
{title: "Webinars", description: "Recordings and slides of webinars on different aspects of Open Science.",urlsArray:[ new PluginURL("https://www.openaire.eu/support/webinars","Learn more")], show:true}
];
}
@Component({
selector: 'plugin-learn-and-connect',
templateUrl: 'plugin-learn-and-connect.component.html'
})
export class PluginLearnAndConnectComponent extends PluginBaseComponent<PluginLearnAndConnect>{
constructor() {
super()
}
}

View File

@ -1,124 +0,0 @@
import {Component, Input, SimpleChanges} from '@angular/core';
import {PluginLearnAndConnect} from "./plugin-learn-and-connect.component";
import {PluginBaseFormComponent, PluginEditEvent} from "../../utils/base-plugin.form.component";
@Component({
selector: 'plugin-learn-and-connect-form',
template: `
<div *ngIf="pluginObject" class="uk-padding-xsmall">
<ng-container *ngIf="selectedIndex == -1">
<plugin-field-edit [value]=" pluginObject.title"
type="text" field="title" (changed)="valueChanged($event)"></plugin-field-edit>
<div class="uk-margin-top uk-text-muted">
Cards:
</div>
<ng-container *ngFor="let card of pluginObject.cardInfoArray; let i = index">
<div class="uk-grid uk-grid-small uk-margin-xsmall-top">
<div *ngIf="selectedIndex != i" class="uk-text-small uk-width-expand">
<plugin-field-edit [value]=" pluginObject.cardInfoArray[i].show" type="checkbox" field="cardInfoArray"
(editClicked)="pluginEditEvent = $event"
(changed)="cardShowChanged(i,$event)"></plugin-field-edit>
{{card.title}}
</div>
<div class="uk-padding-remove-left uk-margin-medium-right">
<button
class="uk-button uk-button-link uk-flex uk-flex-middle" (click)="edit(i)">
<icon name="edit" [flex]="true"></icon>
</button>
</div>
</div>
</ng-container>
</ng-container>
<ng-container *ngIf="selectedIndex > -1">
<div *ngIf="editTemplate" class="back uk-margin-bottom">
<a (click)="close()" class="uk-flex uk-flex-middle uk-flex-center">
<div class="uk-width-auto">
<icon name="west" ratio="1.3"
[flex]="true"></icon>
</div>
<span class="uk-text-small">Plugin Options</span>
</a>
</div>
<div class="uk-margin-top">
<plugin-field-edit [value]="pluginObject.cardInfoArray[selectedIndex].title"
type="text" field="title"
(changed)="cardValueChanged(selectedIndex, $event)"></plugin-field-edit>
</div>
<div class="uk-margin-top">
<plugin-field-edit [value]=" pluginObject.cardInfoArray[selectedIndex].description"
type="text" field="description"
(changed)="cardValueChanged(selectedIndex, $event)"></plugin-field-edit>
</div>
<ng-container *ngFor="let cardUrl of pluginObject.cardInfoArray[selectedIndex].urlsArray; let j = index ">
<div class=" uk-margin-top uk-text-meta uk-text-xsmall"> Link #{{j + 1}}</div>
<div class="uk-margin-small-top">
<plugin-field-edit [value]=" cardUrl.url"
type="text" field="url"
(changed)="cardUrlValueChanged(selectedIndex, j, $event)"></plugin-field-edit>
</div>
<div class="uk-margin-top">
<plugin-field-edit [value]=" cardUrl.linkText"
type="text" field="linkText" placeholder="Link text"
(changed)="cardUrlValueChanged(selectedIndex, j, $event)"></plugin-field-edit>
</div>
</ng-container>
</ng-container>
</div>
`,
})
export class PluginLearnAndConnectFormComponent extends PluginBaseFormComponent<PluginLearnAndConnect> {
selectedIndex = -1;
@Input() editSubmenuOpen;
constructor() {
super()
}
ngOnChanges(changes: SimpleChanges) {
if (this.editSubmenuOpen == false && this.selectedIndex > -1) {
this.close();
}
}
cardShowChanged(i, $event: PluginEditEvent) {
this.pluginObject.cardInfoArray[i].show = $event.value;
$event.value = this.pluginObject.cardInfoArray;
this.valuesChanged.emit({field: $event.field, value: $event.value, type: 'parent'})
}
cardValueChanged(i, $event: PluginEditEvent) {
this.pluginObject.cardInfoArray[i][$event.field] = $event.value;
$event.value = this.pluginObject.cardInfoArray;
this.valuesChanged.emit({field: "cardInfoArray", value: $event.value, type: 'parent'})
}
cardUrlValueChanged(i, j, $event: PluginEditEvent) {
if (this.editTemplate) {
this.pluginObject.cardInfoArray[i].urlsArray[j][$event.field] = $event.value;
$event.value = this.pluginObject.cardInfoArray;
} else {
this.pluginObject.cardInfoArray[i].urlsArray[j][$event.field] = $event.value;
$event.value = this.pluginObject.cardInfoArray;
}
this.valuesChanged.emit({field: "cardInfoArray", value: $event.value, type: 'parent'})
}
edit(i) {
this.selectedIndex = i;
this.toggleSubMenu(true);
}
close() {
this.selectedIndex = -1;
this.toggleSubMenu(false);
}
}

View File

@ -1,25 +0,0 @@
import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';
import {CommonModule} from '@angular/common';
import {FormsModule} from '@angular/forms';
import {PluginsService} from "../../../../services/plugins.service";
import {IconsModule} from "../../../../utils/icons/icons.module";
import {NumberRoundModule} from "../../../../utils/pipes/number-round.module";
import {IconsService} from "../../../../utils/icons/icons.service";
import {SearchResearchResultsServiceModule} from "../../../../services/searchResearchResultsService.module";
import {PluginFieldEditModule} from "../../utils/plugin-field-edit.module";
import {PluginLearnAndConnectComponent} from './plugin-learn-and-connect.component';
@NgModule({
imports: [
CommonModule, RouterModule, FormsModule, IconsModule, NumberRoundModule, SearchResearchResultsServiceModule, PluginFieldEditModule
],
providers:[PluginsService],
declarations: [PluginLearnAndConnectComponent],
exports: [PluginLearnAndConnectComponent]
})
export class PluginLearnAndConnectModule {
constructor(private iconsService: IconsService) {
this.iconsService.registerIcons([])
}
}

View File

@ -0,0 +1,139 @@
import {ChangeDetectorRef, Component} from '@angular/core';
import {PluginBaseComponent, PluginBaseInfo, PluginInfoCards, PluginURL} from "../../utils/base-plugin.component";
import {OpenaireEntities} from "../../../../utils/properties/searchFields";
import {properties} from "../../../../../../environments/environment";
import {CustomizationService} from "../../../../services/customization.service";
import {CommunityService} from "../../../../connect/community/community.service";
import {Filter} from "../../../../searchPages/searchUtils/searchHelperClasses.class";
import {Router} from "@angular/router";
import {RouterHelper} from "../../../../utils/routerHelper.class";
export class PluginSearchBar extends PluginBaseInfo{
alternativeTitle:string ="";
showTitle:boolean = true;
showShortTitle:boolean = false;
compare(oldObject): any {
let newObj= super.compare(oldObject);
return newObj;
}
}
@Component({
selector: 'plugin-search-bar',
template: `
<div *ngIf="!community " class="uk-text-meta uk-text-center">
No community info available
</div>
<div *ngIf="community " class="generalSearchForm heroBackground" [class.uk-light]="!this.fontsDarkMode" [style]="style">
<div class="uk-container uk-container-large uk-flex uk-flex-center">
<div class="uk-width-2-3@m uk-width-1-2@l uk-margin-large-top uk-margin-large-bottom">
<h1 *ngIf="pluginObject.showShortTitle" class="uk-text-center uk-h2 uk-margin-remove">
{{community.shortTitle}}
</h1>
<h1 *ngIf="pluginObject.alternativeTitle.length > 0"
class="uk-text-center uk-h2 uk-margin-remove">
{{pluginObject.alternativeTitle}}
</h1>
<div *ngIf="pluginObject.showTitle"
class="uk-text-center uk-margin-top">
{{community.title}}
</div>
<div [class.uk-invisible]="disableSelect" class="uk-margin-medium-top">
<advanced-search-input #advanced (searchEmitter)="goTo(true)">
<entities-selection class="uk-width-1-3" [simpleView]="true" currentEntity="result" [selectedEntity]="selectedEntity"
(selectionChange)="entityChanged($event);advanced.focusNext(input, $event)" (disableSelectEmitter)="disableSelectChange($event)"
[onChangeNavigate]="false"></entities-selection>
<div input #input class="uk-width-expand" placeholder="Scholary works" [searchable]="true" [hint]="'Search in OpenAIRE'" [(value)]="keyword"></div>
</advanced-search-input>
<div *ngIf="selectedEntity === 'result' && input.focused" (click)="$event.stopPropagation();advanced.focusNext(input, $event)" class="uk-dropdown uk-display-block uk-margin-small-top uk-width-auto" uk-dropdown="mode: click">
<div class="uk-padding-small">
<quick-selections [resultTypes]="resultTypes"></quick-selections>
</div>
</div>
</div>
</div>
</div>
</div>
`
})
export class PluginSearchBarComponent extends PluginBaseComponent<PluginSearchBar>{
disableSelect: boolean = true;
openaireEntities= OpenaireEntities;
selectedEntity = 'result';
selectedEntitySimpleUrl;
selectedEntityAdvancedUrl;
keyword: string = "";
// customFilter;
placeholderText = "Search by title, author, abstract, DOI, orcid... ";
resultTypes: Filter = {
values: [],
filterId: "type",
countSelectedValues: 0,
filterType: 'checkbox',
originalFilterId: "",
valueIsExact: true,
title: "Type",
filterOperator: "or"
};
community = null;
public routerHelper: RouterHelper = new RouterHelper();
constructor(private communityService: CommunityService, protected layoutService: CustomizationService, private cdr: ChangeDetectorRef, private _router: Router,) {
super()
this.subscriptions.push(this.communityService.getCommunityAsObservable().subscribe(
community => {
this.community = community;
this.subscriptions.push(this.communityService.getCommunityAsObservable().subscribe(
community => {
this.getLayout(community.communityId);
}));
}
));
}
ngOnInit() {
this.subscriptions.push(this.communityService.getCommunityAsObservable().subscribe(
community => {
this.getLayout(community.communityId);
}));
}
goTo(simple: boolean) {
let url = (simple) ? this.selectedEntitySimpleUrl : this.selectedEntityAdvancedUrl;
let parameterNames = [];
let parameterValues = [];
if (this.keyword.length > 0) {
parameterNames.push("fv0");
parameterValues.push(this.keyword);
parameterNames.push("f0");
parameterValues.push("q");
}
this._router.navigate([url], {queryParams: this.routerHelper.createQueryParams(parameterNames, parameterValues)});
}
disableSelectChange(event: boolean) {
this.disableSelect = event;
this.cdr.detectChanges();
}
entityChanged($event) {
this.selectedEntity = $event.entity;
this.selectedEntitySimpleUrl = $event.simpleUrl;
this.selectedEntityAdvancedUrl = $event.advancedUrl;
if (this.selectedEntity == 'result') {
this.placeholderText = "Search by title, author, abstract, DOI, orcid... ";
} else if (this.selectedEntity == 'project') {
this.placeholderText = "Search by project title, grant id, funder...";
} else if (this.selectedEntity == 'dataprovider') {
this.placeholderText = "Search by name...";
} else {
this.placeholderText = "Search community content";
}
}
}

View File

@ -0,0 +1,47 @@
import {Component} from '@angular/core';
import {OpenaireEntities} from "../../../../utils/properties/searchFields";
import {PluginBaseFormComponent} from "../../utils/base-plugin.form.component";
import {PluginSearchBar} from "./plugin-search-bar.component";
@Component({
selector: 'plugin-search-bar-form',
template: `
<div *ngIf="pluginObject" class="uk-padding-xsmall">
<plugin-field-edit [value]="pluginObject.alternativeTitle"
type="text" field="alternativeTitle" placeholder="Alternative title" (changed)="valueChanged($event)"></plugin-field-edit>
<div class="uk-margin-top uk-text-meta uk-text-small uk-margin-small-bottom">
Show or hide the following information:
</div>
<div class="uk-grid uk-child-width-1-1 uk-text-small uk-hr ">
<div class="uk-margin-xsmall-bottom uk-margin-xsmall-top">
<plugin-field-edit [value]=" pluginObject.showTitle"
type="checkbox" field="showTitle" (editClicked)="pluginEditEvent = $event"
(changed)="valueChanged($event)">
</plugin-field-edit> Title
</div>
<div class="uk-margin-xsmall-bottom uk-margin-xsmall-top">
<plugin-field-edit [value]=" pluginObject.showShortTitle"
type="checkbox" field="showShortTitle" (editClicked)="pluginEditEvent = $event"
(changed)="valueChanged($event)">
</plugin-field-edit> Short title
</div>
<div class="uk-alert uk-alert-warning uk-text-small uk-padding-xsmall uk-margin-medium-left "> Manage community info <a routerLink="../../info/profile" target="_blank">here</a>.</div>
</div>
</div>
`,
})
export class PluginSearchBarFormComponent extends PluginBaseFormComponent<PluginSearchBar> {
openaireEntities= OpenaireEntities;
constructor() {
super()
}
}

View File

@ -0,0 +1,30 @@
import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';
import {CommonModule} from '@angular/common';
import {FormsModule} from '@angular/forms';
import {PluginsService} from "../../../../services/plugins.service";
import {IconsModule} from "../../../../utils/icons/icons.module";
import {NumberRoundModule} from "../../../../utils/pipes/number-round.module";
import {SearchResearchResultsServiceModule} from "../../../../services/searchResearchResultsService.module";
import {PluginFieldEditModule} from "../../utils/plugin-field-edit.module";
import {CuratorsModule} from '../../../../connect/components/curators/curators.module';
import {AdvancedSearchInputModule} from "../../../../sharedComponents/advanced-search-input/advanced-search-input.module";
import {EntitiesSelectionModule} from "../../../../searchPages/searchUtils/entitiesSelection.module";
import {QuickSelectionsModule} from "../../../../searchPages/searchUtils/quick-selections.module";
import {InputModule} from "../../../../sharedComponents/input/input.module";
import {PluginSearchBarComponent} from "./plugin-search-bar.component";
@NgModule({
imports: [
CommonModule, RouterModule, FormsModule, IconsModule, NumberRoundModule, SearchResearchResultsServiceModule, PluginFieldEditModule,
CuratorsModule, AdvancedSearchInputModule, EntitiesSelectionModule, QuickSelectionsModule, InputModule,
],
providers: [
PluginsService
],
declarations: [PluginSearchBarComponent],
exports: [PluginSearchBarComponent]
})
export class PluginSearchBarModule {
}

View File

@ -244,6 +244,8 @@
[plugin]="this.templateForm.getRawValue()" [plugin]="this.templateForm.getRawValue()"
[pluginObject]="this.selectedPlugin.object" [pluginObject]="this.selectedPlugin.object"
class="uk-width-1-1" [previewInAdmin]="true"></plugin-wrapper> class="uk-width-1-1" [previewInAdmin]="true"></plugin-wrapper>
<div>Reload!</div>
</ng-container> </ng-container>
</div> </div>
</div> </div>

View File

@ -432,5 +432,6 @@ export class PluginsComponent implements OnInit {
} }
clearCache(){ clearCache(){
this._clearCacheService.clearCacheInRoute(null, this.selectedCommunityPid, this.getPageById(this.selectedPageId).route) this._clearCacheService.clearCacheInRoute(null, this.selectedCommunityPid, this.getPageById(this.selectedPageId).route)
this._clearCacheService.purgeBrowserCache(null, this.selectedCommunityPid)
} }
} }

View File

@ -52,6 +52,7 @@ export class PluginInfoCards {
description: string; description: string;
urlsArray: PluginURL[]; urlsArray: PluginURL[];
image?: string; image?: string;
icon?:string;
show: boolean; show: boolean;
} }

View File

@ -19,7 +19,7 @@ import {PluginEditEvent} from "./base-plugin.form.component";
[ngModel]="getSelectedPages().length ==checkboxes.length"/>--> [ngModel]="getSelectedPages().length ==checkboxes.length"/>-->
<input *ngIf="type == 'checkbox'" [(ngModel)]="value" [checked]="value" (ngModelChange)="updateObject($event)" type="checkbox" class="uk-checkbox"> <input *ngIf="type == 'checkbox'" [(ngModel)]="value" [checked]="value" (ngModelChange)="updateObject($event)" type="checkbox" class="uk-checkbox">
<div *ngIf="type == 'text'" input [value]="value" [placeholder]="placeholder?placeholder:field.toUpperCase()" type="text" (valueChange)="updateObject($event)" inputClass=" border-bottom "></div> <div *ngIf="type == 'text'" input [value]="value" [placeholder]="placeholder?placeholder:field.toUpperCase()" type="text" (valueChange)="updateObject($event)" inputClass=" border-bottom "></div>
<div *ngIf="type == 'textarea'" input [value]="value" [placeholder]="placeholder?placeholder:field.toUpperCase()" type="textarea" (valueChange)="updateObject($event)" inputClass=" border-bottom "></div> <div *ngIf="type == 'textarea'" input [value]="value" [placeholder]="placeholder?placeholder:field.toUpperCase()" type="textarea" (valueChange)="updateObject($event)" inputClass=" uk-padding-remove " style="min-height: 100px; margin-left:-30px " class="uk-margin-top"></div>
<!--<div *ngIf="type == 'URL'" input [value]="value" [placeholder]="name" type="URL" ></div> <!--<div *ngIf="type == 'URL'" input [value]="value" [placeholder]="name" type="URL" ></div>
<div *ngIf="type == 'HTML'" class="uk-width-1-1"> <div *ngIf="type == 'HTML'" class="uk-width-1-1">
<ckeditor [readonly]="false" <ckeditor [readonly]="false"

View File

@ -3,14 +3,14 @@ import {PluginOpenAIREProducts} from "../components/openaireProducts/plugin-open
import {PluginDiscoverBySubcommunity} from "../components/discover-by-subcommunity/plugin-discover-by-subcommunity.component"; import {PluginDiscoverBySubcommunity} from "../components/discover-by-subcommunity/plugin-discover-by-subcommunity.component";
import {PluginBaseInfo} from "./base-plugin.component"; import {PluginBaseInfo} from "./base-plugin.component";
import {PluginGatewayInformation} from "../components/gateway-information/plugin-gateway-information.component"; import {PluginGatewayInformation} from "../components/gateway-information/plugin-gateway-information.component";
import {PluginLearnAndConnect} from "../components/learn-and-connect/plugin-learn-and-connect.component";
import {PluginFeaturedDatasets} from "../components/featured-datasets/plugin-featured-datasets.component"; import {PluginFeaturedDatasets} from "../components/featured-datasets/plugin-featured-datasets.component";
import {PluginHowToUse} from "../components/how-to-use/plugin-how-to-use.component";
import {PluginSearchDepositLink} from "../components/search-deposit-link/plugin-search-deposit-link.component"; import {PluginSearchDepositLink} from "../components/search-deposit-link/plugin-search-deposit-link.component";
import {PluginOrganizations} from "../components/organizations/plugin-organizations.component"; import {PluginOrganizations} from "../components/organizations/plugin-organizations.component";
import {PluginSuggestedRepositories} from "../components/suggested-repositories/plugin-suggested-repositories.component"; import {PluginSuggestedRepositories} from "../components/suggested-repositories/plugin-suggested-repositories.component";
import {PluginGraphInfo} from "../components/graph-info/plugin-graph-info.component"; import {PluginGraphInfo} from "../components/graph-info/plugin-graph-info.component";
import {PluginStats} from "../components/stats/plugin-stats.component"; import {PluginStats} from "../components/stats/plugin-stats.component";
import {PluginCardInfo} from "../components/card-info/plugin-card-info.component";
import {PluginSearchBar} from "../components/search-bar/plugin-search-bar.component";
export class PluginUtils{ export class PluginUtils{
public attrTypeOptions: Option[] = [ public attrTypeOptions: Option[] = [
@ -32,9 +32,11 @@ export class PluginUtils{
{label:"Organizations", value:"organizations"}, {label:"Organizations", value:"organizations"},
{label:"Graph info", value:"graph-info"}, {label:"Graph info", value:"graph-info"},
{label:"Statistics", value:"stats"}, {label:"Statistics", value:"stats"},
{label:"Search Bar", value:"search-bar"},
{label:"Card info", value:"card-info"},
{label:"Card slides", value:"card-slide"}
]; ];
public availablePluginCodes: string[] = ["openaire-products", "discover-by-subcommunity", "gateway-information", "search-deposit-link", "learn-and-connect", "how-to-use", "suggested-repositories", "featured-datasets", "organizations", "graph-info", "organizations", "stats" public availablePluginCodes: string[] = ["openaire-products", "discover-by-subcommunity", "gateway-information", "search-deposit-link", "learn-and-connect", "how-to-use", "suggested-repositories", "featured-datasets", "organizations", "graph-info", "organizations", "stats", "search-bar","card-info", "card-slide"];
];
public placementsOptions: Option[] = [ public placementsOptions: Option[] = [
{label:"Right", value:"right"}, {label:"Right", value:"right"},
{label:"Top", value:"top"}, {label:"Top", value:"top"},
@ -63,12 +65,6 @@ export class PluginUtils{
case 'search-deposit-link': { case 'search-deposit-link': {
return (new PluginSearchDepositLink()).compare(oldObject); return (new PluginSearchDepositLink()).compare(oldObject);
} }
case 'learn-and-connect': {
return (new PluginLearnAndConnect()).compare(oldObject);
}
case 'how-to-use': {
return (new PluginHowToUse()).compare(oldObject);
}
case 'suggested-repositories': { case 'suggested-repositories': {
return (new PluginSuggestedRepositories()).compare(oldObject); return (new PluginSuggestedRepositories()).compare(oldObject);
} }
@ -84,6 +80,18 @@ export class PluginUtils{
case 'stats': { case 'stats': {
return (new PluginStats()).compare(oldObject); return (new PluginStats()).compare(oldObject);
} }
case 'learn-and-connect': {
return (new PluginCardInfo()).compare(oldObject);
}
case 'how-to-use': {
return (new PluginCardInfo()).compare(oldObject);
}
case 'card-info': {
return (new PluginCardInfo()).compare(oldObject);
}
case 'search-bar': {
return (new PluginSearchBar()).compare(oldObject);
}
default: { default: {
return (new PluginBaseInfo()).compare(oldObject); return (new PluginBaseInfo()).compare(oldObject);
} }

View File

@ -22,12 +22,6 @@ import {PluginUtils} from "../utils/pluginUtils";
<ng-container *ngIf="pluginTemplate.code == 'search-deposit-link'"> <ng-container *ngIf="pluginTemplate.code == 'search-deposit-link'">
<plugin-search-deposit-link-form [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" (valuesChanged)="changed.emit($event)" [editTemplate]="editTemplate" [editSubmenuOpen]="editSubmenuOpen"></plugin-search-deposit-link-form> <plugin-search-deposit-link-form [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" (valuesChanged)="changed.emit($event)" [editTemplate]="editTemplate" [editSubmenuOpen]="editSubmenuOpen"></plugin-search-deposit-link-form>
</ng-container> </ng-container>
<ng-container *ngIf="pluginTemplate.code == 'learn-and-connect'">
<plugin-learn-and-connect-form [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" (valuesChanged)="changed.emit($event)" [editTemplate]="editTemplate" [editSubmenuOpen]="editSubmenuOpen"></plugin-learn-and-connect-form>
</ng-container>
<ng-container *ngIf="pluginTemplate.code == 'how-to-use'">
<plugin-how-to-use-form [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" (valuesChanged)="changed.emit($event)" [editTemplate]="editTemplate" [editSubmenuOpen]="editSubmenuOpen"></plugin-how-to-use-form>
</ng-container>
<ng-container *ngIf="pluginTemplate.code == 'suggested-repositories'"> <ng-container *ngIf="pluginTemplate.code == 'suggested-repositories'">
<plugin-suggested-repositories-form [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" (valuesChanged)="changed.emit($event)" [editTemplate]="editTemplate"></plugin-suggested-repositories-form> <plugin-suggested-repositories-form [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" (valuesChanged)="changed.emit($event)" [editTemplate]="editTemplate"></plugin-suggested-repositories-form>
</ng-container> </ng-container>
@ -43,6 +37,12 @@ import {PluginUtils} from "../utils/pluginUtils";
<ng-container *ngIf="pluginTemplate.code == 'stats'"> <ng-container *ngIf="pluginTemplate.code == 'stats'">
<plugin-stats-form [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" (valuesChanged)="changed.emit($event)" [editTemplate]="editTemplate"></plugin-stats-form> <plugin-stats-form [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" (valuesChanged)="changed.emit($event)" [editTemplate]="editTemplate"></plugin-stats-form>
</ng-container> </ng-container>
<ng-container *ngIf="pluginTemplate.code == 'search-bar'">
<plugin-search-bar-form [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" (valuesChanged)="changed.emit($event)" [editTemplate]="editTemplate"></plugin-search-bar-form>
</ng-container>
<ng-container *ngIf="pluginTemplate.code == 'card-info' || pluginTemplate.code == 'learn-and-connect' || pluginTemplate.code == 'how-to-use'">
<plugin-card-info-form [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" (valuesChanged)="changed.emit($event)" [editTemplate]="editTemplate" [editSubmenuOpen]="editSubmenuOpen"></plugin-card-info-form>
</ng-container>
</ng-container> </ng-container>
<ng-template #noplugin> <ng-template #noplugin>
<div class="uk-text-muted uk-text-center"> <div class="uk-text-muted uk-text-center">

View File

@ -4,7 +4,6 @@ import {CommonModule} from '@angular/common';
import {FormsModule} from '@angular/forms'; import {FormsModule} from '@angular/forms';
import {PluginEditWrapperComponent} from "./plugin-edit-wrapper.component"; import {PluginEditWrapperComponent} from "./plugin-edit-wrapper.component";
import {PluginOpenaireProductsFormComponent} from "../components/openaireProducts/plugin-openaire-products.form.component"; import {PluginOpenaireProductsFormComponent} from "../components/openaireProducts/plugin-openaire-products.form.component";
import {PluginLearnAndConnectFormComponent} from "../components/learn-and-connect/plugin-learn-and-connect.form.component";
import {PluginFieldEditModule} from "../utils/plugin-field-edit.module"; import {PluginFieldEditModule} from "../utils/plugin-field-edit.module";
import {PluginDiscoverBySubcommunityFormComponent} from "../components/discover-by-subcommunity/plugin-discover-by-subcommunity.form.component"; import {PluginDiscoverBySubcommunityFormComponent} from "../components/discover-by-subcommunity/plugin-discover-by-subcommunity.form.component";
import {PluginFeaturedDatasetsFormComponent} from "../components/featured-datasets/plugin-featured-datasets.form.component"; import {PluginFeaturedDatasetsFormComponent} from "../components/featured-datasets/plugin-featured-datasets.form.component";
@ -12,17 +11,17 @@ import {PluginGatewayInformationFormComponent} from "../components/gateway-infor
import {PluginSearchDepositLinkFormComponent} from "../components/search-deposit-link/plugin-search-deposit-link.form.component"; import {PluginSearchDepositLinkFormComponent} from "../components/search-deposit-link/plugin-search-deposit-link.form.component";
import {PluginOrganizationsFormComponent} from "../components/organizations/plugin-organizations.form.component"; import {PluginOrganizationsFormComponent} from "../components/organizations/plugin-organizations.form.component";
import {IconsModule} from "../../../utils/icons/icons.module"; import {IconsModule} from "../../../utils/icons/icons.module";
import {PluginHowToUseFormComponent} from "../components/how-to-use/plugin-how-to-use.form.component";
import {PluginSuggestedRepositoriesFormComponent} from "../components/suggested-repositories/plugin-suggested-repositories.form.component"; import {PluginSuggestedRepositoriesFormComponent} from "../components/suggested-repositories/plugin-suggested-repositories.form.component";
import {PluginGraphInfoFormComponent} from "../components/graph-info/plugin-graph-info.form.component"; import {PluginGraphInfoFormComponent} from "../components/graph-info/plugin-graph-info.form.component";
import {PluginStatsFormComponent} from "../components/stats/plugin-stats.form.component"; import {PluginStatsFormComponent} from "../components/stats/plugin-stats.form.component";
import {PluginSearchBarFormComponent} from "../components/search-bar/plugin-search-bar.form.component";
import {PluginCardInfoFormComponent} from "../components/card-info/plugin-card-info-form.component";
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, RouterModule, FormsModule, PluginFieldEditModule, IconsModule CommonModule, RouterModule, FormsModule, PluginFieldEditModule, IconsModule
], ],
declarations: [PluginEditWrapperComponent, PluginOpenaireProductsFormComponent, PluginLearnAndConnectFormComponent, declarations: [PluginEditWrapperComponent, PluginOpenaireProductsFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginFeaturedDatasetsFormComponent, PluginGatewayInformationFormComponent, PluginSearchDepositLinkFormComponent, PluginOrganizationsFormComponent, PluginSuggestedRepositoriesFormComponent, PluginGraphInfoFormComponent, PluginStatsFormComponent, PluginSearchBarFormComponent, PluginCardInfoFormComponent],
PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginFeaturedDatasetsFormComponent, PluginGatewayInformationFormComponent, PluginSearchDepositLinkFormComponent, PluginOrganizationsFormComponent, PluginHowToUseFormComponent, PluginSuggestedRepositoriesFormComponent, PluginGraphInfoFormComponent, PluginStatsFormComponent],
exports: [PluginEditWrapperComponent] exports: [PluginEditWrapperComponent]
}) })

View File

@ -20,12 +20,6 @@ import {PluginUtils} from "../utils/pluginUtils";
<ng-container *ngIf="pluginTemplate.code == 'search-deposit-link'"> <ng-container *ngIf="pluginTemplate.code == 'search-deposit-link'">
<plugin-search-deposit-link [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" [previewInAdmin]="previewInAdmin" ></plugin-search-deposit-link> <plugin-search-deposit-link [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" [previewInAdmin]="previewInAdmin" ></plugin-search-deposit-link>
</ng-container> </ng-container>
<ng-container *ngIf="pluginTemplate.code == 'learn-and-connect'">
<plugin-learn-and-connect [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" [previewInAdmin]="previewInAdmin" ></plugin-learn-and-connect>
</ng-container>
<ng-container *ngIf="pluginTemplate.code == 'how-to-use'">
<plugin-how-to-use [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" [previewInAdmin]="previewInAdmin" ></plugin-how-to-use>
</ng-container>
<ng-container *ngIf="pluginTemplate.code == 'suggested-repositories'"> <ng-container *ngIf="pluginTemplate.code == 'suggested-repositories'">
<plugin-suggested-repositories [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" [previewInAdmin]="previewInAdmin" ></plugin-suggested-repositories> <plugin-suggested-repositories [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" [previewInAdmin]="previewInAdmin" ></plugin-suggested-repositories>
</ng-container> </ng-container>
@ -41,6 +35,12 @@ import {PluginUtils} from "../utils/pluginUtils";
<ng-container *ngIf="pluginTemplate.code == 'stats'"> <ng-container *ngIf="pluginTemplate.code == 'stats'">
<plugin-stats [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" [previewInAdmin]="previewInAdmin" ></plugin-stats> <plugin-stats [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" [previewInAdmin]="previewInAdmin" ></plugin-stats>
</ng-container> </ng-container>
<ng-container *ngIf="pluginTemplate.code == 'search-bar'">
<plugin-search-bar [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" [previewInAdmin]="previewInAdmin" ></plugin-search-bar>
</ng-container>
<ng-container *ngIf="pluginTemplate.code == 'card-info' || pluginTemplate.code == 'learn-and-connect' || pluginTemplate.code == 'how-to-use'">
<plugin-card-info [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" [previewInAdmin]="previewInAdmin" ></plugin-card-info>
</ng-container>
</div> </div>
<ng-template #noplugin> <ng-template #noplugin>
<div class="uk-text-muted uk-text-center"> <div class="uk-text-muted uk-text-center">

View File

@ -7,19 +7,18 @@ import {PluginOpenaireProductsModule} from "../components/openaireProducts/plugi
import {PluginDiscoverBySubcommunityModule} from '../components/discover-by-subcommunity/plugin-discover-by-subcommunity.module'; import {PluginDiscoverBySubcommunityModule} from '../components/discover-by-subcommunity/plugin-discover-by-subcommunity.module';
import {PluginGatewayInformationModule} from '../components/gateway-information/plugin-gateway-information.module'; import {PluginGatewayInformationModule} from '../components/gateway-information/plugin-gateway-information.module';
import {PluginSearchDepositLinkModule} from '../components/search-deposit-link/plugin-search-deposit-link.module'; import {PluginSearchDepositLinkModule} from '../components/search-deposit-link/plugin-search-deposit-link.module';
import {PluginLearnAndConnectModule} from '../components/learn-and-connect/plugin-learn-and-connect.module';
import {PluginHowToUseModule} from '../components/how-to-use/plugin-how-to-use.module';
import {PluginSuggestedRepositoriesModule} from '../components/suggested-repositories/plugin-suggested-repositories.module'; import {PluginSuggestedRepositoriesModule} from '../components/suggested-repositories/plugin-suggested-repositories.module';
import {PluginFeaturedDatasetsModule} from '../components/featured-datasets/plugin-featured-datasets.module'; import {PluginFeaturedDatasetsModule} from '../components/featured-datasets/plugin-featured-datasets.module';
import {PluginOrganizationsModule} from "../components/organizations/plugin-organizations.module"; import {PluginOrganizationsModule} from "../components/organizations/plugin-organizations.module";
import {PluginGraphInfoModule} from "../components/graph-info/plugin-graph-info.module"; import {PluginGraphInfoModule} from "../components/graph-info/plugin-graph-info.module";
import {PluginStatsModule} from "../components/stats/plugin-stats.module"; import {PluginStatsModule} from "../components/stats/plugin-stats.module";
import {PluginSearchBarModule} from "../components/search-bar/plugin-search-bar.module";
import {PluginCardInfoModule} from "../components/card-info/plugin-card-info.module";
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, RouterModule, FormsModule, PluginOpenaireProductsModule, CommonModule, RouterModule, FormsModule, PluginOpenaireProductsModule,
PluginDiscoverBySubcommunityModule, PluginSearchDepositLinkModule, PluginLearnAndConnectModule, PluginDiscoverBySubcommunityModule, PluginSearchDepositLinkModule, PluginSuggestedRepositoriesModule, PluginFeaturedDatasetsModule, PluginGatewayInformationModule, PluginOrganizationsModule, PluginGraphInfoModule, PluginStatsModule, PluginSearchBarModule, PluginCardInfoModule
PluginHowToUseModule, PluginSuggestedRepositoriesModule, PluginFeaturedDatasetsModule, PluginGatewayInformationModule, PluginOrganizationsModule, PluginGraphInfoModule, PluginStatsModule
], ],
declarations: [PluginWrapperComponent], declarations: [PluginWrapperComponent],
exports: [PluginWrapperComponent] exports: [PluginWrapperComponent]