Chapter 33: Display List of Cases using wire & Filter Cases using imperative method in LWC

Hello Friends, In this blog, we will learn how to display list of cases using wire service. I hope you enjoy the article.

Are you ready ? Let’s Begin !!

—–

caseManager.html

<template>
    <div class="slds-box slds-p-around_small" style="background-color:rgb(102 255 187);">
        <lightning-input label="Enter Case Number"
                        placeholder="Case Number"
                        value={searchCaseNumber}
                        onchange={caseNumberChange}>
        </lightning-input>
        <lightning-button label="Search" onclick={searchRecords}></lightning-button>


        <template if:true={cases.data}>
            <div class="slds-grid slds-wrap sds-gutters">
                <template for:each={cases.data} for:item="eachCase">
                    <div class="slds-col slds-size_1-of-3 slds-p-around_small" key={eachCase.Id}>
                        <lightning-card title={eachCase.CaseNumber} key={eachCase.Id}>
                            <div slot="actions">
                                <template if:true={eachCase.IsClosed}>
                                    <span style="color: green;font-weight: bold;">Already Closed</span>
                                </template>
                                <template if:false={eachCase.IsClosed}>
                                    <lightning-button variant="success" 
                                                        name={eachCase.Id}
                                                        value={eachCase.Id}
                                                        label="Close Case"
                                                        onclick={passCaseToClose}
                                    ></lightning-button>
 
                                </template>
                            </div>
                            <p class="slds-p-horizontal_small">
                              <span style="color: green;">Description:</span>{eachCase.Description}  
                            </p>
                            <p class="slds-p-horizontal_small">
                                <span style="color: green;">Status:</span>{eachCase.Status}  
                              </p>
                              <p class="slds-p-horizontal_small">
                                <span style="color: green;">Priority:</span>{eachCase.Priority}  
                              </p>
                              <p style="color: green;" slot="footer">
                                {eachCase.Subject}
                              </p>
                        </lightning-card>
                    </div>
                </template>
            </div>
        </template>
    </div>    
</template>

caseManager.js

import { LightningElement,wire } from 'lwc';
import fetchAllCases from '@salesforce/apex/CasesManager.fetchAllCases';
import fetchCaseDetails from '@salesforce/apex/CasesManager.fetchCaseDetails';
import closeCase from '@salesforce/apex/CasesManager.closeCase';
export default class CaseManager extends LightningElement {
    searchCaseNumber='';
    cases;
    errorDetails;
    caseCloseMessage;

    @wire(fetchAllCases) cases;

    caseNumberChange(event){
        this.searchCaseNumber = event.target.value;
    }

    searchRecords(){
        fetchCaseDetails({caseNumber:this.searchCaseNumber})
        .then(result=>{
            this.cases.data = result;
        })
        .catch(error=>{
            this.errorDetails = error;
        });
    }

    passCaseToClose(event){
        
        this.caseId = event.target.name;
        closeCase({caseId:this.caseId})
        .then(result=>{
            this.caseCloseMessage = result;
        })
        .catch(error=>{
           this.errorDetails = error; 
        });
 
    }
}

CaseManager.apxc

public with sharing class CasesManager {
      
    @AuraEnabled(cacheable=true)
    public static list<case> fetchAllCases(){
            return [SELECT Id,Account.Name,CaseNumber,IsClosed,Origin,Description,Priority,Subject,Status
                    FROM CASE];
    }
    
    @AuraEnabled(cacheable=true)
    public static list<case> fetchCaseDetails(string caseNumber){
        if(string.isNotBlank(caseNumber)){
            string searchCase ='%'+caseNumber+'%';
            return [SELECT Id,Account.Name,CaseNumber,IsClosed,Origin,Description,Priority,Subject,Status
                    FROM CASE
                    where caseNumber like :searchCase];
        } 
        else{
            return NULL;
        }   
    }
    @AuraEnabled
    public static string closeCase(string caseId){
        string message;
        try{
            case cs = new case(Id=caseId);
            cs.status='Closed';
            update cs;
            message = 'Success';
        }   
        catch(Exception ex){
            message = ex.getMessage();
        } 
        return message;
    }
}

Reference

Change Wired Data after data its gets imperative