Add projectUpdate Alert

src/app/app.component.html

@@ -24,6 +24,24 @@
       </div>
     </ng-container>
   </div>
+  <div *ngIf="projectUpdate && !isFrontPage" class="project-update">
+    <div *ngIf="projectUpdate === 'danger'" class="uk-alert uk-alert-danger" uk-alert>
+      <a class="uk-alert-close" uk-close></a>
+      <div class="uk-text-bold uk-text-small">Projects Status: Urgent Update Needed</div>
+      <div class="uk-margin-xsmall-top uk-text-xsmall">
+        The latest-starting project in your portfolio in the OpenAIRE Graph began more than a year ago. Please urgently follow these instructions
+        <a href="https://www.openaire.eu/funders-how-to-join-guide" class="custom-external" target="_blank">here</a> to update your project list.
+      </div>
+    </div>
+    <div *ngIf="projectUpdate === 'warning'" class="uk-alert uk-alert-warning" uk-alert>
+      <a class="uk-alert-close" uk-close></a>
+      <div class="uk-text-bold uk-text-small">Projects Status: Update Needed</div>
+      <div class="uk-margin-xsmall-top uk-text-xsmall">
+        The latest-starting project in your portfolio in the OpenAIRE Graph began 6 to 12 months ago. To maintain current project data, please follow the instructions
+        <a href="https://www.openaire.eu/funders-how-to-join-guide" class="custom-external" target="_blank">here</a>.
+      </div>
+    </div>
+  </div>
   <div *ngIf="isHidden" class="private-data uk-light dark">
     <div class="uk-section uk-section-small uk-container uk-container-small uk-text-center">
       <img src="assets/common-assets/logo-services/monitor/inverted.svg" style="height: 80px;">

src/app/app.component.less

@@ -0,0 +1,12 @@
+@import (reference) "~src/assets/openaire-theme/less/_import-variables";
+
+.project-update {
+  z-index: @global-z-index;
+  position: fixed;
+  bottom: 0;
+  left: 50%;
+  right: 50%;
+  transform: translate(-50%, 0);
+  width: 500px;
+  max-width: 60%;
+}

src/app/app.component.ts

@@ -30,7 +30,8 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html'
+  templateUrl: './app.component.html',
+  styleUrls: ['app.component.less']
 })
 export class AppComponent implements OnInit, OnDestroy {
   properties: EnvProperties = properties;
@@ -62,7 +63,6 @@ export class AppComponent implements OnInit, OnDestroy {
     badge: true,
     menuPosition: "center"
   };
-  
   userMenuItems: MenuItem[] = [];
   adminMenuItems: MenuItem[] = [];
   stakeholder: Stakeholder = null;
@@ -71,6 +71,7 @@ export class AppComponent implements OnInit, OnDestroy {
   loading: boolean = true;
   paramsResolved: boolean = false;
   innerWidth;
+  projectUpdate: 'danger' | 'warning';
   paramsSubscription: Subscription;
   private subscriptions: any[] = [];
   
@@ -189,6 +190,9 @@ export class AppComponent implements OnInit, OnDestroy {
           }
         }
       });
+      this.subscriptions.push(this.stakeholderService.getStakeholderAsObservable().subscribe(stakeholder => {
+        this.setProjectUpdate(stakeholder);
+      }))
     }));
   }
   
@@ -236,6 +240,22 @@ export class AppComponent implements OnInit, OnDestroy {
     }));
   }
 
+  public setProjectUpdate(stakeholder: Stakeholder) {
+    if(stakeholder?.projectUpdateDate) {
+      let today = new Date();
+      let date = new Date(stakeholder.projectUpdateDate);
+      let months = (today.getFullYear() - date.getFullYear())*12 + (today.getMonth() - date.getMonth());
+      console.log(months)
+      if(months > 12) {
+        this.projectUpdate = 'danger';
+      } else if (months > 6 && months < 12) {
+        this.projectUpdate = 'warning';
+      } else {
+        this.projectUpdate = null;
+      }
+    }
+  }
+
   public ngOnDestroy() {
     if(this.paramsSubscription) {
       this.paramsSubscription.unsubscribe();