# Export, Preview Panel & Dialogs # Export, Preview Panel & Dialogs
Relevant source files The following files were used as context for generating this wiki page: - [src/lib/components/entity-list-table/components/CellRenderer.svelte](src/lib/components/entity-list-table/components/CellRenderer.svelte) - [src/lib/components/entity-list-table/components/EntityListTableDialogs.svelte](src/lib/components/entity-list-table/components/EntityListTableDialogs.svelte) - [src/lib/components/entity-list-table/components/PreviewPanelWrapper.svelte](src/lib/components/entity-list-table/components/PreviewPanelWrapper.svelte) - [src/lib/components/entity-list-table/composables/useClientSelection.svelte.ts](src/lib/components/entity-list-table/composables/useClientSelection.svelte.ts) - [src/lib/components/entity-list-table/composables/useDeletionFilter.svelte.ts](src/lib/components/entity-list-table/composables/useDeletionFilter.svelte.ts) - [src/lib/components/entity-list-table/composables/useExport.svelte.ts](src/lib/components/entity-list-table/composables/useExport.svelte.ts) - [src/lib/components/entity-list-table/composables/useFilterPersistence.svelte.ts](src/lib/components/entity-list-table/composables/useFilterPersistence.svelte.ts) - [src/lib/components/entity-list-table/composables/useFilters.svelte.ts](src/lib/components/entity-list-table/composables/useFilters.svelte.ts) - [src/lib/components/entity-list-table/composables/useKeyboardNavigation.svelte.ts](src/lib/components/entity-list-table/composables/useKeyboardNavigation.svelte.ts) - [src/lib/components/entity-list-table/composables/usePreviewPanel.svelte.ts](src/lib/components/entity-list-table/composables/usePreviewPanel.svelte.ts) - [src/lib/components/entity-list-table/composables/useScrollPreservation.svelte.ts](src/lib/components/entity-list-table/composables/useScrollPreservation.svelte.ts) - [src/lib/components/entity-list-table/composables/useStickyColumns.svelte.ts](src/lib/components/entity-list-table/composables/useStickyColumns.svelte.ts) - [src/lib/components/entity-list-table/dialogs/DeleteDialog.svelte](src/lib/components/entity-list-table/dialogs/DeleteDialog.svelte) - [src/lib/components/entity-list-table/dialogs/DuplicateDialog.svelte](src/lib/components/entity-list-table/dialogs/DuplicateDialog.svelte) - [src/lib/components/entity-list-table/dialogs/ExportDialog.svelte](src/lib/components/entity-list-table/dialogs/ExportDialog.svelte) - [src/lib/components/entity-list-table/dialogs/ExportPreviewDialog.svelte](src/lib/components/entity-list-table/dialogs/ExportPreviewDialog.svelte) - [src/lib/components/entity-list-table/dialogs/HtmlExportDialog.svelte](src/lib/components/entity-list-table/dialogs/HtmlExportDialog.svelte) - [src/lib/components/entity-list-table/dialogs/RestoreDialog.svelte](src/lib/components/entity-list-table/dialogs/RestoreDialog.svelte) - [src/lib/components/entity-list-table/dialogs/index.ts](src/lib/components/entity-list-table/dialogs/index.ts) - [src/lib/components/entity-list-table/panels/index.ts](src/lib/components/entity-list-table/panels/index.ts) - [src/lib/components/entity-list-table/toolbar/FilterBar.svelte](src/lib/components/entity-list-table/toolbar/FilterBar.svelte) - [src/lib/components/entity-list-table/toolbar/SelectionCounter.svelte](src/lib/components/entity-list-table/toolbar/SelectionCounter.svelte) - [src/lib/components/entity-list-table/toolbar/index.ts](src/lib/components/entity-list-table/toolbar/index.ts) - [src/lib/components/entity-list-table/types.ts](src/lib/components/entity-list-table/types.ts)
This section details the auxiliary systems of the `EntityListTable` that handle data extraction, record-level inspection, and confirmation workflows. These features are implemented using Svelte 5 runes for reactive state management and are decoupled into composables for maintainability. ## Export System The export system provides a multi-modal interface for extracting data from the backend in various formats (XLSX, CSV, HTML, PDF, Email). It is driven by the `useExport` composable. ### `useExport` Composable The `useExport` composable manages the state and logic for both file-based exports and HTML-based previews. It constructs complex query parameters for the backend, including search terms, sorting, and serialized filters [src/lib/components/entity-list-table/composables/useExport.svelte.ts:145-215](). **Key Export Modes:** 1. **File Export (XLSX/CSV):** Triggers a direct download from the backend API. 2. **HTML Preview:** Fetches an HTML representation of the selected data for viewing in a full-screen dialog [src/lib/components/entity-list-table/composables/useExport.svelte.ts:285-300](). 3. **PDF Generation:** Converts the HTML preview into a PDF blob for browser viewing [src/lib/components/entity-list-table/composables/useExport.svelte.ts:317-340](). 4. **Email Preparation:** Formats the data for email clients and provides a "Copy to Clipboard" function for the HTML content [src/lib/components/entity-list-table/composables/useExport.svelte.ts:342-365](). ### Export UI Components * **`ExportDialog`**: The initial entry point where users select the file type (XLSX/CSV) and the scope (Selected vs. All) [src/lib/components/entity-list-table/dialogs/ExportDialog.svelte:1-106](). * **`HtmlExportDialog`**: A confirmation dialog specifically for HTML-based exports, typically used when generating reports [src/lib/components/entity-list-table/dialogs/HtmlExportDialog.svelte:35-67](). * **`ExportPreviewDialog`**: A full-screen `DialogBordered` component containing a `Dock` for switching between HTML, PDF, and Email views [src/lib/components/entity-list-table/dialogs/ExportPreviewDialog.svelte:51-81](). It uses an `iframe` with the `srcdoc` attribute to render the raw HTML returned by the server [src/lib/components/entity-list-table/dialogs/ExportPreviewDialog.svelte:86-91](). **Sources:** [src/lib/components/entity-list-table/composables/useExport.svelte.ts:6-53](), [src/lib/components/entity-list-table/dialogs/ExportPreviewDialog.svelte:16-48](), [src/lib/components/entity-list-table/dialogs/HtmlExportDialog.svelte:12-32](). --- ## Record Preview Panel The Preview Panel allows users to inspect a specific record's details without navigating away from the list. It supports side-by-side viewing with the table and keyboard-driven navigation. ### `usePreviewPanel` Composable This composable tracks the currently active record (`previewRow`) and its index within the visible set [src/lib/components/entity-list-table/composables/usePreviewPanel.svelte.ts:30-34](). It provides `navigatePreview('next' | 'prev')` logic to cycle through rows [src/lib/components/entity-list-table/composables/usePreviewPanel.svelte.ts:64-85](). ### `PreviewPanelWrapper` This component manages the layout transition when the preview is opened. It includes a resizable handle that allows users to adjust the split between the table and the preview panel [src/lib/components/entity-list-table/components/PreviewPanelWrapper.svelte:205-210](). * **Persistence:** The panel's width and the last opened `rowKey` are persisted in `sessionStorage` per entity [src/lib/components/entity-list-table/components/PreviewPanelWrapper.svelte:102-111](). * **Navigation:** It automatically handles page changes. If a user is at the last record of page 1 and navigates "Next", the wrapper triggers `onPageChange` and resets the preview to the first record of page 2 [src/lib/components/entity-list-table/components/PreviewPanelWrapper.svelte:183-198](). ### Natural Language to Code Entity Space: Preview Logic | System Name | Code Entity | File | | :--- | :--- | :--- | | **Preview State** | `previewPanelOpen` | [usePreviewPanel.svelte.ts:33]() | | **Row Selection** | `openPreview(row)` | [usePreviewPanel.svelte.ts:36]() | | **Panel Resizing** | `startResize(e)` | [PreviewPanelWrapper.svelte:124]() | | **Version History** | `loadVersionHistory(row)` | [PreviewPanelWrapper.svelte:144]() | | **Navigation Guard** | `canNavigateNext` | [usePreviewPanel.svelte.ts:87]() | **Sources:** [src/lib/components/entity-list-table/composables/usePreviewPanel.svelte.ts:10-23](), [src/lib/components/entity-list-table/components/PreviewPanelWrapper.svelte:52-84](). --- ## Entity Dialogs The `EntityListTableDialogs` component serves as a registry for all confirmation dialogs used by the table. It centralizes the binding between composable states (e.g., `rowActionsComposable.isDeleting`) and the UI [src/lib/components/entity-list-table/components/EntityListTableDialogs.svelte:59-146](). ### Standard Dialog Types * **`DeleteDialog` / `BulkDeleteDialog`**: Confirmations for single or multiple record deletions. * **`RestoreDialog` / `BulkRestoreDialog`**: Used when the deletion filter is active to recover soft-deleted records. * **`DuplicateDialog`**: Confirms the duplication of a record, often used in CRM or Product modules. ### Implementation Pattern All dialogs follow a consistent pattern using the `DialogBordered` primitive, accepting an `open` bindable and `onConfirm`/`onCancel` callbacks. ```mermaid graph TD subgraph "Composables" A["useRowActions"] B["useBulkActions"] C["useExport"] end subgraph "EntityListTableDialogs.svelte" D["DeleteDialog"] E["BulkDeleteDialog"] F["ExportDialog"] G["DuplicateDialog"] end A -- "isDeleting" --> D B -- "isDeleting" --> E C -- "exportOpen" --> F A -- "isDuplicating" --> G ``` **Sources:** [src/lib/components/entity-list-table/components/EntityListTableDialogs.svelte:4-29](), [src/lib/components/entity-list-table/dialogs/index.ts:1-9](). --- ## Table Footer & Pagination The `EntityListTableFooter` (referenced via props in `PreviewPanelWrapper`) manages the pagination state and selection summaries. * **Pagination:** Controlled via `page` and `pageSize` props. It interacts with the `PreviewPanelWrapper` to ensure navigation remains seamless across page boundaries [src/lib/components/entity-list-table/components/PreviewPanelWrapper.svelte:183-198](). * **Selection Summary:** When rows are selected, the `SelectionCounter` component (usually in the toolbar but synced with the footer's data) displays the count and provides a toggle for "Show Selected Only" mode. ### Sticky Columns Support The footer and table body utilize `useStickyColumns` to ensure that action columns and checkboxes remain visible during horizontal scrolling [src/lib/components/entity-list-table/composables/useStickyColumns.svelte.ts:4-8](). The `updateStickyOffsets` function calculates the `left` CSS property for each sticky cell based on the width of preceding columns [src/lib/components/entity-list-table/composables/useStickyColumns.svelte.ts:54-91](). **Sources:** [src/lib/components/entity-list-table/composables/useStickyColumns.svelte.ts:132-141](), [src/lib/components/entity-list-table/components/PreviewPanelWrapper.svelte:36-40](). ---