Deleting issues with confirmation modal

Step 01: adding destroy() method in api/IssueController.php

public function destroy(Issue $issue) {
    $issue->delete();  
    return response()->noContent();
}

Step 02: now adding deleteIssue() method in issues.js composable

const deleteIssue = async (id) => {
    axios.delete('/api/issues/' + id)
        .then(response => {
            getIssues()
            router.push({ name: 'issues.list' })
            swal({
                icon: 'success',
                title: 'Issue deleted successfully'
            })
        })
        .catch(error => {
            swal({
                icon: 'error',
                title: 'Something went wrong'
            })
        })
}

return { ......,  deleteIssue }

In code above, after successful deletion, we refresh the issues, redirect to the issues index page, and show the success message.

Step 03: Now changing Issues.vue component adding delete link and importing deleteIssue from composable like below

// importing deleteIssue() 
const { issues, getIssues, deleteIssue } = useIssues()

// adding delete link inside table in html beside edit link 
<td>
    <router-link :to="{ name: 'issues.edit', params: { id: issue.id } }">Edit</router-link>
    <a href="#" @click.prevent="deleteIssue(issue.id)" class="ml-2">Delete</a>
</td>

Step 04: If we want to add confirmation modal before deleting we can update the deleteIssue in issues.js composable like below

const deleteIssue = async (id) => {

    swal({ 
        title: 'Are you sure?',
        text: 'You won\'t be able to change back this action!',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Please delete it!',
        confirmButtonColor: '#ef4444',
        timer: 20000,
        timerProgressBar: true,
        reverseButtons: true
    })
        .then(result => {
            if (result.isConfirmed) {

                axios.delete('/api/issues/' + id)
                    .then(response => {
                        getIssues()
                        router.push({ name: 'issues.list' })
                        swal({
                            icon: 'success',
                            title: 'Issue deleted successfully'
                        })
                    })
                    .catch(error => {
                        swal({
                            icon: 'error',
                            title: 'Something went wrong'
                        })
                    })
            } 
        })    
}