Generate OpenAPI
npm run openapi-gen:backend-api
npm run openapi-gen:chat-service-api
Template
<p-button
(onClick)="onDeleteConfirmOpen(result.id)"
icon="pi pi-trash"
/>
Component
protected readonly confirmationService = inject(ConfirmationService);
protected onDeleteConfirmOpen(id: string): void {
this.confirmationService.confirm({
header: this.localizationService.translate('SHARED.DELETE'),
message: this.localizationService.translate('SHARED.CONFIRM_DELETE_KNOWLEDGE_BASE'),
acceptLabel: this.localizationService.translate('SHARED.DELETE'),
rejectLabel: this.localizationService.translate('SHARED.CANCEL'),
accept: () => {
this.knowledgeBaseStore.deleteDocument(id);
}
});
}
Service – API Call
A KnowledgeBaseService felelős az API hívásokért. A delete metódus meghívja a generált documentDeleteDelete végpontot a megadott id-val.
public delete(id: string): Observable<void> {
return this._documentApiService.documentDeleteDelete({ id: id }).pipe(map(() => void 0));
}
public readAll(text: string): Observable<DocumentRead[]> {
return this._documentApiService
.documentReadAllGet({
text: text,
sort: '-searchScore',
isLatest: true,
isDeleted: false
})
.pipe(map((response) => response.results));
}
Store
A Store réteg köti össze a komponenst és a service-t. A deleteDocumentById metódus a KnowledgeBaseService.delete-et hívja, majd frissíti a lokális documents listát, kiszedi belőle a törölt elemet, és jelzi a sikeres törlést (deleteSuccess.set(true)).
private readonly _knowledgeBaseService = inject(KnowledgeBaseService);
public deleteDocument(id: string): void {
this.loading.set(true);
this._knowledgeBaseService
.delete(id)
.pipe(
tap(() => {
this.documents.update((docs) => docs.filter((d) => d.id !== id));
this.deleteSuccess.set(true);
}),
finalize(() => this.loading.set(false))
)
.subscribe();
}
A rétegekre bontás (Template → Component → Service → Store) azért jó, mert tisztán elválasztja a felelősségi köröket:
- Template → csak a felhasználói felületért felel, gombok, inputok, eseménykötések. Nem tartalmaz logikát, csak azt, hogy mit lát a user.
- Component → a UI logikát kezeli: mikor kell megerősítő dialógust nyitni, mikor kell a store-t hívni. Ez köti össze a template-et és az alkalmazás logikát.
- Service → csak az API-hívásokkal foglalkozik. Itt van minden, ami a backenddel kommunikál. Így könnyen cserélhető, tesztelhető, és a komponensnek nem kell tudnia az API részleteit.
- Store → az alkalmazás állapotát kezeli (lista, betöltés állapota, siker/hiba jelek). Ez a központi hely, ahol a komponensek és a service összekapcsolódnak. A store biztosítja, hogy több komponens is ugyanazt a friss adatot lássa.
Így a kód átláthatóbb, újrafelhasználhatóbb és könnyebben tesztelhető.
