create project-specific activities page component

Author: jaeddy

client/app/project/project-activities/project-activities.component.ts

@@ -0,0 +1,52 @@
+import { Component, OnInit } from '@angular/core';
+import { orderBy } from 'lodash';
+import { Observable } from 'rxjs';
+import { ProvenanceService } from 'components/provenance/provenance.service';
+import { Activity } from 'models/activities/activity.model';
+import { ProjectDataService } from '../project-data.service';
+import { Project } from 'models/project.model';
+import config from '../../app.constants';
+import { NotificationService } from 'components/notification/notification.service';
+
+@Component({
+    selector: 'project-activities',
+    template: require('./project-activities.html'),
+    styles: [require('./project-activities.scss')]
+})
+export class ProjectActivitiesComponent implements OnInit {
+    private project: Project;
+    private provenanceGraph: any;
+    private activityTypeFilters = config.activityTypeFilters;
+    private showNewActivityForm = false;
+
+    static parameters = [ProvenanceService, ProjectDataService, NotificationService];
+    constructor(private provenanceService: ProvenanceService,
+        private projectDataService: ProjectDataService,
+        private notificationService: NotificationService) { }
+
+    ngOnInit() {
+        this.projectDataService.project()
+            .subscribe(project => {
+                this.project = project;
+                const selectedFilter = config.activityTypeFilters.find(filter => filter.active);
+                const defaultQuery = { activityType: selectedFilter.value };
+                this.onFilterChange(defaultQuery);
+            }, err => console.error(err));
+    }
+
+    onFilterChange(query) {
+        if (this.project) {
+            this.provenanceService.getProvenanceGraph('created_at', 'desc', 10)
+                .subscribe(activity => {
+                    this.provenanceGraph = activity;
+                }, err => {
+                    console.log(err);
+                });
+        }
+    }
+
+    onNewActivity(activity: Activity): void {
+        this.showNewActivityForm = false;
+        this.notificationService.info('The Activity has been successfully created');
+    }
+}

client/app/project/project-activities/project-activities.html

@@ -0,0 +1,22 @@
+<div *ngIf="!showNewActivityForm; else activityForm">
+  <div class="project-activities-container">
+    <div class="activities-graph-container">
+        <div class="activities-graph-filters-container">
+            <h3>{{ entityName }} Type</h3>
+            <radio-button-filter [filters]="activityTypeFilters" [group]="filterGroup"></radio-button-filter>
+        </div>
+        <div class="activities-graph-content-container">
+            <div class="activities-graph-results">
+                <provenance-graph class="provenance-graph" [graphData]="provenanceGraph" [rootId]=""></provenance-graph>
+            </div>
+        </div>
+    </div>
+    <div class="project-activities-actions">
+        <a mat-raised-button color="primary" class="app-activity-list-new-project" (click)="showNewActivityForm=true" aria-label="Create activity">Create a New Activity</a>
+    </div>
+  </div>
+</div>
+
+<ng-template #activityForm>
+    <activity-new (newActivity)="onNewActivity($event)" (close)="showNewActivityForm=false"></activity-new>
+</ng-template>

client/app/project/project-activities/project-activities.scss

@@ -0,0 +1,31 @@
+.project-activities-container {
+  .activities-graph-container {
+      .activities-graph-filters-container {
+        display: flex;
+        flex-flow: column nowrap;
+        flex-grow: 0;
+        flex-shrink: 0;
+        // min-width: 300px;
+        margin: 25px;
+      }
+      .activities-graph-content-container {
+        display: flex;
+        flex-flow: column nowrap;
+        flex-grow: 1;
+        margin: 20px 50px;
+
+        .activities-graph-results {
+            display: flex;
+            flex-flow: column nowrap;
+            flex-grow: 0;
+            flex-shrink: 0;
+            margin: 0 auto;
+        }
+      }
+  }
+  .project-activities-actions {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: center;
+  }
+}