Refactor issue detail editing: streamline input handling and remove editing mode logic
This commit is contained in:
@@ -4,24 +4,20 @@
|
||||
<p>Informations de creation et de suivi de l'issue.</p>
|
||||
</div>
|
||||
<div class="header-meta">
|
||||
@if (!isEditing) {
|
||||
<div class="status-inline">
|
||||
<span class="status-label">Status</span>
|
||||
<select
|
||||
class="status-select"
|
||||
[ngModel]="issue.status"
|
||||
(ngModelChange)="updateStatus($event)"
|
||||
>
|
||||
@for (status of statusOptions; track status) {
|
||||
<option [value]="status">{{ status }}</option>
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
}
|
||||
<div class="status-inline">
|
||||
<span class="status-label">Status</span>
|
||||
<select
|
||||
class="status-select"
|
||||
[ngModel]="issue.status"
|
||||
(ngModelChange)="updateStatus($event)"
|
||||
>
|
||||
@for (status of statusOptions; track status) {
|
||||
<option [value]="status">{{ status }}</option>
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="header-actions">
|
||||
@if (!isEditing) {
|
||||
<button type="button" class="edit-button" (click)="startEdit()">Editer l'issue</button>
|
||||
<div class="more-wrapper">
|
||||
<button type="button" class="more-button" (click)="toggleMoreMenu()">More ▾</button>
|
||||
|
||||
@@ -33,7 +29,6 @@
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
@@ -48,125 +43,79 @@
|
||||
<tr>
|
||||
<th>Nom</th>
|
||||
<td>
|
||||
@if (isEditing) {
|
||||
<input type="text" [(ngModel)]="issue.name" />
|
||||
} @else {
|
||||
{{ issue.name || '-' }}
|
||||
}
|
||||
<input type="text" [(ngModel)]="issue.name" (blur)="saveIssue()" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Type</th>
|
||||
<td>
|
||||
@if (isEditing) {
|
||||
<select [(ngModel)]="issueTypeValue">
|
||||
@for (type of typeOptions; track type) {
|
||||
<option [value]="type">{{ type }}</option>
|
||||
}
|
||||
</select>
|
||||
} @else {
|
||||
{{ issueTypeValue }}
|
||||
}
|
||||
<select [(ngModel)]="issueTypeValue" (change)="saveIssue()">
|
||||
@for (type of typeOptions; track type) {
|
||||
<option [value]="type">{{ type }}</option>
|
||||
}
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Epic</th>
|
||||
<td>
|
||||
@if (isEditing) {
|
||||
<input type="text" [(ngModel)]="issue.epic" />
|
||||
} @else {
|
||||
{{ issue.epic || '-' }}
|
||||
}
|
||||
<input type="text" [(ngModel)]="issue.epic" (blur)="saveIssue()" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Depend de</th>
|
||||
<td>
|
||||
@if (isEditing) {
|
||||
<select multiple [(ngModel)]="dependencyIds" class="dependency-multiselect">
|
||||
@for (candidate of dependencyCandidates; track candidate.id) {
|
||||
<option [ngValue]="candidate.id">
|
||||
#{{ candidate.id }} - {{ candidate.name || 'Sans nom' }}
|
||||
</option>
|
||||
}
|
||||
</select>
|
||||
} @else {
|
||||
{{ resolveDependencyLabels(dependencyIds) }}
|
||||
}
|
||||
<select multiple [(ngModel)]="dependencyIds" class="dependency-multiselect" (change)="saveIssue()">
|
||||
@for (candidate of dependencyCandidates; track candidate.id) {
|
||||
<option [ngValue]="candidate.id">
|
||||
#{{ candidate.id }} - {{ candidate.name || 'Sans nom' }}
|
||||
</option>
|
||||
}
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Assignee</th>
|
||||
<td>
|
||||
@if (isEditing) {
|
||||
<input type="text" [(ngModel)]="issue.assignee" />
|
||||
} @else {
|
||||
{{ issue.assignee || '-' }}
|
||||
}
|
||||
<input type="text" [(ngModel)]="issue.assignee" (blur)="saveIssue()" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Date d'echeance</th>
|
||||
<td>
|
||||
@if (isEditing) {
|
||||
<input type="date" [(ngModel)]="issue.dueDate" />
|
||||
} @else {
|
||||
{{ issue.dueDate || '-' }}
|
||||
}
|
||||
<input type="date" [(ngModel)]="issue.dueDate" (blur)="saveIssue()" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Temps estimé</th>
|
||||
<td>
|
||||
@if (isEditing) {
|
||||
<input type="number" min="0" step="0.5" [(ngModel)]="estimatedTimeValue" />
|
||||
} @else {
|
||||
{{ estimatedTimeValue !== null ? estimatedTimeValue + ' h' : '-' }}
|
||||
}
|
||||
<input type="number" min="0" step="0.5" [(ngModel)]="estimatedTimeValue" (blur)="saveIssue()" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Description</th>
|
||||
<td>
|
||||
@if (isEditing) {
|
||||
<textarea rows="4" [(ngModel)]="issue.description"></textarea>
|
||||
} @else {
|
||||
{{ issue.description || '-' }}
|
||||
}
|
||||
<textarea rows="4" [(ngModel)]="issue.description" (blur)="saveIssue()"></textarea>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Priorite</th>
|
||||
<td>
|
||||
@if (isEditing) {
|
||||
<select [(ngModel)]="issue.priority">
|
||||
<option value="Basse">Basse</option>
|
||||
<option value="Moyenne">Moyenne</option>
|
||||
<option value="Haute">Haute</option>
|
||||
</select>
|
||||
} @else {
|
||||
{{ issue.priority }}
|
||||
}
|
||||
<select [(ngModel)]="issue.priority" (change)="saveIssue()">
|
||||
<option value="Basse">Basse</option>
|
||||
<option value="Moyenne">Moyenne</option>
|
||||
<option value="Haute">Haute</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Progression</th>
|
||||
<td>
|
||||
@if (isEditing) {
|
||||
<input type="number" min="0" max="100" [(ngModel)]="issue.progress" />
|
||||
} @else {
|
||||
{{ issue.progress }}%
|
||||
}
|
||||
<input type="number" min="0" max="100" [(ngModel)]="issue.progress" (blur)="saveIssue()" />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
@if (isEditing) {
|
||||
<div class="form-actions">
|
||||
<button type="button" class="cancel-button" (click)="cancelEdit()">Annuler</button>
|
||||
<button type="button" class="save-button" (click)="saveIssue()">Enregistrer</button>
|
||||
</div>
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user