diff --git a/app/Http/Controllers/DashboardController.php b/app/Http/Controllers/DashboardController.php index 1f81a0a..ced6c22 100644 --- a/app/Http/Controllers/DashboardController.php +++ b/app/Http/Controllers/DashboardController.php @@ -105,7 +105,7 @@ class DashboardController extends Controller { $directory = base_path() . '/public/uploads/' . $request['model'] . '/img/'; file::makeDirectory($directory, 0755, true, true); $image = Image::make($request->file('file')); - $image->save($directory . $request['id'] . "-" . $request['name'] . '.jpg'); + $image->save($directory . $request['id'] . '-' . $request['name'] . '.jpg'); } else { return 'file-upload-fail'; } @@ -128,7 +128,7 @@ class DashboardController extends Controller { if ($request->hasFile('file')) { $directory = base_path() . '/public/uploads/' . $request['model'] . '/files/'; file::makeDirectory($directory, 0755, true, true); - $request->file('file')->move($directory, $request['id'] . "-" . $request['name'] . '.' . $request['ext']); + $request->file('file')->move($directory, $request['id'] . '-' . $request['name'] . '.' . $request['ext']); } else { return 'file-upload-fail'; } @@ -242,4 +242,49 @@ class DashboardController extends Controller { return 'success'; } + /** + * Dashboard Image Delete: Delete images + */ + public function deleteImageDelete(Request $request) + { + $this->validate($request, [ + 'id' => 'required', + 'model' => 'required', + 'name' => 'required' + ]); + + $image = base_path() . '/public/uploads/' . $request['model'] . '/img/' . $request['id'] . '-' . $request['name'] . '.jpg'; + + if (!file_exists($image)) { + return 'image-not-exists-fail'; + } else if (!unlink($image)) { + return 'image-delete-fail'; + } + + return 'success'; + } + + /** + * Dashboard File Delete: Delete files + */ + public function deleteFileDelete(Request $request) + { + $this->validate($request, [ + 'id' => 'required', + 'model' => 'required', + 'name' => 'required', + 'ext' => 'required' + ]); + + $file = base_path() . '/public/uploads/' . $request['model'] . '/files/' . $request['id'] . '-' . $request['name'] . '.' . $request['ext']; + + if (!file_exists($file)) { + return 'file-not-exists-fail'; + } else if (!unlink($file)) { + return 'file-delete-fail'; + } + + return 'success'; + } + } diff --git a/readme.md b/readme.md index b18bae6..62cd1c2 100644 --- a/readme.md +++ b/readme.md @@ -207,9 +207,11 @@ The following is a list of possible `types` in the `columns` array for Editable * `hidden`: Fields that will contain values to pass to the update function but won't appear on the page (this must be used for the sort column) * `image`: Fields that contain image uploads * `name`: not part of the database and is instead used in the filename + * `delete`: (optional) if true then uploaded images can be deleted * `file`: Fields that contains file uploads * `name`: not part of the database and is instead used in the filename * `ext` required key containing the file extension + * `delete`: (optional) if true then uploaded files can be deleted * `display`: Displayed information that can't be edited #### Edit Item Functionality diff --git a/resources/assets/js/dashboard.js b/resources/assets/js/dashboard.js index 2b15e41..3f3c787 100644 --- a/resources/assets/js/dashboard.js +++ b/resources/assets/js/dashboard.js @@ -2,7 +2,7 @@ jQuery.fn.reverse = [].reverse; // show the confirmation modal and run the supplied command if confirm is pressed -function askConfirmation(message, command) { +function askConfirmation(message, command, cancelCommand) { const $confirmationModal = $("#confirmation-modal"), $heading = $confirmationModal.find(".panel-heading"), $cancelButton = $confirmationModal.find(".btn.cancel-button"), @@ -35,8 +35,17 @@ function askConfirmation(message, command) { closeConfirmationModal(); }; + // functionality to run when clicking the cancel button + const cancelModal = function() { + if (cancelCommand !== undefined) { + cancelCommand(); + } + + closeConfirmationModal(); + }; + // hide the modal when the cancel button is pressed - $cancelButton.on("click", closeConfirmationModal); + $cancelButton.on("click", cancelModal); // hide the modal when the escape key is pressed $(document).on("keyup", escapeModal); @@ -103,6 +112,7 @@ function showAlert(message, command) { function editListInit() { const editList = document.getElementById("edit-list"), $editList = $(editList), + $token = $("#token"), model = $editList.data("model"), path = $editList.data("path"); @@ -145,7 +155,7 @@ function editListInit() { data: { model: model, id: itemId, - _token: $("#token").val() + _token: $token.val() } }).always(function(response) { if (response === "success") { @@ -177,7 +187,7 @@ function editListInit() { url: postUrl, data: { id: itemId, - _token: $("#token").val() + _token: $token.val() } }).always(function(response) { if (response === "success") { @@ -212,7 +222,7 @@ function editListInit() { model: model, order: sortOrder, column: sortCol, - _token: $("#token").val() + _token: $token.val() } }).always(function(response) { if (response !== "success") { @@ -267,7 +277,7 @@ function editItemInit() { $mkdEditors = $(".mkd-editor"), $fileUploads = $(".file-upload"), $imgUploads = $(".image-upload"), - $token = $("#_token"), + $token = $("#token"), $spinner = $("#loading-modal"), fadeTime = 250, model = $editItem.data("model"), @@ -440,6 +450,74 @@ function editItemInit() { } }; + $(".edit-button.delete.image").on("click", function(e) { + const $this = $(this), + name = $this.data("name"); + + if (!submitting) { + submitting = true; + + askConfirmation("Are you sure you want to delete this image?", function() { + // delete the image + $.ajax({ + type: "DELETE", + url: "/dashboard/image-delete", + data: { + id: id, + model: model, + name: name, + _token: $token.val() + } + }).always(function(response) { + if (response === "success") { + $(`#current-image-${name}`).slideUp(200); + } else { + showAlert("ERROR: Failed to delete the image: " + response); + } + + submitting = false; + }); + }, function() { + submitting = false; + }); + } + }); + + $(".edit-button.delete.file").on("click", function(e) { + const $this = $(this), + name = $this.data("name"), + ext = $this.data("ext"); + + if (!submitting) { + submitting = true; + + askConfirmation("Are you sure you want to delete this file?", function() { + // delete the file + $.ajax({ + type: "DELETE", + url: "/dashboard/file-delete", + data: { + id: id, + model: model, + name: name, + ext: ext, + _token: $token.val() + } + }).always(function(response) { + if (response === "success") { + $(`#current-file-${name}`).slideUp(200); + } else { + showAlert("ERROR: Failed to delete the file: " + response); + } + + submitting = false; + }); + }, function() { + submitting = false; + }); + } + }); + // allow start time selection to start on the hour and every 15 minutes after for (hours = 0; hours <= 23; hours++) { for (minutes = 0; minutes <= 3; minutes++) { @@ -518,7 +596,6 @@ function editItemInit() { // populate the formData object getFormData(); - // console.log(JSON.stringify(formData)); // submit the update $.ajax({ diff --git a/resources/assets/sass/dashboard.scss b/resources/assets/sass/dashboard.scss index c7fca9c..4dc1f4a 100644 --- a/resources/assets/sass/dashboard.scss +++ b/resources/assets/sass/dashboard.scss @@ -397,23 +397,38 @@ body { max-width: 100%; } - .current-file { + .edit-button { + margin-bottom: ($grid-gutter-width / 2); + display: inline-block; padding: 5px 10px; - border: 1px solid darken($c-dashboard-dark, 5%); border-radius: 5px; - background-color: $c-dashboard-dark; - color: $c-text-light; text-transform: uppercase; transition: background-color 150ms; + cursor: pointer; - &:hover { - background-color: lighten($c-dashboard-dark, 5%); + &:hover, &:focus { text-decoration: none; } - } - .no-file { - margin-bottom: 15px; + &.view { + border: 1px solid darken($c-dashboard-dark, 5%); + background-color: $c-dashboard-dark; + color: $c-text-light; + + &:hover { + background-color: lighten($c-dashboard-dark, 5%); + } + } + + &.delete { + border: 1px solid darken($c-dashboard-delete, 5%); + background-color: $c-dashboard-delete; + color: $c-text-light; + + &:hover { + background-color: lighten($c-dashboard-delete, 5%); + } + } } .back-button { diff --git a/resources/views/dashboard/edit-item.blade.php b/resources/views/dashboard/edit-item.blade.php index 70a96e6..d50445c 100644 --- a/resources/views/dashboard/edit-item.blade.php +++ b/resources/views/dashboard/edit-item.blade.php @@ -14,7 +14,7 @@ @endif
- +
@foreach($columns as $column) @@ -51,9 +51,15 @@ @set('current_image', "/uploads/$model/img/$id-" . $column['name'] . '.jpg') @if(file_exists(base_path() . '/public' . $current_image)) - - @else -
(No Image Set)
+
+ + + @if(array_key_exists('delete', $column) && $column['delete']) + + Delete Image + + @endif +
@endif @elseif($column['type'] == 'file') @@ -61,9 +67,15 @@ @set('current_file', "/uploads/$model/files/$id-" . $column['name'] . '.' . $column['ext']) @if(file_exists(base_path() . '/public' . $current_file)) - View Current {{ strtoupper($column['ext']) }} - @else -
(No {{ strtoupper($column['ext']) }} Set)
+
+ View {{ strtoupper($column['ext']) }} + + @if(array_key_exists('delete', $column) && $column['delete']) + + Delete {{ strtoupper($column['ext']) }} + + @endif +
@endif @elseif($column['type'] == 'display')
{{ $value }}
diff --git a/resources/views/dashboard/edit-list.blade.php b/resources/views/dashboard/edit-list.blade.php index f1c181a..2a0fb87 100644 --- a/resources/views/dashboard/edit-list.blade.php +++ b/resources/views/dashboard/edit-list.blade.php @@ -12,7 +12,7 @@ @section('dashboard-body')
- + @if($filter) diff --git a/routes/web.php b/routes/web.php index 68418c5..3c77bd9 100644 --- a/routes/web.php +++ b/routes/web.php @@ -38,6 +38,8 @@ Route::group([ 'prefix' => 'dashboard' ], function() { Route::post('/edit', 'DashboardController@postEdit'); Route::post('/reorder', 'DashboardController@postReorder'); Route::delete('/delete', 'DashboardController@deleteDelete'); + Route::delete('/image-delete', 'DashboardController@deleteImageDelete'); + Route::delete('/file-delete', 'DashboardController@deleteFileDelete'); }); /*