256 lines
7.7 KiB
Vue
256 lines
7.7 KiB
Vue
<script setup>
|
|
import AdminLayout from "@/Layouts/AdminLayout.vue";
|
|
import { Head, useForm, router } from "@inertiajs/vue3";
|
|
import { ref, computed } from "vue";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/Components/ui/card";
|
|
import { Button } from "@/Components/ui/button";
|
|
import { Input } from "@/Components/ui/input";
|
|
import { Label } from "@/Components/ui/label";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/Components/ui/select";
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/Components/ui/table";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/Components/ui/dialog";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/Components/ui/dropdown-menu";
|
|
import { Switch } from "@/Components/ui/switch";
|
|
import {
|
|
PhoneIcon,
|
|
PlusIcon,
|
|
PencilIcon,
|
|
Trash2Icon,
|
|
MoreVerticalIcon,
|
|
} from "lucide-vue-next";
|
|
|
|
const props = defineProps({
|
|
initialSenders: { type: Array, default: () => [] },
|
|
profiles: { type: Array, default: () => [] },
|
|
});
|
|
|
|
// Use props directly so Inertia navigations refresh the list automatically
|
|
const senders = computed(() => props.initialSenders || []);
|
|
const profileById = computed(() =>
|
|
Object.fromEntries((props.profiles || []).map((p) => [p.id, p]))
|
|
);
|
|
|
|
// Create/Edit modal
|
|
const editOpen = ref(false);
|
|
const editing = ref(null);
|
|
const form = useForm({
|
|
profile_id: null,
|
|
sname: "",
|
|
phone_number: "",
|
|
description: "",
|
|
active: true,
|
|
});
|
|
|
|
function openCreate() {
|
|
editing.value = null;
|
|
form.reset();
|
|
form.active = true;
|
|
editOpen.value = true;
|
|
}
|
|
|
|
function openEdit(s) {
|
|
editing.value = s;
|
|
form.reset();
|
|
form.profile_id = s.profile_id;
|
|
form.sname = s.sname;
|
|
form.phone_number = s.phone_number || "";
|
|
form.description = s.description;
|
|
form.active = !!s.active;
|
|
editOpen.value = true;
|
|
}
|
|
|
|
async function submitEdit() {
|
|
try {
|
|
form.processing = true;
|
|
const payload = {
|
|
profile_id: form.profile_id,
|
|
sname: (form.sname || "").trim() || null,
|
|
phone_number: form.phone_number || null,
|
|
description: form.description || null,
|
|
active: !!form.active,
|
|
};
|
|
if (editing.value) {
|
|
await router.put(route("admin.sms-senders.update", editing.value.id), payload, {
|
|
preserveScroll: true,
|
|
});
|
|
} else {
|
|
await router.post(route("admin.sms-senders.store"), payload, {
|
|
preserveScroll: true,
|
|
});
|
|
}
|
|
editOpen.value = false;
|
|
} finally {
|
|
form.processing = false;
|
|
}
|
|
}
|
|
|
|
async function toggleActive(s) {
|
|
await router.post(
|
|
route("admin.sms-senders.toggle", s.id),
|
|
{},
|
|
{ preserveScroll: true }
|
|
);
|
|
}
|
|
|
|
async function destroySender(s) {
|
|
if (!confirm(`Izbrišem pošiljatelja "${s.sname}"?`)) return;
|
|
await router.delete(route("admin.sms-senders.destroy", s.id), { preserveScroll: true });
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<AdminLayout title="SMS pošiljatelji">
|
|
<Head title="SMS pošiljatelji" />
|
|
<Card>
|
|
<CardHeader>
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-2">
|
|
<PhoneIcon class="h-5 w-5 text-muted-foreground" />
|
|
<CardTitle>SMS pošiljatelji</CardTitle>
|
|
</div>
|
|
<Button @click="openCreate">
|
|
<PlusIcon class="h-4 w-4 mr-2" />
|
|
Nov pošiljatelj
|
|
</Button>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Pošiljatelj</TableHead>
|
|
<TableHead>Številka</TableHead>
|
|
<TableHead>Profil</TableHead>
|
|
<TableHead>Aktiven</TableHead>
|
|
<TableHead>Opis</TableHead>
|
|
<TableHead class="text-right">Akcije</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
<TableRow v-for="s in senders" :key="s.id">
|
|
<TableCell class="font-medium">{{ s.sname }}</TableCell>
|
|
<TableCell>{{ s.phone_number || "—" }}</TableCell>
|
|
<TableCell>{{ profileById[s.profile_id]?.name || "—" }}</TableCell>
|
|
<TableCell>
|
|
<Switch
|
|
:default-value="s.active"
|
|
@update:model-value="() => toggleActive(s)"
|
|
/>
|
|
</TableCell>
|
|
<TableCell class="text-muted-foreground">{{
|
|
s.description || "—"
|
|
}}</TableCell>
|
|
<TableCell class="text-right">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger as-child>
|
|
<Button variant="ghost" size="icon">
|
|
<MoreVerticalIcon class="h-4 w-4" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuItem @click="openEdit(s)">
|
|
<PencilIcon class="h-4 w-4 mr-2" />
|
|
Uredi
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem @click="destroySender(s)" class="text-destructive">
|
|
<Trash2Icon class="h-4 w-4 mr-2" />
|
|
Izbriši
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</TableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Dialog :open="editOpen" @update:open="(val) => (editOpen = val)">
|
|
<DialogContent class="max-w-2xl">
|
|
<DialogHeader>
|
|
<DialogTitle>{{
|
|
editing ? "Uredi pošiljatelja" : "Nov pošiljatelj"
|
|
}}</DialogTitle>
|
|
</DialogHeader>
|
|
<form @submit.prevent="submitEdit" id="edit-sms-sender" class="space-y-4">
|
|
<div class="grid gap-4 grid-cols-2">
|
|
<div class="space-y-2">
|
|
<Label>Profil</Label>
|
|
<Select v-model="form.profile_id">
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Izberi profil…" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem v-for="p in profiles" :key="p.id" :value="p.id">
|
|
{{ p.name }}
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<Label>Pošiljatelj (Sender ID) — opcijsko</Label>
|
|
<Input v-model="form.sname" type="text" placeholder="npr. TEREN" />
|
|
</div>
|
|
<div class="space-y-2">
|
|
<Label>Številka pošiljatelja (opcijsko)</Label>
|
|
<Input
|
|
v-model="form.phone_number"
|
|
type="text"
|
|
placeholder="npr. +38640123456"
|
|
/>
|
|
</div>
|
|
<div class="space-y-2 col-span-2">
|
|
<Label>Opis (opcijsko)</Label>
|
|
<Input v-model="form.description" type="text" />
|
|
</div>
|
|
<div class="space-y-2">
|
|
<Label>Aktivno</Label>
|
|
<Select v-model="form.active">
|
|
<SelectTrigger>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem :value="true">Da</SelectItem>
|
|
<SelectItem :value="false">Ne</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<DialogFooter>
|
|
<Button type="button" variant="outline" @click="() => (editOpen = false)"
|
|
>Prekliči</Button
|
|
>
|
|
<Button form="edit-sms-sender" type="submit" :disabled="form.processing"
|
|
>Shrani</Button
|
|
>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</AdminLayout>
|
|
</template>
|