Merge branch 'feature/dashboard'

src/app/userstory-inner-table/userstory-inner-table.component.html

@@ -0,0 +1,90 @@
+<button class="btn btn-secondary my-3" (click)="openUserstoryForm()">Neue Userstory</button>
+
+<table class="table">
+
+    <thead>
+    <tr>
+    <th (click)="sortById()" class="sortable">
+        <span>ID</span>
+        <span *ngIf="sortBy === 'id'" class="pl-3">
+        <span *ngIf="sortDescending"><i class="fa fa-sort-up"></i></span>
+        <span *ngIf="sortDescending === false"><i class="fa fa-sort-down"></i></span>
+        </span>
+    </th>
+    <th (click)="sortByTitle()" class="sortable">
+        <span>Titel</span>
+        <span *ngIf="sortBy === 'title'" class="pl-3">
+        <span *ngIf="sortDescending"><i class="fa fa-sort-up"></i></span>
+        <span *ngIf="sortDescending === false"><i class="fa fa-sort-down"></i></span>
+        </span>
+    </th>
+    <th (click)="sortByTasks()" class="sortable">
+        <span>Tasks</span>
+        <span *ngIf="sortBy === 'tasks'" class="pl-3">
+        <span *ngIf="sortDescending"><i class="fa fa-sort-up"></i></span>
+        <span *ngIf="sortDescending === false"><i class="fa fa-sort-down"></i></span>
+        </span>
+    </th>
+    <th (click)="sortByStatus()" class="sortable">
+        <span>Status</span>
+        <span *ngIf="sortBy === 'statusid'" class="pl-3">
+        <span *ngIf="sortDescending"><i class="fa fa-sort-up"></i></span>
+        <span *ngIf="sortDescending === false"><i class="fa fa-sort-down"></i></span>
+        </span>
+    </th>
+    <th (click)="sortByPrio()" class="sortable">
+        <span>Priorität</span>
+        <label class="pl-3" (click)="$event.stopPropagation()">
+        <select [(ngModel)]="filterPriority">
+            <option [ngValue]="null" selected></option>
+            <option *ngFor="let p of getAllPriorities()" [ngValue]="p">{{p}}</option>
+        </select>
+        </label>
+        <span *ngIf="sortBy === 'priority'" class="pl-3">
+        <span *ngIf="sortDescending"><i class="fa fa-sort-up"></i></span>
+        <span *ngIf="sortDescending === false"><i class="fa fa-sort-down"></i></span>
+        </span>
+    </th>
+    <th (click)="sortByCategory()" class="sortable">
+        <span>Category</span>
+        <span *ngIf="sortBy === 'categoryid'" class="pl-3">
+        <span *ngIf="sortDescending"><i class="fa fa-sort-up"></i></span>
+        <span *ngIf="sortDescending === false"><i class="fa fa-sort-down"></i></span>
+        </span>
+    </th>
+    <th></th>
+    </tr>
+    </thead>
+
+    <tbody>
+    <tr *ngFor="let userstory of filteredItems"  [class.table-info]="userstory.id === highlightId">
+    <td>{{userstory.id}}</td>
+    <td>{{userstory.title}}</td>
+    <td>
+        <a [routerLink]="['/tasks', {userstoryId: userstory.id}]">
+        {{getNumberOfTasks(userstory)}} Tasks
+        </a>
+    </td>
+    <td>
+        <a [routerLink]="['/status', {id: userstory.statusid}]">
+        {{getStatusTitleById(userstory.statusid)}}
+        </a>
+    </td>
+    <td>{{userstory.priority}}</td>
+    <td>
+        <a [routerLink]="['/categories', {id: userstory.categoryid}]">
+        {{getCategoryTitleById(userstory.categoryid)}}
+        </a>
+    </td>
+    <td>
+        <button type="button" rel="tooltip" (click)="openUserstoryForm(userstory)" class="btn btn-success btn-sm btn-icon">
+        <i class="fa fa-pencil-alt"></i>
+    </button>
+    <button type="button" rel="tooltip" (click)="deleteUserstory(userstory)" class="btn btn-danger btn-sm btn-icon">
+        <i class="fa fa-trash"></i>
+    </button>
+    </td>
+    </tr>
+    </tbody>
+
+</table>

src/app/userstory-inner-table/userstory-inner-table.component.ts

