Refacto issue detail
This commit is contained in:
@@ -17,14 +17,16 @@
|
||||
<option [value]="status">{{ status }}</option>
|
||||
}
|
||||
</select>
|
||||
<div class="more-wrapper">
|
||||
<button type="button" class="btn btn-outline-secondary btn-sm" (click)="toggleMoreMenu()">···</button>
|
||||
@if (moreMenuOpen) {
|
||||
<div class="more-menu dropdown-menu show">
|
||||
<button type="button" class="dropdown-item text-danger" (click)="deleteIssue()">Supprimer</button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
@if (!isNewIssueRoute) {
|
||||
<div class="more-wrapper">
|
||||
<button type="button" class="btn btn-outline-secondary btn-sm" (click)="toggleMoreMenu()">···</button>
|
||||
@if (moreMenuOpen) {
|
||||
<div class="more-menu dropdown-menu show">
|
||||
<button type="button" class="dropdown-item text-danger" (click)="deleteIssue()">Supprimer</button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -32,13 +34,19 @@
|
||||
<div class="card shadow-sm mb-3">
|
||||
<div class="card-body py-2">
|
||||
<input
|
||||
#titleInput="ngModel"
|
||||
aria-label="Titre"
|
||||
class="title-input form-control border-0 shadow-none p-0 fw-semibold fs-5"
|
||||
[class.is-invalid]="titleInput.invalid && titleInput.touched"
|
||||
type="text"
|
||||
placeholder="Titre de l'issue..."
|
||||
required
|
||||
[(ngModel)]="issue.name"
|
||||
(blur)="saveIssue()"
|
||||
/>
|
||||
@if (titleInput.invalid && titleInput.touched) {
|
||||
<div class="text-danger small mt-1">Le titre est obligatoire.</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -67,12 +75,17 @@
|
||||
@if (!isEpicIssue) {
|
||||
<div>
|
||||
<label class="field-label">Epic</label>
|
||||
<select aria-label="Epic" class="form-select form-select-sm" [(ngModel)]="issue.epic" (change)="saveIssue()">
|
||||
<option value="">—</option>
|
||||
@for (epicIssue of epicIssues; track epicIssue.id) {
|
||||
<option [value]="epicIssue.name">{{ epicIssue.name }}</option>
|
||||
<div class="d-flex gap-2 align-items-center">
|
||||
<select aria-label="Epic" class="form-select form-select-sm" [(ngModel)]="issue.epic" (change)="saveIssue()">
|
||||
<option value="">—</option>
|
||||
@for (epicIssue of epicIssues; track epicIssue.id) {
|
||||
<option [value]="epicIssue.name">{{ epicIssue.name }}</option>
|
||||
}
|
||||
</select>
|
||||
@if (epicIssueId !== null) {
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary flex-shrink-0" (click)="navigateToEpic()" title="Voir l'Epic">↗</button>
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
@@ -180,15 +193,61 @@
|
||||
} @else {
|
||||
<ul class="list-group list-group-flush">
|
||||
@for (composedIssue of composedIssues; track composedIssue.id) {
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center gap-3 py-3">
|
||||
<div>
|
||||
<p class="mb-0 fw-semibold">#{{ composedIssue.id }} – {{ composedIssue.name || 'Sans nom' }}</p>
|
||||
<p class="mb-0 text-secondary small">{{ composedIssue.type }} · {{ composedIssue.status }}</p>
|
||||
<li
|
||||
class="list-group-item d-flex justify-content-between align-items-center gap-3 py-3 composed-issue-item"
|
||||
(click)="openComposedIssue(composedIssue.id)"
|
||||
>
|
||||
<div class="d-flex align-items-center gap-2 flex-wrap">
|
||||
<span [class]="'badge ' + getBadgeClass(composedIssue.type)">{{ composedIssue.type }}</span>
|
||||
<span class="fw-semibold">#{{ composedIssue.id }} – {{ composedIssue.name || 'Sans nom' }}</span>
|
||||
</div>
|
||||
<div class="d-flex align-items-center gap-3 flex-shrink-0">
|
||||
<span class="text-secondary small">{{ composedIssue.priority }}</span>
|
||||
<span class="text-secondary small text-nowrap">{{ composedIssue.assignee || 'Non assigné' }}</span>
|
||||
</div>
|
||||
<span class="text-secondary small text-nowrap">{{ composedIssue.assignee || 'Non assigné' }}</span>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
}
|
||||
<div class="card-footer bg-white">
|
||||
@if (showCreateInEpic) {
|
||||
<div class="d-flex gap-2 flex-wrap">
|
||||
<input
|
||||
aria-label="Titre de la nouvelle issue"
|
||||
class="form-control form-control-sm dep-select"
|
||||
type="text"
|
||||
placeholder="Titre de l'issue..."
|
||||
[(ngModel)]="newIssueName"
|
||||
(keydown.enter)="confirmCreateInEpic()"
|
||||
(keydown.escape)="cancelCreateInEpic()"
|
||||
/>
|
||||
<button type="button" class="btn btn-sm btn-primary text-nowrap" (click)="confirmCreateInEpic()" [disabled]="!newIssueName.trim()">Créer</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary text-nowrap" (click)="cancelCreateInEpic()">Annuler</button>
|
||||
</div>
|
||||
} @else if (showAddToEpic) {
|
||||
<div class="d-flex gap-2 flex-wrap">
|
||||
<select aria-label="Choisir une issue à ajouter à l'epic" class="form-select form-select-sm dep-select" [(ngModel)]="selectedEpicCandidateId">
|
||||
<option [ngValue]="null">Choisir une issue...</option>
|
||||
@for (candidate of epicCandidates; track candidate.id) {
|
||||
<option [ngValue]="candidate.id">#{{ candidate.id }} – {{ candidate.name || 'Sans nom' }}</option>
|
||||
}
|
||||
</select>
|
||||
<button type="button" class="btn btn-sm btn-primary text-nowrap" (click)="confirmAddToEpic()" [disabled]="selectedEpicCandidateId === null">Ajouter</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary text-nowrap" (click)="cancelAddToEpic()">Annuler</button>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="d-flex gap-2">
|
||||
<button type="button" class="btn btn-sm btn-primary" (click)="openCreateInEpic()">+ Créer une issue</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary" (click)="openAddToEpic()">Ajouter une existante</button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (isNewIssueRoute) {
|
||||
<div class="d-flex justify-content-end gap-2 mt-4">
|
||||
<button type="button" class="btn btn-outline-secondary" (click)="cancelCreation()">Annuler</button>
|
||||
<button type="button" class="btn btn-primary" (click)="saveIssue(true)" [disabled]="!issue.name.trim()">Créer l'issue</button>
|
||||
</div>
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user