Changes to UI
This commit is contained in:
Simon Pocrnjič
@@ -48,7 +48,7 @@ const filteredTemplates = computed(() => {
|
||||
if (!cuuid) {
|
||||
return list.filter((t) => t.client_id == null);
|
||||
}
|
||||
return list.filter((t) => t.client_uuid === cuuid);
|
||||
return list.filter((t) => t.client_uuid === cuuid || t.client_id == null);
|
||||
});
|
||||
|
||||
const uploading = ref(false);
|
||||
@@ -232,19 +232,7 @@ async function startImport() {
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex flex-wrap gap-3 pt-2">
|
||||
<button
|
||||
type="button"
|
||||
@click="startImport"
|
||||
:disabled="uploading"
|
||||
class="inline-flex items-center gap-2 px-5 py-2.5 rounded bg-indigo-600 disabled:bg-indigo-300 text-white text-sm font-medium shadow-sm"
|
||||
>
|
||||
<span
|
||||
v-if="uploading"
|
||||
class="h-4 w-4 border-2 border-white/60 border-t-transparent rounded-full animate-spin"
|
||||
></span>
|
||||
<span>{{ uploading ? "Nalagam..." : "Začni uvoz" }}</span>
|
||||
</button>
|
||||
<div class="flex flex-wrap justify-end gap-3 pt-2">
|
||||
<button
|
||||
type="button"
|
||||
@click="
|
||||
@@ -258,6 +246,18 @@ async function startImport() {
|
||||
>
|
||||
Počisti
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@click="startImport"
|
||||
:disabled="uploading"
|
||||
class="inline-flex items-center gap-2 px-5 py-2.5 rounded bg-indigo-600 disabled:bg-indigo-300 text-white text-sm font-medium shadow-sm"
|
||||
>
|
||||
<span
|
||||
v-if="uploading"
|
||||
class="h-4 w-4 border-2 border-white/60 border-t-transparent rounded-full animate-spin"
|
||||
></span>
|
||||
<span>{{ uploading ? "Nalagam..." : "Začni uvoz" }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="text-xs text-gray-400 pt-4 border-t">
|
||||
|
||||
@@ -3,6 +3,16 @@ import AppLayout from "@/Layouts/AppLayout.vue";
|
||||
import { Link, router } from "@inertiajs/vue3";
|
||||
import { ref } from "vue";
|
||||
import ConfirmationModal from "@/Components/ConfirmationModal.vue";
|
||||
import DataTableServer from "@/Components/DataTable/DataTableServer.vue";
|
||||
import Dropdown from "@/Components/Dropdown.vue";
|
||||
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
||||
import {
|
||||
faEllipsisVertical,
|
||||
faEye,
|
||||
faPlay,
|
||||
faTrash,
|
||||
faCircleCheck,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
const props = defineProps({
|
||||
imports: Object,
|
||||
@@ -11,6 +21,7 @@ const props = defineProps({
|
||||
const deletingId = ref(null);
|
||||
const confirming = ref(false);
|
||||
const errorMsg = ref(null);
|
||||
const search = ref(new URLSearchParams(window.location.search).get("search") || "");
|
||||
|
||||
function canDelete(status) {
|
||||
return !["completed", "processing"].includes(status);
|
||||
@@ -47,6 +58,28 @@ function statusBadge(status) {
|
||||
};
|
||||
return map[status] || "bg-gray-100 text-gray-800";
|
||||
}
|
||||
|
||||
const columns = [
|
||||
{ key: "created_at", label: "Datum" },
|
||||
{ key: "original_name", label: "Datoteka" },
|
||||
{ key: "status", label: "Status" },
|
||||
{ key: "client", label: "Naročnik" },
|
||||
{ key: "template", label: "Predloga" },
|
||||
{ key: "actions", label: "Akcije", class: "w-px" },
|
||||
];
|
||||
|
||||
function formatDateTimeNoSeconds(value) {
|
||||
if (!value) return "-";
|
||||
const d = new Date(value);
|
||||
if (isNaN(d)) return String(value);
|
||||
return d.toLocaleString("sl-SI", {
|
||||
year: "numeric",
|
||||
month: "2-digit",
|
||||
day: "2-digit",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -54,89 +87,116 @@ function statusBadge(status) {
|
||||
<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 class="flex flex-col gap-3 bg-white shadow sm:rounded-lg p-4">
|
||||
<div class="flex justify-end">
|
||||
<Link
|
||||
:href="route('imports.create')"
|
||||
class="px-3 py-2 rounded bg-blue-600 text-white text-sm"
|
||||
>Novi uvoz</Link
|
||||
>
|
||||
</div>
|
||||
<DataTableServer
|
||||
:columns="columns"
|
||||
:rows="imports?.data || []"
|
||||
:meta="
|
||||
imports?.meta
|
||||
? {
|
||||
current_page: imports.meta.current_page,
|
||||
per_page: imports.meta.per_page,
|
||||
total: imports.meta.total,
|
||||
last_page: imports.meta.last_page,
|
||||
}
|
||||
: {}
|
||||
"
|
||||
v-model:search="search"
|
||||
route-name="imports.index"
|
||||
:only-props="['imports']"
|
||||
row-key="uuid"
|
||||
empty-text="Ni uvozov."
|
||||
>
|
||||
<!-- Datum column formatted -->
|
||||
<template #cell-created_at="{ row }">
|
||||
{{ formatDateTimeNoSeconds(row.created_at) }}
|
||||
</template>
|
||||
|
||||
<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>
|
||||
<!-- Status badge -->
|
||||
<template #cell-status="{ row }">
|
||||
<span :class="['px-2 py-0.5 rounded text-xs', statusBadge(row.status)]">
|
||||
{{ row.status }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<!-- Client name -->
|
||||
<template #cell-client="{ row }">
|
||||
{{ row.client?.person?.full_name ?? "—" }}
|
||||
</template>
|
||||
|
||||
<!-- Template name -->
|
||||
<template #cell-template="{ row }">
|
||||
{{ row.template?.name ?? "—" }}
|
||||
</template>
|
||||
|
||||
<!-- Actions -->
|
||||
<template #cell-actions="{ row }">
|
||||
<Dropdown width="48" :close-on-content-click="true">
|
||||
<template #trigger>
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex items-center justify-center w-8 h-8 rounded hover:bg-gray-100"
|
||||
aria-label="Akcije"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
:icon="faEllipsisVertical"
|
||||
class="w-4 h-4 text-gray-600"
|
||||
/>
|
||||
</button>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="py-1">
|
||||
<Link
|
||||
:href="route('imports.continue', { import: row.uuid })"
|
||||
class="flex items-center w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
|
||||
>
|
||||
<FontAwesomeIcon :icon="faEye" class="w-4 h-4 me-2 text-gray-500" />
|
||||
<span>Poglej</span>
|
||||
</Link>
|
||||
<Link
|
||||
v-if="row.status !== 'completed'"
|
||||
:href="route('imports.continue', { import: row.uuid })"
|
||||
class="flex items-center w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
:icon="faPlay"
|
||||
class="w-4 h-4 me-2 text-gray-500"
|
||||
/>
|
||||
<span>Nadaljuj</span>
|
||||
</Link>
|
||||
<button
|
||||
v-if="canDelete(row.status)"
|
||||
type="button"
|
||||
class="flex items-center w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50"
|
||||
@click="confirmDelete(row)"
|
||||
>
|
||||
<FontAwesomeIcon :icon="faTrash" class="w-4 h-4 me-2" />
|
||||
<span>Izbriši</span>
|
||||
</button>
|
||||
<div
|
||||
v-else
|
||||
class="flex items-center px-4 py-2 text-sm text-gray-400 cursor-default"
|
||||
>
|
||||
<FontAwesomeIcon :icon="faCircleCheck" class="w-4 h-4 me-2" />
|
||||
<span>Zaključen</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</template>
|
||||
</DataTableServer>
|
||||
<ConfirmationModal
|
||||
:show="confirming"
|
||||
@close="
|
||||
|
||||
Reference in New Issue
Block a user