89 lines
3.5 KiB
Vue
89 lines
3.5 KiB
Vue
<script setup>
|
|
import AppLayout from '@/Layouts/AppLayout.vue';
|
|
import { Link, useForm } from '@inertiajs/vue3';
|
|
import { ref } from 'vue';
|
|
|
|
// Non-blocking confirm modal state
|
|
const confirmOpen = ref(false);
|
|
const confirmUuid = ref(null);
|
|
const deleteForm = useForm({});
|
|
|
|
function requestDelete(uuid) {
|
|
confirmUuid.value = uuid;
|
|
confirmOpen.value = true;
|
|
}
|
|
|
|
function performDelete() {
|
|
if (!confirmUuid.value) return;
|
|
deleteForm.delete(route('importTemplates.destroy', { template: confirmUuid.value }), {
|
|
preserveScroll: true,
|
|
onFinish: () => {
|
|
confirmOpen.value = false;
|
|
confirmUuid.value = null;
|
|
},
|
|
});
|
|
}
|
|
|
|
function cancelDelete() {
|
|
confirmOpen.value = false;
|
|
confirmUuid.value = null;
|
|
}
|
|
|
|
const props = defineProps({
|
|
templates: Array,
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<AppLayout title="Uvozne predloge">
|
|
<template #header>
|
|
<h2 class="font-semibold text-xl text-gray-800 leading-tight">Uvozne predloge</h2>
|
|
</template>
|
|
|
|
<div class="py-6">
|
|
<div class="max-w-5xl mx-auto sm:px-6 lg:px-8">
|
|
<div class="bg-white shadow sm:rounded-lg p-6">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="text-sm text-gray-600">Skupaj: {{ props.templates?.length || 0 }}</div>
|
|
<Link :href="route('importTemplates.create')" class="px-3 py-2 bg-emerald-600 text-white rounded">Nova predloga</Link>
|
|
</div>
|
|
|
|
<div class="divide-y">
|
|
<div v-for="t in props.templates" :key="t.uuid" class="py-3 flex items-center justify-between">
|
|
<div>
|
|
<div class="font-medium">{{ t.name }}</div>
|
|
<div class="text-xs text-gray-500">{{ t.description }}</div>
|
|
<div class="text-xs text-gray-400 mt-1">{{ t.client?.name || 'Global' }} • {{ t.source_type.toUpperCase() }}</div>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span :class="['text-xs px-2 py-0.5 rounded', t.is_active ? 'bg-emerald-50 text-emerald-700' : 'bg-gray-100 text-gray-500']">{{ t.is_active ? 'Active' : 'Inactive' }}</span>
|
|
<Link :href="route('importTemplates.edit', { template: t.uuid })" class="px-3 py-1.5 border rounded text-sm">Uredi</Link>
|
|
<button
|
|
class="px-3 py-1.5 border rounded text-sm text-red-700 border-red-300 hover:bg-red-50"
|
|
@click.prevent="requestDelete(t.uuid)"
|
|
>Izbriši</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Confirm Delete Modal -->
|
|
<div v-if="confirmOpen" class="fixed inset-0 z-50 flex items-center justify-center">
|
|
<div class="absolute inset-0 bg-black/30" @click="cancelDelete"></div>
|
|
<div class="relative bg-white rounded shadow-lg w-96 max-w-[90%] p-5">
|
|
<div class="text-lg font-semibold mb-2">Izbrišem predlogo?</div>
|
|
<p class="text-sm text-gray-600 mb-4">Tega dejanja ni mogoče razveljaviti. Vse preslikave te predloge bodo izbrisane.</p>
|
|
<div class="flex items-center justify-end gap-2">
|
|
<button class="px-3 py-1.5 border rounded" @click.prevent="cancelDelete" :disabled="deleteForm.processing">Prekliči</button>
|
|
<button class="px-3 py-1.5 rounded text-white bg-red-600 disabled:opacity-60" @click.prevent="performDelete" :disabled="deleteForm.processing">
|
|
<span v-if="deleteForm.processing">Brisanje…</span>
|
|
<span v-else>Izbriši</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AppLayout>
|
|
</template>
|