Project

General

Profile

« Previous | Next » 

Revision 57720

[Monitor Dashboard]: Add home, missed on previous commit

View differences:

modules/uoa-monitor-portal/trunk/monitor_dashboard/src/app/home/home.module.ts
1
import {NgModule} from "@angular/core";
2
import {HomeComponent} from "./home.component";
3
import {HomeRoutingModule} from "./home-routing.module";
4
import {FreeGuard} from "../openaireLibrary/login/freeGuard.guard";
5
import {PreviousRouteRecorder} from "../openaireLibrary/utils/piwik/previousRouteRecorder.guard";
6
import {CommonModule} from "@angular/common";
7
import {RouterModule} from "@angular/router";
8
import {InputModule} from "../library/sharedComponents/input/input.module";
9
import {LoadingModule} from "../library/sharedComponents/loading/loading.module";
10

  
11
@NgModule({
12
  declarations: [HomeComponent],
13
  imports: [
14
    HomeRoutingModule,
15
    CommonModule,
16
    RouterModule,
17
    InputModule,
18
    LoadingModule
19
  ],
20
  providers: [
21
    FreeGuard, PreviousRouteRecorder,
22
  ],
23
  exports: [HomeComponent]
24
})
25
export class HomeModule {
26

  
27
}
modules/uoa-monitor-portal/trunk/monitor_dashboard/src/app/home/home-routing.module.ts
1
import {NgModule} from '@angular/core';
2
import {RouterModule} from '@angular/router';
3
import {FreeGuard} from '../openaireLibrary/login/freeGuard.guard';
4
import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
5
import {HomeComponent} from "./home.component";
6

  
7
@NgModule({
8
  imports: [
9
    RouterModule.forChild([
10
      {
11
        path: '',
12
        component: HomeComponent,
13
        canActivate: [FreeGuard],
14
        canDeactivate: [PreviousRouteRecorder],
15
        data: {hasSidebar: false}
16
      }
17
    ])
18
  ]
19
})
20
export class HomeRoutingModule {
21
}
modules/uoa-monitor-portal/trunk/monitor_dashboard/src/app/home/home.component.html
1
<div id="page_content">
2
  <div class="uk-padding-small md-bg-white" uk-grid>
3
    <div *ngIf="filters" class="uk-width-2-3@m uk-width-1-1 uk-child-width-1-3@m uk-child-width-1-1" uk-grid>
4
      <div>
5
        <div dashboard-input [formInput]="filters.get('privacy')"
6
             type="select" [options]="[all].concat(indicatorUtils.isPublic)"
7
             label="Privacy"></div>
8
      </div>
9
      <div>
10
        <div dashboard-input [formInput]="filters.get('status')"
11
             type="select" [options]="[all].concat(indicatorUtils.isActive)"
12
             label="Status"></div>
13
      </div>
14
    </div>
15
    <div class="uk-width-expand@m uk-width-1-1 uk-flex uk-flex-middle uk-flex-right">
16
      <div class="uk-inline uk-width-medium">
17
        <span class="uk-position-center-right"><i class="material-icons">search</i></span>
18
        <div dashboard-input [formInput]="filters.get('keyword')" label="Locate Stakeholder"></div>
19
      </div>
20
      <div [class.uk-active]="grid" class="uk-margin-small-left">
21
        <a [routerLink]="" class="uk-icon-button" (click)="changeGrid(true)"><i
22
          class="material-icons">view_module</i></a>
23
      </div>
24
      <div [class.uk-active]="!grid" class="uk-margin-small-left">
25
        <a [routerLink]="" class="uk-icon-button" (click)="changeGrid(false)"><i class="material-icons">list</i></a>
26
      </div>
27
    </div>
28
  </div>
29
  <div id="page_content_inner">
30
    <h4 class="uk-text-bold main">Default Profiles</h4>
31
    <div [class.uk-child-width-1-4@m]="grid"
32
         [class.uk-child-width-1-3@s]="grid"
