# Card View: Managed PagingListPage

The `card/managed/PagingCardPage.svelte` component is the card-based equivalent of the managed data table. It automates the process of fetching, paginating, and displaying data in a flexible card layout.

## Purpose

Use this component when you need to display a large, paginated dataset as a series of cards instead of a table. It handles all the background logic, including:

-   Fetching data from a `PagedDataService`.
-   Managing loading, error, and empty states.
-   Handling pagination controls.
-   Providing a simple interface for rendering each card.

## How to Use

The component is almost identical in usage to its data-table counterpart, relying on a service for data and a slot for rendering.

1.  **Create a `PagingDataService`**

    ```ts
    // src/services/TenantService.ts
    import { PagingDataService } from '@ticatec/app-data-service';

    export default class TenantService extends PagingDataService {
        constructor() {
            super('/api/tenants');
        }
    }

    export const service = new TenantService();
    ```

2.  **Create a `PagedDataManager`**

    ```ts
    // src/managers/TenantManager.ts
    import { PagedDataManager } from '@ticatec/app-data-manager';
    import { service } from '../services/TenantService';

    export default class TenantManager extends PagedDataManager {
        constructor() {
            super(service, 'id');
        }
    }
    ```

3.  **Use the Component in Your Page**

    ```svelte
    <script lang="ts">
        import PagingListPage from '@ticatec/uniface-pro-components/card/managed/PagingCardPage';
        import TenantManager from '../managers/TenantManager';
        import TenantCard from './TenantCard.svelte'; // Your custom card component

        const dataManager = new TenantManager();

        let page$attrs = {
            title: "Managed Tenant Cards"
        };

        // Configure the render object to use your card component
        let render = {
            component: TenantCard,
            props: {} // Any additional props to pass to the card
        };

        let criteria = {}; // Search criteria
    </script>

    <PagingListPage
        {dataManager}
        {page$attrs}
        {render}
        {criteria}
    >
        {#snippet searchPanel()}
            <!-- Your search form controls -->
        {/snippet}
    </PagingListPage>
    ```

## Component Props

-   `dataManager: PagedDataManager`: An instance of your data manager. **(Required)**
-   `page$attrs: object`: Page attributes containing title and other page-level settings. **(Required)**
-   `render: object`: Configuration object with `component` and `props` for rendering cards. **(Required)**
-   `criteria: object`: Search criteria object that gets passed to the data manager. **(Required)**
-   `gap?: number`: Gap between cards in pixels. Defaults to `8`.
-   `canBeClosed?: boolean`: Whether the page can be closed. Defaults to `false`.
-   `actions?: ButtonActions`: Array of action buttons for the search panel.

## Snippets

-   `searchPanel?: Snippet`: Optional snippet for custom search form controls.
-   `advancedPanel?: Snippet`: Optional snippet for advanced search criteria.

## Features

-   Automatic data fetching using PagedDataManager
-   Built-in pagination controls
-   Server-side data loading and searching
-   Loading and error state management  
-   Flexible card-based layout with configurable gap
-   Integrated search panel with FilterPanel
-   Responsive design with action bars
-   Automatic card rendering using the render configuration

## Instance methods (via `bind:this`)

-   `doSearch(reset?: boolean)`: re-run the search; `reset=true` resets the criteria first. Searching returns to page 1.
-   `refresh()`: reload data with the current criteria and current page number — use it after create/update/delete to stay on the current page.

There is also an `onError?: (ex: any) => void` prop: invoked when a post-initial-load operation fails; when omitted the error message is shown in a MessageBox by default.