feat(homepage): #1630 added resolvers for homepage tables

web/src/app/core/resolvers/application-stats.resolver.ts

@@ -0,0 +1,36 @@
+// Core modules
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, Resolve } from '@angular/router';
+
+// Third party modules
+import { Observable } from 'rxjs';
+import { take } from 'rxjs/operators';
+
+// Dashboard hub model and services
+import { StatsModel } from '@shared/models/index.model';
+import { ApplicationService } from '../services/application.service';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ApplicationStatsResolver implements Resolve<StatsModel> {
+
+  /**
+   * Life cycle method
+   * @param applicationService ApplicationService
+   */
+  constructor(
+    private applicationService: ApplicationService
+  ) { }
+
+  /**
+   * Find all project data before showing projects page
+   * @param route ActivatedRouteSnapshot
+   */
+  resolve(route: ActivatedRouteSnapshot): Observable<StatsModel> {
+    return this.applicationService.getApplicationStats()
+      .pipe(
+        take(1)
+      );
+  }
+}

web/src/app/core/resolvers/popular-projects.resolver.ts

@@ -0,0 +1,36 @@
+// Core modules
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, Resolve } from '@angular/router';
+
+// Third party modules
+import { Observable } from 'rxjs';
+import { take } from 'rxjs/operators';
+
+// Dashboard hub model and services
+import { ProjectService } from '@core/services/index.service';
+import { IProject } from '@shared/models/index.model';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class PopularProjectsResolver implements Resolve<IProject[]> {
+
+  /**
+   * Life cycle method
+   * @param projectService ProjectService
+   */
+  constructor(
+    private projectService: ProjectService
+  ) { }
+
+  /**
+   * Find all project data before showing projects page
+   * @param route ActivatedRouteSnapshot
+   */
+  resolve(route: ActivatedRouteSnapshot): Observable<IProject[]> {
+    return this.projectService.getPopularProjects()
+      .pipe(
+        take(1)
+      );
+  }
+}

web/src/app/core/resolvers/user-stats.resolver.ts

@@ -0,0 +1,36 @@
+// Core modules
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, Resolve } from '@angular/router';
+
+// Third party modules
+import { Observable } from 'rxjs';
+import { take } from 'rxjs/operators';
+
+// Dashboard hub model and services
+import { UserService } from '@core/services/index.service';
+import { UserStatsModel } from '@shared/models/index.model';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class UserStatsResolver implements Resolve<UserStatsModel[]> {
+
+  /**
+   * Life cycle method
+   * @param userService userService
+   */
+  constructor(
+    private userService: UserService
+  ) { }
+
+  /**
+   * Find all project data before showing projects page
+   * @param route ActivatedRouteSnapshot
+   */
+  resolve(route: ActivatedRouteSnapshot): Observable<UserStatsModel[]> {
+    return this.userService.findAllUserStats()
+      .pipe(
+        take(1)
+      );
+  }
+}

web/src/app/core/services/index.service.ts

@@ -1,5 +1,6 @@
 export * from './activity.service';
 export * from './authentication.service';
+export * from './application.service';
 export * from './monitor.service';
 export * from './ping.service';
 export * from './project.service';

web/src/app/main/components/homepage/homepage.component.html

@@ -2,7 +2,7 @@
   <div fxLayout="row" fxLayoutAlign="start center">
     <div class="home__title">Homepage</div>
   </div>
-  <dashboard-stats></dashboard-stats>
+  <dashboard-stats [stats]="applicationStats"></dashboard-stats>
   <div fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign.lt-lg="space-between scretch" fxLayoutAlign="space-between start">
     <mat-card class="home__users-card" fxFlex="49">
       <mat-card-header>

web/src/app/main/components/homepage/homepage.component.ts

