Release version 1.3.1: Updated backend models and endpoints
This commit is contained in:
@@ -14,6 +14,7 @@ from app.models.ticket import Ticket, TicketStatus, TicketPriority
|
||||
from app.models.user import User
|
||||
from app.models.category import Category # ✅ CORREGIDO: Era TicketCategory
|
||||
from app.models.system import System
|
||||
from app.models.comment import TicketComment
|
||||
import uuid
|
||||
|
||||
router = APIRouter()
|
||||
@@ -40,6 +41,7 @@ class TicketResponse(BaseModel):
|
||||
id: str
|
||||
ticket_number: str
|
||||
subject: str
|
||||
title: str
|
||||
description: str
|
||||
status: str
|
||||
priority: str
|
||||
@@ -124,6 +126,7 @@ async def create_ticket(
|
||||
"id": str(db_ticket.id),
|
||||
"ticket_number": db_ticket.ticket_number,
|
||||
"subject": db_ticket.subject,
|
||||
"title": db_ticket.subject,
|
||||
"description": db_ticket.description,
|
||||
"status": db_ticket.status.value,
|
||||
"priority": db_ticket.priority.value,
|
||||
@@ -186,6 +189,7 @@ async def get_tickets(
|
||||
"id": str(t.id),
|
||||
"ticket_number": t.ticket_number,
|
||||
"subject": t.subject,
|
||||
"title": t.subject,
|
||||
"description": t.description,
|
||||
"status": t.status.value,
|
||||
"priority": t.priority.value,
|
||||
@@ -237,6 +241,7 @@ async def get_ticket(
|
||||
"id": str(ticket.id),
|
||||
"ticket_number": ticket.ticket_number,
|
||||
"subject": ticket.subject,
|
||||
"title": ticket.subject,
|
||||
"description": ticket.description,
|
||||
"status": ticket.status.value,
|
||||
"priority": ticket.priority.value,
|
||||
@@ -305,6 +310,7 @@ async def update_ticket(
|
||||
"id": str(db_ticket.id),
|
||||
"ticket_number": db_ticket.ticket_number,
|
||||
"subject": db_ticket.subject,
|
||||
"title": db_ticket.subject,
|
||||
"description": db_ticket.description,
|
||||
"status": db_ticket.status.value,
|
||||
"priority": db_ticket.priority.value,
|
||||
@@ -369,6 +375,7 @@ async def close_ticket(
|
||||
"id": str(db_ticket.id),
|
||||
"ticket_number": db_ticket.ticket_number,
|
||||
"subject": db_ticket.subject,
|
||||
"title": db_ticket.subject,
|
||||
"description": db_ticket.description,
|
||||
"status": db_ticket.status.value,
|
||||
"priority": db_ticket.priority.value,
|
||||
@@ -388,11 +395,29 @@ async def close_ticket(
|
||||
)
|
||||
|
||||
|
||||
# ===================================
|
||||
# COMMENT ENDPOINTS (placeholder)
|
||||
## ===================================
|
||||
# COMMENT ENDPOINTS
|
||||
# ===================================
|
||||
|
||||
@router.get("/{ticket_id}/comments")
|
||||
class CommentCreate(BaseModel):
|
||||
content: str
|
||||
is_internal: bool = False
|
||||
|
||||
class CommentResponse(BaseModel):
|
||||
id: str
|
||||
ticket_id: str
|
||||
author_id: str
|
||||
author_name: str
|
||||
content: str
|
||||
is_internal: bool
|
||||
created_at: datetime
|
||||
updated_at: datetime
|
||||
|
||||
class Config:
|
||||
from_attributes = True
|
||||
|
||||
|
||||
@router.get("/{ticket_id}/comments", response_model=List[CommentResponse])
|
||||
async def get_ticket_comments(
|
||||
ticket_id: str,
|
||||
db: AsyncSession = Depends(get_db),
|
||||
@@ -401,23 +426,151 @@ async def get_ticket_comments(
|
||||
"""
|
||||
Obtener comentarios de un ticket
|
||||
"""
|
||||
return []
|
||||
try:
|
||||
ticket_uuid = uuid.UUID(ticket_id)
|
||||
except ValueError:
|
||||
raise HTTPException(
|
||||
status_code=status.HTTP_400_BAD_REQUEST,
|
||||
detail="Invalid ticket ID format"
|
||||
)
|
||||
|
||||
# Verificar que el ticket existe y el usuario tiene acceso
|
||||
ticket_query = select(Ticket).where(
|
||||
Ticket.id == ticket_uuid,
|
||||
Ticket.tenant_id == current_user.tenant_id
|
||||
)
|
||||
ticket_result = await db.execute(ticket_query)
|
||||
ticket = ticket_result.scalars().first()
|
||||
|
||||
if not ticket:
|
||||
raise HTTPException(
|
||||
status_code=status.HTTP_404_NOT_FOUND,
|
||||
detail=f"Ticket {ticket_id} not found"
|
||||
)
|
||||
|
||||
# Obtener comentarios
|
||||
comments_query = select(TicketComment, User).join(
|
||||
User, TicketComment.author_id == User.id
|
||||
).where(
|
||||
TicketComment.ticket_id == ticket_uuid
|
||||
).order_by(TicketComment.created_at.asc())
|
||||
|
||||
result = await db.execute(comments_query)
|
||||
comments_with_users = result.all()
|
||||
|
||||
# Formatear respuesta
|
||||
return [
|
||||
{
|
||||
"id": str(comment.id),
|
||||
"ticket_id": str(comment.ticket_id),
|
||||
"author_id": str(comment.author_id),
|
||||
"author_name": f"{user.first_name} {user.last_name}",
|
||||
"content": comment.content,
|
||||
"is_internal": comment.is_internal,
|
||||
"created_at": comment.created_at,
|
||||
"updated_at": comment.updated_at
|
||||
}
|
||||
for comment, user in comments_with_users
|
||||
]
|
||||
|
||||
|
||||
@router.post("/{ticket_id}/comments", status_code=status.HTTP_201_CREATED)
|
||||
@router.post("/{ticket_id}/comments", response_model=CommentResponse, status_code=status.HTTP_201_CREATED)
|
||||
async def create_comment(
|
||||
ticket_id: str,
|
||||
comment: CommentCreate,
|
||||
db: AsyncSession = Depends(get_db),
|
||||
current_user: User = Depends(get_current_user)
|
||||
):
|
||||
"""
|
||||
Agregar un comentario a un ticket
|
||||
"""
|
||||
try:
|
||||
ticket_uuid = uuid.UUID(ticket_id)
|
||||
except ValueError:
|
||||
raise HTTPException(
|
||||
status_code=status.HTTP_501_NOT_IMPLEMENTED,
|
||||
detail="Comments not yet implemented"
|
||||
status_code=status.HTTP_400_BAD_REQUEST,
|
||||
detail="Invalid ticket ID format"
|
||||
)
|
||||
|
||||
# Verificar que el ticket existe y el usuario tiene acceso
|
||||
ticket_query = select(Ticket).where(
|
||||
Ticket.id == ticket_uuid,
|
||||
Ticket.tenant_id == current_user.tenant_id
|
||||
)
|
||||
ticket_result = await db.execute(ticket_query)
|
||||
ticket_obj = ticket_result.scalars().first()
|
||||
|
||||
if not ticket_obj:
|
||||
raise HTTPException(
|
||||
status_code=status.HTTP_404_NOT_FOUND,
|
||||
detail=f"Ticket {ticket_id} not found"
|
||||
)
|
||||
|
||||
# Crear comentario
|
||||
new_comment = TicketComment(
|
||||
id=uuid.uuid4(),
|
||||
ticket_id=ticket_uuid,
|
||||
author_id=current_user.id,
|
||||
content=comment.content,
|
||||
is_internal=comment.is_internal,
|
||||
created_at=datetime.utcnow(),
|
||||
updated_at=datetime.utcnow()
|
||||
)
|
||||
|
||||
db.add(new_comment)
|
||||
|
||||
# Actualizar el ticket updated_at
|
||||
ticket_obj.updated_at = datetime.utcnow()
|
||||
|
||||
await db.commit()
|
||||
await db.refresh(new_comment)
|
||||
|
||||
# Retornar con el nombre del autor
|
||||
return {
|
||||
"id": str(new_comment.id),
|
||||
"ticket_id": str(new_comment.ticket_id),
|
||||
"author_id": str(new_comment.author_id),
|
||||
"author_name": f"{current_user.first_name} {current_user.last_name}",
|
||||
"content": new_comment.content,
|
||||
"is_internal": new_comment.is_internal,
|
||||
"created_at": new_comment.created_at,
|
||||
"updated_at": new_comment.updated_at
|
||||
}
|
||||
@router.delete("/{ticket_id}", status_code=status.HTTP_204_NO_CONTENT)
|
||||
async def delete_ticket(
|
||||
ticket_id: str,
|
||||
db: AsyncSession = Depends(get_db),
|
||||
current_user: User = Depends(get_current_user)
|
||||
):
|
||||
"""
|
||||
Eliminar un ticket (solo admin/manager)
|
||||
"""
|
||||
try:
|
||||
ticket_uuid = uuid.UUID(ticket_id)
|
||||
except ValueError:
|
||||
raise HTTPException(
|
||||
status_code=status.HTTP_400_BAD_REQUEST,
|
||||
detail="Invalid ticket ID format"
|
||||
)
|
||||
|
||||
query = select(Ticket).where(
|
||||
Ticket.id == ticket_uuid,
|
||||
Ticket.tenant_id == current_user.tenant_id
|
||||
)
|
||||
|
||||
result = await db.execute(query)
|
||||
db_ticket = result.scalars().first()
|
||||
|
||||
if not db_ticket:
|
||||
raise HTTPException(
|
||||
status_code=status.HTTP_404_NOT_FOUND,
|
||||
detail=f"Ticket {ticket_id} not found"
|
||||
)
|
||||
|
||||
await db.delete(db_ticket)
|
||||
await db.commit()
|
||||
|
||||
return {"message": "Ticket deleted successfully"}
|
||||
|
||||
# ===================================
|
||||
# ATTACHMENT ENDPOINTS (placeholder)
|
||||
|
||||
451
backend/app/api/v1/endpoints/tickets.py.backup
Normal file
451
backend/app/api/v1/endpoints/tickets.py.backup
Normal file
@@ -0,0 +1,451 @@
|
||||
"""
|
||||
Tickets endpoints - ServiceManagerWeb
|
||||
"""
|
||||
|
||||
from fastapi import APIRouter, Depends, HTTPException, status, UploadFile, File
|
||||
from pydantic import BaseModel
|
||||
from sqlalchemy.ext.asyncio import AsyncSession
|
||||
from sqlalchemy import select, func
|
||||
from typing import List, Optional
|
||||
from datetime import datetime
|
||||
from app.core.database import get_db
|
||||
from app.api.deps import get_current_user
|
||||
from app.models.ticket import Ticket, TicketStatus, TicketPriority
|
||||
from app.models.user import User
|
||||
from app.models.category import Category # ✅ CORREGIDO: Era TicketCategory
|
||||
from app.models.system import System
|
||||
import uuid
|
||||
|
||||
router = APIRouter()
|
||||
|
||||
# ===================================
|
||||
# SCHEMAS
|
||||
# ===================================
|
||||
|
||||
class TicketCreate(BaseModel):
|
||||
subject: str
|
||||
description: str
|
||||
category_id: Optional[str] = None
|
||||
affected_system_id: Optional[str] = None # ✅ CORREGIDO: Era system_id
|
||||
priority: str = "MEDIUM"
|
||||
|
||||
class TicketUpdate(BaseModel):
|
||||
subject: Optional[str] = None
|
||||
description: Optional[str] = None
|
||||
status: Optional[str] = None
|
||||
priority: Optional[str] = None
|
||||
assigned_to: Optional[str] = None
|
||||
|
||||
class TicketResponse(BaseModel):
|
||||
id: str
|
||||
ticket_number: str
|
||||
subject: str
|
||||
description: str
|
||||
status: str
|
||||
priority: str
|
||||
category_id: Optional[str] = None
|
||||
affected_system_id: Optional[str] = None # ✅ CORREGIDO: Era system_id
|
||||
created_by: str
|
||||
assigned_to: Optional[str] = None
|
||||
created_at: datetime
|
||||
updated_at: datetime
|
||||
|
||||
class Config:
|
||||
from_attributes = True
|
||||
|
||||
class TicketCloseRequest(BaseModel):
|
||||
resolution: Optional[str] = None
|
||||
|
||||
|
||||
# ===================================
|
||||
# TICKET ENDPOINTS
|
||||
# ===================================
|
||||
|
||||
@router.post("/", response_model=TicketResponse, status_code=status.HTTP_201_CREATED)
|
||||
async def create_ticket(
|
||||
ticket: TicketCreate,
|
||||
db: AsyncSession = Depends(get_db),
|
||||
current_user: User = Depends(get_current_user)
|
||||
):
|
||||
"""
|
||||
Crear un nuevo ticket
|
||||
"""
|
||||
try:
|
||||
# Generar número de ticket único
|
||||
result = await db.execute(
|
||||
select(func.count(Ticket.id)).where(Ticket.tenant_id == current_user.tenant_id)
|
||||
)
|
||||
count = result.scalar() or 0
|
||||
ticket_number = f"TK-{count + 1:06d}"
|
||||
|
||||
# Convertir IDs de string a UUID si son proporcionados
|
||||
category_uuid = uuid.UUID(ticket.category_id) if ticket.category_id else None
|
||||
system_uuid = uuid.UUID(ticket.affected_system_id) if ticket.affected_system_id else None # ✅ CORREGIDO
|
||||
|
||||
# ✅ CORREGIDO: Validar en la tabla correcta con el nombre correcto del modelo
|
||||
if category_uuid:
|
||||
category = await db.get(Category, category_uuid) # ✅ Category, no TicketCategory
|
||||
if not category:
|
||||
raise HTTPException(
|
||||
status_code=status.HTTP_400_BAD_REQUEST,
|
||||
detail=f"La categoría con ID {ticket.category_id} no existe."
|
||||
)
|
||||
|
||||
# Validar si el system_id existe en la tabla affected_systems
|
||||
if system_uuid:
|
||||
system = await db.get(System, system_uuid)
|
||||
if not system:
|
||||
raise HTTPException(
|
||||
status_code=status.HTTP_400_BAD_REQUEST,
|
||||
detail=f"El sistema con ID {ticket.affected_system_id} no existe."
|
||||
)
|
||||
|
||||
db_ticket = Ticket(
|
||||
id=uuid.uuid4(),
|
||||
tenant_id=current_user.tenant_id,
|
||||
ticket_number=ticket_number,
|
||||
subject=ticket.subject,
|
||||
description=ticket.description,
|
||||
category_id=category_uuid,
|
||||
affected_system_id=system_uuid, # ✅ CORREGIDO: Nombre correcto del campo
|
||||
priority=TicketPriority[ticket.priority.upper()],
|
||||
created_by=current_user.id,
|
||||
status=TicketStatus.NEW,
|
||||
created_at=datetime.utcnow(),
|
||||
updated_at=datetime.utcnow()
|
||||
)
|
||||
|
||||
db.add(db_ticket)
|
||||
await db.commit()
|
||||
await db.refresh(db_ticket)
|
||||
|
||||
# ✅ CORREGIDO: Usar affected_system_id en respuesta
|
||||
return {
|
||||
"id": str(db_ticket.id),
|
||||
"ticket_number": db_ticket.ticket_number,
|
||||
"subject": db_ticket.subject,
|
||||
"description": db_ticket.description,
|
||||
"status": db_ticket.status.value,
|
||||
"priority": db_ticket.priority.value,
|
||||
"category_id": str(db_ticket.category_id) if db_ticket.category_id else None,
|
||||
"affected_system_id": str(db_ticket.affected_system_id) if db_ticket.affected_system_id else None, # ✅ CORREGIDO
|
||||
"created_by": str(db_ticket.created_by),
|
||||
"assigned_to": str(db_ticket.assigned_to) if db_ticket.assigned_to else None,
|
||||
"created_at": db_ticket.created_at,
|
||||
"updated_at": db_ticket.updated_at
|
||||
}
|
||||
|
||||
except ValueError as e:
|
||||
await db.rollback()
|
||||
raise HTTPException(
|
||||
status_code=status.HTTP_400_BAD_REQUEST,
|
||||
detail=f"Invalid UUID format: {str(e)}"
|
||||
)
|
||||
except Exception as e:
|
||||
await db.rollback()
|
||||
raise HTTPException(
|
||||
status_code=status.HTTP_400_BAD_REQUEST,
|
||||
detail=f"Error creating ticket: {str(e)}"
|
||||
)
|
||||
|
||||
|
||||
@router.get("/", response_model=List[TicketResponse])
|
||||
async def get_tickets(
|
||||
skip: int = 0,
|
||||
limit: int = 100,
|
||||
status_filter: Optional[str] = None,
|
||||
db: AsyncSession = Depends(get_db),
|
||||
current_user: User = Depends(get_current_user)
|
||||
):
|
||||
"""
|
||||
Obtener tickets del usuario actual
|
||||
"""
|
||||
query = select(Ticket).where(
|
||||
Ticket.tenant_id == current_user.tenant_id,
|
||||
Ticket.created_by == current_user.id
|
||||
)
|
||||
|
||||
if status_filter:
|
||||
try:
|
||||
status_enum = TicketStatus[status_filter.upper()]
|
||||
query = query.where(Ticket.status == status_enum)
|
||||
except KeyError:
|
||||
raise HTTPException(
|
||||
status_code=status.HTTP_400_BAD_REQUEST,
|
||||
detail=f"Invalid status: {status_filter}"
|
||||
)
|
||||
|
||||
query = query.order_by(Ticket.created_at.desc()).offset(skip).limit(limit)
|
||||
|
||||
result = await db.execute(query)
|
||||
tickets = result.scalars().all()
|
||||
|
||||
# ✅ CORREGIDO: Usar affected_system_id
|
||||
return [
|
||||
{
|
||||
"id": str(t.id),
|
||||
"ticket_number": t.ticket_number,
|
||||
"subject": t.subject,
|
||||
"description": t.description,
|
||||
"status": t.status.value,
|
||||
"priority": t.priority.value,
|
||||
"category_id": str(t.category_id) if t.category_id else None,
|
||||
"affected_system_id": str(t.affected_system_id) if t.affected_system_id else None, # ✅ CORREGIDO
|
||||
"created_by": str(t.created_by),
|
||||
"assigned_to": str(t.assigned_to) if t.assigned_to else None,
|
||||
"created_at": t.created_at,
|
||||
"updated_at": t.updated_at
|
||||
}
|
||||
for t in tickets
|
||||
]
|
||||
|
||||
|
||||
@router.get("/{ticket_id}", response_model=TicketResponse)
|
||||
async def get_ticket(
|
||||
ticket_id: str,
|
||||
db: AsyncSession = Depends(get_db),
|
||||
current_user: User = Depends(get_current_user)
|
||||
):
|
||||
"""
|
||||
Obtener un ticket específico
|
||||
"""
|
||||
try:
|
||||
ticket_uuid = uuid.UUID(ticket_id)
|
||||
except ValueError:
|
||||
raise HTTPException(
|
||||
status_code=status.HTTP_400_BAD_REQUEST,
|
||||
detail="Invalid ticket ID format"
|
||||
)
|
||||
|
||||
query = select(Ticket).where(
|
||||
Ticket.id == ticket_uuid,
|
||||
Ticket.tenant_id == current_user.tenant_id,
|
||||
Ticket.created_by == current_user.id
|
||||
)
|
||||
|
||||
result = await db.execute(query)
|
||||
ticket = result.scalars().first()
|
||||
|
||||
if not ticket:
|
||||
raise HTTPException(
|
||||
status_code=status.HTTP_404_NOT_FOUND,
|
||||
detail=f"Ticket {ticket_id} not found"
|
||||
)
|
||||
|
||||
# ✅ CORREGIDO: Usar affected_system_id
|
||||
return {
|
||||
"id": str(ticket.id),
|
||||
"ticket_number": ticket.ticket_number,
|
||||
"subject": ticket.subject,
|
||||
"description": ticket.description,
|
||||
"status": ticket.status.value,
|
||||
"priority": ticket.priority.value,
|
||||
"category_id": str(ticket.category_id) if ticket.category_id else None,
|
||||
"affected_system_id": str(ticket.affected_system_id) if ticket.affected_system_id else None, # ✅ CORREGIDO
|
||||
"created_by": str(ticket.created_by),
|
||||
"assigned_to": str(ticket.assigned_to) if ticket.assigned_to else None,
|
||||
"created_at": ticket.created_at,
|
||||
"updated_at": ticket.updated_at
|
||||
}
|
||||
|
||||
|
||||
@router.patch("/{ticket_id}", response_model=TicketResponse)
|
||||
async def update_ticket(
|
||||
ticket_id: str,
|
||||
ticket_update: TicketUpdate,
|
||||
db: AsyncSession = Depends(get_db),
|
||||
current_user: User = Depends(get_current_user)
|
||||
):
|
||||
"""
|
||||
Actualizar un ticket
|
||||
"""
|
||||
try:
|
||||
ticket_uuid = uuid.UUID(ticket_id)
|
||||
except ValueError:
|
||||
raise HTTPException(
|
||||
status_code=status.HTTP_400_BAD_REQUEST,
|
||||
detail="Invalid ticket ID format"
|
||||
)
|
||||
|
||||
query = select(Ticket).where(
|
||||
Ticket.id == ticket_uuid,
|
||||
Ticket.tenant_id == current_user.tenant_id,
|
||||
Ticket.created_by == current_user.id
|
||||
)
|
||||
|
||||
result = await db.execute(query)
|
||||
db_ticket = result.scalars().first()
|
||||
|
||||
if not db_ticket:
|
||||
raise HTTPException(
|
||||
status_code=status.HTTP_404_NOT_FOUND,
|
||||
detail=f"Ticket {ticket_id} not found"
|
||||
)
|
||||
|
||||
try:
|
||||
update_data = ticket_update.dict(exclude_unset=True)
|
||||
|
||||
for field, value in update_data.items():
|
||||
if field == "status" and value:
|
||||
setattr(db_ticket, field, TicketStatus[value.upper()])
|
||||
elif field == "priority" and value:
|
||||
setattr(db_ticket, field, TicketPriority[value.upper()])
|
||||
elif field == "assigned_to" and value:
|
||||
setattr(db_ticket, field, uuid.UUID(value))
|
||||
else:
|
||||
setattr(db_ticket, field, value)
|
||||
|
||||
db_ticket.updated_at = datetime.utcnow()
|
||||
|
||||
await db.commit()
|
||||
await db.refresh(db_ticket)
|
||||
|
||||
# ✅ CORREGIDO: Usar affected_system_id
|
||||
return {
|
||||
"id": str(db_ticket.id),
|
||||
"ticket_number": db_ticket.ticket_number,
|
||||
"subject": db_ticket.subject,
|
||||
"description": db_ticket.description,
|
||||
"status": db_ticket.status.value,
|
||||
"priority": db_ticket.priority.value,
|
||||
"category_id": str(db_ticket.category_id) if db_ticket.category_id else None,
|
||||
"affected_system_id": str(db_ticket.affected_system_id) if db_ticket.affected_system_id else None, # ✅ CORREGIDO
|
||||
"created_by": str(db_ticket.created_by),
|
||||
"assigned_to": str(db_ticket.assigned_to) if db_ticket.assigned_to else None,
|
||||
"created_at": db_ticket.created_at,
|
||||
"updated_at": db_ticket.updated_at
|
||||
}
|
||||
|
||||
except Exception as e:
|
||||
await db.rollback()
|
||||
raise HTTPException(
|
||||
status_code=status.HTTP_400_BAD_REQUEST,
|
||||
detail=f"Error updating ticket: {str(e)}"
|
||||
)
|
||||
|
||||
|
||||
@router.patch("/{ticket_id}/close", response_model=TicketResponse)
|
||||
async def close_ticket(
|
||||
ticket_id: str,
|
||||
close_request: TicketCloseRequest,
|
||||
db: AsyncSession = Depends(get_db),
|
||||
current_user: User = Depends(get_current_user)
|
||||
):
|
||||
"""
|
||||
Cerrar un ticket
|
||||
"""
|
||||
try:
|
||||
ticket_uuid = uuid.UUID(ticket_id)
|
||||
except ValueError:
|
||||
raise HTTPException(
|
||||
status_code=status.HTTP_400_BAD_REQUEST,
|
||||
detail="Invalid ticket ID format"
|
||||
)
|
||||
|
||||
query = select(Ticket).where(
|
||||
Ticket.id == ticket_uuid,
|
||||
Ticket.tenant_id == current_user.tenant_id,
|
||||
Ticket.created_by == current_user.id
|
||||
)
|
||||
|
||||
result = await db.execute(query)
|
||||
db_ticket = result.scalars().first()
|
||||
|
||||
if not db_ticket:
|
||||
raise HTTPException(
|
||||
status_code=status.HTTP_404_NOT_FOUND,
|
||||
detail=f"Ticket {ticket_id} not found"
|
||||
)
|
||||
|
||||
try:
|
||||
db_ticket.status = TicketStatus.CLOSED
|
||||
db_ticket.updated_at = datetime.utcnow()
|
||||
|
||||
await db.commit()
|
||||
await db.refresh(db_ticket)
|
||||
|
||||
# ✅ CORREGIDO: Usar affected_system_id
|
||||
return {
|
||||
"id": str(db_ticket.id),
|
||||
"ticket_number": db_ticket.ticket_number,
|
||||
"subject": db_ticket.subject,
|
||||
"description": db_ticket.description,
|
||||
"status": db_ticket.status.value,
|
||||
"priority": db_ticket.priority.value,
|
||||
"category_id": str(db_ticket.category_id) if db_ticket.category_id else None,
|
||||
"affected_system_id": str(db_ticket.affected_system_id) if db_ticket.affected_system_id else None, # ✅ CORREGIDO
|
||||
"created_by": str(db_ticket.created_by),
|
||||
"assigned_to": str(db_ticket.assigned_to) if db_ticket.assigned_to else None,
|
||||
"created_at": db_ticket.created_at,
|
||||
"updated_at": db_ticket.updated_at
|
||||
}
|
||||
|
||||
except Exception as e:
|
||||
await db.rollback()
|
||||
raise HTTPException(
|
||||
status_code=status.HTTP_400_BAD_REQUEST,
|
||||
detail=f"Error closing ticket: {str(e)}"
|
||||
)
|
||||
|
||||
|
||||
# ===================================
|
||||
# COMMENT ENDPOINTS (placeholder)
|
||||
# ===================================
|
||||
|
||||
@router.get("/{ticket_id}/comments")
|
||||
async def get_ticket_comments(
|
||||
ticket_id: str,
|
||||
db: AsyncSession = Depends(get_db),
|
||||
current_user: User = Depends(get_current_user)
|
||||
):
|
||||
"""
|
||||
Obtener comentarios de un ticket
|
||||
"""
|
||||
return []
|
||||
|
||||
|
||||
@router.post("/{ticket_id}/comments", status_code=status.HTTP_201_CREATED)
|
||||
async def create_comment(
|
||||
ticket_id: str,
|
||||
db: AsyncSession = Depends(get_db),
|
||||
current_user: User = Depends(get_current_user)
|
||||
):
|
||||
"""
|
||||
Agregar un comentario a un ticket
|
||||
"""
|
||||
raise HTTPException(
|
||||
status_code=status.HTTP_501_NOT_IMPLEMENTED,
|
||||
detail="Comments not yet implemented"
|
||||
)
|
||||
|
||||
|
||||
# ===================================
|
||||
# ATTACHMENT ENDPOINTS (placeholder)
|
||||
# ===================================
|
||||
|
||||
@router.get("/{ticket_id}/attachments")
|
||||
async def get_ticket_attachments(
|
||||
ticket_id: str,
|
||||
db: AsyncSession = Depends(get_db),
|
||||
current_user: User = Depends(get_current_user)
|
||||
):
|
||||
"""
|
||||
Obtener adjuntos de un ticket
|
||||
"""
|
||||
return []
|
||||
|
||||
|
||||
@router.post("/{ticket_id}/attachments", status_code=status.HTTP_201_CREATED)
|
||||
async def upload_attachment(
|
||||
ticket_id: str,
|
||||
file: UploadFile = File(...),
|
||||
db: AsyncSession = Depends(get_db),
|
||||
current_user: User = Depends(get_current_user)
|
||||
):
|
||||
"""
|
||||
Subir un archivo adjunto a un ticket
|
||||
"""
|
||||
raise HTTPException(
|
||||
status_code=status.HTTP_501_NOT_IMPLEMENTED,
|
||||
detail="File uploads not yet implemented"
|
||||
)
|
||||
@@ -21,6 +21,7 @@ from app.models.system import System
|
||||
from app.models.category import Category
|
||||
from app.models.user import User
|
||||
from app.models.ticket import Ticket
|
||||
from app.models.comment import TicketComment
|
||||
|
||||
from app.core.logging import setup_logging
|
||||
from app.api.v1.router import api_router
|
||||
|
||||
69
backend/app/models/comment.py
Normal file
69
backend/app/models/comment.py
Normal file
@@ -0,0 +1,69 @@
|
||||
"""
|
||||
Comment Model - ServiceManagerWeb
|
||||
|
||||
Modelo para comentarios en tickets
|
||||
"""
|
||||
|
||||
from sqlalchemy import Column, String, Text, Boolean, ForeignKey, DateTime
|
||||
from sqlalchemy.dialects.postgresql import UUID
|
||||
from sqlalchemy.orm import Mapped, mapped_column, relationship
|
||||
from datetime import datetime
|
||||
import uuid
|
||||
|
||||
from app.core.database import Base
|
||||
|
||||
|
||||
class TicketComment(Base):
|
||||
"""Comentarios en tickets."""
|
||||
|
||||
__tablename__ = "ticket_comments"
|
||||
|
||||
# Columnas
|
||||
id: Mapped[uuid.UUID] = mapped_column(
|
||||
UUID(as_uuid=True),
|
||||
primary_key=True,
|
||||
default=uuid.uuid4
|
||||
)
|
||||
|
||||
ticket_id: Mapped[uuid.UUID] = mapped_column(
|
||||
UUID(as_uuid=True),
|
||||
ForeignKey("tickets.id", ondelete="CASCADE"),
|
||||
nullable=False,
|
||||
index=True
|
||||
)
|
||||
|
||||
author_id: Mapped[uuid.UUID] = mapped_column(
|
||||
UUID(as_uuid=True),
|
||||
ForeignKey("users.id"),
|
||||
nullable=False,
|
||||
index=True
|
||||
)
|
||||
|
||||
content: Mapped[str] = mapped_column(Text, nullable=False)
|
||||
|
||||
is_internal: Mapped[bool] = mapped_column(
|
||||
Boolean,
|
||||
default=False,
|
||||
nullable=False
|
||||
)
|
||||
|
||||
created_at: Mapped[datetime] = mapped_column(
|
||||
DateTime(timezone=True),
|
||||
default=datetime.utcnow,
|
||||
nullable=False,
|
||||
index=True
|
||||
)
|
||||
|
||||
updated_at: Mapped[datetime] = mapped_column(
|
||||
DateTime(timezone=True),
|
||||
default=datetime.utcnow,
|
||||
onupdate=datetime.utcnow,
|
||||
nullable=False
|
||||
)
|
||||
|
||||
# Relationships
|
||||
ticket: Mapped["Ticket"] = relationship("Ticket", back_populates="comments")
|
||||
author: Mapped["User"] = relationship("User")
|
||||
|
||||
def __repr__(self) -> str:
|
||||
return f"<TicketComment {self.id} by {self.author_id}>"
|
||||
@@ -120,6 +120,12 @@ class Ticket(Base):
|
||||
back_populates="assigned_tickets"
|
||||
)
|
||||
|
||||
comments: Mapped[list["TicketComment"]] = relationship(
|
||||
"TicketComment",
|
||||
back_populates="ticket",
|
||||
cascade="all, delete-orphan"
|
||||
)
|
||||
|
||||
# ✅ AÑADIDOS: Constraints según schema.sql
|
||||
__table_args__ = (
|
||||
UniqueConstraint('tenant_id', 'ticket_number', name='uq_tickets_tenant_number'),
|
||||
|
||||
@@ -48,7 +48,7 @@ class User(Base):
|
||||
|
||||
# Autenticación
|
||||
password_hash: Mapped[str] = mapped_column(String(255), nullable=False)
|
||||
role: Mapped[UserRole] = mapped_column(ENUM(UserRole), nullable=False)
|
||||
role: Mapped[UserRole] = mapped_column(ENUM(UserRole, name="user_role_enum"), nullable=False)
|
||||
|
||||
# 2FA (opcional para staff interno)
|
||||
totp_secret: Mapped[Optional[str]] = mapped_column(String(32))
|
||||
|
||||
@@ -23,12 +23,13 @@ export interface Ticket {
|
||||
export interface TicketComment {
|
||||
id: string;
|
||||
ticket_id: string;
|
||||
user_id: string;
|
||||
user_name: string;
|
||||
user_role: string;
|
||||
author_id: string;
|
||||
author_name: string;
|
||||
author_role: string;
|
||||
content: string;
|
||||
is_internal: boolean;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface TicketAttachment {
|
||||
@@ -160,6 +161,17 @@ function createTicketsStore() {
|
||||
}));
|
||||
}
|
||||
},
|
||||
// Reload only comments silently (for polling)
|
||||
reloadComments: async (ticketId: string) => {
|
||||
try {
|
||||
const comments = await apiCall(`/tickets/${ticketId}/comments`);
|
||||
update((state: TicketsState) => ({ ...state, comments }));
|
||||
} catch (error) {
|
||||
// Silent fail - no mostrar error en polling
|
||||
console.error('Error reloading comments:', error);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// Create new ticket
|
||||
createTicket: async (ticket: CreateTicketRequest) => {
|
||||
|
||||
@@ -14,6 +14,16 @@
|
||||
let closeResolution = '';
|
||||
let fileInput: HTMLInputElement;
|
||||
let isUploading = false;
|
||||
let pollingInterval: any = null;
|
||||
|
||||
async function loadComments() {
|
||||
try {
|
||||
await tickets.reloadComments(ticketId);
|
||||
} catch (error) {
|
||||
// No mostrar error en polling silencioso
|
||||
console.error('Error recargando comentarios:', error);
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
// Redirect if not authenticated
|
||||
@@ -25,7 +35,19 @@
|
||||
ticketId = $page.params.id;
|
||||
if (ticketId) {
|
||||
tickets.loadTicket(ticketId);
|
||||
|
||||
// Polling cada 3 segundos
|
||||
pollingInterval = setInterval(() => {
|
||||
loadComments();
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
// Cleanup cuando se desmonte el componente
|
||||
return () => {
|
||||
if (pollingInterval) {
|
||||
clearInterval(pollingInterval);
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
// Format date
|
||||
@@ -287,16 +309,17 @@
|
||||
{:else}
|
||||
<div class="space-y-4">
|
||||
{#each $tickets.comments as comment}
|
||||
{console.log('Comment:', comment)}
|
||||
<div class="flex space-x-3">
|
||||
<div class="w-8 h-8 bg-primary-100 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-primary-600 text-xs font-medium">
|
||||
{comment.user_name.split(' ').map(n => n[0]).join('')}
|
||||
{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.user_name}
|
||||
{comment.author_name}
|
||||
</span>
|
||||
<span class="text-xs text-gray-500">
|
||||
{formatDate(comment.created_at)}
|
||||
|
||||
@@ -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,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcuanMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvYXBwXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ZpbGVuYW1lID0gXCIvYXBwL3ZpdGUuY29uZmlnLmpzXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ltcG9ydF9tZXRhX3VybCA9IFwiZmlsZTovLy9hcHAvdml0ZS5jb25maWcuanNcIjtpbXBvcnQgeyBzdmVsdGVraXQgfSBmcm9tICdAc3ZlbHRlanMva2l0L3ZpdGUnO1xyXG5pbXBvcnQgeyBkZWZpbmVDb25maWcgfSBmcm9tICd2aXRlJztcclxuXHJcbmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbmZpZyh7XHJcblx0cGx1Z2luczogW3N2ZWx0ZWtpdCgpXSxcclxuXHRzZXJ2ZXI6IHtcclxuXHRcdHBvcnQ6IDMwMDAsXHJcblx0XHRob3N0OiAnMC4wLjAuMCcsXHJcblx0XHRwcm94eToge1xyXG5cdFx0XHQnL2FwaSc6IHtcclxuXHRcdFx0XHR0YXJnZXQ6ICdodHRwOi8vc2VydmljZW1hbmFnZXItYmFja2VuZDo4MDAwJyxcclxuXHRcdFx0XHRjaGFuZ2VPcmlnaW46IHRydWUsXHJcblx0XHRcdFx0cmV3cml0ZTogKHBhdGgpID0+IHBhdGgucmVwbGFjZSgvXlxcL2FwaS8sICcnKVxyXG5cdFx0XHR9XHJcblx0XHR9XHJcblx0fSxcclxuXHRwcmV2aWV3OiB7XHJcblx0XHRwb3J0OiAzMDAwLFxyXG5cdFx0aG9zdDogJzAuMC4wLjAnXHJcblx0fSxcclxuXHRidWlsZDoge1xyXG5cdFx0dGFyZ2V0OiAnZXNuZXh0J1xyXG5cdH1cclxufSk7Il0sCiAgIm1hcHBpbmdzIjogIjtBQUE4TCxTQUFTLGlCQUFpQjtBQUN4TixTQUFTLG9CQUFvQjtBQUU3QixJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUMzQixTQUFTLENBQUMsVUFBVSxDQUFDO0FBQUEsRUFDckIsUUFBUTtBQUFBLElBQ1AsTUFBTTtBQUFBLElBQ04sTUFBTTtBQUFBLElBQ04sT0FBTztBQUFBLE1BQ04sUUFBUTtBQUFBLFFBQ1AsUUFBUTtBQUFBLFFBQ1IsY0FBYztBQUFBLFFBQ2QsU0FBUyxDQUFDLFNBQVMsS0FBSyxRQUFRLFVBQVUsRUFBRTtBQUFBLE1BQzdDO0FBQUEsSUFDRDtBQUFBLEVBQ0Q7QUFBQSxFQUNBLFNBQVM7QUFBQSxJQUNSLE1BQU07QUFBQSxJQUNOLE1BQU07QUFBQSxFQUNQO0FBQUEsRUFDQSxPQUFPO0FBQUEsSUFDTixRQUFRO0FBQUEsRUFDVDtBQUNELENBQUM7IiwKICAibmFtZXMiOiBbXQp9Cg==
|
||||
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=
|
||||
BIN
temp_response.txt
Normal file
BIN
temp_response.txt
Normal file
Binary file not shown.
Reference in New Issue
Block a user