get changes

README.md

@@ -2,6 +2,21 @@
 
 This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 9.0.4.
 
+## Prerequisites
+
+### Node.js
+
+We can install Node.js from [https://nodejs.org/en/download/] but we recommend that you install it using Node Version Management [https://github.com/nvm-sh/nvm] (v12.16.1 LTS).
+
+### Angular CLI
+Angular CLI is a Command Line Interface (CLI) to speed up your development with Angular.
+
+Run `npm install -g @angular/cli` for install Angular CLI
+
+## Install Node Modules
+
+Run `npm install` for install the node_modules.
+
 ## Development server
 
 Run `ng serve` to run the app in a dev mode, after executing this command you can navigate to `http://localhost:4200/` to see the app working.

angular.json

@@ -24,9 +24,13 @@
                             "src/assets"
                         ],
                         "styles": [
+                            "./node_modules/bootstrap/dist/css/bootstrap.min.css",
                             "src/styles.css"
                         ],
-                        "scripts": []
+                        "scripts": [
+                            "./node_modules/jquery/dist/jquery.min.js",
+                            "./node_modules/bootstrap/dist/js/bootstrap.min.js"
+                        ]
                     },
                     "configurations": {
                         "production": {
@@ -77,10 +81,10 @@
                     "builder": "@angular-devkit/build-angular:karma",
                     "options": {
                         "main": "src/test.ts",
-                        "codeCoverage": true,
                         "polyfills": "src/polyfills.ts",
                         "tsConfig": "tsconfig.spec.json",
                         "karmaConfig": "karma.conf.js",
+                        "codeCoverage": true,
                         "assets": [
                             "src/favicon.ico",
                             "src/assets"

package.json

@@ -19,11 +19,14 @@
     "@angular/platform-browser": "~9.0.3",
     "@angular/platform-browser-dynamic": "~9.0.3",
     "@angular/router": "~9.0.3",
+    "bootstrap": "^4.4.1",
+    "jquery": "^3.4.1",
+    "minimist": "^1.2.5",
     "rxjs": "~6.5.4",
     "tslib": "^1.10.0",
     "zone.js": "~0.10.2"
   },
- "devDependencies": {
+  "devDependencies": {
     "@angular-devkit/build-angular": "^0.900.5",
     "@angular/cli": "~9.0.4",
     "@angular/compiler-cli": "~9.0.3",

src/app/app-routing.module.ts

@@ -5,16 +5,17 @@ import { ReportsComponent } from './components/options-sidebar/reports/reports.c
 import { TimeClockComponent } from './components/options-sidebar/time-clock/time-clock.component';
 import { TimeEntriesComponent } from './components/options-sidebar/time-entries/time-entries.component';
 import { TimeOffComponent } from './components/options-sidebar/time-off/time-off.component';
-
+import { ProjectManagementComponent } from './components/options-sidebar/project-management/project-management.component';
 
 const routes: Routes = [
-  {path: 'gettingStarted', component: GettingStartedComponent},
+  {path: 'getting-started', component: GettingStartedComponent},
   {path: 'reports', component: ReportsComponent},
-  {path: 'timeClock', component: TimeClockComponent},
-  {path: 'timeEntries', component: TimeEntriesComponent},
-  {path: 'timeOff', component: TimeOffComponent},
-  {path: '', pathMatch: 'full', redirectTo: 'gettingStarted'},
-  {path: '**', pathMatch: 'full', redirectTo: 'gettingStarted'},
+  {path: 'time-clock', component: TimeClockComponent},
+  {path: 'time-entries', component: TimeEntriesComponent},
+  {path: 'time-off', component: TimeOffComponent},
+  {path: 'project-management', component: ProjectManagementComponent},
+  {path: '', pathMatch: 'full', redirectTo: 'getting-started'},
+  {path: '**', pathMatch: 'full', redirectTo: 'getting-started'},
 ];
 
 @NgModule({

src/app/app.component.spec.ts

@@ -25,11 +25,4 @@ describe('AppComponent', () => {
     const app = fixture.componentInstance;
     expect(app.title).toEqual('time-tracker');
   });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement;
-    expect(compiled.querySelector('.content span').textContent).toContain('time-tracker app is running!');
-  });
 });

src/app/app.module.ts

@@ -1,14 +1,18 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { AppRoutingModule } from './app-routing.module';
+
 import { AppComponent } from './app.component';
 import { NavbarComponent } from './components/shared/navbar/navbar.component';
 import { UserComponent } from './components/shared/user/user.component';
 import { SidebarComponent } from './components/shared/sidebar/sidebar.component';
 import { ClockComponent } from './components/shared/clock/clock.component';
 import { TimeClockComponent } from './components/options-sidebar/time-clock/time-clock.component';
-
+import { ProjectManagementComponent } from './components/options-sidebar/project-management/project-management.component';
+import { ProjectListComponent } from './components/shared/project-list/project-list.component';
+import { CreateProjectComponent } from './components/shared/create-project/create-project.component';
 
 @NgModule({
   declarations: [
@@ -17,11 +21,16 @@ import { TimeClockComponent } from './components/options-sidebar/time-clock/time
     UserComponent,
     SidebarComponent,
     ClockComponent,
-    TimeClockComponent
+    TimeClockComponent,
+    ProjectManagementComponent,
+    ProjectListComponent,
+    CreateProjectComponent
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    FormsModule,
+    ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/components/options-sidebar/getting-started/getting-started.component.spec.ts

@@ -6,6 +6,13 @@ describe('GettingStartedComponent', () => {
   let component: GettingStartedComponent;
   let fixture: ComponentFixture<GettingStartedComponent>;
 
+  function setup() {
+    // tslint:disable-next-line: no-shadowed-variable
+    const fixture = TestBed.createComponent(GettingStartedComponent);
+    const app = fixture.debugElement.componentInstance;
+    return { fixture, app };
+  }
+
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [ GettingStartedComponent ]
@@ -19,7 +26,18 @@ describe('GettingStartedComponent', () => {
     fixture.detectChanges();
   });
 
-  it('should create', () => {
+  it('should be created', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should have p tag as \'getting-started works!\'', async(() => {
+    // tslint:disable-next-line: no-shadowed-variable
+    const { app, fixture } = setup();
+    fixture.detectChanges();
+    const compile = fixture.debugElement.nativeElement;
+    const h1tag = compile.querySelector('p');
+    expect(h1tag.textContent).toBe('getting-started works!');
+  }));
+
+
 });

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

@@ -0,0 +1,21 @@
+.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/project-management/project-management.component.html

@@ -0,0 +1,17 @@
+
+<div class="parent">
+
+  <app-create-project class="item"
+    [projectToEdit] = "project"
+    (savedProject)="updateProject($event)"
+    (cancelForm) = "cancelForm()"
+  >
+  </app-create-project>
+
+  <app-project-list class="item"
+  [projects] = "projects"
+  (editProject) = "editProject($event)"
+  >
+  </app-project-list>
+</div>
+

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

@@ -0,0 +1,100 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProjectManagementComponent } from './project-management.component';
+import { Project } from '../../../interfaces/project';
+
+describe('ProjectManagementComponent', () => {
+  let component: ProjectManagementComponent;
+  let fixture: ComponentFixture<ProjectManagementComponent>;
+  const projects: Project[] = [{
+    id: 1,
+    name: 'app 1',
+    details: 'It is a good app',
+    status: 'inactive',
+    completed: true
+  },
+  {
+    id: 2,
+    name: 'app 2',
+    details: 'It is a good app',
+    status: 'inactive',
+    completed: false
+  },
+  {
+    id: 3,
+    name: 'app 3',
+    details: 'It is a good app',
+    status: 'active',
+    completed: true
+  }
+  ];
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ProjectManagementComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProjectManagementComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+    component.projects = projects;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should add a project #updateProject', () => {
+    const project = {
+      name: 'app 4',
+      details: 'It is a good app',
+      status: 'inactive',
+      completed: true
+    };
+
+    component.editedProjectId = null;
+    component.updateProject(project);
+    expect(component.projects.length).toEqual(4);
+  });
+
+  it('should edit a project #updateProject', () => {
+    const project = {
+      id: 1,
+      name: 'app test',
+      details: 'It is a excelent app',
+      status: 'inactive',
+      completed: true
+    };
+
+    component.editedProjectId = 1;
+    component.updateProject(project);
+    expect(component.projects.length).toEqual(3);
+    expect(component.projects[0].name).toBe('app test');
+    expect(component.projects[0].details).toBe('It is a excelent app');
+    expect(component.projects[0].status).toBe('inactive');
+    expect(component.projects[0].completed).toBe(true);
+  });
+
+  it('should filter the project to edit #editProject', () => {
+    const editProjectId = 2;
+    component.editProject(editProjectId);
+    expect(component.project.name).toBe('app 2');
+  });
+
+  it('should clean the project #cancelForm', () => {
+    const project = {
+      id: 1,
+      name: 'app 1',
+      details: 'It is a good app',
+      status: 'inactive',
+      completed: true
+    };
+
+    component.project = project;
+    component.cancelForm();
+    expect(component.project).toBe(null);
+  });
+});