fixed Database Error while creating new color

This commit is contained in:
2025-03-16 01:33:15 +01:00
parent 990630ab2e
commit 9b3913b68c
3 changed files with 46 additions and 19 deletions
+14 -4
View File
@@ -22,17 +22,27 @@ class Color extends Component
#[Validate('required')]
public $hex = '';
public $createModal = false;
public function create() {
@Auth::check();
// Validate
$this->validate();
// Create the color
ColorModel::create([
$this->all()
]);
$color = new ColorModel();
$color->name = $this->name;
$color->hex = $this->hex;
$color->save();
session()->flash('status', 'Color successfully created.');
// Clear the form
$this->reset(['name', 'hex']);
// Close the modal
$this->createModal = false;
}
public function delete(Color $color) {
+5 -3
View File
@@ -9,7 +9,9 @@ $maxWidth = [
'lg' => 'sm:max-w-lg',
'xl' => 'sm:max-w-xl',
'2xl' => 'sm:max-w-2xl',
][$maxWidth ?? '2xl'];
'3xl' => 'sm:max-w-3xl',
'4xl' => 'sm:max-w-4xl',
][$maxWidth ?? '4xl'];
@endphp
<div
@@ -27,10 +29,10 @@ $maxWidth = [
x-transition:leave="ease-in duration-200"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0">
<div class="absolute inset-0 bg-gray-500 dark:bg-gray-900 opacity-75"></div>
<div class="absolute inset-0 bg-zinc-500 dark:bg-zinc-900 opacity-75"></div>
</div>
<div x-show="show" class="mb-6 bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full {{ $maxWidth }} sm:mx-auto"
<div x-show="show" class="mb-6 bg-white dark:bg-zinc-800 rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full {{ $maxWidth }} sm:mx-auto"
x-trap.inert.noscroll="show"
x-transition:enter="ease-out duration-300"
x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
@@ -4,22 +4,12 @@
<x-slot name="headerright">
<a href="#" class="flex gap-2 hover:*:animate-spin"><flux:icon.arrow-path class="transition ease-in duration-300" />Refresh</a>
<a href="#" class="bg-zinc-500 hover:bg-green-500 text-zinc-50 hover:text-zinc-700 font-bold text-base py-2 px-4 rounded cursor-pointer">Create</a>
<button type="button" x-on:click="$wire.createModal = true" class="bg-zinc-500 hover:bg-green-500 text-zinc-50 hover:text-zinc-700 font-bold text-base py-2 px-4 rounded cursor-pointer">Create</button>
</x-slot>
</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">
@@ -46,4 +36,29 @@
{{ $colors->links() }}
</div>
</div>
<!-- Create Form -->
<x-modal wire:model="createModal" >
<div class="flex justify-center flex-col">
<div class="flex justify-end">
<button wire:click="$set('createModal', false)" class="text-accent p-2 m-2 cursor-pointer rounded-full bg-zinc-800 absolute"><flux:icon.x-mark class="size-6"/></button>
</div>
<div class="bg-zinc-700">
<h3 class="text-2xl content-cente p-8 text-center border-b border-zinc-600">New Color</h3>
</div>
<div class="py-8 px-8">
<form class="flex flex-col gap-4" wire:submit="create">
<div class="flex justify-center gap-8 flex-col">
<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>
</x-modal>
</section>