fix: restore Component.php and move icon functionality to Overview.php only

- Reverted Component.php to original state (was breaking all Livewire modals)
- Icon properties and methods now only in Overview.php where they belong
- Icon button only shows as clickable on Overview page
- Other pages show the icon as display-only (not a button)
- Icon modal only renders on Overview page
- Fixed saveIcon method to accept icon and color arguments
This commit is contained in:
2025-12-06 09:35:02 -05:00
parent f0b401767b
commit 1c677c45e0
3 changed files with 62 additions and 61 deletions

View File

@@ -24,14 +24,6 @@ class Component extends BaseComponent
*/
public bool $fastPolling = false;
/**
* Server icon customization properties
*/
public bool $showIconModal = false;
public string $selectedIcon = '';
public string $selectedIconColor = '';
public string $iconSearchQuery = ''; // Legacy property for stale sessions
/**
* Mount the component with the server.
*/
@@ -45,59 +37,6 @@ class Component extends BaseComponent
$this->loadVmStatus();
}
/**
* Open the icon customization modal.
*/
public function openIconModal(): void
{
// Load current icon settings
$this->selectedIcon = $this->server->user_set_icon ?? '';
$this->selectedIconColor = $this->server->user_set_icon_color ?? '';
$this->showIconModal = true;
}
/**
* Close the icon customization modal.
*/
public function closeIconModal(): void
{
$this->showIconModal = false;
}
/**
* Save the selected icon and color.
*/
public function saveIcon(string $icon, string $color): void
{
$this->server->update([
'user_set_icon' => $icon ?: null,
'user_set_icon_color' => $color ?: null,
]);
$this->selectedIcon = $icon;
$this->selectedIconColor = $color;
$this->showIconModal = false;
$this->notify('Server icon updated successfully', 'success');
}
/**
* Reset the server icon to default.
*/
public function resetIcon(): void
{
$this->server->update([
'user_set_icon' => null,
'user_set_icon_color' => null,
]);
$this->selectedIcon = '';
$this->selectedIconColor = '';
$this->showIconModal = false;
$this->notify('Server icon reset to default', 'success');
}
/**
* Perform a VM lifecycle action (start/stop/etc).
*/

View File

@@ -22,6 +22,12 @@ class Overview extends Component
public $isEditingPassword = false;
public $passwordError = '';
// Icon customization properties
public bool $showIconModal = false;
public string $selectedIcon = '';
public string $selectedIconColor = '#3b82f6';
public string $iconSearchQuery = '';
public string $cpuTimeRange = 'hour';
public string $cpuAggregation = 'average';
@@ -521,6 +527,44 @@ class Overview extends Component
}
}
// Icon customization methods
public function openIconModal()
{
$this->selectedIcon = $this->server->user_set_icon ?? '';
$this->selectedIconColor = $this->server->user_set_icon_color ?? '#3b82f6';
$this->iconSearchQuery = '';
$this->showIconModal = true;
}
public function closeIconModal()
{
$this->showIconModal = false;
}
public function saveIcon($icon = null, $color = null)
{
$this->server->update([
'user_set_icon' => $icon ?: null,
'user_set_icon_color' => $color ?: null,
]);
$this->showIconModal = false;
$this->notify('Icon saved successfully', 'success');
}
public function resetIcon()
{
$this->server->update([
'user_set_icon' => null,
'user_set_icon_color' => null,
]);
$this->selectedIcon = '';
$this->selectedIconColor = '#3b82f6';
$this->showIconModal = false;
$this->notify('Icon reset to default', 'success');
}
public function render()
{
return view('proxmox::overview')->layoutData([

View File

@@ -48,6 +48,7 @@
<div class="flex flex-col gap-4 pb-6 pt-6 lg:flex-row lg:items-center lg:justify-between">
<div class="flex items-center gap-3">
<!-- Server Icon -->
@if($view === 'overview')
<button
wire:click="openIconModal"
class="bg-secondary/10 p-2 rounded-lg hover:bg-secondary/20 transition-colors cursor-pointer"
@@ -66,6 +67,21 @@
<x-ri-server-line class="size-5 text-secondary" />
@endif
</button>
@else
<div class="bg-secondary/10 p-2 rounded-lg">
@if($server->user_set_icon)
@php
$iconColor = $server->user_set_icon_color ?: 'currentColor';
$iconName = str_starts_with($server->user_set_icon, 'ri-')
? $server->user_set_icon
: 'ri-' . $server->user_set_icon;
@endphp
<x-dynamic-component :component="$iconName" class="size-5" style="color: {{ $iconColor }}" />
@else
<x-ri-server-line class="size-5 text-secondary" />
@endif
</div>
@endif
<span class="text-2xl font-bold">
{{ $server->hostname }}
</span>
@@ -926,6 +942,7 @@
</div>
</div>
@if($view === 'overview')
<!-- Server Icon Customization Modal -->
<div x-data="{
open: @entangle('showIconModal'),
@@ -1074,6 +1091,7 @@
</div>
</div>
</div>
@endif
@else
@php