33
         [class.uk-child-width-1-1]="!grid"
34
         [class.max-width-large]="!grid"
35
         class="uk-grid-match uk-grid-small"
36
         uk-grid>
37
      <loading *ngIf="loading" [loading]="loading"></loading>
38
      <ng-template ngFor [ngForOf]="displayDefaultStakeholders" let-stakeholder let-i="index">
39
        <div *ngIf="stakeholder">
40
          <div class="md-card">
41
            <div class="md-card-toolbar">
42
              <div class="md-card-toolbar-actions" [class.uk-flex-middle]="!grid" [class.uk-flex]="!grid">
43
                <span *ngIf="!grid" class="uk-margin-medium-right uk-flex uk-flex-middle">
44
                  <i class="material-icons md-24 uk-margin-small-right">{{indicatorUtils.isPublicIcon.get(stakeholder.isPublic)}}</i>
45
                  {{(stakeholder.isPublic) ? 'Public' : 'Private'}}
46
                </span>
47
                <span *ngIf="!grid" class="uk-margin-medium-right uk-flex uk-flex-middle">
48
                  <i class="material-icons md-24 uk-margin-small-right"
49
                     [class.md-color-green-300]="stakeholder.isActive">{{indicatorUtils.isActiveIcon}}</i>
50
                  {{(stakeholder.isActive) ? 'Active' : 'Inactive'}}
51
                </span>
52
                <div class="md-card-dropdown uk-inline">
53
                  <i class="md-icon material-icons">more_vert</i>
54
                  <div uk-dropdown="mode: click; pos: bottom-right" class="uk-padding-remove-horizontal">
55
                    <ul class="uk-nav uk-dropdown-nav">
56
                      <li><a (click)="editIndicatorOpen(i)">Edit</a></li>
57
                      <li><a (click)="deleteIndicatorOpen(i, 'number')">Delete</a></li>
58
                    </ul>
59
                  </div>
60
                </div>
61
              </div>
62
              <div class="md-card-toolbar-heading-text">{{stakeholder.index_name}}</div>
63
            </div>
64
            <div *ngIf="grid" class="md-card-content">
65
              <div class="uk-flex uk-flex-center" uk-grid>
66
                <div class="uk-width-1-2 uk-text-center">
67
                  <i class="material-icons md-24">{{indicatorUtils.isPublicIcon.get(stakeholder.isPublic)}}</i>
68
                  <div>{{(stakeholder.isPublic) ? 'Public' : 'Private'}}</div>
69
                </div>
70
                <div class="uk-width-1-2 uk-text-center">
71
                  <i class="material-icons md-24"
72
                     [class.md-color-green-300]="stakeholder.isActive">{{indicatorUtils.isActiveIcon}}</i>
73
                  <div>{{(stakeholder.isActive) ? 'Active' : 'Inactive'}}</div>
74
                </div>
75
              </div>
76
            </div>
77
          </div>
78
        </div>
79
      </ng-template>
80
    </div>
81
    <h4 class="uk-text-bold">Stakeholders</h4>
82
    <div [class.uk-child-width-1-4@m]="grid"
83
         [class.uk-child-width-1-3@s]="grid"
84
         [class.uk-child-width-1-1]="!grid"
85
         [class.max-width-large]="!grid"
86
         class="uk-grid-match uk-grid-small"
87
         uk-grid>
88
      <loading *ngIf="loading" [loading]="loading"></loading>
89
      <ng-template ngFor [ngForOf]="displayStakeholders" let-stakeholder let-i="index">
90
        <a *ngIf="stakeholder" [routerLink]="stakeholder.alias">
91
          <div class="md-card">
92
            <div class="md-card-toolbar">
93
              <div class="md-card-toolbar-actions" [class.uk-flex-middle]="!grid" [class.uk-flex]="!grid">
94
                <span *ngIf="!grid" class="uk-margin-medium-right uk-flex uk-flex-middle">
95
                  <i class="material-icons md-24 uk-margin-small-right">{{indicatorUtils.isPublicIcon.get(stakeholder.isPublic)}}</i>