@@ -1,14 +1,14 @@
 // Core modules
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { Subscription } from 'rxjs';
 
 // Breakpoints components
 import { Breakpoints, BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
 
 // Dashboard hub model and services
-import { ProjectService, UserService } from '@core/services/index.service';
-import { IProject, ProjectModel, UserStatsModel } from '@shared/models/index.model';
+import { ApplicationService, ProjectService, UserService } from '@core/services/index.service';
+import { IProject, ProjectModel, StatsModel, UserStatsModel } from '@shared/models/index.model';
+import { Subscription } from 'rxjs';
 
 /**
  * Homepage component
@@ -22,41 +22,60 @@ export class HomepageComponent implements OnInit, OnDestroy {
 
   private userSubscription: Subscription;
   private projectSubscription: Subscription;
+  private popularProjectSubscription: Subscription;
+  private applicationStatsSubscription: Subscription;
+
   public projects: IProject[] = [];
   public popularProjects: IProject[] = [];
   public users: UserStatsModel[] = [];
   public title: string = 'Public Projects';
   public isSmallScreen: boolean;
   public activeuserTable: string[] = ['avatar', 'title', 'description'];
   public projectTable: string[] = ['icon', 'title', 'description'];
+  public applicationStats: StatsModel;
 
   /**
    * Life cycle method
-   * @param projectService ProjectService
-   * @param userService UserService
+   * @param route ActivatedRoute
    * @param breakpointObserver BreakpointObserver
    */
   constructor(
     private route: ActivatedRoute,
-    private projectService: ProjectService,
+    private breakpointObserver: BreakpointObserver,
     private userService: UserService,
-    private breakpointObserver: BreakpointObserver
+    private projectService: ProjectService,
+    private applicationService: ApplicationService
   ) { }
 
   /**
    * Life cycle init method. Initialization of all parameteres
    */
   ngOnInit(): void {
-    this.projects = this.route.snapshot.data.projects;
+    this.route.data.subscribe((data: {
+      projects: ProjectModel[],
+      popularProjects: ProjectModel[],
+      userStats: UserStatsModel[],
+      applicationStats: StatsModel
+    }) => {
+      this.projects = data.projects;
+      this.popularProjects = data.popularProjects;
+      this.users = data.userStats;
+      this.applicationStats = data.applicationStats;
+    });
+
     this.userSubscription = this.userService
       .findAllUserStats()
       .subscribe((users: UserStatsModel[]) => this.users = users);
-    this.projectSubscription = this.projectService
+    this.popularProjectSubscription = this.projectService
       .getPopularProjects()
       .subscribe((popularProjects: IProject[]) => this.popularProjects = popularProjects);
-    this.projectService
+    this.projectSubscription = this.projectService
       .findPublicProjects()
       .subscribe((projects: IProject[]) => this.projects = projects);
+    this.applicationStatsSubscription = this.applicationService
+    .getApplicationStats()
+    .subscribe((stats: StatsModel) => this.applicationStats = stats);
+
     this.breakpointObserver
       .observe([Breakpoints.XSmall])
       .subscribe((state: BreakpointState) => {
@@ -78,6 +97,8 @@ export class HomepageComponent implements OnInit, OnDestroy {
   ngOnDestroy(): void {
     this.userSubscription.unsubscribe();
     this.projectSubscription.unsubscribe();
+    this.popularProjectSubscription.unsubscribe();
+    this.applicationStatsSubscription.unsubscribe();
   }
 
   /**

web/src/app/main/components/stats/stats.component.ts

@@ -1,8 +1,7 @@
 // Core modules
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
 
 // Application model and services
-import { ApplicationService } from '@core/services/application.service';
 import { StatsModel } from '@shared/models/stats.model';
 
 /**
@@ -13,20 +12,14 @@ import { StatsModel } from '@shared/models/stats.model';
   templateUrl: './stats.component.html',
   styleUrls: ['./stats.component.scss'],
 })
-export class StatsComponent implements OnInit {
+export class StatsComponent implements OnChanges {
 
-  public stats: StatsModel;
-
-  /**
-   * Life cycle method
-   * @param applicationService application service
-   */
-  constructor(private applicationService: ApplicationService) { }
+  @Input() stats: StatsModel;
 
   /**
    * Life cycle init method
    */
-  ngOnInit(): void {
-    this.applicationService.getApplicationStats().subscribe((stats: StatsModel) => this.stats = stats);
+  ngOnChanges(simpleChanges: SimpleChanges): void {
+    this.stats = simpleChanges.stats.currentValue;
   }
 }

web/src/app/main/main-routing.module.ts

@@ -12,8 +12,11 @@ import { MainComponent } from './main.component';
 
 // Dashboard hub authentication guards
 import { AuthGuard } from '@core/guards/authentication.guard';
+import { ApplicationStatsResolver } from '@core/resolvers/application-stats.resolver';
 import { HelpResolver } from '@core/resolvers/help.resolver';
+import { PopularProjectsResolver } from '@core/resolvers/popular-projects.resolver';
 import { PublicProjectResolver } from '@core/resolvers/public-projects.resolver';
+import { UserStatsResolver } from '@core/resolvers/user-stats.resolver';
 import { FollowingComponent } from './components/following/following.component';
 import { HelpDetailComponent } from './components/help-detail/help-detail.component';
 
@@ -27,6 +30,9 @@ const routes: Routes = [
         component: HomepageComponent,
         resolve: {
           projects: PublicProjectResolver,
+          popularProjects: PopularProjectsResolver,
+          userStats: UserStatsResolver,
+          applicationStats: ApplicationStatsResolver,
         },
       },
       {