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