Open a modal from a datatable to edit records

If I’m on an account and I want to quickly edit some of the information on my child records, I can create a button next to each record that will open a modal, which will allow me to edit the record and then return to my parent account record.

Apex Controller:

public with sharing class ContactsController {
    @AuraEnabled(cacheable = true)
    public static List<Contact> getContacts(id accountId){
        return [SELECT Id, FirstName, LastName, Phone, Email FROM Contact WHERE accountId =:accountId];
    }
}

Javascript controller (contactDataTable.js):

import { LightningElement, wire, track, api } from 'lwc';
import getContacts from '@salesforce/apex/ContactsController.getContacts';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';

import {refreshApex} from '@salesforce/apex';

const columns = [
    { label: 'FirstName', fieldName: 'FirstName'},
    { label: 'LastName', fieldName: 'LastName'},
    { label: 'Phone', fieldName : 'Phone', type: 'phone'},
    { label: 'Email', fieldName: 'Email', type: 'email'},
    { label: 'Edit', type: 'button-icon', initialWidth: 75,
        typeAttributes: {
            iconName: 'action:edit',
            title: 'Edit',
            variant: 'border-filled',
            alternativeText: 'Edit'
        }
    }
];

export default class ContactDataTable extends LightningElement {
    //reactive
    @api recordId;
    @track columns = columns;
    @track bShowModal = false;
    @track currentRecordId;
    @track contacts;
    @track error;


    wiredContactsResult;

    @wire(getContacts,{ accountId: '$recordId'})
    wiredContacts(result){
        this.wiredContactsResult = result;
        if(result.data){
            this.contacts = result.data;
            this.error = undefined;
        } else if(result.error){
            this.error = result.error;
            this.contacts = undefined;
        }
    }


    handleRowAction(event){
        const row = event.detail.row;
        this.record = row;
        this.bShowModal = true;
        this.editCurrentRecord(row);
    }

    // closing modal box
    closeModal() {
        this.bShowModal = false;
    }

    handleSubmit(event){
        event.preventDefault();
        this.template.querySelector('lightning-record-edit-form').submit(event.detail.fields);
        this.bShowModal = false;
        this.dispatchEvent(new ShowToastEvent({
            title: 'Success!!',
            message: event.detail.fields.FirstName +' Contact updated Successfully!!',
            variant: 'success'
        }),);
    }

    handleSuccess() {
        return refreshApex(this.wiredContactsResult);
    }

    editCurrentRecord(currentRow){
        this.currentRecordId = currentRow.Id;
    }
    
}

Html (contactDataTable.html):

<template>
    <lightning-card title="Contacts" icon-name="standard:contact">
        <lightning-datatable data={contacts}
            columns={columns}
            key-field="id"
            hide-checkbox-column="true"
            onrowaction={handleRowAction}>
        </lightning-datatable>

        <template if:true={bShowModal}>
                <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">
                      <!-- modal header start -->
                      <header class="slds-modal__header">
                         <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={closeModal}>
                            <lightning-icon icon-name="utility:close" alternative-text="close" variant="inverse" size="small" ></lightning-icon>
                         </button>
                         <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Record Detail</h2>
                      </header>
                      <!-- modal body start -->
                      <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                        <dl class="slds-list_horizontal slds-wrap">
                            <lightning-record-edit-form layout-type="Full" record-id={currentRecordId} object-api-name="Contact" onsubmit={handleSubmit} onsuccess={handleSuccess}>
                                <lightning-messages></lightning-messages>
                                <lightning-input-field field-name="FirstName"></lightning-input-field>                                
                                <div style="text-align:center;">
                                    <lightning-button class="slds-m-top_small"
                                                      variant="brand"
                                                      type="submit"
                                                      name="update"
                                                      label="Update Record"></lightning-button>
                                </div>
                            </lightning-record-edit-form><br/>
                            
                        </dl>
                      </div>
                      <!-- modal footer start-->
                      <footer class="slds-modal__footer">
                           <lightning-button variant="brand"
                           label="Close"
                           title="Close"
                           onclick={closeModal}
                           ></lightning-button>
                      </footer>
                   </div>
                </section>
                <div class="slds-backdrop slds-backdrop_open"></div>
             </template>
    </lightning-card>
</template>

See the code on github : https://github.com/tjkingsbury/ContactModalUpdate