sipo/Teren-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changes

Browse Source
This commit is contained in:
Simon Pocrnjič
2025-10-20 19:39:26 +02:00
parent 90bbf1942c
commit 872b76b012
9 changed files with 268 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/Pages/Cases/Partials/CaseObjectsDialog.vue
+104 -13
View File
@@ -1,43 +1,128 @@
<script setup>
import DialogModal from '@/Components/DialogModal.vue'
import DialogModal from "@/Components/DialogModal.vue";
import { router } from "@inertiajs/vue3";
import { ref, computed } from "vue";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { library } from "@fortawesome/fontawesome-svg-core";
import { faTrash, faXmark, faCheck } from "@fortawesome/free-solid-svg-icons";
library.add(faTrash, faXmark, faCheck);
const props = defineProps({
show: { type: Boolean, default: false },
client_case: { type: Object, required: true },
contract: { type: Object, default: null },
})
});
const emit = defineEmits(['close'])
const close = () => emit('close')
const emit = defineEmits(["close"]);
const close = () => emit("close");
const items = () => Array.isArray(props.contract?.objects) ? props.contract.objects : []
// Local optimistic filtering of removed items so the list updates immediately
const removedIds = ref([]);
const confirmingId = ref(null);
const items = computed(() => {
const arr = Array.isArray(props.contract?.objects) ? props.contract.objects : [];
if (!removedIds.value.length) {
return arr;
}
return arr.filter((o) => !removedIds.value.includes(o.id));
});
// Delete handling (no confirmation)
const deleteObject = (o) => {
if (!o?.id) {
return;
}
const id = o.id;
router.delete(
route("clientCase.object.delete", {
client_case: props.client_case.uuid,
id,
}),
{
preserveScroll: true,
onSuccess: () => {
if (!removedIds.value.includes(id)) {
removedIds.value.push(id);
}
if (confirmingId.value === id) {
confirmingId.value = null;
}
},
}
);
};
</script>
<template>
<DialogModal :show="show" @close="close">
<template #title>
Predmeti
<span v-if="contract" class="ml-2 text-sm text-gray-500">(Pogodba: {{ contract.reference }})</span>
<span v-if="contract" class="ml-2 text-sm text-gray-500"
>(Pogodba: {{ contract.reference }})</span
>
</template>
<template #content>
<div class="mt-1 max-h-[60vh] overflow-y-auto">
<div v-if="items().length > 0" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<div v-for="o in items()" :key="o.id" class="rounded-lg border border-gray-200 bg-white shadow-sm">
<div
v-if="items.length > 0"
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"
>
<div
v-for="o in items"
:key="o.id"
class="rounded-lg border border-gray-200 bg-white shadow-sm"
>
<div class="p-4">
<div class="flex items-start justify-between">
<div>
<div class="text-xs uppercase text-gray-500">Ref.</div>
<div class="font-semibold text-gray-900">{{ o.reference || '-' }}</div>
<div class="font-semibold text-gray-900">{{ o.reference || "-" }}</div>
</div>
<div class="ml-3 flex items-center gap-2">
<span
class="inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs text-gray-700"
>{{ o.type || "—" }}</span
>
<template v-if="confirmingId === o.id">
<button
type="button"
class="inline-flex h-8 w-8 items-center justify-center rounded-full hover:bg-gray-100 text-gray-700"
:title="'Prekliči'"
@click.stop="confirmingId = null"
>
<FontAwesomeIcon :icon="['fas', 'xmark']" class="text-[16px]" />
</button>
<button
type="button"
class="inline-flex h-8 w-8 items-center justify-center rounded-full hover:bg-green-50 text-green-700"
:title="'Potrdi brisanje'"
@click.stop="deleteObject(o)"
>
<FontAwesomeIcon :icon="['fas', 'check']" class="text-[16px]" />
</button>
</template>
<template v-else>
<button
type="button"
class="inline-flex h-8 w-8 items-center justify-center rounded-full hover:bg-red-50"
:title="'Izbriši'"
@click.stop="confirmingId = o.id"
>
<FontAwesomeIcon :icon="['fas', 'trash']" class="text-red-600" />
</button>
</template>
</div>
<span class="ml-3 inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs text-gray-700">{{ o.type || '—' }}</span>
</div>
<div class="mt-3">
<div class="text-xs uppercase text-gray-500">Naziv</div>
<div class="text-gray-900">{{ o.name || '-' }}</div>
<div class="text-gray-900">{{ o.name || "-" }}</div>
</div>
<div class="mt-3">
<div class="text-xs uppercase text-gray-500">Opis</div>
<div class="text-gray-700 whitespace-pre-wrap">{{ o.description || '' }}</div>
<div class="text-gray-700 whitespace-pre-wrap">
{{ o.description || "" }}
</div>
</div>
</div>
</div>
@@ -45,7 +130,13 @@ const items = () => Array.isArray(props.contract?.objects) ? props.contract.obje
<div v-else class="text-center text-gray-500 py-3">Ni predmetov.</div>
</div>
<div class="mt-4 flex justify-end">
<button type="button" class="px-4 py-2 rounded-md border border-gray-300 text-gray-700 hover:bg-gray-50" @click="close">Zapri</button>
<button
type="button"
class="px-4 py-2 rounded-md border border-gray-300 text-gray-700 hover:bg-gray-50"
@click="close"
>
Zapri
</button>
</div>
</template>
</DialogModal>