function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Mike Tol 1Mike Tol 1 

Сan't save changes by edit inline in custom table

Hi,
I have account custom table and can't save changes by edit inline. Please tell me what's wrong

Html
<template>
    <lightning-card title="Account" >
        <table border="1" cellspacing="0" cellpadding="5" style="border-collapse:collapse;" class="tblColPad">
           
            <tr>
                <th>Name</th>
                <th>Rating</th>
                <th>Dalete</th>
            </tr>
            <template for:each={getAccount.data} for:item="accountItem">
                <tr key={accountItem.Id}>
                    <td>
                 
                        <template if:false={editName}>
                            <span style="border-bottom: 1px dotted black"
                              >{accountItem.Name}
                              <lightning-button-icon
                                class="slds-float_right"
                                icon-name="utility:edit"
                                alternative-text="Update Name"
                                title="Update Name"
                                variant="bare"
                                size="medium"
                                onclick={handleNameEdit}
                              ></lightning-button-icon>
                            </span>
                          </template>
                          <template if:true={editName}>
                            <lightning-input
                              name="accountItem.Id"
                              value={accountItem.Name}
                              label=""
                              onchange={handleNameChange}
                            ></lightning-input>
                            <lightning-button-icon
                              class="slds-float_right"
                              icon-name="utility:save"
                              alternative-text="Update Name"
                              title="Update Name"
                              variant="bare"
                              size="large"
                              onclick={handleUpdateName}
                            ></lightning-button-icon>
                          </template>                    
                    </td>
                    <td>{accountItem.Rating}</td>
                    <td class="d">
                    <lightning-button label="Delete" size="small" variant="neutral"
                    onclick={handleDelete} value={accountItem.Id}
                    icon-name="utility:delete" icon-position="right"
                    class="deleteButton"></lightning-button></td>
                </tr>
            </template>
        </table>
    </lightning-card>
</template>

Js
import { LightningElement, track, wire } from 'lwc';
import getAccounts from '@salesforce/apex/ProjectFour.getAccounts';
import {deleteRecord} from 'lightning/uiRecordApi';
import {refreshApex} from '@salesforce/apex';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';
 
export default class ProjectFourCustom extends LightningElement {
  @track account;
  @track accountId;
  @track accountName;
  @track accountItem;
  //@track accountItem.Name;
  @track error;
  @track editName = false;
  @track recordId;
   
  @wire (getAccounts) getAccount;
 
//   connectedCallback() {
//     getAccounts()
//       .then((result) => {
//         this.accountId = result.Id;
//         this.accountName = result.Name;
//       })
//       .catch((error) => {
//         this.error = error;
//       });
//   }
handleNameEdit(event) {
   console.log('handleNameEdit', event);
   this.editName = true;
 }
 handleNameChange(event) {
   console.log('handleNameChange', event);
   this.recordId = event.target.value;
 }
 handleUpdateName(event) {
   console.log('handleUpdateName', event);
   const fields = {};
   fields[ID_FIELD.fieldApiName] = this.accountId;
   fields[NAME_FIELD.fieldApiName] = this.accountItem.Name;
   const recordInput = { fields };
   updateRecord(recordInput)
     .then(() => {
       console.log('Done', event);
       this.editName = false;
     })
     .catch((error) => {
       console.log("Error updating date => " + error.body.message);
     });
 }

  handleDelete(event){
     this.recordId = event.target.value;
     deleteRecord(this.recordId)
     .then(() =>{
 
        return refreshApex(this.getAccount);
       
     })
     .catch(error =>{
         window.console.log('Unable to delete record due to ' + error.body.message);
     });
  }
 
}

Apex
public class ProjectFour {
    
    @AuraEnabled(cacheable=true)
    public static List<Account> getAccounts() {
        List<Account> accounts = [SELECT Id, Name, Rating FROM Account  Limit 3];
        System.debug('accounts = ' + accounts);
        return accounts;    
    } 
}