Gato/Bonsai-webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Modification ajoute de dépendence

Browse Source
This commit is contained in:
Gato
2026-05-23 08:50:03 +02:00
parent eeb648addd
commit b3f25369be
3 changed files with 124 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/issues/issue-detail/issue-detail.css
+55 -2
View File
@@ -146,8 +146,61 @@
background-color: #f3f4f6;
}
.dependency-multiselect {
min-height: 8rem;
.dependency-list {
list-style: none;
margin: 0 0 0.5rem;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.dependency-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.3rem 0.6rem;
border: 1px solid #e5e7eb;
border-radius: 0.4rem;
background: #f9fafb;
}
.dependency-label {
font-size: 0.875rem;
color: #374151;
}
.dependency-remove {
flex-shrink: 0;
border: none;
background: transparent;
color: #9ca3af;
font-size: 1.1rem;
line-height: 1;
cursor: pointer;
padding: 0 0.15rem;
border-radius: 0.25rem;
}
.dependency-remove:hover {
color: #b91c1c;
background: #fee2e2;
}
.dependency-add-btn {
margin-top: 0.25rem;
}
.dependency-add-row {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.25rem;
}
.dependency-select {
flex: 1;
}
.epic-issues-card {
src/app/issues/issue-detail/issue-detail.html
+35 -18
View File
@@ -1,3 +1,4 @@
<!-- suppress HtmlUnknownAttribute -->
<header class="page-header mb-4">
<div>
<h1>Detail de l'issue</h1>
@@ -7,6 +8,7 @@
<div class="status-inline d-flex align-items-center gap-2 bg-white border rounded-3 px-3 py-2 shadow-sm">
<span class="status-label">Status</span>
<select
aria-label="Status"
class="status-select form-select form-select-sm w-auto"
[ngModel]="issue.status"
(ngModelChange)="updateStatus($event)"
@@ -43,13 +45,13 @@
<tr>
<th>Nom</th>
<td>
<input class="form-control form-control-sm" type="text" [(ngModel)]="issue.name" (blur)="saveIssue()" />
<input aria-label="Nom" class="form-control form-control-sm" type="text" [(ngModel)]="issue.name" (blur)="saveIssue()" />
</td>
</tr>
<tr>
<th>Type</th>
<td>
<select class="form-select form-select-sm" [(ngModel)]="issueTypeValue" (change)="saveIssue()">
<select aria-label="Type" class="form-select form-select-sm" [(ngModel)]="issueTypeValue" (change)="saveIssue()">
@for (type of typeOptions; track type) {
<option [value]="type">{{ type }}</option>
}
@@ -60,7 +62,7 @@
<tr>
<th>Epic</th>
<td>
<select class="form-select form-select-sm" [(ngModel)]="issue.epic" (change)="saveIssue()">
<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>
@@ -72,43 +74,60 @@
<tr>
<th>Depend de</th>
<td>
<select multiple class="dependency-multiselect form-select form-select-sm" [(ngModel)]="dependencyIds" (change)="saveIssue()">
@for (candidate of dependencyCandidates; track candidate.id) {
<option [ngValue]="candidate.id">
#{{ candidate.id }} - {{ candidate.name || 'Sans nom' }}
</option>
}
</select>
@if (dependencyIds.length > 0) {
<ul class="dependency-list">
@for (depId of dependencyIds; track depId) {
<li class="dependency-item">
<span class="dependency-label">#{{ depId }} - {{ resolveDependency(depId)?.name || 'Sans nom' }}</span>
<button type="button" class="dependency-remove" (click)="removeDependency(depId)" title="Supprimer">×</button>
</li>
}
</ul>
}
@if (showAddDependency) {
<div class="dependency-add-row">
<select aria-label="Choisir une dépendance" class="form-select form-select-sm dependency-select" [(ngModel)]="selectedCandidateId">
<option [ngValue]="null">Choisir une issue...</option>
@for (candidate of availableCandidates; track candidate.id) {
<option [ngValue]="candidate.id">#{{ candidate.id }} - {{ candidate.name || 'Sans nom' }}</option>
}
</select>
<button type="button" class="btn btn-sm btn-primary" (click)="confirmAddDependency()" [disabled]="selectedCandidateId === null">Ajouter</button>
<button type="button" class="btn btn-sm btn-outline-secondary" (click)="cancelAddDependency()">Annuler</button>
</div>
} @else {
<button type="button" class="btn btn-sm btn-outline-primary dependency-add-btn" (click)="openAddDependency()">+ Ajouter une dépendance</button>
}
</td>
</tr>
<tr>
<th>Assignee</th>
<td>
<input class="form-control form-control-sm" type="text" [(ngModel)]="issue.assignee" (blur)="saveIssue()" />
<input aria-label="Assignee" class="form-control form-control-sm" type="text" [(ngModel)]="issue.assignee" (blur)="saveIssue()" />
</td>
</tr>
<tr>
<th>Date d'echeance</th>
<td>
<input class="form-control form-control-sm" type="date" [(ngModel)]="issue.dueDate" (blur)="saveIssue()" />
<input aria-label="Date d'échéance" class="form-control form-control-sm" type="date" [(ngModel)]="issue.dueDate" (blur)="saveIssue()" />
</td>
</tr>
<tr>
<th>Temps estimé</th>
<td>
<input class="form-control form-control-sm" type="number" min="0" step="0.5" [(ngModel)]="estimatedTimeValue" (blur)="saveIssue()" />
<input aria-label="Temps estimé" class="form-control form-control-sm" type="number" min="0" step="0.5" [(ngModel)]="estimatedTimeValue" (blur)="saveIssue()" />
</td>
</tr>
<tr>
<th>Description</th>
<td>
<textarea class="form-control form-control-sm" rows="4" [(ngModel)]="issue.description" (blur)="saveIssue()"></textarea>
<textarea aria-label="Description" class="form-control form-control-sm" rows="4" [(ngModel)]="issue.description" (blur)="saveIssue()"></textarea>
</td>
</tr>
<tr>
<th>Priorite</th>
<td>
<select class="form-select form-select-sm" [(ngModel)]="issue.priority" (change)="saveIssue()">
<select aria-label="Priorité" class="form-select form-select-sm" [(ngModel)]="issue.priority" (change)="saveIssue()">
<option value="Basse">Basse</option>
<option value="Moyenne">Moyenne</option>
<option value="Haute">Haute</option>
@@ -118,7 +137,7 @@
<tr>
<th>Progression</th>
<td>
<input class="form-control form-control-sm" type="number" min="0" max="100" [(ngModel)]="issue.progress" (blur)="saveIssue()" />
<input aria-label="Progression" class="form-control form-control-sm" type="number" min="0" max="100" [(ngModel)]="issue.progress" (blur)="saveIssue()" />
</td>
</tr>
</tbody>
@@ -151,5 +170,3 @@
}
</section>
}
src/app/issues/issue-detail/issue-detail.ts
+34 -21
View File
@@ -18,6 +18,8 @@ export class IssueDetail {
protected issue: IssueEntity = this.buildIssue();
protected readonly issues = this.issuesStore.issues;
protected moreMenuOpen = false;
protected showAddDependency = false;
protected selectedCandidateId: number | null = null;
protected readonly statusOptions: IssueEntity['status'][] = [
'draft',
@@ -39,10 +41,38 @@ export class IssueDetail {
return this.issue.dependsOnIds;
}
protected set dependencyIds(value: number[]) {
this.issue.dependsOnIds = Array.isArray(value)
? value.filter((dependencyId): dependencyId is number => typeof dependencyId === 'number')
: [];
protected get availableCandidates(): IssueEntity[] {
return this.issues().filter(
(issue) => issue.id !== this.issue.id && !this.issue.dependsOnIds.includes(issue.id),
);
}
protected resolveDependency(id: number): IssueEntity | undefined {
return this.issues().find((issue) => issue.id === id);
}
protected openAddDependency(): void {
this.selectedCandidateId = null;
this.showAddDependency = true;
}
protected cancelAddDependency(): void {
this.showAddDependency = false;
this.selectedCandidateId = null;
}
protected confirmAddDependency(): void {
if (this.selectedCandidateId !== null) {
this.issue.dependsOnIds = [...this.issue.dependsOnIds, this.selectedCandidateId];
this.saveIssue();
}
this.showAddDependency = false;
this.selectedCandidateId = null;
}
protected removeDependency(id: number): void {
this.issue.dependsOnIds = this.issue.dependsOnIds.filter((depId) => depId !== id);
this.saveIssue();
}
protected get estimatedTimeValue(): number | null {
@@ -102,23 +132,6 @@ export class IssueDetail {
this.moreMenuOpen = false;
}
protected resolveDependencyLabels(issueIds: number[]): string {
if (issueIds.length === 0) {
return '-';
}
return issueIds
.map((issueId) => this.issues().find((issue) => issue.id === issueId))
.filter((issue): issue is IssueEntity => Boolean(issue))
.map((issue) => `#${issue.id} - ${issue.name || 'Sans nom'}`)
.join(', ');
}
protected get dependencyCandidates(): IssueEntity[] {
return this.issues().filter((issue) => issue.id !== this.issue.id);
}
private buildIssue(): IssueEntity {
const idParam = this.route.snapshot.paramMap.get('id');
const draftId = this.route.snapshot.queryParamMap.get('draftId');