Add task delete + form for add and update

src/app/app.module.ts

@@ -7,11 +7,13 @@ import { AppComponent } from './app.component';
 
 import { TaskListComponent } from './task-list/task-list.component';
 import { BackendService } from './services/backend.service';
+import { TaskFormComponent } from './task-form/task-form.component';
 
 @NgModule({
   declarations: [
     AppComponent,
-    TaskListComponent
+    TaskListComponent,
+    TaskFormComponent
   ],
   imports: [
     BrowserModule,

src/app/services/backend.service.ts

@@ -1,5 +1,5 @@
 import {Injectable} from '@angular/core';
-import {HttpClient} from '@angular/common/http';
+import {HttpClient, HttpResponse} from '@angular/common/http';
 import {Observable} from 'rxjs';
 import {environment} from '../../environments/environment';
 
@@ -9,42 +9,43 @@ export class BackendService {
 
     constructor(private httpClient: HttpClient) {}
 
-    public getTasks(): Observable<Task[]> {
+    public getTasks(): Observable<HttpResponse<Task[]>> {
         const url = `${environment.apiUrl}/tasks`;
-        return this.httpClient.get<Task[]>(url);
+        return this.httpClient.get<Task[]>(url, { observe: 'response' });
     }
 
-    public getTask(id: number): Observable<Task> {
+    public getTask(id: number): Observable<HttpResponse<Task>> {
         const url = `${environment.apiUrl}/tasks/${id}`;
-        return this.httpClient.get<Task>(url);
+        return this.httpClient.get<Task>(url, { observe: 'response' });
     }
 
-    public postTask(task: Task): Observable<Task> {
+    public postTask(task: Task): Observable<HttpResponse<Task>> {
         const url = `${environment.apiUrl}/tasks`;
-        return this.httpClient.post<Task>(url, task);
+        return this.httpClient.post<Task>(url, task, { observe: 'response' });
     }
 
-    public putTask(task: Task): Observable<any> {
+    public putTask(task: Task): Observable<HttpResponse<any>> {
         const url = `${environment.apiUrl}/tasks/${task.id}`;
-        return this.httpClient.put(url, task);
+        return this.httpClient.put(url, task, { observe: 'response' });
     }
 
-    public deleteTask(task: Task): Observable<any> {
+    public deleteTask(task: Task): Observable<HttpResponse<any>> {
         const url = `${environment.apiUrl}/tasks/${task.id}`;
-        return this.httpClient.delete(url);
+        return this.httpClient.delete(url, {observe: 'response'});
     }
 
 }
 
 //enum prio{high, middle, low}; --> noch nicht im backend
-export class Task{
-    id: number;
-    titel: string;
+export interface Task {
+    id?: number;
+    title: string;
     //prio; --> noch nicht im backend
-    inhalt: string;
-    status: number;
-    kategorie: number;
-    bearbeiter: number;
-    zugeordneterSprint: number;
-    projekt: number;
-    userstory: number;}
+    content?: string;
+    status?: number;
+    category?: number;
+    assignedto?: number;
+    sprint?: number;
+    project?: number;
+    userstory?: number;
+}

src/app/task-form/task-form.component.html

@@ -0,0 +1,14 @@
+<form>
+    <div class="form-group">
+        <label for="Title">Titel</label>
+        <input type="text" class="form-control" id="Title" required [(ngModel)]="title">
+    </div>
+
+    <div class="form-group">
+        <label for="Inhalt">Inhalt</label>
+        <input type="text" class="form-control" id="Content" required [(ngModel)]="content">
+    </div>
+
+    <button type="submit" class="btn btn-success">Submit</button>
+
+</form>

src/app/task-form/task-form.component.spec.ts

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

src/app/task-form/task-form.component.ts

@@ -0,0 +1,39 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { BackendService, Task } from '../services/backend.service';
+
+@Component({
+    selector: 'app-task-form',
+    templateUrl: './task-form.component.html',
+    styleUrls: ['./task-form.component.css']
+})
+export class TaskFormComponent implements OnInit {
+
+    public title: string;
+    public content: string;
+
+    @Input()
+    public task: Task;
+    private submitted: boolean;
+
+    constructor(private backendService: BackendService) { }
+
+    ngOnInit(): void {
+        if (this.task !== null && this.task !== undefined) {
+            this.title = this.task.title;
+            this.content = this.task.content;
+        }
+    }
+
+    onSubmit() {
+        if (this.task !== null && this.task !== undefined) {
+            this.task.title = this.title;
+            this.task.content = this.content;
+            this.backendService.putTask(this.task);
+        }
+        else {
+            this.task = { title: this.title, content: this.content };
+            this.backendService.postTask(this.task);
+        }
+        this.submitted = true;
+    }
+}

src/app/task-list/task-list.component.html

@@ -1,7 +1,8 @@
 <ul>
     <li *ngFor="let task of tasks">
-        <span>Titel: {{task.titel}}</span>
+        <span>Titel: {{task.title}}</span>
         <br/>
-        <span>Inhalt: {{task.inhalt}}</span>
+        <span>Inhalt: {{task.content}}</span>
+        <button (click)="deleteTask(task)">Löschen</button>
     </li>
 </ul>

src/app/task-list/task-list.component.ts

@@ -11,10 +11,29 @@ export class TaskListComponent implements OnInit {
   public tasks: Task[] = [];
 
   constructor(private backendService: BackendService) { 
-    backendService.getTasks().subscribe(t => this.tasks.push(...t));
+      backendService.getTasks().subscribe(response => {
+          if (response.status > 399) {
+              alert('Fehler');
+          }
+          else {
+              this.tasks.push(...response.body);
+          }
+      });
   }
 
   ngOnInit(): void {
   }
 
+  public deleteTask(task: Task) {
+    this.backendService.deleteTask(task).subscribe(response => {
+      if (response.status > 399) {
+        alert('Fehler');
+      }
+    });
+    const index = this.tasks.indexOf(task);
+    if (index !== -1) {
+      this.tasks.splice(index, 1);
+    }    
+  }
+
 }