Edition des issues

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

@@ -2,6 +2,13 @@
   display: block;
 }
 
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 1rem;
+}
+
 .page-header h1 {
   margin: 0;
   font-size: 2rem;
@@ -12,6 +19,34 @@
   color: #4b5563;
 }
 
+.edit-button {
+  border: none;
+  border-radius: 0.5rem;
+  background-color: #2563eb;
+  color: #ffffff;
+  padding: 0.65rem 1rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.edit-button:hover {
+  background-color: #1d4ed8;
+}
+
+.save-button {
+  border: none;
+  border-radius: 0.5rem;
+  background-color: #059669;
+  color: #ffffff;
+  padding: 0.65rem 1rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.save-button:hover {
+  background-color: #047857;
+}
+
 .detail-card {
   background-color: #ffffff;
   border: 1px solid #e5e7eb;
@@ -32,6 +67,21 @@ td {
   vertical-align: top;
 }
 
+input,
+select,
+textarea {
+  width: 100%;
+  padding: 0.5rem 0.65rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.5rem;
+  font: inherit;
+  box-sizing: border-box;
+}
+
+textarea {
+  resize: vertical;
+}
+
 th {
   width: 220px;
   background-color: #f9fafb;
@@ -44,6 +94,10 @@ tr:last-child td {
 }
 
 @media (max-width: 768px) {
+  .page-header {
+    flex-direction: column;
+  }
+
   th {
     width: 40%;
   }

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

@@ -1,6 +1,14 @@
 <header class="page-header">
+  <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>

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

@@ -1,82 +1,64 @@
-import { Component, inject, signal } from '@angular/core';
+import { Component, inject } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { FormsModule } from '@angular/forms';
-
+import { ActivatedRoute, Router } from '@angular/router';
-type IssueStatus = 'draft' | 'todo' | 'done' | 'in-progress';
+import { IssueEntity, IssuesStore } from '../issues.store';
-
-type IssueDetailModel = {
-  id: number;
-  assignee: string;
-  epic: string;
-  name: string;
-  dueDate: string;
-  description: string;
-  priority: 'Basse' | 'Moyenne' | 'Haute';
-  status: IssueStatus;
-  progress: number;
-};
 
 @Component({
   selector: 'app-issue-detail',
-  imports: [],
+  imports: [FormsModule],
   templateUrl: './issue-detail.html',
   styleUrl: './issue-detail.css',
 })
 export class IssueDetail {
   private readonly route = inject(ActivatedRoute);
+  private readonly router = inject(Router);
+  private readonly issuesStore = inject(IssuesStore);
 
-  protected readonly issue = signal<IssueDetailModel>(this.buildIssue());
+  protected issue: IssueEntity = this.buildIssue();
+  protected isEditing = this.route.snapshot.queryParamMap.get('mode') === 'edit';
 
-  private buildIssue(): IssueDetailModel {
+  protected toggleEdit(): void {
+    this.isEditing = !this.isEditing;
+  }
+
+  protected saveIssue(): void {
+    this.issuesStore.upsert(this.issue);
+    this.isEditing = false;
+    this.router.navigate(['/issues']);
+  }
+
+  private buildIssue(): IssueEntity {
     const idParam = this.route.snapshot.paramMap.get('id');
     const draftId = this.route.snapshot.queryParamMap.get('draftId');
+    const isNewIssueRoute = this.route.snapshot.routeConfig?.path === 'issues/new';
 
-    const resolvedId = Number(idParam ?? draftId ?? 1);
+    const resolvedId = Number(idParam ?? draftId ?? 0);
-    const safeId = Number.isNaN(resolvedId) ? 1 : resolvedId;
+    const safeId = Number.isNaN(resolvedId) ? 0 : resolvedId;
 
-    const existingIssues: Record<number, IssueDetailModel> = {
+    if (isNewIssueRoute) {
-      1: {
+      return {
-        id: 1,
+        id: safeId,
-        assignee: 'Marie',
+        assignee: '',
-        epic: 'EPIC-UI',
+        epic: '',
-        name: 'Bug affichage menu mobile',
+        name: '',
-        dueDate: '2026-06-10',
+        dueDate: '',
-        description: 'Corriger le comportement du menu sur petits ecrans.',
+        description: '',
-        priority: 'Haute',
-        status: 'in-progress',
-        progress: 35,
-      },
-      2: {
-        id: 2,
-        assignee: 'Nabil',
-        epic: 'EPIC-FORM',
-        name: 'Erreur validation formulaire projet',
-        dueDate: '2026-06-12',
-        description: 'Fiabiliser les regles de validation du formulaire projet.',
         priority: 'Moyenne',
-        status: 'todo',
+        status: 'draft',
-        progress: 20,
+        progress: 0,
-      },
-      3: {
-        id: 3,
-        assignee: 'Sonia',
-        epic: 'EPIC-CONTENT',
-        name: 'Mise a jour message de bienvenue',
-        dueDate: '2026-06-18',
-        description: 'Mettre a jour le wording d accueil selon la charte produit.',
-        priority: 'Basse',
-        status: 'done',
-        progress: 100,
-      },
       };
+    }
+
+    const existingIssue = this.issuesStore.getById(safeId);
 
     return (
-      existingIssues[safeId] ?? {
+      existingIssue ?? {
         id: safeId,
-        assignee: 'A definir',
+        assignee: '',
-        epic: 'EPIC-WEBAPP',
+        epic: '',
-        name: `Nouvelle issue ${safeId}`,
+        name: '',
-        dueDate: '2026-06-15',
+        dueDate: '',
-        description: 'Decrire ici le contexte, les attentes et les criteres d acceptation.',
+        description: '',
         priority: 'Moyenne',
         status: 'draft',
         progress: 0,

src/app/issues/issues.html

@@ -26,7 +26,7 @@
           (click)="openIssue(issue.id)"
           (keydown.enter)="openIssue(issue.id)"
         >
-          <td>{{ issue.title }}</td>
+          <td>{{ issue.name }}</td>
           <td>{{ issue.priority }}</td>
           <td>{{ issue.status }}</td>
           <td>{{ issue.assignee }}</td>

src/app/issues/issues.store.ts

@@ -0,0 +1,81 @@
+import { Injectable, signal } from '@angular/core';
+
+export type IssueStatus = 'draft' | 'todo' | 'done' | 'in-progress';
+export type IssuePriority = 'Basse' | 'Moyenne' | 'Haute';
+
+export type IssueEntity = {
+  id: number;
+  assignee: string;
+  epic: string;
+  name: string;
+  dueDate: string;
+  description: string;
+  priority: IssuePriority;
+  status: IssueStatus;
+  progress: number;
+};
+
+@Injectable({ providedIn: 'root' })
+export class IssuesStore {
+  private readonly data = signal<IssueEntity[]>([
+    {
+      id: 1,
+      assignee: 'Marie',
+      epic: 'EPIC-UI',
+      name: 'Bug affichage menu mobile',
+      dueDate: '2026-06-10',
+      description: 'Corriger le comportement du menu sur petits ecrans.',
+      priority: 'Haute',
+      status: 'in-progress',
+      progress: 35,
+    },
+    {
+      id: 2,
+      assignee: 'Nabil',
+      epic: 'EPIC-FORM',
+      name: 'Erreur validation formulaire projet',
+      dueDate: '2026-06-12',
+      description: 'Fiabiliser les regles de validation du formulaire projet.',
+      priority: 'Moyenne',
+      status: 'todo',
+      progress: 20,
+    },
+    {
+      id: 3,
+      assignee: 'Sonia',
+      epic: 'EPIC-CONTENT',
+      name: 'Mise a jour message de bienvenue',
+      dueDate: '2026-06-18',
+      description: 'Mettre a jour le wording d accueil selon la charte produit.',
+      priority: 'Basse',
+      status: 'done',
+      progress: 100,
+    },
+  ]);
+
+  readonly issues = this.data.asReadonly();
+
+  getById(id: number): IssueEntity | undefined {
+    return this.data().find((issue) => issue.id === id);
+  }
+
+  getNextId(): number {
+    const ids = this.data().map((issue) => issue.id);
+    return ids.length > 0 ? Math.max(...ids) + 1 : 1;
+  }
+
+  upsert(issue: IssueEntity): void {
+    this.data.update((issues) => {
+      const existingIndex = issues.findIndex((current) => current.id === issue.id);
+
+      if (existingIndex === -1) {
+        return [...issues, issue];
+      }
+
+      const updated = [...issues];
+      updated[existingIndex] = issue;
+      return updated;
+    });
+  }
+}
+

src/app/issues/issues.ts

@@ -1,13 +1,6 @@
-import { Component, signal } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { Router } from '@angular/router';
-
+import { IssuesStore } from './issues.store';
-type Issue = {
-  id: number;
-  title: string;
-  priority: 'Basse' | 'Moyenne' | 'Haute';
-  status: 'draft' | 'todo' | 'done' | 'in-progress';
-  assignee: string;
-};
 
 @Component({
   selector: 'app-issues',
@@ -16,39 +9,16 @@ type Issue = {
   styleUrl: './issues.css',
 })
 export class Issues {
-  constructor(private readonly router: Router) {}
+  private readonly router = inject(Router);
+  private readonly issuesStore = inject(IssuesStore);
 
-  protected readonly issues = signal<Issue[]>([
+  protected readonly issues = this.issuesStore.issues;
-    {
-      id: 1,
-      title: 'Bug affichage menu mobile',
-      priority: 'Haute',
-      status: 'in-progress',
-      assignee: 'Marie',
-    },
-    {
-      id: 2,
-      title: 'Erreur validation formulaire projet',
-      priority: 'Moyenne',
-      status: 'todo',
-      assignee: 'Nabil',
-    },
-    {
-      id: 3,
-      title: 'Mise a jour message de bienvenue',
-      priority: 'Basse',
-      status: 'done',
-      assignee: 'Sonia',
-    },
-  ]);
-
-  private nextId = 4;
 
   protected createIssue(): void {
+    const nextId = this.issuesStore.getNextId();
     this.router.navigate(['/issues/new'], {
-      queryParams: { draftId: this.nextId },
+      queryParams: { draftId: nextId, mode: 'edit' },
     });
-    this.nextId += 1;
   }
 
   protected openIssue(issueId: number): void {