Changes to import / template pages frontend updated design
This commit is contained in:
Simon Pocrnjič
@@ -1,10 +1,9 @@
|
||||
<script setup>
|
||||
import AppLayout from "@/Layouts/AppLayout.vue";
|
||||
import { Link, router } from "@inertiajs/vue3";
|
||||
import { ref } from "vue";
|
||||
import { ref, computed } from "vue";
|
||||
import ConfirmationModal from "@/Components/ConfirmationModal.vue";
|
||||
import DataTableServer from "@/Components/DataTable/DataTableServer.vue";
|
||||
import Dropdown from "@/Components/Dropdown.vue";
|
||||
import DataTable from "@/Components/DataTable/DataTableNew2.vue";
|
||||
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
||||
import {
|
||||
faEllipsisVertical,
|
||||
@@ -13,6 +12,13 @@ import {
|
||||
faTrash,
|
||||
faCircleCheck,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import TableActions from "@/Components/DataTable/TableActions.vue";
|
||||
import ActionMenuItem from "@/Components/DataTable/ActionMenuItem.vue";
|
||||
import { Button } from "@/Components/ui/button";
|
||||
import { Input } from "@/Components/ui/input";
|
||||
import AppCard from "@/Components/app/ui/card/AppCard.vue";
|
||||
import { ImportIcon } from "lucide-vue-next";
|
||||
import { CardTitle } from "@/Components/ui/card";
|
||||
|
||||
const props = defineProps({
|
||||
imports: Object,
|
||||
@@ -23,6 +29,8 @@ const confirming = ref(false);
|
||||
const errorMsg = ref(null);
|
||||
const search = ref(new URLSearchParams(window.location.search).get("search") || "");
|
||||
|
||||
const rows = computed(() => props.imports?.data || []);
|
||||
|
||||
function canDelete(status) {
|
||||
return !["completed", "processing"].includes(status);
|
||||
}
|
||||
@@ -59,13 +67,33 @@ function statusBadge(status) {
|
||||
return map[status] || "bg-gray-100 text-gray-800";
|
||||
}
|
||||
|
||||
function applySearch() {
|
||||
const params = {};
|
||||
const currentParams = new URLSearchParams(window.location.search);
|
||||
for (const [key, value] of currentParams.entries()) {
|
||||
if (key !== "search" && key !== "page") {
|
||||
params[key] = value;
|
||||
}
|
||||
}
|
||||
const term = (search.value || "").trim();
|
||||
if (term) {
|
||||
params.search = term;
|
||||
}
|
||||
router.get(route("imports.index"), params, {
|
||||
preserveState: true,
|
||||
replace: true,
|
||||
preserveScroll: true,
|
||||
only: ["imports"],
|
||||
});
|
||||
}
|
||||
|
||||
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" },
|
||||
{ key: "created_at", label: "Datum", sortable: false },
|
||||
{ key: "original_name", label: "Datoteka", sortable: false },
|
||||
{ key: "status", label: "Status", sortable: false },
|
||||
{ key: "client", label: "Naročnik", sortable: false },
|
||||
{ key: "template", label: "Predloga", sortable: false },
|
||||
{ key: "actions", label: "", sortable: false, hideable: false, align: "center" },
|
||||
];
|
||||
|
||||
function formatDateTimeNoSeconds(value) {
|
||||
@@ -84,41 +112,61 @@ function formatDateTimeNoSeconds(value) {
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
<template #header> </template>
|
||||
|
||||
<div class="py-6">
|
||||
<div class="max-w-6xl mx-auto sm:px-6 lg:px-8">
|
||||
<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
|
||||
<div class="max-w-7xl 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">
|
||||
<ImportIcon size="18" />
|
||||
<CardTitle class="uppercase">Uvozi</CardTitle>
|
||||
</div>
|
||||
</template>
|
||||
<DataTable
|
||||
: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"
|
||||
:data="rows"
|
||||
:meta="{
|
||||
current_page: imports?.meta?.current_page,
|
||||
per_page: imports?.meta?.per_page,
|
||||
total: imports?.meta?.total,
|
||||
last_page: imports?.meta?.last_page,
|
||||
from: imports?.meta?.from,
|
||||
to: imports?.meta?.to,
|
||||
links: imports?.links,
|
||||
}"
|
||||
route-name="imports.index"
|
||||
:only-props="['imports']"
|
||||
:page-size="25"
|
||||
:page-size-options="[10, 15, 25, 50, 100]"
|
||||
:show-pagination="true"
|
||||
:show-toolbar="true"
|
||||
:hoverable="true"
|
||||
row-key="uuid"
|
||||
empty-text="Ni uvozov."
|
||||
>
|
||||
<template #toolbar-actions>
|
||||
<Button size="sm" variant="default" as-child>
|
||||
<Link :href="route('imports.create')">Novi uvoz</Link>
|
||||
</Button>
|
||||
</template>
|
||||
<template #toolbar-filters>
|
||||
<div class="flex items-center gap-2">
|
||||
<Input
|
||||
v-model="search"
|
||||
placeholder="Išči uvoz..."
|
||||
class="w-65"
|
||||
@keydown.enter="applySearch"
|
||||
/>
|
||||
<Button size="sm" variant="outline" @click="applySearch">Išči</Button>
|
||||
</div>
|
||||
</template>
|
||||
<!-- Datum column formatted -->
|
||||
<template #cell-created_at="{ row }">
|
||||
{{ formatDateTimeNoSeconds(row.created_at) }}
|
||||
@@ -143,60 +191,40 @@ function formatDateTimeNoSeconds(value) {
|
||||
|
||||
<!-- 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>
|
||||
<TableActions align="right">
|
||||
<template #default>
|
||||
<ActionMenuItem
|
||||
:icon="faEye"
|
||||
label="Poglej"
|
||||
@click="
|
||||
$inertia.visit(route('imports.continue', { import: row.uuid }))
|
||||
"
|
||||
/>
|
||||
<ActionMenuItem
|
||||
v-if="row.status !== 'completed'"
|
||||
:icon="faPlay"
|
||||
label="Nadaljuj"
|
||||
@click="
|
||||
$inertia.visit(route('imports.continue', { import: row.uuid }))
|
||||
"
|
||||
/>
|
||||
<ActionMenuItem
|
||||
v-if="canDelete(row.status)"
|
||||
:icon="faTrash"
|
||||
label="Izbriši"
|
||||
danger
|
||||
@click="confirmDelete(row)"
|
||||
/>
|
||||
<ActionMenuItem
|
||||
v-if="!canDelete(row.status)"
|
||||
:icon="faCircleCheck"
|
||||
label="Zaključen"
|
||||
disabled
|
||||
/>
|
||||
</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>
|
||||
</TableActions>
|
||||
</template>
|
||||
</DataTableServer>
|
||||
</DataTable>
|
||||
<ConfirmationModal
|
||||
:show="confirming"
|
||||
@close="
|
||||
@@ -230,7 +258,7 @@ function formatDateTimeNoSeconds(value) {
|
||||
</button>
|
||||
</template>
|
||||
</ConfirmationModal>
|
||||
</div>
|
||||
</AppCard>
|
||||
</div>
|
||||
</div>
|
||||
</AppLayout>
|
||||
|
||||
Reference in New Issue
Block a user