#40 feat: add catalogue images CRUD and display in product catalog #43

Merged
mono merged 2 commits from feature/40-catalogue-images into main 2026-06-13 18:05:48 -05:00
Owner

Cambios Realizados

Nuevo:

  • CatalogueImagesManagement.vue — Componente CRUD completo para administrar imágenes de
    catálogo:
  • Listado paginado con v-data-table (columnas: ID, Producto, Imagen thumbnail, Subida el, Acciones)
  • Diálogo de creación: selector de producto + upload de imagen
  • Diálogo de edición: cambio de imagen con producto pre-seleccionado
  • Confirmación de eliminación
    • Feedback con v-snackbar
  • admin/catalogue-images.vue — Página admin que renderiza el componente con protección isAdmin

API:

  • api.js + django-api.js: 4 nuevos métodos (getCatalogueImages, createCatalogueImage,
    updateCatalogueImage, deleteCatalogueImage) con FormData para upload multipart
    Catálogo público:
  • catalog.vuefetchProducts() usa product.catalogue_images[0] como imagen principal si existe, con fallback a product.img o imagen estática por defecto

Routing/Navegación:

  • Ruta /admin/catalogue-images protegida en ADMIN_ROUTES
  • Item "Imágenes de Catálogo" en el menú de administración (NavBar.vue)

Lazy Loading

Las imágenes cargan de forma diferida mediante:

  • v-img con v-intersect (IntersectionObserver nativo de Vuetify 3)
  • Paginación: 20 ítems/página en catálogo, 25 por defecto en admin
### Cambios Realizados **Nuevo:** - `CatalogueImagesManagement.vue` — Componente CRUD completo para administrar imágenes de catálogo: - Listado paginado con `v-data-table` (columnas: ID, Producto, Imagen thumbnail, Subida el, Acciones) - Diálogo de creación: selector de producto + upload de imagen - Diálogo de edición: cambio de imagen con producto pre-seleccionado - Confirmación de eliminación - Feedback con `v-snackbar` - `admin/catalogue-images.vue` — Página admin que renderiza el componente con protección `isAdmin` **API:** - `api.js` + `django-api.js`: 4 nuevos métodos (`getCatalogueImages`, `createCatalogueImage`, `updateCatalogueImage`, `deleteCatalogueImage`) con `FormData` para upload multipart **Catálogo público:** - `catalog.vue` — `fetchProducts()` usa `product.catalogue_images[0]` como imagen principal si existe, con fallback a `product.img` o imagen estática por defecto **Routing/Navegación:** - Ruta `/admin/catalogue-images` protegida en `ADMIN_ROUTES` - Item "Imágenes de Catálogo" en el menú de administración (`NavBar.vue`) ### Lazy Loading Las imágenes cargan de forma diferida mediante: - `v-img` con `v-intersect` (IntersectionObserver nativo de Vuetify 3) - Paginación: 20 ítems/página en catálogo, 25 por defecto en admin
mono self-assigned this 2026-06-13 16:47:55 -05:00
mono added 1 commit 2026-06-13 16:47:55 -05:00
mono added 1 commit 2026-06-13 17:59:43 -05:00
mono merged commit bb26f55829 into main 2026-06-13 18:05:48 -05:00
mono deleted branch feature/40-catalogue-images 2026-06-13 18:05:48 -05:00
Sign in to join this conversation.
No Reviewers
No Label
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: OneTeam/don_confiao_frontend#43
No description provided.