Added Card style

src/app/backlog-table/backlog.component.html

@@ -10,117 +10,32 @@
 </div>
   <div class="row">
     <div class="col-lg-6 container-fluid">
-      <h4>Verfügbare Userstories</h4>
+    <h4>Backlog</h4>
-      <table class="table">
+    <div *ngFor="let story of items" class="col-lg-6 container-fluid">
-
+      <div class="card" style="width: 150%;">
-        <thead>
+        <div class="card-body">
-          <tr>
+          <h4 class="card-title">{{story.title}}</h4>
-            <th (click)="sortById()" class="sortable">
+          <h6 class="card-subtitle mb-2 text-muted">Prio: {{story.priority}}</h6>
-              <span>ID</span>
+          <p class="card-text">{{story.content}}</p>
-              <span>
+          <div title="Badges">
-                <span *ngIf="sortBy != 'id'"><i class="fa fa-sort fa-lg"></i></span>
+            <span class="badge badge-primary">Category: {{story.categoryid || "N/A"}}</span>
-                <span *ngIf="sortDescending && sortBy === 'id'"><i class="fa fa-sort-up fa-lg"></i></span>
+            <span class="badge badge-info">Status: {{story.statusid || "N/A"}}</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="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="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="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">
-                <div class="d-inline-block">
-                  <span (click)="sortByPrio()">Priorität: </span>
-                  <div ngbDropdown class="d-inline-block">
-                    <span id="dropdownBasic1" ngbDropdownToggle>{{filterPriority || "All"}}</span>
-                    <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
-                      <option ngbDropdownItem (click)="filterPriority=null">All</option>
-                      <option ngbDropdownItem *ngFor="let p of getAllPriorities()" (click)="filterPriority=p">{{p}}
-                      </option>
           </div>
-                  </div>
+          <div style="text-align: right;">
-                  <span (click)="sortByPrio()">
+          <button type="button" rel="tooltip" (click)="addToSprintBacklog(story)"
-                    <span *ngIf="sortBy != 'priority'"><i class="fa fa-sort fa-lg"></i></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>
-              </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="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>
-          </tr>
-        </thead>
-
-        <tbody>
-          <tr *ngFor="let userstory of filteredItems" [class.table-info]="userstory.id === highlightId">
-            <td>{{userstory.id}}</td>
-            <td>{{userstory.title}}</td>
-            <td>
-              <a [routerLink]="['/tasks', {userstoryId: userstory.id}]">
-                {{getNumberOfTasks(userstory)}} Tasks
-              </a>
-            </td>
-            <td>
-              <a [routerLink]="['/status', {id: userstory.statusid}]">
-                {{getStatusTitleById(userstory.statusid)}}
-              </a>
-            </td>
-            <td>{{userstory.priority}}</td>
-            <td>
-              <a [routerLink]="['/categories', {id: userstory.categoryid}]">
-                {{getCategoryTitleById(userstory.categoryid)}}
-              </a>
-            </td>
-            <td>
-              
-              <button type="button" rel="tooltip" (click)="addToSprintBacklog(userstory)"
                 class="btn btn-sm btn-success btn-icon">
                 <i class="fas fa-plus-square"></i>
           </button>
-            </td>
+        </div>
-          </tr>
+        </div>
-        </tbody>
+      </div>
-
+    </div>
-      </table>
     </div>
     <div></div>
 
     <div class="col-lg-6 container-fluid">
 
-      <h4>Sprint-Backlog</h4>
+      <h4>Sprint-Backlog - y</h4>
 
       <table class="table">
 
@@ -196,7 +111,7 @@
         </thead>
 
         <tbody>
-          <tr *ngFor="let userstory of choosen" [class.table-info]="userstory.id === highlightId">
+          <tr *ngFor="let userstory of choosen">
             <td>{{userstory.id}}</td>
             <td>{{userstory.title}}</td>
             <td>

src/app/backlog-table/backlog.component.ts

@@ -26,30 +26,19 @@ export class BacklogComponent extends TableComponentBase<
 > {
   public tasks: ScrumTask[] = [];
   public filterPriority: string | null = null;
-  public highlightId: number;
   public status: ScrumStatus[] = [];
   public categories: ScrumCategory[] = [];
+  public currentSprint: ScrumSprint;
   
   public choosen: ScrumUserstory[] = [];
 
-  public get filteredItems() {
-    return this.items.filter(
-      (task) =>
-        this.filterPriority === null || task.priority === this.filterPriority
-    );
-  }
-
   constructor(
     private backendService: BackendService,
     private modalService: NgbModal,
     private route: ActivatedRoute,
-    private router: Router
   ) {
     super();
 
-    this.applyFilterParameters(this.route.snapshot.paramMap);
-    this.route.paramMap.subscribe((map) => this.applyFilterParameters(map));
-
     backendService.getUserstories().subscribe((response) => {
       if (response.status > 399) {
         alert('Fehler');
@@ -78,12 +67,7 @@ export class BacklogComponent extends TableComponentBase<
         this.categories.push(...response.body);
       }
     });
-  }
+    this.getCurrentSprint();
-
-  private applyFilterParameters(params: ParamMap) {
-    if (params.has('id')) {
-      this.highlightId = parseInt(params.get('id'));
-    }
   }
 
   public deleteUserstory(userstory: ScrumUserstory) {
@@ -135,6 +119,7 @@ export class BacklogComponent extends TableComponentBase<
   sortByStatus() {
     this.doNumericSort('statusid', (us) => us.statusid);
   }
+
   sortByCategory() {
     this.doNumericSort('categoryid', (us) => us.categoryid);
   }
@@ -159,6 +144,7 @@ export class BacklogComponent extends TableComponentBase<
 
   public addToSprintBacklog(userstory: ScrumUserstory) {
     this.choosen.push(userstory);
+
   }
   public deleteFromSprintBacklog(userstory: ScrumUserstory){
    
@@ -166,8 +152,15 @@ export class BacklogComponent extends TableComponentBase<
     this.choosen.splice(index, 1);
   }
 
-  public addToSprint(choosen: ScrumUserstory[]){
+  public getCurrentSprint()
-
+  {
+    this.backendService.getSprints().subscribe((response) => {
+      if (response.status > 399) {
+      } else {
+        var currentDate = new Date();
+        this.currentSprint = response.body.find(x => x.startDate < currentDate);
+        alert(this.currentSprint);
+      }});
   }
 
   public openSprintForm(editSprint?: ScrumSprint) {