96
                  {{(stakeholder.isPublic) ? 'Public' : 'Private'}}
97
                </span>
98
                <span *ngIf="!grid" class="uk-margin-medium-right uk-flex uk-flex-middle">
99
                  <i class="material-icons md-24 uk-margin-small-right"
100
                     [class.md-color-green-300]="stakeholder.isActive">{{indicatorUtils.isActiveIcon}}</i>
101
                  {{(stakeholder.isActive) ? 'Active' : 'Inactive'}}
102
                </span>
103
                <div class="md-card-dropdown uk-inline">
104
                  <i class="md-icon material-icons"
105
                     (click)="$event.stopPropagation();$event.preventDefault()">more_vert</i>
106
                  <div uk-dropdown="mode: click; pos: bottom-right" class="uk-padding-remove-horizontal">
107
                    <ul class="uk-nav uk-dropdown-nav">
108
                      <li><a (click)="editStakeholder(i)">Edit</a></li>
109
                      <li><a (click)="deleteStakeholder(i)">Delete</a></li>
110
                    </ul>
111
                  </div>
112
                </div>
113
              </div>
114
              <div class="md-card-toolbar-heading-text">{{stakeholder.index_name}}</div>
115
            </div>
116
            <div *ngIf="grid" class="md-card-content">
117
              <div class="uk-flex uk-flex-center" uk-grid>
118
                <div class="uk-width-1-2 uk-text-center">
119
                  <i class="material-icons md-24">{{indicatorUtils.isPublicIcon.get(stakeholder.isPublic)}}</i>
120
                  <div>{{(stakeholder.isPublic) ? 'Public' : 'Private'}}</div>
121
                </div>
122
                <div class="uk-width-1-2 uk-text-center">
123
                  <i class="material-icons md-24"
124
                     [class.md-color-green-300]="stakeholder.isActive">{{indicatorUtils.isActiveIcon}}</i>
125
                  <div>{{(stakeholder.isActive) ? 'Active' : 'Inactive'}}</div>
126
                </div>
127
              </div>
128
            </div>
129
          </div>
130
        </a>
131
      </ng-template>
132
    </div>
133
  </div>
