feat: add task status options and refactor task item and list components to use dynamic status selection

Author: aimxnaim

09-services-deep-dive/src/app/tasks/task.model.ts

@@ -1,5 +1,38 @@
+import { InjectionToken, Provider } from "@angular/core";
+
 export type TaskStatus = 'OPEN' | 'IN_PROGRESS' | 'DONE';
 
+export const TASK_OPTIONS_LIST = new InjectionToken<TaskStatusOption>('task-options-list');
+
+export const TaskStatusOptions: TaskStatusOption = [
+  {
+    value: 'open',
+    taskStatus: 'OPEN',
+    text: 'Open',
+  },
+  {
+    value: 'in-progress',
+    taskStatus: 'IN_PROGRESS',
+    text: 'In-Progress',
+  },
+  {
+    value: 'done',
+    taskStatus: 'DONE',
+    text: 'Completed',
+  },
+]
+
+type TaskStatusOption = {
+  value: 'open' | 'in-progress' | 'done';
+  taskStatus: TaskStatus;
+  text: string;
+}[]
+
+export const taskStatusOptionsProvider : Provider = {
+  provide: TASK_OPTIONS_LIST,
+  useValue: TaskStatusOptions
+}
+
 export interface Task {
   id: string;
   title: string;

09-services-deep-dive/src/app/tasks/tasks-list/task-item/task-item.component.html

@@ -12,13 +12,7 @@ <h3>{{ task().title }}</h3>
   <p>{{ task().description }}</p>
   <form (ngSubmit)="onChangeTaskStatus(task().id, status.value)">
     <select #status>
-      <option value="open" [selected]="task().status === 'OPEN'">Open</option>
-      <option value="in-progress" [selected]="task().status === 'IN_PROGRESS'">
-        In-Progress
-      </option>
-      <option value="done" [selected]="task().status === 'DONE'">
-        Completed
-      </option>
+      <option *ngFor="let option of taskStatusOptions" [value]="option.value" [selected]="task().status === option.taskStatus">{{ option.text }}</option>
     </select>
     <p>
       <button>Change Status</button>

09-services-deep-dive/src/app/tasks/tasks-list/task-item/task-item.component.ts

@@ -1,18 +1,23 @@
 import { Component, computed, inject, input } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
-import { Task, TaskStatus } from '../../task.model';
+import { TASK_OPTIONS_LIST, Task, TaskStatus } from '../../task.model';
 import { TasksServiceToken } from '../../../../main';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-task-item',
   standalone: true,
-  imports: [FormsModule],
+  imports: [
+    FormsModule,
+    CommonModule
+  ],
   templateUrl: './task-item.component.html',
   styleUrl: './task-item.component.css',
 })
 export class TaskItemComponent {
   private tasksService = inject(TasksServiceToken); 
+  taskStatusOptions = inject(TASK_OPTIONS_LIST);
   task = input.required<Task>();
   taskStatus = computed(() => {
     switch (this.task().status) {

09-services-deep-dive/src/app/tasks/tasks-list/tasks-list.component.html

@@ -3,9 +3,7 @@ <h2>My Tasks</h2>
   <p>
     <select (change)="onChangeTasksFilter(filter.value)" #filter>
       <option value="all">All</option>
-      <option value="open">Open</option>
-      <option value="in-progress">In-Progress</option>
-      <option value="done">Completed</option>
+      <option *ngFor="let option of taskStatusOptions" [value]="option.value">{{ option.text }}</option>
     </select>
   </p>
 </header>

09-services-deep-dive/src/app/tasks/tasks-list/tasks-list.component.ts

@@ -1,18 +1,25 @@
 import { Component, computed, inject, signal } from '@angular/core';
-
 import { TaskItemComponent } from './task-item/task-item.component';
-import { TasksService } from '../tasks.service';
 import { TasksServiceToken } from '../../../main';
+import { TASK_OPTIONS_LIST, taskStatusOptionsProvider } from '../task.model';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-tasks-list',
   standalone: true,
   templateUrl: './tasks-list.component.html',
   styleUrl: './tasks-list.component.css',
-  imports: [TaskItemComponent],
+  imports: [
+    TaskItemComponent,
+    CommonModule
+  ],
+  providers: [
+    taskStatusOptionsProvider
+  ]
 })
 export class TasksListComponent {
-  private tasksService = inject(TasksServiceToken);  
+  private tasksService = inject(TasksServiceToken); 
+  taskStatusOptions = inject(TASK_OPTIONS_LIST); 
   selectedFilter = signal<string>('all');
   tasks = computed(() => {
     switch (this.selectedFilter()) {