New report system and views
This commit is contained in:
Simon Pocrnjič
@@ -0,0 +1,134 @@
|
||||
<script setup>
|
||||
import AppLayout from "@/Layouts/AppLayout.vue";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/Components/ui/card";
|
||||
import { Button } from "@/Components/ui/button";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/Components/ui/tabs";
|
||||
import { Badge } from "@/Components/ui/badge";
|
||||
import { Link } from "@inertiajs/vue3";
|
||||
import { ArrowLeft, BarChart3, Database, Columns, Filter, Code, ArrowUpDown } from "lucide-vue-next";
|
||||
import EntitiesSection from "./Partials/EntitiesSection.vue";
|
||||
import ColumnsSection from "./Partials/ColumnsSection.vue";
|
||||
import FiltersSection from "./Partials/FiltersSection.vue";
|
||||
import ConditionsSection from "./Partials/ConditionsSection.vue";
|
||||
import OrdersSection from "./Partials/OrdersSection.vue";
|
||||
|
||||
const props = defineProps({
|
||||
report: Object,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppLayout :title="`Edit Report: ${report.name}`">
|
||||
<template #header>
|
||||
<div class="flex items-center gap-4">
|
||||
<Link :href="route('settings.reports.index')">
|
||||
<Button variant="ghost" size="icon">
|
||||
<ArrowLeft class="h-5 w-5" />
|
||||
</Button>
|
||||
</Link>
|
||||
<div>
|
||||
<h2 class="text-xl font-semibold leading-tight text-gray-800 dark:text-gray-200">
|
||||
Edit Report: {{ report.name }}
|
||||
</h2>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
|
||||
Configure entities, columns, filters, and conditions
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="py-12">
|
||||
<div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
|
||||
<!-- Report Info Header -->
|
||||
<Card class="mb-6">
|
||||
<CardHeader>
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
|
||||
<BarChart3 class="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle>{{ report.name }}</CardTitle>
|
||||
<CardDescription class="mt-1">
|
||||
{{ report.description || "No description" }}
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<Badge v-if="!report.enabled" variant="secondary">Disabled</Badge>
|
||||
<Badge v-if="report.category" variant="outline">{{ report.category }}</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div class="grid grid-cols-3 gap-4 text-sm">
|
||||
<div>
|
||||
<span class="text-gray-500 dark:text-gray-400">Slug:</span>
|
||||
<span class="ml-2 font-mono text-xs">{{ report.slug }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-gray-500 dark:text-gray-400">Order:</span>
|
||||
<span class="ml-2">{{ report.order }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-gray-500 dark:text-gray-400">Status:</span>
|
||||
<span class="ml-2">{{ report.enabled ? "Enabled" : "Disabled" }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Configuration Tabs -->
|
||||
<Tabs default-value="entities" class="space-y-6">
|
||||
<TabsList class="grid w-full grid-cols-5">
|
||||
<TabsTrigger value="entities" class="flex items-center gap-2">
|
||||
<Database class="h-4 w-4" />
|
||||
Entities
|
||||
<Badge variant="secondary" class="ml-1">{{ report.entities?.length || 0 }}</Badge>
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="columns" class="flex items-center gap-2">
|
||||
<Columns class="h-4 w-4" />
|
||||
Columns
|
||||
<Badge variant="secondary" class="ml-1">{{ report.columns?.length || 0 }}</Badge>
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="filters" class="flex items-center gap-2">
|
||||
<Filter class="h-4 w-4" />
|
||||
Filters
|
||||
<Badge variant="secondary" class="ml-1">{{ report.filters?.length || 0 }}</Badge>
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="conditions" class="flex items-center gap-2">
|
||||
<Code class="h-4 w-4" />
|
||||
Conditions
|
||||
<Badge variant="secondary" class="ml-1">{{ report.conditions?.length || 0 }}</Badge>
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="orders" class="flex items-center gap-2">
|
||||
<ArrowUpDown class="h-4 w-4" />
|
||||
Orders
|
||||
<Badge variant="secondary" class="ml-1">{{ report.orders?.length || 0 }}</Badge>
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="entities">
|
||||
<EntitiesSection :report="report" :entities="report.entities || []" />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="columns">
|
||||
<ColumnsSection :report="report" :columns="report.columns || []" />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="filters">
|
||||
<FiltersSection :report="report" :filters="report.filters || []" />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="conditions">
|
||||
<ConditionsSection :report="report" :conditions="report.conditions || []" />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="orders">
|
||||
<OrdersSection :report="report" :orders="report.orders || []" />
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
</AppLayout>
|
||||
</template>
|
||||
@@ -0,0 +1,359 @@
|
||||
<script setup>
|
||||
import AppLayout from "@/Layouts/AppLayout.vue";
|
||||
import AppCard from "@/Components/app/ui/card/AppCard.vue";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/Components/ui/card";
|
||||
import { Button } from "@/Components/ui/button";
|
||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/Components/ui/dialog";
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@/Components/ui/dropdown-menu";
|
||||
import { Input } from "@/Components/ui/input";
|
||||
import { Label } from "@/Components/ui/label";
|
||||
import { Textarea } from "@/Components/ui/textarea";
|
||||
import { Checkbox } from "@/Components/ui/checkbox";
|
||||
import { Badge } from "@/Components/ui/badge";
|
||||
import { useForm, router, Link } from "@inertiajs/vue3";
|
||||
import { ref } from "vue";
|
||||
import { BarChart3, MoreHorizontal, Pencil, Trash, Power, PowerOff, Plus, Database } from "lucide-vue-next";
|
||||
|
||||
const props = defineProps({
|
||||
reports: Array,
|
||||
});
|
||||
|
||||
const showCreateDialog = ref(false);
|
||||
const showEditDialog = ref(false);
|
||||
const editingReport = ref(null);
|
||||
|
||||
const createForm = useForm({
|
||||
slug: "",
|
||||
name: "",
|
||||
description: "",
|
||||
category: "",
|
||||
enabled: true,
|
||||
order: 0,
|
||||
});
|
||||
|
||||
const editForm = useForm({
|
||||
slug: "",
|
||||
name: "",
|
||||
description: "",
|
||||
category: "",
|
||||
enabled: true,
|
||||
order: 0,
|
||||
});
|
||||
|
||||
function openCreateDialog() {
|
||||
createForm.reset();
|
||||
showCreateDialog.value = true;
|
||||
}
|
||||
|
||||
function submitCreate() {
|
||||
createForm.post(route("settings.reports.store"), {
|
||||
preserveScroll: true,
|
||||
onSuccess: () => {
|
||||
showCreateDialog.value = false;
|
||||
createForm.reset();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function openEditDialog(report) {
|
||||
editingReport.value = report;
|
||||
editForm.slug = report.slug;
|
||||
editForm.name = report.name;
|
||||
editForm.description = report.description || "";
|
||||
editForm.category = report.category || "";
|
||||
editForm.enabled = report.enabled;
|
||||
editForm.order = report.order;
|
||||
showEditDialog.value = true;
|
||||
}
|
||||
|
||||
function submitEdit() {
|
||||
editForm.put(route("settings.reports.update", editingReport.value.id), {
|
||||
preserveScroll: true,
|
||||
onSuccess: () => {
|
||||
showEditDialog.value = false;
|
||||
editForm.reset();
|
||||
editingReport.value = null;
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function toggleEnabled(report) {
|
||||
router.post(
|
||||
route("settings.reports.toggle", report.id),
|
||||
{},
|
||||
{
|
||||
preserveScroll: true,
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function deleteReport(report) {
|
||||
if (confirm(`Are you sure you want to delete "${report.name}"?`)) {
|
||||
router.delete(route("settings.reports.destroy", report.id), {
|
||||
preserveScroll: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppLayout title="Reports Settings">
|
||||
<template #header>
|
||||
<h2 class="text-xl font-semibold leading-tight text-gray-800 dark:text-gray-200">
|
||||
Reports Settings
|
||||
</h2>
|
||||
</template>
|
||||
|
||||
<div class="py-12">
|
||||
<div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
|
||||
<AppCard>
|
||||
<template #icon>
|
||||
<div class="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
|
||||
<BarChart3 class="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #header>
|
||||
<CardTitle>Database Reports</CardTitle>
|
||||
<CardDescription>
|
||||
Manage configurable reports with dynamic queries and filters
|
||||
</CardDescription>
|
||||
</template>
|
||||
|
||||
<template #headerActions>
|
||||
<Button @click="openCreateDialog">
|
||||
<Plus class="mr-2 h-4 w-4" />
|
||||
Create Report
|
||||
</Button>
|
||||
</template>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div v-if="reports.length === 0" class="text-center py-8 text-gray-500">
|
||||
No reports configured yet. Create your first report to get started.
|
||||
</div>
|
||||
|
||||
<Card v-for="report in reports" :key="report.id" class="overflow-hidden">
|
||||
<CardHeader class="bg-gray-50 dark:bg-gray-800/50">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<CardTitle class="text-base">{{ report.name }}</CardTitle>
|
||||
<Badge v-if="!report.enabled" variant="secondary">Disabled</Badge>
|
||||
<Badge v-if="report.category" variant="outline">{{ report.category }}</Badge>
|
||||
</div>
|
||||
<CardDescription class="mt-1">
|
||||
{{ report.description || "No description" }}
|
||||
</CardDescription>
|
||||
</div>
|
||||
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger as-child>
|
||||
<Button variant="ghost" size="icon">
|
||||
<MoreHorizontal class="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem @click="openEditDialog(report)">
|
||||
<Pencil class="mr-2 h-4 w-4" />
|
||||
Edit
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem as-child>
|
||||
<Link :href="route('settings.reports.edit', report.id)" class="flex items-center cursor-pointer">
|
||||
<Database class="mr-2 h-4 w-4" />
|
||||
Configure Details
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem @click="toggleEnabled(report)">
|
||||
<Power v-if="report.enabled" class="mr-2 h-4 w-4" />
|
||||
<PowerOff v-else class="mr-2 h-4 w-4" />
|
||||
{{ report.enabled ? "Disable" : "Enable" }}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem @click="deleteReport(report)" class="text-destructive">
|
||||
<Trash class="mr-2 h-4 w-4" />
|
||||
Delete
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent class="pt-4">
|
||||
<div class="grid grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<span class="text-gray-500 dark:text-gray-400">Slug:</span>
|
||||
<span class="ml-2 font-mono text-xs">{{ report.slug }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-gray-500 dark:text-gray-400">Order:</span>
|
||||
<span class="ml-2">{{ report.order }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</AppCard>
|
||||
|
||||
<!-- Create Dialog -->
|
||||
<Dialog v-model:open="showCreateDialog">
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Create New Report</DialogTitle>
|
||||
<DialogDescription>
|
||||
Create a new database-driven report configuration
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<form @submit.prevent="submitCreate" class="space-y-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="create-slug">Slug *</Label>
|
||||
<Input
|
||||
id="create-slug"
|
||||
v-model="createForm.slug"
|
||||
placeholder="active-contracts"
|
||||
required
|
||||
/>
|
||||
<p class="text-xs text-gray-500">Unique identifier for the report</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="create-name">Name *</Label>
|
||||
<Input
|
||||
id="create-name"
|
||||
v-model="createForm.name"
|
||||
placeholder="Active Contracts"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="create-description">Description</Label>
|
||||
<Textarea
|
||||
id="create-description"
|
||||
v-model="createForm.description"
|
||||
placeholder="Report description..."
|
||||
rows="3"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="create-category">Category</Label>
|
||||
<Input
|
||||
id="create-category"
|
||||
v-model="createForm.category"
|
||||
placeholder="contracts, activities, financial..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="create-order">Display Order</Label>
|
||||
<Input
|
||||
id="create-order"
|
||||
v-model.number="createForm.order"
|
||||
type="number"
|
||||
placeholder="0"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="create-enabled"
|
||||
v-model="createForm.enabled"
|
||||
/>
|
||||
<Label for="create-enabled" class="cursor-pointer">
|
||||
Enabled
|
||||
</Label>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button type="button" variant="outline" @click="showCreateDialog = false">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" :disabled="createForm.processing">
|
||||
Create Report
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<!-- Edit Dialog -->
|
||||
<Dialog v-model:open="showEditDialog">
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Edit Report</DialogTitle>
|
||||
<DialogDescription>
|
||||
Update report configuration
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<form @submit.prevent="submitEdit" class="space-y-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="edit-slug">Slug *</Label>
|
||||
<Input
|
||||
id="edit-slug"
|
||||
v-model="editForm.slug"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="edit-name">Name *</Label>
|
||||
<Input
|
||||
id="edit-name"
|
||||
v-model="editForm.name"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="edit-description">Description</Label>
|
||||
<Textarea
|
||||
id="edit-description"
|
||||
v-model="editForm.description"
|
||||
rows="3"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="edit-category">Category</Label>
|
||||
<Input
|
||||
id="edit-category"
|
||||
v-model="editForm.category"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="edit-order">Display Order</Label>
|
||||
<Input
|
||||
id="edit-order"
|
||||
v-model.number="editForm.order"
|
||||
type="number"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="edit-enabled"
|
||||
v-model="editForm.enabled"
|
||||
/>
|
||||
<Label for="edit-enabled" class="cursor-pointer">
|
||||
Enabled
|
||||
</Label>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button type="button" variant="outline" @click="showEditDialog = false">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" :disabled="editForm.processing">
|
||||
Update Report
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</div>
|
||||
</AppLayout>
|
||||
</template>
|
||||
@@ -0,0 +1,354 @@
|
||||
<script setup>
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/Components/ui/card";
|
||||
import { Button } from "@/Components/ui/button";
|
||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/Components/ui/dialog";
|
||||
import { Input } from "@/Components/ui/input";
|
||||
import { Label } from "@/Components/ui/label";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/Components/ui/select";
|
||||
import { Checkbox } from "@/Components/ui/checkbox";
|
||||
import { Badge } from "@/Components/ui/badge";
|
||||
import { Textarea } from "@/Components/ui/textarea";
|
||||
import { useForm, router } from "@inertiajs/vue3";
|
||||
import { ref } from "vue";
|
||||
import { Plus, Pencil, Trash, Eye, EyeOff } from "lucide-vue-next";
|
||||
|
||||
const props = defineProps({
|
||||
report: Object,
|
||||
columns: Array,
|
||||
});
|
||||
|
||||
const showCreateDialog = ref(false);
|
||||
const showEditDialog = ref(false);
|
||||
const editingColumn = ref(null);
|
||||
|
||||
const createForm = useForm({
|
||||
key: "",
|
||||
label: "",
|
||||
type: "string",
|
||||
expression: "",
|
||||
sortable: true,
|
||||
visible: true,
|
||||
order: 0,
|
||||
format_options: null,
|
||||
});
|
||||
|
||||
const editForm = useForm({
|
||||
key: "",
|
||||
label: "",
|
||||
type: "string",
|
||||
expression: "",
|
||||
sortable: true,
|
||||
visible: true,
|
||||
order: 0,
|
||||
format_options: null,
|
||||
});
|
||||
|
||||
function openCreateDialog() {
|
||||
createForm.reset();
|
||||
createForm.order = props.columns.length;
|
||||
showCreateDialog.value = true;
|
||||
}
|
||||
|
||||
function submitCreate() {
|
||||
createForm.post(route("settings.reports.columns.store", props.report.id), {
|
||||
preserveScroll: true,
|
||||
onSuccess: () => {
|
||||
showCreateDialog.value = false;
|
||||
createForm.reset();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function openEditDialog(column) {
|
||||
editingColumn.value = column;
|
||||
editForm.key = column.key;
|
||||
editForm.label = column.label;
|
||||
editForm.type = column.type;
|
||||
editForm.expression = column.expression;
|
||||
editForm.sortable = column.sortable;
|
||||
editForm.visible = column.visible;
|
||||
editForm.order = column.order;
|
||||
editForm.format_options = column.format_options;
|
||||
showEditDialog.value = true;
|
||||
}
|
||||
|
||||
function submitEdit() {
|
||||
editForm.put(route("settings.reports.columns.update", editingColumn.value.id), {
|
||||
preserveScroll: true,
|
||||
onSuccess: () => {
|
||||
showEditDialog.value = false;
|
||||
editForm.reset();
|
||||
editingColumn.value = null;
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function deleteColumn(column) {
|
||||
if (confirm("Are you sure you want to delete this column?")) {
|
||||
router.delete(route("settings.reports.columns.destroy", column.id), {
|
||||
preserveScroll: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<CardTitle>Report Columns</CardTitle>
|
||||
<CardDescription>
|
||||
Define which columns to select and display in the report
|
||||
</CardDescription>
|
||||
</div>
|
||||
<Button @click="openCreateDialog">
|
||||
<Plus class="mr-2 h-4 w-4" />
|
||||
Add Column
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div v-if="columns.length === 0" class="text-center py-8 text-gray-500">
|
||||
No columns configured. Add columns to display in the report.
|
||||
</div>
|
||||
|
||||
<div v-else class="space-y-3">
|
||||
<div
|
||||
v-for="column in columns"
|
||||
:key="column.id"
|
||||
class="flex items-start justify-between rounded-lg border p-4"
|
||||
>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<Eye v-if="column.visible" class="h-4 w-4 text-green-600" />
|
||||
<EyeOff v-else class="h-4 w-4 text-gray-400" />
|
||||
<span class="font-semibold">{{ column.label }}</span>
|
||||
<Badge variant="outline">{{ column.type }}</Badge>
|
||||
<Badge v-if="column.sortable" variant="secondary">sortable</Badge>
|
||||
</div>
|
||||
<div class="text-sm text-gray-600 dark:text-gray-400 font-mono mb-1">
|
||||
{{ column.key }}
|
||||
</div>
|
||||
<div class="text-sm text-gray-500 font-mono">
|
||||
{{ column.expression }}
|
||||
</div>
|
||||
<div class="text-xs text-gray-500 mt-1">Order: {{ column.order }}</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<Button variant="ghost" size="icon" @click="openEditDialog(column)">
|
||||
<Pencil class="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" @click="deleteColumn(column)">
|
||||
<Trash class="h-4 w-4 text-destructive" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Create Dialog -->
|
||||
<Dialog v-model:open="showCreateDialog">
|
||||
<DialogContent class="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Add Column</DialogTitle>
|
||||
<DialogDescription>
|
||||
Add a new column to the report output
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<form @submit.prevent="submitCreate" class="space-y-4">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="create-key">Key *</Label>
|
||||
<Input
|
||||
id="create-key"
|
||||
v-model="createForm.key"
|
||||
placeholder="contract_reference"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="create-label">Label *</Label>
|
||||
<Input
|
||||
id="create-label"
|
||||
v-model="createForm.label"
|
||||
placeholder="Contract Reference"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="create-type">Type *</Label>
|
||||
<Select v-model="createForm.type">
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="string">string</SelectItem>
|
||||
<SelectItem value="number">number</SelectItem>
|
||||
<SelectItem value="date">date</SelectItem>
|
||||
<SelectItem value="boolean">boolean</SelectItem>
|
||||
<SelectItem value="currency">currency</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="create-expression">SQL Expression *</Label>
|
||||
<Textarea
|
||||
id="create-expression"
|
||||
v-model="createForm.expression"
|
||||
placeholder="contracts.reference"
|
||||
rows="2"
|
||||
required
|
||||
/>
|
||||
<p class="text-xs text-gray-500">SQL expression or column path</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="create-sortable"
|
||||
v-model="createForm.sortable"
|
||||
/>
|
||||
<Label for="create-sortable" class="cursor-pointer">
|
||||
Sortable
|
||||
</Label>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="create-visible"
|
||||
v-model="createForm.visible"
|
||||
/>
|
||||
<Label for="create-visible" class="cursor-pointer">
|
||||
Visible
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="create-order">Order</Label>
|
||||
<Input
|
||||
id="create-order"
|
||||
v-model.number="createForm.order"
|
||||
type="number"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button type="button" variant="outline" @click="showCreateDialog = false">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" :disabled="createForm.processing">
|
||||
Add Column
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<!-- Edit Dialog -->
|
||||
<Dialog v-model:open="showEditDialog">
|
||||
<DialogContent class="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Edit Column</DialogTitle>
|
||||
<DialogDescription>
|
||||
Update column configuration
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<form @submit.prevent="submitEdit" class="space-y-4">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="edit-key">Key *</Label>
|
||||
<Input
|
||||
id="edit-key"
|
||||
v-model="editForm.key"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="edit-label">Label *</Label>
|
||||
<Input
|
||||
id="edit-label"
|
||||
v-model="editForm.label"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="edit-type">Type *</Label>
|
||||
<Select v-model="editForm.type">
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="string">string</SelectItem>
|
||||
<SelectItem value="number">number</SelectItem>
|
||||
<SelectItem value="date">date</SelectItem>
|
||||
<SelectItem value="boolean">boolean</SelectItem>
|
||||
<SelectItem value="currency">currency</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="edit-expression">SQL Expression *</Label>
|
||||
<Textarea
|
||||
id="edit-expression"
|
||||
v-model="editForm.expression"
|
||||
rows="2"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="edit-sortable"
|
||||
v-model="editForm.sortable"
|
||||
/>
|
||||
<Label for="edit-sortable" class="cursor-pointer">
|
||||
Sortable
|
||||
</Label>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="edit-visible"
|
||||
v-model="editForm.visible"
|
||||
/>
|
||||
<Label for="edit-visible" class="cursor-pointer">
|
||||
Visible
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="edit-order">Order</Label>
|
||||
<Input
|
||||
id="edit-order"
|
||||
v-model.number="editForm.order"
|
||||
type="number"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button type="button" variant="outline" @click="showEditDialog = false">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" :disabled="editForm.processing">
|
||||
Update Column
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</template>
|
||||
@@ -0,0 +1,418 @@
|
||||
<script setup>
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/Components/ui/card";
|
||||
import { Button } from "@/Components/ui/button";
|
||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/Components/ui/dialog";
|
||||
import { Input } from "@/Components/ui/input";
|
||||
import { Label } from "@/Components/ui/label";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/Components/ui/select";
|
||||
import { Checkbox } from "@/Components/ui/checkbox";
|
||||
import { Badge } from "@/Components/ui/badge";
|
||||
import { Textarea } from "@/Components/ui/textarea";
|
||||
import { useForm, router } from "@inertiajs/vue3";
|
||||
import { ref } from "vue";
|
||||
import { Plus, Pencil, Trash } from "lucide-vue-next";
|
||||
|
||||
const props = defineProps({
|
||||
report: Object,
|
||||
conditions: Array,
|
||||
});
|
||||
|
||||
const showCreateDialog = ref(false);
|
||||
const showEditDialog = ref(false);
|
||||
const editingCondition = ref(null);
|
||||
|
||||
const createForm = useForm({
|
||||
column: "",
|
||||
operator: "=",
|
||||
value_type: "static",
|
||||
value: "",
|
||||
filter_key: "",
|
||||
logical_operator: "AND",
|
||||
group_id: 1,
|
||||
order: 0,
|
||||
enabled: true,
|
||||
});
|
||||
|
||||
const editForm = useForm({
|
||||
column: "",
|
||||
operator: "=",
|
||||
value_type: "static",
|
||||
value: "",
|
||||
filter_key: "",
|
||||
logical_operator: "AND",
|
||||
group_id: 1,
|
||||
order: 0,
|
||||
enabled: true,
|
||||
});
|
||||
|
||||
function openCreateDialog() {
|
||||
createForm.reset();
|
||||
createForm.order = props.conditions.length;
|
||||
showCreateDialog.value = true;
|
||||
}
|
||||
|
||||
function submitCreate() {
|
||||
createForm.post(route("settings.reports.conditions.store", props.report.id), {
|
||||
preserveScroll: true,
|
||||
onSuccess: () => {
|
||||
showCreateDialog.value = false;
|
||||
createForm.reset();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function openEditDialog(condition) {
|
||||
editingCondition.value = condition;
|
||||
editForm.column = condition.column;
|
||||
editForm.operator = condition.operator;
|
||||
editForm.value_type = condition.value_type;
|
||||
editForm.value = condition.value || "";
|
||||
editForm.filter_key = condition.filter_key || "";
|
||||
editForm.logical_operator = condition.logical_operator;
|
||||
editForm.group_id = condition.group_id;
|
||||
editForm.order = condition.order;
|
||||
editForm.enabled = condition.enabled;
|
||||
showEditDialog.value = true;
|
||||
}
|
||||
|
||||
function submitEdit() {
|
||||
editForm.put(route("settings.reports.conditions.update", editingCondition.value.id), {
|
||||
preserveScroll: true,
|
||||
onSuccess: () => {
|
||||
showEditDialog.value = false;
|
||||
editForm.reset();
|
||||
editingCondition.value = null;
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function deleteCondition(condition) {
|
||||
if (confirm("Are you sure you want to delete this condition?")) {
|
||||
router.delete(route("settings.reports.conditions.destroy", condition.id), {
|
||||
preserveScroll: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<CardTitle>WHERE Conditions</CardTitle>
|
||||
<CardDescription>
|
||||
Define WHERE clause rules for filtering data
|
||||
</CardDescription>
|
||||
</div>
|
||||
<Button @click="openCreateDialog">
|
||||
<Plus class="mr-2 h-4 w-4" />
|
||||
Add Condition
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div v-if="conditions.length === 0" class="text-center py-8 text-gray-500">
|
||||
No conditions configured. Add WHERE conditions to filter query results.
|
||||
</div>
|
||||
|
||||
<div v-else class="space-y-3">
|
||||
<div
|
||||
v-for="condition in conditions"
|
||||
:key="condition.id"
|
||||
class="flex items-start justify-between rounded-lg border p-4"
|
||||
:class="{ 'opacity-50': !condition.enabled }"
|
||||
>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<Badge :variant="condition.logical_operator === 'AND' ? 'default' : 'secondary'">
|
||||
{{ condition.logical_operator }}
|
||||
</Badge>
|
||||
<Badge variant="outline">Group {{ condition.group_id || 0 }}</Badge>
|
||||
<Badge v-if="!condition.enabled" variant="secondary">disabled</Badge>
|
||||
</div>
|
||||
<div class="text-sm font-mono mb-1">
|
||||
{{ condition.column }} {{ condition.operator }}
|
||||
<span v-if="condition.value_type === 'static'" class="text-blue-600">"{{ condition.value }}"</span>
|
||||
<span v-else-if="condition.value_type === 'filter'" class="text-green-600">filter({{ condition.filter_key }})</span>
|
||||
<span v-else class="text-purple-600">{{ condition.value }}</span>
|
||||
</div>
|
||||
<div class="text-xs text-gray-500">
|
||||
Type: {{ condition.value_type }} | Order: {{ condition.order }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<Button variant="ghost" size="icon" @click="openEditDialog(condition)">
|
||||
<Pencil class="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" @click="deleteCondition(condition)">
|
||||
<Trash class="h-4 w-4 text-destructive" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Create Dialog -->
|
||||
<Dialog v-model:open="showCreateDialog">
|
||||
<DialogContent class="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Add Condition</DialogTitle>
|
||||
<DialogDescription>
|
||||
Add a new WHERE clause condition
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<form @submit.prevent="submitCreate" class="space-y-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="create-column">Column *</Label>
|
||||
<Input
|
||||
id="create-column"
|
||||
v-model="createForm.column"
|
||||
placeholder="contracts.start_date"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="create-operator">Operator *</Label>
|
||||
<Select v-model="createForm.operator">
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="=">=</SelectItem>
|
||||
<SelectItem value="!=">!=</SelectItem>
|
||||
<SelectItem value=">">></SelectItem>
|
||||
<SelectItem value="<"><</SelectItem>
|
||||
<SelectItem value=">=">>=</SelectItem>
|
||||
<SelectItem value="<="><=</SelectItem>
|
||||
<SelectItem value="LIKE">LIKE</SelectItem>
|
||||
<SelectItem value="IN">IN</SelectItem>
|
||||
<SelectItem value="NOT IN">NOT IN</SelectItem>
|
||||
<SelectItem value="BETWEEN">BETWEEN</SelectItem>
|
||||
<SelectItem value="IS NULL">IS NULL</SelectItem>
|
||||
<SelectItem value="IS NOT NULL">IS NOT NULL</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="create-value-type">Value Type *</Label>
|
||||
<Select v-model="createForm.value_type">
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="static">static (hardcoded value)</SelectItem>
|
||||
<SelectItem value="filter">filter (from user input)</SelectItem>
|
||||
<SelectItem value="expression">expression (SQL expression)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div v-if="createForm.value_type === 'filter'" class="space-y-2">
|
||||
<Label for="create-filter-key">Filter Key *</Label>
|
||||
<Input
|
||||
id="create-filter-key"
|
||||
v-model="createForm.filter_key"
|
||||
placeholder="client_uuid"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-else class="space-y-2">
|
||||
<Label for="create-value">Value</Label>
|
||||
<Textarea
|
||||
id="create-value"
|
||||
v-model="createForm.value"
|
||||
placeholder="Value or expression..."
|
||||
rows="2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="create-logical">Logical Operator *</Label>
|
||||
<Select v-model="createForm.logical_operator">
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="AND">AND</SelectItem>
|
||||
<SelectItem value="OR">OR</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="create-group">Group ID</Label>
|
||||
<Input
|
||||
id="create-group"
|
||||
v-model.number="createForm.group_id"
|
||||
type="number"
|
||||
placeholder="1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="create-order">Order</Label>
|
||||
<Input
|
||||
id="create-order"
|
||||
v-model.number="createForm.order"
|
||||
type="number"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="create-enabled"
|
||||
v-model="createForm.enabled"
|
||||
/>
|
||||
<Label for="create-enabled" class="cursor-pointer">
|
||||
Enabled
|
||||
</Label>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button type="button" variant="outline" @click="showCreateDialog = false">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" :disabled="createForm.processing">
|
||||
Add Condition
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<!-- Edit Dialog -->
|
||||
<Dialog v-model:open="showEditDialog">
|
||||
<DialogContent class="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Edit Condition</DialogTitle>
|
||||
<DialogDescription>
|
||||
Update condition configuration
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<form @submit.prevent="submitEdit" class="space-y-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="edit-column">Column *</Label>
|
||||
<Input
|
||||
id="edit-column"
|
||||
v-model="editForm.column"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="edit-operator">Operator *</Label>
|
||||
<Select v-model="editForm.operator">
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="=">=</SelectItem>
|
||||
<SelectItem value="!=">!=</SelectItem>
|
||||
<SelectItem value=">">></SelectItem>
|
||||
<SelectItem value="<"><</SelectItem>
|
||||
<SelectItem value=">=">>=</SelectItem>
|
||||
<SelectItem value="<="><=</SelectItem>
|
||||
<SelectItem value="LIKE">LIKE</SelectItem>
|
||||
<SelectItem value="IN">IN</SelectItem>
|
||||
<SelectItem value="NOT IN">NOT IN</SelectItem>
|
||||
<SelectItem value="BETWEEN">BETWEEN</SelectItem>
|
||||
<SelectItem value="IS NULL">IS NULL</SelectItem>
|
||||
<SelectItem value="IS NOT NULL">IS NOT NULL</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="edit-value-type">Value Type *</Label>
|
||||
<Select v-model="editForm.value_type">
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="static">static (hardcoded value)</SelectItem>
|
||||
<SelectItem value="filter">filter (from user input)</SelectItem>
|
||||
<SelectItem value="expression">expression (SQL expression)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div v-if="editForm.value_type === 'filter'" class="space-y-2">
|
||||
<Label for="edit-filter-key">Filter Key *</Label>
|
||||
<Input
|
||||
id="edit-filter-key"
|
||||
v-model="editForm.filter_key"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-else class="space-y-2">
|
||||
<Label for="edit-value">Value</Label>
|
||||
<Textarea
|
||||
id="edit-value"
|
||||
v-model="editForm.value"
|
||||
rows="2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="edit-logical">Logical Operator *</Label>
|
||||
<Select v-model="editForm.logical_operator">
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="AND">AND</SelectItem>
|
||||
<SelectItem value="OR">OR</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="edit-group">Group ID</Label>
|
||||
<Input
|
||||
id="edit-group"
|
||||
v-model.number="editForm.group_id"
|
||||
type="number"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="edit-order">Order</Label>
|
||||
<Input
|
||||
id="edit-order"
|
||||
v-model.number="editForm.order"
|
||||
type="number"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="edit-enabled"
|
||||
v-model="editForm.enabled"
|
||||
/>
|
||||
<Label for="edit-enabled" class="cursor-pointer">
|
||||
Enabled
|
||||
</Label>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button type="button" variant="outline" @click="showEditDialog = false">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" :disabled="editForm.processing">
|
||||
Update Condition
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</template>
|
||||
@@ -0,0 +1,344 @@
|
||||
<script setup>
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/Components/ui/card";
|
||||
import { Button } from "@/Components/ui/button";
|
||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/Components/ui/dialog";
|
||||
import { Input } from "@/Components/ui/input";
|
||||
import { Label } from "@/Components/ui/label";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/Components/ui/select";
|
||||
import { Badge } from "@/Components/ui/badge";
|
||||
import { useForm, router } from "@inertiajs/vue3";
|
||||
import { ref } from "vue";
|
||||
import { Plus, Pencil, Trash } from "lucide-vue-next";
|
||||
|
||||
const props = defineProps({
|
||||
report: Object,
|
||||
entities: Array,
|
||||
});
|
||||
|
||||
const showCreateDialog = ref(false);
|
||||
const showEditDialog = ref(false);
|
||||
const editingEntity = ref(null);
|
||||
|
||||
const createForm = useForm({
|
||||
model_class: "",
|
||||
alias: "",
|
||||
join_type: "base",
|
||||
join_first: "",
|
||||
join_operator: "=",
|
||||
join_second: "",
|
||||
order: 0,
|
||||
});
|
||||
|
||||
const editForm = useForm({
|
||||
model_class: "",
|
||||
alias: "",
|
||||
join_type: "base",
|
||||
join_first: "",
|
||||
join_operator: "=",
|
||||
join_second: "",
|
||||
order: 0,
|
||||
});
|
||||
|
||||
function openCreateDialog() {
|
||||
createForm.reset();
|
||||
createForm.order = props.entities.length;
|
||||
showCreateDialog.value = true;
|
||||
}
|
||||
|
||||
function submitCreate() {
|
||||
createForm.post(route("settings.reports.entities.store", props.report.id), {
|
||||
preserveScroll: true,
|
||||
onSuccess: () => {
|
||||
showCreateDialog.value = false;
|
||||
createForm.reset();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function openEditDialog(entity) {
|
||||
editingEntity.value = entity;
|
||||
editForm.model_class = entity.model_class;
|
||||
editForm.alias = entity.alias || "";
|
||||
editForm.join_type = entity.join_type;
|
||||
editForm.join_first = entity.join_first || "";
|
||||
editForm.join_operator = entity.join_operator || "=";
|
||||
editForm.join_second = entity.join_second || "";
|
||||
editForm.order = entity.order;
|
||||
showEditDialog.value = true;
|
||||
}
|
||||
|
||||
function submitEdit() {
|
||||
editForm.put(route("settings.reports.entities.update", editingEntity.value.id), {
|
||||
preserveScroll: true,
|
||||
onSuccess: () => {
|
||||
showEditDialog.value = false;
|
||||
editForm.reset();
|
||||
editingEntity.value = null;
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function deleteEntity(entity) {
|
||||
if (confirm("Are you sure you want to delete this entity?")) {
|
||||
router.delete(route("settings.reports.entities.destroy", entity.id), {
|
||||
preserveScroll: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<CardTitle>Database Entities & Joins</CardTitle>
|
||||
<CardDescription>
|
||||
Configure which models/tables to query and how to join them
|
||||
</CardDescription>
|
||||
</div>
|
||||
<Button @click="openCreateDialog">
|
||||
<Plus class="mr-2 h-4 w-4" />
|
||||
Add Entity
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div v-if="entities.length === 0" class="text-center py-8 text-gray-500">
|
||||
No entities configured. Add a base entity to get started.
|
||||
</div>
|
||||
|
||||
<div v-else class="space-y-3">
|
||||
<div
|
||||
v-for="entity in entities"
|
||||
:key="entity.id"
|
||||
class="flex items-start justify-between rounded-lg border p-4"
|
||||
>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<Badge :variant="entity.join_type === 'base' ? 'default' : 'secondary'">
|
||||
{{ entity.join_type }}
|
||||
</Badge>
|
||||
<span class="font-mono text-sm">{{ entity.model_class }}</span>
|
||||
<Badge v-if="entity.alias" variant="outline">as {{ entity.alias }}</Badge>
|
||||
</div>
|
||||
<div v-if="entity.join_type !== 'base'" class="text-sm text-gray-600 dark:text-gray-400">
|
||||
{{ entity.join_first }} {{ entity.join_operator }} {{ entity.join_second }}
|
||||
</div>
|
||||
<div class="text-xs text-gray-500 mt-1">Order: {{ entity.order }}</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<Button variant="ghost" size="icon" @click="openEditDialog(entity)">
|
||||
<Pencil class="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" @click="deleteEntity(entity)">
|
||||
<Trash class="h-4 w-4 text-destructive" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Create Dialog -->
|
||||
<Dialog v-model:open="showCreateDialog">
|
||||
<DialogContent class="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Add Entity</DialogTitle>
|
||||
<DialogDescription>
|
||||
Add a model/table to the report query
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<form @submit.prevent="submitCreate" class="space-y-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="create-model">Model Class *</Label>
|
||||
<Input
|
||||
id="create-model"
|
||||
v-model="createForm.model_class"
|
||||
placeholder="App\Models\Contract"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="create-alias">Alias (optional)</Label>
|
||||
<Input
|
||||
id="create-alias"
|
||||
v-model="createForm.alias"
|
||||
placeholder="contracts"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="create-join-type">Join Type *</Label>
|
||||
<Select v-model="createForm.join_type">
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="base">base (no join)</SelectItem>
|
||||
<SelectItem value="join">join (INNER JOIN)</SelectItem>
|
||||
<SelectItem value="leftJoin">leftJoin (LEFT JOIN)</SelectItem>
|
||||
<SelectItem value="rightJoin">rightJoin (RIGHT JOIN)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div v-if="createForm.join_type !== 'base'" class="grid grid-cols-3 gap-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="create-join-first">Join First Column *</Label>
|
||||
<Input
|
||||
id="create-join-first"
|
||||
v-model="createForm.join_first"
|
||||
placeholder="contracts.client_id"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="create-join-op">Operator *</Label>
|
||||
<Select v-model="createForm.join_operator">
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="=">=</SelectItem>
|
||||
<SelectItem value="!=">!=</SelectItem>
|
||||
<SelectItem value=">">></SelectItem>
|
||||
<SelectItem value="<"><</SelectItem>
|
||||
<SelectItem value=">=">>=</SelectItem>
|
||||
<SelectItem value="<="><=</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="create-join-second">Join Second Column *</Label>
|
||||
<Input
|
||||
id="create-join-second"
|
||||
v-model="createForm.join_second"
|
||||
placeholder="clients.id"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="create-order">Order</Label>
|
||||
<Input
|
||||
id="create-order"
|
||||
v-model.number="createForm.order"
|
||||
type="number"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button type="button" variant="outline" @click="showCreateDialog = false">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" :disabled="createForm.processing">
|
||||
Add Entity
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<!-- Edit Dialog -->
|
||||
<Dialog v-model:open="showEditDialog">
|
||||
<DialogContent class="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Edit Entity</DialogTitle>
|
||||
<DialogDescription>
|
||||
Update entity configuration
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<form @submit.prevent="submitEdit" class="space-y-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="edit-model">Model Class *</Label>
|
||||
<Input
|
||||
id="edit-model"
|
||||
v-model="editForm.model_class"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="edit-alias">Alias (optional)</Label>
|
||||
<Input
|
||||
id="edit-alias"
|
||||
v-model="editForm.alias"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="edit-join-type">Join Type *</Label>
|
||||
<Select v-model="editForm.join_type">
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="base">base (no join)</SelectItem>
|
||||
<SelectItem value="join">join (INNER JOIN)</SelectItem>
|
||||
<SelectItem value="leftJoin">leftJoin (LEFT JOIN)</SelectItem>
|
||||
<SelectItem value="rightJoin">rightJoin (RIGHT JOIN)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div v-if="editForm.join_type !== 'base'" class="grid grid-cols-3 gap-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="edit-join-first">Join First Column *</Label>
|
||||
<Input
|
||||
id="edit-join-first"
|
||||
v-model="editForm.join_first"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="edit-join-op">Operator *</Label>
|
||||
<Select v-model="editForm.join_operator">
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="=">=</SelectItem>
|
||||
<SelectItem value="!=">!=</SelectItem>
|
||||
<SelectItem value=">">></SelectItem>
|
||||
<SelectItem value="<"><</SelectItem>
|
||||
<SelectItem value=">=">>=</SelectItem>
|
||||
<SelectItem value="<="><=</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="edit-join-second">Join Second Column *</Label>
|
||||
<Input
|
||||
id="edit-join-second"
|
||||
v-model="editForm.join_second"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="edit-order">Order</Label>
|
||||
<Input
|
||||
id="edit-order"
|
||||
v-model.number="editForm.order"
|
||||
type="number"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button type="button" variant="outline" @click="showEditDialog = false">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" :disabled="editForm.processing">
|
||||
Update Entity
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</template>
|
||||
@@ -0,0 +1,344 @@
|
||||
<script setup>
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/Components/ui/card";
|
||||
import { Button } from "@/Components/ui/button";
|
||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/Components/ui/dialog";
|
||||
import { Input } from "@/Components/ui/input";
|
||||
import { Label } from "@/Components/ui/label";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/Components/ui/select";
|
||||
import { Checkbox } from "@/Components/ui/checkbox";
|
||||
import { Badge } from "@/Components/ui/badge";
|
||||
import { useForm, router } from "@inertiajs/vue3";
|
||||
import { ref } from "vue";
|
||||
import { Plus, Pencil, Trash } from "lucide-vue-next";
|
||||
|
||||
const props = defineProps({
|
||||
report: Object,
|
||||
filters: Array,
|
||||
});
|
||||
|
||||
const showCreateDialog = ref(false);
|
||||
const showEditDialog = ref(false);
|
||||
const editingFilter = ref(null);
|
||||
|
||||
const createForm = useForm({
|
||||
key: "",
|
||||
label: "",
|
||||
type: "string",
|
||||
nullable: true,
|
||||
default_value: "",
|
||||
data_source: "",
|
||||
order: 0,
|
||||
});
|
||||
|
||||
const editForm = useForm({
|
||||
key: "",
|
||||
label: "",
|
||||
type: "string",
|
||||
nullable: true,
|
||||
default_value: "",
|
||||
data_source: "",
|
||||
order: 0,
|
||||
});
|
||||
|
||||
function openCreateDialog() {
|
||||
createForm.reset();
|
||||
createForm.order = props.filters.length;
|
||||
showCreateDialog.value = true;
|
||||
}
|
||||
|
||||
function submitCreate() {
|
||||
createForm.post(route("settings.reports.filters.store", props.report.id), {
|
||||
preserveScroll: true,
|
||||
onSuccess: () => {
|
||||
showCreateDialog.value = false;
|
||||
createForm.reset();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function openEditDialog(filter) {
|
||||
editingFilter.value = filter;
|
||||
editForm.key = filter.key;
|
||||
editForm.label = filter.label;
|
||||
editForm.type = filter.type;
|
||||
editForm.nullable = filter.nullable;
|
||||
editForm.default_value = filter.default_value || "";
|
||||
editForm.data_source = filter.data_source || "";
|
||||
editForm.order = filter.order;
|
||||
showEditDialog.value = true;
|
||||
}
|
||||
|
||||
function submitEdit() {
|
||||
editForm.put(route("settings.reports.filters.update", editingFilter.value.id), {
|
||||
preserveScroll: true,
|
||||
onSuccess: () => {
|
||||
showEditDialog.value = false;
|
||||
editForm.reset();
|
||||
editingFilter.value = null;
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function deleteFilter(filter) {
|
||||
if (confirm("Are you sure you want to delete this filter?")) {
|
||||
router.delete(route("settings.reports.filters.destroy", filter.id), {
|
||||
preserveScroll: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<CardTitle>Report Filters</CardTitle>
|
||||
<CardDescription>
|
||||
Define input parameters that users can provide to filter the report
|
||||
</CardDescription>
|
||||
</div>
|
||||
<Button @click="openCreateDialog">
|
||||
<Plus class="mr-2 h-4 w-4" />
|
||||
Add Filter
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div v-if="filters.length === 0" class="text-center py-8 text-gray-500">
|
||||
No filters configured. Add filters to allow users to filter report results.
|
||||
</div>
|
||||
|
||||
<div v-else class="space-y-3">
|
||||
<div
|
||||
v-for="filter in filters"
|
||||
:key="filter.id"
|
||||
class="flex items-start justify-between rounded-lg border p-4"
|
||||
>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="font-semibold">{{ filter.label }}</span>
|
||||
<Badge variant="outline">{{ filter.type }}</Badge>
|
||||
<Badge v-if="filter.nullable" variant="secondary">nullable</Badge>
|
||||
<Badge v-if="filter.data_source" variant="secondary">{{ filter.data_source }}</Badge>
|
||||
</div>
|
||||
<div class="text-sm text-gray-600 dark:text-gray-400 font-mono">
|
||||
{{ filter.key }}
|
||||
</div>
|
||||
<div v-if="filter.default_value" class="text-sm text-gray-500 mt-1">
|
||||
Default: {{ filter.default_value }}
|
||||
</div>
|
||||
<div class="text-xs text-gray-500 mt-1">Order: {{ filter.order }}</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<Button variant="ghost" size="icon" @click="openEditDialog(filter)">
|
||||
<Pencil class="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" @click="deleteFilter(filter)">
|
||||
<Trash class="h-4 w-4 text-destructive" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Create Dialog -->
|
||||
<Dialog v-model:open="showCreateDialog">
|
||||
<DialogContent class="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Add Filter</DialogTitle>
|
||||
<DialogDescription>
|
||||
Add a new filter parameter for the report
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<form @submit.prevent="submitCreate" class="space-y-4">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="create-key">Key *</Label>
|
||||
<Input
|
||||
id="create-key"
|
||||
v-model="createForm.key"
|
||||
placeholder="client_uuid"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="create-label">Label *</Label>
|
||||
<Input
|
||||
id="create-label"
|
||||
v-model="createForm.label"
|
||||
placeholder="Client"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="create-type">Type *</Label>
|
||||
<Select v-model="createForm.type">
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="string">string</SelectItem>
|
||||
<SelectItem value="date">date</SelectItem>
|
||||
<SelectItem value="number">number</SelectItem>
|
||||
<SelectItem value="boolean">boolean</SelectItem>
|
||||
<SelectItem value="select">select</SelectItem>
|
||||
<SelectItem value="select:client">select:client</SelectItem>
|
||||
<SelectItem value="select:user">select:user</SelectItem>
|
||||
<SelectItem value="multiselect">multiselect</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="create-data-source">Data Source (optional)</Label>
|
||||
<Input
|
||||
id="create-data-source"
|
||||
v-model="createForm.data_source"
|
||||
placeholder="clients, users, segments..."
|
||||
/>
|
||||
<p class="text-xs text-gray-500">For dynamic selects</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="create-default">Default Value (optional)</Label>
|
||||
<Input
|
||||
id="create-default"
|
||||
v-model="createForm.default_value"
|
||||
placeholder="Default value..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="create-nullable"
|
||||
v-model="createForm.nullable"
|
||||
/>
|
||||
<Label for="create-nullable" class="cursor-pointer">
|
||||
Nullable (filter is optional)
|
||||
</Label>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="create-order">Order</Label>
|
||||
<Input
|
||||
id="create-order"
|
||||
v-model.number="createForm.order"
|
||||
type="number"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button type="button" variant="outline" @click="showCreateDialog = false">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" :disabled="createForm.processing">
|
||||
Add Filter
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<!-- Edit Dialog -->
|
||||
<Dialog v-model:open="showEditDialog">
|
||||
<DialogContent class="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Edit Filter</DialogTitle>
|
||||
<DialogDescription>
|
||||
Update filter configuration
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<form @submit.prevent="submitEdit" class="space-y-4">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="edit-key">Key *</Label>
|
||||
<Input
|
||||
id="edit-key"
|
||||
v-model="editForm.key"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="edit-label">Label *</Label>
|
||||
<Input
|
||||
id="edit-label"
|
||||
v-model="editForm.label"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="edit-type">Type *</Label>
|
||||
<Select v-model="editForm.type">
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="string">string</SelectItem>
|
||||
<SelectItem value="date">date</SelectItem>
|
||||
<SelectItem value="number">number</SelectItem>
|
||||
<SelectItem value="boolean">boolean</SelectItem>
|
||||
<SelectItem value="select">select</SelectItem>
|
||||
<SelectItem value="select:client">select:client</SelectItem>
|
||||
<SelectItem value="select:user">select:user</SelectItem>
|
||||
<SelectItem value="multiselect">multiselect</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="edit-data-source">Data Source (optional)</Label>
|
||||
<Input
|
||||
id="edit-data-source"
|
||||
v-model="editForm.data_source"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="edit-default">Default Value (optional)</Label>
|
||||
<Input
|
||||
id="edit-default"
|
||||
v-model="editForm.default_value"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="edit-nullable"
|
||||
v-model="editForm.nullable"
|
||||
/>
|
||||
<Label for="edit-nullable" class="cursor-pointer">
|
||||
Nullable (filter is optional)
|
||||
</Label>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="edit-order">Order</Label>
|
||||
<Input
|
||||
id="edit-order"
|
||||
v-model.number="editForm.order"
|
||||
type="number"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button type="button" variant="outline" @click="showEditDialog = false">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" :disabled="editForm.processing">
|
||||
Update Filter
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</template>
|
||||
@@ -0,0 +1,238 @@
|
||||
<script setup>
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/Components/ui/card";
|
||||
import { Button } from "@/Components/ui/button";
|
||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/Components/ui/dialog";
|
||||
import { Input } from "@/Components/ui/input";
|
||||
import { Label } from "@/Components/ui/label";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/Components/ui/select";
|
||||
import { Badge } from "@/Components/ui/badge";
|
||||
import { useForm, router } from "@inertiajs/vue3";
|
||||
import { ref } from "vue";
|
||||
import { Plus, Pencil, Trash, ArrowUp, ArrowDown } from "lucide-vue-next";
|
||||
|
||||
const props = defineProps({
|
||||
report: Object,
|
||||
orders: Array,
|
||||
});
|
||||
|
||||
const showCreateDialog = ref(false);
|
||||
const showEditDialog = ref(false);
|
||||
const editingOrder = ref(null);
|
||||
|
||||
const createForm = useForm({
|
||||
column: "",
|
||||
direction: "ASC",
|
||||
order: 0,
|
||||
});
|
||||
|
||||
const editForm = useForm({
|
||||
column: "",
|
||||
direction: "ASC",
|
||||
order: 0,
|
||||
});
|
||||
|
||||
function openCreateDialog() {
|
||||
createForm.reset();
|
||||
createForm.order = props.orders.length;
|
||||
showCreateDialog.value = true;
|
||||
}
|
||||
|
||||
function submitCreate() {
|
||||
createForm.post(route("settings.reports.orders.store", props.report.id), {
|
||||
preserveScroll: true,
|
||||
onSuccess: () => {
|
||||
showCreateDialog.value = false;
|
||||
createForm.reset();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function openEditDialog(order) {
|
||||
editingOrder.value = order;
|
||||
editForm.column = order.column;
|
||||
editForm.direction = order.direction;
|
||||
editForm.order = order.order;
|
||||
showEditDialog.value = true;
|
||||
}
|
||||
|
||||
function submitEdit() {
|
||||
editForm.put(route("settings.reports.orders.update", editingOrder.value.id), {
|
||||
preserveScroll: true,
|
||||
onSuccess: () => {
|
||||
showEditDialog.value = false;
|
||||
editForm.reset();
|
||||
editingOrder.value = null;
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function deleteOrder(order) {
|
||||
if (confirm("Are you sure you want to delete this order clause?")) {
|
||||
router.delete(route("settings.reports.orders.destroy", order.id), {
|
||||
preserveScroll: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<CardTitle>ORDER BY Clauses</CardTitle>
|
||||
<CardDescription>
|
||||
Define how to sort the report results
|
||||
</CardDescription>
|
||||
</div>
|
||||
<Button @click="openCreateDialog">
|
||||
<Plus class="mr-2 h-4 w-4" />
|
||||
Add Order
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div v-if="orders.length === 0" class="text-center py-8 text-gray-500">
|
||||
No order clauses configured. Add ORDER BY clauses to sort results.
|
||||
</div>
|
||||
|
||||
<div v-else class="space-y-3">
|
||||
<div
|
||||
v-for="orderClause in orders"
|
||||
:key="orderClause.id"
|
||||
class="flex items-start justify-between rounded-lg border p-4"
|
||||
>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<ArrowUp v-if="orderClause.direction === 'ASC'" class="h-4 w-4 text-blue-600" />
|
||||
<ArrowDown v-else class="h-4 w-4 text-orange-600" />
|
||||
<span class="font-mono text-sm">{{ orderClause.column }}</span>
|
||||
<Badge :variant="orderClause.direction === 'ASC' ? 'default' : 'secondary'">
|
||||
{{ orderClause.direction }}
|
||||
</Badge>
|
||||
</div>
|
||||
<div class="text-xs text-gray-500">Order: {{ orderClause.order }}</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<Button variant="ghost" size="icon" @click="openEditDialog(orderClause)">
|
||||
<Pencil class="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" @click="deleteOrder(orderClause)">
|
||||
<Trash class="h-4 w-4 text-destructive" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Create Dialog -->
|
||||
<Dialog v-model:open="showCreateDialog">
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Add Order Clause</DialogTitle>
|
||||
<DialogDescription>
|
||||
Add a new ORDER BY clause
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<form @submit.prevent="submitCreate" class="space-y-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="create-column">Column *</Label>
|
||||
<Input
|
||||
id="create-column"
|
||||
v-model="createForm.column"
|
||||
placeholder="contracts.start_date"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="create-direction">Direction *</Label>
|
||||
<Select v-model="createForm.direction">
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="ASC">ASC (Ascending)</SelectItem>
|
||||
<SelectItem value="DESC">DESC (Descending)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="create-order">Order</Label>
|
||||
<Input
|
||||
id="create-order"
|
||||
v-model.number="createForm.order"
|
||||
type="number"
|
||||
/>
|
||||
<p class="text-xs text-gray-500">Determines sort priority (lower = higher priority)</p>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button type="button" variant="outline" @click="showCreateDialog = false">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" :disabled="createForm.processing">
|
||||
Add Order
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<!-- Edit Dialog -->
|
||||
<Dialog v-model:open="showEditDialog">
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Edit Order Clause</DialogTitle>
|
||||
<DialogDescription>
|
||||
Update order clause configuration
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<form @submit.prevent="submitEdit" class="space-y-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="edit-column">Column *</Label>
|
||||
<Input
|
||||
id="edit-column"
|
||||
v-model="editForm.column"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="edit-direction">Direction *</Label>
|
||||
<Select v-model="editForm.direction">
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="ASC">ASC (Ascending)</SelectItem>
|
||||
<SelectItem value="DESC">DESC (Descending)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="edit-order">Order</Label>
|
||||
<Input
|
||||
id="edit-order"
|
||||
v-model.number="editForm.order"
|
||||
type="number"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button type="button" variant="outline" @click="showEditDialog = false">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" :disabled="editForm.processing">
|
||||
Update Order
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</template>
|
||||
Reference in New Issue
Block a user