Ordre des status

Signed-off-by: Gato <cedric@goutailler-olivier.fr>

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

@@ -29,7 +29,7 @@
       @if (statusMenuOpen) {
         <div class="status-backdrop" (click)="closeStatusMenu()"></div>
         <ul class="status-dropdown dropdown-menu show">
-          @for (status of statusOptions; track status.id) {
+          @for (status of statusOptions(); track status.id) {
             <li>
               <button
                 type="button"

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

@@ -8,7 +8,7 @@ import { IssueEntity, IssuesStore } from '../issues.store';
 import { IssueComments } from '../issue-comments/issue-comments';
 import { handleImagePaste, insertAtSelection } from '../paste-image.util';
 import { MilestoneEntity, MilestonesStore } from '../../milestones/milestones.store';
-import { StatusEntity, StatusesStore } from '../../settings/statuses/statuses.store';
+import { StatusEntity, StatusesStore } from '../../statuses/statuses.store';
 
 @Component({
   selector: 'app-issue-detail',
@@ -21,8 +21,8 @@ export class IssueDetail {
   private readonly router = inject(Router);
   private readonly issuesStore = inject(IssuesStore);
   private readonly milestonesStore = inject(MilestonesStore);
+  private readonly statusesStore = inject(StatusesStore);
   private readonly sanitizer = inject(DomSanitizer);
-  protected readonly statusesStore = inject(StatusesStore);
   protected readonly isNewIssueRoute = this.route.snapshot.routeConfig?.path === 'issues/new';
 
   protected issue: IssueEntity = this.buildIssue();
@@ -66,9 +66,7 @@ export class IssueDetail {
   protected showCreateInEpic = false;
   protected newIssueName = '';
 
-  protected get statusOptions(): StatusEntity[] {
-    return [...this.statusesStore.statuses()].sort((a, b) => a.order - b.order);
-  }
+  protected readonly statusOptions = this.statusesStore.statuses;
 
   protected readonly typeOptions: IssueEntity['type'][] = [
     'Epic',

src/app/issues/issues.html

@@ -69,7 +69,7 @@
         </button>
       </li>
       <li><hr class="dropdown-divider"></li>
-      @for (status of statusOptions; track status.id) {
+      @for (status of statusOptions(); track status.id) {
         <li>
           <button class="dropdown-item d-flex align-items-center gap-2" (click)="toggleStatus(status.id, $event)">
             <span class="filter-check">@if (selectedStatuses.has(status.id)) { ✓ }</span>

src/app/issues/issues.ts

@@ -3,7 +3,7 @@ import { FormsModule } from '@angular/forms';
 import { Router } from '@angular/router';
 import { IssueEntity, IssueStatus, IssuesStore } from './issues.store';
 import { MilestoneEntity, MilestonesStore } from '../milestones/milestones.store';
-import { StatusEntity, StatusesStore } from '../settings/statuses/statuses.store';
+import { StatusEntity, StatusesStore } from '../statuses/statuses.store';
 
 @Component({
   selector: 'app-issues',
@@ -15,7 +15,7 @@ export class Issues {
   private readonly router = inject(Router);
   private readonly issuesStore = inject(IssuesStore);
   private readonly milestonesStore = inject(MilestonesStore);
-  protected readonly statusesStore = inject(StatusesStore);
+  private readonly statusesStore = inject(StatusesStore);
 
   constructor() {
     this.issuesStore.load();
@@ -35,9 +35,7 @@ export class Issues {
     'Epic', 'Bug', 'Study', 'Story', 'Task', 'Technical Story',
   ];
 
-  protected get statusOptions(): StatusEntity[] {
-    return [...this.statusesStore.statuses()].sort((a, b) => a.order - b.order);
-  }
+  protected readonly statusOptions = this.statusesStore.statuses;
 
   protected getMilestoneForIssue(issueId: number): MilestoneEntity | undefined {
     return this.milestones().find((m) => m.issueIds.includes(issueId));