From 421fccc7d5efef7c98d2757535bebf5bff2dcb11 Mon Sep 17 00:00:00 2001 From: jesusrdev <102635058+jesusrdev@users.noreply.github.com> Date: Fri, 10 Oct 2025 02:13:36 -0500 Subject: [PATCH 1/8] fix(keycloak): change init function and refresh session automatically --- src/app/app.component.html | 47 +++++++++---------- src/app/app.component.ts | 7 ++- .../modules/auth/services/keycloak.service.ts | 10 +++- src/index.html | 10 ++-- 4 files changed, 41 insertions(+), 33 deletions(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index a31f046..0ac71bd 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,34 +1,29 @@ -@if (keycloakService.isLoading()) { +@if (keycloakService.isAuthenticated()) { + +} @else {
-
-
-

-

-

-
-
- -
+ + +
+
+ network_intelligence +

KJO Mind Care

+

+ Bienestar mental está a su alcance. +

+
+ @if (keycloakService.isLoading()) { + + } @else { + + + }
-} @else { - @if (keycloakService.isAuthenticated()) { - - } @else { -
-
-
-

KJO Mind Care

-

Welcome to the dashboard of the KJO Mind Care application.

-
- -
-
-
-
- } } diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 2b4deab..ef0d738 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -2,10 +2,11 @@ import { Component, inject } from '@angular/core'; import { RouterOutlet } from '@angular/router'; import { KeycloakService } from './modules/auth/services/keycloak.service'; import { ToastComponent } from './shared/components/layout/toast/toast.component'; +import { ThemeControllerComponent } from './shared/components/layout/theme-controller/theme-controller.component'; @Component({ selector: 'app-root', - imports: [RouterOutlet, ToastComponent], + imports: [RouterOutlet, ToastComponent, ThemeControllerComponent], templateUrl: './app.component.html', styleUrl: './app.component.css' }) @@ -16,6 +17,10 @@ export class AppComponent { this.keycloakService.login(); } + register() { + this.keycloakService.register(); + } + ngOnInit() { this.keycloakService.init(); } diff --git a/src/app/modules/auth/services/keycloak.service.ts b/src/app/modules/auth/services/keycloak.service.ts index 7dc014b..a829e4f 100644 --- a/src/app/modules/auth/services/keycloak.service.ts +++ b/src/app/modules/auth/services/keycloak.service.ts @@ -39,10 +39,14 @@ export class KeycloakService { const keycloak = this.initKeycloak(); try { + // Solo inicializa si el usuario está autenticado const authenticated = await keycloak.init({ - onLoad: 'login-required', + onLoad: 'check-sso', + checkLoginIframe: true, + checkLoginIframeInterval: 240 // segundos para refrescar la sesión }); + this._isLoading.set(false) this._isAuthenticated.set(authenticated); @@ -67,6 +71,10 @@ export class KeycloakService { return this.keycloak.login(); } + register() { + return this.keycloak.register(); + } + logout() { this._isAuthenticated.set(false); this._userProfile.set(undefined); diff --git a/src/index.html b/src/index.html index ee60f5c..9bbdc49 100644 --- a/src/index.html +++ b/src/index.html @@ -23,17 +23,17 @@ + + + - - + + From ee193f5defb52bfaa95fdfe70274676a4b5e73f4 Mon Sep 17 00:00:00 2001 From: jesusrdev <102635058+jesusrdev@users.noreply.github.com> Date: Thu, 16 Oct 2025 16:38:35 -0500 Subject: [PATCH 2/8] feat: adding the api response interface --- src/app/shared/interfaces/api-response.ts | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 src/app/shared/interfaces/api-response.ts diff --git a/src/app/shared/interfaces/api-response.ts b/src/app/shared/interfaces/api-response.ts new file mode 100644 index 0000000..f6d5ea1 --- /dev/null +++ b/src/app/shared/interfaces/api-response.ts @@ -0,0 +1,6 @@ +export interface ApiResponse { + statusCode: string; + message: string; + result: T; + success: boolean; +} From 9685faef26249249ea39a0aefe31644e28ed3b81 Mon Sep 17 00:00:00 2001 From: jesusrdev <102635058+jesusrdev@users.noreply.github.com> Date: Thu, 16 Oct 2025 16:49:02 -0500 Subject: [PATCH 3/8] refactor(mood-tracking): change the id type to string and the response from the APIs --- .../core/interfaces/mood-http.interface.ts | 2 +- src/app/core/models/mood.model.ts | 2 +- src/app/core/services/analytics.service.ts | 10 ++-- .../core/services/mood-tracking.service.ts | 49 ++++++++++--------- .../mood-register.component.html | 7 ++- .../mood-register/mood-register.component.ts | 17 ++++--- .../mood-trends-analysis.component.ts | 5 +- .../mood-analytics.component.ts | 5 +- .../mood-distribution.component.ts | 5 +- .../mood-modal/mood-modal.component.ts | 2 +- .../setting-mood-state.component.ts | 41 +++++++++------- 11 files changed, 89 insertions(+), 56 deletions(-) diff --git a/src/app/core/interfaces/mood-http.interface.ts b/src/app/core/interfaces/mood-http.interface.ts index 61238c1..2335e5a 100644 --- a/src/app/core/interfaces/mood-http.interface.ts +++ b/src/app/core/interfaces/mood-http.interface.ts @@ -6,7 +6,7 @@ export interface MoodStateRequest { } export interface MoodStateResponse { - id: number, + id: string, name: string, description: string, image: string, diff --git a/src/app/core/models/mood.model.ts b/src/app/core/models/mood.model.ts index a8daadb..0a277dd 100644 --- a/src/app/core/models/mood.model.ts +++ b/src/app/core/models/mood.model.ts @@ -5,7 +5,7 @@ export interface Mood { } export interface Content { - id: number; + id: string; name: string; description: string; state: string; diff --git a/src/app/core/services/analytics.service.ts b/src/app/core/services/analytics.service.ts index 86aa8b7..6dc0170 100644 --- a/src/app/core/services/analytics.service.ts +++ b/src/app/core/services/analytics.service.ts @@ -3,6 +3,7 @@ import { HttpClient } from '@angular/common/http'; import { environment } from '../../../environments/environment'; import { catchError, Observable, tap, throwError } from 'rxjs'; import { MoodAnalyticsResponse, MoodTrendsAnalysis } from '../interfaces/mood-analytics.response'; +import { ApiResponse } from '../../shared/interfaces/api-response'; @Injectable({ providedIn: 'root', @@ -10,9 +11,10 @@ import { MoodAnalyticsResponse, MoodTrendsAnalysis } from '../interfaces/mood-an export class AnalyticsService { private http = inject(HttpClient); private readonly baseUrl = `${environment.apiUrl}/api/mind/mood-tracking`; - getMoodAnalytics(months: number = 3): Observable { + + getMoodAnalytics(months: number = 3): Observable> { return this.http - .get( + .get>( `${this.baseUrl}/user-mood/statistics?month=${months}`, ) .pipe( @@ -31,8 +33,8 @@ export class AnalyticsService { ); } - getMoodTrendsAnalysis(month: number = 3): Observable { - return this.http.get(`${this.baseUrl}/user-mood/trends-analysis?months=${month}` + getMoodTrendsAnalysis(month: number = 3): Observable> { + return this.http.get>(`${this.baseUrl}/user-mood/trends-analysis?months=${month}` ).pipe( tap((response) => console.log("Mood Trend Anlysis", response)), catchError((error) => { diff --git a/src/app/core/services/mood-tracking.service.ts b/src/app/core/services/mood-tracking.service.ts index 72ef212..c6f32d4 100644 --- a/src/app/core/services/mood-tracking.service.ts +++ b/src/app/core/services/mood-tracking.service.ts @@ -7,6 +7,7 @@ import type { MoodStateRequest, MoodStateResponse, } from '../interfaces/mood-http.interface'; +import { ApiResponse } from '../../shared/interfaces/api-response'; @Injectable({ providedIn: 'root', @@ -17,8 +18,8 @@ export class MoodStateService { private moodStates = signal([]); - getAllMoods(): Observable { - return this.http.get(`${this.baseUrl}/mood-tracking`).pipe( + getAllMoods(): Observable> { + return this.http.get>(`${this.baseUrl}/mood-tracking`).pipe( catchError((error) => { console.error('Error al obtener los estados de ánimo:', error); return throwError( @@ -28,20 +29,22 @@ export class MoodStateService { ); } - addMoodState(mood: MoodStateRequest): Observable { + addMoodState(mood: MoodStateRequest): Observable> { return this.http - .post(`${this.baseUrl}/mood-tracking`, mood) + .post>(`${this.baseUrl}/mood-tracking`, mood) .pipe( tap((response) => { + const result = response.result + this.moodStates.update((states) => [ ...states, { - id: response.id, - name: response.name, - description: response.description, - image: response.image, - color: response.color, - isActive: response.isActive, + id: result.id, + name: result.name, + description: result.description, + image: result.image, + color: result.color, + isActive: result.isActive, state: 'active', }, ]); @@ -56,23 +59,25 @@ export class MoodStateService { } updateMoodState( - id: number, + id: string, mood: MoodStateRequest, - ): Observable { + ): Observable> { return this.http - .patch(`${this.baseUrl}/mood-tracking/${id}`, mood) + .patch>(`${this.baseUrl}/mood-tracking/${id}`, mood) .pipe( tap((response) => { + const result = response.result + this.moodStates.update((states) => states.map((item) => item.id === id ? { ...item, - name: response.name, - description: response.description, - image: response.image, - color: response.color, - isActive: response.isActive, + name: result.name, + description: result.description, + image: result.image, + color: result.color, + isActive: result.isActive, } : item, ), @@ -88,9 +93,9 @@ export class MoodStateService { ); } - toggleMoodState(id: number): Observable { + toggleMoodState(id: string): Observable> { return this.http - .patch( + .patch>( `${this.baseUrl}/mood-tracking/${id}/toggle-status`, {}, ) @@ -108,8 +113,8 @@ export class MoodStateService { ); } - removeMoodState(id: number): Observable { - return this.http.delete(`${this.baseUrl}/mood-tracking/${id}`).pipe( + removeMoodState(id: string): Observable> { + return this.http.delete>(`${this.baseUrl}/mood-tracking/${id}`).pipe( catchError((error) => { console.error( `Error al eliminar el estado de animo de id : ${id}`, diff --git a/src/app/modules/main/home/components/mood-register/mood-register.component.html b/src/app/modules/main/home/components/mood-register/mood-register.component.html index 88c3fb8..a18e16f 100644 --- a/src/app/modules/main/home/components/mood-register/mood-register.component.html +++ b/src/app/modules/main/home/components/mood-register/mood-register.component.html @@ -29,13 +29,18 @@

Ícono de {{ mood.name }}

{{ mood.name }}

+ } @empty { +
+ error + No hay estados de ánimo disponibles. +
} } diff --git a/src/app/modules/main/home/components/mood-register/mood-register.component.ts b/src/app/modules/main/home/components/mood-register/mood-register.component.ts index 036b7b0..5d4dad7 100644 --- a/src/app/modules/main/home/components/mood-register/mood-register.component.ts +++ b/src/app/modules/main/home/components/mood-register/mood-register.component.ts @@ -1,8 +1,9 @@ -import { Component, inject, resource, signal } from '@angular/core'; +import { Component, inject, signal } from '@angular/core'; import { MoodStateService } from '../../../../../core/services/mood-tracking.service'; import { rxResource } from '@angular/core/rxjs-interop'; import { NgClass } from '@angular/common'; import { Router } from '@angular/router'; +import { map } from 'rxjs'; @Component({ selector: 'home-mood-register', @@ -17,21 +18,25 @@ export class MoodRegisterComponent { moodService = inject(MoodStateService); moods = rxResource({ - loader: () => this.moodService.getAllMoods() + loader: () => { + return this.moodService.getAllMoods().pipe( + map((response) => response.result) + ); + } }); - moodSelected = signal(0); + moodSelected = signal(''); - selectMood(id: number) { + selectMood(id: string) { if (this.moodSelected() === id) { - this.moodSelected.set(0); + this.moodSelected.set(''); } else { this.moodSelected.set(id); } } redirectToMoodRegister() { - if (this.moodSelected() !== 0) { + if (this.moodSelected() !== '') { this.router.navigate(['/app/mood'], { queryParams: { moodId: this.moodSelected() } }); } } diff --git a/src/app/modules/mood-analytics/components/mood-trends-analysis/mood-trends-analysis.component.ts b/src/app/modules/mood-analytics/components/mood-trends-analysis/mood-trends-analysis.component.ts index 6932377..f931461 100644 --- a/src/app/modules/mood-analytics/components/mood-trends-analysis/mood-trends-analysis.component.ts +++ b/src/app/modules/mood-analytics/components/mood-trends-analysis/mood-trends-analysis.component.ts @@ -3,6 +3,7 @@ import { rxResource } from '@angular/core/rxjs-interop'; import { AnalyticsService } from '../../../../core/services/analytics.service'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; +import { map } from 'rxjs'; @Component({ selector: 'trends-analysis', @@ -17,7 +18,9 @@ export class MoodTrendsAnalysisComponent { loadTrendsAnalysis = rxResource({ request: () => ({ month: this.month() }), - loader: ({ request }) => this.analyticsService.getMoodTrendsAnalysis(request.month) + loader: ({ request }) => this.analyticsService.getMoodTrendsAnalysis(request.month).pipe( + map(response => response.result) + ) }); timeOptions = [ diff --git a/src/app/modules/mood-analytics/mood-analytics.component.ts b/src/app/modules/mood-analytics/mood-analytics.component.ts index 8aba23f..67374a1 100644 --- a/src/app/modules/mood-analytics/mood-analytics.component.ts +++ b/src/app/modules/mood-analytics/mood-analytics.component.ts @@ -18,6 +18,7 @@ import { RouterLinkActive, } from '@angular/router'; import { SettingAnalysisComponent } from "./setting-analysis/setting-analysis.component"; +import { map } from 'rxjs'; interface Mood { label: string; @@ -57,7 +58,9 @@ export class MoodAnalyticsComponent implements OnInit { private router = inject(Router); analyticsResource = rxResource({ - loader: () => this.moodAnalytics.getMoodAnalytics(this.getMonthsForRange()), + loader: () => this.moodAnalytics.getMoodAnalytics(this.getMonthsForRange()).pipe( + map(response => response.result) + ) }); moods = signal([]); diff --git a/src/app/modules/mood-analytics/mood-distribution/mood-distribution.component.ts b/src/app/modules/mood-analytics/mood-distribution/mood-distribution.component.ts index f010efb..05012b4 100644 --- a/src/app/modules/mood-analytics/mood-distribution/mood-distribution.component.ts +++ b/src/app/modules/mood-analytics/mood-distribution/mood-distribution.component.ts @@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common'; import { AnalyticsService } from '../../../core/services/analytics.service'; import { MoodAnalyticsResponse } from '../../../core/interfaces/mood-analytics.response'; import { rxResource } from '@angular/core/rxjs-interop'; +import { map } from 'rxjs'; interface MoodData { label: string; @@ -53,7 +54,9 @@ export class MoodDistributionComponent implements OnInit { // Usar el mismo recurso de datos que el componente padre analyticsResource = rxResource({ - loader: () => this.analyticsService.getMoodAnalytics(3) // 3 meses por defecto + loader: () => this.analyticsService.getMoodAnalytics(3).pipe( + map(response => response.result) + ) }); ngOnInit(): void { diff --git a/src/app/modules/settings/components/mood-modal/mood-modal.component.ts b/src/app/modules/settings/components/mood-modal/mood-modal.component.ts index 348ba41..42b0857 100644 --- a/src/app/modules/settings/components/mood-modal/mood-modal.component.ts +++ b/src/app/modules/settings/components/mood-modal/mood-modal.component.ts @@ -20,7 +20,7 @@ import { Content } from '../../../../core/models/mood.model'; export class MoodModalComponent implements OnInit { modalId = input("mood_editor_modal"); mood = input({ - id: 0, + id: "", name: "", color: "#6d28d9", isActive: true, diff --git a/src/app/modules/settings/setting-mood-state/setting-mood-state.component.ts b/src/app/modules/settings/setting-mood-state/setting-mood-state.component.ts index 0b33d7d..4071791 100644 --- a/src/app/modules/settings/setting-mood-state/setting-mood-state.component.ts +++ b/src/app/modules/settings/setting-mood-state/setting-mood-state.component.ts @@ -6,6 +6,7 @@ import { MoodModalComponent } from '../components/mood-modal/mood-modal.componen import { MoodStateService } from '../../../core/services/mood-tracking.service'; import type { Content } from '../../../core/models/mood.model'; import type { MoodStateRequest } from '../../../core/interfaces/mood-http.interface'; +import { map } from 'rxjs'; @Component({ selector: 'setting-mood-state', @@ -17,7 +18,9 @@ export default class SettingMoodStateComponent { private moodStateService = inject(MoodStateService); loadMoodTracking = rxResource({ - loader: () => this.moodStateService.getAllMoods() + loader: () => this.moodStateService.getAllMoods().pipe( + map((response) => response.result) + ) }); constructor() { @@ -38,11 +41,11 @@ export default class SettingMoodStateComponent { isSaving = signal(false); showSuccessToast = signal(false); successMessage = signal('Configuración guardada exitosamente!'); - deletingMoodId = signal(null); + deletingMoodId = signal(null); addMoodState(): void { const newMood: Content = { - id: 0, + id: "", name: '', description: '', state: 'active', @@ -60,7 +63,7 @@ export default class SettingMoodStateComponent { }); } - toggleMoodState(id: number): void { + toggleMoodState(id: string): void { this.isSaving.set(true); this.moodStateService.toggleMoodState(id).subscribe({ @@ -71,7 +74,7 @@ export default class SettingMoodStateComponent { return { ...currentData, content: currentData.content.map(mood => - mood.id === id ? { ...mood, isActive: response.isActive } : mood + mood.id === id ? { ...mood, isActive: response.result.isActive } : mood ) }; }); @@ -98,7 +101,7 @@ export default class SettingMoodStateComponent { }); } - deleteMood(id: number): void { + deleteMood(id: string): void { this.deletingMoodId.set(id); const modal = document.getElementById('delete_confirmation_modal') as HTMLDialogElement; if (modal) modal.showModal(); @@ -149,13 +152,15 @@ export default class SettingMoodStateComponent { this.loadMoodTracking.update(currentData => { if (!currentData) return currentData; + const result = response.result; + const newMood: Content = { - id: response.id, - name: response.name, - description: response.description, - image: response.image, - color: response.color, - isActive: response.isActive, + id: result.id, + name: result.name, + description: result.description, + image: result.image, + color: result.color, + isActive: result.isActive, state: 'active' }; @@ -185,16 +190,18 @@ export default class SettingMoodStateComponent { this.loadMoodTracking.update(currentData => { if (!currentData) return currentData; + const result = response.result; + return { ...currentData, content: currentData.content.map(item => item.id === id ? { ...item, - name: response.name, - description: response.description, - image: response.image, - color: response.color, - isActive: response.isActive + name: result.name, + description: result.description, + image: result.image, + color: result.color, + isActive: result.isActive } : item ) }; From da5e6cc49f8ad2deeb3cb6f0039dd00cb7085e02 Mon Sep 17 00:00:00 2001 From: jesusrdev <102635058+jesusrdev@users.noreply.github.com> Date: Thu, 16 Oct 2025 16:52:16 -0500 Subject: [PATCH 4/8] refactor(blog): change the id type to string and the response from the APIs --- .../core/interfaces/blog-http.interface.ts | 2 +- .../core/interfaces/comment-http.interface.ts | 8 +++--- src/app/core/models/blog.ts | 6 ++--- src/app/core/services/blog.service.ts | 21 ++++++++------- src/app/core/services/category.service.ts | 23 ++++++++-------- src/app/core/services/comment.service.ts | 19 +++++++------- .../blog-comment-modal.component.ts | 6 ++--- .../blog-comment/blog-comment.component.ts | 6 ++--- .../blog-comments-modal.component.html | 2 +- .../blog-comments-modal.component.ts | 5 +++- .../blog-filter/blog-filter.component.html | 2 +- .../blog/blog-filter/blog-filter.component.ts | 2 +- src/app/modules/blog/blog-page.component.ts | 13 +++++++--- .../blog/blog-table/blog-table.component.html | 4 +-- .../category-modal.component.ts | 4 +-- .../category-table.component.html | 2 +- .../category-table.component.ts | 5 +++- src/app/shared/utils/local-data.ts | 26 +++++++++---------- 18 files changed, 85 insertions(+), 71 deletions(-) diff --git a/src/app/core/interfaces/blog-http.interface.ts b/src/app/core/interfaces/blog-http.interface.ts index 0f8b5b5..bc3aece 100644 --- a/src/app/core/interfaces/blog-http.interface.ts +++ b/src/app/core/interfaces/blog-http.interface.ts @@ -16,7 +16,7 @@ export interface BlogDetailResponse { } export interface CommentSummary { - id: number; + id: string; userId: UserInfo; content: string; date: string; diff --git a/src/app/core/interfaces/comment-http.interface.ts b/src/app/core/interfaces/comment-http.interface.ts index ea8a4bc..0fc6fe1 100644 --- a/src/app/core/interfaces/comment-http.interface.ts +++ b/src/app/core/interfaces/comment-http.interface.ts @@ -1,12 +1,12 @@ export interface CommentRequest { - id: number; + id: string; content: string; - blogId: number; - commentParentId: number | null; + blogId: string; + commentParentId: string | null; } export interface CommentResponse { - id: number; + id: string; blogId: number; userId: number; content: string; diff --git a/src/app/core/models/blog.ts b/src/app/core/models/blog.ts index 75eaec2..720b5ac 100644 --- a/src/app/core/models/blog.ts +++ b/src/app/core/models/blog.ts @@ -1,7 +1,7 @@ import { UserProfile } from './user-profile'; export interface Blog { - id: number; + id: string; title: string; content: string; image?: string; @@ -20,7 +20,7 @@ export enum Status { } export interface Category { - id: number; + id: string; name: string; } @@ -34,6 +34,6 @@ export interface Reaction { export interface FilterDTO { search: string; - category: number; + category: string; status: string; } diff --git a/src/app/core/services/blog.service.ts b/src/app/core/services/blog.service.ts index 1e4be8c..d0d6263 100644 --- a/src/app/core/services/blog.service.ts +++ b/src/app/core/services/blog.service.ts @@ -8,6 +8,7 @@ import { environment } from '../../../environments/environment'; import { Blog } from '../models/blog'; import { blogs } from '../../shared/utils/local-data'; import { BlogDetailResponse, BlogResponse } from '../interfaces/blog-http.interface'; +import { ApiResponse } from '../../shared/interfaces/api-response'; @Injectable({ providedIn: 'root' @@ -27,8 +28,8 @@ export class BlogService { this._selectedBlog.set(blog); } - findAll(): Observable { - return this.http.get(`${this.baseUrl}/all`); + findAll(): Observable> { + return this.http.get>(`${this.baseUrl}/all`); } // findAll(): Observable { @@ -41,19 +42,19 @@ export class BlogService { // ); // } - getById(id: number): Observable { - return this.http.get(`${this.baseUrl}/${id}`); + getById(id: string): Observable> { + return this.http.get>(`${this.baseUrl}/${id}`); } - create(request: FormData): Observable { - return this.http.post(`${this.baseUrl}`, request); + create(request: FormData): Observable> { + return this.http.post>(`${this.baseUrl}`, request); } - update(request: FormData, id: number): Observable { - return this.http.put(`${this.baseUrl}/${id}`, request); + update(request: FormData, id: string): Observable> { + return this.http.put>(`${this.baseUrl}/${id}`, request); } - delete(id: number): Observable { - return this.http.delete(`${this.baseUrl}/${id}`); + delete(id: string): Observable> { + return this.http.delete>(`${this.baseUrl}/${id}`); } } diff --git a/src/app/core/services/category.service.ts b/src/app/core/services/category.service.ts index de15793..64d9698 100644 --- a/src/app/core/services/category.service.ts +++ b/src/app/core/services/category.service.ts @@ -6,6 +6,7 @@ import { environment } from '../../../environments/environment'; import { Observable } from 'rxjs'; import { Category } from '../models/blog'; +import { ApiResponse } from '../../shared/interfaces/api-response'; @Injectable({ providedIn: 'root' @@ -16,27 +17,27 @@ export class CategoryService { private http = inject(HttpClient); selectedCategory = signal({ - id: 0, + id: '', name: '' }); - findAll(): Observable { - return this.http.get(`${this.baseUrl}`); + findAll(): Observable> { + return this.http.get>(`${this.baseUrl}`); } - getById(id: number): Observable { - return this.http.get(`${this.baseUrl}/${id}`); + getById(id: string): Observable> { + return this.http.get>(`${this.baseUrl}/${id}`); } - create(request: Category): Observable { - return this.http.post(`${this.baseUrl}`, request); + create(request: Category): Observable> { + return this.http.post>(`${this.baseUrl}`, request); } - update(request: Category, id: number): Observable { - return this.http.patch(`${this.baseUrl}/${id}`, request); + update(request: Category, id: string): Observable> { + return this.http.patch>(`${this.baseUrl}/${id}`, request); } - delete(id: number): Observable { - return this.http.delete(`${this.baseUrl}/${id}`); + delete(id: string): Observable> { + return this.http.delete>(`${this.baseUrl}/${id}`); } } diff --git a/src/app/core/services/comment.service.ts b/src/app/core/services/comment.service.ts index 9690112..318ccef 100644 --- a/src/app/core/services/comment.service.ts +++ b/src/app/core/services/comment.service.ts @@ -7,6 +7,7 @@ import { Observable } from 'rxjs'; import { Category } from '../models/blog'; import { CommentRequest, CommentResponse } from '../interfaces/comment-http.interface'; +import { ApiResponse } from '../../shared/interfaces/api-response'; @Injectable({ providedIn: 'root' @@ -17,9 +18,9 @@ export class CommentService { private http = inject(HttpClient); readonly _selectedComment = signal({ - id: 0, + id: '', content: '', - blogId: 0, + blogId: '', commentParentId: null }); @@ -31,21 +32,21 @@ export class CommentService { this._selectedComment.set(comment); } - create(request: CommentRequest): Observable { + create(request: CommentRequest): Observable> { if (!request.commentParentId) { - return this.http.post(`${this.baseUrl}?blogId=${request.blogId}&content=${request.content}`, null); + return this.http.post>(`${this.baseUrl}?blogId=${request.blogId}&content=${request.content}`, null); } - return this.http.post(`${this.baseUrl}?blogId=${request.blogId}&commentParentId=${request.commentParentId}&content=${request.content}`, request); + return this.http.post>(`${this.baseUrl}?blogId=${request.blogId}&commentParentId=${request.commentParentId}&content=${request.content}`, request); } - update(request: CommentRequest, id: number): Observable { + update(request: CommentRequest, id: string): Observable> { if (!request.commentParentId) { - return this.http.put(`${this.baseUrl}/${id}?blogId=${request.blogId}&content=${request.content}`, null); + return this.http.put>(`${this.baseUrl}/${id}?blogId=${request.blogId}&content=${request.content}`, null); } - return this.http.put(`${this.baseUrl}/${id}?blogId=${request.blogId}&commentParentId=${request.commentParentId}&content=${request.content}`, request); + return this.http.put>(`${this.baseUrl}/${id}?blogId=${request.blogId}&commentParentId=${request.commentParentId}&content=${request.content}`, request); } - delete(id: number): Observable { + delete(id: string): Observable { return this.http.delete(`${this.baseUrl}/${id}`); } } diff --git a/src/app/modules/blog/blog-comment-modal/blog-comment-modal.component.ts b/src/app/modules/blog/blog-comment-modal/blog-comment-modal.component.ts index 7ff1acf..014f856 100644 --- a/src/app/modules/blog/blog-comment-modal/blog-comment-modal.component.ts +++ b/src/app/modules/blog/blog-comment-modal/blog-comment-modal.component.ts @@ -31,7 +31,7 @@ export class BlogCommentModalComponent { this.title.set('Add new comment'); this.nameButton.set('Save'); - if (this.commentService._selectedComment().id > 0) { + if (this.commentService._selectedComment().id.length > 0) { this.title.set('Edit comment'); this.nameButton.set('Update'); @@ -40,7 +40,7 @@ export class BlogCommentModalComponent { }); } - if (this.commentService._selectedComment().commentParentId && this.commentService._selectedComment().id < 1) { + if (this.commentService._selectedComment().commentParentId && this.commentService._selectedComment().id.length === 0) { this.title.set('Reply to comment'); this.nameButton.set('Reply'); this.commentForm.patchValue({ @@ -64,7 +64,7 @@ export class BlogCommentModalComponent { commentParentId: this.commentService.selectedComment.commentParentId }; - if (this.commentService.selectedComment.id > 0) { + if (this.commentService.selectedComment.id.length > 0) { return this.commentService.update(request, this.commentService.selectedComment.id).pipe() .subscribe({ next: () => { diff --git a/src/app/modules/blog/blog-comments-modal/blog-comment/blog-comment.component.ts b/src/app/modules/blog/blog-comments-modal/blog-comment/blog-comment.component.ts index efcc000..453b122 100644 --- a/src/app/modules/blog/blog-comments-modal/blog-comment/blog-comment.component.ts +++ b/src/app/modules/blog/blog-comments-modal/blog-comment/blog-comment.component.ts @@ -15,7 +15,7 @@ import { CommentRequest } from '../../../../core/interfaces/comment-http.interfa }) export class BlogCommentComponent { readonly comment = input.required(); - readonly commentParentId = input.required(); + readonly commentParentId = input.required(); readonly blogService = inject(BlogService); @@ -38,14 +38,14 @@ export class BlogCommentComponent { }; case 'reply': return { - id: 0, + id: '', content: '', blogId: this.blogService.selectedBlog.blog.id, commentParentId: this.comment().id }; case 'create': return { - id: 0, + id: '', content: this.comment().content, blogId: this.blogService.selectedBlog.blog.id, commentParentId: null diff --git a/src/app/modules/blog/blog-comments-modal/blog-comments-modal.component.html b/src/app/modules/blog/blog-comments-modal/blog-comments-modal.component.html index 7d36c6d..9e57401 100644 --- a/src/app/modules/blog/blog-comments-modal/blog-comments-modal.component.html +++ b/src/app/modules/blog/blog-comments-modal/blog-comments-modal.component.html @@ -38,7 +38,7 @@

Comments of "{{ blogService.selectedBlog.blog. [modalName]="'modal_blog_comment'" [classes]="'btn btn-ghost btn-link'" (click)="commentService.selectedComment = { - id: 0, + id: '', content: '', blogId: blogService.selectedBlog.blog.id, commentParentId: null, diff --git a/src/app/modules/blog/blog-comments-modal/blog-comments-modal.component.ts b/src/app/modules/blog/blog-comments-modal/blog-comments-modal.component.ts index d612e96..61d1618 100644 --- a/src/app/modules/blog/blog-comments-modal/blog-comments-modal.component.ts +++ b/src/app/modules/blog/blog-comments-modal/blog-comments-modal.component.ts @@ -7,6 +7,7 @@ import { CommentService } from '../../../core/services/comment.service'; import { ToastService } from '../../../core/services/toast.service'; import { ModalOpenButtonComponent } from '../../../shared/components/modal-open-button/modal-open-button.component'; import { BlogCommentModalComponent } from '../blog-comment-modal/blog-comment-modal.component'; +import { map } from 'rxjs'; @Component({ selector: 'blog-comments-modal', @@ -25,7 +26,9 @@ export class BlogCommentsModalComponent { readonly blog = rxResource({ request: () => this.blogService.selectedBlog.blog.id, - loader: ({ request }) => this.blogService.getById(request) + loader: ({ request }) => this.blogService.getById(request).pipe( + map(response => response.result) + ) }); deleteComment() { diff --git a/src/app/modules/blog/blog-filter/blog-filter.component.html b/src/app/modules/blog/blog-filter/blog-filter.component.html index d877c5a..0f478c8 100644 --- a/src/app/modules/blog/blog-filter/blog-filter.component.html +++ b/src/app/modules/blog/blog-filter/blog-filter.component.html @@ -15,7 +15,7 @@