How do you use confirm dialogues in a custom Laravel Nova tool?
You can use <modal>
component whenever you want.
Here is how it work internally in Nova: https://gist.github.com/sanasol/fa7441ceb4da9c6c71f9586ec1d04a5a
Here is simplified example: https://gist.github.com/sanasol/b3790b8041fb2dfaa0a5b921ff46f5f3
- You need to create a new component in the same folder of Tool.vue
- I'll attach the component I used here
- Then in the "handleConfirm" method, you can add a Ajax call to API
- You can add you logic in that API.
- You can find the API file in path, ToolName/routes/api.php
/* CustomModal.vue */<template> <modal tabindex="-1" role="dialog" @modal-close="handleClose"> <form @keydown="handleKeydown" @submit.prevent.stop="handleConfirm" class="bg-white rounded-lg shadow-lg overflow-hidden w-action"> <div> <heading :level="2" class="border-b border-40 py-8 px-8">Confirm action</heading> <p class="text-80 px-8 my-8"> Are you sure you want to perform this action? </p> </div> <div class="bg-30 px-6 py-3 flex"> <div class="flex items-center ml-auto"> <button type="button" @click.prevent="handleClose" class="btn btn-link dim cursor-pointer text-80 ml-auto mr-6"> Cancel </button> <button :disabled="working" type="submit" class="btn btn-default btn-primary"> <loader v-if="working" width="30"></loader> <span v-else>Confirm</span> </button> </div> </div> </form> </modal></template><script>export default { methods: { handleConfirm() { // Here you can add an ajax call to API and you can add your logic there. }, handleClose() { // Logic to hide the component }, },}</script>
For more detailed explanation : https://medium.com/vineeth-vijayan/how-to-use-confirm-dialogs-in-a-laravel-nova-tool-b16424ffee87