closes #38 - manage activities screen created

src/app/app-routing.module.ts

@@ -1,3 +1,5 @@
+// tslint:disable-next-line:max-line-length
+import { ActivitiesManagementComponent } from './components/options-sidebar/activities/activities-management/activities-management.component';
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { ReportsComponent } from './components/options-sidebar/reports/reports.component';
@@ -10,6 +12,7 @@ const routes: Routes = [
   {path: 'time-clock', component: TimeClockComponent},
   {path: 'time-entries', component: TimeEntriesComponent},
   {path: 'project-management', component: ProjectManagementComponent},
+  {path: 'activities-management', component: ActivitiesManagementComponent},
   {path: '', pathMatch: 'full', redirectTo: 'time-clock'},
   {path: '**', pathMatch: 'full', redirectTo: 'time-clock'},
 ];

src/app/app.module.ts

@@ -1,3 +1,5 @@
+import { ActivityListComponent } from './components/options-sidebar/activities/activity-list/activity-list.component';
+import { CreateActivityComponent } from './components/options-sidebar/activities/create-activity/create-activity.component';
 import { CommonModule } from '@angular/common';
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
@@ -21,6 +23,8 @@ import { ModalComponent } from './components/shared/modal/modal.component';
 import { MonthPickerComponent } from './components/shared/month-picker/month-picker.component';
 import { EmptyStateComponent } from './components/shared/empty-state/empty-state.component';
 import { GroupByDatePipe } from './components/shared/pipes/group-by-date/group-by-date.pipe';
+// tslint:disable-next-line:max-line-length
+import { ActivitiesManagementComponent } from './components/options-sidebar/activities/activities-management/activities-management.component';
 
 
 @NgModule({
@@ -41,7 +45,10 @@ import { GroupByDatePipe } from './components/shared/pipes/group-by-date/group-b
     TimeEntriesComponent,
     MonthPickerComponent,
     EmptyStateComponent,
-    GroupByDatePipe
+    GroupByDatePipe,
+    ActivitiesManagementComponent,
+    CreateActivityComponent,
+    ActivityListComponent
   ],
   imports: [
     CommonModule,

src/app/components/options-sidebar/activities/activities-management/activities-management.component.css

@@ -0,0 +1,22 @@
+.parent {
+    display: flex;
+  }
+
+  .item {
+    width: 50%;
+    margin: 2em;
+    min-height: 500px;
+    max-height: 500px;
+  }
+
+  @media screen and (max-width: 600px){
+    .parent {
+      flex-direction: column-reverse;
+    }
+
+    .item {
+      width: auto;
+      min-height: 200px;
+    }
+  }
+

src/app/components/options-sidebar/activities/activities-management/activities-management.component.html

@@ -0,0 +1,7 @@
+<div class="parent">
+    <app-create-activity class="item">
+    </app-create-activity>
+
+    <app-activity-list [activities]="activities" class="item">
+    </app-activity-list>
+</div>

src/app/components/options-sidebar/activities/activities-management/activities-management.component.spec.ts

@@ -0,0 +1,32 @@
+import { HttpClient, HttpHandler } from '@angular/common/http';
+import { Activity } from './../model/activity';
+import { of } from 'rxjs';
+import { ActivityService } from './../services/activity.service';
+import { async, TestBed } from '@angular/core/testing';
+
+import { ActivitiesManagementComponent } from './activities-management.component';
+
+describe('ActivitiesManagementComponent', () => {
+  let component: ActivitiesManagementComponent;
+  let activityService: ActivityService;
+  const activitiesFromApi: Activity[] = [{id: '123', name: 'aaa', description: 'xxx'}];
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ActivitiesManagementComponent],
+      providers: [ ActivityService, HttpClient, HttpHandler ]
+    });
+    component = TestBed.createComponent(ActivitiesManagementComponent).componentInstance;
+    activityService = TestBed.get(ActivityService);
+    spyOn(activityService, 'getActivities').and.returnValue(of(activitiesFromApi));
+  }));
+
+  it('should create the component', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should load activities', () => {
+    component.ngOnInit();
+    expect(component.activities).toBe(activitiesFromApi);
+  });
+});

src/app/components/options-sidebar/activities/activities-management/activities-management.component.ts

@@ -0,0 +1,19 @@
+import { Activity } from './../model/activity';
+import { ActivityService } from './../services/activity.service';
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-activities-management',
+  templateUrl: './activities-management.component.html',
+  styleUrls: ['./activities-management.component.css']
+})
+export class ActivitiesManagementComponent implements OnInit {
+
+  constructor(private activityService: ActivityService) { }
+
+  activities: Activity[];
+
+  ngOnInit(): void {
+    this.activityService.getActivities().subscribe( data =>  this.activities = data );
+  }
+}

