fixed Database Error while creating new color
This commit is contained in:
@@ -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) {
|
||||
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user