34 lines
1.2 KiB
TypeScript
34 lines
1.2 KiB
TypeScript
import { Component, inject, signal } from '@angular/core';
|
|
import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
|
|
import { injectQuery } from '@tanstack/angular-query-experimental';
|
|
import { RecipeService } from '../service/recipe.service';
|
|
import { RecipeCardGrid } from '../recipe-card-grid/recipe-card-grid';
|
|
|
|
@Component({
|
|
selector: 'app-recipes-search-page',
|
|
imports: [ReactiveFormsModule, RecipeCardGrid],
|
|
templateUrl: './recipes-search-page.html',
|
|
styleUrl: './recipes-search-page.css',
|
|
})
|
|
export class RecipesSearchPage {
|
|
private readonly recipeService = inject(RecipeService);
|
|
|
|
protected readonly searchRecipesForm = new FormGroup({
|
|
prompt: new FormControl('', [Validators.required]),
|
|
});
|
|
|
|
protected readonly givenPrompt = signal<null | string>(null);
|
|
|
|
protected readonly resultsQuery = injectQuery(() => ({
|
|
queryFn: () => this.recipeService.aiSearch(this.givenPrompt()!),
|
|
queryKey: ['recipes-search', this.givenPrompt()],
|
|
enabled: () => !!this.givenPrompt(),
|
|
}));
|
|
|
|
protected onPromptSubmit() {
|
|
if (this.searchRecipesForm.value.prompt) {
|
|
this.givenPrompt.set(this.searchRecipesForm.value.prompt);
|
|
}
|
|
}
|
|
}
|