NGRX-Playground/src/app/features/tasks/feature/tasks-page.component.ts

import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';
import { TasksStore } from '../data-access/tasks.store';
import { TaskFilter, TaskPriority } from '../data-access/task.model';

@Component({
    selector: 'app-tasks-page',
    templateUrl: './tasks-page.component.html',
    styleUrl: './tasks-page.component.css',
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TasksPageComponent {
    readonly store = inject(TasksStore);
    readonly draftTitle = signal('');
    readonly canCreateTask = computed(() => this.draftTitle().trim().length > 0 && !this.store.loading());
    readonly filters: TaskFilter[] = ['all', 'active', 'completed'];
    readonly priorities: TaskPriority[] = ['low', 'medium', 'high'];

    createTask(): void {
        const title = this.draftTitle().trim();

        if (!title) {
            return;
        }

        this.store.createTask({
            title,
            priority: this.store.draftPriority(),
        });
        this.draftTitle.set('');
    }

    updateDraftTitle(event: Event): void {
        const element = event.target as HTMLInputElement;
        this.draftTitle.set(element.value);
    }

    updateSearchTerm(event: Event): void {
        const element = event.target as HTMLInputElement;
        this.store.setSearchTerm(element.value);
    }

    updateDraftPriority(event: Event): void {
        const element = event.target as HTMLSelectElement;
        this.store.setDraftPriority(element.value as TaskPriority);
    }
}