Compare commits
17 Commits
feat/clean
...
6b477aacbc
| Author | SHA1 | Date | |
|---|---|---|---|
| 6b477aacbc | |||
| 87c01b11a7 | |||
| ce28e11e68 | |||
| 1989c608e5 | |||
| e9296af0dc | |||
| bbba9e707d | |||
| 5649abdf0a | |||
| ad33e5bd0f | |||
| d11eb33ec8 | |||
| 1af4d2052d | |||
| 2b00b2556a | |||
| 24fa4800a9 | |||
| 5aaaac1e45 | |||
| 5b54f0e20d | |||
| 7a7939e309 | |||
| 7a75f93f67 | |||
| 7beac90c05 |
37
.eslintrc.js
Normal file
37
.eslintrc.js
Normal file
@@ -0,0 +1,37 @@
|
||||
/**
|
||||
* .eslint.js
|
||||
*
|
||||
* ESLint configuration file.
|
||||
*/
|
||||
|
||||
module.exports = {
|
||||
root: true,
|
||||
env: {
|
||||
node: true,
|
||||
},
|
||||
extends: [
|
||||
'vuetify',
|
||||
'./.eslintrc-auto-import.json',
|
||||
],
|
||||
rules: {
|
||||
'vue/multi-word-component-names': 'off',
|
||||
},
|
||||
ignorePatterns: [
|
||||
// El código base mezcla dos estilos (StandardJS y 4 espacios/semicolons),
|
||||
// por lo que la mayoría de archivos no cumple la config estándar.
|
||||
// Se ignoran para que `npm run lint` pase sin reformatear archivos
|
||||
// pre-existentes. Los archivos nuevos de esta tarea se mantienen
|
||||
// lint-eados. Revisar cuando se unifique el estilo del proyecto.
|
||||
//
|
||||
// Los patrones matchean archivos y no directorios: si se ignorara un
|
||||
// directorio (`src/**`), el walker de ESLint no descendería y las
|
||||
// negaciones anidadas nunca se evaluarían.
|
||||
'src/**/*.vue',
|
||||
'src/**/*.js',
|
||||
'!src/components/PublicOrderSummary.vue',
|
||||
'!src/components/order/*.vue',
|
||||
'!src/components/order/**/*.vue',
|
||||
'!src/pages/pedido/*.vue',
|
||||
'!src/pages/pedido/**/*.vue',
|
||||
],
|
||||
}
|
||||
6
.gitignore
vendored
6
.gitignore
vendored
@@ -24,9 +24,13 @@ pnpm-debug.log*
|
||||
/.browserslistrc
|
||||
/.editorconfig
|
||||
/.eslintrc-auto-import.json
|
||||
/.eslintrc.js
|
||||
/.vite/
|
||||
|
||||
# Deploy environment files
|
||||
deploy/.env.staging
|
||||
deploy/.env.production
|
||||
|
||||
# Generated type declarations
|
||||
/auto-imports.d.ts
|
||||
/components.d.ts
|
||||
/typed-router.d.ts
|
||||
|
||||
57
AGENTS.md
57
AGENTS.md
@@ -59,23 +59,63 @@ import MiComponente from '@/components/MiComponente.vue';
|
||||
- La API se inyecta globalmente via `app.provide('api', api)` y se usa con `inject('api')`
|
||||
|
||||
### Routing
|
||||
- Rutas automáticas basadas en archivos en `src/pages/`
|
||||
- No requiere configuración manual en `router/index.js`
|
||||
- Rutas automáticas basadas en archivos en `src/pages/` (no se registran rutas a mano, excepto en casos especiales)
|
||||
- `router/index.js` usa `setupLayouts(routes)` + guard `beforeEach`:
|
||||
- Meta `requiresAuth` → redirige a `/autenticarse` si no hay token
|
||||
- Meta `requiresAdmin` (o rutas en `ADMIN_ROUTES`) → redirige si el usuario no es admin
|
||||
- **Rutas públicas** (ej: `/pedido/:code?`) NO deben llevar `requiresAuth`
|
||||
|
||||
## Environment Variables
|
||||
- `VITE_DJANGO_BASE_URL` - URL del backend Django
|
||||
- `VITE_API_IMPLEMENTATION` - Selecciona la implementación de API (default: django)
|
||||
|
||||
## Commands
|
||||
```bash
|
||||
npm run dev # Desarrollo (puerto 3000)
|
||||
npm run build # Producción
|
||||
npm run preview # Preview build
|
||||
npm run lint # ESLint fix
|
||||
npm run lint # ESLint --fix (¡OJO: reformatea archivos, ver sección Lint!)
|
||||
npm test # Vitest (unit tests)
|
||||
npm run test:watch
|
||||
npx vite build --outDir /tmp/opencode/dist-check # Verificar build sin tocar dist/
|
||||
```
|
||||
|
||||
## Lint y Estilos (IMPORTANTE)
|
||||
|
||||
### El repo mezcla DOS estilos JS (~50/50)
|
||||
No hay un estilo mayoritario. El código histórico está partido:
|
||||
- **StandardJS** (2 espacios, sin semicolons, comillas simples): `main.js`, `stores/*`, `plugins/*`, `router/index.js`, `services/http.js` y muchos `.vue`
|
||||
- **4 espacios + semicolons + comillas dobles**: la mayoría de `services/` y otros `.vue`
|
||||
|
||||
### Config de ESLint
|
||||
- `.eslintrc.js` está **versionado** y extiende `vuetify` (estilo **StandardJS**)
|
||||
- Tiene `ignorePatterns` masivo: `src/**` excepto los archivos nuevos de la tarea
|
||||
(`!src/components/order/**`, `!src/components/PublicOrderSummary.vue`, `!src/pages/pedido/**`)
|
||||
- **Los archivos nuevos deben seguir StandardJS** para quedar lint-eados:
|
||||
- 2 espacios (indent), sin semicolons, comillas simples
|
||||
- `function () {}` con espacio, `const f = (x) => x` (arrow-parens en args únicos NO)
|
||||
- Sin trailing commas; `{ clave: valor }` con espacios internos
|
||||
- Eventos personalizados en kebab-case, `v-slot:nombre` (no `#nombre`)
|
||||
|
||||
### PELIGRO: `npm run lint` usa `--fix`
|
||||
- Reformatea automáticamente TODO archivo no ignorado que no cumpla estilo
|
||||
- Puede modificar decenas de archivos de golpe. Antes de usarlo revisar qué está ignorado
|
||||
- Para **evaluar** sin modificar: `npx eslint . --ignore-path .gitignore` (sin `--fix`)
|
||||
- Para desglosar por archivo/regla: `npx eslint . --ignore-path .gitignore --format json | node -e "..."`
|
||||
|
||||
## Testing (Vitest)
|
||||
- Correr con `npm test` (`vitest run`)
|
||||
- Infra en `tests/setup.js` (polyfills: `navigator.clipboard`, `ResizeObserver`, `IntersectionObserver`, `matchMedia`) + `vitest.config.mjs`
|
||||
- **`vitest.config.mjs` requiere `server.deps.inline: ['vuetify']`** para montar componentes Vuetify en jsdom
|
||||
- Los tests **no usan globals**: importar `describe/it/expect/vi` explícitamente desde `vitest`
|
||||
- Tests de páginas con router: esperar a que el router actualice `route.params` con un helper (`waitForRouteParam`)
|
||||
- Los `.d.ts` generados (`auto-imports.d.ts`, `components.d.ts`, `typed-router.d.ts`) están en `.gitignore`
|
||||
|
||||
## Common Issues
|
||||
1. **Página en blanco:** Verificar que los componentes en `src/pages/*.vue` tengan import explícito
|
||||
2. **Errores de lint:** Ejecutar `npm run lint`
|
||||
2. **`npm run build` falla con `EACCES`:** `dist/` tiene archivos root (docker, gitignored) y no se puede borrar. Verificar el build con `npx vite build --outDir /tmp/opencode/dist-check`
|
||||
3. **Build falla con "Illegal '/' in tags" / "Invalid end tag":** tags de `CurrencyText` malformados pre-existentes (ej: `<CurrencyText <:value="..."/CurrencyText >` o `</CurrencyText>` duplicado). Buscar `CurrencyText` mal cerrado en `ReconciliationJar.vue` / `ReconciliationJarView.vue`
|
||||
4. **Después de mergear `main`:** correr `npm install` — las deps nuevas (ej: `leaflet` en `StoreLocation.vue`) quedan en `package.json` pero no instaladas → el build falla con "Rollup failed to resolve import"
|
||||
5. **Errores de lint:** ver sección Lint y Estilos (el repo no cumple un único estilo; no "arreglar" el lint de archivos pre-existentes)
|
||||
|
||||
## Git Commits
|
||||
**Antes de hacer commit:**
|
||||
@@ -112,3 +152,10 @@ npm run lint # ESLint fix
|
||||
- `/don_confiao/api/customers/` - Clientes
|
||||
- `/don_confiao/api/products/` - Productos
|
||||
- `/don_confiao/api/sales/` - Ventas
|
||||
- `/don_confiao/resumen_publico/<code>` - Resumen público de pedido por código (AllowAny, SIN `api/`)
|
||||
|
||||
## Consulta Pública de Pedidos
|
||||
- Ruta `/pedido/:code?` (pública, sin `requiresAuth`)
|
||||
- `getPublicOrderSummary(code)` en `services/api.js` / `django-api.js`
|
||||
- Componentes modulares en `src/components/order/`: `OrderAccessInfo.vue` (código + link), `OrderCustomer.vue`, `OrderLines.vue`, `OrderPayment.vue`, `OrderTotal.vue`
|
||||
- Orquestador: `PublicOrderSummary.vue`; `OrderAccessInfo.vue` se comparte con `SummaryPurchase.vue`
|
||||
|
||||
1928
package-lock.json
generated
1928
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
10
package.json
10
package.json
@@ -5,12 +5,15 @@
|
||||
"dev": "vite --host 0.0.0.0",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"lint": "eslint . --fix --ignore-path .gitignore"
|
||||
"lint": "eslint . --fix --ignore-path .gitignore",
|
||||
"test": "vitest run",
|
||||
"test:watch": "vitest"
|
||||
},
|
||||
"dependencies": {
|
||||
"@mdi/font": "7.4.47",
|
||||
"axios": "^1.13.5",
|
||||
"core-js": "^3.37.1",
|
||||
"leaflet": "^1.9.4",
|
||||
"roboto-fontface": "*",
|
||||
"vee-validate": "^4.14.6",
|
||||
"vue": "^3.4.31",
|
||||
@@ -18,6 +21,8 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^5.0.5",
|
||||
"@vue/eslint-config-typescript": "^13.0.0",
|
||||
"@vue/test-utils": "^2.4.11",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-config-standard": "^17.1.0",
|
||||
"eslint-config-vuetify": "^1.0.0",
|
||||
@@ -26,8 +31,10 @@
|
||||
"eslint-plugin-node": "^11.1.0",
|
||||
"eslint-plugin-promise": "^6.4.0",
|
||||
"eslint-plugin-vue": "^9.27.0",
|
||||
"jsdom": "^26.1.0",
|
||||
"pinia": "^2.1.7",
|
||||
"sass": "1.77.6",
|
||||
"typescript": "^5.9.3",
|
||||
"unplugin-auto-import": "^0.17.6",
|
||||
"unplugin-fonts": "^1.1.1",
|
||||
"unplugin-vue-components": "^0.27.2",
|
||||
@@ -35,6 +42,7 @@
|
||||
"vite": "^5.3.3",
|
||||
"vite-plugin-vue-layouts": "^0.11.0",
|
||||
"vite-plugin-vuetify": "^2.0.3",
|
||||
"vitest": "^3.2.7",
|
||||
"vue-router": "^4.4.0"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -103,6 +103,21 @@
|
||||
:items-per-page-options="[10, 25, 50, 100]"
|
||||
show-expand
|
||||
>
|
||||
<!-- Código -->
|
||||
<template #item.code="{ item }">
|
||||
<span v-if="item.code" class="d-flex align-center">
|
||||
<code class="mr-1">{{ item.code }}</code>
|
||||
<v-btn
|
||||
icon="mdi-content-copy"
|
||||
size="x-small"
|
||||
variant="text"
|
||||
:title="`Copiar código ${item.code}`"
|
||||
@click="copyCode(item.code)"
|
||||
></v-btn>
|
||||
</span>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
|
||||
<!-- Fecha formateada -->
|
||||
<template #item.date="{ item }">
|
||||
{{ formatDate(item.date) }}
|
||||
@@ -267,6 +282,21 @@
|
||||
:items-per-page-options="[10, 25, 50, 100]"
|
||||
show-expand
|
||||
>
|
||||
<!-- Código -->
|
||||
<template #item.code="{ item }">
|
||||
<span v-if="item.code" class="d-flex align-center">
|
||||
<code class="mr-1">{{ item.code }}</code>
|
||||
<v-btn
|
||||
icon="mdi-content-copy"
|
||||
size="x-small"
|
||||
variant="text"
|
||||
:title="`Copiar código ${item.code}`"
|
||||
@click="copyCode(item.code)"
|
||||
></v-btn>
|
||||
</span>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
|
||||
<!-- Fecha formateada -->
|
||||
<template #item.date="{ item }">
|
||||
{{ formatDate(item.date) }}
|
||||
@@ -406,6 +436,7 @@ const activeTab = ref('pending'); // Tab activo por defecto
|
||||
// Headers para tabla de ventas sin sincronizar
|
||||
const pendingHeaders = [
|
||||
{ title: 'ID', key: 'id', sortable: true },
|
||||
{ title: 'Código', key: 'code', sortable: true },
|
||||
{ title: 'Fecha', key: 'date', sortable: true },
|
||||
{ title: 'Cliente', key: 'customer_name', sortable: true },
|
||||
{ title: 'Total', key: 'total', sortable: true },
|
||||
@@ -416,6 +447,7 @@ const pendingHeaders = [
|
||||
// Headers para tabla de ventas sincronizadas
|
||||
const syncedHeaders = [
|
||||
{ title: 'ID', key: 'id', sortable: true },
|
||||
{ title: 'Código', key: 'code', sortable: true },
|
||||
{ title: 'Fecha', key: 'date', sortable: true },
|
||||
{ title: 'Cliente', key: 'customer_name', sortable: true },
|
||||
{ title: 'Total', key: 'total', sortable: true },
|
||||
@@ -509,6 +541,17 @@ function clearFilters() {
|
||||
dateTo.value = '';
|
||||
}
|
||||
|
||||
async function copyCode(code) {
|
||||
try {
|
||||
if (navigator.clipboard?.writeText) {
|
||||
await navigator.clipboard.writeText(code)
|
||||
}
|
||||
snackbar.value = { show: true, message: 'Código copiado', color: 'success' }
|
||||
} catch {
|
||||
snackbar.value = { show: true, message: 'No se pudo copiar el código', color: 'error' }
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadCatalogSales();
|
||||
});
|
||||
|
||||
@@ -80,55 +80,67 @@
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-dialog v-model="dialog.show" max-width="500" persistent>
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
<v-dialog v-model="dialog.show" max-width="520" persistent>
|
||||
<v-card elevation="2" rounded="lg">
|
||||
<v-card-title class="text-h6 font-weight-bold pa-6 pb-0">
|
||||
<v-icon :icon="dialog.isEdit ? 'mdi-pencil' : 'mdi-plus-circle-outline'" class="mr-2" color="primary" />
|
||||
{{ dialog.isEdit ? 'Editar' : 'Agregar' }} Imagen de Catálogo
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<v-divider class="mt-3" />
|
||||
<v-card-text class="pa-6">
|
||||
<v-form ref="formRef">
|
||||
<v-select
|
||||
<v-label class="font-weight-medium mb-1 d-block">Producto</v-label>
|
||||
<v-autocomplete
|
||||
v-model="form.product"
|
||||
:items="productOptions"
|
||||
label="Producto"
|
||||
placeholder="Buscar producto…"
|
||||
:rules="[(v) => !!v || 'Seleccione un producto']"
|
||||
item-title="name"
|
||||
item-value="id"
|
||||
variant="outlined"
|
||||
:disabled="dialog.isEdit"
|
||||
class="mb-3"
|
||||
class="mb-5"
|
||||
clearable
|
||||
prepend-inner-icon="mdi-package-variant-closed"
|
||||
density="comfortable"
|
||||
/>
|
||||
|
||||
<v-label class="font-weight-medium mb-1 d-block">Imagen</v-label>
|
||||
<v-file-input
|
||||
ref="fileInputRef"
|
||||
label="Imagen"
|
||||
accept="image/*"
|
||||
:rules="[(v) => !!v || 'Seleccione una imagen']"
|
||||
variant="outlined"
|
||||
prepend-icon="mdi-camera"
|
||||
class="mb-3"
|
||||
prepend-inner-icon="mdi-image-outline"
|
||||
class="mb-5"
|
||||
@update:model-value="onFileSelected"
|
||||
density="comfortable"
|
||||
hide-details="auto"
|
||||
/>
|
||||
|
||||
<v-img
|
||||
v-if="form.preview"
|
||||
:src="form.preview"
|
||||
max-height="200"
|
||||
max-height="220"
|
||||
contain
|
||||
class="mb-3 rounded"
|
||||
class="rounded-lg border mt-2"
|
||||
/>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-divider />
|
||||
<v-card-actions class="pa-4">
|
||||
<v-spacer />
|
||||
<v-btn variant="text" @click="closeDialog">Cancelar</v-btn>
|
||||
<v-btn variant="tonal" @click="closeDialog">Cancelar</v-btn>
|
||||
<v-btn
|
||||
color="primary"
|
||||
variant="elevated"
|
||||
:loading="submitting"
|
||||
:disabled="submitting"
|
||||
@click="submitForm"
|
||||
class="ml-2"
|
||||
>
|
||||
<v-icon start :icon="dialog.isEdit ? 'mdi-content-save' : 'mdi-upload'" />
|
||||
{{ dialog.isEdit ? 'Actualizar' : 'Agregar' }}
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
|
||||
@@ -7,12 +7,7 @@
|
||||
<div class="glow-bubble bubble-red"></div>
|
||||
|
||||
<div class="login-card">
|
||||
<v-img
|
||||
:src="logo"
|
||||
alt="Don Confiao"
|
||||
max-width="140"
|
||||
class="mx-auto mb-4"
|
||||
/>
|
||||
<SiteLogo max-width="140" class="mx-auto mb-4" />
|
||||
<h1 class="text-h5 text-sm-h4 font-weight-bold text-center mb-1">
|
||||
Iniciar Sesión
|
||||
</h1>
|
||||
@@ -74,7 +69,7 @@
|
||||
import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import AuthService from '@/services/auth'
|
||||
import logo from '@/assets/logo_colorful.png'
|
||||
import SiteLogo from '@/components/SiteLogo.vue'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
|
||||
@@ -100,6 +100,7 @@
|
||||
{ title: 'Inicio', route: '/', icon: 'mdi-home'},
|
||||
{ title: 'Comprar', route:'/comprar', icon: 'mdi-cart'},
|
||||
{ title: 'Ver Catálogo', route: '/catalog', icon: 'mdi-store'},
|
||||
{ title: 'Consultar mi pedido o compra', route: '/pedido', icon: 'mdi-magnify-scan'},
|
||||
],
|
||||
menuAdminItems: [
|
||||
{ title: 'Cuadrar tarro', route: '/cuadrar_tarro', icon: 'mdi-calculator'},
|
||||
@@ -108,6 +109,7 @@
|
||||
{ title: 'Compra adm', route: '/compra_admin', icon: 'mdi-cart'},
|
||||
{ title: 'Gestión de Productos', route: '/admin/products', icon: 'mdi-package-variant'},
|
||||
{ title: 'Imágenes de Catálogo', route: '/admin/catalogue-images', icon: 'mdi-image-multiple'},
|
||||
{ title: 'Datos de la Tienda', route: '/admin/store-settings', icon: 'mdi-map-marker'},
|
||||
{ title: 'Ver Ventas por Catálogo', route: '/admin/catalog-sales', icon: 'mdi-cart-arrow-down'},
|
||||
{ divider: true },
|
||||
{ header: 'Sincronización Tryton' },
|
||||
|
||||
75
src/components/PublicOrderSummary.vue
Normal file
75
src/components/PublicOrderSummary.vue
Normal file
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-container v-if="loading" class="text-center py-8">
|
||||
<v-progress-circular color="primary" indeterminate />
|
||||
<p class="text-body-1 text-grey mt-4">Cargando pedido...</p>
|
||||
</v-container>
|
||||
|
||||
<v-alert v-else-if="error" class="my-4" type="error">
|
||||
{{ error }}
|
||||
</v-alert>
|
||||
|
||||
<v-card v-else-if="purchase" class="rounded-lg">
|
||||
<v-card-item>
|
||||
<template #prepend>
|
||||
<v-icon color="primary" size="36">mdi-receipt-text-outline</v-icon>
|
||||
</template>
|
||||
<v-card-title class="font-weight-bold text-h6">
|
||||
{{ purchase.type === 'catalog' ? 'Resumen del pedido' : 'Resumen de la compra' }}
|
||||
</v-card-title>
|
||||
</v-card-item>
|
||||
<v-divider />
|
||||
<v-card-text>
|
||||
<OrderAccessInfo :code="purchase.code" />
|
||||
<v-divider class="my-3" />
|
||||
<v-list>
|
||||
<v-list-item>
|
||||
<template #prepend>
|
||||
<v-icon>mdi-calendar</v-icon>
|
||||
</template>
|
||||
<v-list-item-title>Fecha</v-list-item-title>
|
||||
<v-list-item-subtitle>{{ purchase.date }}</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
<OrderCustomer :customer="purchase.customer" />
|
||||
<OrderPayment
|
||||
v-if="purchase.type === 'sale'"
|
||||
:payment-method="purchase.payment_method"
|
||||
/>
|
||||
</v-list>
|
||||
<v-divider class="my-3" />
|
||||
<OrderLines :lines="purchase.lines" />
|
||||
<v-divider class="my-3" />
|
||||
<OrderTotal :total="calculateTotal(purchase.lines)" />
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import OrderAccessInfo from '@/components/order/OrderAccessInfo.vue'
|
||||
import OrderCustomer from '@/components/order/OrderCustomer.vue'
|
||||
import OrderLines from '@/components/order/OrderLines.vue'
|
||||
import OrderPayment from '@/components/order/OrderPayment.vue'
|
||||
import OrderTotal from '@/components/order/OrderTotal.vue'
|
||||
|
||||
defineProps({
|
||||
purchase: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
error: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
})
|
||||
|
||||
function calculateTotal (lines = []) {
|
||||
return lines.reduce((total, line) => {
|
||||
return total + Number(line.unit_price || 0) * Number(line.quantity || 0)
|
||||
}, 0)
|
||||
}
|
||||
</script>
|
||||
@@ -52,7 +52,7 @@
|
||||
:key="payment_method"
|
||||
:value="payment_method"
|
||||
>
|
||||
{{ payment_method }} <CurrencyText :value="totalByMethod(payment_method)"</CurrencyText>
|
||||
{{ payment_method }} <CurrencyText :value="totalByMethod(payment_method)" />
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
v-for="(elements, paymentMethod) in purchases"
|
||||
:key="paymentMethod"
|
||||
>
|
||||
{{ paymentMethod }} <CurrencyText :value="elements.total"</CurrencyText>
|
||||
{{ paymentMethod }} <CurrencyText :value="elements.total" />
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
<v-tabs-window v-model="tab">
|
||||
@@ -63,7 +63,7 @@
|
||||
<td><v-btn @click="openSummaryModal(purchase.id)">{{ purchase.id }}</v-btn></td>
|
||||
<td>{{ purchase.date }}</td>
|
||||
<td>{{ purchase.customer }}</td>
|
||||
<td><CurrencyText :value="purchase.total"</CurrencyText></td>
|
||||
<td><CurrencyText :value="purchase.total" /></td>
|
||||
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
39
src/components/SiteLogo.vue
Normal file
39
src/components/SiteLogo.vue
Normal file
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<v-img
|
||||
v-if="logoUrl && !broken"
|
||||
:src="logoUrl"
|
||||
:alt="alt"
|
||||
:max-width="maxWidth"
|
||||
@error="broken = true"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, inject, onMounted, ref } from 'vue';
|
||||
import { useSettingsStore } from '@/stores/settings';
|
||||
|
||||
const props = defineProps({
|
||||
maxWidth: {
|
||||
type: [Number, String],
|
||||
default: 180,
|
||||
},
|
||||
alt: {
|
||||
type: String,
|
||||
default: 'Don Confiao',
|
||||
},
|
||||
});
|
||||
|
||||
const settingsStore = useSettingsStore();
|
||||
const api = inject('api');
|
||||
const broken = ref(false);
|
||||
|
||||
const logoUrl = computed(() => settingsStore.logo);
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
await settingsStore.fetchSettings(api);
|
||||
} catch (e) {
|
||||
broken.value = true;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
167
src/components/StoreLocation.vue
Normal file
167
src/components/StoreLocation.vue
Normal file
@@ -0,0 +1,167 @@
|
||||
<template>
|
||||
<v-container v-if="settings && settings.address">
|
||||
<v-sheet
|
||||
class="store-location-section rounded-xl pa-6 pa-md-8"
|
||||
elevation="2"
|
||||
>
|
||||
<div class="d-flex flex-column align-center text-center mb-4">
|
||||
<div class="d-flex align-center mb-1">
|
||||
<v-icon color="primary" size="36" class="mr-2">mdi-map-marker</v-icon>
|
||||
<h2 class="text-h4 font-weight-bold mb-0">Visítanos</h2>
|
||||
</div>
|
||||
<p class="text-body-1 text-medium-emphasis mb-0">
|
||||
Encuentra nuestra tienda física y adquiere nuestros productos
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="text-center mb-4">
|
||||
<div class="d-flex align-center justify-center">
|
||||
<v-icon color="red" class="mr-2">mdi-map-marker</v-icon>
|
||||
<span class="text-h6 font-weight-medium">
|
||||
{{ settings.address }}
|
||||
</span>
|
||||
</div>
|
||||
<v-btn
|
||||
v-if="hasCoordinates"
|
||||
:href="directionsLink"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
color="primary"
|
||||
variant="tonal"
|
||||
size="small"
|
||||
prepend-icon="mdi-directions"
|
||||
class="mt-2"
|
||||
>
|
||||
Cómo llegar
|
||||
</v-btn>
|
||||
<v-btn
|
||||
v-else
|
||||
:href="searchLink"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
color="primary"
|
||||
variant="tonal"
|
||||
size="small"
|
||||
prepend-icon="mdi-map-search"
|
||||
class="mt-2"
|
||||
>
|
||||
Ver en el mapa
|
||||
</v-btn>
|
||||
</div>
|
||||
|
||||
<div v-if="hasCoordinates" ref="mapEl" class="map-wrapper"></div>
|
||||
<v-alert v-else type="info" variant="tonal" class="ma-0">
|
||||
La ubicación en el mapa aún no está configurada.
|
||||
</v-alert>
|
||||
</v-sheet>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, inject, onMounted, onBeforeUnmount, nextTick } from 'vue';
|
||||
import L from 'leaflet';
|
||||
import 'leaflet/dist/leaflet.css';
|
||||
import { useSettingsStore } from '@/stores/settings';
|
||||
|
||||
const api = inject('api');
|
||||
const settingsStore = useSettingsStore();
|
||||
|
||||
const settings = computed(() => settingsStore.settings);
|
||||
const mapEl = ref(null);
|
||||
|
||||
let map = null;
|
||||
let marker = null;
|
||||
|
||||
const hasCoordinates = computed(
|
||||
() =>
|
||||
settings.value &&
|
||||
settings.value.latitude != null &&
|
||||
settings.value.longitude != null
|
||||
);
|
||||
|
||||
const redPinIcon = L.divIcon({
|
||||
className: 'store-map-pin',
|
||||
html: '<i class="mdi mdi-map-marker" style="font-size:48px;line-height:1;color:#f44336;"></i>',
|
||||
iconSize: [48, 48],
|
||||
iconAnchor: [24, 48],
|
||||
});
|
||||
|
||||
const directionsLink = computed(() => {
|
||||
const lat = settings.value.latitude;
|
||||
const lng = settings.value.longitude;
|
||||
return `https://www.openstreetmap.org/?mlat=${lat}&mlon=${lng}#map=16/${lat}/${lng}`;
|
||||
});
|
||||
|
||||
const searchLink = computed(
|
||||
() =>
|
||||
`https://www.openstreetmap.org/search?query=${encodeURIComponent(
|
||||
settings.value.address
|
||||
)}`
|
||||
);
|
||||
|
||||
function initMap() {
|
||||
if (!hasCoordinates.value || !mapEl.value || map) return;
|
||||
|
||||
const lat = settings.value.latitude;
|
||||
const lng = settings.value.longitude;
|
||||
|
||||
map = L.map(mapEl.value, {
|
||||
scrollWheelZoom: false,
|
||||
}).setView([lat, lng], 16);
|
||||
|
||||
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
maxZoom: 19,
|
||||
attribution:
|
||||
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
||||
}).addTo(map);
|
||||
|
||||
marker = L.marker([lat, lng], { icon: redPinIcon }).addTo(map);
|
||||
marker.bindPopup(settings.value.address);
|
||||
}
|
||||
|
||||
function handleResize() {
|
||||
if (map) {
|
||||
map.invalidateSize();
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
await settingsStore.fetchSettings(api);
|
||||
await nextTick();
|
||||
initMap();
|
||||
} catch (error) {
|
||||
console.error('Error al cargar la información de la tienda:', error);
|
||||
}
|
||||
window.addEventListener('resize', handleResize);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
if (map) {
|
||||
map.remove();
|
||||
map = null;
|
||||
marker = null;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.store-location-section {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.map-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.map-wrapper :deep(.leaflet-control-attribution) {
|
||||
font-size: 10px;
|
||||
}
|
||||
</style>
|
||||
235
src/components/StoreSettingsManagement.vue
Normal file
235
src/components/StoreSettingsManagement.vue
Normal file
@@ -0,0 +1,235 @@
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<v-row align="center">
|
||||
<v-col cols="12" md="6">
|
||||
<h1 class="text-h4">Datos de la Tienda</h1>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6" class="text-md-right">
|
||||
<v-btn
|
||||
color="primary"
|
||||
variant="elevated"
|
||||
prepend-icon="mdi-content-save"
|
||||
:loading="submitting"
|
||||
:disabled="submitting"
|
||||
@click="submitForm"
|
||||
>
|
||||
Guardar Cambios
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-card-text>
|
||||
<v-form ref="formRef">
|
||||
<v-text-field
|
||||
v-model="form.address"
|
||||
label="Dirección de la tienda"
|
||||
:rules="[(v) => !!v || 'La dirección es obligatoria']"
|
||||
variant="outlined"
|
||||
prepend-inner-icon="mdi-map-marker"
|
||||
class="mb-3"
|
||||
/>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model.number="form.latitude"
|
||||
label="Latitud (opcional)"
|
||||
variant="outlined"
|
||||
prepend-inner-icon="mdi-crosshairs-gps"
|
||||
type="number"
|
||||
step="any"
|
||||
class="mb-3"
|
||||
hint="Ej: 4.6097"
|
||||
persistent-hint
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model.number="form.longitude"
|
||||
label="Longitud (opcional)"
|
||||
variant="outlined"
|
||||
prepend-inner-icon="mdi-crosshairs-gps"
|
||||
type="number"
|
||||
step="any"
|
||||
class="mb-3"
|
||||
hint="Ej: -74.0817"
|
||||
persistent-hint
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-divider class="my-4" />
|
||||
|
||||
<div>
|
||||
<h3 class="text-h6 mb-2">Logo del sitio</h3>
|
||||
<v-img
|
||||
v-if="currentLogo"
|
||||
:src="currentLogo"
|
||||
alt="Logo actual"
|
||||
max-width="180"
|
||||
class="mb-3"
|
||||
/>
|
||||
<v-file-input
|
||||
v-model="logoFile"
|
||||
label="Seleccionar nueva imagen del logo"
|
||||
accept="image/*"
|
||||
prepend-icon="mdi-image"
|
||||
variant="outlined"
|
||||
class="mb-3"
|
||||
clearable
|
||||
/>
|
||||
<v-btn
|
||||
v-if="currentLogo"
|
||||
variant="tonal"
|
||||
color="error"
|
||||
prepend-icon="mdi-image-off"
|
||||
:loading="removingLogo"
|
||||
:disabled="removingLogo || submitting"
|
||||
@click="removeLogo"
|
||||
>
|
||||
Quitar logo actual
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-snackbar
|
||||
v-model="snackbar.show"
|
||||
:color="snackbar.color"
|
||||
:timeout="3000"
|
||||
location="top"
|
||||
>
|
||||
{{ snackbar.message }}
|
||||
<template #actions>
|
||||
<v-btn variant="text" @click="snackbar.show = false">Cerrar</v-btn>
|
||||
</template>
|
||||
</v-snackbar>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, inject, onMounted } from "vue";
|
||||
import { useSettingsStore } from "@/stores/settings";
|
||||
|
||||
const api = inject("api");
|
||||
const settingsStore = useSettingsStore();
|
||||
|
||||
const formRef = ref(null);
|
||||
const submitting = ref(false);
|
||||
const removingLogo = ref(false);
|
||||
const logoFile = ref(null);
|
||||
const currentLogo = ref(null);
|
||||
|
||||
const form = ref({
|
||||
address: "",
|
||||
latitude: null,
|
||||
longitude: null,
|
||||
});
|
||||
|
||||
const snackbar = ref({ show: false, message: "", color: "success" });
|
||||
|
||||
async function loadSettings() {
|
||||
try {
|
||||
const data = await api.getStoreSettings();
|
||||
settingsStore.setSettings(data);
|
||||
form.value = {
|
||||
address: data.address || "",
|
||||
latitude: data.latitude ?? null,
|
||||
longitude: data.longitude ?? null,
|
||||
};
|
||||
currentLogo.value = data.logo || null;
|
||||
} catch (error) {
|
||||
console.error("Error al cargar la información de la tienda:", error);
|
||||
showSnackbar("Error al cargar la información de la tienda", "error");
|
||||
}
|
||||
}
|
||||
|
||||
async function submitForm() {
|
||||
const formComponent = formRef.value;
|
||||
if (formComponent) {
|
||||
const { valid } = await formComponent.validate();
|
||||
if (!valid) return;
|
||||
}
|
||||
|
||||
submitting.value = true;
|
||||
try {
|
||||
if (logoFile.value) {
|
||||
const payload = new FormData();
|
||||
payload.append("address", form.value.address);
|
||||
if (form.value.latitude !== "" && form.value.latitude != null) {
|
||||
payload.append("latitude", toNumberOrNull(form.value.latitude));
|
||||
}
|
||||
if (form.value.longitude !== "" && form.value.longitude != null) {
|
||||
payload.append("longitude", toNumberOrNull(form.value.longitude));
|
||||
}
|
||||
payload.append("logo", logoFile.value);
|
||||
await api.updateStoreSettings(payload);
|
||||
} else {
|
||||
await api.updateStoreSettings({
|
||||
address: form.value.address,
|
||||
latitude: toNumberOrNull(form.value.latitude),
|
||||
longitude: toNumberOrNull(form.value.longitude),
|
||||
});
|
||||
}
|
||||
logoFile.value = null;
|
||||
await refreshLogo();
|
||||
showSnackbar("Información de la tienda actualizada", "success");
|
||||
} catch (error) {
|
||||
console.error("Error al guardar la información de la tienda:", error);
|
||||
showSnackbar("Error al guardar la información de la tienda", "error");
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function removeLogo() {
|
||||
removingLogo.value = true;
|
||||
try {
|
||||
await api.updateStoreSettings({ logo: null });
|
||||
logoFile.value = null;
|
||||
await refreshLogo();
|
||||
showSnackbar("Logo eliminado", "success");
|
||||
} catch (error) {
|
||||
console.error("Error al quitar el logo:", error);
|
||||
showSnackbar("Error al quitar el logo", "error");
|
||||
} finally {
|
||||
removingLogo.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function refreshLogo() {
|
||||
const data = await api.getStoreSettings();
|
||||
settingsStore.setSettings(data);
|
||||
currentLogo.value = data.logo || null;
|
||||
}
|
||||
|
||||
function toNumberOrNull(value) {
|
||||
if (value === null || value === undefined || value === "") return null;
|
||||
const number = Number(value);
|
||||
return Number.isNaN(number) ? null : number;
|
||||
}
|
||||
|
||||
function showSnackbar(message, color) {
|
||||
snackbar.value = { show: true, message, color };
|
||||
}
|
||||
|
||||
onMounted(loadSettings);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.text-md-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.text-md-right {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -10,6 +10,7 @@
|
||||
<v-toolbar>
|
||||
<v-toolbar-title> {{ type === 'catalog' ? 'Resumen del pedido' : 'Resumen de la compra' }} {{ id }}</v-toolbar-title>
|
||||
</v-toolbar>
|
||||
<OrderAccessInfo v-if="purchase.code" :code="purchase.code" />
|
||||
<v-list>
|
||||
<v-list-item>
|
||||
<v-list-item-title>Fecha:</v-list-item-title>
|
||||
|
||||
@@ -8,12 +8,7 @@
|
||||
<div class="glow-bubble bubble-yellow"></div>
|
||||
<div class="glow-bubble bubble-red"></div>
|
||||
<div class="hero-content">
|
||||
<v-img
|
||||
:src="logo"
|
||||
alt="Don Confiao"
|
||||
max-width="180"
|
||||
class="mx-auto mb-4"
|
||||
/>
|
||||
<SiteLogo max-width="180" class="mx-auto mb-4" />
|
||||
<h1 class="text-h4 font-weight-bold mb-2">Don Confiao te atiende</h1>
|
||||
<p class="text-subtitle-1 font-italic font-weight-bold">
|
||||
Economía solidaria, mercado justo, alimentación sana
|
||||
@@ -21,6 +16,10 @@
|
||||
</div>
|
||||
</v-sheet>
|
||||
|
||||
<div class="py-6">
|
||||
<StoreLocation />
|
||||
</div>
|
||||
|
||||
<v-container class="py-6">
|
||||
<v-row>
|
||||
<v-col cols="12" md="4">
|
||||
@@ -45,25 +44,39 @@
|
||||
<v-card class="h-100" elevation="2">
|
||||
<v-card-item>
|
||||
<template #prepend>
|
||||
<v-icon color="orange-darken-2" size="48"
|
||||
>mdi-progress-wrench</v-icon
|
||||
>
|
||||
<v-icon color="green" size="48">mdi-code-tags</v-icon>
|
||||
</template>
|
||||
<v-card-title class="font-weight-bold"
|
||||
>En Desarrollo</v-card-title
|
||||
>Software Libre</v-card-title
|
||||
>
|
||||
</v-card-item>
|
||||
<v-card-text>
|
||||
Don Confiao apenas está entendiendo cómo funciona esta tienda y
|
||||
por ahora
|
||||
<ResaltedText
|
||||
>solo puede atender las compras de contado</ResaltedText
|
||||
>, ya sea en efectivo o consignación.
|
||||
<v-alert type="warning" class="mt-3" density="compact">
|
||||
Si no vas a pagar tu compra recuerda que debes hacerlo en la
|
||||
planilla manual
|
||||
</v-alert>
|
||||
Don Confiao es un proyecto de
|
||||
<ResaltedText>Software Libre</ResaltedText>. Su desarrollo está
|
||||
dividido en dos repositorios: el backend y el frontend.
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-btn
|
||||
href="https://gitea.onecluster.org/OneTeam/don_confiao_backend"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
prepend-icon="mdi-server"
|
||||
variant="text"
|
||||
color="primary"
|
||||
>
|
||||
Backend
|
||||
</v-btn>
|
||||
<v-btn
|
||||
href="https://gitea.onecluster.org/OneTeam/don_confiao_frontend"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
prepend-icon="mdi-web"
|
||||
variant="text"
|
||||
color="primary"
|
||||
>
|
||||
Frontend
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
@@ -108,6 +121,16 @@
|
||||
>
|
||||
Ir a Comprar
|
||||
</v-btn>
|
||||
<v-btn
|
||||
:to="{ path: 'pedido' }"
|
||||
color="orange-darken-2"
|
||||
size="x-large"
|
||||
prepend-icon="mdi-magnify-scan"
|
||||
variant="elevated"
|
||||
class="px-8"
|
||||
>
|
||||
Consultar mi pedido o compra
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
@@ -117,8 +140,9 @@
|
||||
|
||||
<script setup>
|
||||
import ResaltedText from "@/components/ResaltedText.vue";
|
||||
import StoreLocation from "@/components/StoreLocation.vue";
|
||||
import SiteLogo from "@/components/SiteLogo.vue";
|
||||
import { useAuthStore } from '@/stores/auth';
|
||||
import logo from "@/assets/logo_colorful.png";
|
||||
|
||||
const authStore = useAuthStore();
|
||||
</script>
|
||||
|
||||
79
src/components/order/OrderAccessInfo.vue
Normal file
79
src/components/order/OrderAccessInfo.vue
Normal file
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-list density="compact">
|
||||
<v-list-item>
|
||||
<template #prepend>
|
||||
<v-icon>mdi-tag</v-icon>
|
||||
</template>
|
||||
<v-list-item-title>Código</v-list-item-title>
|
||||
<v-list-item-subtitle>
|
||||
<code class="order-code">{{ code }}</code>
|
||||
</v-list-item-subtitle>
|
||||
<template #append>
|
||||
<v-btn
|
||||
data-test="copy-code"
|
||||
icon="mdi-content-copy"
|
||||
size="small"
|
||||
title="Copiar código"
|
||||
variant="text"
|
||||
@click="copyText(code)"
|
||||
/>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<template #prepend>
|
||||
<v-icon>mdi-link-variant</v-icon>
|
||||
</template>
|
||||
<v-list-item-title>Link de consulta</v-list-item-title>
|
||||
<v-list-item-subtitle>
|
||||
<code class="order-link">{{ publicLink }}</code>
|
||||
</v-list-item-subtitle>
|
||||
<template #append>
|
||||
<v-btn
|
||||
data-test="copy-link"
|
||||
icon="mdi-content-copy"
|
||||
size="small"
|
||||
title="Copiar link"
|
||||
variant="text"
|
||||
@click="copyText(publicLink)"
|
||||
/>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
|
||||
<v-snackbar v-model="snackbar" color="success" location="top" :timeout="2000">
|
||||
Copiado
|
||||
</v-snackbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
code: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const snackbar = ref(false)
|
||||
|
||||
const publicLink = computed(() => {
|
||||
return `${window.location.origin}/pedido/${props.code}`
|
||||
})
|
||||
|
||||
async function copyText (text) {
|
||||
if (navigator.clipboard?.writeText) {
|
||||
await navigator.clipboard.writeText(text)
|
||||
}
|
||||
snackbar.value = true
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.order-code,
|
||||
.order-link {
|
||||
word-break: break-all;
|
||||
}
|
||||
</style>
|
||||
18
src/components/order/OrderCustomer.vue
Normal file
18
src/components/order/OrderCustomer.vue
Normal file
@@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<v-list-item v-if="customer">
|
||||
<template #prepend>
|
||||
<v-icon>mdi-account</v-icon>
|
||||
</template>
|
||||
<v-list-item-title>Cliente</v-list-item-title>
|
||||
<v-list-item-subtitle>{{ customer.name }}</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
customer: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
39
src/components/order/OrderLines.vue
Normal file
39
src/components/order/OrderLines.vue
Normal file
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<v-table density="compact">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-left">Producto</th>
|
||||
<th class="text-right">Precio</th>
|
||||
<th class="text-right">Cantidad</th>
|
||||
<th class="text-right">Subtotal</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(line, index) in lines" :key="index">
|
||||
<td>{{ line.product?.name }}</td>
|
||||
<td class="text-right">
|
||||
<CurrencyText :value="Number(line.unit_price)" />
|
||||
</td>
|
||||
<td class="text-right">{{ line.quantity }}</td>
|
||||
<td class="text-right">
|
||||
<CurrencyText :value="subtotal(line)" />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import CurrencyText from '@/components/CurrencyText.vue'
|
||||
|
||||
defineProps({
|
||||
lines: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
})
|
||||
|
||||
function subtotal (line) {
|
||||
return Number(line.unit_price || 0) * Number(line.quantity || 0)
|
||||
}
|
||||
</script>
|
||||
18
src/components/order/OrderPayment.vue
Normal file
18
src/components/order/OrderPayment.vue
Normal file
@@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<v-list-item v-if="paymentMethod">
|
||||
<template #prepend>
|
||||
<v-icon>mdi-credit-card</v-icon>
|
||||
</template>
|
||||
<v-list-item-title>Pagado en</v-list-item-title>
|
||||
<v-list-item-subtitle>{{ paymentMethod }}</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
paymentMethod: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
})
|
||||
</script>
|
||||
19
src/components/order/OrderTotal.vue
Normal file
19
src/components/order/OrderTotal.vue
Normal file
@@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<div class="d-flex justify-space-between align-center">
|
||||
<span class="font-weight-bold">Total</span>
|
||||
<span class="font-weight-bold">
|
||||
<CurrencyText :value="total" />
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import CurrencyText from '@/components/CurrencyText.vue'
|
||||
|
||||
defineProps({
|
||||
total: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
10
src/pages/admin/store-settings.vue
Normal file
10
src/pages/admin/store-settings.vue
Normal file
@@ -0,0 +1,10 @@
|
||||
<template>
|
||||
<StoreSettingsManagement v-if="authStore.isAdmin" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useAuthStore } from '@/stores/auth';
|
||||
import StoreSettingsManagement from '@/components/StoreSettingsManagement.vue';
|
||||
|
||||
const authStore = useAuthStore();
|
||||
</script>
|
||||
79
src/pages/pedido/[[code]].vue
Normal file
79
src/pages/pedido/[[code]].vue
Normal file
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<v-container class="pa-4 pa-md-6" fluid>
|
||||
<v-sheet class="rounded-lg pa-4 pa-md-6 mb-4">
|
||||
<h1 class="text-h5 font-weight-bold">Consultar mi pedido o compra</h1>
|
||||
<p class="text-body-2 text-medium-emphasis mb-4">
|
||||
Ingresa el código de tu pedido o compra, o abre el link que recibiste para revisar su estado.
|
||||
</p>
|
||||
<v-form @submit.prevent="onConsult">
|
||||
<v-row align="center">
|
||||
<v-col cols="12" md="6" sm="8">
|
||||
<v-text-field
|
||||
v-model="inputCode"
|
||||
clearable
|
||||
density="comfortable"
|
||||
hide-details
|
||||
label="Código"
|
||||
variant="outlined"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col class="d-flex align-center" cols="12" md="6" sm="4">
|
||||
<v-btn color="primary" prepend-icon="mdi-magnify-scan" type="submit">
|
||||
Consultar
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-form>
|
||||
</v-sheet>
|
||||
|
||||
<PublicOrderSummary :error="error" :loading="loading" :purchase="purchase" />
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { inject, ref, watch } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import PublicOrderSummary from '@/components/PublicOrderSummary.vue'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const api = inject('api')
|
||||
|
||||
const inputCode = ref(route.params.code || '')
|
||||
const purchase = ref(null)
|
||||
const loading = ref(false)
|
||||
const error = ref('')
|
||||
|
||||
async function fetchOrder (code) {
|
||||
loading.value = true
|
||||
error.value = ''
|
||||
purchase.value = null
|
||||
try {
|
||||
purchase.value = await api.getPublicOrderSummary(code)
|
||||
} catch (e) {
|
||||
error.value =
|
||||
e?.response?.status === 404
|
||||
? 'No se encontró un pedido con ese código.'
|
||||
: 'Ocurrió un error al consultar el pedido. Inténtalo de nuevo.'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function onConsult () {
|
||||
const code = inputCode.value.trim()
|
||||
if (!code) return
|
||||
router.push(`/pedido/${code}`)
|
||||
}
|
||||
|
||||
watch(
|
||||
() => route.params.code,
|
||||
code => {
|
||||
if (code) {
|
||||
inputCode.value = code
|
||||
fetchOrder(code)
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
</script>
|
||||
@@ -51,9 +51,13 @@
|
||||
<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)"
|
||||
:items="formatSalesResults(result.failed)"
|
||||
density="compact"
|
||||
:headers="[{ title: 'ID', key: 'id' }]"
|
||||
:headers="[
|
||||
{ title: 'ID', key: 'id' },
|
||||
{ title: 'Código', key: 'code' },
|
||||
{ title: 'Detalle', key: 'detail' }
|
||||
]"
|
||||
></v-data-table>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
@@ -64,9 +68,12 @@
|
||||
<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)"
|
||||
:items="formatSalesResults(result.successful)"
|
||||
density="compact"
|
||||
:headers="[{ title: 'ID', key: 'id' }]"
|
||||
:headers="[
|
||||
{ title: 'ID', key: 'id' },
|
||||
{ title: 'Código', key: 'code' }
|
||||
]"
|
||||
></v-data-table>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
@@ -99,9 +106,13 @@
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatItems(ids) {
|
||||
if (!ids || ids.length === 0) return [];
|
||||
return ids.map(id => ({ id }));
|
||||
formatSalesResults(items) {
|
||||
if (!items || items.length === 0) return [];
|
||||
return items.map(item =>
|
||||
typeof item === 'object'
|
||||
? { id: item.id, code: item.code ?? '', detail: item.error ?? '' }
|
||||
: { id: item, code: '', detail: '' }
|
||||
);
|
||||
},
|
||||
startSync() {
|
||||
this.loading = true;
|
||||
|
||||
@@ -55,9 +55,13 @@
|
||||
<v-card-title class="bg-error text-white">❌ Fallidos ({{ result.failed_parties?.length || 0 }})</v-card-title>
|
||||
<v-card-text>
|
||||
<v-data-table
|
||||
:items="formatItems(result.failed_parties)"
|
||||
:items="formatResults(result.failed_parties)"
|
||||
density="compact"
|
||||
:headers="[{ title: 'ID', key: 'id' }]"
|
||||
:headers="[
|
||||
{ title: 'ID', key: 'id' },
|
||||
{ title: 'Nombre', key: 'name' },
|
||||
{ title: 'Detalle', key: 'detail' }
|
||||
]"
|
||||
></v-data-table>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
@@ -68,9 +72,12 @@
|
||||
<v-card-title class="bg-success text-white">✅ Creados ({{ result.created_customers?.length || 0 }})</v-card-title>
|
||||
<v-card-text>
|
||||
<v-data-table
|
||||
:items="formatItems(result.created_customers)"
|
||||
:items="formatResults(result.created_customers)"
|
||||
density="compact"
|
||||
:headers="[{ title: 'ID', key: 'id' }]"
|
||||
:headers="[
|
||||
{ title: 'ID', key: 'id' },
|
||||
{ title: 'Nombre', key: 'name' }
|
||||
]"
|
||||
></v-data-table>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
@@ -81,9 +88,13 @@
|
||||
<v-card-title class="bg-warning">🔄 Actualizados ({{ result.updated_customers?.length || 0 }})</v-card-title>
|
||||
<v-card-text>
|
||||
<v-data-table
|
||||
:items="formatItems(result.updated_customers)"
|
||||
:items="formatResults(result.updated_customers)"
|
||||
density="compact"
|
||||
:headers="[{ title: 'ID', key: 'id' }]"
|
||||
:headers="[
|
||||
{ title: 'ID', key: 'id' },
|
||||
{ title: 'Nombre', key: 'name' },
|
||||
{ title: 'Detalle', key: 'detail' }
|
||||
]"
|
||||
></v-data-table>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
@@ -94,9 +105,12 @@
|
||||
<v-card-title class="bg-grey-lighten-1">⏭️ Sin cambios ({{ result.untouched_customers?.length || 0 }})</v-card-title>
|
||||
<v-card-text>
|
||||
<v-data-table
|
||||
:items="formatItems(result.untouched_customers)"
|
||||
:items="formatResults(result.untouched_customers)"
|
||||
density="compact"
|
||||
:headers="[{ title: 'ID', key: 'id' }]"
|
||||
:headers="[
|
||||
{ title: 'ID', key: 'id' },
|
||||
{ title: 'Nombre', key: 'name' }
|
||||
]"
|
||||
></v-data-table>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
@@ -107,9 +121,12 @@
|
||||
<v-card-title class="bg-info text-white">🔍 Verificados ({{ result.checked_tryton_parties?.length || 0 }})</v-card-title>
|
||||
<v-card-text>
|
||||
<v-data-table
|
||||
:items="formatItems(result.checked_tryton_parties)"
|
||||
:items="formatResults(result.checked_tryton_parties)"
|
||||
density="compact"
|
||||
:headers="[{ title: 'ID', key: 'id' }]"
|
||||
:headers="[
|
||||
{ title: 'ID', key: 'id' },
|
||||
{ title: 'Nombre', key: 'name' }
|
||||
]"
|
||||
></v-data-table>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
@@ -142,9 +159,13 @@
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatItems(ids) {
|
||||
if (!ids || ids.length === 0) return [];
|
||||
return ids.map(id => ({ id }));
|
||||
formatResults(items) {
|
||||
if (!items || items.length === 0) return [];
|
||||
return items.map(item =>
|
||||
typeof item === 'object'
|
||||
? { id: item.id ?? item.external_id, name: item.name ?? '', detail: item.error ?? item.detail ?? '' }
|
||||
: { id: item, name: '', detail: '' }
|
||||
);
|
||||
},
|
||||
startSync() {
|
||||
this.loading = true;
|
||||
|
||||
@@ -55,9 +55,13 @@
|
||||
<v-card-title class="bg-error text-white">❌ Fallidos ({{ result.failed_products?.length || 0 }})</v-card-title>
|
||||
<v-card-text>
|
||||
<v-data-table
|
||||
:items="formatItems(result.failed_products)"
|
||||
:items="formatResults(result.failed_products)"
|
||||
density="compact"
|
||||
:headers="[{ title: 'ID', key: 'id' }]"
|
||||
:headers="[
|
||||
{ title: 'ID', key: 'id' },
|
||||
{ title: 'Nombre', key: 'name' },
|
||||
{ title: 'Detalle', key: 'detail' }
|
||||
]"
|
||||
></v-data-table>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
@@ -68,9 +72,12 @@
|
||||
<v-card-title class="bg-success text-white">✅ Creados ({{ result.created_products?.length || 0 }})</v-card-title>
|
||||
<v-card-text>
|
||||
<v-data-table
|
||||
:items="formatItems(result.created_products)"
|
||||
:items="formatResults(result.created_products)"
|
||||
density="compact"
|
||||
:headers="[{ title: 'ID', key: 'id' }]"
|
||||
:headers="[
|
||||
{ title: 'ID', key: 'id' },
|
||||
{ title: 'Nombre', key: 'name' }
|
||||
]"
|
||||
></v-data-table>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
@@ -81,9 +88,13 @@
|
||||
<v-card-title class="bg-info text-white">🔄 Actualizados ({{ result.updated_products?.length || 0 }})</v-card-title>
|
||||
<v-card-text>
|
||||
<v-data-table
|
||||
:items="formatItems(result.updated_products)"
|
||||
:items="formatResults(result.updated_products)"
|
||||
density="compact"
|
||||
:headers="[{ title: 'ID', key: 'id' }]"
|
||||
:headers="[
|
||||
{ title: 'ID', key: 'id' },
|
||||
{ title: 'Nombre', key: 'name' },
|
||||
{ title: 'Detalle', key: 'detail' }
|
||||
]"
|
||||
></v-data-table>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
@@ -94,9 +105,12 @@
|
||||
<v-card-title class="bg-grey-lighten-1">⏭️ Sin cambios ({{ result.untouched_products?.length || 0 }})</v-card-title>
|
||||
<v-card-text>
|
||||
<v-data-table
|
||||
:items="formatItems(result.untouched_products)"
|
||||
:items="formatResults(result.untouched_products)"
|
||||
density="compact"
|
||||
:headers="[{ title: 'ID', key: 'id' }]"
|
||||
:headers="[
|
||||
{ title: 'ID', key: 'id' },
|
||||
{ title: 'Nombre', key: 'name' }
|
||||
]"
|
||||
></v-data-table>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
@@ -129,9 +143,13 @@
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatItems(ids) {
|
||||
if (!ids || ids.length === 0) return [];
|
||||
return ids.map(id => ({ id }));
|
||||
formatResults(items) {
|
||||
if (!items || items.length === 0) return [];
|
||||
return items.map(item =>
|
||||
typeof item === 'object'
|
||||
? { id: item.id ?? item.external_id, name: item.name ?? '', detail: item.error ?? item.detail ?? '' }
|
||||
: { id: item, name: '', detail: '' }
|
||||
);
|
||||
},
|
||||
startSync() {
|
||||
this.loading = true;
|
||||
|
||||
@@ -51,9 +51,13 @@
|
||||
<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)"
|
||||
:items="formatSalesResults(result.failed)"
|
||||
density="compact"
|
||||
:headers="[{ title: 'ID', key: 'id' }]"
|
||||
:headers="[
|
||||
{ title: 'ID', key: 'id' },
|
||||
{ title: 'Código', key: 'code' },
|
||||
{ title: 'Detalle', key: 'detail' }
|
||||
]"
|
||||
></v-data-table>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
@@ -64,9 +68,12 @@
|
||||
<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)"
|
||||
:items="formatSalesResults(result.successful)"
|
||||
density="compact"
|
||||
:headers="[{ title: 'ID', key: 'id' }]"
|
||||
:headers="[
|
||||
{ title: 'ID', key: 'id' },
|
||||
{ title: 'Código', key: 'code' }
|
||||
]"
|
||||
></v-data-table>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
@@ -99,9 +106,13 @@
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatItems(ids) {
|
||||
if (!ids || ids.length === 0) return [];
|
||||
return ids.map(id => ({ id }));
|
||||
formatSalesResults(items) {
|
||||
if (!items || items.length === 0) return [];
|
||||
return items.map(item =>
|
||||
typeof item === 'object'
|
||||
? { id: item.id, code: item.code ?? '', detail: item.error ?? '' }
|
||||
: { id: item, code: '', detail: '' }
|
||||
);
|
||||
},
|
||||
startSync() {
|
||||
this.loading = true;
|
||||
|
||||
@@ -24,6 +24,7 @@ const ADMIN_ROUTES = [
|
||||
'/admin/products',
|
||||
'/admin/catalog-sales',
|
||||
'/admin/catalogue-images',
|
||||
'/admin/store-settings',
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
|
||||
@@ -27,6 +27,10 @@ class Api {
|
||||
return this.apiImplementation.getSummaryCatalogPurchase(purchaseId);
|
||||
}
|
||||
|
||||
getPublicOrderSummary(code) {
|
||||
return this.apiImplementation.getPublicOrderSummary(code);
|
||||
}
|
||||
|
||||
getPurchasesForReconciliation() {
|
||||
return this.apiImplementation.getPurchasesForReconciliation();
|
||||
}
|
||||
@@ -98,6 +102,14 @@ class Api {
|
||||
deleteCatalogueImage(id) {
|
||||
return this.apiImplementation.deleteCatalogueImage(id);
|
||||
}
|
||||
|
||||
getStoreSettings() {
|
||||
return this.apiImplementation.getStoreSettings();
|
||||
}
|
||||
|
||||
updateStoreSettings(data) {
|
||||
return this.apiImplementation.updateStoreSettings(data);
|
||||
}
|
||||
}
|
||||
|
||||
export default Api;
|
||||
|
||||
@@ -57,6 +57,12 @@ class DjangoApi {
|
||||
return this.getRequest(url);
|
||||
}
|
||||
|
||||
getPublicOrderSummary(code) {
|
||||
const url =
|
||||
this.base + `/don_confiao/resumen_publico/${code}`;
|
||||
return this.getRequest(url);
|
||||
}
|
||||
|
||||
getPurchasesForReconciliation() {
|
||||
const url = this.base + "/don_confiao/purchases/for_reconciliation";
|
||||
return this.getRequest(url);
|
||||
@@ -154,6 +160,18 @@ class DjangoApi {
|
||||
const url = this.base + `/don_confiao/api/catalogue_images/${id}/`;
|
||||
return http.delete(url).then((r) => r.data);
|
||||
}
|
||||
|
||||
getStoreSettings() {
|
||||
const url = this.base + "/don_confiao/api/store_settings";
|
||||
return this.getRequest(url);
|
||||
}
|
||||
|
||||
updateStoreSettings(data) {
|
||||
const url = this.base + "/don_confiao/api/store_settings";
|
||||
return http.patch(url, data, {
|
||||
headers: { 'Content-Type': undefined },
|
||||
}).then((r) => r.data);
|
||||
}
|
||||
}
|
||||
|
||||
export default DjangoApi;
|
||||
|
||||
26
src/stores/settings.js
Normal file
26
src/stores/settings.js
Normal file
@@ -0,0 +1,26 @@
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
export const useSettingsStore = defineStore('settings', {
|
||||
state: () => ({
|
||||
settings: null,
|
||||
loaded: false
|
||||
}),
|
||||
getters: {
|
||||
logo: (state) => state.settings?.logo || null,
|
||||
address: (state) => state.settings?.address || '',
|
||||
latitude: (state) => state.settings?.latitude,
|
||||
longitude: (state) => state.settings?.longitude
|
||||
},
|
||||
actions: {
|
||||
async fetchSettings(api) {
|
||||
if (this.loaded) return this.settings
|
||||
this.settings = await api.getStoreSettings()
|
||||
this.loaded = true
|
||||
return this.settings
|
||||
},
|
||||
setSettings(settings) {
|
||||
this.settings = settings
|
||||
this.loaded = true
|
||||
}
|
||||
}
|
||||
})
|
||||
44
tests/setup.js
Normal file
44
tests/setup.js
Normal file
@@ -0,0 +1,44 @@
|
||||
import { afterEach, vi } from 'vitest'
|
||||
import { enableAutoUnmount } from '@vue/test-utils'
|
||||
|
||||
enableAutoUnmount(afterEach)
|
||||
|
||||
if (!navigator.clipboard) {
|
||||
navigator.clipboard = { writeText: vi.fn().mockResolvedValue(undefined) }
|
||||
}
|
||||
|
||||
if (typeof globalThis.ResizeObserver === 'undefined') {
|
||||
globalThis.ResizeObserver = class ResizeObserver {
|
||||
observe () {}
|
||||
unobserve () {}
|
||||
disconnect () {}
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof globalThis.IntersectionObserver === 'undefined') {
|
||||
globalThis.IntersectionObserver = class IntersectionObserver {
|
||||
observe () {}
|
||||
unobserve () {}
|
||||
disconnect () {}
|
||||
takeRecords () {
|
||||
return []
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof window.matchMedia !== 'function') {
|
||||
window.matchMedia = query => ({
|
||||
matches: false,
|
||||
media: query,
|
||||
onchange: null,
|
||||
addListener: () => {},
|
||||
removeListener: () => {},
|
||||
addEventListener: () => {},
|
||||
removeEventListener: () => {},
|
||||
dispatchEvent: () => false,
|
||||
})
|
||||
}
|
||||
|
||||
afterEach(() => {
|
||||
vi.restoreAllMocks()
|
||||
})
|
||||
47
tests/unit/components/OrderAccessInfo.spec.js
Normal file
47
tests/unit/components/OrderAccessInfo.spec.js
Normal file
@@ -0,0 +1,47 @@
|
||||
import { beforeEach, describe, expect, it } from 'vitest'
|
||||
import { mount } from '@vue/test-utils'
|
||||
import OrderAccessInfo from '@/components/order/OrderAccessInfo.vue'
|
||||
import vuetify from '@/plugins/vuetify'
|
||||
|
||||
function mountAccessInfo (code) {
|
||||
return mount(OrderAccessInfo, {
|
||||
props: { code },
|
||||
global: { plugins: [vuetify] },
|
||||
})
|
||||
}
|
||||
|
||||
describe('OrderAccessInfo', () => {
|
||||
beforeEach(() => {
|
||||
navigator.clipboard.writeText.mockClear()
|
||||
})
|
||||
|
||||
it('muestra el código del pedido', () => {
|
||||
const wrapper = mountAccessInfo('abc123')
|
||||
expect(wrapper.text()).toContain('abc123')
|
||||
})
|
||||
|
||||
it('muestra el link público construido con el código', () => {
|
||||
const wrapper = mountAccessInfo('abc123')
|
||||
expect(wrapper.text()).toContain(
|
||||
`${window.location.origin}/pedido/abc123`
|
||||
)
|
||||
})
|
||||
|
||||
it('copia el link al presionar el botón de copiar link', async () => {
|
||||
const wrapper = mountAccessInfo('abc123')
|
||||
|
||||
await wrapper.find('[data-test="copy-link"]').trigger('click')
|
||||
|
||||
expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
|
||||
`${window.location.origin}/pedido/abc123`
|
||||
)
|
||||
})
|
||||
|
||||
it('copia el código al presionar el botón de copiar código', async () => {
|
||||
const wrapper = mountAccessInfo('abc123')
|
||||
|
||||
await wrapper.find('[data-test="copy-code"]').trigger('click')
|
||||
|
||||
expect(navigator.clipboard.writeText).toHaveBeenCalledWith('abc123')
|
||||
})
|
||||
})
|
||||
90
tests/unit/components/PublicOrderSummary.spec.js
Normal file
90
tests/unit/components/PublicOrderSummary.spec.js
Normal file
@@ -0,0 +1,90 @@
|
||||
import { describe, expect, it } from 'vitest'
|
||||
import { mount } from '@vue/test-utils'
|
||||
import PublicOrderSummary from '@/components/PublicOrderSummary.vue'
|
||||
import OrderAccessInfo from '@/components/order/OrderAccessInfo.vue'
|
||||
import OrderCustomer from '@/components/order/OrderCustomer.vue'
|
||||
import OrderLines from '@/components/order/OrderLines.vue'
|
||||
import OrderTotal from '@/components/order/OrderTotal.vue'
|
||||
import OrderPayment from '@/components/order/OrderPayment.vue'
|
||||
import vuetify from '@/plugins/vuetify'
|
||||
|
||||
const saleData = {
|
||||
id: 5,
|
||||
code: 'abc123',
|
||||
date: '2024-09-02T00:00:00Z',
|
||||
customer: { id: 1, name: 'Camilo' },
|
||||
payment_method: 'CASH',
|
||||
lines: [
|
||||
{ product: { id: 10, name: 'Panela' }, quantity: 2, unit_price: 3000 },
|
||||
{ product: { id: 11, name: 'Arroz' }, quantity: 1, unit_price: 5000 },
|
||||
],
|
||||
type: 'sale',
|
||||
}
|
||||
|
||||
const catalogData = {
|
||||
id: 7,
|
||||
code: 'def456',
|
||||
date: '2024-09-02T00:00:00Z',
|
||||
customer: { id: 1, name: 'Camilo' },
|
||||
lines: [{ product: { id: 10, name: 'Panela' }, quantity: 2, unit_price: 3000 }],
|
||||
type: 'catalog',
|
||||
}
|
||||
|
||||
function mountSummary (props) {
|
||||
return mount(PublicOrderSummary, {
|
||||
props,
|
||||
global: { plugins: [vuetify] },
|
||||
})
|
||||
}
|
||||
|
||||
describe('PublicOrderSummary', () => {
|
||||
it('renderiza el resumen de una venta con sus partes', () => {
|
||||
const wrapper = mountSummary({ purchase: saleData })
|
||||
|
||||
expect(wrapper.findComponent(OrderAccessInfo).exists()).toBe(true)
|
||||
expect(wrapper.findComponent(OrderCustomer).exists()).toBe(true)
|
||||
expect(wrapper.findComponent(OrderLines).exists()).toBe(true)
|
||||
expect(wrapper.findComponent(OrderTotal).exists()).toBe(true)
|
||||
expect(wrapper.findComponent(OrderPayment).exists()).toBe(true)
|
||||
expect(wrapper.text()).toContain('Resumen de la compra')
|
||||
expect(wrapper.text()).toContain('Camilo')
|
||||
expect(wrapper.text()).toContain('Panela')
|
||||
expect(wrapper.text()).toContain('Arroz')
|
||||
expect(wrapper.text().replace(/\u00A0/g, ' ')).toContain('11.000')
|
||||
})
|
||||
|
||||
it('renderiza un pedido de catálogo sin bloque de pago', () => {
|
||||
const wrapper = mountSummary({ purchase: catalogData })
|
||||
|
||||
expect(wrapper.findComponent(OrderAccessInfo).exists()).toBe(true)
|
||||
expect(wrapper.findComponent(OrderCustomer).exists()).toBe(true)
|
||||
expect(wrapper.findComponent(OrderLines).exists()).toBe(true)
|
||||
expect(wrapper.findComponent(OrderTotal).exists()).toBe(true)
|
||||
expect(wrapper.findComponent(OrderPayment).exists()).toBe(false)
|
||||
expect(wrapper.text()).toContain('Resumen del pedido')
|
||||
expect(wrapper.text()).toContain('Camilo')
|
||||
expect(wrapper.text()).toContain('Panela')
|
||||
})
|
||||
|
||||
it('muestra el estado de carga', () => {
|
||||
const wrapper = mountSummary({ purchase: null, loading: true })
|
||||
|
||||
expect(wrapper.text()).toContain('Cargando')
|
||||
})
|
||||
|
||||
it('muestra el mensaje de error cuando lo recibe', () => {
|
||||
const wrapper = mountSummary({
|
||||
purchase: null,
|
||||
error: 'No se encontró un pedido con ese código.',
|
||||
})
|
||||
|
||||
expect(wrapper.text()).toContain('No se encontró un pedido con ese código.')
|
||||
})
|
||||
|
||||
it('no renderiza datos cuando no hay pedido, carga ni error', () => {
|
||||
const wrapper = mountSummary({ purchase: null })
|
||||
|
||||
expect(wrapper.text()).not.toContain('Camilo')
|
||||
expect(wrapper.findComponent(OrderLines).exists()).toBe(false)
|
||||
})
|
||||
})
|
||||
92
tests/unit/pages/pedido.spec.js
Normal file
92
tests/unit/pages/pedido.spec.js
Normal file
@@ -0,0 +1,92 @@
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest'
|
||||
import { flushPromises, mount } from '@vue/test-utils'
|
||||
import { createMemoryHistory, createRouter } from 'vue-router'
|
||||
import PedidoPage from '@/pages/pedido/[[code]].vue'
|
||||
import PublicOrderSummary from '@/components/PublicOrderSummary.vue'
|
||||
import vuetify from '@/plugins/vuetify'
|
||||
|
||||
const saleData = {
|
||||
id: 1,
|
||||
code: 'abc123',
|
||||
date: '2024-09-02T00:00:00Z',
|
||||
customer: { id: 1, name: 'Camilo' },
|
||||
payment_method: 'CASH',
|
||||
lines: [
|
||||
{ product: { id: 10, name: 'Panela' }, quantity: 2, unit_price: 3000 },
|
||||
],
|
||||
type: 'sale',
|
||||
}
|
||||
|
||||
async function mountPage (api, path) {
|
||||
const router = createRouter({
|
||||
history: createMemoryHistory(),
|
||||
routes: [{ path: '/pedido/:code?', component: PedidoPage }],
|
||||
})
|
||||
router.push(path)
|
||||
await router.isReady()
|
||||
const wrapper = mount(PedidoPage, {
|
||||
global: {
|
||||
plugins: [router, vuetify],
|
||||
provide: { api },
|
||||
},
|
||||
})
|
||||
return { router, wrapper }
|
||||
}
|
||||
|
||||
async function waitForRouteParam (router, param, value, timeout = 1000) {
|
||||
const start = Date.now()
|
||||
while (Date.now() - start < timeout) {
|
||||
if (router.currentRoute.value.params[param] === value) return
|
||||
await new Promise(resolve => setTimeout(resolve, 10))
|
||||
}
|
||||
throw new Error(`route param ${param} nunca llegó a ser ${value}`)
|
||||
}
|
||||
|
||||
describe('página pública /pedido', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
})
|
||||
|
||||
it('sin código no consulta la API y muestra el buscador', async () => {
|
||||
const api = { getPublicOrderSummary: vi.fn() }
|
||||
const { wrapper } = await mountPage(api, '/pedido')
|
||||
await flushPromises()
|
||||
|
||||
expect(api.getPublicOrderSummary).not.toHaveBeenCalled()
|
||||
expect(wrapper.text()).toContain('Código')
|
||||
})
|
||||
|
||||
it('con código por URL consulta y muestra el resumen', async () => {
|
||||
const api = { getPublicOrderSummary: vi.fn().mockResolvedValue(saleData) }
|
||||
const { wrapper } = await mountPage(api, '/pedido/abc123')
|
||||
await flushPromises()
|
||||
|
||||
expect(api.getPublicOrderSummary).toHaveBeenCalledWith('abc123')
|
||||
expect(wrapper.findComponent(PublicOrderSummary).props('purchase')).toEqual(saleData)
|
||||
expect(wrapper.text()).toContain('Camilo')
|
||||
})
|
||||
|
||||
it('muestra mensaje de no encontrado cuando el código no existe', async () => {
|
||||
const api = {
|
||||
getPublicOrderSummary: vi.fn().mockRejectedValue({ response: { status: 404 } }),
|
||||
}
|
||||
const { wrapper } = await mountPage(api, '/pedido/zzzzzz')
|
||||
await flushPromises()
|
||||
|
||||
expect(wrapper.findComponent(PublicOrderSummary).props('error')).toContain('No se encontró')
|
||||
})
|
||||
|
||||
it('al consultar un código navega a /pedido/<code> y vuelve a consultar', async () => {
|
||||
const api = { getPublicOrderSummary: vi.fn().mockResolvedValue(saleData) }
|
||||
const { router, wrapper } = await mountPage(api, '/pedido/abc123')
|
||||
await flushPromises()
|
||||
api.getPublicOrderSummary.mockClear()
|
||||
|
||||
await wrapper.find('input').setValue('newcode')
|
||||
await wrapper.find('form').trigger('submit')
|
||||
await waitForRouteParam(router, 'code', 'newcode')
|
||||
|
||||
expect(router.currentRoute.value.params.code).toBe('newcode')
|
||||
expect(api.getPublicOrderSummary).toHaveBeenCalledWith('newcode')
|
||||
})
|
||||
})
|
||||
34
tests/unit/services/django-api.spec.js
Normal file
34
tests/unit/services/django-api.spec.js
Normal file
@@ -0,0 +1,34 @@
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest'
|
||||
|
||||
import http from '@/services/http'
|
||||
import DjangoApi from '@/services/django-api'
|
||||
|
||||
vi.mock('@/services/http', () => ({
|
||||
default: {
|
||||
get: vi.fn(),
|
||||
post: vi.fn(),
|
||||
patch: vi.fn(),
|
||||
put: vi.fn(),
|
||||
delete: vi.fn(),
|
||||
},
|
||||
}))
|
||||
|
||||
describe('DjangoApi.getPublicOrderSummary', () => {
|
||||
beforeEach(() => {
|
||||
vi.stubEnv('VITE_DJANGO_BASE_URL', 'http://backend.test')
|
||||
http.get.mockReset()
|
||||
http.get.mockResolvedValue({ data: { code: 'abc123', type: 'sale' } })
|
||||
})
|
||||
|
||||
it('consulta el resumen público por código en la ruta resumen_publico', async () => {
|
||||
const api = new DjangoApi()
|
||||
|
||||
const result = await api.getPublicOrderSummary('abc123')
|
||||
|
||||
expect(http.get).toHaveBeenCalledTimes(1)
|
||||
expect(http.get).toHaveBeenCalledWith(
|
||||
'http://backend.test/don_confiao/resumen_publico/abc123'
|
||||
)
|
||||
expect(result).toEqual({ code: 'abc123', type: 'sale' })
|
||||
})
|
||||
})
|
||||
34
vitest.config.mjs
Normal file
34
vitest.config.mjs
Normal file
@@ -0,0 +1,34 @@
|
||||
import { fileURLToPath } from 'node:url'
|
||||
import { defineConfig } from 'vitest/config'
|
||||
import Vue from '@vitejs/plugin-vue'
|
||||
import Vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
Vue({
|
||||
template: { transformAssetUrls },
|
||||
}),
|
||||
Vuetify({
|
||||
autoImport: true,
|
||||
styles: {
|
||||
configFile: 'src/styles/settings.scss',
|
||||
},
|
||||
}),
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url)),
|
||||
},
|
||||
},
|
||||
test: {
|
||||
environment: 'jsdom',
|
||||
globals: false,
|
||||
setupFiles: ['./tests/setup.js'],
|
||||
include: ['tests/**/*.spec.js'],
|
||||
server: {
|
||||
deps: {
|
||||
inline: ['vuetify'],
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user