[plugins-functionality | WIP] checks in gateway info plugins, form and layout for search-deposit-link

This commit is contained in:
argirok 2024-02-22 12:15:21 +02:00
parent f92c4cbf52
commit aa0da38de9
12 changed files with 151 additions and 84 deletions

View File

@ -7,6 +7,7 @@
<div *ngIf="!community " class="uk-text-muted uk-text-center">
No community info available available
</div>
<ng-container *ngIf="community">
<div *ngIf="isRouteEnabled('/curators') && isVisible('curators')" class="uk-text-small uk-margin-xsmall-bottom">
<curators [longView]="false"></curators>
</div>
@ -81,10 +82,11 @@
</div>
</div>
</div>
</ng-container>
</div>
</div>
<div class="plugin2 uk-flex uk-flex-middle uk-flex-wrap" style="grid-gap: 30px;">
<div *ngIf="community" class="plugin2 uk-flex uk-flex-middle uk-flex-wrap" style="grid-gap: 30px;">
<div class="uk-flex uk-flex-middle" *ngIf="resultCounts && resultCounts.publications > 0 && isEntityEnabled('publication')
&& isRouteEnabled(searchLinkToResults) &&
isVisible('publications')">

View File

@ -80,7 +80,7 @@ export class PluginGatewayInformationComponent extends PluginBaseComponent<Plugi
this.subscriptions.push(this.communityService.getCommunityAsObservable().subscribe(
community => {
this.community = community;
if(community && !ConnectHelper.isPrivate(community, this.user)) {
if (community) {
this.displayedSubjects = community.subjects;
this.displayedSdg = community.sdg;
this.displayedFos = community.fos;
@ -97,7 +97,7 @@ export class PluginGatewayInformationComponent extends PluginBaseComponent<Plugi
this.params = {communityId: community.communityId};
}
if (this.community.zenodoCommunity) {
this.subscriptions.push(this.zenodoCommunitiesService.getZenodoCommunityById(this.properties, this.community.zenodoCommunity).subscribe(
this.subscriptions.push(this.zenodoCommunitiesService.getZenodoCommunityById(this.properties, this.community.zenodoCommunity).subscribe(
res => {
this.masterZenodoCommunity = res;
},
@ -107,36 +107,38 @@ export class PluginGatewayInformationComponent extends PluginBaseComponent<Plugi
));
}
this.zenodoCommunityIdS = this.community.otherZenodoCommunities;
// Double check below: is `this.community.communityId` correct? the other way was through @input communityID from ConnectHelper service - domain
this.subscriptions.push(this.searchCommunityProjectsService.countTotalProjects(this.properties, this.community.communityId).subscribe(
res => {
this.projectTotal = res;
},
error => {
console.log(error);
},
() => {
this.projectsCalculated = true;
}
));
// Double check below: is `this.community.communityId` correct? the other way was through @input communityID from ConnectHelper service - domain
this.subscriptions.push(this.searchCommunityDataprovidersService.countTotalDataproviders(this.properties, this.community.communityId).subscribe(
res => {
this.contentProviderTotal = res;
},
error => {
console.log(error);
},
() => {
this.contentProvidersCalculated = true;
}
));
this.subscriptions.push(this.http.get(this.properties.utilsService + "/portals/countResults?field=communityid&value=" + this.community.communityId).subscribe(res => {
this.resultCounts = res;
}));
}
}
));
// Double check below: is `this.community.communityId` correct? the other way was through @input communityID from ConnectHelper service - domain
this.subscriptions.push(this.searchCommunityProjectsService.countTotalProjects(this.properties, this.community.communityId).subscribe(
res => {
this.projectTotal = res;
},
error => {
console.log(error);
},
() => {
this.projectsCalculated = true;
}
));
// Double check below: is `this.community.communityId` correct? the other way was through @input communityID from ConnectHelper service - domain
this.subscriptions.push(this.searchCommunityDataprovidersService.countTotalDataproviders(this.properties, this.community.communityId).subscribe(
res => {
this.contentProviderTotal = res;
},
error => {
console.log(error);
},
() => {
this.contentProvidersCalculated = true;
}
));
this.subscriptions.push(this.http.get(this.properties.utilsService + "/portals/countResults?field=communityid&value=" + this.community.communityId).subscribe(res => {
this.resultCounts = res;
}));
}
@ -145,7 +147,7 @@ export class PluginGatewayInformationComponent extends PluginBaseComponent<Plugi
}
isRouteEnabled(route: string) {
return this.portal.pages.some(x => x['route'] == route && x['isEnabled'] === true);
return this.portal && this.portal.pages.some(x => x['route'] == route && x['isEnabled'] === true);
}
buildProjectsTooltip(): string {

View File

@ -1,60 +1,38 @@
<div>plugin-search-deposit-link</div>
<!-- add slider component -->
<div #parent class="uk-section uk-section-secondary connect-dark-logo-background">
<div *ngIf="pluginObject" #parent class="uk-section ">
<div class="uk-container uk-container-large uk-margin-large-bottom">
<div class="uk-width-1-1 uk-margin-medium-bottom">
<!-- <span class="uk-h6 uk-text-primary">Benefits.</span>-->
<h2 class="uk-margin-remove-top uk-width-1-2@m">
Find the best for your community<span class="uk-text-primary">.</span>
{{pluginObject.title}}<!--<span class="uk-text-primary">.</span>-->
</h2>
</div>
<slider-container [total]="4" [navigation]="'progress'" [period]="6000" [infinite]="true" [parent]="parent">
<slider-container [total]="activeCards.length" [navigation]="'progress'" [period]="6000" [infinite]="true" [parent]="parent">
<slider-column type="slider">
<slider-item type="static">
<img class="uk-position-center uk-position-z-index" src="assets/connect-assets/home/tablet.png"
<img class="uk-position-center uk-position-z-index" [src]="'https://' + (properties.environment == 'production'?'':'beta.')
+ 'connect.openaire.eu/assets/connect-assets/home/tablet.png'"
alt="ipad" loading="lazy">
</slider-item>
<slider-item type="slide" [start]="0">
<img src="assets/connect-assets/home/1.png" alt="ipad" loading="lazy">
</slider-item>
<slider-item type="slide" [start]="1">
<img src="assets/connect-assets/home/2.png" alt="ipad" loading="lazy">
</slider-item>
<slider-item type="slide" [start]="2">
<img src="assets/connect-assets/home/3.png" alt="ipad" loading="lazy">
</slider-item>
<slider-item type="slide" [start]="3">
<img src="assets/connect-assets/home/4.png" alt="ipad" loading="lazy">
</slider-item>
<ng-container *ngFor="let card of pluginObject.cardInfoArray; let i = index">
<ng-container *ngIf="card.show">
<slider-item type="slide" [start]="i">
<img [src]="card.image" [alt]="card.tag" loading="lazy">
</slider-item>
</ng-container>
</ng-container>
</slider-column>
<slider-column type="nav" class="slider-nav">
<slider-nav-item [start]="0">
<h5 class="uk-margin-remove">
<i class="uk-text-primary">Find a repository </i>
<span>to deposit your {{entities.RESULT | lowercase}}</span>
<span class="uk-text-primary">.</span>
</h5>
</slider-nav-item>
<slider-nav-item [start]="1">
<h5 class="uk-margin-remove">
<i class="uk-text-primary">Link your {{entities.RESULT | lowercase}} </i>
<span>with your community, funding, and other {{entities.RESULTS | lowercase}}</span>
<span class="uk-text-primary">.</span>
</h5>
</slider-nav-item>
<slider-nav-item [start]="2">
<h5 class="uk-margin-remove">
<span>View community's </span>
<i class="uk-text-primary">overview at a glance.</i>
</h5>
</slider-nav-item>
<slider-nav-item [start]="3">
<h5 class="uk-margin-remove">
<i class="uk-text-primary">Search & browse </i>
<span>your community's {{entities.RESULTS | lowercase}}</span>
<span class="uk-text-primary">.</span>
</h5>
</slider-nav-item>
<ng-container *ngFor="let card of activeCards; let i = index">
<ng-container *ngIf="card.show">
<slider-nav-item [start]="i">
<div class="uk-text-primary">{{card.tag}}</div>
<h5 class="uk-margin-remove">
{{card.title}}
</h5>
<div>{{card.description}}</div>
</slider-nav-item>
</ng-container>
</ng-container>
</slider-column>
</slider-container>
</div>

View File

@ -0,0 +1,3 @@
//slider-column slider-nav-item .uk-active{
// border-left: solid 2px @primary-color;
//}

View File

@ -1,13 +1,30 @@
import {Component} from '@angular/core';
import {PluginBaseComponent} from "../../utils/base-plugin.component";
import {PluginBaseComponent, PluginInfoCards, PluginURL} from "../../utils/base-plugin.component";
import {OpenaireEntities} from "../../../../utils/properties/searchFields";
import {properties} from "../../../../../../environments/environment";
export class PluginSearchDepositLink{
title:string ="Search, link and deposit your research in one place.";
description: string = "Lorem ipsum";
// description: string = "Lorem ipsum";
cardInfoArray: PluginInfoCards[] = [
{tag: "SEARCH & BROWSE", title: "Discover research products in your community.", description:
"A view of the OpenAIRE Graph, configured by experts of your research community, who want to help you out with the data and literature deluge.",
urls:[ new PluginURL("/search/find/research-outcomes","Start searching", null, true)],
image:'https://' + (properties.environment == 'production'?'':'beta.')
+ 'connect.openaire.eu/assets/connect-assets/home/4.png',show:true},
{tag: "DEPOSIT YOUR RESEARCH OUTCOME", title: "Publish your research in Open Access.", description:""
, urls:[ new PluginURL("/participate/deposit/learn-how","Start searching", null, true)],
image:'https://' + (properties.environment == 'production'?'':'beta.')
+ 'connect.openaire.eu/assets/connect-assets/home/1.png',show:true},
{tag: "LINK YOUR RESEARCH", title: "Contribute to your community.", description:""
, urls:[ new PluginURL("/participate/claim","Start searching", null, true)],
image:'https://' + (properties.environment == 'production'?'':'beta.')
+ 'connect.openaire.eu/assets/connect-assets/home/2.png',show:true},
];
}
@Component({
selector: 'plugin-search-deposit-link',
templateUrl: 'plugin-search-deposit-link.component.html'
templateUrl: 'plugin-search-deposit-link.component.html',
styleUrls:[`plugin-search-deposit-link.component.less`]
})
export class PluginSearchDepositLinkComponent extends PluginBaseComponent<PluginSearchDepositLink>{
entities= OpenaireEntities;
@ -15,4 +32,8 @@ export class PluginSearchDepositLinkComponent extends PluginBaseComponent<Plugin
constructor() {
super()
}
get activeCards(){
return this.pluginObject.cardInfoArray.filter( card => card.show);
}
}

View File

@ -0,0 +1,54 @@
import {Component} from '@angular/core';
import {PluginBaseComponent, PluginEditEvent} from "../../utils/base-plugin.component";
import {HttpClient} from "@angular/common/http";
import {PluginSearchDepositLink} from "./plugin-search-deposit-link.component";
@Component({
selector: 'plugin-search-deposit-link-form',
template: `
<div *ngIf="pluginObject" class="uk-padding-xsmall">
<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 class="uk-text-small uk-width-3-4">{{card.tag}}</div>
<div class=" uk-width-auto">
<plugin-field-edit [value]=" pluginObject.cardInfoArray[i].show"
type="boolean" field="cardInfoArray" (editClicked)="pluginEditEvent = $event" (changed)="cardShowChanged(i,$event)" >
</plugin-field-edit>
</div>
</div>
</ng-container>
</div>
`,
})
export class PluginSearchDepositLinkFormComponent extends PluginBaseComponent<PluginSearchDepositLink> /*implements OnChanges*/{
constructor(http:HttpClient) {
super()
}
cardShowChanged(i,$event:PluginEditEvent){
if(this.editTemplate){
this.pluginTemplate.object.cardInfoArray[i].show=$event.value;
$event.value =this.pluginTemplate.object.cardInfoArray;
}else{
this.plugin.object.cardInfoArray[i].show=$event.value;
$event.value =this.plugin.object.cardInfoArray;
}
this.valuesChanged.emit({field:$event.field, value: $event.value, type: 'parent'})
}
}

View File

@ -13,7 +13,8 @@ import {SliderUtilsModule} from "../../../../sharedComponents/slider-utils/slide
@NgModule({
imports: [
CommonModule, RouterModule, FormsModule, IconsModule, NumberRoundModule, SearchResearchResultsServiceModule, PluginFieldEditModule, SliderUtilsModule
CommonModule, RouterModule, FormsModule, IconsModule, NumberRoundModule, SearchResearchResultsServiceModule,
PluginFieldEditModule, SliderUtilsModule
],
providers:[PluginsService],
declarations: [PluginSearchDepositLinkComponent],

View File

@ -119,6 +119,7 @@ export class PluginTemplatesComponent implements OnInit {
}
for(let template of templates){
let defaultObj = PluginUtils.initializeObject(template.code);
console.log(defaultObj)
template.object = PluginUtils.updateExistingObject(template.object, defaultObj)
this.templatesByPlacement.get(template.placement).push(template);
}

View File

@ -20,15 +20,18 @@ export class PluginURL {
url:string;
linkText:string;
target:string;
constructor(url,linkText, target = "_blank") {
route:boolean;
constructor(url,linkText, target = "_blank",route = false) {
this.url = url;
this.linkText = linkText;
this.target = target;
this.route = route;
}
}
export class PluginInfoCards{
tag?:string;
title:string;
description:string;
urls:PluginURL[];

View File

@ -6,6 +6,7 @@ import {PluginGatewayInformation} from "../components/gateway-information/plugin
import {PluginLearnAndConnect} from "../components/learn-and-connect/plugin-learn-and-connect.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";
export class PluginUtils{
public attrTypeOptions: Option[] = [
@ -52,7 +53,7 @@ export class PluginUtils{
return new PluginGatewayInformation();
}
case 'search-deposit-link': {
return new PluginBaseInfo();
return new PluginSearchDepositLink();
}
case 'learn-and-connect': {
return new PluginLearnAndConnect();

View File

@ -17,7 +17,7 @@ import {PluginEditEvent} from "../utils/base-plugin.component";
<plugin-gateway-information-form [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" (valuesChanged)="changed.emit($event)" [editTemplate]="editTemplate"></plugin-gateway-information-form>
</ng-container>
<ng-container *ngIf="pluginTemplate.code == 'search-deposit-link'">
<plugin-search-deposit-link [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" (valuesChanged)="changed.emit($event)" [editTemplate]="editTemplate"></plugin-search-deposit-link>
<plugin-search-deposit-link-form [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" (valuesChanged)="changed.emit($event)" [editTemplate]="editTemplate"></plugin-search-deposit-link-form>
</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"></plugin-learn-and-connect-form>

View File

@ -9,13 +9,14 @@ import {PluginFieldEditModule} from "../utils/plugin-field-edit.module";
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 {PluginGatewayInformationFormComponent} from "../components/gateway-information/plugin-gateway-information.form.component";
import {PluginSearchDepositLinkFormComponent} from "../components/search-deposit-link/plugin-search-deposit-link.form.component";
@NgModule({
imports: [
CommonModule, RouterModule, FormsModule, PluginFieldEditModule
],
declarations: [PluginEditWrapperComponent, PluginOpenaireProductsFormComponent, PluginLearnAndConnectFormComponent,
PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginFeaturedDatasetsFormComponent, PluginGatewayInformationFormComponent],
PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginFeaturedDatasetsFormComponent, PluginGatewayInformationFormComponent, PluginSearchDepositLinkFormComponent],
exports: [PluginEditWrapperComponent]
})