База

src/app/features/tasks/task-list.ts

@@ -0,0 +1,59 @@
+import { Component, computed, inject, signal } from '@angular/core';
+import { TaskItem } from './task-item';
+import { Task } from './task';
+import { TaskService } from './task-service';
+import { RouterLink } from '@angular/router';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-home-page',
+  imports: [TaskItem, RouterLink, FormsModule],
+  template: `
+    <section>
+      <a [routerLink]="['/new']">Добавить</a><br>
+      <input [(ngModel)]="searchInput" type="text" />
+    </section>
+    <section class="result">
+      @for (task of filteredTasks(); track $index) {
+        <app-task-item [task]="task" />
+      }
+    </section>
+  `,
+  styles: `
+    input {
+      outline: none;
+      padding: 5px;
+    }
+    button {
+      cursor: pointer;
+      padding: 5px;
+    }
+    .result {
+      margin-top: 20px;
+    }
+  `,
+})
+export class TaskList {
+  tasks: Task[] = [];
+  taskService: TaskService = inject(TaskService);
+  searchInput = signal('');
+  filteredTasks = computed<Task[]>(() => {
+    const s = this.searchInput();
+    if (s === '') return this.tasks;
+    return this.tasks.filter(
+      (task) =>
+        task.name.includes(s) ||
+        task.city.includes(s) ||
+        task.streetAddress.includes(s) ||
+        task.numberPhone.includes(s),
+    );
+  });
+
+  constructor() {
+    this.taskService.getAllTasks().then(tasks => {
+      this.tasks = tasks;
+      this.searchInput.update(_ => " ")
+      this.searchInput.update(_ => '');
+    });
+  }
+}