Manage projects

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": {

package.json

@@ -19,6 +19,8 @@
     "@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",
     "rxjs": "~6.5.4",
     "tslib": "^1.10.0",
     "zone.js": "~0.10.2"

src/app/app-routing.module.ts

@@ -5,6 +5,7 @@ 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 = [
@@ -13,6 +14,7 @@ const routes: Routes = [
   {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'},
 ];

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,24 +1,32 @@
 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 { 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: [
     AppComponent,
     NavbarComponent,
     UserComponent,
     SidebarComponent,
     ClockComponent,
+    ProjectManagementComponent,
+    ProjectListComponent,
+    CreateProjectComponent
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    FormsModule,
+    ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]

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);
+  });
+});

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

@@ -0,0 +1,50 @@
+import { Component, OnInit } from '@angular/core';
+import { Project } from '../../../interfaces/project';
+import { Input } from '@angular/core';
+import { Output, EventEmitter } from '@angular/core';
+@Component({
+  selector: 'app-project-management',
+  templateUrl: './project-management.component.html',
+  styleUrls: ['./project-management.component.css']
+})
+export class ProjectManagementComponent implements OnInit {
+
+  editedProjectId;
+
+  project: Project;
+
+  projects: Project[] = [
+    { id: 1, name: 'GoSpace', details: 'Improve workspaces', status: 'Active', completed: false},
+    { id: 2, name: 'MidoPlay', details: 'Lottery', status: 'Inactive', completed: true}
+  ];
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  updateProject(projectData): void {
+    if (this.editedProjectId) {
+      const projectIndex = this.projects.findIndex((project => project.id === this.editedProjectId));
+      this.projects[projectIndex].name = projectData.name;
+      this.projects[projectIndex].details = projectData.details;
+      this.projects[projectIndex].status = projectData.status;
+      this.projects[projectIndex].completed = projectData.completed;
+    } else {
+      const newProject: Project = { id: this.projects.length + 1, name: projectData.name,
+        details: projectData.details, status: projectData.status, completed: false
+      };
+      this.projects = this.projects.concat(newProject);
+    }
+    console.log(this.projects);
+  }
+
+  editProject(projectId) {
+    this.editedProjectId = projectId;
+    this.project = this.projects.filter((project) => project.id === projectId)[0];
+  }
+
+  cancelForm() {
+    this.project = null;
+  }
+}

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

@@ -0,0 +1,38 @@
+<div class="card">
+  <form class="card-body" [formGroup]="projectForm" (ngSubmit)="onSubmit(projectForm.value)">
+    <h1 class="card-title">Create a new project</h1>
+
+    <div class="form-group">
+      <label for="name">Name:</label>
+      <input class="form-control" id="name" type="text" formControlName="name" required>
+      <p class="alert alert-danger" *ngIf="(name.dirty || name.touched) && name.invalid && name.errors.required">Name Project is required.</p>
+    </div>
+
+    <div class="form-group">
+      <label for="details">Details:</label>
+      <textarea class="form-control" rows="3" id="details" type="text" formControlName="details" required></textarea>
+      <p class="alert alert-danger" *ngIf="(details.dirty || details.touched) && details.invalid && details.errors.required">Details Project is required.</p>
+    </div>
+
+    <div class="form-group">
+      <label for="status">Status:</label>
+      <select class="form-control" formControlName="status">
+        <option *ngFor="let status of projectStatus" [value]="status">{{status}}</option>
+      </select>
+      <p class="alert alert-danger" *ngIf="(status.dirty || status.touched) && status.invalid && status.errors.required">Status Project is required.</p>
+    </div>
+
+    <div class="form-group form-check" [hidden]="!projectToEdit">
+      <input type="checkbox" class="form-check-input" id="completedProject" formControlName="completed">
+      <label class="form-check-label" for="completedProject">Completed project</label>
+    </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]="!projectForm.valid">Save</button>
+      </div>
+      <div class="btn-group mr-2" role="group">
+        <button class="btn btn-primary mb-2" type="reset" [hidden]="!projectToEdit" (click)="reset()">Cancel</button>
+      </div>
+    </div>
+  </form>
+</div>

src/app/components/shared/create-project/create-project.component.spec.ts

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