Prettified all the things

.prettierignore

@@ -0,0 +1,49 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+dist
+tmp
+out-tsc
+assets
+src\assets
+# Only exists if Bazel was run
+bazel-out
+
+# dependencies
+node_modules
+
+# profiling files
+chrome-profiler-events*.json
+speed-measure-plugin*.json
+
+# IDEs and editors
+.idea
+.project
+.classpath
+.c9
+*.launch
+.settings/
+*.sublime-workspace
+package-lock.json
+
+# IDE - VSCode
+.vscode
+
+# misc
+.sass-cache
+connect.lock
+coverage
+libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db
+
+# Other ignore files
+.gitignore
+.dockerignore
+.gitlab-ci.yml

README.md

@@ -3,6 +3,7 @@
 This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.7.
 
 ## Angular CLI
+
 ### Development server
 
 Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
@@ -28,27 +29,32 @@ Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protrac
 To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
 
 ## Deploy with Docker
+
 > Prerequisite: Docker and/or Docker Compose have to be installed on your system </br>
 > The Docker installation instructions for most operation systems can be found here: [https://docs.docker.com/get-docker/](https://docs.docker.com/get-docker/) </br>
 > The Docker Compose installation instructions for most operation systems can be found here: [https://docs.docker.com/compose/install/](https://docs.docker.com/compose/install/)
 > To use the prebuild images log into the private registry: docker login -u testuser -p LpH2v1mShPpC8Xeimkd2AISA03zaC+vq scrumdev.azurecr.io
 
 ### Quick Deployment with Docker Compose
+
 1. Clone the git repo
 2. Open the cloned repo's folder in a shell of your choice (as long as it supports Docker)
 3. Tell Docker Compose to run the app alongside a database with `docker-compose up`
 
 Other useful commands:
-* Run attached (in the background): `docker-compose up -d`
+
-* Stop: `docker-compose down`
+- Run attached (in the background): `docker-compose up -d`
-* Restart: `docker-compose restart`
+- Stop: `docker-compose down`
+- Restart: `docker-compose restart`
 
 ### Build the Container yourself (and run it)
+
 1. Clone the git repo
 2. Open the cloned repo's folder in a shell of your choice (as long as it supports Docker)
 3. Tell Docker to build the app under the name "taskboard/frontend" with `docker build -t taskboard/frontend .`
 4. Tell Docker to run the app on port 8080 with `docker run -p 8080:80 taskboard/frontend`
 
 Other useful commands:
-* Run detached: `docker run -d -p 8080:80 taskboard/frontend`
+
-* Run under specified name: `docker run -p 8080:80 --name frontend taskboard/frontend`
+- Run detached: `docker run -d -p 8080:80 taskboard/frontend`
+- Run under specified name: `docker run -p 8080:80 --name frontend taskboard/frontend`

angular.json

@@ -20,17 +20,13 @@
             "tsConfig": "tsconfig.app.json",
             "preserveSymlinks": true,
             "aot": true,
-            "assets": [
+            "assets": ["src/favicon.ico", "src/assets"],
-              "src/favicon.ico",
-              "src/assets"
-            ],
             "styles": [
               "node_modules/bootstrap/dist/css/bootstrap.min.css",
               "src/styles.scss",
               "src/assets/scss/black-dashboard.scss"
             ],
-            "scripts": [
+            "scripts": []
-            ]
           },
           "configurations": {
             "production": {
@@ -87,13 +83,8 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
-            "assets": [
+            "assets": ["src/favicon.ico", "src/assets"],
-              "src/favicon.ico",
+            "styles": ["src/styles.scss"],
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.scss"
-            ],
             "scripts": []
           }
         },
@@ -105,9 +96,7 @@
               "tsconfig.spec.json",
               "e2e/tsconfig.json"
             ],
-            "exclude": [
+            "exclude": ["**/node_modules/**"]
-              "**/node_modules/**"
-            ]
           }
         },
         "e2e": {

e2e/protractor.conf.js

@@ -2,31 +2,31 @@
 // Protractor configuration file, see link for more information
 // https://github.com/angular/protractor/blob/master/lib/config.ts
 
-const { SpecReporter } = require('jasmine-spec-reporter');
+const { SpecReporter } = require("jasmine-spec-reporter");
 
 /**
  * @type { import("protractor").Config }
  */
 exports.config = {
   allScriptsTimeout: 11000,
-  specs: [
+  specs: ["./src/**/*.e2e-spec.ts"],
-    './src/**/*.e2e-spec.ts'
-  ],
   capabilities: {
-    browserName: 'chrome'
+    browserName: "chrome",
   },
   directConnect: true,
-  baseUrl: 'http://localhost:4200/',
+  baseUrl: "http://localhost:4200/",
-  framework: 'jasmine',
+  framework: "jasmine",
   jasmineNodeOpts: {
     showColors: true,
     defaultTimeoutInterval: 30000,
-    print: function() {}
+    print: function () {},
   },
   onPrepare() {
-    require('ts-node').register({
+    require("ts-node").register({
-      project: require('path').join(__dirname, './tsconfig.json')
+      project: require("path").join(__dirname, "./tsconfig.json"),
     });
-    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+    jasmine
-  }
+      .getEnv()
+      .addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+  },
 };

e2e/src/app.e2e-spec.ts

@@ -16,8 +16,10 @@ describe('workspace-project App', () => {
   afterEach(async () => {
     // Assert that there are no errors emitted from the browser
     const logs = await browser.manage().logs().get(logging.Type.BROWSER);
-    expect(logs).not.toContain(jasmine.objectContaining({
+    expect(logs).not.toContain(
+      jasmine.objectContaining({
         level: logging.Level.SEVERE,
-    } as logging.Entry));
+      } as logging.Entry)
+    );
   });
 });

e2e/src/app.po.ts

@@ -6,6 +6,8 @@ export class AppPage {
   }
 
   getTitleText(): Promise<string> {
-    return element(by.css('app-root .content span')).getText() as Promise<string>;
+    return element(by.css('app-root .content span')).getText() as Promise<
+      string
+    >;
   }
 }

e2e/tsconfig.json

@@ -4,10 +4,6 @@
     "outDir": "../out-tsc/e2e",
     "module": "commonjs",
     "target": "es5",
-    "types": [
+    "types": ["jasmine", "jasminewd2", "node"]
-      "jasmine",
-      "jasminewd2",
-      "node"
-    ]
   }
 }

karma.conf.js

@@ -3,30 +3,30 @@
 
 module.exports = function (config) {
   config.set({
-    basePath: '',
+    basePath: "",
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    frameworks: ["jasmine", "@angular-devkit/build-angular"],
     plugins: [
-      require('karma-jasmine'),
+      require("karma-jasmine"),
-      require('karma-chrome-launcher'),
+      require("karma-chrome-launcher"),
-      require('karma-jasmine-html-reporter'),
+      require("karma-jasmine-html-reporter"),
-      require('karma-coverage-istanbul-reporter'),
+      require("karma-coverage-istanbul-reporter"),
-      require('@angular-devkit/build-angular/plugins/karma')
+      require("@angular-devkit/build-angular/plugins/karma"),
     ],
     client: {
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
+      clearContext: false, // leave Jasmine Spec Runner output visible in browser
     },
     coverageIstanbulReporter: {
-      dir: require('path').join(__dirname, './coverage/frontend'),
+      dir: require("path").join(__dirname, "./coverage/frontend"),
-      reports: ['html', 'lcovonly', 'text-summary'],
+      reports: ["html", "lcovonly", "text-summary"],
-      fixWebpackSourcePaths: true
+      fixWebpackSourcePaths: true,
     },
-    reporters: ['progress', 'kjhtml'],
+    reporters: ["progress", "kjhtml"],
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: true,
-    browsers: ['Chrome'],
+    browsers: ["Chrome"],
     singleRun: false,
-    restartOnFileChange: true
+    restartOnFileChange: true,
   });
 };

src/app/app.component.html

@@ -1,5 +1,4 @@
 <div class="container-fluid">
-
   <div class="sidebar">
     <div class="logo">
       <a class="simple-text logo-normal">
@@ -69,8 +68,16 @@
           -->
           <li class="adjustments-line text-center color-change">
             <span class="color-label"> LIGHT MODE </span>
-            <span class=" badge light-badge mr-2" (click)="changeDashboardColor('white-content')"> </span>
+            <span
-            <span class=" badge dark-badge ml-2" (click)="changeDashboardColor('black-content')"> </span>
+              class="badge light-badge mr-2"
+              (click)="changeDashboardColor('white-content')"
+            >
+            </span>
+            <span
+              class="badge dark-badge ml-2"
+              (click)="changeDashboardColor('black-content')"
+            >
+            </span>
             <span class="color-label"> DARK MODE </span>
           </li>
         </ul>

src/app/app.component.spec.ts

@@ -5,12 +5,8 @@ import { AppComponent } from './app.component';
 describe('AppComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [
+      imports: [RouterTestingModule],
-        RouterTestingModule
+      declarations: [AppComponent],
-      ],
-      declarations: [
-        AppComponent
-      ],
     }).compileComponents();
   }));
 
@@ -30,6 +26,8 @@ describe('AppComponent', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('.content span').textContent).toContain('frontend app is running!');
+    expect(compiled.querySelector('.content span').textContent).toContain(
+      'frontend app is running!'
+    );
   });
 });

src/app/app.component.ts

