@jigx/mdk/dist/template-app-1/screens/expense-list-screen.js

Jigx Mobile Development Kit - SDK for building Jigx applications

/**
 * Expense list screen with category summaries and full transaction history.
 * Displays all expenses with filtering and grouping capabilities.
 * @param app - Application builder instance
 * @returns Configured expense list screen
 */
export function expenseListScreen(app) {
    const screen = app.addScreen.default('expense-list', 'All Expenses');
    // Configure category summary datasource
    const expenseSummary = 'expenses-summary';
    screen.addDatasource.sqlite(expenseSummary, 'dynamic')
        .entity('default/expenses')
        .query(/* sql */ `
      SELECT 
        json_extract(data, '$.category') AS category,
        SUM(json_extract(data, '$.amount')) AS total_amount,
        COUNT(1) AS count
      FROM [default/expenses]
      GROUP BY json_extract(data, '$.category')
      ORDER BY total_amount DESC
    `);
    // Category summary card
    const summaryCard = screen.addControl
        .card({ instanceId: 'summary-card' });
    summaryCard.addControl.textField({ instanceId: 'summary-title' })
        .label('Summary by Category')
        .value('Category Breakdown');
    const summaryList = summaryCard.addControl.list({ instanceId: 'summary-list' })
        .data(expenseSummary); // Bind to datasourceId
    summaryList.addControl.listItem({ instanceId: 'summary-item' })
        .title('=@ctx.current.item.category')
        .subtitle('=$formatCurrency(@ctx.current.item.total_amount) & " • " & @ctx.current.item.count & " expenses"');
    // Main expense list
    const list = screen.addControl.list('expense-list')
        .data('data-expenses'); // Bind to global datasourceId
    list.addControl.listItem({ instanceId: 'expense-item' })
        .title('=@ctx.current.item.title')
        .subtitle('=@ctx.current.item.category & " • " & @ctx.current.item.date')
        .description('=$formatCurrency(@ctx.current.item.amount)')
        .onPress
        .goto('edit-expense')
        .parameter('expenseId', '=@ctx.current.item.id');
    // Bottom panel actions
    const buttons = screen.bottomPanel.buttons(1);
    buttons.add.goto('Add New', 'add-expense');
    return screen;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXhwZW5zZS1saXN0LXNjcmVlbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3RlbXBsYXRlLWFwcC0xL3NjcmVlbnMvZXhwZW5zZS1saXN0LXNjcmVlbi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFQTs7Ozs7R0FLRztBQUNILE1BQU0sVUFBVSxpQkFBaUIsQ0FBQyxHQUF1QjtJQUN2RCxNQUFNLE1BQU0sR0FBRyxHQUFHLENBQUMsU0FBUyxDQUFDLE9BQU8sQ0FBQyxjQUFjLEVBQUUsY0FBYyxDQUFDLENBQUE7SUFFcEUsd0NBQXdDO0lBQ3hDLE1BQU0sY0FBYyxHQUFHLGtCQUFrQixDQUFBO0lBQ3pDLE1BQU0sQ0FBQyxhQUFhLENBQUMsTUFBTSxDQUFDLGNBQWMsRUFBRSxTQUFTLENBQUM7U0FDbkQsTUFBTSxDQUFDLGtCQUFrQixDQUFDO1NBQzFCLEtBQUssQ0FBQyxTQUFTLENBQUE7Ozs7Ozs7O0tBUWYsQ0FBQyxDQUFBO0lBRUosd0JBQXdCO0lBQ3hCLE1BQU0sV0FBVyxHQUFHLE1BQU0sQ0FBQyxVQUFVO1NBQ2xDLElBQUksQ0FBQyxFQUFFLFVBQVUsRUFBRSxjQUFjLEVBQUUsQ0FBQyxDQUFBO0lBRXZDLFdBQVcsQ0FBQyxVQUFVLENBQUMsU0FBUyxDQUFDLEVBQUUsVUFBVSxFQUFFLGVBQWUsRUFBRSxDQUFDO1NBQzlELEtBQUssQ0FBQyxxQkFBcUIsQ0FBQztTQUM1QixLQUFLLENBQUMsb0JBQW9CLENBQUMsQ0FBQTtJQUU5QixNQUFNLFdBQVcsR0FBRyxXQUFXLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxFQUFFLFVBQVUsRUFBRSxjQUFjLEVBQUUsQ0FBQztTQUM1RSxJQUFJLENBQUMsY0FBYyxDQUFDLENBQUEsQ0FBQyx1QkFBdUI7SUFFL0MsV0FBVyxDQUFDLFVBQVUsQ0FBQyxRQUFRLENBQUMsRUFBRSxVQUFVLEVBQUUsY0FBYyxFQUFFLENBQUM7U0FDNUQsS0FBSyxDQUFDLDZCQUE2QixDQUFDO1NBQ3BDLFFBQVEsQ0FBQyxrR0FBa0csQ0FBQyxDQUFBO0lBRS9HLG9CQUFvQjtJQUNwQixNQUFNLElBQUksR0FBRyxNQUFNLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxjQUFjLENBQUM7U0FDaEQsSUFBSSxDQUFDLGVBQWUsQ0FBQyxDQUFBLENBQUMsOEJBQThCO0lBRXZELElBQUksQ0FBQyxVQUFVLENBQUMsUUFBUSxDQUFDLEVBQUUsVUFBVSxFQUFFLGNBQWMsRUFBRSxDQUFDO1NBQ3JELEtBQUssQ0FBQywwQkFBMEIsQ0FBQztTQUNqQyxRQUFRLENBQUMsOERBQThELENBQUM7U0FDeEUsV0FBVyxDQUFDLDRDQUE0QyxDQUFDO1NBQ3pELE9BQU87U0FDTCxJQUFJLENBQUMsY0FBYyxDQUFDO1NBQ3BCLFNBQVMsQ0FBQyxXQUFXLEVBQUUsdUJBQXVCLENBQUMsQ0FBQTtJQUVwRCx1QkFBdUI7SUFDdkIsTUFBTSxPQUFPLEdBQUcsTUFBTSxDQUFDLFdBQVcsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUE7SUFDN0MsT0FBTyxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsU0FBUyxFQUFFLGFBQWEsQ0FBQyxDQUFBO0lBRTFDLE9BQU8sTUFBTSxDQUFBO0FBQ2YsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFwcGxpY2F0aW9uQnVpbGRlciwgRGVmYXVsdFNjcmVlbkJ1aWxkZXIgfSBmcm9tICcuLi8uLi9zcmMnXG5cbi8qKlxuICogRXhwZW5zZSBsaXN0IHNjcmVlbiB3aXRoIGNhdGVnb3J5IHN1bW1hcmllcyBhbmQgZnVsbCB0cmFuc2FjdGlvbiBoaXN0b3J5LlxuICogRGlzcGxheXMgYWxsIGV4cGVuc2VzIHdpdGggZmlsdGVyaW5nIGFuZCBncm91cGluZyBjYXBhYmlsaXRpZXMuXG4gKiBAcGFyYW0gYXBwIC0gQXBwbGljYXRpb24gYnVpbGRlciBpbnN0YW5jZVxuICogQHJldHVybnMgQ29uZmlndXJlZCBleHBlbnNlIGxpc3Qgc2NyZWVuXG4gKi9cbmV4cG9ydCBmdW5jdGlvbiBleHBlbnNlTGlzdFNjcmVlbihhcHA6IEFwcGxpY2F0aW9uQnVpbGRlcik6IERlZmF1bHRTY3JlZW5CdWlsZGVyIHtcbiAgY29uc3Qgc2NyZWVuID0gYXBwLmFkZFNjcmVlbi5kZWZhdWx0KCdleHBlbnNlLWxpc3QnLCAnQWxsIEV4cGVuc2VzJylcblxuICAvLyBDb25maWd1cmUgY2F0ZWdvcnkgc3VtbWFyeSBkYXRhc291cmNlXG4gIGNvbnN0IGV4cGVuc2VTdW1tYXJ5ID0gJ2V4cGVuc2VzLXN1bW1hcnknXG4gIHNjcmVlbi5hZGREYXRhc291cmNlLnNxbGl0ZShleHBlbnNlU3VtbWFyeSwgJ2R5bmFtaWMnKVxuICAgIC5lbnRpdHkoJ2RlZmF1bHQvZXhwZW5zZXMnKVxuICAgIC5xdWVyeSgvKiBzcWwgKi9gXG4gICAgICBTRUxFQ1QgXG4gICAgICAgIGpzb25fZXh0cmFjdChkYXRhLCAnJC5jYXRlZ29yeScpIEFTIGNhdGVnb3J5LFxuICAgICAgICBTVU0oanNvbl9leHRyYWN0KGRhdGEsICckLmFtb3VudCcpKSBBUyB0b3RhbF9hbW91bnQsXG4gICAgICAgIENPVU5UKDEpIEFTIGNvdW50XG4gICAgICBGUk9NIFtkZWZhdWx0L2V4cGVuc2VzXVxuICAgICAgR1JPVVAgQlkganNvbl9leHRyYWN0KGRhdGEsICckLmNhdGVnb3J5JylcbiAgICAgIE9SREVSIEJZIHRvdGFsX2Ftb3VudCBERVNDXG4gICAgYClcblxuICAvLyBDYXRlZ29yeSBzdW1tYXJ5IGNhcmRcbiAgY29uc3Qgc3VtbWFyeUNhcmQgPSBzY3JlZW4uYWRkQ29udHJvbFxuICAgIC5jYXJkKHsgaW5zdGFuY2VJZDogJ3N1bW1hcnktY2FyZCcgfSlcbiAgXG4gIHN1bW1hcnlDYXJkLmFkZENvbnRyb2wudGV4dEZpZWxkKHsgaW5zdGFuY2VJZDogJ3N1bW1hcnktdGl0bGUnIH0pXG4gICAgLmxhYmVsKCdTdW1tYXJ5IGJ5IENhdGVnb3J5JylcbiAgICAudmFsdWUoJ0NhdGVnb3J5IEJyZWFrZG93bicpXG5cbiAgY29uc3Qgc3VtbWFyeUxpc3QgPSBzdW1tYXJ5Q2FyZC5hZGRDb250cm9sLmxpc3QoeyBpbnN0YW5jZUlkOiAnc3VtbWFyeS1saXN0JyB9KVxuICAgIC5kYXRhKGV4cGVuc2VTdW1tYXJ5KSAvLyBCaW5kIHRvIGRhdGFzb3VyY2VJZFxuXG4gIHN1bW1hcnlMaXN0LmFkZENvbnRyb2wubGlzdEl0ZW0oeyBpbnN0YW5jZUlkOiAnc3VtbWFyeS1pdGVtJyB9KVxuICAgIC50aXRsZSgnPUBjdHguY3VycmVudC5pdGVtLmNhdGVnb3J5JylcbiAgICAuc3VidGl0bGUoJz0kZm9ybWF0Q3VycmVuY3koQGN0eC5jdXJyZW50Lml0ZW0udG90YWxfYW1vdW50KSAmIFwiIOKAoiBcIiAmIEBjdHguY3VycmVudC5pdGVtLmNvdW50ICYgXCIgZXhwZW5zZXNcIicpXG5cbiAgLy8gTWFpbiBleHBlbnNlIGxpc3RcbiAgY29uc3QgbGlzdCA9IHNjcmVlbi5hZGRDb250cm9sLmxpc3QoJ2V4cGVuc2UtbGlzdCcpXG4gICAgLmRhdGEoJ2RhdGEtZXhwZW5zZXMnKSAvLyBCaW5kIHRvIGdsb2JhbCBkYXRhc291cmNlSWRcblxuICBsaXN0LmFkZENvbnRyb2wubGlzdEl0ZW0oeyBpbnN0YW5jZUlkOiAnZXhwZW5zZS1pdGVtJyB9KVxuICAgIC50aXRsZSgnPUBjdHguY3VycmVudC5pdGVtLnRpdGxlJylcbiAgICAuc3VidGl0bGUoJz1AY3R4LmN1cnJlbnQuaXRlbS5jYXRlZ29yeSAmIFwiIOKAoiBcIiAmIEBjdHguY3VycmVudC5pdGVtLmRhdGUnKVxuICAgIC5kZXNjcmlwdGlvbignPSRmb3JtYXRDdXJyZW5jeShAY3R4LmN1cnJlbnQuaXRlbS5hbW91bnQpJylcbiAgICAub25QcmVzc1xuICAgICAgLmdvdG8oJ2VkaXQtZXhwZW5zZScpXG4gICAgICAucGFyYW1ldGVyKCdleHBlbnNlSWQnLCAnPUBjdHguY3VycmVudC5pdGVtLmlkJylcblxuICAvLyBCb3R0b20gcGFuZWwgYWN0aW9uc1xuICBjb25zdCBidXR0b25zID0gc2NyZWVuLmJvdHRvbVBhbmVsLmJ1dHRvbnMoMSlcbiAgYnV0dG9ucy5hZGQuZ290bygnQWRkIE5ldycsICdhZGQtZXhwZW5zZScpXG5cbiAgcmV0dXJuIHNjcmVlblxufSJdfQ==