Initial commit

resources/views/livewire/game-selector.blade.php

@@ -0,0 +1,98 @@
+<div x-data='GameSelector()' x-init="init({
+        name: @json(old('new-game-title') ?: null),
+        platformId: @json(old('new-game-platform') ? (string) old('new-game-platform') : null),
+        genreId: @json(old('new-game-genre') ? (string) old('new-game-genre') : null)
+    })">
+{{--
+    Prefill if server-side error.
+--}}
+<div class="form-group grid-c3">
+
+    @if( !$newGame && !$hasOldNewGame )
+        {{-- Search game mode --}}
+        <div class="game-selector">
+            <div class="game-selector-level2">
+
+                <x-form-field-title name="Game" required="true" />
+                <input class="form-input" type="text" wire:model.live.debounce="search" placeholder="Search a game..." autocomplete="off"
+                       @focus="$wire.dropdown = $wire.search.length >= {{ $required_chars }}" @click.outside="$wire.dropdown = false" >
+
+                <input type="hidden" name="game_id" value="{{ $gameId ?? '' }}" />
+
+            </div>
+
+            @if( $dropdown )
+                {{-- List games --}}
+                <ul class="game-selector-dropdown">
+                    @forelse($games as $game)
+                        <li>
+                            <button type="button" wire:click="selectGame({{ $game->id }}, '{{ addslashes($game->name) }}')"
+                                    class="dropdown-item" {{ $gameId === $game->id ? 'selected' : '' }} >
+                                <span class="dropdown-item-name">{{ $game->name }}</span>
+                                @if($game->platform)
+                                    <span class="badge">{{ $game->platform->short_name }}</span>
+                                @endif
+                                @if($game->genre)
+                                    <span class="badge">{{ $game->genre->name }}</span>
+                                @endif
+                            </button>
+                        </li>
+                    @empty
+                        <li class="dropdown-empty">No games found</li>
+                    @endforelse
+                </ul>
+            @endif
+
+        </div>
+
+        <div class="platform-prefilled">
+            <x-form-field-title name="Platform" helper="Prefilled" />
+            <input class="form-input" disabled="disabled" type="text" autocomplete="off" value="{{ $platformName }}">
+        </div>
+
+        <div class="genre-prefilled">
+            <x-form-field-title name="Genre" helper="Prefilled" />
+            <input class="form-input" disabled="disabled" type="text" autocomplete="off" value="{{ $genreName }}" >
+        </div>
+
+    @else {{-- New game --}}
+
+        <div class="new-game-title">
+            <x-form-field-title name="Game" required="true" />
+            <input class="form-input" name="new-game-title" type="text" autocomplete="off" x-model="name" value="{{ old('new-game-title', '') }}" required>
+        </div>
+
+        <div class="new-game-platform">
+            <x-form-field-title name="Platform" required="true" />
+            <select class="form-select" name="new-game-platform" x-model="platformId" required>
+                    <option value="" disabled>---</option>
+                    @foreach( $platforms as $platform )
+                        <option value="{{ (string) $platform->id }}">{{ $platform->name }}</option>
+                    @endforeach
+                </select>
+            </div>
+
+        <div class="new-game-genre">
+            <x-form-field-title name="Genre" required="true" />
+            <select class="form-select" name="new-game-genre" x-model="genreId" required>
+                <option value="" disabled>---</option>
+                @foreach( $genres as $genre )
+                    <option value="{{ (string) $genre->id }}">{{ $genre->name }}</option>
+                @endforeach
+            </select>
+        </div>
+
+    @endif
+
+</div>
+
+
+<div style="display:flex;align-items: flex-end;justify-content: right;gap:15px;">
+    @if($gameId)
+        <button type="button" class="btn" wire:click="clearGame">
+            Remove
+        </button>
+    @endif
+    <button type="button" class="btn primary" wire:click="switchNewGame">{{ $newGame ? "Cancel" : "Add a game" }}</button>
+</div>
+</div>