feat: add rule form visibility toggle in Proxmox Firewall component to enhance user interaction during rule creation and editing
This commit is contained in:
@@ -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';
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user