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.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,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProjectManagementComponent } from './project-management.component';
+
+describe('ProjectManagementComponent', () => {
+  let component: ProjectManagementComponent;
+  let fixture: ComponentFixture<ProjectManagementComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ProjectManagementComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProjectManagementComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreateProjectComponent } from './create-project.component';
+
+describe('CreateProjectComponent', () => {
+  let component: CreateProjectComponent;
+  let fixture: ComponentFixture<CreateProjectComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CreateProjectComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CreateProjectComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,63 @@
+import { Component, OnInit, Input, SimpleChanges } from '@angular/core';
+import { FormBuilder, Validators } from '@angular/forms';
+import { Project } from '../../../interfaces/project';
+import { Output, EventEmitter } from '@angular/core';
+import { ProjectListComponent } from '../project-list/project-list.component';
+
+@Component({
+  selector: 'app-create-project',
+  templateUrl: './create-project.component.html',
+  styleUrls: ['./create-project.component.css']
+})
+export class CreateProjectComponent implements OnInit {
+
+  projectForm;
+  editProjectId;
+  projectStatus = ['', 'Active', 'Inactive'];
+
+  @Input() projectToEdit: Project;
+  @Output() savedProject = new EventEmitter();
+  @Output() cancelForm = new EventEmitter();
+
+  constructor(private formBuilder: FormBuilder) {
+    this.projectForm = this.formBuilder.group({
+      name: ['', Validators.required],
+      details: ['', Validators.required],
+      status: ['', Validators.required],
+      completed: [false]
+    });
+  }
+
+  ngOnInit(): void {
+  }
+
+  ngOnChanges(): void {
+    if (this.projectToEdit) {
+      this.editProjectId = this.projectToEdit.id;
+      this.projectForm.setValue({name: this.projectToEdit.name, details: this.projectToEdit.details,
+        status: this.projectToEdit.status, completed: this.projectToEdit.completed});
+    }
+  }
+
+  get name() {
+    return this.projectForm.get('name');
+  }
+
+  get details() {
+    return this.projectForm.get('details');
+  }
+
+  get status() {
+    return this.projectForm.get('status');
+  }
+
+  onSubmit(projectData) {
+    this.reset();
+    this.savedProject.emit(projectData);
+  }
+  reset() {
+    this.projectForm.reset();
+    this.cancelForm.emit();
+  }
+
+}

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

@@ -0,0 +1,4 @@
+.scroll {
+  max-height: 400px;
+  overflow-y: auto;
+}

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

@@ -0,0 +1,28 @@
+<div class="card-body">
+  <h1 class="card-title">Project List</h1>
+  <div class="scroll">
+    <div class="accordion" id="accordionExample">
+      <div class="card" *ngFor="let project of projects; let rowIndex = index">
+        <div class="card-header">
+          <h2 class="mb-0">
+            <a type="button" data-toggle="collapse" [attr.data-target]="'#row'+rowIndex" [attr.aria-controls]="'row'+rowIndex">
+              {{project.name}}
+            </a>
+            <button (click)="editProject.emit(project.id)" class="btn btn-outline-primary float-right">edit</button>
+          </h2>
+        </div>
+
+        <div [id]="'row'+rowIndex" class="collapse" data-parent="#accordionExample">
+          <div class="card-body">
+            <h5>Details:</h5>
+            <p>{{project.details}}</p>
+            <h5>Status:</h5>
+            <p>{{project.status}}</p>
+            <h5>Completed project:</h5>
+            <p>{{project.completed ? 'Yes' : 'No'}}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>