Attachment Thumbnail Grid
Component Detail
Description
Displays a compact grid of attachment thumbnails within the activity detail view. Renders image previews for JPEG and PNG files and a document icon for PDFs. Tapping a thumbnail opens the preview modal; a delete icon appears for coordinators with edit rights.
attachment-thumbnail-grid
Summaries
The Attachment Thumbnail Grid gives coordinators and reviewers immediate visual access to the supporting documents and images attached to an activity, directly within the activity detail view. Rather than navigating to a separate file list, users see a compact, scannable grid of thumbnails that confirms at a glance that required evidence has been captured. For coordinators with edit rights, inline delete actions allow quick correction of mistakenly attached files without leaving the context of the activity. This reduces the friction of evidence management, improves the quality of documentation submitted for reporting, and supports the audit readiness of activity records — all without requiring users to leave the mobile application or switch to a desktop workflow.
Low complexity mobile UI component with dependencies on attachment-signed-url-service for fetching time-limited image URLs and activity-attachment-repository for the attachment list. Both dependencies must be available before end-to-end testing of the grid is possible. The component's complexity is low because it is a pure rendering widget — signed URL fetching and repository queries are delegated to dependencies. Key testing scenarios: empty state display when no attachments exist, correct icon rendering for PDF vs.
image attachments, signed URL fetch on thumbnail tap (including error/timeout handling), and delete action visibility gated by user role. The role-based delete gate must be consistent with the permission model used elsewhere in the app — confirm the role check mechanism with the auth team. Refresh after upload (refreshAfterUpload()) requires coordination with the attachment picker's post-upload callback.
Flutter mobile widget rendering a wrap or grid layout of AttachmentThumbnail sub-widgets. renderGrid() receives a list of attachment model objects containing id, fileName, fileSizeBytes, and mimeType. For JPEG/PNG attachments, thumbnails are rendered using a CachedNetworkImage widget — the signed URL is fetched lazily on tap via attachment-signed-url-service to avoid loading all URLs on grid render. PDF attachments render a static document icon with fileName and fileSizeBytes as subtitle text.
onThumbnailTapped() triggers a signed URL fetch and opens the preview modal with the resolved URL. onDeleteRequested() is only rendered when the calling context provides an isEditable flag, delegating the actual delete call to the parent or a provider. refreshAfterUpload() should trigger a re-query via activity-attachment-repository. Cache invalidation after delete must clear the signed URL cache entry for the deleted attachment ID to prevent stale preview attempts.
Responsibilities
- Render thumbnail or document icon per attachment
- Show attachment file name and size as subtitle
- Trigger signed URL fetch on thumbnail tap
- Expose delete action gated by user role
Interfaces
renderGrid(attachments)
onThumbnailTapped(attachmentId)
onDeleteRequested(attachmentId)
refreshAfterUpload()
showEmptyState()
Relationships
Dependencies (2)
Components this component depends on
Related Data Entities (1)
Data entities managed by this component
Used Integrations (1)
External integrations and APIs this component relies on