238 lines
7.8 KiB
Vue
238 lines
7.8 KiB
Vue
<script setup>
|
|
import AppLayout from "@/Layouts/AppLayout.vue";
|
|
import { Link, router } from "@inertiajs/vue3";
|
|
import { ref } from "vue";
|
|
import ConfirmationModal from "@/Components/ConfirmationModal.vue";
|
|
import DataTableServer from "@/Components/DataTable/DataTableServer.vue";
|
|
import Dropdown from "@/Components/Dropdown.vue";
|
|
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
|
import {
|
|
faEllipsisVertical,
|
|
faEye,
|
|
faPlay,
|
|
faTrash,
|
|
faCircleCheck,
|
|
} from "@fortawesome/free-solid-svg-icons";
|
|
|
|
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") || "");
|
|
|
|
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";
|
|
}
|
|
|
|
const columns = [
|
|
{ key: "created_at", label: "Datum" },
|
|
{ key: "original_name", label: "Datoteka" },
|
|
{ key: "status", label: "Status" },
|
|
{ key: "client", label: "Naročnik" },
|
|
{ key: "template", label: "Predloga" },
|
|
{ key: "actions", label: "Akcije", class: "w-px" },
|
|
];
|
|
|
|
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>
|
|
<div class="flex items-center justify-between">
|
|
<h2 class="font-semibold text-xl text-gray-800 leading-tight">Uvozi</h2>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="py-6">
|
|
<div class="max-w-6xl mx-auto sm:px-6 lg:px-8">
|
|
<div class="flex flex-col gap-3 bg-white shadow sm:rounded-lg p-4">
|
|
<div class="flex justify-end">
|
|
<Link
|
|
:href="route('imports.create')"
|
|
class="px-3 py-2 rounded bg-blue-600 text-white text-sm"
|
|
>Novi uvoz</Link
|
|
>
|
|
</div>
|
|
<DataTableServer
|
|
:columns="columns"
|
|
:rows="imports?.data || []"
|
|
:meta="
|
|
imports?.meta
|
|
? {
|
|
current_page: imports.meta.current_page,
|
|
per_page: imports.meta.per_page,
|
|
total: imports.meta.total,
|
|
last_page: imports.meta.last_page,
|
|
}
|
|
: {}
|
|
"
|
|
v-model:search="search"
|
|
route-name="imports.index"
|
|
:only-props="['imports']"
|
|
row-key="uuid"
|
|
empty-text="Ni uvozov."
|
|
>
|
|
<!-- 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 }">
|
|
<Dropdown width="48" :close-on-content-click="true">
|
|
<template #trigger>
|
|
<button
|
|
type="button"
|
|
class="inline-flex items-center justify-center w-8 h-8 rounded hover:bg-gray-100"
|
|
aria-label="Akcije"
|
|
>
|
|
<FontAwesomeIcon
|
|
:icon="faEllipsisVertical"
|
|
class="w-4 h-4 text-gray-600"
|
|
/>
|
|
</button>
|
|
</template>
|
|
<template #content>
|
|
<div class="py-1">
|
|
<Link
|
|
:href="route('imports.continue', { import: row.uuid })"
|
|
class="flex items-center w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
|
|
>
|
|
<FontAwesomeIcon :icon="faEye" class="w-4 h-4 me-2 text-gray-500" />
|
|
<span>Poglej</span>
|
|
</Link>
|
|
<Link
|
|
v-if="row.status !== 'completed'"
|
|
:href="route('imports.continue', { import: row.uuid })"
|
|
class="flex items-center w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
|
|
>
|
|
<FontAwesomeIcon
|
|
:icon="faPlay"
|
|
class="w-4 h-4 me-2 text-gray-500"
|
|
/>
|
|
<span>Nadaljuj</span>
|
|
</Link>
|
|
<button
|
|
v-if="canDelete(row.status)"
|
|
type="button"
|
|
class="flex items-center w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50"
|
|
@click="confirmDelete(row)"
|
|
>
|
|
<FontAwesomeIcon :icon="faTrash" class="w-4 h-4 me-2" />
|
|
<span>Izbriši</span>
|
|
</button>
|
|
<div
|
|
v-else
|
|
class="flex items-center px-4 py-2 text-sm text-gray-400 cursor-default"
|
|
>
|
|
<FontAwesomeIcon :icon="faCircleCheck" class="w-4 h-4 me-2" />
|
|
<span>Zaključen</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</Dropdown>
|
|
</template>
|
|
</DataTableServer>
|
|
<ConfirmationModal
|
|
:show="confirming"
|
|
@close="
|
|
confirming = false;
|
|
deletingId = null;
|
|
"
|
|
>
|
|
<template #title>Potrditev brisanja</template>
|
|
<template #content>
|
|
<p class="text-sm">
|
|
Ste prepričani, da želite izbrisati ta uvoz? Datoteka bo odstranjena iz
|
|
shrambe, če je še prisotna.
|
|
</p>
|
|
<p v-if="errorMsg" class="text-sm text-red-600 mt-2">{{ errorMsg }}</p>
|
|
</template>
|
|
<template #footer>
|
|
<button
|
|
class="px-3 py-1.5 text-sm border rounded me-2"
|
|
@click="
|
|
confirming = false;
|
|
deletingId = null;
|
|
"
|
|
>
|
|
Prekliči
|
|
</button>
|
|
<button
|
|
class="px-3 py-1.5 text-sm rounded bg-red-600 text-white"
|
|
@click="performDelete"
|
|
>
|
|
Izbriši
|
|
</button>
|
|
</template>
|
|
</ConfirmationModal>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AppLayout>
|
|
</template>
|