📙일지_230724(EP.7)

Working on Apex

💡 Apex Control

📸 내가 만든 Full Screen

AccController

public with sharing class AccController {

    @AuraEnabled(cacheable=true)
    public static List<Account> getAccList(){
        return [SELECT Id, Name, Phone FROM Account LIMIT 10];
    }

    @AuraEnabled // 조회의 기능이 아닌 method 는 cacheable=true 를 쓰지 않음.
    public static List<Account> findAccList(String KeyWord){
        String key = '%'+KeyWord+'%';
        return [SELECT Id, Name FROM Account WHERE Name LIKE:key LIMIT 10 ];
    }
}

🎈 To Call a method that isn`t annotated with cacheable=true
      which in cludes any method that inserts, updates, ot deleteds data.

(@AuraEnabled(cacheable=true) <- 얘가 있어야 controller 에서 해당 작업을 실행할 수 있다.

---

BindWirewithProperty

🎪 BindWirewithProperty.html

 <template>
    <lightning-card title="Wired with Property" icon-name="utility:user">
        <template if:true={accounts.data}>
            <div class="slds-var-m-around_medium">
                <template for:each={accounts.data} for:item="acc">
                    <lightning-layout key={acc.Id} class="slds-var-m-vertical_x-small">
                        <lightning-layout-item>{acc.Name}</lightning-layout-item>
                    </lightning-layout>
                </template>
            </div>
        </template>
    </lightning-card>
</template>

🎪 BindWirewithProperty.js

import { LightningElement, wire } from 'lwc';
import getAccList from '@salesforce/apex/AccController.getAccList';

export default class BindWirewithProperty extends LightningElement {
    @wire(getAccList) accounts;
}

---

BindWirewithFunction

🥇BindWirewithFunction.html

 <template>
    <lightning-card title="Wired with Function" icon-name="utility:user">
        <template if:true={accounts}>
            <div class="slds-var-m-around_medium">
                <template for:each={accounts} for:item="acc">
                    <lightning-layout key={acc.Id} class="slds-var-m-vertical_x-small">
                        <lightning-layout-item>{acc.Name}</lightning-layout-item>
                    </lightning-layout>
                </template>
            </div>
            <div class="slds-var-m-around_medium"> {error} </div>
        </template>
    </lightning-card>
</template>

🥇BindWirewithFunction.js

import { LightningElement, wire } from 'lwc';
import getAccountList from '@salesforce/apex/AccController.getAccList';

export default class BindWirewithFunction extends LightningElement {
    accounts;
    error;

    @wire(getAccountList)
    wiredAccounts({error, data}){
        if(data){
            this.accounts = data;
            this.error = undefined;
        }
        else if (error){
            this.error = error;
            this.accounts = undefined;
        }
    }
}

🎈 To control when the invocation occurs !! ( Imperative Apex )

---

Get Account 버튼 클릭

BindImperaticeMethod

📅BindImperaticeMethod.html

 <template>
    <lightning-card title="Wired using Imperative Method" icon-name="utility:user">
        <lightning-button label="Get Accounts" onclick={handleClick}></lightning-button>
        <template if:true={accounts}>
            <div class="slds-var-m-around_medium">
                <template for:each={accounts} for:item="acc">
                    <lightning-layout key={acc.Id} class="slds-var-m-vertical_x-small">
                        <lightning-layout-item>{acc.Name}</lightning-layout-item>
                    </lightning-layout>
                </template>
            </div>
            <div class="slds-var-m-around_medium"> {error} </div>
        </template>
    </lightning-card>
</template>

📅BindImperaticeMethod.js

import { LightningElement } from 'lwc';
import getAccountList from '@salesforce/apex/AccController.getAccList';

export default class BindImperaticeMethod extends LightningElement {
    accounts;
    error;

    handleClick(){
        getAccountList().then((result)=>{
            this.accounts = result;
            this.error = undefined;
        })
        .catch((error)=>{
            this.error = error;
            this.accounts = undefined;
        });
    }
}

---

MA 입력하고 Search Account 버튼 클릭

BindImperativewithParam

🎠BindImperativewithParam.html

 <template>
    <lightning-card title="Bind Imperative Method with Param" icon-name="utility:user">
        <div class="slds-var-m-around_medium">
            <lightning-input onchange={handlechange} label="Search Account" value={searchkey}></lightning-input>
        </div>
        <lightning-button label="Search Accounts" onclick={handleClick}></lightning-button>
        <template if:true={accounts}>
            <div class="slds-var-m-around_medium">
                <template for:each={accounts} for:item="acc">
                    <lightning-layout key={acc.Id} class="slds-var-m-vertical_x-small">
                        <lightning-layout-item>{acc.Name}</lightning-layout-item>
                    </lightning-layout>
                </template>
            </div>
            <div class="slds-var-m-around_medium"> {error} </div>
        </template>
    </lightning-card>
</template>

🎠BindImperativewithParam.js

import { LightningElement } from 'lwc';
import findAccList from '@salesforce/apex/AccController.findAccList';

export default class BindImperativewithParam extends LightningElement {
    searchkey = '';
    accounts;
    error;

    handlechange(event){
        this.searchkey = event.target.value;
    }

    handleClick(){
        findAccList({KeyWord :this.searchkey}).then((result)=>{
            this.accounts = result;
            this.error = undefined;
        }).catch((error)=>{
            this.error = error;
            this.accounts = undefined;
        });
    }
}