emsApp_result.html and emsApp_result.js

<template>
	<!-- header -->
	<div class="slds-grid slds-gutters">
		<div class="slds-col-1">
			<lightning-icon icon-name="utility:people" alternative-text="Dashboard" size="large"></lightning-icon>
		</div>
		<div class="slds-col slds-m-left_x-small">
			<div class="slds-clearfix">
				<div class="slds-float_left">
					<h1>Manage Result</h1>
					<p>This is where the main content will be displayed.</p>
				</div>
				<!-- add button -->
				<div class="slds-float_right">
					<lightning-button variant="brand" label="Add Result" title="Add Result" onclick={handleClick}
						data-action="add"></lightning-button>
				</div>
			</div>
		</div>
	</div>
	<div class="slds-m-vertical_small">
		<lightning-button size="large" icon-name="utility:refresh" onclick={handleRefresh}>
		</lightning-button>
	</div>
	<!-- table -->
	<template if:true={results}>
		<table class="slds-table slds-table_bordered slds-table_cell-buffer slds-table_col-bordered">
			<thead>
				<tr class="slds-line-height_reset">
					<th scope="col">
						<div class="slds-truncate" title="Name">Name</div>
					</th>
					<th scope="col">
						<div class="slds-truncate" title="Exam">Exam</div>
					</th>
					<th scope="col">
						<div class="slds-truncate" title="Participant">Participant</div>
					</th>
					<th scope="col">
						<div class="slds-truncate" title="Score">Score</div>
					</th>
					<th scope="col">
						<div class="slds-truncate" title="Time Taken">Time Taken</div>
					</th>
					<th scope="col">
						<div class="slds-truncate" title="Buttons"></div>
					</th>
				</tr>
			</thead>
			<tbody>
				<template for:each={results} for:item="result">
					<tr key={result.Id}>
						<td data-label="Name">
							<div class="slds-truncate" title={result.Name}>{result.Name}</div>
						</td>
						<td data-label="Exam">
							<div class="slds-truncate" title={result.Exam__c}>{result.Exam__r.Name}</div>
						</td>
						<td data-label="Participant">
							<div class="slds-truncate" title={result.Participant__c}>{result.Participant__r.Name}
							</div>
						</td>
						<td data-label="Score">
							<div class="slds-truncate" title={result.Score__c}>{result.Score__c}</div>
						</td>
						<td data-label="Time Taken">
							<div class="slds-truncate" title={result.Time_Taken__c}>{result.Time_Taken__c}</div>
						</td>
						<td>
							<!-- view button -->
							<button class="btn" title="view" data-id={result.Id} data-action="view" onclick={handleAction}>
								<lightning-icon title="view" icon-name="utility:new_window" size="small"></lightning-icon>
							</button>
							<!-- edit button -->
							<button class="btn" title="edit" data-id={result.Id} data-action="edit" onclick={handleAction}>
                                    <lightning-icon icon-name="utility:edit" size="small"></lightning-icon>
                                </button>
							<!-- delete button -->
							<button class="btn" title="delete" data-id={result.Id} data-action="delete" onclick={handleAction}>
                                    <lightning-icon icon-name="utility:delete" size="small"></lightning-icon>
                                </button>
						</td>
					</tr>
				</template>
			</tbody>
		</table>
	</template>
	<template if:true={error}>
		<p class="slds-text-color_error">{error}</p>
	</template>

	<template if:true={isModalOpen}>
		<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true"
			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" title="Close" onclick={closeModal}>
                        <lightning-icon icon-name="utility:close" alternative-text="close" size="small"></lightning-icon>
                        <span class="slds-assistive-text">Close</span>
                    </button>
					<h2 id="modal-heading-01" class="slds-text-heading_medium">{modalHeading}</h2>
				</header>
				<div class="slds-modal__content slds-p-around_medium">
					<template if:true={isAdd}>
						<c-ems-app_result-add onclose={closeModal}></c-ems-app_result-add>
					</template>
					<template if:true={isView}>
                        <c-ems-app_result-view record-id={currentRecordId} onclose={closeModal}></c-ems-app_result-view>
                    </template>
					<template if:true={isEdit}>
						<c-ems-app_result-edit record-id={currentRecordId} onclose={closeModal}></c-ems-app_result-edit>
					</template>
					<template if:true={isDelete}>
						<c-ems-app_result-delete record-id={currentRecordId} onclose={closeModal}>
						</c-ems-app_result-delete>
					</template>
				</div>
			</div>
		</section>
		<div class="slds-backdrop slds-backdrop_open"></div>
	</template>
</template>

import { LightningElement, track, wire } from 'lwc';
import { refreshApex } from '@salesforce/apex';
import getResults from '@salesforce/apex/ParticipantController.getResults';

export default class EmsApp_result extends LightningElement {
    @track results;
    @track error;
    wiredResults;

    @wire(getResults)
    wiredResults(result) {
        this.wiredResults = result;
        if (result.data) {
            this.results = result.data;
            this.error = undefined;
        } else if (result.error) {
            this.error = result.error;
            this.results = undefined;
        }
    }

    @track isModalOpen = false;
    @track isView = false;
    @track isEdit = false;
    @track isDelete = false;
    @track currentRecordId;
    @track modalHeading;
    @track currentRecordId;

    handleAction(event) {
        this.currentRecordId = event.currentTarget.dataset.id;
        const action = event.currentTarget.dataset.action;
        
        if(action === 'view'){
            this.isAdd = false;
            this.isView = true;
            this.isEdit = false;
            this.isDelete = false;
            this.modalHeading = `Result Details`
        } else if (action === 'edit') {
            this.isAdd = false;
            this.isEdit = true;
            this.isDelete = false;
            this.modalHeading = 'Result Edit';
        } else if (action === 'delete') {
            this.isAdd = false;
            this.isEdit = false;
            this.isDelete = true;
            this.modalHeading = 'Result Delete';
        }

        this.isModalOpen = true;
    }

    handleClick() {
        this.isView = false;
        this.isAdd = true;
        this.isEdit = false;
        this.isDelete = false;
        this.modalHeading = `Add Result`;
        this.isModalOpen = true;
    }

    closeModal(event) {
        this.isModalOpen = false;
        if (event.detail && event.detail.updated) {
            refreshApex(this.wiredResults).catch(error => {
                console.error('Error refreshing Apex:', error);
            });
        }
    }

    handleRefresh() {
        refreshApex(this.wiredResults).catch(error => {
            console.error('Error refreshing Apex:', error);
        });
    }
}