134
</div>
modules/uoa-monitor-portal/trunk/monitor_dashboard/src/app/home/home.component.ts
1
import {Component, OnDestroy, OnInit} from "@angular/core";
2
import {StakeholderService} from "../services/stakeholder.service";
3
import {EnvProperties} from "../openaireLibrary/utils/properties/env-properties";
4
import {EnvironmentSpecificService} from "../openaireLibrary/utils/properties/environment-specific.service";
5
import {Stakeholder} from "../utils/entities/stakeholder";
6
import {Subscriber, zip} from "rxjs";
7
import {IndicatorUtils, Option} from "../utils/indicator-utils";
8
import {FormBuilder, FormGroup} from "@angular/forms";
9

  
10
@Component({
11
  selector: 'home',
12
  templateUrl: "./home.component.html"
13
})
14
export class HomeComponent implements OnInit, OnDestroy {
15

  
16
  public properties: EnvProperties;
17
  public loading: boolean = true;
18
  public indicatorUtils: IndicatorUtils = new IndicatorUtils();
19
  public defaultStakeholders: Stakeholder[];
20
  public stakeholders: Stakeholder[];
21
  public stakeholder: FormGroup;
22
  /**
23
   *  Filtered Stakeholders
24
   */
25
  public displayDefaultStakeholders: Stakeholder[];
26
  public displayStakeholders: Stakeholder[];
27
  /**
28
   * Top filters
29
   */
30
  public filters: FormGroup;
31
  public all: Option = {
32
    value: 'all',
33
    label: 'All'
34
  };
35

  
36
  /**
37
   * Grid or List View
38
   */
39
  public grid: boolean = true;
40
  private subscriptions: any[] = [];
41

  
42
  constructor(private stakeholderService: StakeholderService,
43
              private propertiesService: EnvironmentSpecificService,
44
              private fb: FormBuilder) {
45
  }
46

  
47
  ngOnInit(): void {
48
    this.buildFilters();
49
    this.propertiesService.loadEnvironment()
50
      .then(properties => {
51
        this.properties = properties;
52
        let data = zip(
53
          this.stakeholderService.getDefaultStakeholders(this.properties.monitorServiceAPIURL),
54
          this.stakeholderService.getStakeholders(this.properties.monitorServiceAPIURL)
55
        );
56
        data.subscribe(res => {
57
          this.defaultStakeholders = res[0];
58
          this.stakeholders = res[1];
59
          this.displayDefaultStakeholders = res[0];
60
          this.displayStakeholders = res[1];
61
          this.loading = false;
62
        });
63
      });
64
  }
65

  
66
  ngOnDestroy(): void {
67
    this.subscriptions.forEach(value => {
68
      if (value instanceof Subscriber) {
69
        value.unsubscribe();
70
      }
71
    });
72
  }
73

  
74
  public changeGrid(value) {
75
    this.grid = value;
76
  }
77

  
78
  private buildFilters() {
79
    this.filters = this.fb.group({
80
      privacy: this.fb.control('all'),
81
      status: this.fb.control('all'),
82
      keyword: this.fb.control('')
83
    });
84
    this.subscriptions.push(this.filters.get('privacy').valueChanges.subscribe(value => {
85
      this.onPrivacyChange(value);
86
    }));
87
    this.subscriptions.push(this.filters.get('status').valueChanges.subscribe(value => {
88
      this.onStatusChange(value);
89
    }));
90
    this.subscriptions.push(this.filters.get('keyword').valueChanges.subscribe(value => {
91
      this.onKeywordChange(value);
92
    }));
93
  }
94

  
95
  onPrivacyChange(value) {
96
    this.displayDefaultStakeholders = this.filterPrivacy(this.defaultStakeholders, value);
97
    this.displayStakeholders = this.filterPrivacy(this.stakeholders, value);
98
  }
99

  
100
  onStatusChange(value) {
101
    this.displayDefaultStakeholders = this.filterStatus(this.defaultStakeholders, value);
102
    this.displayStakeholders = this.filterStatus(this.stakeholders, value);
103
  }
104

  
105
  onKeywordChange(value) {
106
    this.displayDefaultStakeholders = this.filterByKeyword(this.defaultStakeholders, value);
107
    this.displayStakeholders = this.filterByKeyword(this.stakeholders, value);
108
  }
109

  
110

  
111
  private filterPrivacy(stakeholders: Stakeholder[], value): Stakeholder[] {
112
    if (value === 'all') {
113
      return stakeholders;
114
    } else {
115
      return stakeholders.filter(stakeholder => stakeholder.isPublic === value);
116
    }
117
  }
118

  
119
  private filterStatus(stakeholders: Stakeholder[], value): Stakeholder[] {
120
    if (value === 'all') {
121
      return stakeholders;
122
    } else {
123
      return stakeholders.filter(stakeholder => stakeholder.isActive === value);
124
    }
125
  }
126

  
127
  private filterByKeyword(stakeholders: Stakeholder[], value): Stakeholder[] {
128
    if (value === null || value === '') {
129
      return stakeholders;
130
    } else {
131
      return stakeholders.filter(stakeholder => (
132
        stakeholder.index_id && stakeholder.index_id.toLowerCase().includes(value.toLowerCase())) ||
133
        stakeholder.index_shortName && stakeholder.index_shortName.toLowerCase().includes(value.toLowerCase()) ||
134
        stakeholder.index_name && stakeholder.index_name.toLowerCase().includes(value.toLowerCase())
135
      );
136
    }
137
  }
138

  
139
  public editStakeholder(index = -1) {
140
    /*let stakeholder = this.d
141
    this.fb.group({
142
      _id: this.fb.control()
143
    })*/
144
  }
145
}

Also available in: Unified diff