src/app/components/options-sidebar/activities/activity-list/activity-list.component.html

@@ -0,0 +1,37 @@
+<div class="card-body">
+    <div class="scroll">
+        <div class="accordion" id="accordionActivities">
+            <div *ngIf="activities?.length > 0; else notShow">
+                <div class="card" *ngFor="let activity of activities; let rowIndex = index">
+                    <div class="card-header">
+                        <h2 class="mb-0">
+                            <a type="button" data-toggle="collapse" [attr.data-target]="'#row'+rowIndex">
+                                {{activity.name}}
+                            </a>
+                            <div class="btn-group float-right" role="group">
+                                <i class="far fa-edit btn btn-link"></i>
+                                <i class="far fa-trash-alt btn btn-link"></i>
+                            </div>
+                        </h2>
+                    </div>
+
+                    <div [id]="'row'+rowIndex" class="collapse" data-parent="#accordionActivities">
+                        <div class="card-body">
+                            <h5>Description:</h5>
+                            <p>{{activity.description}}</p>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+            <ng-template #notShow>
+                <div class="card">
+                    <div class="card-body">
+                        <h4 class="card-text">There are no activities.</h4>
+                        <h5 class="card-text">Please, create one.</h5>
+                    </div>
+                </div>
+            </ng-template>
+        </div>
+    </div>
+</div>

src/app/components/options-sidebar/activities/activity-list/activity-list.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ActivityListComponent } from './activity-list.component';
+
+describe('ActivityListComponent', () => {
+  let component: ActivityListComponent;
+  let fixture: ComponentFixture<ActivityListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ActivityListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ActivityListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/options-sidebar/activities/activity-list/activity-list.component.ts

@@ -0,0 +1,16 @@
+import { Activity } from './../model/activity';
+import { Input } from '@angular/core';
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-activity-list',
+  templateUrl: './activity-list.component.html',
+  styleUrls: ['./activity-list.component.css']
+})
+export class ActivityListComponent {
+
+  @Input() activities: Activity[] = [];
+
+  constructor() { }
+
+}

src/app/components/options-sidebar/activities/create-activity/create-activity.component.html

@@ -0,0 +1,22 @@
+<div class="card">
+  <form class="card-body" [formGroup]="activityForm" (ngSubmit)="onSubmit(activityForm.value)">
+    <h1 class="card-title">Activity</h1>
+    <div class="form-group">
+      <label for="name">Name:</label>
+      <input class="form-control" id="name" type="text" formControlName="name" required>
+      <div class="alert alert-danger" *ngIf="(name.dirty || name.touched) && name.invalid && name.errors.required">
+        Activity name is required.</div>
+    </div>
+
+    <div class="form-group">
+      <label for="details">Description:</label>
+      <textarea class="form-control" rows="3" id="description" type="text" formControlName="description"></textarea>
+    </div>
+
+    <div class="btn-toolbar" role="toolbar">
+      <div class="btn-group mr-2" role="group">
+        <button class="btn btn-primary mb-2" type="submit" [disabled]="!activityForm.valid">Save</button>
+      </div>
+    </div>
+  </form>
+</div>

src/app/components/options-sidebar/activities/create-activity/create-activity.component.spec.ts

@@ -0,0 +1,22 @@
+import { FormBuilder } from '@angular/forms';
+import { async, TestBed } from '@angular/core/testing';
+
+import { CreateActivityComponent } from './create-activity.component';
+
+describe('CreateActivityComponent', () => {
+
+  let component: CreateActivityComponent;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CreateActivityComponent],
+      providers: [ FormBuilder ]
+    });
+    component = TestBed.createComponent(CreateActivityComponent).componentInstance;
+  }));
+
+  it('should create the component', () => {
+    expect(component).toBeTruthy();
+  });
+
+});

src/app/components/options-sidebar/activities/create-activity/create-activity.component.ts

