76 lines
3.1 KiB
Vue
76 lines
3.1 KiB
Vue
<script setup>
|
||
import AppLayout from '@/Layouts/AppLayout.vue';
|
||
import { Link } from '@inertiajs/vue3';
|
||
|
||
const props = defineProps({
|
||
imports: Object,
|
||
});
|
||
|
||
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';
|
||
}
|
||
</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>
|
||
<Link :href="route('imports.create')" class="px-3 py-2 rounded bg-blue-600 text-white text-sm">Novi uvoz</Link>
|
||
</div>
|
||
</template>
|
||
|
||
<div class="py-6">
|
||
<div class="max-w-6xl mx-auto sm:px-6 lg:px-8">
|
||
<div class="bg-white shadow sm:rounded-lg p-6">
|
||
<div class="overflow-x-auto">
|
||
<table class="min-w-full text-sm">
|
||
<thead>
|
||
<tr class="text-left text-xs uppercase text-gray-500 border-b">
|
||
<th class="p-2">Datum</th>
|
||
<th class="p-2">Datoteka</th>
|
||
<th class="p-2">Status</th>
|
||
<th class="p-2">Naročnik</th>
|
||
<th class="p-2">Predloga</th>
|
||
<th class="p-2">Akcije</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="imp in imports.data" :key="imp.uuid" class="border-b">
|
||
<td class="p-2 whitespace-nowrap">{{ new Date(imp.created_at).toLocaleString() }}</td>
|
||
<td class="p-2">{{ imp.original_name }}</td>
|
||
<td class="p-2"><span :class="['px-2 py-0.5 rounded text-xs', statusBadge(imp.status)]">{{ imp.status }}</span></td>
|
||
<td class="p-2">{{ imp.client?.uuid ?? '—' }}</td>
|
||
<td class="p-2">{{ imp.template?.name ?? '—' }}</td>
|
||
<td class="p-2 space-x-2">
|
||
<Link :href="route('imports.continue', { import: imp.uuid })" class="px-2 py-1 rounded bg-gray-200 text-gray-800 text-xs">Poglej</Link>
|
||
<Link v-if="imp.status !== 'completed'" :href="route('imports.continue', { import: imp.uuid })" class="px-2 py-1 rounded bg-amber-600 text-white text-xs">Nadaljuj</Link>
|
||
<span v-else class="text-xs text-gray-400">Zaključen</span>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="flex items-center justify-between mt-4 text-sm text-gray-600">
|
||
<div>
|
||
Prikaz {{ imports.meta.from }}–{{ imports.meta.to }} od {{ imports.meta.total }}
|
||
</div>
|
||
<div class="space-x-2">
|
||
<Link v-if="imports.links.prev" :href="imports.links.prev" class="px-2 py-1 border rounded">Nazaj</Link>
|
||
<Link v-if="imports.links.next" :href="imports.links.next" class="px-2 py-1 border rounded">Naprej</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</AppLayout>
|
||
</template>
|