Добрый день всем. Я начинающий, сижу делаю таблицу. В задании есть момент сделать модалку подтверждения удаления записи новым child компонентом. Так вот, без модалки запись я могу удалить, а с модалком не получается передать данные из строки.
Вот код
LWC PARENT HTML
<template>
<div class="slds-p-bottom_large">
<div class="slds-size_3-of-12 slds-show_inline-block">
<lightning-input type="search" value={searchValue} placeholder="SEARCH BY NAME" onchange={searchKeyword}
></lightning-input>
</div>
<div class="slds-show_inline-block slds-m-left_x-small">
<lightning-button label="FILTER" onclick={handleSearchKeyword} variant="brand"
></lightning-button>
</div>
<div class="slds-show_inline-block slds-m-left_x-small">
<c-modal-add-contact onsave={successSave}></c-modal-add-contact>
</div>
</div>
<!-- Data table start -->
<lightning-datatable key-field="id" data={data} columns={columns} onrowaction={handleRowAction}
row-number-offset={rowOffset}>
>
</lightning-datatable>
<!-- Data table end-->
<c-confirmation-dialog-delete title='Delete Contact'
message='“Are you sure you want to delete this contact?”'
confirm-label='Delete'
cancel-label='Cancel'
visible={isDialogVisible}
original-message={originalMessage}
name="confirmModal"
ondeletecontact={handleClick}
record-id={recordId}>
</c-confirmation-dialog-delete>
</template>
LWC PARENT JS
import {LightningElement, api, track, wire} from 'lwc';
import getFindContact from "@salesforce/apex/contactTableController.getFindContact";
import {ShowToastEvent} from 'lightning/platformShowToastEvent';
import {NavigationMixin} from 'lightning/navigation';
import {refreshApex} from "@salesforce/apex";
import delSelectedCons from '@salesforce/apex/contactTableController.deleteContacts';
const columns = [
{label: 'First Name', fieldName: 'FirstName'},
{label: "Last Name", fieldName: 'LastName'},
{
label: 'Accounts', type: 'button', typeAttributes: {
label: {fieldName: 'AccountId'},
name: 'navigate_account',
variant: 'base'
}
},
{label: 'Email', fieldName: 'Email', type: 'email'},
{label: 'Mobile phone', fieldName: 'Phone', type: 'name'},
{label: 'Created Date', fieldName: 'CreatedDate', type: 'date'},
{
type: 'button-icon', label: 'Action', initialWidth: 75, typeAttributes: {
iconName: 'action:delete', title: 'Delete', name: 'delete_contact',
variant: 'border-filled', alternativeText: 'Delete'
}
},
];
export default class contactTable extends NavigationMixin(LightningElement) {
@api recordId;
@api objectApiName;
@api AccountId;
@api ContactId;
@track data = {};
@track record = {};
@track currentRecordId;
@track rowOffset = 0;
@track columns = columns;
@track isDialogVisible = false;
@track originalMessage;
@track displayMessage = 'Click on the \'Open Confirmation\' button to test the dialog.'
_wiredResult;
error;
@wire(getFindContact)
wiredCallback(result) {
this._wiredResult = result;
if (result.data) {
this.data = result.data;
this.error = undefined;
} else if (result.error) {
this.error = result.error;
this.data = undefined;
}
}
handleRowAction(event) {
if (event.detail.action.name === 'navigate_account') {
this.record = event.detail.row;
this[NavigationMixin.Navigate]({
type: 'standard__recordPage',
attributes: {
recordId: this.record.AccountId,
actionName: 'view',
},
});
} else if (event.detail.action.name === 'delete_contact') {
let row = event.detail.row;
// const row = event.detail.row;
// this.record = row;
// this.record = event.detail.row;
// this.isDialogVisible = true;
// this.currentRecordId = currentRow.Id;
// this.deleteCons(row);
this.handleClick(event, row);
// this.isDialogVisible = true;
// console.log(this.handleClick);
// this.currentRecordId = currentRow.Id;
}
}
handleClick(event) {
this.isDialogVisible = true;
let row = event.detail.row;
// this.record = currentRow;
if (event.target.name === 'confirmModal') {
if (event.detail.status === 'confirm') {
// let row = event.detail.row;
this.deleteCons(row);
} else if (event.detail.status === 'cancel') {
this.isDialogVisible = false;
}
this.isDialogVisible = false;
}
}
@track getFindContact;
deleteCons(currentRow) {
let currentRecord = [];
currentRecord.push(currentRow.Id);
delSelectedCons({lstConIds: currentRecord})
.then(() => {
this.dispatchEvent(new ShowToastEvent({
title: 'Success!!',
message: currentRow.FirstName + ' ' + currentRow.LastName + ' Contact deleted.',
variant: 'success'
}),);
return refreshApex(this._wiredResult);
})
.catch(error => {
this.dispatchEvent(new ShowToastEvent({
title: 'Error!!',
message: error.message,
variant: 'error'
}),);
});
}
searchKeyword(event) {
this.searchValue = event.target.value;
}
handleSearchKeyword() {
if (this.searchValue !== '%') {
getFindContact({
searchKey: this.searchValue
})
.then(result => {
this.data = result;
})
.catch(error => {
const event = new ShowToastEvent({
title: 'Error',
variant: 'error',
message: error.body.message,
});
this.dispatchEvent(event);
this.data = null;
});
}
}
}
LWC CHILD HTML
<template>
<lightning-card if:true={visible}>
<div class="slds-container_small">
<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true"
aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<header class="slds-modal__header">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
name="cancel" onclick={handleRowAction}>
<lightning-icon icon-name="utility:close"
alternative-text="close"
variant="inverse"
size="small"></lightning-icon>
<span class="slds-assistive-text">Close</span>
</button>
<h2 data-id="title" class="slds-text-heading_medium slds-hyphenate">{title}</h2>
</header>
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
<p data-id="message">{message}</p>
</div>
<footer class="slds-modal__footer">
<lightning-button variant="neutral"
name="cancel"
label={cancelLabel}
title={cancelLabel}
onclick={handleRowAction}></lightning-button>
<lightning-button class="slds-m-left_x-small"
variant="brand"
name="confirm"
label={confirmLabel}
title={confirmLabel}
onclick={handleRowAction}></lightning-button>
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</div>
</lightning-card>
</template>
LWC CHILD JS
import {LightningElement, api, track} from 'lwc';
import {refreshApex} from '@salesforce/apex';
export default class ConfirmationDialogDelete extends LightningElement {
@api visible = false; //used to hide/show dialog
@api title = ''; //modal title
@api name; //reference name of the component
@api message = ''; //modal message
@api confirmLabel = ''; //confirm button label
@api cancelLabel = ''; //cancel button label
@api originalMessage; //any event/message/detail to be published back to the parent component
@api recordId;
@api deleteCons;
@track isDialogVisible = false;
@track contactId;
//handles button clicks
handleRowAction(event) {
//creates object which will be published to the parent component
let finalEvent = {
originalMessage: this.originalMessage,
status: event.target.name
};
//dispatch a 'click' event so the parent component can handle it
this.dispatchEvent(new CustomEvent('deletecontact', {detail: finalEvent}));
}
}
APEX CONTROLLER
public with sharing class contactTableController {
@AuraEnabled(cacheable=true)
public static List<Contact> getFindContact(string searchKey) {
if (String.isBlank(searchKey)) {
return [SELECT FirstName, LastName, Email, AccountId, CreatedDate, Phone FROM Contact];
} else {
string searchKeyword = '%' + searchKey + '%';
return [SELECT FirstName, LastName, Email, AccountId, CreatedDate, Phone FROM Contact WHERE FirstName LIKE :searchKeyword];
}
}
@AuraEnabled(cacheable=true)
public static List<Account> getAccountModal (String actName){
List<Account> accList = new List<Account>();
if(actName != ''){
String accountName = '%' + actName + '%';
accList = [SELECT Id, Name FROM Account WHERE Name LIKE:accountName];
return accList;
}
return accList;
}
@AuraEnabled
public static void deleteContacts(list<Id> lstConIds){
try {
list<Contact> lstConsToDelete = new list<Contact>();
System.debug('lstConIds ====> '+lstConIds);
for(Id idCon : lstConIds) {
lstConsToDelete.add(new Contact(Id = idCon));
}
if(!lstConsToDelete.isEmpty()) {
delete lstConsToDelete;
}
}
catch(Exception ex) {
throw new AuraHandledException(ex.getMessage());
}
}
}