Teren-app/resources/js/Pages/Imports/Templates/Index.vue

<script setup>
import AppLayout from "@/Layouts/AppLayout.vue";
import { Link, useForm } from "@inertiajs/vue3";
import { ref } from "vue";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/Components/ui/card";
import { Button } from "@/Components/ui/button";
import { Badge } from "@/Components/ui/badge";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/Components/ui/alert-dialog";
import { Separator } from "@/Components/ui/separator";
import AppCard from "@/Components/app/ui/card/AppCard.vue";
import { ListIndentIncreaseIcon } from "lucide-vue-next";
import TableActions from "@/Components/DataTable/TableActions.vue";
import ActionMenuItem from "@/Components/DataTable/ActionMenuItem.vue";
import { faPencil, faTrash } from "@fortawesome/free-solid-svg-icons";

// 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">
        <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">
              <ListIndentIncreaseIcon size="18" />
              <CardTitle class="uppercase">Predloge uvoza</CardTitle>
            </div>
          </template>

          <div class="flex items-center justify-between border-t border-b py-2 px-4">
            <div>
              <CardDescription>
                Skupaj {{ props.templates?.length || 0 }} predlog{{
                  props.templates?.length === 1 ? "a" : ""
                }}
              </CardDescription>
            </div>
            <Button as-child>
              <Link :href="route('importTemplates.create')"> Nova predloga </Link>
            </Button>
          </div>

          <div
            v-if="!props.templates || props.templates.length === 0"
            class="p-8 text-center text-muted-foreground"
          >
            Ni predlog uvoza.
          </div>
          <div v-else class="grid gap-4 p-4">
            <Card
              v-for="t in props.templates"
              :key="t.uuid"
              class="hover:shadow-md transition-shadow px-0! p-4"
            >
              <CardHeader>
                <div class="flex items-start justify-between">
                  <div class="flex-1">
                    <CardTitle class="text-base">{{ t.name }}</CardTitle>
                    <CardDescription class="mt-1">
                      {{ t.description }}
                    </CardDescription>
                  </div>
                  <TableActions align="right">
                    <template #default>
                      <ActionMenuItem
                        :icon="faPencil"
                        label="Uredi"
                        @click="
                          $inertia.visit(
                            route('importTemplates.edit', { template: t.uuid })
                          )
                        "
                      />
                      <ActionMenuItem
                        :icon="faTrash"
                        label="Izbriši"
                        danger
                        @click="requestDelete(t.uuid)"
                      />
                    </template>
                  </TableActions>
                </div>
              </CardHeader>
              <CardContent class="pt-0">
                <div class="flex items-center gap-2">
                  <Badge variant="outline" class="text-xs">
                    {{ t.client?.name || "Globalno" }}
                  </Badge>
                  <Badge variant="secondary" class="text-xs">
                    {{ t.source_type.toUpperCase() }}
                  </Badge>
                  <Badge :variant="t.is_active ? 'default' : 'secondary'" class="text-xs">
                    {{ t.is_active ? "Aktivno" : "Neaktivno" }}
                  </Badge>
                </div>
              </CardContent>
            </Card>
          </div>
        </AppCard>
      </div>
    </div>

    <!-- Confirm Delete Dialog -->
    <AlertDialog
      :open="confirmOpen"
      @update:open="
        (val) => {
          if (!val) cancelDelete();
        }
      "
    >
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Izbrišem predlogo?</AlertDialogTitle>
          <AlertDialogDescription>
            Tega dejanja ni mogoče razveljaviti. Vse preslikave te predloge bodo
            izbrisane.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel @click="cancelDelete" :disabled="deleteForm.processing">
            Prekliči
          </AlertDialogCancel>
          <AlertDialogAction
            @click="performDelete"
            :disabled="deleteForm.processing"
            class="bg-destructive hover:bg-destructive/90"
          >
            <span v-if="deleteForm.processing">Brisanje…</span>
            <span v-else>Izbriši</span>
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  </AppLayout>
</template>