Release version 1.3.1: Updated backend models and endpoints
This commit is contained in:
561
frontend-internal/src/routes/tickets/+page.svelte
Normal file
561
frontend-internal/src/routes/tickets/+page.svelte
Normal file
@@ -0,0 +1,561 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import { api } from '$lib/utils/api';
|
||||
import { toast } from '$lib/stores/toast';
|
||||
import Modal from '$lib/components/Modal.svelte';
|
||||
|
||||
let tickets = [];
|
||||
let categories = [];
|
||||
let systems = [];
|
||||
let users = [];
|
||||
let isLoading = false;
|
||||
let showModal = false;
|
||||
let showEditModal = false;
|
||||
let showDeleteModal = false;
|
||||
let selectedTicket = null;
|
||||
|
||||
// Filtros
|
||||
let filterStatus = '';
|
||||
let filterPriority = '';
|
||||
|
||||
// Form para editar
|
||||
let editFormData = {
|
||||
status: '',
|
||||
priority: '',
|
||||
assigned_to: ''
|
||||
};
|
||||
|
||||
let formData = {
|
||||
subject: '',
|
||||
description: '',
|
||||
category_id: '',
|
||||
affected_system_id: '',
|
||||
priority: 'MEDIUM'
|
||||
};
|
||||
|
||||
const STATUSES = [
|
||||
{ value: 'NEW', label: 'Nuevo', color: 'blue' },
|
||||
{ value: 'IN_PROGRESS', label: 'En Progreso', color: 'indigo' },
|
||||
{ value: 'WAITING_CUSTOMER', label: 'Esperando Cliente', color: 'orange' },
|
||||
{ value: 'RESOLVED', label: 'Resuelto', color: 'green' },
|
||||
{ value: 'CLOSED', label: 'Cerrado', color: 'gray' },
|
||||
{ value: 'REOPENED', label: 'Reabierto', color: 'red' }
|
||||
];
|
||||
|
||||
const PRIORITIES = [
|
||||
{ value: 'LOW', label: 'Baja', color: 'gray' },
|
||||
{ value: 'MEDIUM', label: 'Media', color: 'blue' },
|
||||
{ value: 'HIGH', label: 'Alta', color: 'orange' },
|
||||
{ value: 'URGENT', label: 'Urgente', color: 'red' }
|
||||
];
|
||||
|
||||
// Ajustar la función loadData para asegurar que los filtros se envíen correctamente
|
||||
async function loadData() {
|
||||
isLoading = true;
|
||||
try {
|
||||
const [ticketsData, categoriesData, systemsData, usersData] = await Promise.all([
|
||||
api.get('/tickets/', {
|
||||
params: {
|
||||
status: filterStatus || undefined,
|
||||
priority: filterPriority || undefined
|
||||
}
|
||||
}),
|
||||
api.get('/categories/'),
|
||||
api.get('/systems/'),
|
||||
api.get('/users/')
|
||||
]);
|
||||
tickets = ticketsData;
|
||||
categories = categoriesData;
|
||||
systems = systemsData;
|
||||
users = usersData;
|
||||
} catch (e) {
|
||||
toast.error('Error cargando datos: ' + (e.message || 'Error desconocido'));
|
||||
} finally {
|
||||
isLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
// Asegurar que los filtros se apliquen al cambiar su valor
|
||||
function applyFilters() {
|
||||
loadData();
|
||||
}
|
||||
|
||||
function openCreateModal() {
|
||||
selectedTicket = null;
|
||||
formData = {
|
||||
subject: '',
|
||||
description: '',
|
||||
category_id: '',
|
||||
affected_system_id: '',
|
||||
priority: 'MEDIUM'
|
||||
};
|
||||
showModal = true;
|
||||
}
|
||||
|
||||
function viewTicket(ticket) {
|
||||
// Navegar a la página de detalle del ticket
|
||||
goto(`/tickets/${ticket.id}`);
|
||||
}
|
||||
|
||||
function openEditModal(ticket) {
|
||||
selectedTicket = ticket;
|
||||
editFormData = {
|
||||
status: ticket.status,
|
||||
priority: ticket.priority,
|
||||
assigned_to: ticket.assigned_to || ''
|
||||
};
|
||||
showEditModal = true;
|
||||
}
|
||||
|
||||
function openDeleteModal(ticket) {
|
||||
selectedTicket = ticket;
|
||||
showDeleteModal = true;
|
||||
}
|
||||
|
||||
async function handleDelete() {
|
||||
if (!selectedTicket) return;
|
||||
|
||||
try {
|
||||
await api.delete(`/tickets/${selectedTicket.id}`);
|
||||
toast.success('Ticket eliminado exitosamente');
|
||||
showDeleteModal = false;
|
||||
selectedTicket = null;
|
||||
loadData();
|
||||
} catch (e) {
|
||||
toast.error(e.message || 'Error eliminando ticket');
|
||||
}
|
||||
}
|
||||
|
||||
async function handleUpdate() {
|
||||
try {
|
||||
const payload = {};
|
||||
|
||||
if (editFormData.status !== selectedTicket.status) {
|
||||
payload.status = editFormData.status;
|
||||
}
|
||||
if (editFormData.priority !== selectedTicket.priority) {
|
||||
payload.priority = editFormData.priority;
|
||||
}
|
||||
if (editFormData.assigned_to !== selectedTicket.assigned_to) {
|
||||
payload.assigned_to = editFormData.assigned_to || null;
|
||||
}
|
||||
|
||||
if (Object.keys(payload).length === 0) {
|
||||
toast.info('No hay cambios para guardar');
|
||||
showEditModal = false;
|
||||
return;
|
||||
}
|
||||
|
||||
await api.patch(`/tickets/${selectedTicket.id}`, payload);
|
||||
toast.success('Ticket actualizado exitosamente');
|
||||
showEditModal = false;
|
||||
loadData();
|
||||
} catch (e) {
|
||||
toast.error(e.message || 'Error actualizando ticket');
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
try {
|
||||
const payload = {
|
||||
subject: formData.subject,
|
||||
description: formData.description,
|
||||
category_id: formData.category_id || null,
|
||||
affected_system_id: formData.affected_system_id || null,
|
||||
priority: formData.priority
|
||||
};
|
||||
|
||||
await api.post('/tickets/', payload);
|
||||
toast.success('Ticket creado exitosamente');
|
||||
showModal = false;
|
||||
loadData();
|
||||
} catch (e) {
|
||||
toast.error(e.message || 'Error creando ticket');
|
||||
}
|
||||
}
|
||||
|
||||
function getStatusBadge(status) {
|
||||
const statusObj = STATUSES.find(s => s.value === status);
|
||||
return statusObj || { label: status, color: 'gray' };
|
||||
}
|
||||
|
||||
function getPriorityBadge(priority) {
|
||||
const priorityObj = PRIORITIES.find(p => p.value === priority);
|
||||
return priorityObj || { label: priority, color: 'gray' };
|
||||
}
|
||||
|
||||
function getCategoryName(id) {
|
||||
if (!id) return '-';
|
||||
const cat = categories.find(c => c.id === id);
|
||||
return cat ? cat.name : '-';
|
||||
}
|
||||
|
||||
function getSystemName(id) {
|
||||
if (!id) return '-';
|
||||
const sys = systems.find(s => s.id === id);
|
||||
return sys ? sys.name : '-';
|
||||
}
|
||||
|
||||
function getUserName(id) {
|
||||
if (!id) return '-';
|
||||
const user = users.find(u => u.id === id);
|
||||
return user ? `${user.first_name} ${user.last_name}` : '-';
|
||||
}
|
||||
|
||||
function formatDate(dateString) {
|
||||
if (!dateString) return '-';
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleDateString('es-ES', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
}
|
||||
|
||||
onMount(loadData);
|
||||
</script>
|
||||
|
||||
<div class="px-4 py-8 mx-auto max-w-7xl sm:px-6 lg:px-8">
|
||||
<div class="sm:flex sm:items-center">
|
||||
<div class="sm:flex-auto">
|
||||
<h1 class="text-xl font-semibold text-gray-900">Tickets de Soporte</h1>
|
||||
<p class="mt-2 text-sm text-gray-700">Gestión de tickets del sistema de mesa de ayuda.</p>
|
||||
</div>
|
||||
<div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
|
||||
<button
|
||||
type="button"
|
||||
on:click={openCreateModal}
|
||||
class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md shadow-sm hover:bg-indigo-700 sm:w-auto"
|
||||
>
|
||||
Nuevo Ticket
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filtros -->
|
||||
<div class="mt-6 bg-white shadow sm:rounded-lg p-4">
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
||||
<div>
|
||||
<label for="filterStatus" class="block text-sm font-medium text-gray-700">Estado</label>
|
||||
<select
|
||||
id="filterStatus"
|
||||
bind:value={filterStatus}
|
||||
on:change={applyFilters}
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border p-2"
|
||||
>
|
||||
<option value="">Todos</option>
|
||||
{#each STATUSES as status}
|
||||
<option value={status.value}>{status.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="filterPriority" class="block text-sm font-medium text-gray-700">Prioridad</label>
|
||||
<select
|
||||
id="filterPriority"
|
||||
bind:value={filterPriority}
|
||||
on:change={applyFilters}
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border p-2"
|
||||
>
|
||||
<option value="">Todas</option>
|
||||
{#each PRIORITIES as priority}
|
||||
<option value={priority.value}>{priority.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="flex items-end">
|
||||
<button
|
||||
on:click={loadData}
|
||||
class="w-full inline-flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
|
||||
>
|
||||
Actualizar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tabla de Tickets -->
|
||||
<div class="mt-8 flex flex-col">
|
||||
<div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
|
||||
<div class="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
|
||||
<div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
|
||||
<table class="min-w-full divide-y divide-gray-300">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Ticket</th>
|
||||
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Asunto</th>
|
||||
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Estado</th>
|
||||
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Prioridad</th>
|
||||
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Categoría</th>
|
||||
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Asignado a</th>
|
||||
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Creado</th>
|
||||
<th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
|
||||
<span class="sr-only">Acciones</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200 bg-white">
|
||||
{#if isLoading}
|
||||
<tr><td colspan="8" class="text-center py-4">Cargando...</td></tr>
|
||||
{:else if tickets.length === 0}
|
||||
<tr><td colspan="8" class="text-center py-4">No hay tickets registrados</td></tr>
|
||||
{:else}
|
||||
{#each tickets as ticket}
|
||||
<tr
|
||||
class="hover:bg-gray-50 cursor-pointer"
|
||||
on:click={() => viewTicket(ticket)}
|
||||
>
|
||||
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
|
||||
{ticket.ticket_number || ticket.id.substring(0, 8)}
|
||||
</td>
|
||||
<td class="px-3 py-4 text-sm text-gray-900">
|
||||
<div class="font-medium">{ticket.subject}</div>
|
||||
<div class="text-gray-500 truncate max-w-xs">{ticket.description}</div>
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-3 py-4 text-sm">
|
||||
<span class="inline-flex rounded-full px-2 text-xs font-semibold leading-5 bg-{getStatusBadge(ticket.status).color}-100 text-{getStatusBadge(ticket.status).color}-800">
|
||||
{getStatusBadge(ticket.status).label}
|
||||
</span>
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-3 py-4 text-sm">
|
||||
<span class="inline-flex rounded-full px-2 text-xs font-semibold leading-5 bg-{getPriorityBadge(ticket.priority).color}-100 text-{getPriorityBadge(ticket.priority).color}-800">
|
||||
{getPriorityBadge(ticket.priority).label}
|
||||
</span>
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
|
||||
{getCategoryName(ticket.category_id)}
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
|
||||
{getUserName(ticket.assigned_to)}
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
|
||||
{formatDate(ticket.created_at)}
|
||||
</td>
|
||||
<td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 space-x-2">
|
||||
<button
|
||||
on:click|stopPropagation={() => openEditModal(ticket)}
|
||||
class="text-indigo-600 hover:text-indigo-900"
|
||||
>
|
||||
Editar
|
||||
</button>
|
||||
<button
|
||||
on:click|stopPropagation={() => openDeleteModal(ticket)}
|
||||
class="text-red-600 hover:text-red-900"
|
||||
>
|
||||
Eliminar
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
{/if}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Crear Ticket -->
|
||||
<Modal open={showModal} title="Nuevo Ticket" on:close={() => showModal = false}>
|
||||
<form on:submit|preventDefault={handleSubmit} class="space-y-4">
|
||||
<div>
|
||||
<label for="subject" class="block text-sm font-medium text-gray-700">Asunto *</label>
|
||||
<input
|
||||
type="text"
|
||||
id="subject"
|
||||
bind:value={formData.subject}
|
||||
required
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border p-2"
|
||||
placeholder="Breve descripción del problema"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="description" class="block text-sm font-medium text-gray-700">Descripción *</label>
|
||||
<textarea
|
||||
id="description"
|
||||
bind:value={formData.description}
|
||||
required
|
||||
rows="4"
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border p-2"
|
||||
placeholder="Describe el problema en detalle..."
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label for="category" class="block text-sm font-medium text-gray-700">Categoría</label>
|
||||
<select
|
||||
id="category"
|
||||
bind:value={formData.category_id}
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border p-2"
|
||||
>
|
||||
<option value="">-- Seleccionar --</option>
|
||||
{#each categories as category}
|
||||
<option value={category.id}>{category.name}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="system" class="block text-sm font-medium text-gray-700">Sistema Afectado</label>
|
||||
<select
|
||||
id="system"
|
||||
bind:value={formData.affected_system_id}
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border p-2"
|
||||
>
|
||||
<option value="">-- Seleccionar --</option>
|
||||
{#each systems as system}
|
||||
<option value={system.id}>{system.name}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="priority" class="block text-sm font-medium text-gray-700">Prioridad *</label>
|
||||
<select
|
||||
id="priority"
|
||||
bind:value={formData.priority}
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border p-2"
|
||||
>
|
||||
{#each PRIORITIES as priority}
|
||||
<option value={priority.value}>{priority.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mt-5 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3 sm:grid-flow-row-dense">
|
||||
<button
|
||||
type="submit"
|
||||
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:col-start-2 sm:text-sm"
|
||||
>
|
||||
Crear Ticket
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => showModal = false}
|
||||
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:col-start-1 sm:text-sm"
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
|
||||
<!-- Modal Editar Ticket -->
|
||||
<Modal open={showEditModal} title="Editar Ticket #{selectedTicket?.ticket_number || ''}" on:close={() => showEditModal = false}>
|
||||
<form on:submit|preventDefault={handleUpdate} class="space-y-4">
|
||||
<div>
|
||||
<label for="editStatus" class="block text-sm font-medium text-gray-700">Estado</label>
|
||||
<select
|
||||
id="editStatus"
|
||||
bind:value={editFormData.status}
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border p-2"
|
||||
>
|
||||
{#each STATUSES as status}
|
||||
<option value={status.value}>{status.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="editPriority" class="block text-sm font-medium text-gray-700">Prioridad</label>
|
||||
<select
|
||||
id="editPriority"
|
||||
bind:value={editFormData.priority}
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border p-2"
|
||||
>
|
||||
{#each PRIORITIES as priority}
|
||||
<option value={priority.value}>{priority.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="editAssigned" class="block text-sm font-medium text-gray-700">Asignar a</label>
|
||||
<select
|
||||
id="editAssigned"
|
||||
bind:value={editFormData.assigned_to}
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border p-2"
|
||||
>
|
||||
<option value="">-- Sin asignar --</option>
|
||||
{#each users.filter(u => u.role === 'AGENT' || u.role === 'SUPPORT_MANAGER' || u.role === 'ADMIN') as user}
|
||||
<option value={user.id}>{user.first_name} {user.last_name} ({user.role})</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 p-3 rounded">
|
||||
<p class="text-sm text-gray-600"><strong>Asunto:</strong> {selectedTicket?.subject}</p>
|
||||
<p class="text-sm text-gray-600 mt-1"><strong>Creado por:</strong> {getUserName(selectedTicket?.created_by)}</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-5 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3 sm:grid-flow-row-dense">
|
||||
<button
|
||||
type="submit"
|
||||
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:col-start-2 sm:text-sm"
|
||||
>
|
||||
Guardar Cambios
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => showEditModal = false}
|
||||
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:col-start-1 sm:text-sm"
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
|
||||
<!-- Modal Eliminar Ticket -->
|
||||
<Modal open={showDeleteModal} title="Eliminar Ticket" on:close={() => showDeleteModal = false}>
|
||||
<div class="space-y-4">
|
||||
<div class="bg-red-50 border border-red-200 rounded-md p-4">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<svg class="h-5 w-5 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<h3 class="text-sm font-medium text-red-800">
|
||||
¿Estás seguro de eliminar este ticket?
|
||||
</h3>
|
||||
<div class="mt-2 text-sm text-red-700">
|
||||
<p>Esta acción no se puede deshacer. Se eliminarán también todos los comentarios y adjuntos asociados.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 p-3 rounded">
|
||||
<p class="text-sm text-gray-600"><strong>Ticket:</strong> {selectedTicket?.ticket_number}</p>
|
||||
<p class="text-sm text-gray-600 mt-1"><strong>Asunto:</strong> {selectedTicket?.subject}</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-5 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3 sm:grid-flow-row-dense">
|
||||
<button
|
||||
type="button"
|
||||
on:click={handleDelete}
|
||||
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:col-start-2 sm:text-sm"
|
||||
>
|
||||
Sí, Eliminar
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => showDeleteModal = false}
|
||||
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:col-start-1 sm:text-sm"
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
300
frontend-internal/src/routes/tickets/[id]/+page.svelte
Normal file
300
frontend-internal/src/routes/tickets/[id]/+page.svelte
Normal file
@@ -0,0 +1,300 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { page } from '$app/stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import { api } from '$lib/utils/api';
|
||||
import { toast } from '$lib/stores/toast';
|
||||
|
||||
let ticketId: string;
|
||||
let ticket = null;
|
||||
let comments = [];
|
||||
let users = [];
|
||||
let isLoading = false;
|
||||
let newComment = '';
|
||||
let isSubmittingComment = false;
|
||||
let pollingInterval: any = null;
|
||||
|
||||
const STATUSES = [
|
||||
{ value: 'NEW', label: 'Nuevo', color: 'blue' },
|
||||
{ value: 'IN_PROGRESS', label: 'En Progreso', color: 'indigo' },
|
||||
{ value: 'WAITING_CUSTOMER', label: 'Esperando Cliente', color: 'orange' },
|
||||
{ value: 'RESOLVED', label: 'Resuelto', color: 'green' },
|
||||
{ value: 'CLOSED', label: 'Cerrado', color: 'gray' },
|
||||
{ value: 'REOPENED', label: 'Reabierto', color: 'red' }
|
||||
];
|
||||
|
||||
const PRIORITIES = [
|
||||
{ value: 'LOW', label: 'Baja', color: 'gray' },
|
||||
{ value: 'MEDIUM', label: 'Media', color: 'blue' },
|
||||
{ value: 'HIGH', label: 'Alta', color: 'orange' },
|
||||
{ value: 'URGENT', label: 'Urgente', color: 'red' }
|
||||
];
|
||||
|
||||
async function loadComments() {
|
||||
try {
|
||||
const commentsData = await api.get(`/tickets/${ticketId}/comments`);
|
||||
comments = commentsData;
|
||||
} catch (e) {
|
||||
// No mostrar error en polling silencioso
|
||||
console.error('Error recargando comentarios:', e);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadData() {
|
||||
isLoading = true;
|
||||
try {
|
||||
const [ticketData, commentsData, usersData] = await Promise.all([
|
||||
api.get(`/tickets/${ticketId}`),
|
||||
api.get(`/tickets/${ticketId}/comments`),
|
||||
api.get('/users/')
|
||||
]);
|
||||
ticket = ticketData;
|
||||
comments = commentsData;
|
||||
users = usersData;
|
||||
} catch (e) {
|
||||
toast.error('Error cargando ticket: ' + (e.message || 'Error desconocido'));
|
||||
} finally {
|
||||
isLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleAddComment() {
|
||||
if (!newComment.trim()) return;
|
||||
|
||||
isSubmittingComment = true;
|
||||
try {
|
||||
const comment = await api.post(`/tickets/${ticketId}/comments`, {
|
||||
content: newComment.trim(),
|
||||
is_internal: false
|
||||
});
|
||||
comments = [...comments, comment];
|
||||
newComment = '';
|
||||
toast.success('Comentario agregado');
|
||||
} catch (e) {
|
||||
toast.error(e.message || 'Error al agregar comentario');
|
||||
} finally {
|
||||
isSubmittingComment = false;
|
||||
}
|
||||
}
|
||||
|
||||
function getStatusBadge(status) {
|
||||
const statusObj = STATUSES.find(s => s.value === status);
|
||||
return statusObj || { label: status, color: 'gray' };
|
||||
}
|
||||
|
||||
function getPriorityBadge(priority) {
|
||||
const priorityObj = PRIORITIES.find(p => p.value === priority);
|
||||
return priorityObj || { label: priority, color: 'gray' };
|
||||
}
|
||||
|
||||
function getUserName(id) {
|
||||
if (!id) return 'Desconocido';
|
||||
const user = users.find(u => u.id === id);
|
||||
return user ? `${user.first_name} ${user.last_name}` : 'Desconocido';
|
||||
}
|
||||
|
||||
function formatDate(dateString) {
|
||||
if (!dateString) return '-';
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleString('es-ES', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
ticketId = $page.params.id;
|
||||
if (ticketId) {
|
||||
loadData();
|
||||
// Polling cada 3 segundos
|
||||
pollingInterval = setInterval(() => {
|
||||
loadComments();
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
// Cleanup cuando se desmonte el componente
|
||||
return () => {
|
||||
if (pollingInterval) {
|
||||
clearInterval(pollingInterval);
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<div class="px-4 py-8 mx-auto max-w-7xl sm:px-6 lg:px-8">
|
||||
{#if isLoading}
|
||||
<div class="text-center py-12">
|
||||
<div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600"></div>
|
||||
<p class="mt-2 text-gray-600">Cargando ticket...</p>
|
||||
</div>
|
||||
{:else if ticket}
|
||||
<!-- Breadcrumb -->
|
||||
<div class="flex items-center space-x-2 text-sm text-gray-500 mb-6">
|
||||
<a href="/tickets" class="hover:text-indigo-600">Tickets</a>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
<span>#{ticket.ticket_number || ticket.id.substring(0, 8)}</span>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<!-- Main Content -->
|
||||
<div class="lg:col-span-2 space-y-6">
|
||||
<!-- Ticket Header -->
|
||||
<div class="bg-white shadow rounded-lg">
|
||||
<div class="px-6 py-5 border-b border-gray-200">
|
||||
<div class="flex justify-between items-start">
|
||||
<div class="flex-1">
|
||||
<h1 class="text-2xl font-bold text-gray-900 mb-2">
|
||||
{ticket.subject || ticket.title}
|
||||
</h1>
|
||||
<div class="flex items-center space-x-3">
|
||||
<span class="inline-flex rounded-full px-2 text-xs font-semibold leading-5 bg-{getStatusBadge(ticket.status).color}-100 text-{getStatusBadge(ticket.status).color}-800">
|
||||
{getStatusBadge(ticket.status).label}
|
||||
</span>
|
||||
<span class="inline-flex rounded-full px-2 text-xs font-semibold leading-5 bg-{getPriorityBadge(ticket.priority).color}-100 text-{getPriorityBadge(ticket.priority).color}-800">
|
||||
{getPriorityBadge(ticket.priority).label}
|
||||
</span>
|
||||
<span class="text-sm text-gray-500">
|
||||
Creado {formatDate(ticket.created_at)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
on:click={() => goto('/tickets')}
|
||||
class="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
||||
>
|
||||
Volver
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-6 py-5">
|
||||
<div class="prose max-w-none">
|
||||
<p class="whitespace-pre-wrap text-gray-700">
|
||||
{ticket.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Comments Section -->
|
||||
<div class="bg-white shadow rounded-lg">
|
||||
<div class="px-6 py-5 border-b border-gray-200">
|
||||
<h3 class="text-lg font-semibold text-gray-900">Conversación</h3>
|
||||
</div>
|
||||
<div class="px-6 py-5">
|
||||
{#if comments.length === 0}
|
||||
<p class="text-gray-500 text-center py-4">
|
||||
No hay comentarios aún. ¡Sé el primero en comentar!
|
||||
</p>
|
||||
{:else}
|
||||
<div class="space-y-4">
|
||||
{#each comments as comment}
|
||||
<div class="flex space-x-3">
|
||||
<div class="w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-indigo-600 text-xs font-medium">
|
||||
{comment.author_name ? comment.author_name.split(' ').map(n => n[0]).join('') : '??'}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center space-x-2 mb-1">
|
||||
<span class="text-sm font-medium text-gray-900">
|
||||
{comment.author_name || 'Usuario Desconocido'}
|
||||
</span>
|
||||
<span class="text-xs text-gray-500">
|
||||
{formatDate(comment.created_at)}
|
||||
</span>
|
||||
{#if comment.is_internal}
|
||||
<span class="bg-red-100 text-red-700 text-xs px-2 py-0.5 rounded">
|
||||
Interno
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<p class="text-gray-700 whitespace-pre-wrap">
|
||||
{comment.content}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Add Comment Form -->
|
||||
<div class="mt-6 pt-6 border-t border-gray-200">
|
||||
<form on:submit|preventDefault={handleAddComment} class="space-y-4">
|
||||
<textarea
|
||||
rows="4"
|
||||
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border p-2"
|
||||
placeholder="Escribe tu comentario o respuesta..."
|
||||
bind:value={newComment}
|
||||
disabled={isSubmittingComment}
|
||||
></textarea>
|
||||
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
type="submit"
|
||||
class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
|
||||
disabled={isSubmittingComment || !newComment.trim()}
|
||||
>
|
||||
{#if isSubmittingComment}
|
||||
<div class="flex items-center space-x-2">
|
||||
<div class="inline-block animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
|
||||
<span>Enviando...</span>
|
||||
</div>
|
||||
{:else}
|
||||
Enviar Comentario
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="space-y-6">
|
||||
<!-- Ticket Info -->
|
||||
<div class="bg-white shadow rounded-lg">
|
||||
<div class="px-6 py-5 border-b border-gray-200">
|
||||
<h3 class="text-lg font-semibold text-gray-900">Información</h3>
|
||||
</div>
|
||||
<div class="px-6 py-5 space-y-4">
|
||||
<div>
|
||||
<dt class="text-sm font-medium text-gray-500">ID del Ticket</dt>
|
||||
<dd class="text-sm text-gray-900 font-mono">#{ticket.ticket_number || ticket.id.substring(0, 8)}</dd>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<dt class="text-sm font-medium text-gray-500">Creado por</dt>
|
||||
<dd class="text-sm text-gray-900">{getUserName(ticket.created_by)}</dd>
|
||||
</div>
|
||||
|
||||
{#if ticket.assigned_to}
|
||||
<div>
|
||||
<dt class="text-sm font-medium text-gray-500">Asignado a</dt>
|
||||
<dd class="text-sm text-gray-900">{getUserName(ticket.assigned_to)}</dd>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div>
|
||||
<dt class="text-sm font-medium text-gray-500">Creado</dt>
|
||||
<dd class="text-sm text-gray-900">{formatDate(ticket.created_at)}</dd>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<dt class="text-sm font-medium text-gray-500">Última actualización</dt>
|
||||
<dd class="text-sm text-gray-900">{formatDate(ticket.updated_at)}</dd>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -0,0 +1,28 @@
|
||||
// vite.config.js
|
||||
import { sveltekit } from "file:///app/node_modules/@sveltejs/kit/src/exports/vite/index.js";
|
||||
import { defineConfig } from "file:///app/node_modules/vite/dist/node/index.js";
|
||||
var vite_config_default = defineConfig({
|
||||
plugins: [sveltekit()],
|
||||
server: {
|
||||
port: 3e3,
|
||||
host: "0.0.0.0",
|
||||
proxy: {
|
||||
"/api": {
|
||||
target: "http://servicemanager-backend:8000",
|
||||
changeOrigin: true,
|
||||
rewrite: (path) => path.replace(/^\/api/, "")
|
||||
}
|
||||
}
|
||||
},
|
||||
preview: {
|
||||
port: 3e3,
|
||||
host: "0.0.0.0"
|
||||
},
|
||||
build: {
|
||||
target: "esnext"
|
||||
}
|
||||
});
|
||||
export {
|
||||
vite_config_default as default
|
||||
};
|
||||
//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcuanMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvYXBwXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ZpbGVuYW1lID0gXCIvYXBwL3ZpdGUuY29uZmlnLmpzXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ltcG9ydF9tZXRhX3VybCA9IFwiZmlsZTovLy9hcHAvdml0ZS5jb25maWcuanNcIjtcdUZFRkZpbXBvcnQgeyBzdmVsdGVraXQgfSBmcm9tICdAc3ZlbHRlanMva2l0L3ZpdGUnO1xuaW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZSc7XG5cbmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbmZpZyh7XG4gICAgICAgIHBsdWdpbnM6IFtzdmVsdGVraXQoKV0sXG4gICAgICAgIHNlcnZlcjoge1xuICAgICAgICAgICAgICAgIHBvcnQ6IDMwMDAsXG4gICAgICAgICAgICAgICAgaG9zdDogJzAuMC4wLjAnLFxuICAgICAgICAgICAgICAgIHByb3h5OiB7XG4gICAgICAgICAgICAgICAgICAgICAgICAnL2FwaSc6IHtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgdGFyZ2V0OiAnaHR0cDovL3NlcnZpY2VtYW5hZ2VyLWJhY2tlbmQ6ODAwMCcsXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGNoYW5nZU9yaWdpbjogdHJ1ZSxcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgcmV3cml0ZTogKHBhdGgpID0+IHBhdGgucmVwbGFjZSgvXlxcL2FwaS8sICcnKVxuICAgICAgICAgICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgfSxcbiAgICAgICAgcHJldmlldzoge1xuICAgICAgICAgICAgICAgIHBvcnQ6IDMwMDAsXG4gICAgICAgICAgICAgICAgaG9zdDogJzAuMC4wLjAnXG4gICAgICAgIH0sXG4gICAgICAgIGJ1aWxkOiB7XG4gICAgICAgICAgICAgICAgdGFyZ2V0OiAnZXNuZXh0J1xuICAgICAgICB9XG59KTtcclxuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUErTCxTQUFTLGlCQUFpQjtBQUN6TixTQUFTLG9CQUFvQjtBQUU3QixJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUNwQixTQUFTLENBQUMsVUFBVSxDQUFDO0FBQUEsRUFDckIsUUFBUTtBQUFBLElBQ0EsTUFBTTtBQUFBLElBQ04sTUFBTTtBQUFBLElBQ04sT0FBTztBQUFBLE1BQ0MsUUFBUTtBQUFBLFFBQ0EsUUFBUTtBQUFBLFFBQ1IsY0FBYztBQUFBLFFBQ2QsU0FBUyxDQUFDLFNBQVMsS0FBSyxRQUFRLFVBQVUsRUFBRTtBQUFBLE1BQ3BEO0FBQUEsSUFDUjtBQUFBLEVBQ1I7QUFBQSxFQUNBLFNBQVM7QUFBQSxJQUNELE1BQU07QUFBQSxJQUNOLE1BQU07QUFBQSxFQUNkO0FBQUEsRUFDQSxPQUFPO0FBQUEsSUFDQyxRQUFRO0FBQUEsRUFDaEI7QUFDUixDQUFDOyIsCiAgIm5hbWVzIjogW10KfQo=
|
||||
Reference in New Issue
Block a user