bce98c0d4b
- Show 'Go to Settings' bootstrap link only for admin/super_admin users - Pass isSiteAdmin prop to Create.vue to control settings CTA visibility - Require site admin for updatePriority/destroyPriority when priority is global (group_id = null) - Closes: non-admin users seeing forbidden settings link; agents mutating global priorities
77 lines
3.1 KiB
Vue
77 lines
3.1 KiB
Vue
<template>
|
|
<AppLayout>
|
|
<div class="max-w-3xl mx-auto">
|
|
<div class="mb-6 flex justify-between items-center">
|
|
<h1 class="text-2xl font-bold text-gray-900">My Tickets</h1>
|
|
<Link :href="route('ticketing.create')" class="inline-flex items-center gap-1 bg-gray-900 text-white text-sm px-4 py-2 rounded-lg hover:bg-gray-700 transition">
|
|
+ Submit Ticket
|
|
</Link>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-200 divide-y divide-gray-100">
|
|
<div v-if="tickets.data.length === 0" class="p-8 text-center text-gray-400 text-sm">
|
|
You haven't submitted any tickets yet.
|
|
</div>
|
|
<Link
|
|
v-for="ticket in tickets.data"
|
|
:key="ticket.id"
|
|
:href="route('ticketing.show', { ticket: ticket.id })"
|
|
class="flex items-start gap-3 px-4 py-3 hover:bg-gray-50 transition"
|
|
>
|
|
<span
|
|
class="inline-block text-xs font-mono font-semibold px-2 py-1 rounded text-white flex-shrink-0 mt-0.5"
|
|
:style="{ backgroundColor: ticket.group?.color || '#6366f1' }"
|
|
>{{ ticket.number }}</span>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-sm font-medium text-gray-800 truncate">{{ ticket.title }}</p>
|
|
<p class="text-xs text-gray-400 mt-0.5">{{ ticket.group?.name }} · {{ timeAgo(ticket.created_at) }}</p>
|
|
</div>
|
|
<span :class="statusClass(ticket.status)" class="text-xs px-2 py-0.5 rounded-full font-medium flex-shrink-0">
|
|
{{ statusLabel(ticket.status) }}
|
|
</span>
|
|
</Link>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<div v-if="tickets.last_page > 1" class="mt-4 flex justify-center gap-4 text-sm">
|
|
<Link v-if="tickets.prev_page_url" :href="tickets.prev_page_url" class="text-indigo-600 hover:underline">← Previous</Link>
|
|
<span class="text-gray-500">{{ tickets.current_page }} / {{ tickets.last_page }}</span>
|
|
<Link v-if="tickets.next_page_url" :href="tickets.next_page_url" class="text-indigo-600 hover:underline">Next →</Link>
|
|
</div>
|
|
</div>
|
|
</AppLayout>
|
|
</template>
|
|
|
|
<script setup>
|
|
import AppLayout from '@/Layouts/AppLayout.vue'
|
|
import { Link } from '@inertiajs/vue3'
|
|
|
|
defineProps({ tickets: Object })
|
|
|
|
function statusLabel(status) {
|
|
const map = { open: 'Open', in_progress: 'In Progress', pending: 'Pending', resolved: 'Resolved', closed: 'Closed' }
|
|
return map[status] || status
|
|
}
|
|
|
|
function statusClass(status) {
|
|
const map = {
|
|
open: 'bg-blue-100 text-blue-700',
|
|
in_progress: 'bg-purple-100 text-purple-700',
|
|
pending: 'bg-yellow-100 text-yellow-700',
|
|
resolved: 'bg-green-100 text-green-700',
|
|
closed: 'bg-gray-100 text-gray-500',
|
|
}
|
|
return map[status] || 'bg-gray-100 text-gray-600'
|
|
}
|
|
|
|
function timeAgo(dateStr) {
|
|
const date = new Date(dateStr)
|
|
const now = new Date()
|
|
const diff = Math.floor((now - date) / 1000)
|
|
if (diff < 60) return `${diff}s ago`
|
|
if (diff < 3600) return `${Math.floor(diff / 60)}m ago`
|
|
if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`
|
|
return `${Math.floor(diff / 86400)}d ago`
|
|
}
|
|
</script>
|