Avancement + filtre sur liste des issues

src/app/issues/issues.html

@@ -1,3 +1,4 @@
+<!-- suppress HtmlUnknownAttribute -->
 <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-3 mb-4">
   <div>
     <h1 class="h2 mb-2">Issues</h1>
@@ -6,6 +7,25 @@
   <button type="button" class="btn btn-primary" (click)="createIssue()">Creer</button>
 </div>
 
+<div class="d-flex flex-wrap gap-2 mb-3">
+  <button
+    type="button"
+    class="btn btn-sm"
+    [class.btn-outline-secondary]="selectedType !== null"
+    [class.btn-secondary]="selectedType === null"
+    (click)="selectType(null)"
+  >Tous</button>
+  @for (type of typeOptions; track type) {
+    <button
+      type="button"
+      class="filter-btn btn btn-sm"
+      [class.active]="selectedType === type"
+      [class]="'filter-btn btn btn-sm ' + (selectedType === type ? typeBadgeClass(type).replace('text-bg-', 'btn-') : 'btn-outline-secondary')"
+      (click)="selectType(type)"
+    >{{ type }}</button>
+  }
+</div>
+
 <div class="card shadow-sm">
   <div class="table-responsive">
     <table class="table table-hover align-middle mb-0">
@@ -16,10 +36,11 @@
           <th>Priorite</th>
           <th>Statut</th>
           <th>Assignee</th>
+          <th>Progression</th>
         </tr>
       </thead>
       <tbody>
-        @for (issue of issues(); track issue.id) {
+        @for (issue of filteredIssues; track issue.id) {
           <tr
             class="clickable-row"
             tabindex="0"
@@ -31,6 +52,21 @@
             <td>{{ issue.priority }}</td>
             <td>{{ issue.status }}</td>
             <td>{{ issue.assignee }}</td>
+            <td class="progress-cell">
+              <div class="d-flex align-items-center gap-2">
+                <div class="progress flex-grow-1" style="height: 6px;">
+                  <div
+                    class="progress-bar"
+                    role="progressbar"
+                    [style.width.%]="getProgress(issue)"
+                    [attr.aria-valuenow]="getProgress(issue)"
+                    aria-valuemin="0"
+                    aria-valuemax="100"
+                  ></div>
+                </div>
+                <span class="progress-label text-secondary small">{{ getProgress(issue) }}%</span>
+              </div>
+            </td>
           </tr>
         }
       </tbody>