Added Delete button with confirmation modal to game news entry.

dist/app/Http/Controllers/Web/Admin/Tools/GameNewsController.php

@@ -44,7 +44,7 @@ public function submit(News $news, SubmitGameNewsRequest $request) {
                 $this->updateNews($news, $request);
                 break;
             case HttpMethod::DELETE:
-                $this->deleteNews($news, $request);
+                $this->deleteNews($news);
                 break;
             default:
         }
@@ -85,9 +85,10 @@ protected function updateNews(News &$news, SubmitGameNewsRequest &$request)
         return Redirect::back();
     }
 
-    protected function deleteNews(News &$news, SubmitGameNewsRequest &$request)
+    protected function deleteNews(News &$news)
     {
-
+        $news->delete();
+        return Redirect::back();
     }
 
 }

dist/package-lock.json

@@ -8,7 +8,9 @@
                 "@inertiajs/vue3": "^1.0.14",
                 "@vitejs/plugin-vue": "^5.0.3",
                 "alpinejs": "^3.13.7",
-                "dotenv": "^16.4.2"
+                "dotenv": "^16.4.2",
+                "jquery": "^3.7.1",
+                "jquery-modal": "^0.9.2"
             },
             "devDependencies": {
                 "autoprefixer": "^10.4.17",
@@ -1842,6 +1844,16 @@
                 "jiti": "bin/jiti.js"
             }
         },
+        "node_modules/jquery": {
+            "version": "3.7.1",
+            "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
+            "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg=="
+        },
+        "node_modules/jquery-modal": {
+            "version": "0.9.2",
+            "resolved": "https://registry.npmjs.org/jquery-modal/-/jquery-modal-0.9.2.tgz",
+            "integrity": "sha512-Bx6jTBuiUbdywriWd0UAZK9v7FKEDCOD5uRh47qd4coGvx+dG4w8cOGe4TG2OoR1dNrXn6Aqaeu8MAA+Oz7vOw=="
+        },
         "node_modules/kvparser": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/kvparser/-/kvparser-1.0.2.tgz",

dist/package.json

@@ -20,6 +20,8 @@
         "@inertiajs/vue3": "^1.0.14",
         "@vitejs/plugin-vue": "^5.0.3",
         "alpinejs": "^3.13.7",
-        "dotenv": "^16.4.2"
+        "dotenv": "^16.4.2",
+        "jquery": "^3.7.1",
+        "jquery-modal": "^0.9.2"
     }
 }

dist/resources/css/app.scss

@@ -2,4 +2,5 @@
 @tailwind components;
 @tailwind utilities;
 
-@import "inputs-global";
+@import "inputs-global";
+@import "modal";

dist/resources/css/modal.scss

@@ -0,0 +1,10 @@
+@import 'jquery-modal';
+
+.modal {
+  @apply bg-slate-800 shadow-glow shadow-gray-800/50;
+
+  .close-modal {
+    @apply border-slate-800 border-2 rounded-full;
+  }
+}
+

dist/resources/js/bootstrap.js

@@ -3,10 +3,10 @@
  * to our Laravel back-end. This library automatically handles sending the
  * CSRF token as a header based on the value of the "XSRF" token cookie.
  */
-import { createApp, h } from 'vue'
-
+import modal from 'jquery-modal';
 import axios from 'axios';
 import Alpine from 'alpinejs';
+import jQuery from 'jquery';
 
 window.axios = axios;
 window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
@@ -14,6 +14,12 @@ window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 window.Alpine = Alpine;
 Alpine.start();
 
+window.$ = window.jQuery = jQuery();
+window.$.modal = modal;
+windows.$("#custom-close").modal({
+    closeClass: 'modal-close-custom',
+})
+
 
 
 /**

dist/resources/views/components/admin/tools/game-news-list-entry.blade.php

@@ -18,7 +18,7 @@
         redirectMode: '{{ $news->redirect_mode->value }}'
     }"
 >
-    <form action="{{ route('gamenews.post', ['news' => $news->uuid]) }}" method="post">
+    <form action="{{ route('gamenews.post', ['news' => $news->uuid]) }}" method="post" id="{{ $idPrefix }}news-form">
         @csrf
         <div class="float-right mt-[-1rem]">
             <span class="text-white/75">{{ $news->uuid }}</span>
@@ -203,13 +203,41 @@ class="save"
                 Save
             </x-inputs.button>
             <x-inputs.button
+                    href="#{{ $idPrefix }}delete-modal"
+                    rel="modal:open"
+                    type="button"
                     class="delete"
                     name="{{ SubmitGameNewsRequest::SUBMIT_METHOD }}"
                     value="{{ \App\APIClients\HttpMethod::DELETE }}"
             >
                 Delete
             </x-inputs.button>
+            <div id="{{ $idPrefix }}delete-modal" class="modal">
+                <div class="flex flex-col items-center gap-5">
+                    <span>
+                        Are you sure you want to delete the news
+                    <span class="italic m-1 inline bg-slate-700 w-fit px-2 rounded">
+                        {{ $news->title }}
+                    </span>
+                        ?
+                    </span>
+                    <div class="flex gap-5">
+                        <x-inputs.button type="button" href="#close" rel="modal:close">
+                            Cancel
+                        </x-inputs.button>
+                        <x-inputs.button
+                                form="{{ $idPrefix }}news-form"
+                                class="delete"
+                                name="{{ SubmitGameNewsRequest::SUBMIT_METHOD }}"
+                                value="{{ \App\APIClients\HttpMethod::DELETE }}"
+                        >
+                            Delete
+                        </x-inputs.button>
+                    </div>
+                </div>
+            </div>
         </div>
+
     </form>
 </div>
 

dist/resources/views/components/inputs/button.blade.php

@@ -1,5 +1,22 @@
+@php
+    /** @var \Illuminate\View\ComponentAttributeBag $attributes */
+
+    $addAnchorTagForModal = $attributes->has('rel') && str_contains($attributes->get('rel'), 'modal');
+@endphp
+
 @props([
     'type' => 'submit'
 ])
 
-<button type="{{ $type }}" {{ $attributes->merge(['class' => 'input-global-submit']) }}><span class="text-inherit">{{ $slot }}</span></button>
+@if($addAnchorTagForModal)
+    <a href="{{ $attributes->get('href') }}" rel="{{ $attributes->get('rel') }}">
+@endif
+
+<button type="{{ $type }}" {{ $attributes->merge(['class' => 'input-global-submit']) }}>
+    <span class="text-inherit">{{ $slot }}
+    </span>
+</button>
+
+@if($attributes)
+    </a>
+@endif

dist/routes/admin.php

@@ -18,7 +18,6 @@
 Route::post('gamenews/create', [GameNewsController::class, 'create'])->name('gamenews.create');
 Route::post('gamenews/{news}', [GameNewsController::class, 'submit'])->name('gamenews.post');
 
-
 Route::fallback(function () {
     return redirect(route('admin.dashboard'));
 });