250 lines
17 KiB
Vue
250 lines
17 KiB
Vue
<script setup>
|
|
import { FwbTable, FwbTableHead, FwbTableHeadCell, FwbTableBody, FwbTableRow, FwbTableCell } from 'flowbite-vue'
|
|
import Dropdown from '@/Components/Dropdown.vue'
|
|
import CaseObjectCreateDialog from './CaseObjectCreateDialog.vue'
|
|
import CaseObjectsDialog from './CaseObjectsDialog.vue'
|
|
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
|
import { faCircleInfo, faEllipsisVertical, faPenToSquare, faTrash, faListCheck, faPlus } from '@fortawesome/free-solid-svg-icons'
|
|
|
|
const props = defineProps({
|
|
client_case: Object,
|
|
contract_types: Array,
|
|
contracts: { type: Array, default: () => [] },
|
|
segments: { type: Array, default: () => [] },
|
|
all_segments: { type: Array, default: () => [] },
|
|
})
|
|
|
|
const emit = defineEmits(['edit', 'delete', 'add-activity'])
|
|
|
|
const formatDate = (d) => {
|
|
if (!d) return '-'
|
|
const dt = new Date(d)
|
|
return isNaN(dt.getTime()) ? '-' : dt.toLocaleDateString('de')
|
|
}
|
|
|
|
const hasDesc = (c) => {
|
|
const d = c?.description
|
|
return typeof d === 'string' && d.trim().length > 0
|
|
}
|
|
|
|
const onEdit = (c) => emit('edit', c)
|
|
const onDelete = (c) => emit('delete', c)
|
|
const onAddActivity = (c) => emit('add-activity', c)
|
|
|
|
// CaseObject dialog state
|
|
import { ref, computed } from 'vue'
|
|
import { router } from '@inertiajs/vue3'
|
|
const showObjectDialog = ref(false)
|
|
const showObjectsList = ref(false)
|
|
const selectedContract = ref(null)
|
|
const openObjectDialog = (c) => { selectedContract.value = c; showObjectDialog.value = true }
|
|
const closeObjectDialog = () => { showObjectDialog.value = false; selectedContract.value = null }
|
|
const openObjectsList = (c) => { selectedContract.value = c; showObjectsList.value = true }
|
|
const closeObjectsList = () => { showObjectsList.value = false; selectedContract.value = null }
|
|
|
|
// Segment helpers
|
|
const contractActiveSegment = (c) => {
|
|
const arr = c?.segments || []
|
|
return arr.find(s => s.pivot?.active) || arr[0] || null
|
|
}
|
|
const segmentName = (id) => props.segments.find(s => s.id === id)?.name || ''
|
|
const confirmChange = ref({ show: false, contract: null, segmentId: null, fromAll: false })
|
|
const askChangeSegment = (c, segmentId, fromAll = false) => {
|
|
confirmChange.value = { show: true, contract: c, segmentId, fromAll }
|
|
}
|
|
const closeConfirm = () => { confirmChange.value = { show: false, contract: null, segmentId: null } }
|
|
const doChangeSegment = () => {
|
|
const { contract, segmentId, fromAll } = confirmChange.value
|
|
if (!contract || !segmentId) return closeConfirm()
|
|
if (fromAll) {
|
|
router.post(route('clientCase.segments.attach', props.client_case), {
|
|
segment_id: segmentId,
|
|
contract_uuid: contract.uuid,
|
|
make_active_for_contract: true,
|
|
}, {
|
|
preserveScroll: true,
|
|
only: ['contracts', 'segments'],
|
|
onFinish: () => closeConfirm(),
|
|
})
|
|
} else {
|
|
router.post(route('clientCase.contract.updateSegment', { client_case: props.client_case.uuid, uuid: contract.uuid }), { segment_id: segmentId }, {
|
|
preserveScroll: true,
|
|
only: ['contracts'],
|
|
onFinish: () => closeConfirm(),
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="relative overflow-x-auto rounded-lg border border-gray-200 bg-white shadow-sm">
|
|
<FwbTable hoverable striped class="text-sm">
|
|
<FwbTableHead class="sticky top-0 z-10 bg-gray-50/90 backdrop-blur border-b border-gray-200 shadow-sm">
|
|
<FwbTableHeadCell class="uppercase text-xs font-semibold tracking-wide text-gray-700 py-3">Ref.</FwbTableHeadCell>
|
|
<FwbTableHeadCell class="uppercase text-xs font-semibold tracking-wide text-gray-700 py-3">Datum začetka</FwbTableHeadCell>
|
|
<FwbTableHeadCell class="uppercase text-xs font-semibold tracking-wide text-gray-700 py-3">Tip</FwbTableHeadCell>
|
|
<FwbTableHeadCell class="uppercase text-xs font-semibold tracking-wide text-gray-700 py-3">Segment</FwbTableHeadCell>
|
|
<FwbTableHeadCell class="uppercase text-xs font-semibold tracking-wide text-gray-700 py-3 text-right">Predano</FwbTableHeadCell>
|
|
<FwbTableHeadCell class="uppercase text-xs font-semibold tracking-wide text-gray-700 py-3 text-right">Odprto</FwbTableHeadCell>
|
|
<FwbTableHeadCell class="uppercase text-xs font-semibold tracking-wide text-gray-700 py-3 text-center">Opis</FwbTableHeadCell>
|
|
<FwbTableHeadCell class="w-px" />
|
|
</FwbTableHead>
|
|
<FwbTableBody>
|
|
<template v-for="(c, i) in contracts" :key="c.uuid || i">
|
|
<FwbTableRow>
|
|
<FwbTableCell>{{ c.reference }}</FwbTableCell>
|
|
<FwbTableCell>{{ formatDate(c.start_date) }}</FwbTableCell>
|
|
<FwbTableCell>{{ c?.type?.name }}</FwbTableCell>
|
|
<FwbTableCell>
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-gray-700">{{ contractActiveSegment(c)?.name || '-' }}</span>
|
|
<Dropdown width="64" align="left">
|
|
<template #trigger>
|
|
<button
|
|
type="button"
|
|
class="inline-flex items-center justify-center h-7 w-7 rounded-full hover:bg-gray-100"
|
|
:class="{ 'opacity-50 cursor-not-allowed': !segments || segments.length === 0 }"
|
|
:title="segments && segments.length ? 'Change segment' : 'No segments available for this case'"
|
|
>
|
|
<FontAwesomeIcon :icon="faPenToSquare" class="h-4 w-4 text-gray-600" />
|
|
</button>
|
|
</template>
|
|
<template #content>
|
|
<div class="py-1">
|
|
<template v-if="segments && segments.length">
|
|
<button v-for="s in segments" :key="s.id" type="button" class="w-full px-3 py-1.5 text-left text-sm hover:bg-gray-50" @click="askChangeSegment(c, s.id)">
|
|
<span>{{ s.name }}</span>
|
|
</button>
|
|
</template>
|
|
<template v-else>
|
|
<template v-if="all_segments && all_segments.length">
|
|
<div class="px-3 py-2 text-xs text-gray-500">Ni segmentov v tem primeru. Dodaj in nastavi segment:</div>
|
|
<button v-for="s in all_segments" :key="s.id" type="button" class="w-full px-3 py-1.5 text-left text-sm hover:bg-gray-50" @click="askChangeSegment(c, s.id, true)">
|
|
<span>{{ s.name }}</span>
|
|
</button>
|
|
</template>
|
|
<template v-else>
|
|
<div class="px-3 py-2 text-sm text-gray-500">No segments configured.</div>
|
|
</template>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</Dropdown>
|
|
</div>
|
|
</FwbTableCell>
|
|
<FwbTableCell class="text-right">{{ Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(c?.account?.initial_amount ?? 0) }}</FwbTableCell>
|
|
<FwbTableCell class="text-right">{{ Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(c?.account?.balance_amount ?? 0) }}</FwbTableCell>
|
|
<FwbTableCell class="text-center">
|
|
<Dropdown v-if="hasDesc(c)" width="64" align="left">
|
|
<template #trigger>
|
|
<button
|
|
type="button"
|
|
class="inline-flex items-center justify-center h-8 w-8 rounded-full hover:bg-gray-100 focus:outline-none"
|
|
:title="'Pokaži opis'"
|
|
>
|
|
<FontAwesomeIcon :icon="faCircleInfo" class="h-4 w-4 text-gray-700" />
|
|
</button>
|
|
</template>
|
|
<template #content>
|
|
<div class="max-w-sm px-3 py-2 text-sm text-gray-700 whitespace-pre-wrap">
|
|
{{ c.description }}
|
|
</div>
|
|
</template>
|
|
</Dropdown>
|
|
<button
|
|
v-else
|
|
type="button"
|
|
disabled
|
|
class="inline-flex items-center justify-center h-8 w-8 rounded-full text-gray-400 cursor-not-allowed"
|
|
:title="'Ni opisa'"
|
|
>
|
|
<FontAwesomeIcon :icon="faCircleInfo" class="h-4 w-4" />
|
|
</button>
|
|
</FwbTableCell>
|
|
<FwbTableCell class="text-right whitespace-nowrap">
|
|
<Dropdown align="right" width="56">
|
|
<template #trigger>
|
|
<button
|
|
type="button"
|
|
class="inline-flex items-center justify-center h-8 w-8 rounded-full hover:bg-gray-100 focus:outline-none"
|
|
:title="'Actions'"
|
|
>
|
|
<FontAwesomeIcon :icon="faEllipsisVertical" class="h-4 w-4 text-gray-700" />
|
|
</button>
|
|
</template>
|
|
<template #content>
|
|
<button
|
|
type="button"
|
|
class="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2"
|
|
@click="onEdit(c)"
|
|
>
|
|
<FontAwesomeIcon :icon="faPenToSquare" class="h-4 w-4 text-gray-600" />
|
|
<span>Edit</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2"
|
|
@click="openObjectsList(c)"
|
|
>
|
|
<FontAwesomeIcon :icon="faCircleInfo" class="h-4 w-4 text-gray-600" />
|
|
<span>Predmeti</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2"
|
|
@click="openObjectDialog(c)"
|
|
>
|
|
<FontAwesomeIcon :icon="faPlus" class="h-4 w-4 text-gray-600" />
|
|
<span>Premet</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="w-full px-3 py-2 text-left text-sm text-red-700 hover:bg-red-50 flex items-center gap-2"
|
|
@click="onDelete(c)"
|
|
>
|
|
<FontAwesomeIcon :icon="faTrash" class="h-4 w-4 text-red-600" />
|
|
<span>Briši</span>
|
|
</button>
|
|
<div class="my-1 border-t border-gray-100" />
|
|
<button
|
|
type="button"
|
|
class="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2"
|
|
@click="onAddActivity(c)"
|
|
>
|
|
<FontAwesomeIcon :icon="faListCheck" class="h-4 w-4 text-gray-600" />
|
|
<span>Aktivnost</span>
|
|
</button>
|
|
</template>
|
|
</Dropdown>
|
|
</FwbTableCell>
|
|
</FwbTableRow>
|
|
</template>
|
|
</FwbTableBody>
|
|
</FwbTable>
|
|
<div v-if="!contracts || contracts.length === 0" class="p-6 text-center text-sm text-gray-500">No contracts.</div>
|
|
</div>
|
|
<!-- Confirm change segment -->
|
|
<div v-if="confirmChange.show" class="fixed inset-0 z-50 flex items-center justify-center bg-black/30">
|
|
<div class="bg-white rounded-lg shadow-lg p-4 w-full max-w-sm">
|
|
<div class="text-sm text-gray-800">
|
|
Ali želite spremeniti segment za pogodbo <span class="font-medium">{{ confirmChange.contract?.reference }}</span>?
|
|
</div>
|
|
<div class="mt-4 flex justify-end gap-2">
|
|
<button class="px-4 py-2 rounded bg-gray-200 hover:bg-gray-300" @click="closeConfirm">Prekliči</button>
|
|
<button class="px-4 py-2 rounded bg-indigo-600 text-white hover:bg-indigo-700" @click="doChangeSegment">Potrdi</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<CaseObjectCreateDialog
|
|
:show="showObjectDialog"
|
|
@close="closeObjectDialog"
|
|
:client_case="client_case"
|
|
:contract="selectedContract"
|
|
/>
|
|
<CaseObjectsDialog
|
|
:show="showObjectsList"
|
|
@close="closeObjectsList"
|
|
:client_case="client_case"
|
|
:contract="selectedContract"
|
|
/>
|
|
</template> |