База

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

@@ -0,0 +1,31 @@
+import { ChangeDetectorRef, Component, inject } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { TaskService } from './task-service';
+import { Task } from './task';
+
+@Component({
+  selector: 'app-task-details',
+  imports: [],
+  template: `
+    <p>{{ task?.name }}</p>
+    <p>{{ task?.numberPhone }}</p>
+    <p>{{ task?.streetAddress }}</p>
+  `,
+  styles: ``,
+})
+export class TaskDetails {
+  route: ActivatedRoute = inject(ActivatedRoute);
+  taskId = '';
+  taskService: TaskService = inject(TaskService);
+  changeDetectorRef = inject(ChangeDetectorRef);
+  task: Task | undefined;
+  constructor() {
+    this.taskId = this.route.snapshot.params['id'];
+    this.taskService.getTaskById(this.taskId).then(task => {
+      if (task) {
+        this.task = task;
+        this.changeDetectorRef.markForCheck()
+      }
+    });
+  }
+}

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

@@ -0,0 +1,25 @@
+import { Component, input } from '@angular/core';
+import { Task } from './task';
+import { RouterLink } from '@angular/router';
+
+@Component({
+  selector: 'app-task-item',
+  imports: [
+    RouterLink
+  ],
+  template: `
+    <p>{{ task().name }}</p>
+    <p>{{ task().city }}, {{ task().streetAddress }}</p>
+    <p>{{ task().numberPhone }}</p>
+    <p><a [routerLink]="['/details', task().id]">Подробнее...</a></p>
+  `,
+  styles: `
+    :host {
+      display: block;
+      margin-bottom: 20px;
+    }
+  `,
+})
+export class TaskItem {
+  task = input.required<Task>();
+}

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(_ => '');
+    });
+  }
+}

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

@@ -0,0 +1,68 @@
+import { Component, inject } from '@angular/core';
+import { TaskService } from './task-service';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-task-new',
+  imports: [
+    ReactiveFormsModule
+  ],
+  template: `
+    <form [formGroup]="formGroup" (submit)="submitForm()">
+      <div class="form-field">
+        <label for="name">Имя: </label>
+        <input id="name" type="text" formControlName="name">
+      </div>
+      <div class="form-field">
+        <label for="city">Город: </label>
+        <input id="city" type="text" formControlName="city">
+      </div>
+      <div class="form-field">
+        <label for="streetAddress">Адрес: </label>
+        <input id="streetAddress" type="text" formControlName="streetAddress">
+      </div>
+      <div class="form-field">
+        <label for="numberPhone">Номер телефона: </label>
+        <input id="numberPhone" type="text" formControlName="numberPhone">
+      </div>
+      <button type="submit">Добавить</button>
+    </form>
+  `,
+  styles: `
+    form{
+      max-width: 400px;
+      margin: 0 auto;
+      text-align: right;
+    }
+    .form-field {
+      margin-bottom: 10px;
+    }
+    button{
+      padding: 5px;
+    }
+  `,
+})
+export class TaskNew {
+  taskService: TaskService = inject(TaskService);
+  router: Router = inject(Router);
+
+  formGroup = new FormGroup({
+    name: new FormControl(''),
+    city: new FormControl(''),
+    streetAddress: new FormControl(''),
+    numberPhone: new FormControl(''),
+  })
+
+  async submitForm(){
+    const createdTask = await this.taskService.createTask({
+      name: this.formGroup.value.name ?? "",
+      city: this.formGroup.value.city ?? "",
+      streetAddress: this.formGroup.value.streetAddress ?? "",
+      numberPhone: this.formGroup.value.numberPhone ?? "",
+    })
+
+    this.formGroup.reset();
+    await this.router.navigate(['details', createdTask.id]);
+  }
+}

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

@@ -0,0 +1,20 @@
+import { Service } from '@angular/core';
+import { Task } from './task';
+import PocketBase from 'pocketbase'
+
+@Service()
+export class TaskService {
+  pbTasks = new PocketBase('http://127.0.0.1:8090').collection<Task>('tasks');
+
+  async getAllTasks(): Promise<Task[]> {
+    return await this.pbTasks.getFullList();
+  }
+
+  async getTaskById(id: string): Promise<Task | null> {
+    return await this.pbTasks.getOne(id);
+  }
+
+  async createTask(task: Omit<Task, 'id'>): Promise<Task> {
+    return await this.pbTasks.create(task);
+  }
+}

src/app/features/tasks/task.ts

@@ -0,0 +1,7 @@
+export interface Task {
+  id: string;
+  name: string;
+  city: string;
+  streetAddress: string;
+  numberPhone: string;
+}