Attachments

This project was generated using Angular CLI version 20.1.0.

Code scaffolding

Angular CLI includes powerful code scaffolding tools. To generate a new component, run:

ng generate component component-name
# Attachments — Componente y utilidades para gestionar anexos

Esta librería contiene el componente `CbmAttachmentsComponent` y varios subcomponentes (vistas en lista y cuadrícula, botones e iconos) para mostrar, subir, descargar y eliminar anexos asociados a una entidad (colección + evento) en la plataforma CBM.

Resumen rápido
- Selector: `cbm-attachments` (standalone)
- Subcomponentes incluidos: `GridViewComponent`, `ListViewComponent`, `ButtonItemComponent`, `ButtonsComponent` y varios iconos.
- Integra `CbmDropzoneComponent` para selección/arrastre de ficheros.
- Usa el repositorio `CbmUploadRepository` para las operaciones HTTP de anexos (list, upload, delete, download).

Principales responsabilidades
- Mostrar anexos asociados a una colección (paginación y cambio de vista: grid / list).
- Permitir subir un anexo con comentario asociado.
- Descargar y eliminar anexos.
- Validar tipos de archivo permitidos y mostrar notificaciones de estado.

API pública del componente principal

Inputs (requeridos):
- `collectionId: string` — identificador de la colección a la que pertenecen los anexos.
- `collectionName: string` — nombre de la colección (opcionalmente usado para filtros o UI).
- `event: string` — nombre del evento/acción para filtrar anexos.
- `uploadEvent: string` — evento que se envía al servidor al subir el anexo.

Estado y señales (internas visibles en la implementación):
- `isFormVisible` — controla si el formulario de subida está visible.
- `statusOfFetchAttachments` | `statusOfSaveAttachment` | `statusOfDeleteAttachment` — estado de las operaciones ('init'|'loading'|'success'|'failed').
- `attachments: CbmUploadModel.ListAnnexeResponse.Item[]` — lista actual de anexos.
- `attachmentsPagination` — paginación interna (page, size, totalPages, totalRecords).

Acciones principales (métodos expuestos en la implementación):
- `fetchAttachments()` — solicita al repositorio la lista de anexos según `collectionId`, `collectionName`, `event` y la paginación actual.
- `saveAttachment()` — construye un FormData con el fichero y metadatos, y llama a `uploadRepository.uploadAnnexe`.
- `onDeletePress(attachment)` — elimina un anexo llamando a `uploadRepository.deleteAnnexe` y actualiza la lista local.
- `onDownloadPress(attachment)` — descarga el fichero realizando fetch sobre la URL del anexo y guardando el blob.

Modelos y tipos relevantes
- El paquete usa los tipos del namespace `CbmUploadModel` (definidos en `projects/upload-repository/src/lib/upload.model.ts`), en particular:
   - `ListAnnexeParams`, `ListAnnexeResponse`, y la estructura `ListAnnexeResponse.Item`.

Subcomponentes y responsabilidades
- `GridViewComponent` — renderiza los anexos en una cuadrícula con acciones por item (ver, descargar, borrar).
- `ListViewComponent` — renderiza los anexos en formato lista/tabular.
- `ButtonsComponent` y `ButtonItemComponent` — control de vistas y botón para mostrar/ocultar formulario de subida.

Integración con `CbmDropzoneComponent`
- El componente integra `CbmDropzoneComponent` para la selección/arrastre de ficheros. El handler `onFileSelected(files: FileList)` valida tipos MIME aceptados y rellena el formulario.
- Tipos válidos por defecto (implementados en la librería): `pdf`, `zip`, `xlsx`, `docx`, `png`, `jpg`, `jpeg`.

Ejemplo de uso (plantilla)

```html
<cbm-attachments
   [collectionId]="myCollectionId"
   [collectionName]="'invoices'"
   [event]="'invoice'"
   [uploadEvent]="'invoice_upload'"
></cbm-attachments>

Notas de comportamiento

• El componente gestiona la UX de subida (formulario modal / panel), muestra loaders y notificaciones usando CbmNotificationService.
• Para la descarga usa fetch(attachment.url) y crea un Blob para forzar la descarga; por tanto las URLs deben ser accesibles desde el navegador (CORS configurado).
• Se recomienda controlar permisos en el backend: el componente no implementa verificación de permisos, solo solicita las operaciones mediante el repositorio.

Pruebas y desarrollo

• En projects/attachments/src/lib existen ficheros .spec.ts para componentes y subcomponentes (GridView, ListView, icons). Úsalos como base para nuevas pruebas.
• Para probar el flujo de upload en unit tests, usa HttpClientTestingModule y spyOn/mocks del CbmUploadRepository.

Sugerencias de mejora

• Añadir hooks o eventos para exponer progreso de subida (uploadProgress) si el backend soporta multipart uploads con progress.
• Agregar una previsualización integrada para imágenes antes de subir.

Archivos de referencia

• projects/attachments/src/lib/attachments.component.ts
• projects/attachments/src/lib/components/grid-view y .../list-view

Si quieres, genero un ejemplo runnable en src/demo o añado un spec de ejemplo que cubra el flujo upload->list->delete.