get changes

Author: daros10

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-lock.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",

package.json

@@ -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-routing.module.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.component.spec.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/app.module.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/getting-started/getting-started.component.spec.ts

@@ -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.css

@@ -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>
+