OneTeam/don_confiao_frontend
16
0
Fork 0
Code Issues 4 Pull Requests 3 Actions Packages Projects Releases 8 Wiki Activity

#29 feat: improve sales sync UI with loading state and results

Browse Source
This commit is contained in:
mono
2026-03-14 23:19:14 -05:00
parent 59122c04d3
commit 794e885b9d
1 changed files with 87 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
src/pages/sincronizar_ventas_tryton.vue
View File

@@ -1,36 +1,86 @@
<template> <template>
<v-container v-if="authStore.isAdmin" class="fill-height d-flex align-center justify-center"> <v-container v-if="authStore.isAdmin" class="fill-height">
<v-card class="pa-6" max-width="600" elevation="4"> <v-row v-if="!result && !loading" justify="center">
<v-card-title class="text-h5 font-weight-bold text-center"> <v-col cols="12" md="8">
🔄 Sincronización de Ventas <v-card class="pa-6" elevation="4">
</v-card-title> <v-card-title class="text-h5 font-weight-bold text-center">
🔄 Sincronización de Ventas
</v-card-title>
<v-card-text> <v-card-text>
<p> <p>
Esta acción sincronizará las <strong>ventas</strong> desde el sistema Esta acción sincronizará las <strong>ventas</strong> desde el sistema
<strong>Tryton</strong> hacia la plataforma. <strong>Tryton</strong> hacia la plataforma.
</p> </p>
<v-alert type="warning" dense border="start" border-color="warning"> <v-alert type="warning" dense border="start" border-color="warning" class="mt-4">
<strong>Advertencia:</strong> Este proceso podría tardar varios minutos <strong>Advertencia:</strong> Este proceso podría tardar varios minutos
y reemplazar datos existentes en la plataforma. y reemplazar datos existentes en la plataforma.
Asegúrese de que la información en Tryton esté actualizada antes de Asegúrese de que la información en Tryton esté actualizada antes de
continuar. continuar.
</v-alert>
</v-card-text>
<v-card-actions class="justify-center">
<v-btn color="primary" @click="startSync">
Iniciar Sincronización
</v-btn>
<v-btn text @click="$router.push('/')">
Cancelar
</v-btn>
</v-card-actions>
</v-card>
</v-col>
</v-row>
<v-row v-else-if="loading" justify="center" align="center">
<v-col cols="12" class="text-center">
<v-progress-circular indeterminate color="primary" size="64"></v-progress-circular>
<p class="mt-4 text-h6">Sincronizando ventas...</p>
</v-col>
</v-row>
<v-row v-else>
<v-col cols="12">
<v-alert type="success" variant="tonal" class="mb-4">
<strong>Sincronización completada</strong>
</v-alert> </v-alert>
</v-card-text> </v-col>
<v-card-actions class="justify-center"> <v-col cols="12" md="6">
<v-btn color="primary" @click="startSync"> <v-card elevation="2">
Iniciar Sincronización <v-card-title class="bg-error text-white">❌ Fallidos ({{ result.failed?.length || 0 }})</v-card-title>
<v-card-text>
<v-data-table
:items="formatItems(result.failed)"
density="compact"
:headers="[{ title: 'ID', key: 'id' }]"
></v-data-table>
</v-card-text>
</v-card>
</v-col>
<v-col cols="12" md="6">
<v-card elevation="2">
<v-card-title class="bg-success text-white">✅ Exitosos ({{ result.successful?.length || 0 }})</v-card-title>
<v-card-text>
<v-data-table
:items="formatItems(result.successful)"
density="compact"
:headers="[{ title: 'ID', key: 'id' }]"
></v-data-table>
</v-card-text>
</v-card>
</v-col>
<v-col cols="12" class="text-center mt-4">
<v-btn color="primary" @click="$router.push('/')">
Volver al inicio
</v-btn> </v-btn>
<v-btn text @click="$router.push('/')"> </v-col>
Cancelar </v-row>
</v-btn>
</v-card-actions>
</v-card>
<v-data-table :items="ventas_tryton_failed"></v-data-table>
<v-data-table :items="ventas_tryton_successful"></v-data-table>
</v-container> </v-container>
</template> </template>
<script> <script>
import { useAuthStore } from '@/stores/auth'; import { useAuthStore } from '@/stores/auth';
import { inject } from 'vue'; import { inject } from 'vue';
@@ -44,7 +94,8 @@
data() { data() {
return { return {
api: inject('api'), api: inject('api'),
ventas_tryton: [], loading: false,
result: null,
} }
}, },
mounted() { mounted() {
@@ -53,14 +104,20 @@
} }
}, },
methods: { methods: {
formatItems(ids) {
if (!ids || ids.length === 0) return [];
return ids.map(id => ({ id }));
},
startSync() { startSync() {
this.loading = true;
this.api.sendSalesToTryton() this.api.sendSalesToTryton()
.then(response => { .then(response => {
this.ventas_tryton_failed = response.failed.map(id => ({ id })); this.result = response;
this.ventas_tryton_successful = response.successful.map(id => ({ id })); this.loading = false;
}) })
.catch(error => { .catch(error => {
console.error("Error al sincronizar las ventas", error); console.error('Error al sincronizar ventas:', error);
this.loading = false;
}); });
} }
} }