Changed colors.index to Livewire
This commit is contained in:
@@ -0,0 +1,46 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
namespace App\Livewire\Color;
|
||||||
|
|
||||||
|
use Livewire\WithPagination;
|
||||||
|
use Livewire\Attributes\Validate;
|
||||||
|
use Livewire\Component;
|
||||||
|
use Livewire\Attributes\title;
|
||||||
|
use Illuminate\Support\Facades\Auth;
|
||||||
|
|
||||||
|
use App\Models\Color;
|
||||||
|
#[title('Colors')]
|
||||||
|
class Index extends Component
|
||||||
|
{
|
||||||
|
use WithPagination;
|
||||||
|
|
||||||
|
#[Validate('required')]
|
||||||
|
public $name = '';
|
||||||
|
|
||||||
|
#[Validate('required')]
|
||||||
|
public $hex = '';
|
||||||
|
|
||||||
|
public function create() {
|
||||||
|
// Validate
|
||||||
|
$this->validate();
|
||||||
|
|
||||||
|
// Create the color
|
||||||
|
Color::create([
|
||||||
|
$this->all()
|
||||||
|
]);
|
||||||
|
|
||||||
|
// Clear the form
|
||||||
|
$this->reset(['name', 'hex']);
|
||||||
|
}
|
||||||
|
|
||||||
|
public function delete(Color $color) {
|
||||||
|
@Auth::check();
|
||||||
|
$color->delete();
|
||||||
|
}
|
||||||
|
public function render()
|
||||||
|
{
|
||||||
|
return view('livewire.color.index', [
|
||||||
|
'colors' => Color::paginate(10)
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -4,7 +4,9 @@ namespace App\Livewire;
|
|||||||
|
|
||||||
use Livewire\Component;
|
use Livewire\Component;
|
||||||
use App\Models\Manufacturer;
|
use App\Models\Manufacturer;
|
||||||
|
use Livewire\Attributes\title;
|
||||||
|
|
||||||
|
#[title('Dashboard')]
|
||||||
class Dashboard extends Component
|
class Dashboard extends Component
|
||||||
{
|
{
|
||||||
public function render()
|
public function render()
|
||||||
|
|||||||
@@ -0,0 +1,5 @@
|
|||||||
|
<section>
|
||||||
|
<div class="container mx-auto text-center py-8 text-zinc-500">
|
||||||
|
<p>Copyright 2025 {{ config('app.name') }}</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
@@ -1,5 +1,7 @@
|
|||||||
<div class="py-6 px-4 sm:px-6 lg:px-8">
|
<div class="bg-zinc-700 w-full border-b border-accent">
|
||||||
|
<div class="container mx-auto py-6 px-4 sm:px-6 lg:px-8">
|
||||||
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
|
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
|
||||||
{{ $slot }}
|
{{ $slot }}
|
||||||
</h2>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
@@ -4,9 +4,28 @@
|
|||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
||||||
<title>{{ $title ?? 'Page Title' }}</title>
|
<!-- Fonts -->
|
||||||
|
<link rel="preconnect" href="https://fonts.bunny.net">
|
||||||
|
<link href="https://fonts.bunny.net/css?family=inter:400,500,600&display=swap" rel="stylesheet" />
|
||||||
|
|
||||||
|
<!-- Scripts -->
|
||||||
|
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
||||||
|
|
||||||
|
<!-- Styles -->
|
||||||
|
@livewireStyles
|
||||||
|
@fluxAppearance
|
||||||
|
|
||||||
|
<title>{{ $title . ' | ' . config('app.name') ?? config('app.name') }}</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="font-sans antialiased bg-zinc-800">
|
||||||
|
<x-navbar />
|
||||||
|
|
||||||
{{ $slot }}
|
{{ $slot }}
|
||||||
|
|
||||||
|
<x-footer />
|
||||||
|
|
||||||
|
@livewireScripts
|
||||||
|
@fluxScripts
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -0,0 +1,43 @@
|
|||||||
|
<section>
|
||||||
|
<x-header>
|
||||||
|
{{ __('Colors') }}
|
||||||
|
</x-header>
|
||||||
|
|
||||||
|
<div class="container m-auto my-8 bg-zinc-700 rounded">
|
||||||
|
<form method="POST" class="flex flex-col gap-4" wire:submit="create">
|
||||||
|
@csrf
|
||||||
|
<div class="flex justify-center gap-8 py-4">
|
||||||
|
<label class="text-lg content-center">New Color</label>
|
||||||
|
<input type="text" placeholder="Name" wire:model="name" class="bg-zinc-800 rounded" required/>
|
||||||
|
<input type="text" placeholder="Hex" wire:model="hex" class="bg-zinc-800 rounded" required/>
|
||||||
|
<button type="submit" class="bg-green-500 hover:bg-green-700 text-zinc-800 hover:text-white font-bold py-2 px-4 rounded cursor-pointer">Submit</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container m-auto my-8 bg-zinc-700">
|
||||||
|
<table class="w-full">
|
||||||
|
<thead class="bg-zinc-900">
|
||||||
|
<tr class="text-left">
|
||||||
|
<th class="px-8 py-4 font-bold text-lg">Name</th>
|
||||||
|
<th class="px-8 py-4 font-bold text-lg text-center">Color</th>
|
||||||
|
<th class="px-8 py-4 font-bold text-lg text-center">Hex</th>
|
||||||
|
<th></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
@foreach ($colors as $color)
|
||||||
|
<tr wire:key="{{ $color->id }}" class="border-b border-zinc-600 hover:bg-zinc-600 transition duration-200">
|
||||||
|
<td><p class="p-4 pl-8">{{ $color->name }}</p></td>
|
||||||
|
<td><div class="w-8 h-8 rounded mx-auto" style="background-color: {{ $color->hex }}"></div></td>
|
||||||
|
<td><p class="p-4 text-center">{{ $color->hex }}</p></td>
|
||||||
|
<td class="text-right pr-8"><button type="button" wire:click="delete({{ $color->id }})" wire:confirm="Are you sure?" class="text-accent p-4 cursor-pointer"><flux:icon.x-mark/></button></td>
|
||||||
|
</tr>
|
||||||
|
@endforeach
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<div class="p-4">
|
||||||
|
{{ $colors->links() }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
@@ -1,13 +1,6 @@
|
|||||||
<div>
|
<div>
|
||||||
<x-app-layout>
|
|
||||||
<x-slot name="header">
|
|
||||||
{{ __('Dashboard') }}
|
|
||||||
</x-slot>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="py-12">
|
<div class="py-12">
|
||||||
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
|
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
|
||||||
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
<div class="col-span-2">
|
<div class="col-span-2">
|
||||||
<x-card>
|
<x-card>
|
||||||
@@ -42,8 +35,7 @@
|
|||||||
</x-card>
|
</x-card>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</x-app-layout>
|
|
||||||
</div>
|
</div>
|
||||||
+2
-2
@@ -7,6 +7,7 @@ use App\Http\Controllers\FilamentController;
|
|||||||
use App\Http\Controllers\ManufacturerController;
|
use App\Http\Controllers\ManufacturerController;
|
||||||
|
|
||||||
use App\Livewire\Dashboard;
|
use App\Livewire\Dashboard;
|
||||||
|
use App\Livewire\Color\Index;
|
||||||
|
|
||||||
Route::get('/', function () {
|
Route::get('/', function () {
|
||||||
return view('welcome');
|
return view('welcome');
|
||||||
@@ -22,12 +23,11 @@ Route::middleware([
|
|||||||
Route::get('/', Dashboard::class)->name('dashboard');
|
Route::get('/', Dashboard::class)->name('dashboard');
|
||||||
// Filament Types
|
// Filament Types
|
||||||
Route::resource('types', FilamentTypeController::class);
|
Route::resource('types', FilamentTypeController::class);
|
||||||
// Colors
|
|
||||||
Route::resource('colors', ColorController::class);
|
|
||||||
// Filaments
|
// Filaments
|
||||||
Route::resource('filaments', FilamentController::class);
|
Route::resource('filaments', FilamentController::class);
|
||||||
// Manufacturers
|
// Manufacturers
|
||||||
Route::resource('manufacturers', ManufacturerController::class);
|
Route::resource('manufacturers', ManufacturerController::class);
|
||||||
Route::get('refresh', [ManufacturerController::class, 'refresh'])->name('refresh');
|
Route::get('refresh', [ManufacturerController::class, 'refresh'])->name('refresh');
|
||||||
|
|
||||||
|
Route::get('colors', Index::class)->name('colors.index');
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user