delete botton

src/app/app.module.ts

@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { HttpClientModule } from '@angular/common/http';
 
 import { AppRoutingModule } from './app-routing.module';
 
@@ -16,8 +17,7 @@ import { ProjectListComponent } from './components/shared/project-list/project-l
 import { CreateProjectComponent } from './components/shared/create-project/create-project.component';
 import { DetailsFieldsComponent } from './components/shared/details-fields/details-fields.component';
 import { ProjectListHoverComponent } from './components/shared/project-list-hover/project-list-hover.component';
-
-
+import { ModalComponent } from './components/shared/modal/modal.component';
 @NgModule({
   declarations: [
     AppComponent,
@@ -32,13 +32,15 @@ import { ProjectListHoverComponent } from './components/shared/project-list-hove
     TimeClockComponent,
     DetailsFieldsComponent,
     ProjectListHoverComponent,
+    ModalComponent
   ],
   imports: [
     CommonModule,
     BrowserModule,
     AppRoutingModule,
     FormsModule,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    HttpClientModule
   ],
   providers: [],
   bootstrap: [AppComponent]

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

@@ -11,6 +11,7 @@
   <app-project-list class="item"
   [projects] = "projects"
   (editProject) = "editProject($event)"
+  (deleteProject) = "deleteProject($event)"
   >
   </app-project-list>
 </div>

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

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Project } from '../../../interfaces/project';
-import { Input } from '@angular/core';
-import { Output, EventEmitter } from '@angular/core';
+import { ProjectService } from '../../../services/project.service';
+
 @Component({
   selector: 'app-project-management',
   templateUrl: './project-management.component.html',
@@ -13,14 +13,14 @@ export class ProjectManagementComponent implements OnInit {
 
   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}
-  ];
+  projects: Project[] = [];
 
-  constructor() { }
+  constructor(private projectService: ProjectService) {
+    this.getProjects();
+  }
 
   ngOnInit(): void {
+    this.getProjects();
   }
 
   updateProject(projectData): void {
@@ -44,7 +44,17 @@ export class ProjectManagementComponent implements OnInit {
     this.project = this.projects.filter((project) => project.id === projectId)[0];
   }
 
+  deleteProject(projectId): void {
+    this.projects = this.projects.filter((project) => project.id !== projectId);
+  }
+
   cancelForm() {
     this.project = null;
   }
+
+   getProjects() {
+    this.projectService.getProjects().subscribe(data => {
+      this.projects = data;
+    });
+  }
 }

src/app/components/shared/modal/modal.component.html

@@ -0,0 +1,17 @@
+<div class="modal-dialog" role="document">
+  <div class="modal-content" *ngIf="project">
+    <div class="modal-header">
+      <h5 class="modal-title" id="exampleModalLabel">Delete Project</h5>
+      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <span aria-hidden="true">&times;</span>
+      </button>
+    </div>
+    <div class="modal-body">
+      Are you sure you want to delete {{project.name}} project?
+    </div>
+    <div class="modal-footer">
+      <button #cancelDeleteModal type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+      <button (click)="removedProject(project.id)" type="button" class="btn btn-primary">Delete</button>
+    </div>
+  </div>
+</div>

src/app/components/shared/modal/modal.component.spec.ts

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

src/app/components/shared/modal/modal.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
+import { Output, EventEmitter } from '@angular/core';
+import { Input } from '@angular/core';
+import { Project } from '../../../interfaces/project'
+@Component({
+  selector: 'app-modal',
+  templateUrl: './modal.component.html',
+  styleUrls: ['./modal.component.css']
+})
+export class ModalComponent implements OnInit {
+
+  @Input() project: Project;
+  @Output() removeProject = new EventEmitter();
+
+  @ViewChild('cancelDeleteModal') cancelDeleteModal: ElementRef;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  removedProject(projectId) {
+    this.removeProject.emit(projectId);
+    this.cancelDeleteModal.nativeElement.click();
+  }
+}

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

@@ -1,28 +1,47 @@
 <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 class="accordion" id="accordionProject">
+      <div *ngIf="projects?.length > 0; else notShow">
+        <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>
+              <div class="btn-group float-right" role="group" >
+                <i (click)="editProject.emit(project.id)" class="far fa-edit btn btn-link"></i>
+                <i (click)="openModal(project)" data-toggle="modal" data-target="#deleteModal" class="far fa-trash-alt btn btn-link"></i>
+              </div>
+            </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 [id]="'row'+rowIndex" class="collapse" data-parent="#accordionProject">
+            <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>
+      <ng-template #notShow>
+        <div class="card">
+          <div class="card-body">
+            <h4 class="card-text">There is no any project.</h4>
+            <h5 class="card-text">Please, create one.</h5>
+          </div>
+        </div>
+      </ng-template>
     </div>
   </div>
 </div>
+
+<app-modal *ngIf = "openDeleteModal" class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-hidden="true"
+[project] = "projectToDelete"
+(removeProject) = "removeProject($event)"
+>
+</app-modal>

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

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Input } from '@angular/core';
 import { Output, EventEmitter } from '@angular/core';
+import { Project } from '../../../interfaces/project';
 
 @Component({
   selector: 'app-project-list',
@@ -9,11 +10,25 @@ import { Output, EventEmitter } from '@angular/core';
 })
 export class ProjectListComponent implements OnInit {
 
-  @Input() projects: any[];
+  @Input() projects: Project[] = [];
   @Output() editProject = new EventEmitter();
+  @Output() deleteProject = new EventEmitter();
+
+  projectToDelete: Project;
+  openDeleteModal: Boolean = false;
 
   constructor() { }
 
   ngOnInit(): void {
   }
+
+  openModal(projectData) {
+    this.projectToDelete = projectData;
+    this.openDeleteModal = true;
+  }
+
+  removeProject(projectId) {
+    this.deleteProject.emit(projectId);
+    this.projectToDelete = null;
+  }
 }

src/app/services/project.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ProjectService } from './project.service';
+
+describe('ProjectService', () => {
+  let service: ProjectService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ProjectService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/project.service.ts

@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+import { Project } from '../interfaces/project';
+import { HttpClient } from '@angular/common/http';
+import { Observable, of } from 'rxjs';
+import { map, filter } from 'rxjs/operators';
+
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ProjectService {
+
+  projects: Project[] = [];
+  url = 'assets/project.json';
+
+  constructor(private http: HttpClient) {}
+
+  getProjects(): Observable<Project[]> {
+    return this.http.get<Project[]>(this.url);
+  }
+
+  // getProject(projectId): Observable<Project> {
+  //   return this.http.get<Project>(this.url).pipe(
+  //     filter((project: Project) => project.id === projectId)[0]
+  //   );
+  // }
+
+}

src/assets/project.json

@@ -0,0 +1,16 @@
+[
+  {
+    "id": 1,
+    "name": "GoSpace",
+    "details": "This app help to improve your workspace.",
+    "status": "Active",
+    "completed": false
+  },
+  {
+    "id": 2,
+    "name": "MidoPlay",
+    "details": "It's a good app to play Lottery",
+    "status": "Inactive",
+    "completed": true
+  }
+]