[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

src/app/home/home.component.css

@@ -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;
+  }
+}

src/app/home/home.component.html

@@ -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 class="uk-active" uk-filter-control (click)="type = null">All</li>
-        <li uk-filter-control="[data-type='funder']">Funders</li>
+        <li uk-filter-control="[data-type='funder']" (click)="type = 'funder'">Funders</li>
-        <li uk-filter-control="[data-type='ri']">Research Initiatives</li>
+        <li uk-filter-control="[data-type='ri']" (click)="type = 'ri'">Research Initiatives</li>
-        <!--<li uk-filter-control="[data-type='project']">Projects</li>-->
+        <!--<li uk-filter-control="[data-type='project']" (click)="type = 'project'">Projects</li>-->
-        <li uk-filter-control="[data-type='organization']">Organizations</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">
-        <div class="header" [ngClass]="stakeholder.size">
+        <a *ngIf="directLink" [href]="getStakeholderPageUrl(stakeholder)" target="_blank">
-          <img class="uk-margin-auto" [src]="'http://dl170.madgik.di.uoa.gr/monitor/dashboard/assets/ec.png'">
+          <div class="header" [ngClass]="stakeholder.size">
-        </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>
+        </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>

src/app/home/home.component.ts

@@ -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();
@@ -176,7 +184,7 @@ export class HomeComponent {
     this.clearTimeouts();
     this.state = state;
     this.timeouts.push(setTimeout(() => {
-      if(this.state < 3) {
+      if (this.state < 3) {
         this.startCaptainsAnimation(this.state + 1);
       } else {
         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 => {
@@ -303,16 +320,41 @@ export class HomeComponent {
   
   private setSizeOfStakeholder(index) {
     let mod = index % 9;
-    if(mod === 0 || mod === 4 || mod === 8) {
+    if (mod === 0 || mod === 4 || mod === 8) {
       this.stakeholders[index].size = 'large';
       console.log(this.stakeholders[index]);
-    } else if(mod === 1 || mod === 5 || mod === 6) {
+    } else if (mod === 1 || mod === 5 || mod === 6) {
       this.stakeholders[index].size = 'small';
     } else {
       this.stakeholders[index].size = 'medium';
     }
   }
   
+  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 {

src/app/home/home.module.ts

@@ -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