MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[Trunk | Library]: 

1. tabs.component.ts: Remove unnecessary logs.
2. alert.ts: Input field 'classTitle' added - applied on 'uk-modal-title' (background in landing pages' modals).
3. project.component: 
	a. comment 'test' right column in tabs
	b. apply 'ModalSelectDirective' in <mat-select> inside modals
	c. In modals pass in classTitle: landing-modal-header & in classBody: landing-modal & fix paddings and margins.
	d. [Bug fix] Show 'View all' button in search results (inside tabs) by comparing totalResults with 'searchNumber'.
	e. In 'Share results', dynamic content is NOT hidden by default and there is no toggle button anymore. 


git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@58733 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
konstantina.galouni 2020-05-20 16:45:50 +00:00
parent 32c2758b66
commit c8f71a4093
5 changed files with 54 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
landingPages/project/project.component.html
View File

@ -3,19 +3,22 @@
<ul class="uk-list uk-margin-remove-bottom"> <ul class="uk-list uk-margin-remove-bottom">
<!-- class="uk-margin-top"--> <!-- class="uk-margin-top"-->
<li> <li>
<a class="clickable" <!-- <a class="clickable"-->
uk-toggle="target: #dynamic_content_id; animation:uk-animation-fade"><span <!-- uk-toggle="target: #dynamic_content_id; animation:uk-animation-fade"><span-->
class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" <!-- class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20"-->
xmlns="http://www.w3.org/2000/svg" icon="code" ratio="1"><polyline <!-- xmlns="http://www.w3.org/2000/svg" icon="code" ratio="1"><polyline-->
fill="none" stroke="#000" stroke-width="1.01" points="13,4 19,10 13,16"></polyline><polyline <!-- fill="none" stroke="#000" stroke-width="1.01" points="13,4 19,10 13,16"></polyline><polyline-->
fill="none" stroke="#000" stroke-width="1.01" <!-- fill="none" stroke="#000" stroke-width="1.01"-->
points="7,4 1,10 7,16"></polyline></svg></span> Include in your site (HTML)</a> <!-- points="7,4 1,10 7,16"></polyline></svg></span> Include in your site (HTML)</a>-->
<div hidden id="dynamic_content_id" class="uk-margin-small-top"> <!-- hidden class="uk-margin-small-top"-->
<div id="dynamic_content_id">
<pre class="box-content uk-padding-remove-bottom uk-margin-remove-bottom"><code
id="clipboard">{{dynamic_content}}</code></pre>
<div class="uk-grid"> <div class="uk-grid">
<a <a
class="clipboard_btn uk-padding-remove-left uk-margin-small-left uk-text-right uk-width-1-1" class="clipboard_btn uk-padding-remove-left uk-margin-small-left uk-text-right uk-width-1-1"
data-clipboard-target="#clipboard" title="Copy to clipboard"> data-clipboard-target="#clipboard" title="Copy to clipboard">
<button class="uk-button uk-button-small uk-button-default uk-icon"> <button class="uk-button uk-button-small uk-button-secondary square-button uk-icon">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="copy" ratio="1"> <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="copy" ratio="1">
<rect fill="none" stroke="#000" x="3.5" y="2.5" width="12" height="16"></rect> <rect fill="none" stroke="#000" x="3.5" y="2.5" width="12" height="16"></rect>
<polyline fill="none" stroke="#000" points="5 0.5 17.5 0.5 17.5 17"></polyline> <polyline fill="none" stroke="#000" points="5 0.5 17.5 0.5 17.5 17"></polyline>
@ -24,9 +27,6 @@
</button> </button>
</a> </a>
</div> </div>
<pre class="box-content uk-padding-remove-bottom uk-margin-remove-bottom"><code
id="clipboard">{{dynamic_content}}</code></pre>
<div class="uk-text-small uk-margin-small-top"> <div class="uk-text-small uk-margin-small-top">
For further information contact us at For further information contact us at
<u><a [href]="'mailto:'+properties.helpdeskEmail" class="uk-link-text">{{properties.helpdeskEmail}}</a></u> <u><a [href]="'mailto:'+properties.helpdeskEmail" class="uk-link-text">{{properties.helpdeskEmail}}</a></u>
@ -98,11 +98,11 @@
<div *ngIf="fetch.searchUtils.status == errorCodes.DONE"> <div *ngIf="fetch.searchUtils.status == errorCodes.DONE">
<div class="uk-inline uk-flex uk-flex-right"> <div class="uk-inline uk-flex uk-flex-right">
<span class="uk-text-uppercase uk-position-left uk-text-middle uk-flex-middle uk-flex"> <span class="uk-text-uppercase uk-position-left uk-text-middle uk-flex-middle uk-flex">
<span>Top {{searchNuumber}}</span><span class="space uk-text-muted">{{getEntityName(type, true, true)}}</span> <span>Top {{searchNumber}}</span><span class="space uk-text-muted">{{getEntityName(type, true, true)}}</span>
</span> </span>
<a [queryParams]="routerHelper.createQueryParams(['f0', 'fv0', 'type', 'qf'], ['relprojectid', projectId, getEntityName(type, true, false), 'false'])" <a [queryParams]="routerHelper.createQueryParams(['f0', 'fv0', 'type', 'qf'], ['relprojectid', projectId, getEntityName(type, true, false), 'false'])"
[routerLink]="properties.searchLinkToAdvancedResults" target="_blank"> [routerLink]="properties.searchLinkToAdvancedResults" target="_blank">
<button *ngIf="fetch.searchUtils.totalResults > 10" <button *ngIf="fetch.searchUtils.totalResults > searchNumber"
class="uk-button uk-button-small portal-button"> class="uk-button uk-button-small portal-button">
<span uk-icon="search"></span> <span uk-icon="search"></span>
View all View all
@ -606,10 +606,15 @@
<li *ngIf="isRouteAvailable('participate/direct-claim')"> <li *ngIf="isRouteAvailable('participate/direct-claim')">
<a class="uk-link-text uk-text-bold uk-text-uppercase" (click)="openLinkProjectModal()"> <a class="uk-link-text uk-text-bold uk-text-uppercase" (click)="openLinkProjectModal()">
<span class="uk-icon-button portal-button" uk-icon="link"></span> <span class="uk-icon-button portal-button" uk-icon="link"></span>
<span class="uk-margin-small-left">Link this project to...</span> <span class="uk-margin-small-left">Link this project to research results</span>
</a> </a>
<modal-alert #linkProjectModal> <modal-alert #linkProjectModal
<div class="uk-grid uk-child-width-1-3 uk-width-large "> [classTitle]="'landing-modal-header uk-padding-small'" [classBody]="'uk-padding-remove landing-modal'">
<!-- <div class="uk-modal-title landing-modal-header">-->
<!-- <button class="uk-modal-close-default uk-float-right" (click)='linkProjectModal.cancel()' uk-close></button>-->
<!-- <h4 class="modal-title" id="myModalLabel">{{linkProjectModal.alertTitle}}</h4>-->
<!-- </div>-->
<div class="uk-padding uk-padding-remove-vertical uk-margin-mdeium-bottom uk-text-center ">
<div> <div>
<a [queryParams]="routerHelper.createQueryParams(['id','type','linkTo'],[projectId, <a [queryParams]="routerHelper.createQueryParams(['id','type','linkTo'],[projectId,
'project','result'])" 'project','result'])"
@ -650,12 +655,14 @@
</span> </span>
<span class="uk-margin-small-left">Share results</span> <span class="uk-margin-small-left">Share results</span>
</a> </a>
<modal-alert #shareResultsModal> <modal-alert #shareResultsModal
<div class="app-box uk-padding-small uk-margin-small-left uk-margin-small-right"> [classTitle]="'landing-modal-header'" [classBody]="'uk-padding-remove landing-modal'">
<div class="uk-padding-small uk-margin-small-left uk-margin-small-right">
<div class="uk-padding-small uk-padding-remove-vertical"> <div class="uk-padding-small uk-padding-remove-vertical">
<mat-form-field class="matSelectionFormField uk-width-1-1"> <mat-form-field class="matSelectionFormField uk-width-1-1">
<mat-label>Select content type to share</mat-label> <mat-label>Select content type to share</mat-label>
<mat-select [(value)]="share_research_results_type" <mat-select #matSelect modal-select [matSelect]="matSelect"
[(value)]="share_research_results_type"
[disableOptionCentering]="true" [disableOptionCentering]="true"
panelClass="entitiesSelectionPanel" panelClass="entitiesSelectionPanel"
class="matSelection"> class="matSelection">
@ -687,8 +694,9 @@
</span> </span>
<span class="uk-margin-small-left">Download report</span> <span class="uk-margin-small-left">Download report</span>
</a> </a>
<modal-alert #downloadReportModal> <modal-alert #downloadReportModal
<div class="app-box uk-padding-small uk-margin-small-left uk-margin-small-right"> [classTitle]="'landing-modal-header uk-padding-small'" [classBody]="'uk-padding-remove landing-modal'">
<div class="uk-padding-small uk-margin-small-left uk-margin-small-right">
<div class="uk-padding-small uk-padding-remove-vertical"> <div class="uk-padding-small uk-padding-remove-vertical">
<mat-form-field class="matSelectionFormField uk-width-1-1"> <mat-form-field class="matSelectionFormField uk-width-1-1">
<mat-label>Select content type report to download</mat-label> <mat-label>Select content type report to download</mat-label>
@ -697,6 +705,7 @@
fetchDatasets.searchUtils.totalResults > 0 || fetchDatasets.searchUtils.totalResults > 0 ||
fetchSoftware.searchUtils.totalResults > 0 || fetchSoftware.searchUtils.totalResults > 0 ||
fetchOrps.searchUtils.totalResults > 0)" fetchOrps.searchUtils.totalResults > 0)"
#matSelect modal-select [matSelect]="matSelect"
[(value)]="download_research_results_type" [(value)]="download_research_results_type"
[disableOptionCentering]="true" [disableOptionCentering]="true"
panelClass="entitiesSelectionPanel" panelClass="entitiesSelectionPanel"
@ -873,9 +882,9 @@
</ng-container> </ng-container>
</div> </div>
<div class="uk-width-1-3 uk-padding right-column"> <!-- <div class="uk-width-1-3 uk-padding right-column">-->
<div>test publications</div> <!-- <div>test publications</div>-->
</div> <!-- </div>-->
</div> </div>
<!-- <ng-container *ngTemplateOutlet="tab_content; context: {--> <!-- <ng-container *ngTemplateOutlet="tab_content; context: {-->
@ -893,9 +902,9 @@
</ng-container> </ng-container>
</div> </div>
<div class="uk-width-1-3 uk-padding right-column"> <!-- <div class="uk-width-1-3 uk-padding right-column">-->
<div>test research data</div> <!-- <div>test research data</div>-->
</div> <!-- </div>-->
</div> </div>
</my-tab> </my-tab>
<my-tab *ngIf="fetchSoftware.searchUtils.totalResults > 0" <my-tab *ngIf="fetchSoftware.searchUtils.totalResults > 0"
@ -908,9 +917,9 @@
</ng-container> </ng-container>
</div> </div>
<div class="uk-width-1-3 uk-padding right-column"> <!-- <div class="uk-width-1-3 uk-padding right-column">-->
<div>test software</div> <!-- <div>test software</div>-->
</div> <!-- </div>-->
</div> </div>
</my-tab> </my-tab>
<my-tab *ngIf="fetchOrps.searchUtils.totalResults > 0" <my-tab *ngIf="fetchOrps.searchUtils.totalResults > 0"
@ -923,9 +932,9 @@
</ng-container> </ng-container>
</div> </div>
<div class="uk-width-1-3 uk-padding right-column"> <!-- <div class="uk-width-1-3 uk-padding right-column">-->
<div>test other research products</div> <!-- <div>test other research products</div>-->
</div> <!-- </div>-->
</div> </div>
</my-tab> </my-tab>
<my-tab *ngIf="(fetchPublications.searchUtils.totalResults > 0 || fetchDatasets.searchUtils.totalResults > 0 <my-tab *ngIf="(fetchPublications.searchUtils.totalResults > 0 || fetchDatasets.searchUtils.totalResults > 0

12
landingPages/project/project.component.ts
View File

@ -96,7 +96,7 @@ export class ProjectComponent {
public fetchDatasets: FetchResearchResults; public fetchDatasets: FetchResearchResults;
public fetchSoftware: FetchResearchResults; public fetchSoftware: FetchResearchResults;
public fetchOrps: FetchResearchResults; public fetchOrps: FetchResearchResults;
public searchNuumber: number = 5; public searchNumber: number = 5;
public routerHelper: RouterHelper = new RouterHelper(); public routerHelper: RouterHelper = new RouterHelper();
public errorCodes: ErrorCodes = new ErrorCodes(); public errorCodes: ErrorCodes = new ErrorCodes();
@ -283,23 +283,23 @@ export class ProjectComponent {
} }
private searchPublications() { private searchPublications() {
this.fetchPublications.getResultsForEntity("publication", "project", this.projectId, 1, this.searchNuumber, this.properties); this.fetchPublications.getResultsForEntity("publication", "project", this.projectId, 1, this.searchNumber, this.properties);
this.reloadPublications = false; this.reloadPublications = false;
} }
private searchDatasets() { private searchDatasets() {
this.fetchDatasets.getResultsForEntity("dataset", "project", this.projectId, 1, this.searchNuumber, this.properties); this.fetchDatasets.getResultsForEntity("dataset", "project", this.projectId, 1, this.searchNumber, this.properties);
this.reloadDatasets = false; this.reloadDatasets = false;
//this.activeTab = "Research Data"; //this.activeTab = "Research Data";
} }
private searchSoftware() { private searchSoftware() {
this.fetchSoftware.getResultsForEntity("software", "project", this.projectId, 1, this.searchNuumber, this.properties); this.fetchSoftware.getResultsForEntity("software", "project", this.projectId, 1, this.searchNumber, this.properties);
this.reloadSoftware = false; this.reloadSoftware = false;
} }
private searchOrps() { private searchOrps() {
this.fetchOrps.getResultsForEntity("other", "project", this.projectId, 1, this.searchNuumber, this.properties); this.fetchOrps.getResultsForEntity("other", "project", this.projectId, 1, this.searchNumber, this.properties);
this.reloadOrps = false; this.reloadOrps = false;
} }
@ -481,6 +481,7 @@ export class ProjectComponent {
this.linkProjectModal.cancelButton = false; this.linkProjectModal.cancelButton = false;
this.linkProjectModal.okButton = false; this.linkProjectModal.okButton = false;
this.linkProjectModal.alertTitle = "Link this project to"; this.linkProjectModal.alertTitle = "Link this project to";
//this.linkProjectModal.alertHeader = false;
this.linkProjectModal.open(); this.linkProjectModal.open();
} }
@ -684,7 +685,6 @@ export class ProjectComponent {
this.statsClicked = true; this.statsClicked = true;
} }
} }
console.log(activeTabId);
} }
private updateDescription(description: string) { private updateDescription(description: string) {

3
landingPages/project/project.module.ts
View File

@ -30,6 +30,7 @@ import {AltMetricsModule} from "../../utils/altmetrics.module";
import {TabsModule} from "../../utils/tabs/tabs.module"; import {TabsModule} from "../../utils/tabs/tabs.module";
import {SearchResultsModule} from "../../searchPages/searchUtils/searchResults.module"; import {SearchResultsModule} from "../../searchPages/searchUtils/searchResults.module";
import {ResultPreviewModule} from "../../utils/result-preview/result-preview.module"; import {ResultPreviewModule} from "../../utils/result-preview/result-preview.module";
import {ModalSelectModule} from "../../utils/modal-select/modal-select.module";
@NgModule({ @NgModule({
imports: [ imports: [
@ -39,7 +40,7 @@ import {ResultPreviewModule} from "../../utils/result-preview/result-preview.mod
SearchResearchResultsServiceModule, ProjectServiceModule, SearchResearchResultsServiceModule, ProjectServiceModule,
Schema2jsonldModule, SEOServiceModule, HelperModule, Schema2jsonldModule, SEOServiceModule, HelperModule,
LandingHeaderModule, MatSelectModule, FeedbackModule, AltMetricsModule, LandingHeaderModule, MatSelectModule, FeedbackModule, AltMetricsModule,
TabsModule, ResultPreviewModule TabsModule, ResultPreviewModule, ModalSelectModule
], ],
declarations: [ declarations: [
ProjectComponent ProjectComponent

3
utils/modal/alert.ts
View File

@ -9,7 +9,7 @@ declare var UIkit: any;
id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="uk-modal-dialog uk-modal-body uk-animation-slide-bottom-small uk-margin-medium-bottom uk-text-left" <div class="uk-modal-dialog uk-modal-body uk-animation-slide-bottom-small uk-margin-medium-bottom uk-text-left"
[ngClass]="classBody" role=""> [ngClass]="classBody" role="">
<div class="uk-modal-title" [hidden]=!alertHeader> <div [ngClass]="classTitle" class="uk-modal-title" [hidden]=!alertHeader>
<button class="uk-modal-close-default uk-float-right" (click)='cancel()' uk-close></button> <button class="uk-modal-close-default uk-float-right" (click)='cancel()' uk-close></button>
<h4 class="modal-title" id="myModalLabel">{{alertTitle}}</h4> <h4 class="modal-title" id="myModalLabel">{{alertTitle}}</h4>
</div> </div>
@ -61,6 +61,7 @@ declare var UIkit: any;
* API to an open alert window. * API to an open alert window.
*/ */
export class AlertModal { export class AlertModal {
@Input() classTitle: string = "";
@Input() classBody: string = ""; @Input() classBody: string = "";
/** /**
* Caption for the title. * Caption for the title.

3
utils/tabs/tabs.component.ts
View File

@ -60,7 +60,7 @@ export class TabsComponent implements AfterContentInit {
ngAfterContentInit() { ngAfterContentInit() {
// get all active tabs // get all active tabs
let activeTabs = this.tabs.filter((tab)=>tab.active); let activeTabs = this.tabs.filter((tab)=>tab.active);
console.log("ACTIVE TABS: "+activeTabs.length);
// if there is no active tab set, activate the first // if there is no active tab set, activate the first
if(activeTabs.length === 0) { if(activeTabs.length === 0) {
this.selectTab(this.tabs.first); this.selectTab(this.tabs.first);
@ -73,7 +73,6 @@ console.log("ACTIVE TABS: "+activeTabs.length);
// activate the tab the user has clicked on. // activate the tab the user has clicked on.
tab.active = true; tab.active = true;
console.log("ACTIVE TAB SET TO: "+tab.title);
this.selectedActiveTab.emit(tab.tabId); this.selectedActiveTab.emit(tab.tabId);
} }