Project

General

Profile

« Previous | Next » 

Revision 60119

[Monitor Dashboard | Trunk]: Add develop page

View differences:

modules/uoa-monitor-portal/trunk/monitor_dashboard/src/app/app.component.html
8 8
      <navbar *ngIf="properties" [properties]="properties" portal="monitor_dashboard" [header]="menuHeader"
9 9
              [userMenuItems]=userMenuItems [menuItems]="menuItems" [user]="user" [offCanvasFlip]="true"></navbar>
10 10
    </div>
11
    <dashboard-sidebar *ngIf="stakeholder && isFrontPage" [items]="sideBarItems"
11
    <dashboard-sidebar *ngIf="stakeholder && isFrontPage && hasSidebar" [items]="sideBarItems"
12 12
                       [activeItem]="activeTopic?activeTopic.alias:null" [showHeader]=true
13 13
                       [specialMenuItem]="specialSideBarMenuItem"
14 14
                       [searchParams]="{}"
modules/uoa-monitor-portal/trunk/monitor_dashboard/src/app/monitor/monitor-routing.module.ts
14 14
        canDeactivate: [PreviousRouteRecorder]
15 15
      },
16 16
      {
17
        path: ':stakeholder/develop',
18
        loadChildren: '../develop/develop.module#DevelopModule',
19
        resolve: {envSpecific: EnvironmentSpecificResolver},
20
        data: {
21
          hasSidebar: false,
22
          isDashboard: false
23
        }
24
      },
