fmt: use biome
This commit is contained in:
@@ -1,19 +1,19 @@
|
||||
import { Component, createSignal, createResource, For, Show } from 'solid-js';
|
||||
import { rulesApi } from '../api/client';
|
||||
import type { InterceptionRule } from '../types';
|
||||
import { Button } from './ui/Button';
|
||||
import { Card } from './ui/Card';
|
||||
import { Input } from './ui/Input';
|
||||
import { Select } from './ui/Select';
|
||||
import { Textarea } from './ui/Textarea';
|
||||
import { Component, createSignal, createResource, For, Show } from "solid-js";
|
||||
import { rulesApi } from "../api/client";
|
||||
import type { InterceptionRule } from "../types";
|
||||
import { Button } from "./ui/Button";
|
||||
import { Card } from "./ui/Card";
|
||||
import { Input } from "./ui/Input";
|
||||
import { Select } from "./ui/Select";
|
||||
import { Textarea } from "./ui/Textarea";
|
||||
|
||||
const RulesList: Component = () => {
|
||||
const [rules, { refetch }] = createResource(rulesApi.list);
|
||||
const [showEditor, setShowEditor] = createSignal(false);
|
||||
const [editingId, setEditingId] = createSignal<number | null>(null);
|
||||
const [editingMethod, setEditingMethod] = createSignal('');
|
||||
const [editingAction, setEditingAction] = createSignal<'passthrough' | 'modify' | 'replace'>('passthrough');
|
||||
const [editingResponse, setEditingResponse] = createSignal('');
|
||||
const [editingMethod, setEditingMethod] = createSignal("");
|
||||
const [editingAction, setEditingAction] = createSignal<"passthrough" | "modify" | "replace">("passthrough");
|
||||
const [editingResponse, setEditingResponse] = createSignal("");
|
||||
|
||||
const toggleRule = async (rule: InterceptionRule) => {
|
||||
try {
|
||||
@@ -22,13 +22,13 @@ const RulesList: Component = () => {
|
||||
});
|
||||
refetch();
|
||||
} catch (err) {
|
||||
console.error('Failed to toggle rule:', err);
|
||||
console.error("Failed to toggle rule:", err);
|
||||
alert(`Error: ${err}`);
|
||||
}
|
||||
};
|
||||
|
||||
const deleteRule = async (id: number) => {
|
||||
if (!confirm('Are you sure you want to delete this rule?')) return;
|
||||
if (!confirm("Are you sure you want to delete this rule?")) return;
|
||||
|
||||
try {
|
||||
if (id === editingId()) {
|
||||
@@ -37,14 +37,14 @@ const RulesList: Component = () => {
|
||||
await rulesApi.delete(id);
|
||||
refetch();
|
||||
} catch (err) {
|
||||
console.error('Failed to delete rule:', err);
|
||||
console.error("Failed to delete rule:", err);
|
||||
alert(`Error: ${err}`);
|
||||
}
|
||||
};
|
||||
|
||||
const createNewRule = async () => {
|
||||
if (!editingMethod()) {
|
||||
alert('Please enter a method name');
|
||||
alert("Please enter a method name");
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -52,14 +52,14 @@ const RulesList: Component = () => {
|
||||
await rulesApi.create({
|
||||
method_name: editingMethod(),
|
||||
action: editingAction(),
|
||||
custom_response: editingAction() === 'replace' ? editingResponse() : undefined,
|
||||
custom_response: editingAction() === "replace" ? editingResponse() : undefined,
|
||||
});
|
||||
setShowEditor(false);
|
||||
setEditingMethod('');
|
||||
setEditingResponse('');
|
||||
setEditingMethod("");
|
||||
setEditingResponse("");
|
||||
refetch();
|
||||
} catch (err) {
|
||||
console.error('Failed to create rule:', err);
|
||||
console.error("Failed to create rule:", err);
|
||||
alert(`Error: ${err}`);
|
||||
}
|
||||
};
|
||||
@@ -68,15 +68,15 @@ const RulesList: Component = () => {
|
||||
setEditingId(rule.id);
|
||||
setEditingMethod(rule.method_name);
|
||||
setEditingAction(rule.action);
|
||||
setEditingResponse(rule.custom_response || '');
|
||||
setEditingResponse(rule.custom_response || "");
|
||||
setShowEditor(true);
|
||||
};
|
||||
|
||||
const cancelEdit = () => {
|
||||
setEditingId(null);
|
||||
setEditingMethod('');
|
||||
setEditingAction('passthrough');
|
||||
setEditingResponse('');
|
||||
setEditingMethod("");
|
||||
setEditingAction("passthrough");
|
||||
setEditingResponse("");
|
||||
setShowEditor(false);
|
||||
};
|
||||
|
||||
@@ -88,7 +88,7 @@ const RulesList: Component = () => {
|
||||
}
|
||||
|
||||
if (!editingMethod()) {
|
||||
alert('Please enter a method name');
|
||||
alert("Please enter a method name");
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -96,12 +96,12 @@ const RulesList: Component = () => {
|
||||
await rulesApi.update(id, {
|
||||
method_name: editingMethod(),
|
||||
action: editingAction(),
|
||||
custom_response: editingAction() === 'replace' ? editingResponse() : undefined,
|
||||
custom_response: editingAction() === "replace" ? editingResponse() : undefined,
|
||||
});
|
||||
cancelEdit();
|
||||
refetch();
|
||||
} catch (err) {
|
||||
console.error('Failed to update rule:', err);
|
||||
console.error("Failed to update rule:", err);
|
||||
alert(`Error: ${err}`);
|
||||
}
|
||||
};
|
||||
@@ -119,20 +119,16 @@ const RulesList: Component = () => {
|
||||
}
|
||||
}}
|
||||
>
|
||||
{showEditor() ? 'Cancel' : '+ New Rule'}
|
||||
{showEditor() ? "Cancel" : "+ New Rule"}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Show when={showEditor()}>
|
||||
<Card class="p-6 mb-4">
|
||||
<h3 class="text-lg font-semibold mb-4">
|
||||
{editingId() !== null ? 'Edit Rule' : 'Create New Rule'}
|
||||
</h3>
|
||||
<h3 class="text-lg font-semibold mb-4">{editingId() !== null ? "Edit Rule" : "Create New Rule"}</h3>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">
|
||||
Method Name
|
||||
</label>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Method Name</label>
|
||||
<Input
|
||||
type="text"
|
||||
value={editingMethod()}
|
||||
@@ -142,9 +138,7 @@ const RulesList: Component = () => {
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">
|
||||
Action
|
||||
</label>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Action</label>
|
||||
<Select
|
||||
value={editingAction()}
|
||||
onChange={(e) => setEditingAction(e.currentTarget.value as any)}
|
||||
@@ -154,11 +148,9 @@ const RulesList: Component = () => {
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<Show when={editingAction() === 'replace'}>
|
||||
<Show when={editingAction() === "replace"}>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">
|
||||
Custom Response (JSON)
|
||||
</label>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Custom Response (JSON)</label>
|
||||
<Textarea
|
||||
value={editingResponse()}
|
||||
onInput={(e) => setEditingResponse(e.currentTarget.value)}
|
||||
@@ -168,11 +160,7 @@ const RulesList: Component = () => {
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<Button
|
||||
onClick={saveEdit}
|
||||
>
|
||||
{editingId() !== null ? 'Update Rule' : 'Create Rule'}
|
||||
</Button>
|
||||
<Button onClick={saveEdit}>{editingId() !== null ? "Update Rule" : "Create Rule"}</Button>
|
||||
</div>
|
||||
</Card>
|
||||
</Show>
|
||||
@@ -182,65 +170,64 @@ const RulesList: Component = () => {
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
|
||||
Method Name
|
||||
</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
|
||||
Action
|
||||
</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
|
||||
Status
|
||||
</th>
|
||||
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">
|
||||
Actions
|
||||
</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Method Name</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Action</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
|
||||
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y divide-gray-200">
|
||||
<Show when={!rules.loading} fallback={
|
||||
<tr><td colspan="4" class="text-center py-4">Loading...</td></tr>
|
||||
}>
|
||||
<For each={rules()} fallback={
|
||||
<Show
|
||||
when={!rules.loading}
|
||||
fallback={
|
||||
<tr>
|
||||
<td colspan="4" class="text-center py-8 text-gray-500">
|
||||
No rules configured yet. Click "+ New Rule" to create one.
|
||||
<td colspan="4" class="text-center py-4">
|
||||
Loading...
|
||||
</td>
|
||||
</tr>
|
||||
}>
|
||||
}
|
||||
>
|
||||
<For
|
||||
each={rules()}
|
||||
fallback={
|
||||
<tr>
|
||||
<td colspan="4" class="text-center py-8 text-gray-500">
|
||||
No rules configured yet. Click "+ New Rule" to create one.
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
>
|
||||
{(rule) => (
|
||||
<tr>
|
||||
<td class="px-6 py-4 text-sm font-medium text-gray-900">
|
||||
{rule.method_name}
|
||||
</td>
|
||||
<td class="px-6 py-4 text-sm font-medium text-gray-900">{rule.method_name}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
<span class={`px-2 py-1 rounded-full text-xs ${rule.action === 'replace' ? 'bg-purple-100 text-purple-800' :
|
||||
rule.action === 'modify' ? 'bg-blue-100 text-blue-800' :
|
||||
'bg-gray-100 text-gray-800'
|
||||
}`}>
|
||||
<span
|
||||
class={`px-2 py-1 rounded-full text-xs ${
|
||||
rule.action === "replace"
|
||||
? "bg-purple-100 text-purple-800"
|
||||
: rule.action === "modify"
|
||||
? "bg-blue-100 text-blue-800"
|
||||
: "bg-gray-100 text-gray-800"
|
||||
}`}
|
||||
>
|
||||
{rule.action}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
<button
|
||||
onClick={() => toggleRule(rule)}
|
||||
class={`px-3 py-1 rounded-md text-sm font-medium ${rule.is_enabled
|
||||
? 'bg-green-100 text-green-800'
|
||||
: 'bg-gray-100 text-gray-800'
|
||||
}`}>
|
||||
{rule.is_enabled ? '✓ Enabled' : '✗ Disabled'}
|
||||
class={`px-3 py-1 rounded-md text-sm font-medium ${
|
||||
rule.is_enabled ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
|
||||
}`}
|
||||
>
|
||||
{rule.is_enabled ? "✓ Enabled" : "✗ Disabled"}
|
||||
</button>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => startEdit(rule)}
|
||||
class="mr-4">
|
||||
<Button variant="ghost" onClick={() => startEdit(rule)} class="mr-4">
|
||||
Edit
|
||||
</Button>
|
||||
<Button
|
||||
variant="link"
|
||||
onClick={() => deleteRule(rule.id)}
|
||||
>
|
||||
<Button variant="link" onClick={() => deleteRule(rule.id)}>
|
||||
Delete
|
||||
</Button>
|
||||
</td>
|
||||
|
||||
Reference in New Issue
Block a user