mirror of
https://github.com/usetrmnl/byos_laravel.git
synced 2026-01-13 15:07:49 +00:00
384 lines
18 KiB
PHP
384 lines
18 KiB
PHP
<?php
|
|
|
|
use App\Models\DevicePalette;
|
|
use Livewire\Volt\Component;
|
|
|
|
new class extends Component
|
|
{
|
|
public $devicePalettes;
|
|
|
|
public $name;
|
|
|
|
public $description;
|
|
|
|
public $grays = 2;
|
|
|
|
public $colors = [];
|
|
|
|
public $framework_class = '';
|
|
|
|
public $colorInput = '';
|
|
|
|
protected $rules = [
|
|
'name' => 'required|string|max:255|unique:device_palettes,name',
|
|
'description' => 'nullable|string|max:255',
|
|
'grays' => 'required|integer|min:1|max:256',
|
|
'colors' => 'nullable|array',
|
|
'colors.*' => 'string|regex:/^#[0-9A-Fa-f]{6}$/',
|
|
'framework_class' => 'nullable|string|max:255',
|
|
];
|
|
|
|
public function mount()
|
|
{
|
|
$this->devicePalettes = DevicePalette::all();
|
|
|
|
return view('livewire.device-palettes.index');
|
|
}
|
|
|
|
public function addColor(): void
|
|
{
|
|
$this->validate(['colorInput' => 'required|string|regex:/^#[0-9A-Fa-f]{6}$/'], [
|
|
'colorInput.regex' => 'Color must be a valid hex color (e.g., #FF0000)',
|
|
]);
|
|
|
|
if (! in_array($this->colorInput, $this->colors)) {
|
|
$this->colors[] = $this->colorInput;
|
|
}
|
|
|
|
$this->colorInput = '';
|
|
}
|
|
|
|
public function removeColor(int $index): void
|
|
{
|
|
unset($this->colors[$index]);
|
|
$this->colors = array_values($this->colors);
|
|
}
|
|
|
|
public $editingDevicePaletteId;
|
|
|
|
public $viewingDevicePaletteId;
|
|
|
|
public function openDevicePaletteModal(?string $devicePaletteId = null, bool $viewOnly = false): void
|
|
{
|
|
if ($devicePaletteId) {
|
|
$devicePalette = DevicePalette::findOrFail($devicePaletteId);
|
|
|
|
if ($viewOnly) {
|
|
$this->viewingDevicePaletteId = $devicePalette->id;
|
|
$this->editingDevicePaletteId = null;
|
|
} else {
|
|
$this->editingDevicePaletteId = $devicePalette->id;
|
|
$this->viewingDevicePaletteId = null;
|
|
}
|
|
|
|
$this->name = $devicePalette->name;
|
|
$this->description = $devicePalette->description;
|
|
$this->grays = $devicePalette->grays;
|
|
|
|
// Ensure colors is always an array and properly decoded
|
|
// The model cast should handle JSON decoding, but we'll be explicit
|
|
$colors = $devicePalette->getAttribute('colors');
|
|
|
|
if ($colors === null) {
|
|
$this->colors = [];
|
|
} elseif (is_string($colors)) {
|
|
$decoded = json_decode($colors, true);
|
|
$this->colors = is_array($decoded) ? array_values($decoded) : [];
|
|
} elseif (is_array($colors)) {
|
|
$this->colors = array_values($colors); // Re-index array
|
|
} else {
|
|
$this->colors = [];
|
|
}
|
|
|
|
$this->framework_class = $devicePalette->framework_class;
|
|
} else {
|
|
$this->editingDevicePaletteId = null;
|
|
$this->viewingDevicePaletteId = null;
|
|
$this->reset(['name', 'description', 'grays', 'colors', 'framework_class']);
|
|
}
|
|
|
|
$this->colorInput = '';
|
|
}
|
|
|
|
public function saveDevicePalette(): void
|
|
{
|
|
$rules = [
|
|
'name' => 'required|string|max:255',
|
|
'description' => 'nullable|string|max:255',
|
|
'grays' => 'required|integer|min:1|max:256',
|
|
'colors' => 'nullable|array',
|
|
'colors.*' => 'string|regex:/^#[0-9A-Fa-f]{6}$/',
|
|
'framework_class' => 'nullable|string|max:255',
|
|
];
|
|
|
|
if ($this->editingDevicePaletteId) {
|
|
$rules['name'] = 'required|string|max:255|unique:device_palettes,name,'.$this->editingDevicePaletteId;
|
|
} else {
|
|
$rules['name'] = 'required|string|max:255|unique:device_palettes,name';
|
|
}
|
|
|
|
$this->validate($rules);
|
|
|
|
if ($this->editingDevicePaletteId) {
|
|
$devicePalette = DevicePalette::findOrFail($this->editingDevicePaletteId);
|
|
$devicePalette->update([
|
|
'name' => $this->name,
|
|
'description' => $this->description,
|
|
'grays' => $this->grays,
|
|
'colors' => ! empty($this->colors) ? $this->colors : null,
|
|
'framework_class' => $this->framework_class,
|
|
]);
|
|
$message = 'Device palette updated successfully.';
|
|
} else {
|
|
DevicePalette::create([
|
|
'name' => $this->name,
|
|
'description' => $this->description,
|
|
'grays' => $this->grays,
|
|
'colors' => ! empty($this->colors) ? $this->colors : null,
|
|
'framework_class' => $this->framework_class,
|
|
'source' => 'manual',
|
|
]);
|
|
$message = 'Device palette created successfully.';
|
|
}
|
|
|
|
$this->reset(['name', 'description', 'grays', 'colors', 'framework_class', 'colorInput', 'editingDevicePaletteId', 'viewingDevicePaletteId']);
|
|
Flux::modal('device-palette-modal')->close();
|
|
|
|
$this->devicePalettes = DevicePalette::all();
|
|
session()->flash('message', $message);
|
|
}
|
|
|
|
public function deleteDevicePalette(string $devicePaletteId): void
|
|
{
|
|
$devicePalette = DevicePalette::findOrFail($devicePaletteId);
|
|
$devicePalette->delete();
|
|
|
|
$this->devicePalettes = DevicePalette::all();
|
|
session()->flash('message', 'Device palette deleted successfully.');
|
|
}
|
|
|
|
public function duplicateDevicePalette(string $devicePaletteId): void
|
|
{
|
|
$devicePalette = DevicePalette::findOrFail($devicePaletteId);
|
|
|
|
$this->editingDevicePaletteId = null;
|
|
$this->viewingDevicePaletteId = null;
|
|
$this->name = $devicePalette->name.' (Copy)';
|
|
$this->description = $devicePalette->description;
|
|
$this->grays = $devicePalette->grays;
|
|
|
|
$colors = $devicePalette->getAttribute('colors');
|
|
if ($colors === null) {
|
|
$this->colors = [];
|
|
} elseif (is_string($colors)) {
|
|
$decoded = json_decode($colors, true);
|
|
$this->colors = is_array($decoded) ? array_values($decoded) : [];
|
|
} elseif (is_array($colors)) {
|
|
$this->colors = array_values($colors);
|
|
} else {
|
|
$this->colors = [];
|
|
}
|
|
|
|
$this->framework_class = $devicePalette->framework_class;
|
|
$this->colorInput = '';
|
|
|
|
$this->js('Flux.modal("device-palette-modal").show()');
|
|
}
|
|
}
|
|
|
|
?>
|
|
|
|
<div>
|
|
<div class="py-12">
|
|
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
|
|
<div class="flex justify-between items-center mb-6">
|
|
<div class="flex items-center space-x-2">
|
|
<h2 class="text-2xl font-semibold dark:text-gray-100">Device Palettes</h2>
|
|
<flux:dropdown>
|
|
<flux:button icon="chevron-down" variant="ghost"></flux:button>
|
|
<flux:menu>
|
|
<flux:menu.item href="{{ route('devices') }}">Devices</flux:menu.item>
|
|
<flux:menu.item href="{{ route('device-models.index') }}">Device Models</flux:menu.item>
|
|
</flux:menu>
|
|
</flux:dropdown>
|
|
</div>
|
|
<flux:modal.trigger name="device-palette-modal">
|
|
<flux:button wire:click="openDevicePaletteModal()" icon="plus" variant="primary">Add Device Palette</flux:button>
|
|
</flux:modal.trigger>
|
|
</div>
|
|
@if (session()->has('message'))
|
|
<div class="mb-4">
|
|
<flux:callout variant="success" icon="check-circle" heading=" {{ session('message') }}">
|
|
<x-slot name="controls">
|
|
<flux:button icon="x-mark" variant="ghost"
|
|
x-on:click="$el.closest('[data-flux-callout]').remove()"/>
|
|
</x-slot>
|
|
</flux:callout>
|
|
</div>
|
|
@endif
|
|
|
|
<flux:modal name="device-palette-modal" class="md:w-96">
|
|
<div class="space-y-6">
|
|
<div>
|
|
<flux:heading size="lg">
|
|
@if ($viewingDevicePaletteId)
|
|
View Device Palette
|
|
@elseif ($editingDevicePaletteId)
|
|
Edit Device Palette
|
|
@else
|
|
Add Device Palette
|
|
@endif
|
|
</flux:heading>
|
|
</div>
|
|
|
|
<form wire:submit="saveDevicePalette">
|
|
<div class="mb-4">
|
|
<flux:input label="Name (Identifier)" wire:model="name" id="name" class="block mt-1 w-full" type="text"
|
|
name="name" autofocus :disabled="$viewingDevicePaletteId"/>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<flux:input label="Description" wire:model="description" id="description" class="block mt-1 w-full" type="text"
|
|
name="description" :disabled="$viewingDevicePaletteId"/>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<flux:input label="Grays" wire:model="grays" id="grays" class="block mt-1 w-full"
|
|
type="number"
|
|
name="grays" min="1" max="256" :disabled="$viewingDevicePaletteId"/>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<flux:input label="Framework Class" wire:model="framework_class" id="framework_class"
|
|
class="block mt-1 w-full" type="text"
|
|
name="framework_class" :disabled="$viewingDevicePaletteId"/>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<flux:label>Colors</flux:label>
|
|
@if (!$viewingDevicePaletteId)
|
|
<div class="flex gap-2 mb-2">
|
|
<flux:input wire:model="colorInput" placeholder="#FF0000" class="flex-1"/>
|
|
<flux:button type="button" wire:click="addColor" variant="ghost">Add</flux:button>
|
|
</div>
|
|
@endif
|
|
<div class="flex flex-wrap gap-2">
|
|
@if (!empty($colors) && is_array($colors) && count($colors) > 0)
|
|
@foreach ($colors as $index => $color)
|
|
@if (!empty($color))
|
|
<div wire:key="color-{{ $editingDevicePaletteId ?? $viewingDevicePaletteId ?? 'new' }}-{{ $index }}-{{ $color }}" class="flex items-center gap-2 px-3 py-1 bg-zinc-100 dark:bg-zinc-800 rounded">
|
|
<div class="w-4 h-4 rounded border border-zinc-300 dark:border-zinc-600" style="background-color: {{ $color }}"></div>
|
|
<span class="text-sm">{{ $color }}</span>
|
|
@if (!$viewingDevicePaletteId)
|
|
<flux:button type="button" wire:click="removeColor({{ $index }})" icon="x-mark" variant="ghost" size="sm"></flux:button>
|
|
@endif
|
|
</div>
|
|
@endif
|
|
@endforeach
|
|
@endif
|
|
</div>
|
|
@if (!$viewingDevicePaletteId)
|
|
<p class="mt-1 text-xs text-zinc-500">Leave empty for grayscale-only palette</p>
|
|
@endif
|
|
</div>
|
|
|
|
@if (!$viewingDevicePaletteId)
|
|
<div class="flex">
|
|
<flux:spacer/>
|
|
<flux:button type="submit" variant="primary">{{ $editingDevicePaletteId ? 'Update' : 'Create' }} Device Palette</flux:button>
|
|
</div>
|
|
@else
|
|
<div class="flex">
|
|
<flux:spacer/>
|
|
<flux:button type="button" wire:click="duplicateDevicePalette('{{ $viewingDevicePaletteId }}')" variant="primary">Duplicate</flux:button>
|
|
</div>
|
|
@endif
|
|
</form>
|
|
</div>
|
|
</flux:modal>
|
|
|
|
<table
|
|
class="min-w-full table-fixed text-zinc-800 divide-y divide-zinc-800/10 dark:divide-white/20 text-zinc-800"
|
|
data-flux-table>
|
|
<thead data-flux-columns>
|
|
<tr>
|
|
<th class="py-3 px-3 first:pl-0 last:pr-0 text-left text-sm font-medium text-zinc-800 dark:text-white"
|
|
data-flux-column>
|
|
<div class="whitespace-nowrap flex group-[]/right-align:justify-end">Description</div>
|
|
</th>
|
|
<th class="py-3 px-3 first:pl-0 last:pr-0 text-left text-sm font-medium text-zinc-800 dark:text-white"
|
|
data-flux-column>
|
|
<div class="whitespace-nowrap flex group-[]/right-align:justify-end">Grays</div>
|
|
</th>
|
|
<th class="py-3 px-3 first:pl-0 last:pr-0 text-left text-sm font-medium text-zinc-800 dark:text-white"
|
|
data-flux-column>
|
|
<div class="whitespace-nowrap flex group-[]/right-align:justify-end">Colors</div>
|
|
</th>
|
|
<th class="py-3 px-3 first:pl-0 last:pr-0 text-left text-sm font-medium text-zinc-800 dark:text-white"
|
|
data-flux-column>
|
|
<div class="whitespace-nowrap flex group-[]/right-align:justify-end">Actions</div>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody class="divide-y divide-zinc-800/10 dark:divide-white/20" data-flux-rows>
|
|
@foreach ($devicePalettes as $devicePalette)
|
|
<tr data-flux-row>
|
|
<td class="py-3 px-3 first:pl-0 last:pr-0 text-sm whitespace-nowrap text-zinc-500 dark:text-zinc-300"
|
|
>
|
|
<div>
|
|
<div class="font-medium text-zinc-800 dark:text-white">{{ $devicePalette->description ?? $devicePalette->name }}</div>
|
|
<div class="text-xs text-zinc-500">{{ $devicePalette->name }}</div>
|
|
</div>
|
|
</td>
|
|
<td class="py-3 px-3 first:pl-0 last:pr-0 text-sm whitespace-nowrap text-zinc-500 dark:text-zinc-300"
|
|
>
|
|
{{ $devicePalette->grays }}
|
|
</td>
|
|
<td class="py-3 px-3 first:pl-0 last:pr-0 text-sm whitespace-nowrap text-zinc-500 dark:text-zinc-300"
|
|
>
|
|
@if ($devicePalette->colors)
|
|
<div class="flex gap-1">
|
|
@foreach ($devicePalette->colors as $color)
|
|
<div class="w-4 h-4 rounded border border-zinc-300 dark:border-zinc-600" style="background-color: {{ $color }}"></div>
|
|
@endforeach
|
|
<span class="ml-2">({{ count($devicePalette->colors) }})</span>
|
|
</div>
|
|
@else
|
|
<span class="text-zinc-400">Grayscale only</span>
|
|
@endif
|
|
</td>
|
|
<td class="py-3 px-3 first:pl-0 last:pr-0 text-sm whitespace-nowrap font-medium text-zinc-800 dark:text-white"
|
|
>
|
|
<div class="flex items-center gap-4">
|
|
<flux:button.group>
|
|
@if ($devicePalette->source === 'api')
|
|
<flux:modal.trigger name="device-palette-modal">
|
|
<flux:button wire:click="openDevicePaletteModal('{{ $devicePalette->id }}', true)" icon="eye"
|
|
iconVariant="outline">
|
|
</flux:button>
|
|
</flux:modal.trigger>
|
|
<flux:button wire:click="duplicateDevicePalette('{{ $devicePalette->id }}')" icon="document-duplicate"
|
|
iconVariant="outline">
|
|
</flux:button>
|
|
@else
|
|
<flux:modal.trigger name="device-palette-modal">
|
|
<flux:button wire:click="openDevicePaletteModal('{{ $devicePalette->id }}')" icon="pencil"
|
|
iconVariant="outline">
|
|
</flux:button>
|
|
</flux:modal.trigger>
|
|
<flux:button wire:click="deleteDevicePalette('{{ $devicePalette->id }}')" icon="trash"
|
|
iconVariant="outline">
|
|
</flux:button>
|
|
@endif
|
|
</flux:button.group>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|