Manage projects

Author: macrisguncay

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

package.json

@@ -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-routing.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/app.module.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>
+

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

@@ -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.spec.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;
+  }
+}