Implement functionality that allows an additional button with customizable functionality to be added to dashboard edit-list pages

readme.md

@@ -48,6 +48,7 @@ First add a function to generate the page:
             'model'   => 'shows',
             'rows'    => Shows::getShowsList(),
             'column'  => 'title',
+            'button'  => [ 'Email Show', 'Are you sure you want to send an email?', 'Email successfully sent', 'Failed to send email', '/email-show' ],
             'sortcol' => false,
             'delete'  => true,
             'create'  => true,
@@ -69,6 +70,7 @@ First add a function to generate the page:
             'model'   => 'news',
             'rows'    => News::getNewsList(),
             'column'  => 'title',
+            'button'  => [ 'Email Show', 'Are you sure you want to send an email?', 'Email successfully sent', 'Failed to send email', '/email-show' ],
             'sortcol' => 'order',
             'delete'  => false,
             'create'  => true,
@@ -82,6 +84,7 @@ First add a function to generate the page:
 * `model`: The model that will be accessed on this page
 * `rows`: A function returning an array containing the data to be shown on this page
 * `column`: The column name in the array that contains the data to display in each row (an array can be used to specify multiple columns)
+* `button`: Add a button with a title, confirmation, success and error messages, and a post request path that takes an id and returns `success` on success
 * `sortcol`: The name of the column containing the sort order or `false` to disable
 * `delete`: A `delete` button will appear in the list if this is set to `true`
 * `create`: A `new` button will appear in the heading if this is set to `true`

resources/assets/js/dashboard.js

@@ -157,6 +157,38 @@ function editListInit() {
         });
     };
 
+    // initialize action button functionality
+    const actionButtonInit = function() {
+        const $actionButtons = $(".btn.action-button");
+
+        $actionButtons.on("click", function() {
+            const $this = $(this),
+                $listItem = $this.closest(".list-group-item"),
+                itemId = $listItem.data("id"),
+                confirmationMessage = $this.data("confirmation"),
+                successMessage = $this.data("success"),
+                errorMessage = $this.data("error"),
+                postUrl = $this.data("url");
+
+            askConfirmation(confirmationMessage, function() {
+                $.ajax({
+                    type: "POST",
+                    url: postUrl,
+                    data: {
+                        id: itemId,
+                        _token: $("#token").val()
+                    }
+                }).always(function(response) {
+                    if (response === "success") {
+                        showAlert(successMessage);
+                    } else {
+                        showAlert("ERROR: " + errorMessage);
+                    }
+                });
+            });
+        });
+    };
+
     // initialize sort functionality if data-sort is set
     const sortRowInit = function() {
         let sortOrder = {}, sortCol, sortable;
@@ -210,6 +242,7 @@ function editListInit() {
     newButtonInit();
     editButtonInit();
     deleteButtonInit();
+    actionButtonInit();
     sortRowInit();
     filterInputInit();
 }

resources/views/dashboard/edit-list.blade.php

@@ -44,6 +44,10 @@
                             </div>
 
                             <div class="button-column">
+                                @if(isset($button) && is_array($button))
+                                    <button type="button" class="action-button btn btn-default" data-confirmation="{{ $button[1] }}" data-success="{{ $button[2] }}" data-error="{{ $button[3] }}" data-url="{{ $button[4] }}">{{ $button[0] }}</button>
+                                @endif
+
                                 <button type="button" class="edit-button btn btn-warning">Edit</button>
 
                                 @if($delete)