@@ -0,0 +1,39 @@
+import { FormBuilder, Validators, FormGroup } from '@angular/forms';
+import { Activity } from './../model/activity';
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-create-activity',
+  templateUrl: './create-activity.component.html',
+  styleUrls: ['./create-activity.component.css']
+})
+export class CreateActivityComponent {
+
+  activityForm: FormGroup;
+
+  @Input()
+  activityToEdit: Activity;
+
+  constructor(private formBuilder: FormBuilder) {
+    this.activityForm = this.formBuilder.group({
+      name: ['', Validators.required],
+      description: ['']
+    });
+  }
+
+  onSubmit(activityData) {
+    // TODO: add proper interaction with API to save this info
+    // see https://github.com/ioet/time-tracker-ui/issues/44
+    console.log(activityData);
+    this.activityForm.reset();
+  }
+
+  get name() {
+    return this.activityForm.get('name');
+  }
+
+  get description() {
+    return this.activityForm.get('description');
+  }
+
+}

src/app/components/options-sidebar/activities/model/activity.ts

@@ -0,0 +1,5 @@
+export interface Activity {
+    id: string;
+    name: string;
+    description: string;
+}

src/app/components/options-sidebar/activities/services/activity.service.spec.ts

@@ -0,0 +1,43 @@
+import {Activity} from './../model/activity';
+import {ActivityService} from './activity.service';
+import {TestBed, inject, async} from '@angular/core/testing';
+import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';
+
+describe('Activity Service', () => {
+  let service: ActivityService;
+  let httpMock: HttpTestingController;
+
+  const activities: Activity[] = [
+      { id: '1', name: 'aaa', description: 'xxx' },
+      { id: '2', name: 'bbb', description: 'yyy' }
+  ];
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({imports: [HttpClientTestingModule]});
+    service = TestBed.inject(ActivityService);
+    httpMock = TestBed.inject(HttpTestingController);
+  });
+
+  afterEach(() => {
+    httpMock.verify();
+  });
+
+  it('services are ready to be used', inject([ HttpClientTestingModule, ActivityService ],
+    (httpClient: HttpClientTestingModule, activityService: ActivityService) => {
+    expect(activityService).toBeTruthy();
+    expect(httpClient).toBeTruthy();
+  }));
+
+  it('activities are read using GET from assets/activities.json URL', () => {
+    const activitiesFoundSize = activities.length;
+    service
+      .getActivities()
+      .subscribe(activitiesInResponse => {
+        expect(activitiesInResponse.length).toBe(activitiesFoundSize);
+      });
+    const getActivitiesRequest = httpMock.expectOne('assets/activities.json');
+    expect(getActivitiesRequest.request.method).toBe('GET');
+    getActivitiesRequest.flush(activities);
+  });
+
+});

src/app/components/options-sidebar/activities/services/activity.service.ts

@@ -0,0 +1,18 @@
+import { Activity } from './../model/activity';
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ActivityService {
+
+  url = 'assets/activities.json';
+
+  constructor(private http: HttpClient) {}
+
+  getActivities(): Observable<Activity[]> {
+    return this.http.get<Activity[]>(this.url);
+  }
+}

src/app/components/options-sidebar/project-management/project-management.component.html

@@ -1,6 +1,5 @@
-
 <div class="parent">
-
+  
   <app-create-project class="item"
     [projectToEdit] = "project"
     (savedProject)="updateProject($event)"

src/app/components/shared/create-project/create-project.component.html

@@ -1,6 +1,6 @@
 <div class="card">
   <form class="card-body" [formGroup]="projectForm" (ngSubmit)="onSubmit(projectForm.value)">
-    <h1 class="card-title">Create a new project</h1>
+    <h1 class="card-title">Project</h1>
 
     <div class="form-group">
       <label for="name">Name:</label>

src/app/components/shared/project-list/project-list.component.html

@@ -1,5 +1,4 @@
 <div class="card-body">
-  <h1 class="card-title">Project List</h1>
   <div class="scroll">
     <div class="accordion" id="accordionProject">
       <div *ngIf="projects?.length > 0; else notShow">

src/app/components/shared/sidebar/sidebar.component.html

@@ -6,6 +6,7 @@
           <a [routerLink]="['/time-entries']" routerLinkActive="dark" class="list-group-item list-group-item-action bg-light"><i class="far fa-list-alt"></i>  Time Entries</a>
           <a [routerLink]="['/reports']" routerLinkActive="dark" class="list-group-item list-group-item-action bg-light"><i class="fas fa-chart-pie"></i>   Reports</a>
           <a [routerLink]="['/project-management']" routerLinkActive="dark" class="list-group-item list-group-item-action bg-light"><i class="far fa-folder-open"></i>   Projects</a>
+          <a [routerLink]="['/activities-management']" routerLinkActive="dark" class="list-group-item list-group-item-action bg-light"><i class="far fa-file-alt"></i>   Activities</a>
         </div>
     </div>
     <!-- /#sidebar-wrapper -->