service

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-manager.component.ts

@@ -1,17 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { environment } from 'src/environments/environment';
 import { ClrLoadingState } from '@clr/angular';
-
-interface ChartType {
-  id: number;
-  name: string;
-  displayName: string;
-  description: string;
-  isActive: boolean;
-  createdAt: string;
-  updatedAt: string;
-}
+import { ChartType, ChartTypeService } from './chart-type.service';
 
 @Component({
   selector: 'app-chart-type-manager',
@@ -32,10 +21,7 @@ export class ChartTypeManagerComponent implements OnInit {
   errorMessage: string | null = null;
   successMessage: string | null = null;
 
-  // API base URL
-  private apiUrl = environment.apiUrl || 'http://localhost:8080/api';
-
-  constructor(private http: HttpClient) { }
+  constructor(private chartTypeService: ChartTypeService) { }
 
   ngOnInit(): void {
     this.loadChartTypes();
@@ -60,7 +46,7 @@ export class ChartTypeManagerComponent implements OnInit {
   // Chart Type Methods
   loadChartTypes(): void {
     this.chartTypeLoadingState = ClrLoadingState.LOADING;
-    this.http.get<ChartType[]>(`${this.apiUrl}/chart-types`).subscribe({
+    this.chartTypeService.getAllChartTypes().subscribe({
       next: (data) => {
         this.chartTypes = data;
         this.chartTypeLoadingState = ClrLoadingState.SUCCESS;
@@ -80,7 +66,7 @@ export class ChartTypeManagerComponent implements OnInit {
     }
 
     this.chartTypeLoadingState = ClrLoadingState.LOADING;
-    this.http.post<ChartType>(`${this.apiUrl}/chart-types`, this.newChartType).subscribe({
+    this.chartTypeService.createChartType(this.newChartType).subscribe({
       next: (data) => {
         this.chartTypes.push(data);
         this.newChartType = {};
@@ -103,7 +89,7 @@ export class ChartTypeManagerComponent implements OnInit {
     }
 
     this.chartTypeLoadingState = ClrLoadingState.LOADING;
-    this.http.put<ChartType>(`${this.apiUrl}/chart-types/${this.selectedChartType.id}`, this.selectedChartType).subscribe({
+    this.chartTypeService.updateChartType(this.selectedChartType.id, this.selectedChartType).subscribe({
       next: (data) => {
         const index = this.chartTypes.findIndex(ct => ct.id === data.id);
         if (index !== -1) {
@@ -127,7 +113,7 @@ export class ChartTypeManagerComponent implements OnInit {
     }
 
     this.chartTypeLoadingState = ClrLoadingState.LOADING;
-    this.http.delete(`${this.apiUrl}/chart-types/${id}`).subscribe({
+    this.chartTypeService.deleteChartType(id).subscribe({
       next: () => {
         this.chartTypes = this.chartTypes.filter(ct => ct.id !== id);
         this.showSuccess('Chart type deleted successfully');

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type.service.ts

@@ -0,0 +1,49 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { environment } from 'src/environments/environment';
+
+export interface ChartType {
+  id: number;
+  name: string;
+  displayName: string;
+  description: string;
+  isActive: boolean;
+  createdAt: string;
+  updatedAt: string;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ChartTypeService {
+  private apiUrl = environment.apiUrl || 'http://localhost:8080/api';
+  private chartTypesUrl = `${this.apiUrl}/chart-types`;
+
+  constructor(private http: HttpClient) { }
+
+  // Get all chart types
+  getAllChartTypes(): Observable<ChartType[]> {
+    return this.http.get<ChartType[]>(this.chartTypesUrl);
+  }
+
+  // Get chart type by ID
+  getChartTypeById(id: number): Observable<ChartType> {
+    return this.http.get<ChartType>(`${this.chartTypesUrl}/${id}`);
+  }
+
+  // Create new chart type
+  createChartType(chartType: Partial<ChartType>): Observable<ChartType> {
+    return this.http.post<ChartType>(this.chartTypesUrl, chartType);
+  }
+
+  // Update chart type
+  updateChartType(id: number, chartType: ChartType): Observable<ChartType> {
+    return this.http.put<ChartType>(`${this.chartTypesUrl}/${id}`, chartType);
+  }
+
+  // Delete chart type
+  deleteChartType(id: number): Observable<void> {
+    return this.http.delete<void>(`${this.chartTypesUrl}/${id}`);
+  }
+}