refactor(frontend): migrate Customer domain to centralized API services

- Replaced all direct axios imports with service layer calls across 8 customer files
- Migrated core pages: home.vue, create.vue, edit.vue
- Migrated profile pages: profile.vue (1100+ lines), TankEstimation.vue
- Migrated supporting pages: ServicePlanEdit.vue, tank/edit.vue, list.vue

Services integrated:
- customerService: CRUD, descriptions, tank info, automatic status
- authService: authentication and Authorize.net account management
- paymentService: credit cards, transactions, payment authorization
- deliveryService: delivery records and automatic delivery data
- serviceService: service calls, parts, and service plans
- adminService: statistics, social comments, and reports
- queryService: dropdown data (customer types, states)

Type safety improvements:
- Updated paymentService.ts with accurate AxiosResponse types
- Fixed response unwrapping to match api.ts interceptor behavior
- Resolved all TypeScript errors in customer domain (0 errors)

Benefits:
- Consistent authentication via centralized interceptors
- Standardized error handling across all API calls
- Improved type safety with proper TypeScript interfaces
- Single source of truth for API endpoints
- Better testability through mockable services

Verified with vue-tsc --noEmit - all customer domain files pass type checking
This commit is contained in:
2026-02-01 13:00:21 -05:00
parent 5060ca8d9b
commit 72d8e35e06
59 changed files with 850 additions and 6220 deletions
+23 -11
View File
@@ -82,23 +82,35 @@ const handleEventClick = (clickInfo: EventClickArg): void => {
};
}
// Fetch events function for FullCalendar
const fetchCalendarEvents = async (
fetchInfo: { startStr: string; endStr: string },
successCallback: (events: any[]) => void,
failureCallback: (error: Error) => void
) => {
try {
const path = `${import.meta.env.VITE_BASE_URL}/service/all`;
const response = await axios.get(path, {
headers: authHeader(),
withCredentials: true,
});
// Backend returns { ok: true, events: [...] }
const events = response.data?.events || [];
successCallback(events);
} catch (error) {
console.error("Failed to fetch calendar events:", error);
failureCallback(error as Error);
}
};
// Calendar options
const calendarOptions = ref({
plugins: [dayGridPlugin, interactionPlugin],
initialView: 'dayGridMonth',
weekends: true,
// Instead of a static array, we use a function source.
// This is the standard way FullCalendar fetches events.
events: `${import.meta.env.VITE_BASE_URL}/service/all`,
// Use function source to fetch events with auth headers and transform response
events: fetchCalendarEvents,
eventClick: handleEventClick,
// Add headers for authentication if needed by your API
eventSourceSuccess: (content) => {
// This is where you could transform data if needed
return content;
},
eventSourceFailure: (error) => {
console.error("Failed to fetch calendar events:", error);
}
} as CalendarOptions)
// Lifecycle