25
      {
17 26
        path: ':stakeholder/search',
18 27
        loadChildren: '../search/search.module#SearchModule',
19 28
        resolve: {envSpecific: EnvironmentSpecificResolver}
modules/uoa-monitor-portal/trunk/monitor_dashboard/src/app/develop/develop.component.ts
1
import {Component, OnDestroy, OnInit} from "@angular/core";
2
import {StakeholderService} from "../openaireLibrary/monitor/services/stakeholder.service";
3
import {Stakeholder} from "../openaireLibrary/monitor/entities/stakeholder";
4
import {Subscription} from "rxjs";
5
import {Meta, Title} from "@angular/platform-browser";
6
import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service";
7
import {properties} from "../../environments/environment";
8
import {Router} from "@angular/router";
9
import {StakeholderUtils} from "../utils/indicator-utils";
10

  
11
@Component({
12
  selector: 'develop',
13
  template: `
14
    <div page-content>
15
      <div inner>
16
        <div *ngIf="stakeholder" class="uk-container uk-container-large uk-section-small">
17
          <h2 class="uk-text-center">
18
            Develop
19
          </h2>
20
          <div class="uk-margin-medium-top uk-card uk-card-body uk-card-default">
21
            <h3 class="uk-text-center">Help developers with <span
22
                class="portal-color uk-text-bold">OpenAIRE APIs</span>
23
            </h3>
24
            <div class="uk-margin-large-top uk-margin-medium-bottom">
25
              Not sure where to start? Let us give you some guides and request examples.
26
            </div>
27
            <div class="uk-grid uk-child-width-1-2@l uk-child-width-1-1" uk-grid>
28
              <div>
29
                <p>
30
                  <span class="uk-text-bold">For research outcomes </span>
31
                  (publications, datasets, software and other research data) you can use the
32
                  <a href="http://api.openaire.eu/api.html" target="_blank">Selective Access APIs</a>
33
                  by adding the <span class="uk-text-lowercase">{{type}}</span> parameter.
34
                </p>
35
                <p>
36
                  Request examples:
37
                </p>
38
                <ul class="portal-circle">
39
                  <li>
40
                    <span class="uk-text-bold">Access “Publications”</span><br>
41
                    <span class="uk-text-bold">GET</span>
42
                    <span class="uk-text-break space">https://api.openaire.eu/search/publications?funder={{stakeholder.index_shortName}}</span>
43
                  </li>
44
                  <li>
45
                    <span class="uk-text-bold">Access “Open Access Publications”</span><br>
46
                    <span class="uk-text-bold">GET</span>
47
                    <span class="uk-text-break space">http://api.openaire.eu/search/publications?funder={{stakeholder.index_shortName}}&OA=true</span>
48
                  </li>
49
                  <li>
50
                    <span class="uk-text-bold">Access “Datasets”</span><br>
51
                    <span class="uk-text-bold">GET</span>
52
                    <span class="uk-text-break space">https://api.openaire.eu/search/datasets?funder={{stakeholder.index_shortName}}</span>
53
                  </li>
54
                  <li>
55
                    <span class="uk-text-bold">Access “Software”</span><br>
56
                    <span class="uk-text-bold">GET</span>
57
                    <span class="uk-text-break space">https://api.openaire.eu/search/software?funder={{stakeholder.index_shortName}}</span>
58
                  </li>
59
                  <li>
60
                    <span class="uk-text-bold">Access “Other Research”</span><br>
61
                    <span class="uk-text-bold">GET</span>
62
                    <span class="uk-text-break space">https://api.openaire.eu/search/other?funder={{stakeholder.index_shortName}}</span>
63
                  </li>
64
                </ul>
65
              </div>
66
              <div>
67
                <p>
68
                  <span class="uk-text-bold">For projects</span> you can use the <a href="http://api.openaire.eu/api.html" target="_blank">Selective Access APIs</a>
69
                  and the <a href="http://api.openaire.eu/bulk-projects.html">Bulk Access APIs</a>.
70
                </p>
71
                <p>
72
                  Request examples:
73
                </p>
74
                <ul class="portal-circle">
75
                  <li>
76
                    <span class="uk-text-bold">For the “Selective Access”</span><br>
77
                    <span class="uk-text-break space">https://api.openaire.eu/search/projects?funder={{stakeholder.index_shortName}}</span>
78
                  </li>
79
                  <li>
80
                    <span class="uk-text-bold">For the “Bulk Access”</span><br>
81
                    <span class="uk-text-bold uk-text-nowrap">DSpace endpoint:</span>
82
                    <span class="uk-text-break space">https://api.openaire.eu/projects/dspace/{{stakeholder.index_shortName}}/ALL/ ALL</span><br>
83
                    <span class="uk-text-bold uk-text-nowrap">ePrints endpoint:</span>
84
                    <span class="uk-text-break space">https://api.openaire.eu/projects/eprints/{{stakeholder.index_shortName}}/ALL/ ALL</span>
85
                  </li>
86
                </ul>
87
                <div class="uk-flex uk-flex-center uk-width-1-1 uk-margin-medium-top">
88
                  <img width="350" src="assets/develop.png">
89
                </div>
90
              </div>
91
            </div>
92
            <div class="uk-margin-large-top uk-flex uk-flex-center uk-padding">
93
              <div class="documentation">
94
                For <span class="uk-text-bold">more information</span> on the full potential of the OpenAIRE APIs please check
95
                the <a href="http://develop.openaire.eu/" target="_blank">OpenAIRE API Documentation</a>.
96
              </div>
97
            </div>
98
          </div>
99
        </div>
100
      </div>
101
    </div>
102
  `,
103
  styleUrls: ['develop.component.css']
104
})
105
export class DevelopComponent implements OnInit, OnDestroy {
106
  
107
  public stakeholder: Stakeholder;
108
  private subscriptions: any[] = [];
109
  private stakeholderUtils: StakeholderUtils = new StakeholderUtils();
110
  public type: string;
111
  
112
  constructor(private stakeholderService: StakeholderService,
113
              private seoService: SEOService,
114
              private _meta: Meta,
115
              private _router: Router,
116
              private _title: Title) {
117
  }
118
  
119
  ngOnInit() {
120
    this.subscriptions.push(this.stakeholderService.getStakeholderAsObservable().subscribe(stakeholder => {
121
      this.stakeholder = stakeholder;
122
      if (this.stakeholder) {
123
        if(stakeholder.type !== "funder") {
124
          this.navigateToError();
125
        }
126
        /* Metadata */
127
        const url = properties.domain + properties.baseLink + this._router.url;
128
        this.seoService.createLinkForCanonicalURL(url, false);
129
        this._meta.updateTag({content: url}, "property='og:url'");
130
        const description = "Develop | " + this.stakeholder.name;
131
        const title = "Develop | " + this.stakeholder.name;
132
        this._meta.updateTag({content: description}, "name='description'");
133
        this._meta.updateTag({content: description}, "property='og:description'");
134
        this._meta.updateTag({content: title}, "property='og:title'");
135
        this._title.setTitle(title);
136
        
137
        /* Initializations */
138
        this.stakeholderUtils.types.forEach(type => {
139
          if (type.value === stakeholder.type) {
140
            this.type = type.label;
141
          }
142
        });
143
      }
144
    }));
145
  }
146
  
147
  private navigateToError() {
148
    this._router.navigate(['/error'], {queryParams: {'page': this._router.url}});
149
  }
150
  
151
  ngOnDestroy() {
152
    this.subscriptions.forEach(subscription => {
153
      if (subscription instanceof Subscription) {
154
        subscription.unsubscribe();
155
      }
156
    });
157
  }
158
}
modules/uoa-monitor-portal/trunk/monitor_dashboard/src/app/develop/develop.component.css
1
.uk-card {
2
  box-shadow: 0 6px 15px #0000001A;
3
  border-radius: 36px;
4
  padding: 65px;
5
  font-family: "Roboto", sans-serif;
6
  font-size: var(--large-font-size);;
7
}
8

  
9
ul.portal-circle {
10
  list-style: none;
11
  padding-left: 40px;
12
  font-family: "Open Sans", sans-serif;
13
  font-size: var(--font-size);;
14
}
15

  
16
ul.portal-circle li {
17
  margin: 0 0 20px 0;
18
  position: relative;
19
}
20

  
21
ul.portal-circle li:before {
22
  content: "";
23
  border: 5px var(--portal-main-color) solid !important;
24
  border-radius: 50px;
25
  line-height: 21px;
26
  margin-left: -20px;
27
  position: absolute;
28
  top: 7px;
29
}
30

  
31
.documentation {
32
  max-width: 500px;
33
  background: #EEF7E6;
34
  border-radius: 15px;
35
  padding: 30px;
36
  font-family: "Open Sans", sans-serif;
37
  font-size: var(--small-font-size);
38
}
39

  
40
@media only screen and (max-width: 959px) {
41
  .uk-card {
42
    padding: 30px;
43
  }
44

  
45
  ul.portal-circle {
46
    padding-left: 20px;
47
  }
48

  
49
  ul.light-blue-triangle li {
50
    margin: 0 0 20px 0;
51
  }
52

  
53
  ul.light-blue-circle.large li {
54
    margin: 0 0 20px 0;
55
  }
56

  
57
  .documentation {
58
    padding: 10px;
59
  }
60
}
modules/uoa-monitor-portal/trunk/monitor_dashboard/src/app/develop/develop.module.ts
1
import {NgModule} from "@angular/core";
2
import {CommonModule} from "@angular/common";
3
import {DevelopComponent} from "./develop.component";
4
import {RouterModule} from "@angular/router";
5
import {PreviousRouteRecorder} from "../openaireLibrary/utils/piwik/previousRouteRecorder.guard";
6
import {PageContentModule} from "../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module";
7

  
8
@NgModule({
9
  declarations: [DevelopComponent],
10
  imports: [CommonModule, RouterModule.forChild([
11
    {
12
      path: '',
13
      component: DevelopComponent,
14
      canDeactivate: [PreviousRouteRecorder]
15
    },
16
  ]), PageContentModule],
17
  exports: [DevelopComponent]
18
})
19
export class DevelopModule {
20

  
21
}
modules/uoa-monitor-portal/trunk/monitor_dashboard/src/app/app.component.ts
28 28
  hasAdminMenu: boolean = false;
29 29
  hasMiniMenu: boolean = false;
30 30
  isFrontPage: boolean = false;
31
  isDashboard: boolean = false;
31 32
  isViewPublic: boolean = false;
32 33
  sideBarItems: MenuItem[] = [];
33 34
  specialSideBarMenuItem: MenuItem = null;
......
74 75
  
75 76
  @HostListener('window:resize', ['$event'])
76 77
  onResize(event) {
77
    if(this.layoutService.isSmallScreen && event.target.innerWidth > 1219) {
78
    if (this.layoutService.isSmallScreen && event.target.innerWidth > 1219) {
78 79
      this.layoutService.setSmallScreen(false);
79
    } else if(!this.layoutService.isSmallScreen && event.target.innerWidth < 1219) {
80
    } else if (!this.layoutService.isSmallScreen && event.target.innerWidth < 1219) {
80 81
      this.layoutService.setSmallScreen(true);
81 82
      this.layoutService.setOpen(false);
82 83
    }
......
109 110
      this.isFrontPage = isFrontPage;
110 111
      this.cdr.detectChanges();
111 112
    }));
