CRUD

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ő.