73 lines
2.5 KiB
Vue
73 lines
2.5 KiB
Vue
<script setup>
|
|
import { Button } from "@/Components/ui/button";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/Components/ui/dropdown-menu";
|
|
import { MoreHorizontal, Pencil, Trash, Power, PowerOff } from "lucide-vue-next";
|
|
import { Badge } from "@/Components/ui/badge";
|
|
|
|
defineProps({
|
|
rule: Object,
|
|
});
|
|
|
|
const emit = defineEmits(["edit", "toggle-enabled", "delete"]);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="border rounded-lg p-4 bg-white shadow-sm">
|
|
<div class="flex items-start justify-between gap-4">
|
|
<div class="min-w-0 flex-1">
|
|
<div class="flex items-center gap-2 mb-1">
|
|
<h3 class="font-medium text-gray-900 truncate">
|
|
{{ rule.name || "Untitled Rule #" + rule.id }}
|
|
</h3>
|
|
<Badge v-if="!rule.enabled" variant="secondary" class="text-xs">
|
|
Disabled
|
|
</Badge>
|
|
</div>
|
|
<p v-if="rule.description" class="text-sm text-muted-foreground mt-1">
|
|
{{ rule.description }}
|
|
</p>
|
|
<div class="flex items-center gap-3 mt-2 text-xs text-muted-foreground">
|
|
<span>Strategy: <span class="font-medium">{{ rule.strategy }}</span></span>
|
|
<span>•</span>
|
|
<span>Soft: <span class="font-medium">{{ rule.soft ? "Yes" : "No" }}</span></span>
|
|
<span v-if="rule.reactivate" class="text-amber-600 font-medium">
|
|
• Reactivate Mode
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger as-child>
|
|
<Button variant="ghost" size="icon">
|
|
<MoreHorizontal class="w-4 h-4" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuItem @click="emit('edit', rule)">
|
|
<Pencil class="w-4 h-4 mr-2" />
|
|
Uredi
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem @click="emit('toggle-enabled', rule)">
|
|
<component :is="rule.enabled ? PowerOff : Power" class="w-4 h-4 mr-2" />
|
|
{{ rule.enabled ? "Disable" : "Enable" }}
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
@click="emit('delete', rule)"
|
|
class="text-red-600 focus:text-red-600"
|
|
>
|
|
<Trash class="w-4 h-4 mr-2" />
|
|
Izbriši
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
<div class="mt-3 text-xs bg-muted rounded p-3 overflow-x-auto">
|
|
<pre class="whitespace-pre-wrap">{{ JSON.stringify(rule.entities, null, 2) }}</pre>
|
|
</div>
|
|
</div>
|
|
</template>
|