Merge branch 'feature/task-form'

src/app/app.module.ts

@@ -1,5 +1,6 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
 
 import { AppRoutingModule } from './app-routing.module';
@@ -7,16 +8,21 @@ 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';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
 @NgModule({
   declarations: [
     AppComponent,
-    TaskListComponent
+    TaskListComponent,
+    TaskFormComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
-    HttpClientModule
+    HttpClientModule,
+    FormsModule,
+    NgbModule
   ],
   providers: [
     BackendService,

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,16 @@
+<div class="modal-content p-3">
+    <form (ngSubmit)="onSubmit()">
+        <div class="form-group">
+            <label for="Title">Titel</label>
+            <input type="text" class="form-control" id="Title" required name="title" [(ngModel)]="title">
+        </div>
+
+        <div class="form-group">
+            <label for="Inhalt">Inhalt</label>
+            <input type="text" class="form-control" id="Content" required name="content" [(ngModel)]="content">
+        </div>
+
+        <button type="submit" class="btn btn-success">Submit</button>
+
+    </form>
+</div>

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,49 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+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, private activeModalService: NgbActiveModal) { }
+
+    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).subscribe(response => {
+                if (response.status > 399) {
+                  alert('Fehler');
+                }
+              });
+        }
+        else {
+            this.task = { title: this.title, content: this.content };
+            this.backendService.postTask(this.task).subscribe(response => {
+                if (response.status > 399) {
+                  alert('Fehler');
+                }
+              });
+        }
+        this.submitted = true;
+        this.activeModalService.close();
+    }
+}

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

@@ -1,7 +1,12 @@
-<ul>
-    <li *ngFor="let task of tasks">
-        <span>Titel: {{task.titel}}</span>
+<button class="btn btn-dark m-3" (click)="openTaskForm(null)">Neu</button>
+
+<ul class="list-group m-3">
+    <li *ngFor="let task of tasks" class="list-group-item">
+        <span>Titel: {{task.title}}</span>
         <br/>
-        <span>Inhalt: {{task.inhalt}}</span>
+        <span>Inhalt: {{task.content}}</span>
+        <br>
+        <button class="btn btn-secondary m-2" (click)="openTaskForm(task)">Bearbeiten</button>
+        <button class="btn btn-secondary m-2" (click)="deleteTask(task)">Löschen</button>
     </li>
 </ul>

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

@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { BackendService, Task } from '../services/backend.service';
+import { TaskFormComponent } from '../task-form/task-form.component';
 
 @Component({
   selector: 'app-task-list',
@@ -10,11 +12,38 @@ export class TaskListComponent implements OnInit {
 
   public tasks: Task[] = [];
 
-  constructor(private backendService: BackendService) { 
-    backendService.getTasks().subscribe(t => this.tasks.push(...t));
+  constructor(private backendService: BackendService, private modalService: NgbModal) { 
+      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);
+    }    
+  }
+
+  public openTaskForm(editTask: Task) {
+    const modalRef = this.modalService.open(TaskFormComponent, {
+      backdrop: 'static',
+      keyboard: true,
+    });
+    modalRef.componentInstance.task = editTask;
+  }
+
 }

src/polyfills.ts

@@ -1,3 +1,7 @@
+/***************************************************************************************************
+ * Load `$localize` onto the global scope - used if i18n tags appear in Angular templates.
+ */
+import '@angular/localize/init';
 /**
  * This file includes polyfills needed by Angular and is loaded before the app.
  * You can add your own extra polyfills to this file.