6297ac6c88
Enhanced the terminal server/container selection with a new searchable datalist component: **Terminal View Changes:** - Replaced `x-forms.select` with `x-forms.datalist` for server/container selection - Added search functionality for filtering servers and containers - Fixed form validation by adding hidden input for proper HTML5 validation - Prevented error messages when clearing selection (sets to 'default') **Datalist Component (Single Selection):** - Implemented Alpine.js-powered dropdown with search functionality - Added visual dropdown arrow that rotates when opened - Proper entangle binding for wire:model support - Keyboard support (Escape to close) - Click outside to close behavior - Disabled options filtering (skips disabled options) - Consistent styling with input/textarea components **Styling Improvements:** - Explicit background colors: `bg-white` (light) and `dark:bg-coolgray-100` (dark) - Proper ring border: `ring-1 ring-inset ring-neutral-200 dark:ring-coolgray-300` - Focus states: `focus-within:ring-2 focus-within:ring-coollabs dark:focus-within:ring-warning` - Text colors: `text-black dark:text-white` - Added custom scrollbar styling for dropdown lists - Wire:dirty state support for visual feedback - Proper padding and spacing (`py-1.5`, `px-1`, `px-2`) **Multiple Selection Mode:** - Also updated for consistent styling and scrollbar support - Added proper background colors and focus states 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
91 lines
2.6 KiB
PHP
91 lines
2.6 KiB
PHP
<?php
|
|
|
|
namespace App\Livewire\Terminal;
|
|
|
|
use App\Models\Server;
|
|
use Livewire\Attributes\On;
|
|
use Livewire\Component;
|
|
|
|
class Index extends Component
|
|
{
|
|
public $selected_uuid = 'default';
|
|
|
|
public $servers = [];
|
|
|
|
public $containers = [];
|
|
|
|
public bool $isLoadingContainers = true;
|
|
|
|
public function mount()
|
|
{
|
|
$this->servers = Server::isReachable()->get()->filter(function ($server) {
|
|
return $server->isTerminalEnabled();
|
|
});
|
|
}
|
|
|
|
public function loadContainers()
|
|
{
|
|
try {
|
|
$this->containers = $this->getAllActiveContainers();
|
|
} catch (\Exception $e) {
|
|
return handleError($e, $this);
|
|
} finally {
|
|
$this->isLoadingContainers = false;
|
|
}
|
|
}
|
|
|
|
private function getAllActiveContainers()
|
|
{
|
|
return collect($this->servers)->flatMap(function ($server) {
|
|
if (! $server->isFunctional()) {
|
|
return [];
|
|
}
|
|
|
|
return $server->loadAllContainers()->map(function ($container) use ($server) {
|
|
$state = data_get_str($container, 'State')->lower();
|
|
if ($state->contains('running')) {
|
|
return [
|
|
'name' => data_get($container, 'Names'),
|
|
'connection_name' => data_get($container, 'Names'),
|
|
'uuid' => data_get($container, 'Names'),
|
|
'status' => data_get_str($container, 'State')->lower(),
|
|
'server' => $server,
|
|
'server_uuid' => $server->uuid,
|
|
];
|
|
}
|
|
|
|
return null;
|
|
})->filter();
|
|
})->sortBy('name');
|
|
}
|
|
|
|
public function updatedSelectedUuid()
|
|
{
|
|
if ($this->selected_uuid === 'default') {
|
|
// When cleared to default, do nothing (no error message)
|
|
return;
|
|
}
|
|
$this->connectToContainer();
|
|
}
|
|
|
|
#[On('connectToContainer')]
|
|
public function connectToContainer()
|
|
{
|
|
if ($this->selected_uuid === 'default') {
|
|
$this->dispatch('error', 'Please select a server or a container.');
|
|
|
|
return;
|
|
}
|
|
$container = collect($this->containers)->firstWhere('uuid', $this->selected_uuid);
|
|
$this->dispatch('send-terminal-command',
|
|
isset($container),
|
|
$container['connection_name'] ?? $this->selected_uuid,
|
|
$container['server_uuid'] ?? $this->selected_uuid
|
|
);
|
|
}
|
|
|
|
public function render()
|
|
{
|
|
return view('livewire.terminal.index');
|
|
}
|
|
}
|