fixed Color & Type View and Tables
This commit is contained in:
@@ -7,7 +7,9 @@
|
||||
</x-slot>
|
||||
|
||||
<x-slot name="headerright">
|
||||
<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>
|
||||
<flux:modal.trigger name="createModal">
|
||||
<flux:button variant="primary" class="bg-nuke-400 hover:bg-nuke-300">Create Color</flux:button>
|
||||
</flux:modal.trigger>
|
||||
</x-slot>
|
||||
</x-header>
|
||||
|
||||
@@ -25,16 +27,15 @@
|
||||
</x-slot>
|
||||
|
||||
@foreach ($colors as $color)
|
||||
<tr wire:key="{{ $color->id }}" class="border-b border-zinc-300">
|
||||
<tr wire:key="{{ $color->id }}" class="border-b border-blackout-950">
|
||||
<x-table.item><p class="p-4 px-3 pl-6 font-bold">{{ $color->name }}</p></x-table.item>
|
||||
<x-table.item><div class="p-4 px-3 mx-3 h-8 rounded" style="background-color: {{ $color->hex }}"></div></x-table.item>
|
||||
<x-table.item><p class="p-4 px-3 text-left">{{ $color->hex }}</p></x-table.item>
|
||||
<x-table.item><p class="p-4 px-3"></p></x-table.item>
|
||||
<x-table.item>
|
||||
<div class="flex flex-row gap-4 justify-end pr-8">
|
||||
<button type="button" wire:click="edit({{ $color->id }})" x-on:click="$wire.editModal = true" class="text-accent p-4 cursor-pointer flex flex-row gap-2"><flux:icon.pencil/>Edit</button>
|
||||
|
||||
<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>
|
||||
<flux:button wire:click="edit({{ $color->id }})" icon="pencil">Edit</flux:button>
|
||||
<flux:button wire:click="deleteModal({{ $color->id }})" icon="x-mark">Delete</flux:button>
|
||||
</div>
|
||||
</x-table.item>
|
||||
</tr>
|
||||
@@ -48,51 +49,65 @@
|
||||
</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>
|
||||
<flux:modal wire:model.self='createModal' name="createModal" class="md:w-128">
|
||||
<form wire:submit.prevent="create">
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<flux:heading size="lg" class="text-nuke-400">Create color</flux:heading>
|
||||
<flux:text class="mt-2">Create a new color.</flux:text>
|
||||
</div>
|
||||
<flux:input label="Name" wire:model="name" placeholder="Color Name" required />
|
||||
<flux:input label="hex" wire:model="hex" type="color" required />
|
||||
<div class="flex gap-2">
|
||||
<flux:spacer />
|
||||
<flux:button variant="ghost" wire:click='cancel'>Cancel</flux:button>
|
||||
<flux:button type="submit" variant="primary" class="bg-nuke-400 hover:bg-nuke-500">Create</flux:button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</x-modal>
|
||||
</form>
|
||||
</flux:modal>
|
||||
|
||||
<!-- Edit Form -->
|
||||
|
||||
<x-modal wire:model="editModal" >
|
||||
<div class="flex justify-center flex-col">
|
||||
<div class="flex justify-end">
|
||||
<button wire:click="$set('editModal', false)" class="text-accent p-2 m-2 cursor-pointer rounded-full bg-zinc-800 absolute"><flux:icon.x-mark class="size-6"/></button>
|
||||
@empty($color)
|
||||
@else
|
||||
<flux:modal wire:model.self='editModal' name="editModal" class="md:w-128">
|
||||
<form wire:submit.prevent="save({{ $editid }})">
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<flux:heading size="lg" class="text-etheral-300">Edit color</flux:heading>
|
||||
<flux:text class="mt-2">Edit an existing color.</flux:text>
|
||||
</div>
|
||||
<div class="bg-zinc-700">
|
||||
<h3 class="text-2xl content-cente p-8 text-center border-b border-zinc-600">Edit Color</h3>
|
||||
</div>
|
||||
<div class="py-8 px-8">
|
||||
<form class="flex flex-col gap-4" wire:submit="save({{ $color->id }})">
|
||||
<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>
|
||||
|
||||
|
||||
<flux:input label="Name" wire:model="name" placeholder="Color Name" required />
|
||||
<flux:input label="hex" wire:model="hex" type="color" required />
|
||||
<div class="flex gap-2">
|
||||
<flux:spacer />
|
||||
<flux:button variant="ghost" wire:click='cancel'>Cancel</flux:button>
|
||||
<flux:button type="submit" variant="primary" class="bg-etheral-300 hover:bg-etheral-400">Save</flux:button>
|
||||
</div>
|
||||
</div>
|
||||
</x-modal>
|
||||
</form>
|
||||
</flux:modal>
|
||||
@endempty
|
||||
|
||||
<!-- Delete Form -->
|
||||
<flux:modal wire:model.self='deleteModal' name="deleteModal" class="md:w-128">
|
||||
<form wire:submit.prevent="delete({{ $deleteid }})">
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<flux:heading size="lg" class="text-red-500">Delete color?</flux:heading>
|
||||
<flux:text class="mt-2">
|
||||
<p>You're about to delete this color.</p>
|
||||
<p>This action cannot be reversed.</p>
|
||||
</flux:text>
|
||||
</div>
|
||||
<flux:input label="Name" wire:model="name" disabled placeholder="Color Name" required />
|
||||
<flux:input label="hex" wire:model="hex" disabled type="color" required />
|
||||
<div class="flex gap-2">
|
||||
<flux:spacer />
|
||||
<flux:button variant="ghost" wire:click='cancel'>Cancel</flux:button>
|
||||
<flux:button type="submit" variant="danger">Delete color</flux:button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</flux:modal>
|
||||
</section>
|
||||
@@ -1,3 +1,111 @@
|
||||
<div>
|
||||
{{-- In work, do what you enjoy. --}}
|
||||
</div>
|
||||
<section>
|
||||
<x-header>
|
||||
{{ __('Types') }}
|
||||
|
||||
<x-slot name="headerleft">
|
||||
<input type="text" placeholder="Search..." wire:model.live="search" class="bg-zinc-800 rounded focus:border-accent focus:ring-accent" />
|
||||
</x-slot>
|
||||
|
||||
<x-slot name="headerright">
|
||||
<flux:modal.trigger name="createModal">
|
||||
<flux:button variant="primary" class="bg-nuke-400 hover:bg-nuke-300">Create Type</flux:button>
|
||||
</flux:modal.trigger> </x-slot>
|
||||
</x-header>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="container m-auto my-8">
|
||||
<x-table>
|
||||
<x-slot name="tableheader">
|
||||
<x-table.header>Name</x-table.header>
|
||||
<x-table.header>Description</x-table.header>
|
||||
<x-table.header>Rolls</x-table.header>
|
||||
<x-table.header class="w-1/6"></x-table.header>
|
||||
</x-slot>
|
||||
|
||||
@foreach ($types as $type)
|
||||
<tr wire:key="{{ $type->id }}" class="border-b border-blackout-950">
|
||||
<x-table.item><p class="p-4 px-3 pl-6 font-bold">{{ $type->name }}</p></x-table.item>
|
||||
<x-table.item><p class="p-4 px-3">{{ $type->description }}</p></x-table.item>
|
||||
<x-table.item><p class="p-4 px-3"></p></x-table.item>
|
||||
<x-table.item>
|
||||
<div class="flex flex-row gap-4 justify-end pr-8">
|
||||
<flux:button wire:click="edit({{ $type->id }})" icon="pencil">Edit</flux:button>
|
||||
<flux:button wire:click="deleteModal({{ $type->id }})" icon="x-mark">Delete</flux:button>
|
||||
</div>
|
||||
</x-table.item>
|
||||
</tr>
|
||||
@endforeach
|
||||
|
||||
<x-slot name="pagination">
|
||||
{{ $types->links() }}
|
||||
</x-slot>
|
||||
</x-table>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Create Form -->
|
||||
<flux:modal wire:model.self='createModal' name="createModal" class="md:w-128">
|
||||
<form wire:submit.prevent="create">
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<flux:heading size="lg" class="text-nuke-400">Create type</flux:heading>
|
||||
<flux:text class="mt-2">Create a new type.</flux:text>
|
||||
</div>
|
||||
<flux:input label="Name" wire:model="name" placeholder="Type Name" required />
|
||||
<flux:textarea label="Description" wire:model="description" placeholder="Description" />
|
||||
<div class="flex gap-2">
|
||||
<flux:spacer />
|
||||
<flux:button variant="ghost" wire:click='cancel'>Cancel</flux:button>
|
||||
<flux:button type="submit" variant="primary" class="bg-nuke-400 hover:bg-nuke-500">Create</flux:button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</flux:modal>
|
||||
|
||||
<!-- Edit Form -->
|
||||
@empty($type)
|
||||
@else
|
||||
<flux:modal wire:model.self='editModal' name="editModal" class="md:w-128">
|
||||
<form wire:submit.prevent="save({{ $editid }})">
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<flux:heading size="lg" class="text-etheral-300">Edit type</flux:heading>
|
||||
<flux:text class="mt-2">Edit an existing type.</flux:text>
|
||||
</div>
|
||||
<flux:input label="Name" wire:model="name" placeholder="Type Name" required />
|
||||
<flux:textarea label="Description" wire:model="description" placeholder="Description" />
|
||||
<div class="flex gap-2">
|
||||
<flux:spacer />
|
||||
<flux:button variant="ghost" wire:click='cancel'>Cancel</flux:button>
|
||||
<flux:button type="submit" variant="primary" class="bg-etheral-300 hover:bg-etheral-400">Save</flux:button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</flux:modal>
|
||||
@endempty
|
||||
|
||||
<!-- Delete Form -->
|
||||
<flux:modal wire:model.self='deleteModal' name="deleteModal" class="md:w-128">
|
||||
<form wire:submit.prevent="delete({{ $deleteid }})">
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<flux:heading size="lg" class="text-red-500">Delete type?</flux:heading>
|
||||
<flux:text class="mt-2">
|
||||
<p>You're about to delete this type.</p>
|
||||
<p>This action cannot be reversed.</p>
|
||||
</flux:text>
|
||||
</div>
|
||||
<flux:input label="Name" wire:model="name" disabled placeholder="Type Name" required />
|
||||
<flux:textarea label="Description" disabled wire:model="description" placeholder="Description" />
|
||||
<div class="flex gap-2">
|
||||
<flux:spacer />
|
||||
<flux:button variant="ghost" wire:click='cancel'>Cancel</flux:button>
|
||||
<flux:button type="submit" variant="danger">Delete type</flux:button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</flux:modal>
|
||||
|
||||
</section>
|
||||
Reference in New Issue
Block a user