Changes to import / template pages frontend updated design
This commit is contained in:
Simon Pocrnjič
@@ -1,7 +1,32 @@
|
||||
<script setup>
|
||||
import AppLayout from '@/Layouts/AppLayout.vue';
|
||||
import { Link, useForm } from '@inertiajs/vue3';
|
||||
import { ref } from 'vue';
|
||||
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);
|
||||
@@ -15,7 +40,7 @@ function requestDelete(uuid) {
|
||||
|
||||
function performDelete() {
|
||||
if (!confirmUuid.value) return;
|
||||
deleteForm.delete(route('importTemplates.destroy', { template: confirmUuid.value }), {
|
||||
deleteForm.delete(route("importTemplates.destroy", { template: confirmUuid.value }), {
|
||||
preserveScroll: true,
|
||||
onFinish: () => {
|
||||
confirmOpen.value = false;
|
||||
@@ -42,47 +67,124 @@ const props = defineProps({
|
||||
|
||||
<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>
|
||||
<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 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
|
||||
v-if="!props.templates || props.templates.length === 0"
|
||||
class="p-8 text-center text-muted-foreground"
|
||||
>
|
||||
Ni predlog uvoza.
|
||||
</div>
|
||||
</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 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">
|
||||
|
||||
<!-- 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>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</AppLayout>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user