Added Alpine.js to the project and implemented some enabled input dependencies to the gamenews admin page.

2026-09-08 19:25:10 -05:00 · 2024-03-21 23:42:16 +01:00
parent 5347747954
commit 2c93107bc6
7 changed files with 66 additions and 18 deletions
--- a/dist/app/Http/Controllers/Web/Admin/Tools/GameNewsController.php
+++ b/dist/app/Http/Controllers/Web/Admin/Tools/GameNewsController.php
@@ -59,12 +59,12 @@ protected function updateNews(News &$news, SubmitGameNewsRequest &$request)
        $news->body = $request->input(SubmitGameNewsRequest::DESCRIPTION);

        $news->message_type = MessageType::tryFrom($request->input(SubmitGameNewsRequest::MESSSAGE_TYPE));
-        $news->faction = Faction::tryFrom($request->input(SubmitGameNewsRequest::FACTION, Faction::None));
+        $news->faction = Faction::tryFrom($request->input(SubmitGameNewsRequest::FACTION, Faction::None->value));
        $news->one_time_news = $request->input(SubmitGameNewsRequest::ONE_TIME_NEWS) !== null;
        $news->should_quit_game = $request->input(SubmitGameNewsRequest::QUIT_GAME) !== null;
        $news->one_match = $request->input(SubmitGameNewsRequest::COMPLETE_ONE_MATCH) !== null;

-        $news->redirect_mode = GameNewsRedirectMode::tryFrom($request->input(SubmitGameNewsRequest::REDIRECT_MODE));
+        $news->redirect_mode = GameNewsRedirectMode::tryFrom($request->input(SubmitGameNewsRequest::REDIRECT_MODE, GameNewsRedirectMode::None->value));
        $news->redirect_item = $request->input(SubmitGameNewsRequest::REDIRECT_ITEM);
        $news->redirect_url = $request->input(SubmitGameNewsRequest::REDIRECT_URL);

--- a/dist/app/Http/Requests/Api/Admin/Tools/SubmitGameNewsRequest.php
+++ b/dist/app/Http/Requests/Api/Admin/Tools/SubmitGameNewsRequest.php
@@ -72,7 +72,7 @@ public function rules(): array
            static::DESCRIPTION => 'required|string',
            static::MESSSAGE_TYPE => ['required', Rule::enum(MessageType::class)],
            static::FACTION => ['nullable', Rule::enum(Faction::class)],
-            static::REDIRECT_MODE => ['required', Rule::enum(GameNewsRedirectMode::class)],
+            static::REDIRECT_MODE => ['nullable', Rule::enum(GameNewsRedirectMode::class)],
            static::REDIRECT_ITEM => 'nullable|string',
            static::REDIRECT_URL => 'nullable|string',
            static::POP_UP_BACKGROUND => 'nullable|string',
--- a/dist/package-lock.json
+++ b/dist/package-lock.json
@@ -7,6 +7,7 @@
            "dependencies": {
                "@inertiajs/vue3": "^1.0.14",
                "@vitejs/plugin-vue": "^5.0.3",
+                "alpinejs": "^3.13.7",
                "dotenv": "^16.4.2"
            },
            "devDependencies": {
@@ -933,6 +934,27 @@
                "node": ">= 6.0.0"
            }
        },
+        "node_modules/alpinejs": {
+            "version": "3.13.7",
+            "resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.13.7.tgz",
+            "integrity": "sha512-rcTyjTANbsePq1hb7eSekt3qjI94HLGeO6JaRjCssCVbIIc+qBrc7pO5S/+2JB6oojIibjM6FA+xRI3zhGPZIg==",
+            "dependencies": {
+                "@vue/reactivity": "~3.1.1"
+            }
+        },
+        "node_modules/alpinejs/node_modules/@vue/reactivity": {
+            "version": "3.1.5",
+            "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.5.tgz",
+            "integrity": "sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==",
+            "dependencies": {
+                "@vue/shared": "3.1.5"
+            }
+        },
+        "node_modules/alpinejs/node_modules/@vue/shared": {
+            "version": "3.1.5",
+            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz",
+            "integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA=="
+        },
        "node_modules/ansi-regex": {
            "version": "6.0.1",
            "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
--- a/dist/package.json
+++ b/dist/package.json
@@ -19,6 +19,7 @@
    "dependencies": {
        "@inertiajs/vue3": "^1.0.14",
        "@vitejs/plugin-vue": "^5.0.3",
+        "alpinejs": "^3.13.7",
        "dotenv": "^16.4.2"
    }
 }
