Chat GPT に取引先の検索画面を作ってもらう その2

<template>
  <lightning-card title="取引先検索">
    <div class="slds-p-around_medium">
      <lightning-input label="検索キーワード" value={searchTerm} onchange={handleSearchTermChange}></lightning-input>
      <lightning-button label="検索" onclick={handleSearch} variant="brand"></lightning-button>
    </div>
    <template if:true={accounts}>
      <div class="slds-p-around_medium">
        <lightning-datatable
          data={accounts}
          columns={columns}
          key-field="Id"
          hide-checkbox-column="true"
          onrowaction={handleRowAction}
          draft-values={draftValues}
          onsave={handleSave}
        ></lightning-datatable>
      </div>
    </template>
  </lightning-card>
</template>

import { LightningElement, track, wire } from 'lwc';
import searchAccounts from '@salesforce/apex/AccountController.searchAccounts';
import updateAccount from '@salesforce/apex/AccountController.updateAccount';

const COLUMNS = [
  { label: '取引先名', fieldName: 'Name', type: 'text', editable: true },
  { label: '電話', fieldName: 'Phone', type: 'phone', editable: true },
  { label: 'ウェブサイト', fieldName: 'Website', type: 'url', editable: true }
];

export default class AccountSearch extends LightningElement {
  @track searchTerm = '';
  @track accounts;
  @track draftValues = [];
  columns = COLUMNS;

  handleSearchTermChange(event) {
    this.searchTerm = event.target.value;
  }

  @wire(searchAccounts, { searchTerm: '$searchTerm' })
  wiredAccounts({ error, data }) {
    if (data) {
      this.accounts = data;
    } else if (error) {
      console.error(error);
    }
  }

  handleSearch() {
    // 検索処理は自動的に実行されるため、ここでは何も実装しない
  }

  handleRowAction(event) {
    const action = event.detail.action;
    const row = event.detail.row;
    switch (action.name) {
      case 'edit':
        this.handleEdit(row);
        break;
      default:
        break;
    }
  }

  handleEdit(row) {
    // 編集可能な行の編集状態をトラッキングします
    const editedRow = { ...row };
    this.draftValues = [...this.draftValues, editedRow];
  }

  handleSave(event) {
    const updatedFields = event.detail.draftValues;
    // 更新処理を実行する
    updateAccount({ data: updatedFields })
      .then(() => {
        // 更新成功時の処理
        this.accounts = this.accounts.map(account => {
          const draftItem = updatedFields.find(item => item.Id === account.Id);
          if (draftItem) {
            return { ...account, ...draftItem };
          }
          return account;
        });
        this.draftValues = [];
      })
      .catch(error => {
        // 更新エラー時の処理
        console.error(error);
      });
  }
}

public with sharing class AccountController {
  @AuraEnabled(cacheable=true)
  public static List<Account> searchAccounts(String searchTerm) {
    String searchKey = '%' + searchTerm + '%';
    return [SELECT Id, Name, Phone, Website FROM Account WHERE Name LIKE :searchKey];
  }

  @AuraEnabled
  public static void updateAccount(List<Account> data) {
    update data;
  }
}