From cfb2b7f98bffed95307537755baa7af7f8580bb7 Mon Sep 17 00:00:00 2001
From: Niggl <info@nicolai-ort.com>
Date: Fri, 3 Jul 2020 17:27:19 +0200
Subject: [PATCH] Both sides w/ cards

---
 src/app/backlog-table/backlog.component.html | 122 +++----------------
 src/app/backlog-table/backlog.component.ts   |   1 -
 2 files changed, 19 insertions(+), 104 deletions(-)

diff --git a/src/app/backlog-table/backlog.component.html b/src/app/backlog-table/backlog.component.html
index 091a1a3..486e3df 100644
--- a/src/app/backlog-table/backlog.component.html
+++ b/src/app/backlog-table/backlog.component.html
@@ -36,109 +36,25 @@
     <div class="col-lg-6 container-fluid">
 
       <h4>Sprint-Backlog - y</h4>
-
-      <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 === 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>
-                  <span (click)="sortByPrio()">
-                    <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 choosen">
-            <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)="deleteFromSprintBacklog(userstory)"
-                class="btn btn-danger btn-sm btn-icon">
-                <i class="fa fa-trash"></i>
-              </button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+      <div *ngFor="let story of choosen" class="col-lg-6 container-fluid">
+        <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: {{story.priority}}</h6>
+            <p class="card-text">{{story.content}}</p>
+            <div title="Badges">
+              <span class="badge badge-primary">Category: {{story.categoryid || "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">
+              <i class="fa fa-trash"></i>
+            </button>
+          </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </div>
\ No newline at end of file
diff --git a/src/app/backlog-table/backlog.component.ts b/src/app/backlog-table/backlog.component.ts
index 19b1e3d..54769ea 100644
--- a/src/app/backlog-table/backlog.component.ts
+++ b/src/app/backlog-table/backlog.component.ts
@@ -164,7 +164,6 @@ export class BacklogComponent extends TableComponentBase<
       } else {
         var currentDate = new Date();
         this.currentSprint = response.body.find(x => x.startDate < currentDate);
-        alert(this.currentSprint);
       }});
   }