New report system and views
This commit is contained in:
Simon Pocrnjič
@@ -2,12 +2,17 @@
|
||||
import AppLayout from "@/Layouts/AppLayout.vue";
|
||||
import { useForm, router } from "@inertiajs/vue3";
|
||||
import { ref } from "vue";
|
||||
import CreateDialog from "@/Components/Dialogs/CreateDialog.vue";
|
||||
import UpdateDialog from "@/Components/Dialogs/UpdateDialog.vue";
|
||||
import PrimaryButton from "@/Components/PrimaryButton.vue";
|
||||
import AppCard from "@/Components/app/ui/card/AppCard.vue";
|
||||
import CardTitle from "@/Components/ui/card/CardTitle.vue";
|
||||
import { LayoutGrid } from "lucide-vue-next";
|
||||
import { Button } from "@/Components/ui/button";
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/Components/ui/dialog";
|
||||
import { Input } from "@/Components/ui/input";
|
||||
import { Checkbox } from "@/Components/ui/checkbox";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/Components/ui/table";
|
||||
import { Badge } from "@/Components/ui/badge";
|
||||
import InputLabel from "@/Components/InputLabel.vue";
|
||||
import InputError from "@/Components/InputError.vue";
|
||||
import TextInput from "@/Components/TextInput.vue";
|
||||
|
||||
const props = defineProps({
|
||||
segments: Array,
|
||||
@@ -79,144 +84,150 @@ const update = () => {
|
||||
<template #header></template>
|
||||
<div class="pt-12">
|
||||
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
|
||||
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-6">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-xl font-semibold">Segments</h2>
|
||||
<PrimaryButton @click="openCreate">+ New</PrimaryButton>
|
||||
<AppCard
|
||||
title=""
|
||||
padding="none"
|
||||
class="p-0! gap-0"
|
||||
header-class="py-3! px-4 gap-0 text-muted-foreground"
|
||||
body-class=""
|
||||
>
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between w-full">
|
||||
<div class="flex items-center gap-2">
|
||||
<LayoutGrid :size="18" />
|
||||
<CardTitle class="uppercase">Segments</CardTitle>
|
||||
</div>
|
||||
<Button @click="openCreate">+ New</Button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="border-t">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>ID</TableHead>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>Description</TableHead>
|
||||
<TableHead>Active</TableHead>
|
||||
<TableHead>Exclude</TableHead>
|
||||
<TableHead>Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow v-for="s in segments" :key="s.id">
|
||||
<TableCell>{{ s.id }}</TableCell>
|
||||
<TableCell>{{ s.name }}</TableCell>
|
||||
<TableCell>{{ s.description }}</TableCell>
|
||||
<TableCell>
|
||||
<Badge :variant="s.active ? 'default' : 'secondary'">
|
||||
{{ s.active ? "Yes" : "No" }}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge :variant="s.exclude ? 'default' : 'secondary'">
|
||||
{{ s.exclude ? "Yes" : "No" }}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Button variant="ghost" size="sm" @click="openEdit(s)">
|
||||
Edit
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
<CreateDialog
|
||||
:show="showCreate"
|
||||
title="New Segment"
|
||||
confirm-text="Create"
|
||||
:processing="createForm.processing"
|
||||
@close="closeCreate"
|
||||
@confirm="store"
|
||||
>
|
||||
<form @submit.prevent="store" class="space-y-4">
|
||||
<!-- Create Dialog -->
|
||||
<Dialog v-model:open="showCreate">
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>New Segment</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<InputLabel for="nameCreate" value="Name" />
|
||||
<TextInput
|
||||
<InputLabel for="nameCreate">Name</InputLabel>
|
||||
<Input
|
||||
id="nameCreate"
|
||||
v-model="createForm.name"
|
||||
type="text"
|
||||
class="mt-1 block w-full"
|
||||
/>
|
||||
<InputError :message="createForm.errors.name" class="mt-1" />
|
||||
</div>
|
||||
<div>
|
||||
<InputLabel for="descCreate" value="Description" />
|
||||
<TextInput
|
||||
<InputLabel for="descCreate">Description</InputLabel>
|
||||
<Input
|
||||
id="descCreate"
|
||||
v-model="createForm.description"
|
||||
type="text"
|
||||
class="mt-1 block w-full"
|
||||
/>
|
||||
<InputError :message="createForm.errors.description" class="mt-1" />
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<input id="activeCreate" type="checkbox" v-model="createForm.active" />
|
||||
<label for="activeCreate">Active</label>
|
||||
<Checkbox id="activeCreate" v-model="createForm.active" />
|
||||
<InputLabel for="activeCreate" class="text-sm font-normal cursor-pointer">
|
||||
Active
|
||||
</InputLabel>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<input
|
||||
id="excludeCreate"
|
||||
type="checkbox"
|
||||
v-model="createForm.exclude"
|
||||
/>
|
||||
<label for="excludeCreate">Exclude</label>
|
||||
<Checkbox id="excludeCreate" v-model="createForm.exclude" />
|
||||
<InputLabel for="excludeCreate" class="text-sm font-normal cursor-pointer">
|
||||
Exclude
|
||||
</InputLabel>
|
||||
</div>
|
||||
</form>
|
||||
</CreateDialog>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" @click="closeCreate">Cancel</Button>
|
||||
<Button @click="store" :disabled="createForm.processing">Create</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<UpdateDialog
|
||||
:show="showEdit"
|
||||
title="Edit Segment"
|
||||
confirm-text="Save"
|
||||
:processing="editForm.processing"
|
||||
@close="closeEdit"
|
||||
@confirm="update"
|
||||
>
|
||||
<form @submit.prevent="update" class="space-y-4">
|
||||
<!-- Edit Dialog -->
|
||||
<Dialog v-model:open="showEdit">
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Edit Segment</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<InputLabel for="nameEdit" value="Name" />
|
||||
<TextInput
|
||||
<InputLabel for="nameEdit">Name</InputLabel>
|
||||
<Input
|
||||
id="nameEdit"
|
||||
v-model="editForm.name"
|
||||
type="text"
|
||||
class="mt-1 block w-full"
|
||||
/>
|
||||
<InputError :message="editForm.errors.name" class="mt-1" />
|
||||
</div>
|
||||
<div>
|
||||
<InputLabel for="descEdit" value="Description" />
|
||||
<TextInput
|
||||
<InputLabel for="descEdit">Description</InputLabel>
|
||||
<Input
|
||||
id="descEdit"
|
||||
v-model="editForm.description"
|
||||
type="text"
|
||||
class="mt-1 block w-full"
|
||||
/>
|
||||
<InputError :message="editForm.errors.description" class="mt-1" />
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<input id="activeEdit" type="checkbox" v-model="editForm.active" />
|
||||
<label for="activeEdit">Active</label>
|
||||
<Checkbox id="activeEdit" v-model="editForm.active" />
|
||||
<InputLabel for="activeEdit" class="text-sm font-normal cursor-pointer">
|
||||
Active
|
||||
</InputLabel>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<input id="excludeEdit" type="checkbox" v-model="editForm.exclude" />
|
||||
<label for="excludeEdit">Exclude</label>
|
||||
<Checkbox id="excludeEdit" v-model="editForm.exclude" />
|
||||
<InputLabel for="excludeEdit" class="text-sm font-normal cursor-pointer">
|
||||
Exclude
|
||||
</InputLabel>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</UpdateDialog>
|
||||
|
||||
<table class="min-w-full text-left text-sm">
|
||||
<thead>
|
||||
<tr class="border-b">
|
||||
<th class="py-2 pr-4">ID</th>
|
||||
<th class="py-2 pr-4">Name</th>
|
||||
<th class="py-2 pr-4">Description</th>
|
||||
<th class="py-2 pr-4">Active</th>
|
||||
<th class="py-2 pr-4">Exclude</th>
|
||||
<th class="py-2 pr-4">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="s in segments" :key="s.id" class="border-b last:border-0">
|
||||
<td class="py-2 pr-4">{{ s.id }}</td>
|
||||
<td class="py-2 pr-4">{{ s.name }}</td>
|
||||
<td class="py-2 pr-4">{{ s.description }}</td>
|
||||
<td class="py-2 pr-4">
|
||||
<span class="inline-flex items-center gap-1">
|
||||
<span
|
||||
:class="s.active ? 'bg-green-500' : 'bg-gray-400'"
|
||||
class="inline-block w-2 h-2 rounded-full"
|
||||
></span>
|
||||
{{ s.active ? "Yes" : "No" }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="py-2 pr-4">
|
||||
<span class="inline-flex items-center gap-1">
|
||||
<span
|
||||
:class="s.exclude ? 'bg-green-500' : 'bg-gray-400'"
|
||||
class="inline-block w-2 h-2 rounded-full"
|
||||
></span>
|
||||
{{ s.exclude ? "Yes" : "No" }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="py-2 pr-4">
|
||||
<button
|
||||
class="text-indigo-600 hover:text-indigo-800"
|
||||
@click="openEdit(s)"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<!-- Delete intentionally skipped as requested -->
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" @click="closeEdit">Cancel</Button>
|
||||
<Button @click="update" :disabled="editForm.processing">Save</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</AppCard>
|
||||
</div>
|
||||
</div>
|
||||
</AppLayout>
|
||||
|
||||
Reference in New Issue
Block a user