set up list management
This commit is contained in:
parent
0c42bef077
commit
73d6578857
26 changed files with 495 additions and 230 deletions
|
|
@ -1,8 +1,7 @@
|
|||
<div class="m-5 py-10">
|
||||
<p class="text-3xl mb-5 text-center">Lists</p>
|
||||
<div class="bg-gray-800 p-5 flex flex-col gap-5 items-center rounded">
|
||||
<div class="mt-5 w-full mx-auto flex flex-col gap-5">
|
||||
<h1 class="font-bold text-3xl mx-2 sm:mx-0">Lists</h1>
|
||||
<x-ui.card>
|
||||
<div class="w-full flex flex-col gap-2">
|
||||
<h2 class="text-xl font-bold">Add List</h2>
|
||||
@if ($errors->any())
|
||||
<div class="alert alert-danger">
|
||||
<ul>
|
||||
|
|
@ -13,27 +12,25 @@
|
|||
</div>
|
||||
@endif
|
||||
|
||||
<form class="flex flex-col mx-auto" wire:submit.prevent="addList">
|
||||
<label for="list_name">Name</label>
|
||||
<form class="flex flex-col max-w-lg gap-2" wire:submit.prevent="addList">
|
||||
<label class="font-bold" for="list_name">Add List</label>
|
||||
<div class="flex">
|
||||
<input name="list_name" class="text-black bg-white p-3 rounded rounded-r-none" type="text"
|
||||
<input name="list_name" placeholder="List Name"
|
||||
class="flex-1 w-full text-black bg-white p-2 rounded rounded-r-none"
|
||||
type="text"
|
||||
wire:model="form.name">
|
||||
<button type="submit" class="bg-green-400 text-white px-4 py-2 rounded rounded-l-none">Add</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<ul class="w-full flex flex-col gap-5 justify-between">
|
||||
<ul class="w-full flex flex-col gap-5">
|
||||
@foreach($lists as $list)
|
||||
<li class="grid grid-cols-2 gap-5 text-center">
|
||||
<div><a href="/lists/{{$list->id}}" wire:navigate>{{$list->name}}</a></div>
|
||||
<div>
|
||||
<label for="is_public">Public</label>
|
||||
<input name="is_public" type="checkbox" value="is_public" wire:model="form.is_public"/>
|
||||
</div>
|
||||
<li class="flex justify-between text-center">
|
||||
<a href="/lists/{{$list->id}}" wire:navigate>{{$list->name}}</a>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
</x-ui.card>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
57
resources/views/livewire/movie-details-panel.blade.php
Normal file
57
resources/views/livewire/movie-details-panel.blade.php
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
<x-ui.slide-over model="showDetails">
|
||||
@if($selectedMovie)
|
||||
<div class="flex flex-col gap-6">
|
||||
<!-- Header with title and year -->
|
||||
<div class="flex flex-col gap-2 text-center">
|
||||
<h2 class="text-2xl font-bold text-gray-300">{{ $selectedMovie->title }}</h2>
|
||||
<p class="text-lg text-gray-400">{{ $selectedMovie->year }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Poster -->
|
||||
@if($selectedMovie->poster && $selectedMovie->poster !== 'N/A')
|
||||
<img src="{{ $selectedMovie->poster }}"
|
||||
alt="{{ $selectedMovie->title }}"
|
||||
class="max-w-48 rounded-lg shadow-md mx-auto">
|
||||
@endif
|
||||
|
||||
<!-- Plot/Description -->
|
||||
@if($selectedMovie->plot && $selectedMovie->plot !== 'N/A')
|
||||
<div>
|
||||
<h3 class="text-sm font-semibold text-gray-300 mb-2">Plot</h3>
|
||||
<p class="text-gray-400">{{ $selectedMovie->plot }}</p>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- Additional Details -->
|
||||
<div class="flex flex-col gap-3 text-sm">
|
||||
@if($selectedMovie->director && $selectedMovie->director !== 'N/A')
|
||||
<div>
|
||||
<span class="font-semibold text-gray-300">Director:</span>
|
||||
<span class="text-gray-400">{{ $selectedMovie->director }}</span>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if($selectedMovie->actors && $selectedMovie->actors !== 'N/A')
|
||||
<div>
|
||||
<span class="font-semibold text-gray-300">Actors:</span>
|
||||
<span class="text-gray-400">{{ $selectedMovie->actors }}</span>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if($selectedMovie->genre && $selectedMovie->genre !== 'N/A')
|
||||
<div>
|
||||
<span class="font-semibold text-gray-300">Genre:</span>
|
||||
<span class="text-gray-400">{{ $selectedMovie->genre }}</span>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if($selectedMovie->mpaa_rating && $selectedMovie->mpaa_rating !== 'N/A')
|
||||
<div>
|
||||
<span class="font-semibold text-gray-300">Rating:</span>
|
||||
<span class="text-gray-400">{{ $selectedMovie->mpaa_rating }}</span>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</x-ui.slide-over>
|
||||
|
|
@ -1,22 +1,70 @@
|
|||
<div class=" text-white pt-5 flex flex-col gap-5">
|
||||
<h1 class="text-2xl font-bold">{{$list->name}}</h1>
|
||||
<div class=" text-white pt-10 flex flex-col gap-5">
|
||||
<div class="flex flex-row justify-between items-center mx-2 sm:mx-0">
|
||||
<h1 class="text-2xl sm:text-3xl font-bold">{{$list->name}}</h1>
|
||||
<button type="button" wire:click="toggleSettings"
|
||||
class="hover:bg-blue-600 cursor-pointer text-white px-4 py-2 rounded">
|
||||
<i class="fas fa-cog"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form wire:submit.prevent="addMovie">
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="query">Enter a movie title</label>
|
||||
<input wire:model="query" type="text" name="query" class="bg-white text-black"/>
|
||||
@error('query') <span class="error text-red-500">{{ $message }}</span> @enderror
|
||||
<x-ui.card class="overflow-hidden">
|
||||
<div class="absolute">
|
||||
<livewire:search-panel :list-id="$list->id"/>
|
||||
<livewire:movie-details-panel/>
|
||||
</div>
|
||||
|
||||
<button type="submit">Search</button>
|
||||
</form>
|
||||
<div class="relative w-full overflow-hidden">
|
||||
<div class="flex transition-transform duration-300 ease-in-out"
|
||||
style="transform: translateX({{ $showSettings ? '-100%' : '0' }})">
|
||||
|
||||
<!-- Movie List View -->
|
||||
<div class="w-full flex-shrink-0 flex flex-col gap-5">
|
||||
<div class="flex flex-col-reverse sm:flex-row gap-5 sm:gap-0 justify-between w-full">
|
||||
<input class="bg-white p-2 rounded" type="text" placeholder="Filter movies"
|
||||
wire:model="filterText"
|
||||
wire:keyup="filterMovies"/>
|
||||
|
||||
<button wire:click="$dispatch('openSearch')" class="bg-green-500 text-white p-2 rounded">
|
||||
Add Movie
|
||||
</button>
|
||||
</div>
|
||||
<ul class="grid grid-cols-2 sm:grid-cols-4 gap-5">
|
||||
@foreach ($filteredMovies as $movie)
|
||||
<li class="bg-gray-200">
|
||||
<x-movie :movie="$movie"/>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Settings View -->
|
||||
<div class="w-full flex-shrink-0 flex flex-col gap-5">
|
||||
<div class="flex justify-between items-center">
|
||||
<button wire:click="toggleSettings" class="text-white hover:text-gray-300">
|
||||
← Back to List
|
||||
</button>
|
||||
<h2 class="text-xl font-semibold">Settings</h2>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2 w-full">
|
||||
<label for="list-name">List Name</label>
|
||||
<div class="flex flex-row">
|
||||
<input type="text" wire:model="settingsForm.name" id="list-name"
|
||||
class="w-full p-2 rounded rounded-r-none bg-white"/>
|
||||
<button class="bg-green-400 p-2 rounded-r" type="submit" wire:click="saveSettings">Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between bg-gray-700 p-4 rounded">
|
||||
<label for="is_public" class="text-white">Make list public</label>
|
||||
<input type="checkbox"
|
||||
id="is_public"
|
||||
wire:model.live="settingsForm.isPublic"
|
||||
class="w-5 h-5 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-ui.card>
|
||||
|
||||
<ul class="my-5 grid grid-cols-4 gap-5">
|
||||
@foreach ($movies as $movie)
|
||||
<li class="bg-gray-200">
|
||||
<x-movie :movie="$movie"/>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
30
resources/views/livewire/search-panel.blade.php
Normal file
30
resources/views/livewire/search-panel.blade.php
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<x-ui.slide-over model="showSearch">
|
||||
<form wire:submit.prevent="findMovies" class="flex flex-row">
|
||||
<div class="mb-5">
|
||||
<label for="query">Enter a movie title</label>
|
||||
<div class="flex flex-row">
|
||||
<input wire:model="query" type="text" name="query" class="bg-white p-2 text-black"/>
|
||||
<button class="bg-green-400 p-2" type="submit">Search</button>
|
||||
</div>
|
||||
@error('query') <span class="error text-red-500">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
|
||||
</form>
|
||||
<ul class="flex flex-col gap-2">
|
||||
@foreach ($results as $result)
|
||||
<li class="flex flex-row justify-between border border-gray-300 p-2">
|
||||
<div class="flex flex-col gap-1">
|
||||
<div class="flex flex-col sm:flex-row gap-1 font-bold">
|
||||
<span>{{ $result['title'] }}</span>
|
||||
<span>({{$result['year']}})</span>
|
||||
</div>
|
||||
<button class="bg-green-400 p-2 rounded w-25 justify-between" type=button
|
||||
wire:click="addMovie(@js($result['imdb_id']))">
|
||||
Add to List
|
||||
</button>
|
||||
</div>
|
||||
<img class="max-h-20" src="{{$result['poster']}}" alt="poster"/>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</x-ui.slide-over>
|
||||
Loading…
Add table
Add a link
Reference in a new issue