@@ -0,0 +1,143 @@
+import { Component, Input } from '@angular/core';
+import {
+  BackendService,
+  ScrumTask,
+  ScrumUserstory,
+  ScrumStatus,
+  ScrumCategory,
+} from '../services/backend.service';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { TableComponentBase } from '../services/table-component.base';
+import { getNumberForPriority } from '../services/sorting.service';
+import { UserstoryFormComponent } from '../userstory-form/userstory-form.component';
+import { ActivatedRoute, ParamMap, Router } from '@angular/router';
+
+@Component({
+  selector: 'app-userstory-inner-table',
+  templateUrl: './userstory-inner-table.component.html',
+  styleUrls: ['./userstory-inner-table.component.css']
+})
+export class UserstoryInnerTableComponent extends TableComponentBase<ScrumUserstory> {
+  public tasks: ScrumTask[] = [];
+  public filterPriority: string | null = null;
+  public highlightId: number;
+  public status: ScrumStatus[] = [];
+  public categories: ScrumCategory[] = [];
+
+  @Input() public items: ScrumUserstory[] = [];
+
+  public get filteredItems() {
+    return this.items.filter(
+      (task) =>
+        this.filterPriority === null || task.priority === this.filterPriority
+    );
+  }
+
+  constructor(
+    private backendService: BackendService,
+    private modalService: NgbModal,
+    private route: ActivatedRoute,
+    private router: Router
+  ) {
+    super();
+
+    this.applyFilterParameters(this.route.snapshot.paramMap);
+    this.route.paramMap.subscribe((map) => this.applyFilterParameters(map));
+
+    backendService.getTasks().subscribe((response) => {
+      if (response.status > 399) {
+        alert('Fehler');
+      } else {
+        this.tasks.push(...response.body);
+      }
+    });
+    backendService.getAllStatus().subscribe((response) => {
+      if (response.status > 399) {
+        alert('Fehler');
+      } else {
+        this.status.push(...response.body);
+      }
+    });
+    backendService.getCategories().subscribe((response) => {
+      if (response.status > 399) {
+        alert('Fehler');
+      } else {
+        this.categories.push(...response.body);
+      }
+    });
+  }
+
+  private applyFilterParameters(params: ParamMap) {
+    if (params.has('id')) {
+      this.highlightId = parseInt(params.get('id'));
+    }
+  }
+
+  public deleteUserstory(userstory: ScrumUserstory) {
+    this.backendService.deleteUserstory(userstory).subscribe((response) => {
+      if (response.status > 399) {
+        alert('Fehler');
+      }
+    });
+    const index = this.items.indexOf(userstory);
+    if (index !== -1) {
+      this.items.splice(index, 1);
+    }
+  }
+
+  public openUserstoryForm(editUserstory?: ScrumUserstory) {
+    const modalRef = this.modalService.open(UserstoryFormComponent, {
+      backdrop: 'static',
+      keyboard: true,
+    });
+    if (editUserstory === null) {
+      modalRef.result.then((result) => {
+        this.items.push(result);
+      });
+    }
+    modalRef.componentInstance.userstory = editUserstory;
+  }
+
+  public getNumberOfTasks(userstory: ScrumUserstory) {
+    return this.tasks.filter((t) => t.userstoryid === userstory.id).length;
+  }
+
+  public sortById() {
+    this.doNumericSort('id', (us) => us.id);
+  }
+
+  public sortByTitle() {
+    this.doStringSort('title', (us) => us.title);
+  }
+
+  public sortByPrio() {
+    this.doNumericSort('priority', (us) => getNumberForPriority(us.priority));
+  }
+
+  public sortByTasks() {
+    this.doNumericSort('tasks', (us) => this.getNumberOfTasks(us));
+  }
+
+  sortByStatus() {
+    this.doNumericSort('statusid', (us) => us.statusid);
+  }
+  sortByCategory() {
+    this.doNumericSort('categoryid', (us) => us.categoryid);
+  }
+
+  getStatusTitleById(id) {
+    var status = this.status.find((x) => x.id === id);
+    if (!status) {
+      return 'N/A';
+    }
+    return status.title;
+  }
+
+  getCategoryTitleById(id) {
+    var category = this.categories.find((x) => x.id === id);
+    if (!category) {
+      return 'N/A';
+    }
+    return category.title;
+  }
+}

src/styles.css

@@ -1,8 +1,8 @@
 /* You can add global styles to this file, and also import other style files */
 .custom-text-secondary {
     color: white;
-}
+  }
   
-.white-content .custom-text-secondary {
+  .white-content .custom-text-secondary {
     color: black !important;
-}
+  }