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:
@@ -35,12 +35,14 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="oil in deliveries" :key="oil.id" class="hover:bg-blue-600 hover:text-white">
|
||||
<template v-for="oil in deliveries" :key="oil.id">
|
||||
<tr v-if="oil.id" class="hover:bg-blue-600 hover:text-white">
|
||||
<td>{{ oil.id }}</td>
|
||||
<td>
|
||||
<router-link :to="{ name: 'customerProfile', params: { id: oil.customer_id } }" class="link link-hover">
|
||||
<router-link v-if="oil.customer_id" :to="{ name: 'customerProfile', params: { id: oil.customer_id } }" class="link link-hover">
|
||||
{{ oil.customer_name }}
|
||||
</router-link>
|
||||
<span v-else>{{ oil.customer_name }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge badge-sm badge-success">Finalized</span>
|
||||
@@ -68,13 +70,15 @@
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- MOBILE VIEW: Cards -->
|
||||
<div class="xl:hidden space-y-4">
|
||||
<div v-for="oil in deliveries" :key="oil.id" class="card bg-base-100 shadow-md">
|
||||
<template v-for="oil in deliveries" :key="oil.id">
|
||||
<div v-if="oil.id" class="card bg-base-100 shadow-md">
|
||||
<div class="card-body p-4">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
@@ -108,9 +112,10 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="mt-6 flex justify-center">
|
||||
<pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="50" :options="options">
|
||||
@@ -122,7 +127,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ref, onMounted, markRaw } from 'vue'
|
||||
import axios from 'axios'
|
||||
import authHeader from '../../../services/auth.header'
|
||||
import { deliveryService } from '../../../services/deliveryService'
|
||||
@@ -143,7 +148,7 @@ const recordsLength = ref(0)
|
||||
const options = ref({
|
||||
edgeNavigation: false,
|
||||
format: false,
|
||||
template: PaginationComp
|
||||
template: markRaw(PaginationComp)
|
||||
})
|
||||
|
||||
// Functions
|
||||
@@ -173,7 +178,7 @@ const userStatus = () => {
|
||||
const get_oil_orders = async (pageVal: number) => {
|
||||
try {
|
||||
const response = await deliveryService.getFinalized(pageVal)
|
||||
deliveries.value = response.data || []
|
||||
deliveries.value = response.data?.deliveries || []
|
||||
} catch (error) {
|
||||
console.error('Error fetching finalized deliveries:', error)
|
||||
deliveries.value = []
|
||||
|
||||
Reference in New Issue
Block a user