113
    this.subscriptions.push(this.layoutService.isDashboard.subscribe(isDashboard => {
114
      this.isDashboard = isDashboard;
115
      this.cdr.detectChanges();
116
    }));
112 117
    this.route.queryParams.subscribe(params => {
113 118
      this.isViewPublic = (params['view'] == 'public');
114 119
    });
......
146 151
            }, error => {
147 152
              this.stakeholder = null;
148 153
              LinksResolver.resetProperties();
149
              if(error.status === 404)  {
154
              if (error.status === 404) {
150 155
                this.navigateToError();
151 156
              }
152 157
              this.buildMenu();
......
210 215
  
211 216
  private setSideBar() {
212 217
    let items: MenuItem[] = [];
213
    if(this.isPublicOrIsMember(this.stakeholder.visibility)) {
218
    if (this.isPublicOrIsMember(this.stakeholder.visibility)) {
214 219
      this.stakeholder.topics.forEach((topic) => {
215 220
        if (this.isPublicOrIsMember(topic.visibility)) {
216 221
          let topicItem: MenuItem = new MenuItem(topic.alias, topic.name, "", (
......
223 228
      if (items.length === 0) {
224 229
        items.push(new MenuItem('noTopics', 'No topics available yet', "", "", false, [], [], {}));
225 230
      }
226
    }else{
227
      let topicItem: MenuItem = new MenuItem("private", "Private Data", "","", null, [], [], {});
231
    } else {
232
      let topicItem: MenuItem = new MenuItem("private", "Private Data", "", "", null, [], [], {});
228 233
      items.push(topicItem);
229 234
    }
230 235
    this.sideBarItems = items;
......
242 247
      this.userMenuItems.push(new MenuItem("", "User information", "", "/user-info", false, [], [], {}));
243 248
    }
244 249
    if (this.stakeholder) {
245
      if (this.isFrontPage) {
250
      if (!this.isDashboard) {
246 251
        this.menuHeader = {
252
          route: null,
253
          url: "https://" + (this.properties.environment == 'beta' ? 'beta.' : '') + 'monitor.openaire.eu',
254
          title: "Monitor",
255
          logoUrl: 'assets/common-assets/logo-large-monitor.png',
256
          logoSmallUrl: "assets/common-assets/logo-small-monitor.png",
257
          position: 'left',
258
          badge: true,
259
          stickyAnimation: false
260
        };
261
        this.menuItems.push({
262
          rootItem: new MenuItem("dashboard", "Dashboard",
263
            "", "/" + this.stakeholder.alias, false, [], null, {}), items: []
264
        });
265
        this.menuItems.push({
266
          rootItem: new MenuItem("develop", "Develop",
267
            "", "/" + this.stakeholder.alias + "/develop", false, [], null, {}), items: []
268
        });
269
      }
270
      else if (this.isFrontPage) {
271
        this.menuHeader = {
247 272
          route: "/" + this.stakeholder.alias,
248 273
          url: null,
249 274
          title: this.stakeholder.name,
......
253 278
          badge: false,
254 279
          stickyAnimation: false
255 280
        };
281
        if(this.stakeholder.type === "funder") {
282
          this.menuItems.push({
283
            rootItem: new MenuItem("develop", "Develop",
284
              "", "/" + this.stakeholder.alias + "/develop", false, [], null, {}), items: []
285
          });
286
        }
256 287
        if (this.isCurator()) {
257 288
          this.menuItems.push({
258 289
            rootItem: new MenuItem("manage", "Manage",
......
260 291
          });
261 292
          
262 293
        }
263

  
264
        if(this.isPublicOrIsMember(this.stakeholder.visibility)) {
294
        
295
        if (this.isPublicOrIsMember(this.stakeholder.visibility)) {
265 296
          this.specialSideBarMenuItem = new MenuItem("search", "Search research outcomes", "", this.properties.searchLinkToResults, false, [], null, {});
266 297
          this.specialSideBarMenuItem.icon = '<span uk-icon="search"></span>';
267
        }else{
268
          this.specialSideBarMenuItem =null;
298
        } else {
299
          this.specialSideBarMenuItem = null;
269 300
        }
270
        
271 301
      } else {
272 302
        this.menuHeader = {
273 303
          route: "/admin/" + this.stakeholder.alias,
......
304 334
        };
305 335
        this.menuItems.push({
306 336
          rootItem: new MenuItem("about", "About",
307
            "https://" + (this.properties.environment == 'beta' ? 'beta.' : '') + 'monitor.openaire.eu/about/learn-how', "", false, [], null, {}), items: []
337
            "https://" + (this.properties.environment == 'beta' ? 'beta.' : '') + 'monitor.openaire.eu/about/learn-how', "", false, [], null, {}),
338
          items: []
308 339
        });
309 340
        this.menuItems.push({
310 341
          rootItem: new MenuItem("browse", "Browse",
311
            "https://" + (this.properties.environment == 'beta' ? 'beta.' : '') + 'monitor.openaire.eu/browse', "", false, [], null, {}), items: []
342
            "https://" + (this.properties.environment == 'beta' ? 'beta.' : '') + 'monitor.openaire.eu/browse', "", false, [], null, {}),
343
          items: []
312 344
        });
313 345
        this.menuItems.push({
314 346
          rootItem: new MenuItem("contact", "Contact us",
315
            "https://" + (this.properties.environment == 'beta' ? 'beta.' : '') + 'monitor.openaire.eu/contact-us', "", false, [], null, {}), items: []
347
            "https://" + (this.properties.environment == 'beta' ? 'beta.' : '') + 'monitor.openaire.eu/contact-us', "", false, [], null, {}),
348
          items: []
316 349
        });
317 350
      } else {
318 351
        this.menuHeader = {
......
345 378
    }
346 379
    
347 380
  }
381
  
348 382
  public isCurator() {
349 383
    return this.user && (Session.isPortalAdministrator(this.user) || Session.isMonitorCurator(this.user) || Session.isKindOfMonitorManager(this.user));
350 384
  }
351
  public isManager(stakeholder:Stakeholder) {
385
  
386
  public isManager(stakeholder: Stakeholder) {
352 387
    return this.user && (Session.isPortalAdministrator(this.user) || Session.isCurator(stakeholder.type, this.user) || Session.isManager(stakeholder.type, stakeholder.alias, this.user));
353 388
  }
354 389
  
355 390
  private resolvePageInner() {
356
    if(document !== undefined) {
391
    if (document !== undefined) {
357 392
      let header = document.getElementById('pager_header_content');
358 393
      let inner = document.getElementById('page_content_inner');
359
      if(header) {
360
        inner.setAttribute('style', '{margin-top:' + header.offsetHeight+ '}');
394
      if (header) {
395
        inner.setAttribute('style', '{margin-top:' + header.offsetHeight + '}');
361 396
      } else {
362 397
        inner.setAttribute('style', '{margin-top:' + 0 + '}');
363 398
      }
......
366 401
  
367 402
  public isPublicOrIsMember(visibility: Visibility): boolean {
368 403
    if (visibility == "PRIVATE" || (this.isViewPublic && visibility != "PUBLIC")) {
369
        return false;
370
      }
371
      return true;
404
      return false;
405
    }
406
    return true;
372 407
  }
373 408
  
374
/*  createSearchParameters() {
375
    if (!this.stakeholder) {
376
      return {};
377
    }
378
    if (this.stakeholder.type == "funder") {
379
      return {"relfunder": encodeURIComponent("\"" + this.stakeholder.index_id + "||" + this.stakeholder.index_name + "||" + this.stakeholder.index_shortName + "\"")};
380
    } else if (this.stakeholder.type == "ri") {
381
      return {"community": encodeURIComponent("\"" + this.stakeholder.index_id + "||" + this.stakeholder.index_name + "\"")};
382
    } else if (this.stakeholder.type == "organization") {
383
      return {"cf": true};
384
    }
385
  }*/
409
  /*  createSearchParameters() {
410
      if (!this.stakeholder) {
411
        return {};
412
      }
413
      if (this.stakeholder.type == "funder") {
414
        return {"relfunder": encodeURIComponent("\"" + this.stakeholder.index_id + "||" + this.stakeholder.index_name + "||" + this.stakeholder.index_shortName + "\"")};
415
      } else if (this.stakeholder.type == "ri") {
416
        return {"community": encodeURIComponent("\"" + this.stakeholder.index_id + "||" + this.stakeholder.index_name + "\"")};
417
      } else if (this.stakeholder.type == "organization") {
418
        return {"cf": true};
419
      }
420
    }*/
386 421
}
modules/uoa-monitor-portal/trunk/monitor_dashboard/src/app/topic/topic.component.ts
391 391
        if (this.index === -1) {
392 392
          this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex].subCategories.push(subCategory);
393 393
        } else {
394
          this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex].subCategories[this.index] = subCategory;
394
          this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex].subCategories[this.index] = HelperFunctions.copy(subCategory);
395 395
        }
396 396
      };
397 397
      if (this.index === -1) {

Also available in: Unified diff