--- a/dist/resources/css/inputs-global.scss
+++ b/dist/resources/css/inputs-global.scss
@@ -1,5 +1,13 @@
 [class^='input-global-'] {
-  @apply transition-colors rounded-md border bg-gray-800 border-gray-600;
+  @apply transition-colors rounded-md border bg-gray-800 border-gray-500;
+
+  &:disabled {
+    @apply text-white/15 border-gray-900;
+  }
+
+  &:has(> input:disabled) {
+    @apply text-white/15 border-gray-900;
+  }
 }

 .input-global-text {
--- a/dist/resources/js/bootstrap.js
+++ b/dist/resources/js/bootstrap.js
@@ -4,24 +4,16 @@
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */
 import { createApp, h } from 'vue'
-import { createInertiaApp } from '@inertiajs/vue3'

 import axios from 'axios';
-window.axios = axios;
+import Alpine from 'alpinejs';

+window.axios = axios;
 window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

-createInertiaApp({
-    resolve: name => {
-        const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
-        return pages[`./Pages/${name}.vue`]
-    },
-    setup({ el, App, props, plugin }) {
-        createApp({ render: () => h(App, props) })
-            .use(plugin)
-            .mount(el)
-    },
-})
+window.Alpine = Alpine;
+Alpine.start();
+


 /**
--- a/dist/resources/views/components/admin/tools/game-news-list-entry.blade.php
+++ b/dist/resources/views/components/admin/tools/game-news-list-entry.blade.php
@@ -12,7 +12,12 @@
    @vite(['resources/css/components/admin/tools/game-news-list-entry.scss'])
@endpushonce

-<div class="container mx-auto bg-slate-800 border border-slate-500 rounded-xl my-6 py-2 px-4 shadow-glow shadow-gray-400/30">
+<div class="container mx-auto bg-slate-800 border border-slate-500 rounded-xl my-6 py-2 px-4 shadow-glow shadow-gray-400/30"
+     x-data="{
+        messageType: '{{ $news->message_type->value}}',
+        redirectMode: '{{ $news->redirect_mode->value }}'
+    }"
+>
    <form action="{{ route('gamenews.post', ['news' => $news->uuid]) }}" method="post">
        @csrf
        <div class="float-right mt-[-1rem]">
@@ -52,6 +57,7 @@
                            id="{{ $idPrefix }}messageType"
                            required
                            name="{{ SubmitGameNewsRequest::MESSSAGE_TYPE }}"
+                            x-model="messageType"
                            :cases="MessageType::cases()"
                            :selected="$news->message_type"/>
                </div>
@@ -60,6 +66,7 @@
                    <x-inputs.dropdown
                            id="{{ $idPrefix }}faction"
                            name="{{ SubmitGameNewsRequest::FACTION }}"
+                            x-bind:disabled="messageType === '{{ MessageType::PopUpNews->value }}'"
                            :cases="Faction::cases()"
                            :selected="$news->faction"/>
                </div>
@@ -68,6 +75,7 @@
                    <x-inputs.checkbox
                            id="{{ $idPrefix }}one-time"
                            name="{{ SubmitGameNewsRequest::ONE_TIME_NEWS }}"
+                            x-bind:disabled="messageType === '{{ MessageType::InGameNews->value }}'"
                            :checked="$news->one_time_news"/>
                </div>
                <div>
@@ -75,6 +83,7 @@
                    <x-inputs.checkbox
                            id="{{ $idPrefix }}quit-game"
                            name="{{ SubmitGameNewsRequest::QUIT_GAME }}"
+                            x-bind:disabled="messageType === '{{ MessageType::InGameNews->value }}'"
                            :checked="$news->should_quit_game"/>
                </div>
                <div>
@@ -93,6 +102,8 @@
                            id="{{ $idPrefix }}redirect-mode"
                            required
                            name="{{ SubmitGameNewsRequest::REDIRECT_MODE }}"
+                            x-model="redirectMode"
+                            x-bind:disabled="messageType === '{{ MessageType::PopUpNews->value }}'"
                            :cases="GameNewsRedirectMode::cases()"
                            :selected="$news->redirect_mode"/>
                </div>
@@ -100,13 +111,22 @@
                    <label for="{{ $idPrefix }}redirect-item">Redirect Item</label>
                    <x-inputs.text id="{{ $idPrefix }}redirect-item"
                                   name="{{ SubmitGameNewsRequest::REDIRECT_ITEM }}"
+                                   x-bind:disabled="
+                                   messageType === '{{ MessageType::PopUpNews->value }}' ||
+                                   redirectMode === '{{ GameNewsRedirectMode::WebsiteLink->value }}' ||
+                                   redirectMode === '{{ GameNewsRedirectMode::None->value }}'"
                                   value="{{ $news->redirect_item }}"/>
                </div>
                <div>
                    <label for="{{ $idPrefix }}redirect-url">Redirect Url</label>
                    <x-inputs.text id="{{ $idPrefix }}redirect-url"
                                   name="{{ SubmitGameNewsRequest::REDIRECT_URL }}"
+                                   x-bind:disabled="
+                                   messageType === '{{ MessageType::PopUpNews->value }}' ||
+                                   redirectMode === '{{ GameNewsRedirectMode::Store->value }}' ||
+                                   redirectMode === '{{ GameNewsRedirectMode::None->value }}'"
                                   value="{{ $news->redirect_url }}"/>
+
                </div>
            </div>
            <div class="section columns-1 lg:columns-2 xl:columns-3">
@@ -116,6 +136,7 @@
                    <x-inputs.text
                            id="{{ $idPrefix }}pop-up-bg"
                            name="{{ SubmitGameNewsRequest::POP_UP_BACKGROUND }}"
+                            x-bind:disabled="messageType !== '{{ MessageType::PopUpNews->value }}'"
                            value="{{ $news->background_image }}"/>
                </div>
                <div>
@@ -123,6 +144,7 @@
                    <x-inputs.text
                            id="{{ $idPrefix }}in-game-news-bg"
                            name="{{ SubmitGameNewsRequest::IN_GAME_BACKGROUND }}"
+                            x-bind:disabled="messageType === '{{ MessageType::PopUpNews->value }}'"
                            value="{{ $news->in_game_news_background_image }}"/>
                </div>
                <div>
@@ -130,6 +152,7 @@
                    <x-inputs.text
                            id="{{ $idPrefix }}in-game-news-thumbnail"
                            name=" {{ SubmitGameNewsRequest::IN_GAME_THUMBNAIL }}"
+                            x-bind:disabled="messageType === '{{ MessageType::PopUpNews->value }}'"
                            value="{{ $news->in_game_news_thumbnail }}"/>
                </div>
            </div>
@@ -157,6 +180,7 @@
                            id="{{ $idPrefix }}display-x-times"
                            name="{{ SubmitGameNewsRequest::DISPLAY_X_TIMES }}"
                            min="0"
+                            x-bind:disabled="messageType !== '{{ MessageType::PopUpNews->value }}'"
                            value="{{ $news->display_x_times }}"/>
                </div>
                <div>
@@ -165,6 +189,7 @@
                            id="{{ $idPrefix }}max-player-level"
                            name="{{ SubmitGameNewsRequest::MAX_PLAYER_LEVEL }}"
                            min="1"
+                            x-bind:disabled="messageType === '{{ MessageType::PopUpNews->value }}'"
                            value="{{ $news->max_player_level }}"/>
                </div>
            </div>