Edition des issues

src/app/issues/issue-detail/issue-detail.html

@@ -1,6 +1,14 @@
 <header class="page-header">
-  <h1>Detail de l'issue</h1>
-  <p>Informations de creation et de suivi de l'issue.</p>
+  <div>
+    <h1>Detail de l'issue</h1>
+    <p>Informations de creation et de suivi de l'issue.</p>
+  </div>
+  <button type="button" class="edit-button" (click)="toggleEdit()">
+    {{ isEditing ? 'Fermer edition' : "Editer l'issue" }}
+  </button>
+  @if (isEditing) {
+    <button type="button" class="save-button" (click)="saveIssue()">Enregistrer</button>
+  }
 </header>
 
 <section class="detail-card" aria-label="Informations de l'issue">
@@ -8,39 +16,96 @@
     <tbody>
       <tr>
         <th>ID</th>
-        <td>{{ issue().id }}</td>
+        <td>{{ issue.id }}</td>
       </tr>
       <tr>
         <th>Nom</th>
-        <td>{{ issue().name }}</td>
+        <td>
+          @if (isEditing) {
+            <input type="text" [(ngModel)]="issue.name" />
+          } @else {
+            {{ issue.name || '-' }}
+          }
+        </td>
       </tr>
       <tr>
         <th>Epic</th>
-        <td>{{ issue().epic }}</td>
+        <td>
+          @if (isEditing) {
+            <input type="text" [(ngModel)]="issue.epic" />
+          } @else {
+            {{ issue.epic || '-' }}
+          }
+        </td>
       </tr>
       <tr>
         <th>Assignee</th>
-        <td>{{ issue().assignee }}</td>
+        <td>
+          @if (isEditing) {
+            <input type="text" [(ngModel)]="issue.assignee" />
+          } @else {
+            {{ issue.assignee || '-' }}
+          }
+        </td>
       </tr>
       <tr>
         <th>Date d'echeance</th>
-        <td>{{ issue().dueDate }}</td>
+        <td>
+          @if (isEditing) {
+            <input type="date" [(ngModel)]="issue.dueDate" />
+          } @else {
+            {{ issue.dueDate || '-' }}
+          }
+        </td>
       </tr>
       <tr>
         <th>Description</th>
-        <td>{{ issue().description }}</td>
+        <td>
+          @if (isEditing) {
+            <textarea rows="4" [(ngModel)]="issue.description"></textarea>
+          } @else {
+            {{ issue.description || '-' }}
+          }
+        </td>
       </tr>
       <tr>
         <th>Priorite</th>
-        <td>{{ issue().priority }}</td>
+        <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 }}
+          }
+        </td>
       </tr>
       <tr>
         <th>Status</th>
-        <td>{{ issue().status }}</td>
+        <td>
+          @if (isEditing) {
+            <select [(ngModel)]="issue.status">
+              <option value="draft">draft</option>
+              <option value="todo">todo</option>
+              <option value="done">done</option>
+              <option value="in-progress">in-progress</option>
+            </select>
+          } @else {
+            {{ issue.status }}
+          }
+        </td>
       </tr>
       <tr>
         <th>Progression</th>
-        <td>{{ issue().progress }}%</td>
+        <td>
+          @if (isEditing) {
+            <input type="number" min="0" max="100" [(ngModel)]="issue.progress" />
+          } @else {
+            {{ issue.progress }}%
+          }
+        </td>
       </tr>
     </tbody>
   </table>