Files
Bonsai-webapp/src/app/issues/issues.html
T

78 lines
2.6 KiB
HTML

<!-- 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>
<p class="text-secondary mb-0">Suivi des tickets et anomalies du projet.</p>
</div>
<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">
<thead class="table-light">
<tr>
<th>#</th>
<th>Titre</th>
<th>Type</th>
<th>Priorite</th>
<th>Statut</th>
<th>Assignee</th>
<th>Progression</th>
</tr>
</thead>
<tbody>
@for (issue of filteredIssues; track issue.id) {
<tr
class="clickable-row"
tabindex="0"
(click)="openIssue(issue.id)"
(keydown.enter)="openIssue(issue.id)"
>
<td class="text-secondary small">#{{ issue.id }}</td>
<td>{{ issue.name }}</td>
<td><span [class]="'badge ' + typeBadgeClass(issue.type)">{{ issue.type }}</span></td>
<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>
</table>
</div>
</div>