[Monitor | Trunk]: Add mobile view for stakeholders and message if there are no stakeholder of a type.

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor@58869 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
Konstantinos Triantafyllou 2020-06-09 09:19:25 +00:00
parent b73abe4541
commit 231c4ae4db
4 changed files with 177 additions and 33 deletions

View File

@ -163,46 +163,62 @@
width: 100%;
}
.stakeholder-section ul {
.stakeholder-section .tabs > ul {
list-style: none;
display: flex;
flex-wrap: wrap;
flex-wrap: nowrap;
margin-bottom: 0;
font-size: 16px;
overflow-x: auto;
}
.stakeholder-section ul li {
.stakeholder-section .tabs > ul > li {
display: inline-block;
color: #707070;
padding: 5px 15px;
cursor: pointer;
margin-left: 25px;
user-select: none;
white-space: nowrap;
margin-left: 25px;
}
.stakeholder-section ul li:hover {
.stakeholder-section .tabs > ul > li:hover {
color: #1a1a1a;
}
.stakeholder-section ul li.uk-active {
color: #1a1a1a;
border: #E3E3E3 solid 1px;
border-bottom: #F9F9F9 solid 1px;;
}
.stakeholder-section .stakeholders {
border-top: #E3E3E3 solid 1px;
margin-top: -1px;
padding-top: 20px;
min-height: 300px;
}
@media (max-width: 639px) {
.stakeholder-section .tabs > ul > li:nth-child(1) {
margin-left: 0;
}
.stakeholder-section .tabs > ul > li.uk-active {
color: #1a1a1a;
border-bottom: var(--portal-main-color) solid 2px;
}
.stakeholders.uk-grid-small > * {
padding-left: 2px;
}
.stakeholders.uk-grid-small > .uk-grid-margin {
margin-top: 2px;
}
}
.stakeholder-section .stakeholders .header {
background-color: #00a0de;
position: relative;
height: 150px;
}
.stakeholder-section .stakeholders .header img{
.stakeholder-section .stakeholders .header > img {
max-width: 50%;
max-height: 50%;
position: absolute;
@ -211,6 +227,20 @@
transform: translate(-50%, -50%);
}
.stakeholder-section .stakeholders .header > div {
width: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.stakeholder-section .stakeholders .header > div > img {
max-width: 50%;
max-height: 50%;
}
.stakeholder-section .stakeholders .header.small {
height: 150px;
}
@ -222,3 +252,17 @@
.stakeholder-section .stakeholders .header.large {
height: 300px;
}
@media (min-width: 640px) {
.stakeholder-section .tabs > ul > li.uk-active {
color: #1a1a1a;
border: #E3E3E3 solid 1px;
border-bottom: #F9F9F9 solid 1px;
}
.stakeholder-section .stakeholders {
border-top: #E3E3E3 solid 1px;
margin-top: -1px;
}
}

View File

@ -53,7 +53,8 @@
</div>
</div>
</div>
<div class="uk-section uk-section-large uk-container uk-container-large uk-margin-large-top boat-section uk-text-large uk-text-justify uk-position-relative">
<div
class="uk-section uk-section-large uk-container uk-container-large uk-margin-large-top boat-section uk-text-large uk-text-justify uk-position-relative">
<div class="uk-grid uk-grid-match uk-margin-left uk-margin-right uk-child-width-1-2@m" uk-grid>
<div class="boat uk-hidden@m"></div>
<div class="boat uk-visible@l"></div>
@ -128,25 +129,77 @@
</div>
</div>
</div>
<div *ngIf="stakeholders && stakeholders.length > 0"
<div *ngIf="loading && stakeholders.length === 0" class="uk-container uk-container-large uk-margin-large-bottom">
<errorMessages [status]="[status]" [type]="'stakeholders'"></errorMessages>
</div>
<div *ngIf="!loading && stakeholders && stakeholders.length > 0"
class="uk-section uk-section-large uk-margin-right uk-margin-left uk-margin-large-top stakeholder-section">
<div class="uk-container uk-visible@m" uk-filter="target: .stakeholders">
<div class="uk-container uk-visible@s" uk-filter="target: .stakeholders">
<div class="tabs">
<ul>
<li class="uk-active" uk-filter-control>All</li>
<li uk-filter-control="[data-type='funder']">Funders</li>
<li uk-filter-control="[data-type='ri']">Research Initiatives</li>
<!--<li uk-filter-control="[data-type='project']">Projects</li>-->
<li uk-filter-control="[data-type='organization']">Organizations</li>
<li class="uk-active" uk-filter-control (click)="type = null">All</li>
<li uk-filter-control="[data-type='funder']" (click)="type = 'funder'">Funders</li>
<li uk-filter-control="[data-type='ri']" (click)="type = 'ri'">Research Initiatives</li>
<!--<li uk-filter-control="[data-type='project']" (click)="type = 'project'">Projects</li>-->
<li uk-filter-control="[data-type='organization']" (click)="type = 'organization'">Organizations</li>
</ul>
</div>
<div class="stakeholders uk-child-width-1-2 uk-child-width-1-3@m uk-grid uk-flex-top uk-flex-wrap-top"
uk-grid="masonry: true">
<div *ngFor="let stakeholder of stakeholders" [attr.data-type]="stakeholder.type" class="uk-margin-medium-bottom">
<a *ngIf="directLink" [href]="getStakeholderPageUrl(stakeholder)" target="_blank">
<div class="header" [ngClass]="stakeholder.size">
<img class="uk-margin-auto" [src]="'http://dl170.madgik.di.uoa.gr/monitor/dashboard/assets/ec.png'">
</div>
</a>
<a *ngIf="!directLink" (click)="confirmModalOpen(stakeholder)">
<div class="header" [ngClass]="stakeholder.size">
<img class="uk-margin-auto" [src]="'http://dl170.madgik.di.uoa.gr/monitor/dashboard/assets/ec.png'">
</div>
</a>
<a *ngIf="directLink" [href]="getStakeholderPageUrl(stakeholder)" target="_blank">
<h6 class="uk-margin-top uk-text-bold">{{stakeholder.name}}</h6>
</a>
<a *ngIf="!directLink" (click)="confirmModalOpen(stakeholder)">
<h6 class="uk-margin-top uk-text-bold">{{stakeholder.name}}</h6>
</a>
</div>
<div *ngIf="stakeholdersNumber === 0" [attr.data-type]="type" class="uk-text-center uk-text-large uk-width-1-1 uk-margin-large-top">
Nothing here yet.
</div>
</div>
</div>
<div class="uk-container uk-hidden@s" uk-filter="target: .stakeholders">
<div class="tabs">
<ul>
<li class="uk-active" uk-filter-control (click)="type = null">All</li>
<li uk-filter-control="[data-type='funder']" (click)="type = 'funder'">Funders</li>
<li uk-filter-control="[data-type='ri']" (click)="type = 'ri'">Research Initiatives</li>
<!--<li uk-filter-control="[data-type='project']" (click)="type = 'project'">Projects</li>-->
<li uk-filter-control="[data-type='organization']" (click)="type = 'organization'">Organizations</li>
</ul>
</div>
<div class="stakeholders uk-child-width-1-2 uk-grid uk-grid-small" uk-grid="">
<div *ngFor="let stakeholder of stakeholders" [attr.data-type]="stakeholder.type">
<a *ngIf="directLink" [href]="getStakeholderPageUrl(stakeholder)" target="_blank">
<div class="header">
<div>
<img class="uk-margin-auto" [src]="'http://dl170.madgik.di.uoa.gr/monitor/dashboard/assets/ec.png'">
<h6 class="uk-margin-top uk-text-bold">{{stakeholder.name}}</h6>
</div>
</div>
</a>
<a *ngIf="!directLink" (click)="confirmModalOpen(stakeholder)">
<div class="header">
<div>
<img class="uk-margin-auto" [src]="'http://dl170.madgik.di.uoa.gr/monitor/dashboard/assets/ec.png'">
<h6 class="uk-margin-top uk-text-bold">{{stakeholder.name}}</h6>
</div>
</div>
</a>
</div>
<div *ngIf="stakeholdersNumber === 0" [attr.data-type]="type" class="uk-text-center uk-text-large uk-width-1-1 uk-margin-large-top">
Nothing here yet.
</div>
</div>
</div>
@ -172,3 +225,8 @@
<other-portals [properties]="properties"></other-portals>
</div>
</div>
<modal-alert #AlertModal (alertOutput)="goToPage($event)">
<div class="uk-text-left">
You will be navigated to a new tab. Are you sure that you want to proceed?
</div>
</modal-alert>

View File

@ -14,8 +14,9 @@ import {NumberUtils} from "../openaireLibrary/utils/number-utils.class";
import {SearchResearchResultsService} from "../openaireLibrary/services/searchResearchResults.service";
import {animate, state, style, transition, trigger} from "@angular/animations";
import {StakeholderService} from "../openaireLibrary/monitor/services/stakeholder.service";
import {Stakeholder} from "../openaireLibrary/monitor/entities/stakeholder";
import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class";
import {LocalStorageService} from "../openaireLibrary/services/localStorage.service";
import {Stakeholder, StakeholderInfo} from "../openaireLibrary/monitor/entities/stakeholder";
@Component({
selector: 'home',
@ -93,6 +94,7 @@ export class HomeComponent {
public pageTitle = "OpenAIRE | Monitor";
public stakeholders: any[] = [];
public selected: Stakeholder = null;
public pageContents = null;
public divContents = null;
// Message variables
@ -104,7 +106,7 @@ export class HomeComponent {
properties: EnvProperties;
public keyword: string = "";
public type: string = "all";
public type: string = null;
public publicationsSize: any = null;
public datasetsSize: any = null;
@ -117,6 +119,8 @@ export class HomeComponent {
public observer: IntersectionObserver;
public captains: boolean = false;
@ViewChild('ref') ref: ElementRef;
@ViewChild('AlertModal') modal;
private directLink: boolean = true;
constructor(
private route: ActivatedRoute,
@ -125,6 +129,7 @@ export class HomeComponent {
private _title: Title,
private _piwikService: PiwikService,
private _stakeholderService: StakeholderService,
private localStorageService: LocalStorageService,
private helper: HelperService,
private seoService: SEOService,
private _refineFieldResultsService: RefineFieldResultsService, private _searchResearchResultsService: SearchResearchResultsService) {
@ -158,6 +163,9 @@ export class HomeComponent {
// this.createGifs();
//this.getDivContents();
this.getPageContents();
this.localStorageService.get().subscribe(value => {
this.directLink = value;
})
});
this.initAnimations();
this.startCaptainsAnimation();
@ -202,6 +210,15 @@ export class HomeComponent {
})
}
public get stakeholdersNumber(): number {
if(this.type === null) {
return this.stakeholders.length;
} else {
console.log(this.stakeholders.filter(stakeholder => stakeholder.type === this.type).length);
return this.stakeholders.filter(stakeholder => stakeholder.type === this.type).length;
}
}
getNumbers() {
this.numberSubs.push(this._refineFieldResultsService.getRefineFieldsResultsByEntityName(["funder"], "project", this.properties).subscribe(
data => {
@ -313,6 +330,31 @@ export class HomeComponent {
}
}
public confirmModalOpen(result: Stakeholder) {
this.selected = result;
this.modal.cancelButton = true;
this.modal.okButton = true;
this.modal.alertTitle = 'You are going to visit ' + result.name + ' Monitor Dashboard';
this.modal.alertMessage = false;
this.modal.okButtonLeft = false;
this.modal.okButtonText = 'Yes';
this.modal.cancelButtonText = 'No';
this.modal.choice = true;
this.modal.open();
}
public getStakeholderPageUrl(stakeholder: Stakeholder) {
return this.properties.baseLink + '/dashboard/' + stakeholder.alias;
}
public goToPage(data: any) {
if (data.value == true) {
let url = this.getStakeholderPageUrl(this.selected);
this.localStorageService.setCommunityDirectLink(data.choice);
window.open(url, '_blank');
}
}
public quote(param: string): string {
return StringUtils.quote(param);
}
@ -322,7 +364,6 @@ export class HomeComponent {
this.piwiksub.unsubscribe();
}
this.clearTimeouts();
this.observer.disconnect();
}
private handleError(message: string, error): number {

View File

@ -17,12 +17,13 @@ import {SEOServiceModule} from "../openaireLibrary/sharedComponents/SEO/SEOServi
import {HomeRoutingModule} from "./home-routing.module";
import {RefineFieldResultsServiceModule} from "../openaireLibrary/services/refineFieldResultsService.module";
import {SearchResearchResultsServiceModule} from "../openaireLibrary/services/searchResearchResultsService.module";
import {AlertModalModule} from "../openaireLibrary/utils/modal/alertModal.module";
@NgModule({
imports: [
CommonModule, FormsModule, RouterModule, ErrorMessagesModule, OtherPortalsModule,
HelperModule, Schema2jsonldModule, SEOServiceModule, HomeRoutingModule, SearchResearchResultsServiceModule,
RefineFieldResultsServiceModule
RefineFieldResultsServiceModule, AlertModalModule
],
declarations: [
HomeComponent