feat: add rule form visibility toggle in Proxmox Firewall component to enhance user interaction during rule creation and editing

This commit is contained in:
2025-12-01 13:24:55 -05:00
parent 2d2abc1499
commit 0af601528e
2 changed files with 8 additions and 4 deletions

View File

@@ -16,6 +16,7 @@ class Firewall extends Component
public bool $loading = false;
public string $error = '';
public bool $showErrorModal = false;
public bool $showRuleForm = false;
// Rule creation/editing
public ?int $editingRulePos = null;
@@ -188,6 +189,7 @@ class Firewall extends Component
{
$this->resetRuleForm();
$this->editingRulePos = null;
$this->showRuleForm = true;
}
public function startEditRule(int $pos): void
@@ -195,6 +197,7 @@ class Firewall extends Component
$rule = collect($this->rules)->firstWhere('pos', $pos);
if ($rule) {
$this->editingRulePos = $pos;
$this->showRuleForm = true;
$this->ruleAction = $rule['action'] ?? 'ACCEPT';
$this->ruleSource = $rule['source'] ?? '';
$this->ruleDest = $rule['dest'] ?? '';
@@ -262,6 +265,7 @@ class Firewall extends Component
$this->notify('Rule ' . ($this->editingRulePos !== null ? 'updated' : 'created') . ' successfully', 'success');
$this->resetRuleForm();
$this->editingRulePos = null;
$this->showRuleForm = false;
$this->loadFirewallRules();
} else {
$message = $response->json()['errors'][0]['message'] ?? 'Unknown error';

View File

@@ -123,11 +123,11 @@
</div>
<!-- Rule Form Modal -->
@if($editingRulePos !== null || (empty($rules) && !$editingRulePos))
<div class="bg-background-secondary border border-neutral/20 rounded-lg p-4 mb-4" x-data="{ showForm: true }" x-show="showForm">
@if($showRuleForm)
<div class="bg-background-secondary border border-neutral/20 rounded-lg p-4 mb-4">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold">{{ $editingRulePos !== null ? 'Edit Rule' : 'Create New Rule' }}</h3>
<button @click="showForm = false; $wire.resetRuleForm(); $wire.editingRulePos = null" class="text-base/50 hover:text-base">
<button wire:click="$set('showRuleForm', false); $set('editingRulePos', null); resetRuleForm()" class="text-base/50 hover:text-base">
<x-ri-close-line class="size-5" />
</button>
</div>
@@ -200,7 +200,7 @@
Save Rule
</button>
<button
@click="showForm = false; $wire.resetRuleForm(); $wire.editingRulePos = null"
wire:click="$set('showRuleForm', false); $set('editingRulePos', null); resetRuleForm()"
class="px-4 py-2 bg-background-secondary border border-neutral rounded-lg hover:bg-background transition-colors text-sm font-medium">
Cancel
</button>