@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.css'],
 })
 export class AppComponent {
   /*
@@ -25,8 +25,7 @@ export class AppComponent {
     var body = document.getElementsByTagName('body')[0];
     if (body && color === 'white-content') {
       body.classList.add(color);
-    }
+    } else if (body.classList.contains('white-content')) {
-    else if(body.classList.contains('white-content')) {
       body.classList.remove('white-content');
     }
   }

src/app/app.module.ts

@@ -30,7 +30,7 @@ import { BacklogComponent } from './components/backlog/backlog.component';
     SprintTableComponent,
     DashboardComponent,
     UserstoryInnerTableComponent,
-    BacklogComponent
+    BacklogComponent,
   ],
   imports: [
     BrowserModule,

src/app/components/backlog/backlog.component.html

@@ -4,7 +4,9 @@
     <div class="row">
       <div class="col-lg-6 container-fluid"></div>
       <div align="right" class="col-lg-6 container-fluid">
-                <button class="btn btn-secondary" (click)="openSprintForm()">Neuer Sprint</button>
+        <button class="btn btn-secondary" (click)="openSprintForm()">
+          Neuer Sprint
+        </button>
       </div>
     </div>
 
@@ -24,14 +26,30 @@
             <h3 *ngIf="selectedSprint === currentSprint">Aktueller Sprint:</h3>
             <h3 *ngIf="selectedSprint !== currentSprint">Sprint:</h3>
             <div ngbDropdown="ngbDropdown" class="dropdown">
-                            <button ngbDropdownToggle="ngbDropdownToggle" class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+              <button
+                ngbDropdownToggle="ngbDropdownToggle"
+                class="btn btn-secondary dropdown-toggle"
+                type="button"
+                id="dropdownMenu2"
+                data-toggle="dropdown"
+                aria-haspopup="true"
+                aria-expanded="false"
+              >
                 {{ selectedSprint.title }}
                 ({{ toDateString(selectedSprint.startDate) }}
                 -
                 {{ toDateString(selectedSprint.endDate) }})
               </button>
-                            <div ngbDropdownMenu="ngbDropdownMenu" class="dropdown-menu" aria-labelledby="dropdownMenu2">
+              <div
-                                <option ngbDropdownItem="ngbDropdownItem" *ngFor="let s of sprints" (click)="this.selectedSprint = s;">
+                ngbDropdownMenu="ngbDropdownMenu"
+                class="dropdown-menu"
+                aria-labelledby="dropdownMenu2"
+              >
+                <option
+                  ngbDropdownItem="ngbDropdownItem"
+                  *ngFor="let s of sprints"
+                  (click)="this.selectedSprint = s"
+                >
                   {{ s.title }}
                   ({{ toDateString(selectedSprint.startDate) }}
                   -
@@ -50,17 +68,28 @@
           <div class="card" style="width: 150%;">
             <div class="card-body">
               <h4 class="card-title">{{ story.title }}</h4>
-                            <h6 class="card-subtitle mb-2 text-muted">Prio:
+              <h6 class="card-subtitle mb-2 text-muted">
-                                {{story.priority}}</h6>
+                Prio: {{ story.priority }}
+              </h6>
               <p class="card-text">{{ story.content }}</p>
               <div title="Badges">
-                                <span class="badge badge-primary">Category:
+                <span class="badge badge-primary"
-                                    {{story.categoryid || "N/A"}}</span>
+                  >Category: {{ story.categoryid || "N/A" }}</span
-                                <span class="badge badge-info">Status:
+                >
-                                    {{story.statusid || "N/A"}}</span>
+                <span class="badge badge-info"
+                  >Status: {{ story.statusid || "N/A" }}</span
+                >
               </div>
-                            <div style="text-align: right;" *ngIf="selectedSprint != undefined">
+              <div
-                                <button type="button" rel="tooltip" (click)="addToSprintBacklog(story)" class="btn btn-sm btn-success btn-icon">
+                style="text-align: right;"
+                *ngIf="selectedSprint != undefined"
+              >
+                <button
+                  type="button"
+                  rel="tooltip"
+                  (click)="addToSprintBacklog(story)"
+                  class="btn btn-sm btn-success btn-icon"
+                >
                   <i class="fas fa-plus-square"></i>
                 </button>
               </div>
@@ -74,17 +103,25 @@
           <div class="card" style="width: 150%;">
             <div class="card-body">
               <h4 class="card-title">{{ story.title }}</h4>
-                            <h6 class="card-subtitle mb-2 text-muted">Prio:
+              <h6 class="card-subtitle mb-2 text-muted">
-                                {{story.priority}}</h6>
+                Prio: {{ story.priority }}
+              </h6>
               <p class="card-text">{{ story.content }}</p>
               <div title="Badges">
-                                <span class="badge badge-primary">Category:
+                <span class="badge badge-primary"
-                                    {{story.categoryid || "N/A"}}</span>
+                  >Category: {{ story.categoryid || "N/A" }}</span
-                                <span class="badge badge-info">Status:
+                >
-                                    {{story.statusid || "N/A"}}</span>
+                <span class="badge badge-info"
+                  >Status: {{ story.statusid || "N/A" }}</span
+                >
               </div>
               <div style="text-align: right;">
-                                <button type="button" rel="tooltip" (click)="deleteFromSprintBacklog(story)" class="btn btn-danger btn-sm btn-icon">
+                <button
+                  type="button"
+                  rel="tooltip"
+                  (click)="deleteFromSprintBacklog(story)"
+                  class="btn btn-danger btn-sm btn-icon"
+                >
                   <i class="fa fa-trash"></i>
                 </button>
               </div>

src/app/components/backlog/backlog.component.ts

@@ -9,14 +9,11 @@ import {
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { SprintFormComponent } from '../sprint-form/sprint-form.component';
 
-
 @Component({
   selector: 'app-backlog',
   templateUrl: './backlog.component.html',
   styleUrls: ['./backlog.component.css'],
 })
-
-
 export class BacklogComponent {
   public status: ScrumStatus[] = [];
   public categories: ScrumCategory[] = [];
@@ -31,7 +28,7 @@ export class BacklogComponent{
    */
   constructor(
     private backendService: BackendService,
-    private modalService: NgbModal,
+    private modalService: NgbModal
   ) {
     backendService.getSprints().subscribe((response) => {
       if (response.status > 399) {
@@ -80,19 +77,19 @@ export class BacklogComponent{
    * The relation to the sprint is determined by the userstory's sprintid.
    * If no sprint is selected it just returns an empty array.
    */
-  public get choosen(): ScrumUserstory[]
+  public get choosen(): ScrumUserstory[] {
-  {
+    if (this.selectedSprint === undefined) {
-    if(this.selectedSprint === undefined){return null;}
+      return null;
-    return this.storys.filter(u => u.sprintid == this.selectedSprint.id);
+    }
+    return this.storys.filter((u) => u.sprintid == this.selectedSprint.id);
   }
 
   /**
    * Getter that returns an array with all userstories that aren't in any sprint.
    * The relation to no sprint is determined by the userstory's sprintid being undefined.
    */
-  public get backlog(): ScrumUserstory[]
+  public get backlog(): ScrumUserstory[] {
-  {
+    return this.storys.filter((u) => u.sprintid === undefined);
-    return this.storys.filter(u => u.sprintid === undefined);
   }
 
   /**
@@ -101,7 +98,9 @@ export class BacklogComponent{
    */
   public get currentSprint(): ScrumSprint {
     const now = Date.now();
-    return this.sprints.find(s => Date.parse(s.startDate) < now && Date.parse(s.endDate) > now);
+    return this.sprints.find(
+      (s) => Date.parse(s.startDate) < now && Date.parse(s.endDate) > now
+    );
   }
 
   //#endregion getters
@@ -145,10 +144,10 @@ export class BacklogComponent{
     const modalRef = this.modalService.open(SprintFormComponent, {
       backdrop: 'static',
       keyboard: true,
-      size: "md",
+      size: 'md',
     });
 
-    modalRef.result.then(result => {
+    modalRef.result.then((result) => {
       this.sprints.push(result);
     });
   }

src/app/components/dashboard/dashboard.component.html

@@ -1,36 +1,57 @@
 <div class="container-fluid">
   <div class="content">
-
     <h3>Dashboard</h3>
 
     <div>
-
       <div class="row px-3 py-2">
-
         <ng-container *ngIf="selectedSprint === undefined">
           <h3 class="mr-3 text-primary">Alle Userstories</h3>
-          <a [routerLink]="['sprints']">Lege einen Sprint an, um Userstories zu organisieren.</a>
+          <a [routerLink]="['sprints']"
+            >Lege einen Sprint an, um Userstories zu organisieren.</a
+          >
         </ng-container>
 
         <ng-container *ngIf="selectedSprint !== undefined">
-
+          <h3
-          <h3 class="mr-3 text-primary" *ngIf="selectedSprint === currentSprint">Aktueller Sprint:</h3>
+            class="mr-3 text-primary"
-          <h3 class="mr-3 text-primary" *ngIf="selectedSprint !== currentSprint">Sprint:</h3>
+            *ngIf="selectedSprint === currentSprint"
+          >
+            Aktueller Sprint:
+          </h3>
+          <h3
+            class="mr-3 text-primary"
+            *ngIf="selectedSprint !== currentSprint"
+          >
+            Sprint:
+          </h3>
           <h3 class="mr-3 custom-text-secondary">{{ selectedSprint.title }}</h3>
-          <h3 class="mr-3">{{toDateString(selectedSprint.startDate)}} - {{toDateString(selectedSprint.endDate)}}</h3>
+          <h3 class="mr-3">
+            {{ toDateString(selectedSprint.startDate) }} -
+            {{ toDateString(selectedSprint.endDate) }}
+          </h3>
 
           <label class="mr-3">
-            <select class="select custom-select custom-text-secondary" [(ngModel)]="selectedSprint">
+            <select
+              class="select custom-select custom-text-secondary"
+              [(ngModel)]="selectedSprint"
+            >
               <option class="bg-secondary text-dark" [ngValue]="currentSprint">
                 {{ currentSprint.title }} (aktuell)
               </option>
-              <option value="" disabled="disabled">─────────────────────────</option>
+              <option value="" disabled="disabled"
-              <option class="text-dark" *ngFor="let sprint of sprints" [ngValue]="sprint">
+                >─────────────────────────</option
+              >
+              <option
+                class="text-dark"
+                *ngFor="let sprint of sprints"
+                [ngValue]="sprint"
+              >
                 <ng-container *ngIf="sprint === currentSprint">
                   {{ sprint.title }} (aktuell)
                 </ng-container>
                 <ng-container *ngIf="sprint !== currentSprint">
-                  {{sprint.title}} ({{toDateString(sprint.startDate)}} - {{toDateString(sprint.endDate)}})
+                  {{ sprint.title }} ({{ toDateString(sprint.startDate) }} -
+                  {{ toDateString(sprint.endDate) }})
                 </ng-container>
               </option>
             </select>
@@ -46,13 +67,10 @@
           >
             Verbleibende Tage: {{ getRemainingDaysInSprint() }}
           </h3>
-
         </ng-container>
-
       </div>
 
       <div class="row">
-
         <div class="p-3 col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12">
           <div class="card">
             <div class="card-header">
@@ -61,17 +79,17 @@
               </span>
             </div>
             <div class="card-body">
-              <div *ngIf="selectedSprint !== undefined && usedStatus.length === 0">
+              <div
-                Zum Sprint "{{selectedSprint.title}}" sind aktuell keine Userstories vorhanden.
+                *ngIf="selectedSprint !== undefined && usedStatus.length === 0"
+              >
+                Zum Sprint "{{ selectedSprint.title }}" sind aktuell keine
+                Userstories vorhanden.
               </div>
               <canvas id="done-stories-chart"></canvas>
             </div>
           </div>
           <div class="card-deck">
-            <div
+            <div class="card text-center" *ngFor="let status of usedStatus">
-              class="card text-center"
-              *ngFor="let status of usedStatus"
-            >
               <div class="card-header">
                 <span class="text-large">
                   {{ status.title }}
@@ -89,13 +107,13 @@
         <div class="p-3 col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12">
           <div class="card">
             <div class="card-body">
-              <app-userstory-inner-table [storys]="selectedSprintUserstories"></app-userstory-inner-table>
+              <app-userstory-inner-table
+                [storys]="selectedSprintUserstories"
+              ></app-userstory-inner-table>
+            </div>
           </div>
         </div>
       </div>
-
-      </div>
-
     </div>
   </div>
 </div>

src/app/components/dashboard/dashboard.component.ts

@@ -1,31 +1,44 @@
 import { Component, OnChanges } from '@angular/core';
 import { forkJoin } from 'rxjs';
 import Chart from 'chart.js';
-import {BackendService, ScrumSprint, ScrumStatus, ScrumUserstory} from '../../services/backend.service';
+import {
+  BackendService,
+  ScrumSprint,
+  ScrumStatus,
+  ScrumUserstory,
+} from '../../services/backend.service';
 
 @Component({
   selector: 'app-dashboard',
   templateUrl: 'dashboard.component.html',
-  styleUrls: ['./dashboard.component.css']
+  styleUrls: ['./dashboard.component.css'],
 })
 export class DashboardComponent {
   /**
    * Returns the status that are used by at least one userstory.
    */
   public get usedStatus(): ScrumStatus[] {
-    return this.status.filter(s => this.selectedSprintUserstories.find(us => us.statusid === s.id) !== undefined);
+    return this.status.filter(
+      (s) =>
+        this.selectedSprintUserstories.find((us) => us.statusid === s.id) !==
+        undefined
+    );
   }
 
   public get selectedSprintUserstories(): ScrumUserstory[] {
     if (this.selectedSprint === undefined) {
       return this.userstories;
     }
-    return this.userstories.filter(us => us.sprintid === this.selectedSprint.id);
+    return this.userstories.filter(
+      (us) => us.sprintid === this.selectedSprint.id
+    );
   }
 
   public get currentSprint(): ScrumSprint {
     const now = Date.now();
-    return this.sprints.find(s => Date.parse(s.startDate) < now && Date.parse(s.endDate) > now);
+    return this.sprints.find(
+      (s) => Date.parse(s.startDate) < now && Date.parse(s.endDate) > now
+    );
   }
 
   private _selectedSprint: ScrumSprint;
@@ -53,10 +66,17 @@ export class DashboardComponent {
   constructor(private backendService: BackendService) {
     // download userstories, status and sprints and update
     // the chart whenever a new response is there
-    forkJoin([backendService.getUserstories(), backendService.getAllStatus(), backendService.getSprints()])
+    forkJoin([
-      .subscribe(results => {
+      backendService.getUserstories(),
+      backendService.getAllStatus(),
+      backendService.getSprints(),
+    ]).subscribe((results) => {
       const [userstoryResponse, statusResponse, sprintResponse] = results;
-        if (userstoryResponse.status > 399 || statusResponse.status > 399 || sprintResponse.status > 399) {
+      if (
+        userstoryResponse.status > 399 ||
+        statusResponse.status > 399 ||
+        sprintResponse.status > 399
+      ) {
         alert('Fehler');
       } else {
         this.userstories.push(...userstoryResponse.body);
@@ -77,31 +97,35 @@ export class DashboardComponent {
 
   private createChart() {
     // @ts-ignore
-    const context = document.getElementById('done-stories-chart').getContext('2d');
+    const context = document
+      .getElementById('done-stories-chart')
+      .getContext('2d');
 
     if (this.usedStatus.length === 0) {
       this.chart.destroy();
-    }
+    } else {
-
-    else {
       this.chart = new Chart(context, {
         type: 'pie',
         data: {
-          labels: this.usedStatus.map(s => s.title),
+          labels: this.usedStatus.map((s) => s.title),
-          datasets: [{
+          datasets: [
-            data: this.usedStatus.map(s => this.getNumberOfUserstoriesByStatus(s)),
+            {
+              data: this.usedStatus.map((s) =>
+                this.getNumberOfUserstoriesByStatus(s)
+              ),
               backgroundColor: this.getBackgroundColors(),
               options: {
                 legend: {
                   display: true,
                   position: 'right',
                   labels: {
-                  fontColor: 'rgba(255, 255, 255, 0.8)'
+                    fontColor: 'rgba(255, 255, 255, 0.8)',
-                }
+                  },
-              }
+                },
-            }
+              },
-          }]
+            },
-        }
+          ],
+        },
       });
       this.chart.update();
       this.chart.render();
@@ -133,14 +157,18 @@ export class DashboardComponent {
   }
 
   public getNumberOfUserstoriesByStatus(status: ScrumStatus): number {
-    return this.selectedSprintUserstories.filter(us => us.statusid === status.id).length;
+    return this.selectedSprintUserstories.filter(
+      (us) => us.statusid === status.id
+    ).length;
   }
 
   public getRemainingDaysInSprint(): number {
     if (this.selectedSprint === undefined) {
       return undefined;
     }
-    return Math.floor((Date.parse(this.selectedSprint.endDate) - Date.now()) / 86400000);
+    return Math.floor(
+      (Date.parse(this.selectedSprint.endDate) - Date.now()) / 86400000
+    );
   }
 
   /**
@@ -154,7 +182,8 @@ export class DashboardComponent {
       return undefined;
     }
     const deltaFromNow = Date.parse(sprint.endDate) - now;
-    const deltaFromStart = Date.parse(sprint.endDate) - Date.parse(sprint.startDate);
+    const deltaFromStart =
-    return Math.floor(3 * deltaFromNow / deltaFromStart);
+      Date.parse(sprint.endDate) - Date.parse(sprint.startDate);
+    return Math.floor((3 * deltaFromNow) / deltaFromStart);
   }
 }

src/app/components/sprint-form/sprint-form.component.html

@@ -10,22 +10,52 @@
       <form (ngSubmit)="onSubmit()">
         <div class="form-group">
           <label for="Title">Titel</label>
-          <input type="text" class="form-control" id="Title" required name="title" [(ngModel)]="sprint.title"
+          <input
-            id="titleField">
+            type="text"
+            class="form-control"
+            id="Title"
+            required
+            name="title"
+            [(ngModel)]="sprint.title"
+            id="titleField"
+          />
         </div>
         <div class="form-group">
           <label for="date">Startdatum</label>
-          <input #startDate type="Date" class="form-control" id="Date" required name="date"
+          <input
-            [value]="sprint.startDate | date: 'yyyy-MM-dd'" (change)="sprint.startDate=startDate.value"
+            #startDate
-            id="startDateField">
+            type="Date"
+            class="form-control"
+            id="Date"
+            required
+            name="date"
+            [value]="sprint.startDate | date: 'yyyy-MM-dd'"
+            (change)="sprint.startDate = startDate.value"
+            id="startDateField"
+          />
         </div>
         <div class="form-group">
           <label for="Date">Enddatum</label>
-          <input #endDate type="date" class="form-control" id="Date" required name="date"
+          <input
-            [value]="sprint.endDate | date: 'yyyy-MM-dd'" (change)="sprint.endDate=endDate.value" id="endDateField">
+            #endDate
+            type="date"
+            class="form-control"
+            id="Date"
+            required
+            name="date"
+            [value]="sprint.endDate | date: 'yyyy-MM-dd'"
+            (change)="sprint.endDate = endDate.value"
+            id="endDateField"
+          />
         </div>
         <div>
-          <button (click)="onClose()" type="dismiss" class="btn btn-secondary" data-dismiss="modal">Abbrechen
+          <button
+            (click)="onClose()"
+            type="dismiss"
+            class="btn btn-secondary"
+            data-dismiss="modal"
+          >
+            Abbrechen
           </button>
           <button type="submit" class="btn btn-primary">Sprint starten</button>
         </div>

src/app/components/sprint-form/sprint-form.component.ts

@@ -1,15 +1,12 @@
 // Importing necessary components and interfaces.
 import { Component, OnInit, Input } from '@angular/core';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
-import {
+import { BackendService, ScrumSprint } from '../../services/backend.service';
-	BackendService,
-	ScrumSprint
-} from '../../services/backend.service';
 
 @Component({
   selector: 'app-task-form',
   templateUrl: './sprint-form.component.html',
-	styleUrls: ['./sprint-form.component.css']
+  styleUrls: ['./sprint-form.component.css'],
 })
 
 // Class implements the logic for a popup window form to create and modify sprints.
@@ -18,7 +15,10 @@ export class SprintFormComponent implements OnInit {
   public editing: Boolean;
   public sprintid: string;
 
-	constructor(private backendService: BackendService, private activeModalService: NgbActiveModal) { }
+  constructor(
+    private backendService: BackendService,
+    private activeModalService: NgbActiveModal
+  ) {}
 
   // If no sprint exists a new one will be created.
   // In other cases the sprint exists and gets modifiable.

src/app/components/tabels/sprint/sprint-table.component.html

@@ -4,40 +4,66 @@
       Sprints
     </h3>
 
-    <button class="btn btn-secondary" (click)="openSprintForm()">Neuer Sprint</button>
+    <button class="btn btn-secondary" (click)="openSprintForm()">
+      Neuer Sprint
+    </button>
     <table class="table">
       <thead>
         <tr>
           <th (click)="sortById()" class="sortable">
             <span>ID</span>
             <span>
-              <span *ngIf="sortBy != 'id'"><i class="fa fa-sort fa-lg"></i></span>
+              <span *ngIf="sortBy != 'id'"
-              <span *ngIf="sortDescending && sortBy === 'id'"><i class="fa fa-sort-up fa-lg"></i></span>
+                ><i class="fa fa-sort fa-lg"></i
-              <span *ngIf="sortDescending === false && sortBy === 'id'"><i class="fa fa-sort-down fa-lg"></i></span>
+              ></span>
+              <span *ngIf="sortDescending && sortBy === 'id'"
+                ><i class="fa fa-sort-up fa-lg"></i
+              ></span>
+              <span *ngIf="sortDescending === false && sortBy === 'id'"
+                ><i class="fa fa-sort-down fa-lg"></i
+              ></span>
             </span>
           </th>
           <th (click)="sortByTitle()" class="sortable">
             <span>Titel</span>
             <span>
-              <span *ngIf="sortBy != 'title'"><i class="fa fa-sort fa-lg"></i></span>
+              <span *ngIf="sortBy != 'title'"
-              <span *ngIf="sortDescending && sortBy === 'title'"><i class="fa fa-sort-up fa-lg"></i></span>
+                ><i class="fa fa-sort fa-lg"></i
-              <span *ngIf="sortDescending === false && sortBy === 'title'"><i class="fa fa-sort-down fa-lg"></i></span>
+              ></span>
+              <span *ngIf="sortDescending && sortBy === 'title'"
+                ><i class="fa fa-sort-up fa-lg"></i
+              ></span>
+              <span *ngIf="sortDescending === false && sortBy === 'title'"
+                ><i class="fa fa-sort-down fa-lg"></i
+              ></span>
             </span>
           </th>
           <th (click)="sortByStartDate()" class="sortable">
             <span>Start</span>
             <span>
-              <span *ngIf="sortBy != 'startDate'"><i class="fa fa-sort fa-lg"></i></span>
+              <span *ngIf="sortBy != 'startDate'"
-              <span *ngIf="sortDescending && sortBy === 'startDate'"><i class="fa fa-sort-up fa-lg"></i></span>
+                ><i class="fa fa-sort fa-lg"></i
-              <span *ngIf="sortDescending === false && sortBy === 'startDate'"><i class="fa fa-sort-down fa-lg"></i></span>
+              ></span>
+              <span *ngIf="sortDescending && sortBy === 'startDate'"
+                ><i class="fa fa-sort-up fa-lg"></i
+              ></span>
+              <span *ngIf="sortDescending === false && sortBy === 'startDate'"
+                ><i class="fa fa-sort-down fa-lg"></i
+              ></span>
             </span>
           </th>
           <th (click)="sortByEndDate()" class="sortable">
             <span>End</span>
             <span>
-              <span *ngIf="sortBy != 'endDate'"><i class="fa fa-sort fa-lg"></i></span>
+              <span *ngIf="sortBy != 'endDate'"
-              <span *ngIf="sortDescending && sortBy === 'endDate'"><i class="fa fa-sort-up fa-lg"></i></span>
+                ><i class="fa fa-sort fa-lg"></i
-              <span *ngIf="sortDescending === false && sortBy === 'endDate'"><i class="fa fa-sort-down fa-lg"></i></span>
+              ></span>
+              <span *ngIf="sortDescending && sortBy === 'endDate'"
+                ><i class="fa fa-sort-up fa-lg"></i
+              ></span>
+              <span *ngIf="sortDescending === false && sortBy === 'endDate'"
+                ><i class="fa fa-sort-down fa-lg"></i
+              ></span>
             </span>
           </th>
           <th></th>
@@ -45,22 +71,34 @@
       </thead>
 
       <tbody>
-        <tr *ngFor="let sprint of items" [class.table-info]="sprint.id === highlightId">
+        <tr
+          *ngFor="let sprint of items"
+          [class.table-info]="sprint.id === highlightId"
+        >
           <td>{{ sprint.id }}</td>
           <td>{{ sprint.title }}</td>
-          <td>{{sprint.startDate | date:'dd.MM.yyyy'}}</td>
+          <td>{{ sprint.startDate | date: "dd.MM.yyyy" }}</td>
-          <td>{{sprint.endDate | date:'dd.MM.yyyy'}}</td>
+          <td>{{ sprint.endDate | date: "dd.MM.yyyy" }}</td>
           <td>
-            <button type="button" rel="tooltip" (click)="openSprintForm(sprint)" class="btn btn-success btn-sm btn-icon">
+            <button
+              type="button"
+              rel="tooltip"
+              (click)="openSprintForm(sprint)"
+              class="btn btn-success btn-sm btn-icon"
+            >
               <i class="fa fa-pencil-alt"></i>
             </button>
-            <button type="button" rel="tooltip" (click)="deleteSprint(sprint)" class="btn btn-danger btn-sm btn-icon">
+            <button
+              type="button"
+              rel="tooltip"
+              (click)="deleteSprint(sprint)"
+              class="btn btn-danger btn-sm btn-icon"
+            >
               <i class="fa fa-trash"></i>
             </button>
           </td>
         </tr>
       </tbody>
-
     </table>
   </div>
 </div>

src/app/components/tabels/task/task-table.component.html

@@ -1,7 +1,10 @@
 <div class="container-fluid">
   <div class="content">
     <h3>
-      <a *ngIf="filterUserstoryId" [routerLink]="['/userstories', {id: filterUserstoryId}]">
+      <a
+        *ngIf="filterUserstoryId"
+        [routerLink]="['/userstories', { id: filterUserstoryId }]"
+      >
         Userstory #{{ filterUserstoryId }}
         &gt;
       </a>
@@ -11,7 +14,9 @@
       <a [routerLink]="'/tasks'">Alle Tasks anzeigen</a>
     </div>
 
-    <button class="btn btn-secondary" (click)="openTaskForm()">Neuer Task</button>
+    <button class="btn btn-secondary" (click)="openTaskForm()">
+      Neuer Task
+    </button>
 
     <table class="table">
       <thead>
@@ -19,66 +24,118 @@
           <th (click)="sortById()" class="sortable">
             <span>ID</span>
             <span>
-              <span *ngIf="sortBy != 'id'"><i class="fa fa-sort fa-lg"></i></span>
+              <span *ngIf="sortBy != 'id'"
-              <span *ngIf="sortDescending && sortBy === 'id'"><i class="fa fa-sort-up fa-lg"></i></span>
+                ><i class="fa fa-sort fa-lg"></i
-              <span *ngIf="sortDescending === false && sortBy === 'id'"><i class="fa fa-sort-down fa-lg"></i></span>
+              ></span>
+              <span *ngIf="sortDescending && sortBy === 'id'"
+                ><i class="fa fa-sort-up fa-lg"></i
+              ></span>
+              <span *ngIf="sortDescending === false && sortBy === 'id'"
+                ><i class="fa fa-sort-down fa-lg"></i
+              ></span>
             </span>
           </th>
           <th (click)="sortByTitle()" class="sortable">
             <span>Titel</span>
             <span>
-              <span *ngIf="sortBy != 'title'"><i class="fa fa-sort fa-lg"></i></span>
+              <span *ngIf="sortBy != 'title'"
-              <span *ngIf="sortDescending && sortBy === 'title'"><i class="fa fa-sort-up fa-lg"></i></span>
+                ><i class="fa fa-sort fa-lg"></i
-              <span *ngIf="sortDescending === false && sortBy === 'title'"><i class="fa fa-sort-down fa-lg"></i></span>
+              ></span>
+              <span *ngIf="sortDescending && sortBy === 'title'"
+                ><i class="fa fa-sort-up fa-lg"></i
+              ></span>
+              <span *ngIf="sortDescending === false && sortBy === 'title'"
+                ><i class="fa fa-sort-down fa-lg"></i
+              ></span>
             </span>
           </th>
           <th (click)="sortByTasks()" class="sortable">
             <span>Userstory</span>
             <span>
-              <span *ngIf="sortBy != 'userstory'"><i class="fa fa-sort fa-lg"></i></span>
+              <span *ngIf="sortBy != 'userstory'"
-              <span *ngIf="sortDescending && sortBy === 'userstory'"><i class="fa fa-sort-up fa-lg"></i></span>
+                ><i class="fa fa-sort fa-lg"></i
-              <span *ngIf="sortDescending === false && sortBy === 'userstory'"><i class="fa fa-sort-down fa-lg"></i></span>
+              ></span>
+              <span *ngIf="sortDescending && sortBy === 'userstory'"
+                ><i class="fa fa-sort-up fa-lg"></i
+              ></span>
+              <span *ngIf="sortDescending === false && sortBy === 'userstory'"
+                ><i class="fa fa-sort-down fa-lg"></i
+              ></span>
             </span>
           </th>
           <th (click)="sortByStatus()" class="sortable">
             <span>Status</span>
             <span>
-              <span *ngIf="sortBy != 'statusid'"><i class="fa fa-sort fa-lg"></i></span>
+              <span *ngIf="sortBy != 'statusid'"
-              <span *ngIf="sortDescending && sortBy === 'statusid'"><i class="fa fa-sort-up fa-lg"></i></span>
+                ><i class="fa fa-sort fa-lg"></i
-              <span *ngIf="sortDescending === false && sortBy === 'statusid'"><i class="fa fa-sort-down fa-lg"></i></span>
+              ></span>
+              <span *ngIf="sortDescending && sortBy === 'statusid'"
+                ><i class="fa fa-sort-up fa-lg"></i
+              ></span>
+              <span *ngIf="sortDescending === false && sortBy === 'statusid'"
+                ><i class="fa fa-sort-down fa-lg"></i
+              ></span>
             </span>
           </th>
           <th class="sortable">
             <div class="d-inline-block">
               <span (click)="sortByPrio()">Priorität: </span>
               <div ngbDropdown class="d-inline-block">
-                <span id="dropdownBasic1" ngbDropdownToggle>{{filterPriority || "All"}}</span>
+                <span id="dropdownBasic1" ngbDropdownToggle>{{
+                  filterPriority || "All"
+                }}</span>
                 <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
-                  <option ngbDropdownItem (click)="filterPriority=null">All</option>
+                  <option ngbDropdownItem (click)="filterPriority = null"
-                  <option ngbDropdownItem *ngFor="let p of getAllPriorities()" (click)="filterPriority=p">{{p}}</option>
+                    >All</option
+                  >
+                  <option
+                    ngbDropdownItem
+                    *ngFor="let p of getAllPriorities()"
+                    (click)="filterPriority = p"
+                    >{{ p }}</option
+                  >
                 </div>
               </div>
               <span (click)="sortByPrio()">
-                <span *ngIf="sortBy != 'priority'"><i class="fa fa-sort fa-lg"></i></span>
+                <span *ngIf="sortBy != 'priority'"
-                <span *ngIf="sortDescending && sortBy === 'priority'"><i class="fa fa-sort-up fa-lg"></i></span>
+                  ><i class="fa fa-sort fa-lg"></i
-                <span *ngIf="sortDescending === false && sortBy === 'priority'"><i class="fa fa-sort-down fa-lg"></i></span>
+                ></span>
+                <span *ngIf="sortDescending && sortBy === 'priority'"
+                  ><i class="fa fa-sort-up fa-lg"></i
+                ></span>
+                <span *ngIf="sortDescending === false && sortBy === 'priority'"
+                  ><i class="fa fa-sort-down fa-lg"></i
+                ></span>
               </span>
             </div>
           </th>
           <th (click)="sortByAssigned()" class="sortable">
             <span>Assigned To</span>
             <span>
-              <span *ngIf="sortBy != 'assignedtoid'"><i class="fa fa-sort fa-lg"></i></span>
+              <span *ngIf="sortBy != 'assignedtoid'"
-              <span *ngIf="sortDescending && sortBy === 'assignedtoid'"><i class="fa fa-sort-up fa-lg"></i></span>
+                ><i class="fa fa-sort fa-lg"></i
-              <span *ngIf="sortDescending === false && sortBy === 'assignedtoid'"><i class="fa fa-sort-down fa-lg"></i></span>
+              ></span>
+              <span *ngIf="sortDescending && sortBy === 'assignedtoid'"
+                ><i class="fa fa-sort-up fa-lg"></i
+              ></span>
+              <span
+                *ngIf="sortDescending === false && sortBy === 'assignedtoid'"
+                ><i class="fa fa-sort-down fa-lg"></i
+              ></span>
             </span>
           </th>
           <th (click)="sortByCategory()" class="sortable">
             <span>Category</span>
             <span>
-              <span *ngIf="sortBy != 'categoryid'"><i class="fa fa-sort fa-lg"></i></span>
+              <span *ngIf="sortBy != 'categoryid'"
-              <span *ngIf="sortDescending && sortBy === 'categoryid'"><i class="fa fa-sort-up fa-lg"></i></span>
+                ><i class="fa fa-sort fa-lg"></i
-              <span *ngIf="sortDescending === false && sortBy === 'categoryid'"><i class="fa fa-sort-down fa-lg"></i></span>
+              ></span>
+              <span *ngIf="sortDescending && sortBy === 'categoryid'"
+                ><i class="fa fa-sort-up fa-lg"></i
+              ></span>
+              <span *ngIf="sortDescending === false && sortBy === 'categoryid'"
+                ><i class="fa fa-sort-down fa-lg"></i
+              ></span>
             </span>
           </th>
           <th></th>
@@ -86,7 +143,10 @@
       </thead>
 
       <tbody>
-        <tr *ngFor="let task of filteredItems" [class.table-info]="task.id === highlightId">
+        <tr
+          *ngFor="let task of filteredItems"
+          [class.table-info]="task.id === highlightId"
+        >
           <td>{{ task.id }}</td>
           <td>{{ task.title }}</td>
           <td>
@@ -111,16 +171,25 @@
             </a>
           </td>
           <td>
-            <button type="button" rel="tooltip" (click)="openTaskForm(task)" class="btn btn-success btn-sm btn-icon">
+            <button
+              type="button"
+              rel="tooltip"
+              (click)="openTaskForm(task)"
+              class="btn btn-success btn-sm btn-icon"
+            >
               <i class="fa fa-pencil-alt"></i>
             </button>
-            <button type="button" rel="tooltip" (click)="deleteTask(task)" class="btn btn-danger btn-sm btn-icon">
+            <button
+              type="button"
+              rel="tooltip"
+              (click)="deleteTask(task)"
+              class="btn btn-danger btn-sm btn-icon"
+            >
               <i class="fa fa-trash"></i>
             </button>
           </td>
         </tr>
       </tbody>
-
     </table>
   </div>
 </div>

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

@@ -1,64 +1,108 @@
-<button class="btn btn-secondary my-3" (click)="openUserstoryForm()">Neue Userstory</button>
+<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>
           <span *ngIf="sortBy != 'id'"><i class="fa fa-sort fa-lg"></i></span>
-            <span *ngIf="sortDescending && sortBy === 'id'"><i class="fa fa-sort-up fa-lg"></i></span>
+          <span *ngIf="sortDescending && sortBy === 'id'"
-            <span *ngIf="sortDescending === false && sortBy === 'id'"><i class="fa fa-sort-down fa-lg"></i></span>
+            ><i class="fa fa-sort-up fa-lg"></i
+          ></span>
+          <span *ngIf="sortDescending === false && sortBy === 'id'"
+            ><i class="fa fa-sort-down fa-lg"></i
+          ></span>
         </span>
       </th>
       <th (click)="sortByTitle()" class="sortable">
         <span>Titel</span>
         <span>
-            <span *ngIf="sortBy != 'title'"><i class="fa fa-sort fa-lg"></i></span>
+          <span *ngIf="sortBy != 'title'"
-            <span *ngIf="sortDescending && sortBy === 'title'"><i class="fa fa-sort-up fa-lg"></i></span>
+            ><i class="fa fa-sort fa-lg"></i
-            <span *ngIf="sortDescending === false && sortBy === 'title'"><i class="fa fa-sort-down fa-lg"></i></span>
+          ></span>
+          <span *ngIf="sortDescending && sortBy === 'title'"
+            ><i class="fa fa-sort-up fa-lg"></i
+          ></span>
+          <span *ngIf="sortDescending === false && sortBy === 'title'"
+            ><i class="fa fa-sort-down fa-lg"></i
+          ></span>
         </span>
       </th>
       <th (click)="sortByTasks()" class="sortable">
         <span>Tasks</span>
         <span>
-            <span *ngIf="sortBy != 'tasks'"><i class="fa fa-sort fa-lg"></i></span>
+          <span *ngIf="sortBy != 'tasks'"
-            <span *ngIf="sortDescending && sortBy === 'tasks'"><i class="fa fa-sort-up fa-lg"></i></span>
+            ><i class="fa fa-sort fa-lg"></i
-            <span *ngIf="sortDescending === false && sortBy === 'tasks'"><i class="fa fa-sort-down fa-lg"></i></span>
+          ></span>
+          <span *ngIf="sortDescending && sortBy === 'tasks'"
+            ><i class="fa fa-sort-up fa-lg"></i
+          ></span>
+          <span *ngIf="sortDescending === false && sortBy === 'tasks'"
+            ><i class="fa fa-sort-down fa-lg"></i
+          ></span>
         </span>
       </th>
       <th (click)="sortByStatus()" class="sortable">
         <span>Status</span>
         <span>
-            <span *ngIf="sortBy != 'statusid'"><i class="fa fa-sort fa-lg"></i></span>
+          <span *ngIf="sortBy != 'statusid'"
-            <span *ngIf="sortDescending && sortBy === 'statusid'"><i class="fa fa-sort-up fa-lg"></i></span>
+            ><i class="fa fa-sort fa-lg"></i
-            <span *ngIf="sortDescending === false && sortBy === 'statusid'"><i class="fa fa-sort-down fa-lg"></i></span>
+          ></span>
+          <span *ngIf="sortDescending && sortBy === 'statusid'"
+            ><i class="fa fa-sort-up fa-lg"></i
+          ></span>
+          <span *ngIf="sortDescending === false && sortBy === 'statusid'"
+            ><i class="fa fa-sort-down fa-lg"></i
+          ></span>
         </span>
       </th>
       <th class="sortable">
         <div class="d-inline-block">
           <span (click)="sortByPrio()">Priorität: </span>
           <div ngbDropdown class="d-inline-block">
-              <span id="dropdownBasic1" ngbDropdownToggle>{{filterPriority || "All"}}</span>
+            <span id="dropdownBasic1" ngbDropdownToggle>{{
+              filterPriority || "All"
+            }}</span>
             <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
-                <option ngbDropdownItem (click)="filterPriority=null">All</option>
+              <option ngbDropdownItem (click)="filterPriority = null"
-                <option ngbDropdownItem *ngFor="let p of getAllPriorities()" (click)="filterPriority=p">{{p}}</option>
+                >All</option
+              >
+              <option
+                ngbDropdownItem
+                *ngFor="let p of getAllPriorities()"
+                (click)="filterPriority = p"
+                >{{ p }}</option
+              >
             </div>
           </div>
           <span (click)="sortByPrio()">
-              <span *ngIf="sortBy != 'priority'"><i class="fa fa-sort fa-lg"></i></span>
+            <span *ngIf="sortBy != 'priority'"
-              <span *ngIf="sortDescending && sortBy === 'priority'"><i class="fa fa-sort-up fa-lg"></i></span>
+              ><i class="fa fa-sort fa-lg"></i
-              <span *ngIf="sortDescending === false && sortBy === 'priority'"><i class="fa fa-sort-down fa-lg"></i></span>
+            ></span>
+            <span *ngIf="sortDescending && sortBy === 'priority'"
+              ><i class="fa fa-sort-up fa-lg"></i
+            ></span>
+            <span *ngIf="sortDescending === false && sortBy === 'priority'"
+              ><i class="fa fa-sort-down fa-lg"></i
+            ></span>
           </span>
         </div>
       </th>
       <th (click)="sortByCategory()" class="sortable">
         <span>Category</span>
         <span>
-            <span *ngIf="sortBy != 'categoryid'"><i class="fa fa-sort fa-lg"></i></span>
+          <span *ngIf="sortBy != 'categoryid'"
-            <span *ngIf="sortDescending && sortBy === 'categoryid'"><i class="fa fa-sort-up fa-lg"></i></span>
+            ><i class="fa fa-sort fa-lg"></i
-            <span *ngIf="sortDescending === false && sortBy === 'categoryid'"><i class="fa fa-sort-down fa-lg"></i></span>
+          ></span>
+          <span *ngIf="sortDescending && sortBy === 'categoryid'"
+            ><i class="fa fa-sort-up fa-lg"></i
+          ></span>
+          <span *ngIf="sortDescending === false && sortBy === 'categoryid'"
+            ><i class="fa fa-sort-down fa-lg"></i
+          ></span>
         </span>
       </th>
       <th></th>
@@ -66,7 +110,10 @@
   </thead>
 
   <tbody>
-    <tr *ngFor="let userstory of filteredItems"  [class.table-info]="userstory.id === highlightId">
+    <tr
+      *ngFor="let userstory of filteredItems"
+      [class.table-info]="userstory.id === highlightId"
+    >
       <td>{{ userstory.id }}</td>
       <td>{{ userstory.title }}</td>
       <td>
@@ -86,14 +133,23 @@
         </a>
       </td>
       <td>
-        <button type="button" rel="tooltip" (click)="openUserstoryForm(userstory)" class="btn btn-success btn-sm btn-icon">
+        <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">
+        <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/components/task-form/task-form.component.html

@@ -10,14 +10,29 @@
         <div class="col-8" style="text-align: left;">
           <h4 class="card-title">Neuen Task anlegen</h4>
           <div ngbDropdown class="dropdown card-text">
-                        <span ngbDropdownToggle class="dropdown" id="dropdownMenuUserstory" data-toggle="dropdown"
+            <span
-                            aria-haspopup="true" aria-expanded="false">
+              ngbDropdownToggle
-                            Gehört zu Story: {{getUserstoryTitleById(task.userstoryid) || "Keine"}}
+              class="dropdown"
+              id="dropdownMenuUserstory"
+              data-toggle="dropdown"
+              aria-haspopup="true"
+              aria-expanded="false"
+            >
+              Gehört zu Story:
+              {{ getUserstoryTitleById(task.userstoryid) || "Keine" }}
               <i class="fa fa-caret-down"></i>
             </span>
-                        <div ngbDropdownMenu class="dropdown-menu" aria-labelledby="dropdownMenuUserstory">
+            <div
-                            <option ngbDropdownItem *ngFor="let userstory of userstories"
+              ngbDropdownMenu
-                                (click)="task.userstoryid = userstory.id">{{ userstory.title }}</option>
+              class="dropdown-menu"
+              aria-labelledby="dropdownMenuUserstory"
+            >
+              <option
+                ngbDropdownItem
+                *ngFor="let userstory of userstories"
+                (click)="task.userstoryid = userstory.id"
+                >{{ userstory.title }}</option
+              >
             </div>
           </div>
         </div>
@@ -28,74 +43,166 @@
           <div class="col-8">
             <div class="form-group">
               <label for="Title">Titel</label>
-                            <input type="text" class="form-control" id="Title" required name="title"
+              <input
-                                [(ngModel)]="task.title" id="titleField" />
+                type="text"
+                class="form-control"
+                id="Title"
+                required
+                name="title"
+                [(ngModel)]="task.title"
+                id="titleField"
+              />
             </div>
             <div class="form-group">
               <label for="Inhalt">What to do?</label>
-                            <textarea type="text" class="form-control" id="Story" required name="story" rows="5"
+              <textarea
-                                [(ngModel)]="task.content"></textarea>
+                type="text"
+                class="form-control"
+                id="Story"
+                required
+                name="story"
+                rows="5"
+                [(ngModel)]="task.content"
+              ></textarea>
             </div>
           </div>
           <div class="col-4">
             <div ngbDropdown class="dropdown">
-                            <button ngbDropdownToggle class="btn btn-secondary dropdown-toggle" type="button"
+              <button
-                                id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                ngbDropdownToggle
+                class="btn btn-secondary dropdown-toggle"
+                type="button"
+                id="dropdownMenu2"
+                data-toggle="dropdown"
+                aria-haspopup="true"
+                aria-expanded="false"
+              >
                 Prio: {{ task.priority }}
               </button>
-                            <div ngbDropdownMenu class="dropdown-menu" aria-labelledby="dropdownMenu2">
+              <div
-                                <option ngbDropdownItem *ngFor="let p of getAllPriorities()" (click)="task.priority=p">
+                ngbDropdownMenu
-                                    {{p}}</option>
+                class="dropdown-menu"
+                aria-labelledby="dropdownMenu2"
+              >
+                <option
+                  ngbDropdownItem
+                  *ngFor="let p of getAllPriorities()"
+                  (click)="task.priority = p"
+                >
+                  {{ p }}</option
+                >
               </div>
             </div>
             <div class="form-group">
               <div ngbDropdown class="dropdown" [autoClose]="false">
-                                <button ngbDropdownToggle class="btn btn-secondary dropdown-toggle" type="button"
+                <button
-                                    id="dropdownMenu3" data-toggle="dropdown" aria-haspopup="true"
+                  ngbDropdownToggle
-                                    aria-expanded="false">
+                  class="btn btn-secondary dropdown-toggle"
+                  type="button"
+                  id="dropdownMenu3"
+                  data-toggle="dropdown"
+                  aria-haspopup="true"
+                  aria-expanded="false"
+                >
                   Status: {{ getStatusTitleById(task.statusid) }}
                 </button>
-                                <div ngbDropdownMenu class="dropdown-menu" aria-labelledby="dropdownMenu2">
+                <div
+                  ngbDropdownMenu
+                  class="dropdown-menu"
+                  aria-labelledby="dropdownMenu2"
+                >
                   <div class="card-text" for="Inhalt">Status wählen</div>
-                                    <option disable-auto-close ngbDropdownItem *ngFor="let status of allStatus"
+                  <option
-                                        (click)="task.statusid = status.id">{{ status.title }}</option>
+                    disable-auto-close
+                    ngbDropdownItem
+                    *ngFor="let status of allStatus"
+                    (click)="task.statusid = status.id"
+                    >{{ status.title }}</option
+                  >
 
                   <div class="dropdown-divider"></div>
                   <div class="card-text" for="Inhalt">Neuer Status</div>
-                                    <input #statusname type="text" id="statusname" class="dropdown-item"
+                  <input
-                                        (change)="status.title=statusname.value" placeholder="New Title..."
+                    #statusname
-                                        style="background-color: rgba(211, 211, 211, 0.342);">
+                    type="text"
-                                    <button disable-auto-close ngbDropdownItem class="dropdown-item" type="button"
+                    id="statusname"
-                                        (click)="createTaskStatus(status)">Status anlegen</button>
+                    class="dropdown-item"
-                                    <button disable-auto-close ngbDropdownItem class="dropdown-item" type="button"
+                    (change)="status.title = statusname.value"
-                                        (click)="deleteStatus(task.statusid)">Status löschen</button>
+                    placeholder="New Title..."
+                    style="background-color: rgba(211, 211, 211, 0.342);"
+                  />
+                  <button
+                    disable-auto-close
+                    ngbDropdownItem
+                    class="dropdown-item"
+                    type="button"
+                    (click)="createTaskStatus(status)"
+                  >
+                    Status anlegen
+                  </button>
+                  <button
+                    disable-auto-close
+                    ngbDropdownItem
+                    class="dropdown-item"
+                    type="button"
+                    (click)="deleteStatus(task.statusid)"
+                  >
+                    Status löschen
+                  </button>
                 </div>
               </div>
               <div class="dropdown-menu">
-                                <select class="form-control custom-select mr-sm-2" id="status" required name="status"
+                <select
-                                    [(ngModel)]="task.statusid">
+                  class="form-control custom-select mr-sm-2"
-                                    <option *ngFor="let status of allStatus" [value]="status.id">{{
+                  id="status"
-                status.title
+                  required
-              }}</option>
+                  name="status"
+                  [(ngModel)]="task.statusid"
+                >
+                  <option
+                    *ngFor="let status of allStatus"
+                    [value]="status.id"
+                    >{{ status.title }}</option
+                  >
                 </select>
               </div>
             </div>
             <div class="form-group">
               <div ngbDropdown class="dropdown" [autoClose]="true">
-                                <button ngbDropdownToggle class="btn btn-secondary dropdown-toggle" type="button"
+                <button
-                                    id="dropdownMenu4" data-toggle="dropdown" aria-haspopup="true"
+                  ngbDropdownToggle
-                                    aria-expanded="false">
+                  class="btn btn-secondary dropdown-toggle"
+                  type="button"
+                  id="dropdownMenu4"
+                  data-toggle="dropdown"
+                  aria-haspopup="true"
+                  aria-expanded="false"
+                >
                   Bearbeiter: {{ getAuthorById(task.assignedtoid) }}
                 </button>
-                                <div ngbDropdownMenu class="dropdown-menu" aria-labelledby="dropdownMenu2">
+                <div
+                  ngbDropdownMenu
+                  class="dropdown-menu"
+                  aria-labelledby="dropdownMenu2"
+                >
                   <div class="card-text" for="Inhalt">User wählen</div>
-                                    <option disable-auto-close ngbDropdownItem *ngFor="let user of allUser"
+                  <option
-                                        (click)="task.assignedtoid = user.id">{{ user.name }}</option>
+                    disable-auto-close
+                    ngbDropdownItem
+                    *ngFor="let user of allUser"
+                    (click)="task.assignedtoid = user.id"
+                    >{{ user.name }}</option
+                  >
                 </div>
               </div>
               <div class="dropdown-menu">
-                                <select class="form-control custom-select mr-sm-2" id="assignedto" required name="assignedto"
+                <select
-                                    [(ngModel)]="task.assignedtoid">
+                  class="form-control custom-select mr-sm-2"
+                  id="assignedto"
+                  required
+                  name="assignedto"
+                  [(ngModel)]="task.assignedtoid"
+                >
                   <option *ngFor="let user of allUser" [value]="user.id">{{
                     user.name
                   }}</option>
@@ -106,7 +213,12 @@
         </div>
         <div class="row">
           <div class="col-6">
-                        <button (click)="onClose()" type="dismiss" class="btn btn-secondary" data-dismiss="modal">
+            <button
+              (click)="onClose()"
+              type="dismiss"
+              class="btn btn-secondary"
+              data-dismiss="modal"
+            >
               Abbrechen
             </button>
             <button type="submit" class="btn btn-primary">Erstellen</button>

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

@@ -8,9 +8,8 @@ describe('TaskFormComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ TaskFormComponent ]
+      declarations: [TaskFormComponent],
-    })
+    }).compileComponents();
-    .compileComponents();
   }));
 
   beforeEach(() => {

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

@@ -9,7 +9,7 @@ import {
   ScrumCategory,
   ScrumUser,
   ScrumProject,
-	ScrumUserstory
+  ScrumUserstory,
 } from '../../services/backend.service';
 import { Observable } from 'rxjs';
 import { HttpResponse } from '@angular/common/http';
@@ -17,7 +17,7 @@ import { HttpResponse } from '@angular/common/http';
 @Component({
   selector: 'app-task-form',
   templateUrl: './task-form.component.html',
-	styleUrls: ['./task-form.component.css']
+  styleUrls: ['./task-form.component.css'],
 })
 
 // Class implements the logic for a popup window form to create and modify tasks.
@@ -28,11 +28,14 @@ export class TaskFormComponent implements OnInit {
   public userstoryId: string;
   public userstories: any[] = [];
   public allStatus: any[] = [];
-	public status: ScrumStatus = { title: "", description: "" };
+  public status: ScrumStatus = { title: '', description: '' };
   public allUser: any[] = [];
-	public user: ScrumUser = { name: "" };
+  public user: ScrumUser = { name: '' };
 
-	constructor(private backendService: BackendService, private activeModalService: NgbActiveModal) {
+  constructor(
+    private backendService: BackendService,
+    private activeModalService: NgbActiveModal
+  ) {
     this.getUserStories();
     this.getTaskStatus();
     this.getAllUsers();
@@ -84,7 +87,9 @@ export class TaskFormComponent implements OnInit {
     if (!this.task.userstoryid) {
       return null;
     }
-		this.backendService.getUserstory(this.task.userstoryid).subscribe((response) => {
+    this.backendService
+      .getUserstory(this.task.userstoryid)
+      .subscribe((response) => {
         if (response.status > 399) {
           alert('Fehler');
         } else {
@@ -121,8 +126,7 @@ export class TaskFormComponent implements OnInit {
     this.backendService.postStatus(status).subscribe((response) => {
       if (response.status > 399) {
         alert('Fehler');
-			}
+      } else {
-			else {
         this.allStatus.push(response.body);
       }
     });
@@ -135,8 +139,7 @@ export class TaskFormComponent implements OnInit {
     this.backendService.deleteStatus(status).subscribe((response) => {
       if (response.status > 399) {
         alert('Fehler');
-			}
+      } else {
-			else {
         const index = this.allStatus.indexOf(status);
         if (index !== -1) {
           this.allStatus.splice(index, 1);

src/app/components/userstory-form/userstory-form.component.html

@@ -17,107 +17,240 @@
           <div class="col-8">
             <div class="form-group">
               <label for="Title">Titel</label>
-                            <input type="text" class="form-control" id="Title" required name="title"
+              <input
-                                [(ngModel)]="userstory.title" id="titleField" />
+                type="text"
+                class="form-control"
+                id="Title"
+                required
+                name="title"
+                [(ngModel)]="userstory.title"
+                id="titleField"
+              />
             </div>
             <div class="form-group">
               <label for="Inhalt">Story</label>
-                            <textarea type="text" class="form-control" id="Story" required name="story" rows="5"
+              <textarea
-                                [(ngModel)]="userstory.content"></textarea>
+                type="text"
+                class="form-control"
+                id="Story"
+                required
+                name="story"
+                rows="5"
+                [(ngModel)]="userstory.content"
+              ></textarea>
             </div>
           </div>
           <div class="col-4">
             <div ngbDropdown class="dropdown">
-                            <button ngbDropdownToggle class="btn btn-secondary dropdown-toggle" type="button"
+              <button
-                                id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                ngbDropdownToggle
+                class="btn btn-secondary dropdown-toggle"
+                type="button"
+                id="dropdownMenu2"
+                data-toggle="dropdown"
+                aria-haspopup="true"
+                aria-expanded="false"
+              >
                 Prio: {{ userstory.priority }}
               </button>
-                            <div ngbDropdownMenu class="dropdown-menu" aria-labelledby="dropdownMenu2">
+              <div
-                                <option ngbDropdownItem *ngFor="let p of getAllPriorities()"
+                ngbDropdownMenu
-                                    (click)="userstory.priority=p">
+                class="dropdown-menu"
-                                    {{p}}</option>
+                aria-labelledby="dropdownMenu2"
+              >
+                <option
+                  ngbDropdownItem
+                  *ngFor="let p of getAllPriorities()"
+                  (click)="userstory.priority = p"
+                >
+                  {{ p }}</option
+                >
               </div>
             </div>
             <div class="form-group">
               <div ngbDropdown class="dropdown" [autoClose]="false">
-                                <button ngbDropdownToggle class="btn btn-secondary dropdown-toggle" type="button"
+                <button
-                                    id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true"
+                  ngbDropdownToggle
-                                    aria-expanded="false">
+                  class="btn btn-secondary dropdown-toggle"
+                  type="button"
+                  id="dropdownMenu2"
+                  data-toggle="dropdown"
+                  aria-haspopup="true"
+                  aria-expanded="false"
+                >
                   Status: {{ getStatusTitleById(userstory.statusid) }}
                 </button>
-                                <div ngbDropdownMenu class="dropdown-menu" aria-labelledby="dropdownMenu2">
+                <div
+                  ngbDropdownMenu
+                  class="dropdown-menu"
+                  aria-labelledby="dropdownMenu2"
+                >
                   <div class="card-text" for="Inhalt">Status wählen</div>
-                                    <option disable-auto-close ngbDropdownItem *ngFor="let status of allStatus"
+                  <option
-                                        (click)="userstory.statusid = status.id">{{ status.title }}</option>
+                    disable-auto-close
+                    ngbDropdownItem
+                    *ngFor="let status of allStatus"
+                    (click)="userstory.statusid = status.id"
+                    >{{ status.title }}</option
+                  >
 
                   <div class="dropdown-divider"></div>
                   <div class="card-text" for="Inhalt">Neuer Status</div>
-                                    <input #statusname type="text" id="statusname" class="dropdown-item"
+                  <input
-                                        (change)="status.title=statusname.value" placeholder="New Title..."
+                    #statusname
-                                        style="background-color: rgba(211, 211, 211, 0.342);">
+                    type="text"
-                                    <button disable-auto-close ngbDropdownItem class="dropdown-item" type="button"
+                    id="statusname"
-                                        (click)="createUserstoryStatus(status)">Status anlegen</button>
+                    class="dropdown-item"
-                                    <button disable-auto-close ngbDropdownItem class="dropdown-item" type="button"
+                    (change)="status.title = statusname.value"
-                                        (click)="deleteStatus(userstory.statusid)">Status löschen</button>
+                    placeholder="New Title..."
+                    style="background-color: rgba(211, 211, 211, 0.342);"
+                  />
+                  <button
+                    disable-auto-close
+                    ngbDropdownItem
+                    class="dropdown-item"
+                    type="button"
+                    (click)="createUserstoryStatus(status)"
+                  >
+                    Status anlegen
+                  </button>
+                  <button
+                    disable-auto-close
+                    ngbDropdownItem
+                    class="dropdown-item"
+                    type="button"
+                    (click)="deleteStatus(userstory.statusid)"
+                  >
+                    Status löschen
+                  </button>
                 </div>
               </div>
               <div class="dropdown-menu">
-                                <select class="form-control custom-select mr-sm-2" id="prio" required name="prio"
+                <select
-                                    [(ngModel)]="userstory.statusid">
+                  class="form-control custom-select mr-sm-2"
-                                    <option *ngFor="let status of allStatus" [value]="status.id">{{
+                  id="prio"
-                status.title
+                  required
-              }}</option>
+                  name="prio"
+                  [(ngModel)]="userstory.statusid"
+                >
+                  <option
+                    *ngFor="let status of allStatus"
+                    [value]="status.id"
+                    >{{ status.title }}</option
+                  >
                 </select>
               </div>
             </div>
             <div class="form-group">
               <div ngbDropdown class="dropdown" [autoClose]="false">
-                                <button ngbDropdownToggle class="btn btn-secondary dropdown-toggle" type="button"
+                <button
-                                    id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true"
+                  ngbDropdownToggle
-                                    aria-expanded="false">
+                  class="btn btn-secondary dropdown-toggle"
+                  type="button"
+                  id="dropdownMenu2"
+                  data-toggle="dropdown"
+                  aria-haspopup="true"
+                  aria-expanded="false"
+                >
                   Kategorie: {{ getCategoryById(userstory.categoryid) }}
                 </button>
-                                <div ngbDropdownMenu class="dropdown-menu" aria-labelledby="dropdownMenu2">
+                <div
+                  ngbDropdownMenu
+                  class="dropdown-menu"
+                  aria-labelledby="dropdownMenu2"
+                >
                   <div class="card-text" for="Inhalt">Kategorie wählen</div>
-                                    <option disable-auto-close ngbDropdownItem *ngFor="let category of allCategories"
+                  <option
-                                        (click)="userstory.categoryid = category.id">{{ category.title }}</option>
+                    disable-auto-close
+                    ngbDropdownItem
+                    *ngFor="let category of allCategories"
+                    (click)="userstory.categoryid = category.id"
+                    >{{ category.title }}</option
+                  >
 
                   <div class="dropdown-divider"></div>
                   <div class="card-text" for="Inhalt">Neue Kategorie</div>
-                                    <input #categoryname type="text" id="categoryname" class="dropdown-item"
+                  <input
-                                        (change)="category.title=categoryname.value" placeholder="New Title..."
+                    #categoryname
-                                        style="background-color: rgba(211, 211, 211, 0.342);">
+                    type="text"
-                                    <button disable-auto-close ngbDropdownItem class="dropdown-item" type="button"
+                    id="categoryname"
-                                        (click)="createUserstoryCategory(category)">Kategorie anlegen</button>
+                    class="dropdown-item"
-                                    <button disable-auto-close ngbDropdownItem class="dropdown-item" type="button"
+                    (change)="category.title = categoryname.value"
-                                        (click)="deleteCategory(userstory.categoryid)">Kategorie löschen</button>
+                    placeholder="New Title..."
+                    style="background-color: rgba(211, 211, 211, 0.342);"
+                  />
+                  <button
+                    disable-auto-close
+                    ngbDropdownItem
+                    class="dropdown-item"
+                    type="button"
+                    (click)="createUserstoryCategory(category)"
+                  >
+                    Kategorie anlegen
+                  </button>
+                  <button
+                    disable-auto-close
+                    ngbDropdownItem
+                    class="dropdown-item"
+                    type="button"
+                    (click)="deleteCategory(userstory.categoryid)"
+                  >
+                    Kategorie löschen
+                  </button>
                 </div>
               </div>
               <div class="dropdown-menu">
-                                <select class="form-control custom-select mr-sm-2" id="prio" required name="prio"
+                <select
-                                    [(ngModel)]="userstory.categoryid">
+                  class="form-control custom-select mr-sm-2"
-                                    <option *ngFor="let category of allCategories" [value]="category.id">{{
+                  id="prio"
-                category.title
+                  required
-              }}</option>
+                  name="prio"
+                  [(ngModel)]="userstory.categoryid"
+                >
+                  <option
+                    *ngFor="let category of allCategories"
+                    [value]="category.id"
+                    >{{ category.title }}</option
+                  >
                 </select>
               </div>
             </div>
             <div class="form-group">
               <div ngbDropdown class="dropdown" [autoClose]="true">
-                                <button ngbDropdownToggle class="btn btn-secondary dropdown-toggle" type="button"
+                <button
-                                    id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true"
+                  ngbDropdownToggle
-                                    aria-expanded="false">
+                  class="btn btn-secondary dropdown-toggle"
+                  type="button"
+                  id="dropdownMenu2"
+                  data-toggle="dropdown"
+                  aria-haspopup="true"
+                  aria-expanded="false"
+                >
                   Autor: {{ getAuthorById(userstory.createdbyid) }}
                 </button>
-                                <div ngbDropdownMenu class="dropdown-menu" aria-labelledby="dropdownMenu2">
+                <div
+                  ngbDropdownMenu
+                  class="dropdown-menu"
+                  aria-labelledby="dropdownMenu2"
+                >
                   <div class="card-text" for="Inhalt">User wählen</div>
-                                    <option disable-auto-close ngbDropdownItem *ngFor="let user of allUser"
+                  <option
-                                        (click)="userstory.createdbyid = user.id">{{ user.name }}</option>
+                    disable-auto-close
+                    ngbDropdownItem
+                    *ngFor="let user of allUser"
+                    (click)="userstory.createdbyid = user.id"
+                    >{{ user.name }}</option
+                  >
                 </div>
               </div>
               <div class="dropdown-menu">
-                                <select class="form-control custom-select mr-sm-2" id="prio" required name="prio"
+                <select
-                                    [(ngModel)]="userstory.createdbyid">
+                  class="form-control custom-select mr-sm-2"
+                  id="prio"
+                  required
+                  name="prio"
+                  [(ngModel)]="userstory.createdbyid"
+                >
                   <option *ngFor="let user of allUser" [value]="user.id">{{
                     user.name
                   }}</option>
@@ -128,7 +261,12 @@
         </div>
         <div class="row">
           <div class="col-6">
-                        <button (click)="onClose()" type="dismiss" class="btn btn-secondary" data-dismiss="modal">
+            <button
+              (click)="onClose()"
+              type="dismiss"
+              class="btn btn-secondary"
+              data-dismiss="modal"
+            >
               Abbrechen
             </button>
             <button type="submit" class="btn btn-primary">Erstellen</button>

src/app/components/userstory-form/userstory-form.component.ts

@@ -1,7 +1,11 @@
 // Importing necessary components and interfaces.
 import { Component, OnInit, Input } from '@angular/core';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
-import { BackendService, ScrumUserstory, Priority } from '../../services/backend.service';
+import {
+  BackendService,
+  ScrumUserstory,
+  Priority,
+} from '../../services/backend.service';
 import {
   ScrumTask,
   ScrumStatus,
@@ -13,21 +17,24 @@ import {
 @Component({
   selector: 'app-userstory-form',
   templateUrl: './userstory-form.component.html',
-	styleUrls: ['./userstory-form.component.css']
+  styleUrls: ['./userstory-form.component.css'],
 })
 
 // Class implements the logic for a popup window form to create and modify userstories.
 export class UserstoryFormComponent implements OnInit {
   @Input() public userstory: ScrumUserstory;
   public allStatus: any[] = [];
-	public status: ScrumStatus = { title: "", description: "" };
+  public status: ScrumStatus = { title: '', description: '' };
   public allUser: any[] = [];
-	public user: ScrumUser = { name: "" };
+  public user: ScrumUser = { name: '' };
   public allCategories: any[] = [];
-	public category: ScrumCategory = { title: "" };
+  public category: ScrumCategory = { title: '' };
   private editing: boolean;
 
-	constructor(private backendService: BackendService, private activeModalService: NgbActiveModal) {
+  constructor(
+    private backendService: BackendService,
+    private activeModalService: NgbActiveModal
+  ) {
     this.getUserstoryStatus();
     this.getAllUsers();
     this.getUserstoryCategory();
@@ -55,7 +62,9 @@ export class UserstoryFormComponent implements OnInit {
         }
       });
     } else {
-			this.backendService.postUserstory(this.userstory).subscribe((response) => {
+      this.backendService
+        .postUserstory(this.userstory)
+        .subscribe((response) => {
           if (response.status > 399) {
             alert('Fehler');
           }
@@ -87,8 +96,7 @@ export class UserstoryFormComponent implements OnInit {
     this.backendService.postStatus(status).subscribe((response) => {
       if (response.status > 399) {
         alert('Fehler');
-			}
+      } else {
-			else {
         this.allStatus.push(response.body);
       }
     });
@@ -101,8 +109,7 @@ export class UserstoryFormComponent implements OnInit {
     this.backendService.deleteStatus(status).subscribe((response) => {
       if (response.status > 399) {
         alert('Fehler');
-			}
+      } else {
-			else {
         const index = this.allStatus.indexOf(status);
         if (index !== -1) {
           this.allStatus.splice(index, 1);
@@ -169,8 +176,7 @@ export class UserstoryFormComponent implements OnInit {
     this.backendService.postCategory(category).subscribe((response) => {
       if (response.status > 399) {
         alert('Fehler');
-			}
+      } else {
-			else {
         this.allCategories.push(response.body);
       }
     });
@@ -183,8 +189,7 @@ export class UserstoryFormComponent implements OnInit {
     this.backendService.deleteCategory(category).subscribe((response) => {
       if (response.status > 399) {
         alert('Fehler');
-			}
+      } else {
-			else {
         const index = this.allCategories.indexOf(category);
         if (index !== -1) {
           this.allCategories.splice(index, 1);

src/app/services/sorting.service.ts

@@ -21,4 +21,4 @@ export function getNumberForPriority(priority: Priority): number {
     case Priority.Low:
       return 0;
   }
-};
+}

src/environments/environment.prod.ts

@@ -1,3 +1,3 @@
 export const environment = {
-  production: true
+  production: true,
 };

src/environments/environment.ts

@@ -4,8 +4,8 @@
 
 export const environment = {
   production: false,
-  apiUrl: window["env"]["apiUrl"] || "default",
+  apiUrl: window['env']['apiUrl'] || 'default',
-  debug: window["env"]["debug"] || false
+  debug: window['env']['debug'] || false,
 };
 
 /*

src/index.html

@@ -1,18 +1,23 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
-        <meta charset="utf-8">
+    <meta charset="utf-8" />
     <title>Frontend</title>
-        <base href="/">
+    <base href="/" />
-        <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="icon" type="image/x-icon" href="favicon.ico">
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
     <script src="assets/env.js"></script>
     <!--     Fonts and icons     -->
-        <link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,800" rel="stylesheet">
+    <link
-        <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet"/>
+      href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,800"
+      rel="stylesheet"
+    />
+    <link
+      href="https://use.fontawesome.com/releases/v5.0.6/css/all.css"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <app-root></app-root>
   </body>
 </html>
-

src/main.ts

@@ -8,5 +8,6 @@ if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
+platformBrowserDynamic()
-  .catch(err => console.error(err));
+  .bootstrapModule(AppModule)
+  .catch((err) => console.error(err));

src/polyfills.ts

@@ -61,7 +61,6 @@ import '@angular/localize/init';
  */
 import 'zone.js/dist/zone'; // Included with Angular CLI.
 
-
 /***************************************************************************************************
  * APPLICATION IMPORTS
  */

src/styles.css

@@ -6,4 +6,3 @@
 .white-content .custom-text-secondary {
   color: black !important;
 }
-  

src/test.ts

@@ -4,7 +4,7 @@ import 'zone.js/dist/zone-testing';
 import { getTestBed } from '@angular/core/testing';
 import {
   BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
+  platformBrowserDynamicTesting,
 } from '@angular/platform-browser-dynamic/testing';
 
 declare const require: any;

tsconfig.app.json

@@ -4,11 +4,6 @@
     "outDir": "./out-tsc/app",
     "types": []
   },
-  "files": [
+  "files": ["src/main.ts", "src/polyfills.ts"],
-    "src/main.ts",
+  "include": ["src/**/*.d.ts"]
-    "src/polyfills.ts"
-  ],
-  "include": [
-    "src/**/*.d.ts"
-  ]
 }

tsconfig.json

@@ -11,10 +11,7 @@
     "moduleResolution": "node",
     "importHelpers": true,
     "target": "es2015",
-    "lib": [
+    "lib": ["es2018", "dom"]
-      "es2018",
-      "dom"
-    ]
   },
   "angularCompilerOptions": {
     "fullTemplateTypeCheck": true,

tsconfig.spec.json

@@ -2,17 +2,8 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
-    "types": [
+    "types": ["jasmine", "node"]
-      "jasmine",
-      "node"
-    ]
   },
-  "files": [
+  "files": ["src/test.ts", "src/polyfills.ts"],
-    "src/test.ts",
+  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
-    "src/polyfills.ts"
-  ],
-  "include": [
-    "src/**/*.spec.ts",
-    "src/**/*.d.ts"
-  ]
 }

tslint.json

@@ -2,10 +2,7 @@
   "extends": "tslint:recommended",
   "rules": {
     "align": {
-      "options": [
+      "options": ["parameters", "statements"]
-        "parameters",
-        "statements"
-      ]
     },
     "array-type": false,
     "arrow-return-shorthand": true,
@@ -16,34 +13,16 @@
     "component-class-suffix": true,
     "contextual-lifecycle": true,
     "directive-class-suffix": true,
-    "directive-selector": [
+    "directive-selector": [true, "attribute", "app", "camelCase"],
-      true,
+    "component-selector": [true, "element", "app", "kebab-case"],
-      "attribute",
-      "app",
-      "camelCase"
-    ],
-    "component-selector": [
-      true,
-      "element",
-      "app",
-      "kebab-case"
-    ],
     "eofline": true,
-    "import-blacklist": [
+    "import-blacklist": [true, "rxjs/Rx"],
-      true,
-      "rxjs/Rx"
-    ],
     "import-spacing": true,
     "indent": {
-      "options": [
+      "options": ["spaces"]
-        "spaces"
-      ]
     },
     "max-classes-per-file": false,
-    "max-line-length": [
+    "max-line-length": [true, 140],
-      true,
-      140
-    ],
     "member-ordering": [
       true,
       {
@@ -55,35 +34,17 @@
         ]
       }
     ],
-    "no-console": [
+    "no-console": [true, "debug", "info", "time", "timeEnd", "trace"],
-      true,
-      "debug",
-      "info",
-      "time",
-      "timeEnd",
-      "trace"
-    ],
     "no-empty": false,
-    "no-inferrable-types": [
+    "no-inferrable-types": [true, "ignore-params"],
-      true,
-      "ignore-params"
-    ],
     "no-non-null-assertion": true,
     "no-redundant-jsdoc": true,
     "no-switch-case-fall-through": true,
     "no-var-requires": false,
-    "object-literal-key-quotes": [
+    "object-literal-key-quotes": [true, "as-needed"],
-      true,
+    "quotemark": [true, "single"],
-      "as-needed"
-    ],
-    "quotemark": [
-      true,
-      "single"
-    ],
     "semicolon": {
-      "options": [
+      "options": ["always"]
-        "always"
-      ]
     },
     "space-before-function-paren": {
       "options": {
@@ -113,11 +74,7 @@
       ]
     },
     "variable-name": {
-      "options": [
+      "options": ["ban-keywords", "check-format", "allow-pascal-case"]
-        "ban-keywords",
-        "check-format",
-        "allow-pascal-case"
-      ]
     },
     "whitespace": {
       "options": [
@@ -142,7 +99,5 @@
     "use-lifecycle-interface": true,
     "use-pipe-transform-interface": true
   },
-  "rulesDirectory": [
+  "rulesDirectory": ["codelyzer"]
-    "codelyzer"
-  ]
 }