Lesson: 34 | Task Pagination with Show More Button

Notes

HTML

<template>
    <lightning-card title="Tasks" icon-name="standard:task">
        <!-- Display Tasks -->
        <template for:each={displayedTasks} for:item="task">
            <lightning-card key={task.Id} title={task.Subject}>
                <p><strong>Status:</strong> {task.Status}</p>
                <p><strong>Priority:</strong> {task.Priority}</p>
                <p><strong>Due Date:</strong> {task.DueDate}</p>
            </lightning-card>
        </template>

        <!-- Show More Button -->
        <template if:true={tasks.length}>
            <div class="slds-text-align_center">
                <lightning-button
                    label="Show More"
                    onclick={handleShowMore}
                    class="slds-m-top_medium"
                    variant="brand"
                    disabled={isLoading}>
                </lightning-button>
            </div>
        </template>
    </lightning-card>
</template>

JavaScript

import { LightningElement, track, wire } from 'lwc';
import getTasks from '@salesforce/apex/TaskController.getTasks';

export default class TaskPagination extends LightningElement {
    @track tasks = [];
    @track displayedTasks = [];
    offset = 0;
    limit = 5;
    isLoading = false;

    @wire(getTasks, { offset: '$offset', limit: '$limit' })
    wiredTasks({ error, data }) {
        if (data) {
            this.tasks = data;
            this.displayedTasks = [...this.displayedTasks, ...data]; // Append new tasks
            this.offset += this.limit; // Update offset for the next fetch
            this.isLoading = false;
        } else if (error) {
            console.error('Error fetching tasks:', error);
        }
    }

    handleShowMore() {
        this.isLoading = true; // Show loading spinner
        // Re-fetch the tasks with updated offset to load more
        this.wiredTasks();
    }
}

Meta XML

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="FormattedTimeLWC">
    <apiVersion>59.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
    </targets>
</LightningComponentBundle>

Apex

public with sharing class TaskController {
    @AuraEnabled(cacheable=true)
    public static List<Task> getTasks(Integer offset, Integer limit) {
        return [SELECT Id, Subject, Status, Priority, DueDate FROM Task ORDER BY DueDate LIMIT :limit OFFSET :offset];
    }
}