279 lines
8.4 KiB
Vue
279 lines
8.4 KiB
Vue
<script setup>
|
|
import AppLayout from "@/Layouts/AppLayout.vue";
|
|
import { Link, router } from "@inertiajs/vue3";
|
|
import { ref, computed } from "vue";
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
} from "@/Components/ui/alert-dialog";
|
|
import DataTable from "@/Components/DataTable/DataTableNew2.vue";
|
|
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
|
import {
|
|
faEllipsisVertical,
|
|
faEye,
|
|
faPlay,
|
|
faTrash,
|
|
faCircleCheck,
|
|
} from "@fortawesome/free-solid-svg-icons";
|
|
import TableActions from "@/Components/DataTable/TableActions.vue";
|
|
import ActionMenuItem from "@/Components/DataTable/ActionMenuItem.vue";
|
|
import { Button } from "@/Components/ui/button";
|
|
import { Input } from "@/Components/ui/input";
|
|
import AppCard from "@/Components/app/ui/card/AppCard.vue";
|
|
import { ImportIcon } from "lucide-vue-next";
|
|
import { CardTitle } from "@/Components/ui/card";
|
|
|
|
const props = defineProps({
|
|
imports: Object,
|
|
});
|
|
|
|
const deletingId = ref(null);
|
|
const confirming = ref(false);
|
|
const errorMsg = ref(null);
|
|
const search = ref(new URLSearchParams(window.location.search).get("search") || "");
|
|
|
|
const rows = computed(() => props.imports?.data || []);
|
|
|
|
function canDelete(status) {
|
|
return !["completed", "processing"].includes(status);
|
|
}
|
|
|
|
function confirmDelete(imp) {
|
|
if (!canDelete(imp.status)) return;
|
|
deletingId.value = imp.id;
|
|
confirming.value = true;
|
|
errorMsg.value = null;
|
|
}
|
|
|
|
function performDelete() {
|
|
if (!deletingId.value) return;
|
|
router.delete(route("imports.destroy", { import: deletingId.value }), {
|
|
preserveScroll: true,
|
|
onFinish: () => {
|
|
confirming.value = false;
|
|
deletingId.value = null;
|
|
},
|
|
onError: (errs) => {
|
|
errorMsg.value = errs?.message || "Brisanje ni uspelo.";
|
|
},
|
|
});
|
|
}
|
|
|
|
function statusBadge(status) {
|
|
const map = {
|
|
uploaded: "bg-gray-200 text-gray-700",
|
|
parsed: "bg-blue-100 text-blue-800",
|
|
validating: "bg-amber-100 text-amber-800",
|
|
completed: "bg-emerald-100 text-emerald-800",
|
|
failed: "bg-red-100 text-red-800",
|
|
};
|
|
return map[status] || "bg-gray-100 text-gray-800";
|
|
}
|
|
|
|
function applySearch() {
|
|
const params = {};
|
|
const currentParams = new URLSearchParams(window.location.search);
|
|
for (const [key, value] of currentParams.entries()) {
|
|
if (key !== "search" && key !== "page") {
|
|
params[key] = value;
|
|
}
|
|
}
|
|
const term = (search.value || "").trim();
|
|
if (term) {
|
|
params.search = term;
|
|
}
|
|
router.get(route("imports.index"), params, {
|
|
preserveState: true,
|
|
replace: true,
|
|
preserveScroll: true,
|
|
only: ["imports"],
|
|
});
|
|
}
|
|
|
|
const columns = [
|
|
{ key: "created_at", label: "Datum", sortable: false },
|
|
{ key: "original_name", label: "Datoteka", sortable: false },
|
|
{ key: "status", label: "Status", sortable: false },
|
|
{ key: "client", label: "Naročnik", sortable: false },
|
|
{ key: "template", label: "Predloga", sortable: false },
|
|
{ key: "actions", label: "", sortable: false, hideable: false, align: "center" },
|
|
];
|
|
|
|
function formatDateTimeNoSeconds(value) {
|
|
if (!value) return "-";
|
|
const d = new Date(value);
|
|
if (isNaN(d)) return String(value);
|
|
return d.toLocaleString("sl-SI", {
|
|
year: "numeric",
|
|
month: "2-digit",
|
|
day: "2-digit",
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<AppLayout title="Uvozi">
|
|
<template #header> </template>
|
|
|
|
<div class="py-6">
|
|
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
|
|
<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 gap-2">
|
|
<ImportIcon size="18" />
|
|
<CardTitle class="uppercase">Uvozi</CardTitle>
|
|
</div>
|
|
</template>
|
|
<DataTable
|
|
:columns="columns"
|
|
:data="rows"
|
|
:meta="{
|
|
current_page: imports?.meta?.current_page,
|
|
per_page: imports?.meta?.per_page,
|
|
total: imports?.meta?.total,
|
|
last_page: imports?.meta?.last_page,
|
|
from: imports?.meta?.from,
|
|
to: imports?.meta?.to,
|
|
links: imports?.links,
|
|
}"
|
|
route-name="imports.index"
|
|
:only-props="['imports']"
|
|
:page-size="25"
|
|
:page-size-options="[10, 15, 25, 50, 100]"
|
|
:show-pagination="true"
|
|
:show-toolbar="true"
|
|
:hoverable="true"
|
|
row-key="uuid"
|
|
empty-text="Ni uvozov."
|
|
>
|
|
<template #toolbar-actions>
|
|
<Button size="sm" variant="default" as-child>
|
|
<Link :href="route('imports.create')">Novi uvoz</Link>
|
|
</Button>
|
|
</template>
|
|
<template #toolbar-filters>
|
|
<div class="flex items-center gap-2">
|
|
<Input
|
|
v-model="search"
|
|
placeholder="Išči uvoz..."
|
|
class="w-65"
|
|
@keydown.enter="applySearch"
|
|
/>
|
|
<Button size="sm" variant="outline" @click="applySearch">Išči</Button>
|
|
</div>
|
|
</template>
|
|
<!-- Datum column formatted -->
|
|
<template #cell-created_at="{ row }">
|
|
{{ formatDateTimeNoSeconds(row.created_at) }}
|
|
</template>
|
|
|
|
<!-- Status badge -->
|
|
<template #cell-status="{ row }">
|
|
<span :class="['px-2 py-0.5 rounded text-xs', statusBadge(row.status)]">
|
|
{{ row.status }}
|
|
</span>
|
|
</template>
|
|
|
|
<!-- Client name -->
|
|
<template #cell-client="{ row }">
|
|
{{ row.client?.person?.full_name ?? "—" }}
|
|
</template>
|
|
|
|
<!-- Template name -->
|
|
<template #cell-template="{ row }">
|
|
{{ row.template?.name ?? "—" }}
|
|
</template>
|
|
|
|
<!-- Actions -->
|
|
<template #cell-actions="{ row }">
|
|
<TableActions align="right">
|
|
<template #default>
|
|
<ActionMenuItem
|
|
:icon="faEye"
|
|
label="Poglej"
|
|
@click="
|
|
$inertia.visit(route('imports.continue', { import: row.uuid }))
|
|
"
|
|
/>
|
|
<ActionMenuItem
|
|
v-if="row.status !== 'completed'"
|
|
:icon="faPlay"
|
|
label="Nadaljuj"
|
|
@click="
|
|
$inertia.visit(route('imports.continue', { import: row.uuid }))
|
|
"
|
|
/>
|
|
<ActionMenuItem
|
|
v-if="canDelete(row.status)"
|
|
:icon="faTrash"
|
|
label="Izbriši"
|
|
danger
|
|
@click="confirmDelete(row)"
|
|
/>
|
|
<ActionMenuItem
|
|
v-if="!canDelete(row.status)"
|
|
:icon="faCircleCheck"
|
|
label="Zaključen"
|
|
disabled
|
|
/>
|
|
</template>
|
|
</TableActions>
|
|
</template>
|
|
</DataTable>
|
|
</AppCard>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Delete Confirmation Dialog -->
|
|
<AlertDialog
|
|
:open="confirming"
|
|
@update:open="
|
|
(val) => {
|
|
if (!val) {
|
|
confirming = false;
|
|
deletingId = null;
|
|
}
|
|
}
|
|
"
|
|
>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>Potrditev brisanja</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
Ste prepričani, da želite izbrisati ta uvoz? Datoteka bo odstranjena iz
|
|
shrambe, če je še prisotna.
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<p v-if="errorMsg" class="text-sm text-red-600">{{ errorMsg }}</p>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel
|
|
@click="
|
|
confirming = false;
|
|
deletingId = null;
|
|
"
|
|
>
|
|
Prekliči
|
|
</AlertDialogCancel>
|
|
<Button @click="performDelete" class="bg-destructive hover:bg-destructive/90">
|
|
Izbriši
|
|
</Button>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
</AppLayout>
|
|
</template>
|