Teren-app/resources/js/Pages/Imports/Index.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";

const props = defineProps({
  imports: Object,
});

const deletingId = ref(null);
const confirming = ref(false);
const errorMsg = ref(null);

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";
}
</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?.person?.full_name ?? "—" }}</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
                    >
                    <button
                      v-if="canDelete(imp.status)"
                      class="px-2 py-1 rounded bg-red-600 text-white text-xs"
                      @click="confirmDelete(imp)"
                    >
                      Izbriši
                    </button>
                    <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>
          <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>