Teren-app/resources/js/Pages/Cases/Partials/CaseObjectsDialog.vue
Simon Pocrnjič a913cfc381 Changes
2025-09-28 00:30:18 +02:00

53 lines
2.1 KiB
Vue

<script setup>
import DialogModal from '@/Components/DialogModal.vue'
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 items = () => Array.isArray(props.contract?.objects) ? props.contract.objects : []
</script>
<template>
<DialogModal :show="show" @close="close">
<template #title>
Premeti
<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 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>
<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>
<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>
</div>
</div>
</div>
<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>
</div>
</template>
</DialogModal>
</template>