mirror of
https://github.com/itflow-org/itflow
synced 2026-03-27 15:55:37 +00:00
UI/UX Updates to the Ticket Details Header
This commit is contained in:
johnnyq
226
ticket.php
226
ticket.php
@@ -331,16 +331,100 @@ if (isset($_GET['ticket_id'])) {
|
|||||||
</li>
|
</li>
|
||||||
<li class="breadcrumb-item active">Ticket Details</li>
|
<li class="breadcrumb-item active">Ticket Details</li>
|
||||||
</ol>
|
</ol>
|
||||||
<div class="card card-body">
|
|
||||||
|
<div class="card">
|
||||||
|
|
||||||
|
<div class="card-header">
|
||||||
|
|
||||||
|
<div class="card-title">
|
||||||
|
<i class="fa fa-2x fa-fw fa fa-life-ring text-secondary mr-2"></i>
|
||||||
|
<span class="h3">
|
||||||
|
<?php echo "$ticket_prefix$ticket_number"; ?>
|
||||||
|
<span class='badge badge-pill text-light ml-2' style="background-color: <?php echo $ticket_status_color; ?>">
|
||||||
|
<?php echo $ticket_status_name; ?>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card-tools">
|
||||||
|
<div class="btn-group float-right d-print-none">
|
||||||
|
|
||||||
|
<?php if ($config_module_enable_accounting && $ticket_billable == 1 && empty($invoice_id)) { ?>
|
||||||
|
<a href="#" class="btn btn-info btn-sm" href="#" data-toggle="modal" data-target="#addInvoiceFromTicketModal">
|
||||||
|
<i class="fas fa-fw fa-file-invoice mr-2"></i>Invoice
|
||||||
|
</a>
|
||||||
|
<?php }
|
||||||
|
|
||||||
|
if (empty($ticket_closed_at)) { ?>
|
||||||
|
|
||||||
|
<?php if (!empty($ticket_resolved_at)) { ?>
|
||||||
|
<a href="post.php?reopen_ticket=<?php echo $ticket_id; ?>" class="btn btn-secondary btn-sm">
|
||||||
|
<i class="fas fa-fw fa-redo text-white"></i> Reopen
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<?php } ?>
|
||||||
|
|
||||||
|
<?php if (empty($ticket_resolved_at) && $task_count == $completed_task_count) { ?>
|
||||||
|
<a href="post.php?resolve_ticket=<?php echo $ticket_id; ?>&csrf_token=<?php echo $_SESSION['csrf_token'] ?>" class="btn btn-dark btn-sm confirm-link" id="ticket_close">
|
||||||
|
<i class="fas fa-fw fa-check mr-2"></i> Resolve
|
||||||
|
</a>
|
||||||
|
<?php } ?>
|
||||||
|
|
||||||
|
<?php if (!empty($ticket_resolved_at) && $task_count == $completed_task_count) { ?>
|
||||||
|
<a href="post.php?close_ticket=<?php echo $ticket_id; ?>&csrf_token=<?php echo $_SESSION['csrf_token'] ?>" class="btn btn-dark btn-sm confirm-link" id="ticket_close">
|
||||||
|
<i class="fas fa-fw fa-gavel mr-2"></i> Close
|
||||||
|
</a>
|
||||||
|
<?php } ?>
|
||||||
|
|
||||||
|
<div class="dropdown dropleft text-center ml-3">
|
||||||
|
<button class="btn btn-secondary btn-sm" type="button" id="dropdownMenuButton" data-toggle="dropdown">
|
||||||
|
<i class="fas fa-fw fa-ellipsis-v"></i>
|
||||||
|
</button>
|
||||||
|
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
||||||
|
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#editTicketModal<?php echo $ticket_id; ?>">
|
||||||
|
<i class="fas fa-fw fa-edit mr-2"></i>Edit
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#mergeTicketModal<?php echo $ticket_id; ?>">
|
||||||
|
<i class="fas fa-fw fa-clone mr-2"></i>Merge
|
||||||
|
</a>
|
||||||
|
<?php if (empty($ticket_closed_at)) { ?>
|
||||||
|
<div class="dropdown-divider"></div>
|
||||||
|
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#editTicketContactModal<?php echo $ticket_id; ?>">
|
||||||
|
<i class="fa fa-fw fa-user mr-2"></i>Add Contact
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#editTicketAssetModal<?php echo $ticket_id; ?>">
|
||||||
|
<i class="fas fa-fw fa-desktop mr-2"></i>Add Asset
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#editTicketVendorModal<?php echo $ticket_id; ?>">
|
||||||
|
<i class="fas fa-fw fa-building mr-2"></i>Add Vendor
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#addTicketWatcherModal">
|
||||||
|
<i class="fas fa-fw fa-users mr-2"></i>Add Watcher
|
||||||
|
</a>
|
||||||
|
<?php } ?>
|
||||||
|
<div class="dropdown-divider"></div>
|
||||||
|
<a class="dropdown-item" href="#" data-toggle="modal" id="clientChangeTicketModalLoad" data-target="#clientChangeTicketModal">
|
||||||
|
<i class="fas fa-fw fa-people-carry mr-2"></i>Change Client
|
||||||
|
</a>
|
||||||
|
<?php if ($session_user_role == 3) { ?>
|
||||||
|
<div class="dropdown-divider"></div>
|
||||||
|
<a class="dropdown-item text-danger text-bold confirm-link" href="post.php?delete_ticket=<?php echo $ticket_id; ?>&csrf_token=<?php echo $_SESSION['csrf_token'] ?>">
|
||||||
|
<i class="fas fa-fw fa-trash mr-2"></i>Delete
|
||||||
|
</a>
|
||||||
|
<?php } ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<?php } ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div> <!-- Card Header -->
|
||||||
|
|
||||||
|
<div class="card-body">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-sm-3">
|
<div class="col-sm-4">
|
||||||
<div class="media">
|
<h5><?php echo $client_name; ?></h5>
|
||||||
<i class="fa fa-fw fa-2x fa-life-ring text-secondary mr-2"></i>
|
<div>
|
||||||
<div class="media-body">
|
|
||||||
<h3 class="mb-0"><?php echo "$ticket_prefix$ticket_number"; ?><span class='badge badge-pill text-light ml-2' style="background-color: <?php echo $ticket_status_color; ?>"><?php echo $ticket_status_name; ?></span>
|
|
||||||
</h3>
|
|
||||||
<div><small class="text-secondary"><?php echo $ticket_subject; ?></small></div>
|
|
||||||
<div class="mt-1">
|
|
||||||
<i class="fa fa-fw fa-calendar text-secondary mr-2"></i><?php echo $ticket_created_at; ?>
|
<i class="fa fa-fw fa-calendar text-secondary mr-2"></i><?php echo $ticket_created_at; ?>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-1">
|
<div class="mt-1">
|
||||||
@@ -381,14 +465,8 @@ if (isset($_GET['ticket_id'])) {
|
|||||||
<?php } ?>
|
<?php } ?>
|
||||||
<!-- END Ticket closure info -->
|
<!-- END Ticket closure info -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-sm-3">
|
<div class="col-sm-4">
|
||||||
<div class="media">
|
|
||||||
<i class="fa fa-fw fa-2x fa-users text-secondary mr-2"></i>
|
|
||||||
<div class="media-body">
|
|
||||||
<h3 class="mb-0"><?php echo $client_name; ?></h3>
|
|
||||||
<div>
|
<div>
|
||||||
<i class="fa fa-fw fa-thermometer-half text-secondary mr-2"></i><a href="#" data-toggle="modal" data-target="#editTicketPriorityModal<?php echo $ticket_id; ?>"><?php echo $ticket_priority_display; ?></a>
|
<i class="fa fa-fw fa-thermometer-half text-secondary mr-2"></i><a href="#" data-toggle="modal" data-target="#editTicketPriorityModal<?php echo $ticket_id; ?>"><?php echo $ticket_priority_display; ?></a>
|
||||||
</div>
|
</div>
|
||||||
@@ -422,10 +500,8 @@ if (isset($_GET['ticket_id'])) {
|
|||||||
<?php } // End if Invoice ?>
|
<?php } // End if Invoice ?>
|
||||||
<?php } // End If Accounting mod enabled ?>
|
<?php } // End If Accounting mod enabled ?>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-sm-3">
|
<div class="col-sm-4">
|
||||||
<?php if ($task_count) { ?>
|
<?php if ($task_count) { ?>
|
||||||
Tasks Completed<span class="float-right text-bold"><?php echo $tasks_completed_percent; ?>%</span>
|
Tasks Completed<span class="float-right text-bold"><?php echo $tasks_completed_percent; ?>%</span>
|
||||||
<div class="progress mt-2" style="height: 20px;">
|
<div class="progress mt-2" style="height: 20px;">
|
||||||
@@ -454,95 +530,17 @@ if (isset($_GET['ticket_id'])) {
|
|||||||
<?php } ?>
|
<?php } ?>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-sm-3">
|
|
||||||
|
|
||||||
<div class="btn-group float-right d-print-none">
|
|
||||||
|
|
||||||
<?php if (empty($ticket_closed_at)) { ?>
|
|
||||||
<div class="dropdown dropdown text-center mr-3">
|
|
||||||
<button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown">
|
|
||||||
<i class="fas fa-fw fa-plus mr-2"></i>Add
|
|
||||||
</button>
|
|
||||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
|
||||||
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#editTicketContactModal<?php echo $ticket_id; ?>">
|
|
||||||
<i class="fa fa-fw fa-user mr-2"></i>Add Contact
|
|
||||||
</a>
|
|
||||||
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#editTicketAssetModal<?php echo $ticket_id; ?>">
|
|
||||||
<i class="fas fa-fw fa-desktop mr-2"></i>Add Asset
|
|
||||||
</a>
|
|
||||||
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#editTicketVendorModal<?php echo $ticket_id; ?>">
|
|
||||||
<i class="fas fa-fw fa-building mr-2"></i>Add Vendor
|
|
||||||
</a>
|
|
||||||
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#addTicketWatcherModal">
|
|
||||||
<i class="fas fa-fw fa-users mr-2"></i>Add Watcher
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<?php } ?>
|
|
||||||
|
|
||||||
<?php if ($config_module_enable_accounting && $ticket_billable == 1 && empty($invoice_id)) { ?>
|
|
||||||
<a href="#" class="btn btn-info btn-sm" href="#" data-toggle="modal" data-target="#addInvoiceFromTicketModal">
|
|
||||||
<i class="fas fa-fw fa-file-invoice mr-2"></i>Invoice
|
|
||||||
</a>
|
|
||||||
<?php }
|
|
||||||
|
|
||||||
if (empty($ticket_closed_at)) { ?>
|
|
||||||
|
|
||||||
<?php if (!empty($ticket_resolved_at)) { ?>
|
|
||||||
<a href="post.php?reopen_ticket=<?php echo $ticket_id; ?>" class="btn btn-secondary btn-sm">
|
|
||||||
<i class="fas fa-fw fa-redo text-white"></i> Reopen
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<?php } ?>
|
|
||||||
|
|
||||||
<?php if (empty($ticket_resolved_at) && $task_count == $completed_task_count) { ?>
|
|
||||||
<a href="post.php?resolve_ticket=<?php echo $ticket_id; ?>&csrf_token=<?php echo $_SESSION['csrf_token'] ?>" class="btn btn-dark btn-sm confirm-link" id="ticket_close">
|
|
||||||
<i class="fas fa-fw fa-check mr-2"></i> Resolve
|
|
||||||
</a>
|
|
||||||
<?php } ?>
|
|
||||||
|
|
||||||
<?php if (!empty($ticket_resolved_at) && $task_count == $completed_task_count) { ?>
|
|
||||||
<a href="post.php?close_ticket=<?php echo $ticket_id; ?>&csrf_token=<?php echo $_SESSION['csrf_token'] ?>" class="btn btn-dark btn-sm confirm-link" id="ticket_close">
|
|
||||||
<i class="fas fa-fw fa-gavel mr-2"></i> Close
|
|
||||||
</a>
|
|
||||||
<?php } ?>
|
|
||||||
|
|
||||||
<div class="dropdown dropleft text-center ml-3">
|
|
||||||
<button class="btn btn-secondary btn-sm" type="button" id="dropdownMenuButton" data-toggle="dropdown">
|
|
||||||
<i class="fas fa-fw fa-ellipsis-v"></i>
|
|
||||||
</button>
|
|
||||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
|
||||||
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#editTicketModal<?php echo $ticket_id; ?>">
|
|
||||||
<i class="fas fa-fw fa-edit mr-2"></i>Edit
|
|
||||||
</a>
|
|
||||||
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#mergeTicketModal<?php echo $ticket_id; ?>">
|
|
||||||
<i class="fas fa-fw fa-clone mr-2"></i>Merge
|
|
||||||
</a>
|
|
||||||
<div class="dropdown-divider"></div>
|
|
||||||
<a class="dropdown-item" href="#" data-toggle="modal" id="clientChangeTicketModalLoad" data-target="#clientChangeTicketModal">
|
|
||||||
<i class="fas fa-fw fa-people-carry mr-2"></i>Change Client
|
|
||||||
</a>
|
|
||||||
<?php if ($session_user_role == 3) { ?>
|
|
||||||
<div class="dropdown-divider"></div>
|
|
||||||
<a class="dropdown-item text-danger text-bold confirm-link" href="post.php?delete_ticket=<?php echo $ticket_id; ?>&csrf_token=<?php echo $_SESSION['csrf_token'] ?>">
|
|
||||||
<i class="fas fa-fw fa-trash mr-2"></i>Delete
|
|
||||||
</a>
|
|
||||||
<?php } ?>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<?php } ?>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<span class="text-info ml-5" id="ticket_collision_viewing"></span>
|
<span class="text-info ml-5" id="ticket_collision_viewing"></span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
|
||||||
<div class="col-md-9">
|
<div class="col-md-9">
|
||||||
|
|
||||||
<div class="card card-outline card-primary mb-3">
|
<div class="card card-dark mb-3">
|
||||||
|
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<h3 class="card-title text-bold"><?php echo $ticket_subject; ?></h3>
|
<h3 class="card-title text-bold"><?php echo $ticket_subject; ?></h3>
|
||||||
@@ -665,7 +663,9 @@ if (isset($_GET['ticket_id'])) {
|
|||||||
$ticket_reply = $purifier->purify($row['ticket_reply']);
|
$ticket_reply = $purifier->purify($row['ticket_reply']);
|
||||||
$ticket_reply_type = nullable_htmlentities($row['ticket_reply_type']);
|
$ticket_reply_type = nullable_htmlentities($row['ticket_reply_type']);
|
||||||
$ticket_reply_created_at = nullable_htmlentities($row['ticket_reply_created_at']);
|
$ticket_reply_created_at = nullable_htmlentities($row['ticket_reply_created_at']);
|
||||||
|
$ticket_reply_created_at_ago = timeAgo($row['ticket_reply_created_at']);
|
||||||
$ticket_reply_updated_at = nullable_htmlentities($row['ticket_reply_updated_at']);
|
$ticket_reply_updated_at = nullable_htmlentities($row['ticket_reply_updated_at']);
|
||||||
|
$ticket_reply_updated_at_ago = timeAgo($row['ticket_reply_updated_at']);
|
||||||
$ticket_reply_by = intval($row['ticket_reply_by']);
|
$ticket_reply_by = intval($row['ticket_reply_by']);
|
||||||
|
|
||||||
if ($ticket_reply_type == "Client") {
|
if ($ticket_reply_type == "Client") {
|
||||||
@@ -691,11 +691,11 @@ if (isset($_GET['ticket_id'])) {
|
|||||||
|
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<div class="card card-outline <?php if ($ticket_reply_type == 'Internal') { echo "card-dark";
|
<div class="card border-left border-<?php if ($ticket_reply_type == 'Internal') { echo "dark";
|
||||||
} elseif ($ticket_reply_type == 'Client') {
|
} elseif ($ticket_reply_type == 'Client') {
|
||||||
echo "card-warning";
|
echo "warning";
|
||||||
} else {
|
} else {
|
||||||
echo "card-info";
|
echo "info";
|
||||||
} ?> mb-3">
|
} ?> mb-3">
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<h3 class="card-title">
|
<h3 class="card-title">
|
||||||
@@ -712,9 +712,16 @@ if (isset($_GET['ticket_id'])) {
|
|||||||
<div class="media-body">
|
<div class="media-body">
|
||||||
<?php echo $ticket_reply_by_display; ?>
|
<?php echo $ticket_reply_by_display; ?>
|
||||||
<div>
|
<div>
|
||||||
<small class="text-muted"><?php echo $ticket_reply_created_at; ?> <?php if (!empty($ticket_reply_updated_at)) {
|
<small class="text-muted">
|
||||||
echo "modified: $ticket_reply_updated_at";
|
<div title="<?php echo $ticket_reply_created_at; ?>">
|
||||||
} ?></small>
|
<?php echo $ticket_reply_created_at_ago; ?>
|
||||||
|
</div>
|
||||||
|
<?php if ($ticket_reply_updated_at) { ?>
|
||||||
|
<div title="<?php echo $ticket_reply_updated_at; ?>">
|
||||||
|
modified: <?php echo $ticket_reply_updated_at_ago; ?>
|
||||||
|
</div>
|
||||||
|
<?php } ?>
|
||||||
|
</small>
|
||||||
</div>
|
</div>
|
||||||
<?php if ($ticket_reply_type !== "Client") { ?>
|
<?php if ($ticket_reply_type !== "Client") { ?>
|
||||||
<div>
|
<div>
|
||||||
@@ -775,7 +782,7 @@ if (isset($_GET['ticket_id'])) {
|
|||||||
|
|
||||||
<!-- Contact card -->
|
<!-- Contact card -->
|
||||||
<?php if ($contact_id) { ?>
|
<?php if ($contact_id) { ?>
|
||||||
<div class="card card-body card-outline card-dark mb-3">
|
<div class="card card-body mb-3">
|
||||||
<h5 class="text-secondary">Contact</h5>
|
<h5 class="text-secondary">Contact</h5>
|
||||||
<div>
|
<div>
|
||||||
<i class="fa fa-fw fa-user text-secondary mr-2"></i><a href="#" data-toggle="modal" data-target="#editTicketContactModal<?php echo $ticket_id; ?>"><strong><?php echo $contact_name; ?></strong>
|
<i class="fa fa-fw fa-user text-secondary mr-2"></i><a href="#" data-toggle="modal" data-target="#editTicketContactModal<?php echo $ticket_id; ?>"><strong><?php echo $contact_name; ?></strong>
|
||||||
@@ -839,8 +846,7 @@ if (isset($_GET['ticket_id'])) {
|
|||||||
|
|
||||||
|
|
||||||
<!-- Tasks Card -->
|
<!-- Tasks Card -->
|
||||||
<div class="card card-body card-outline card-dark">
|
<div class="card card-body">
|
||||||
<h5 class="text-secondary">Tasks</h5>
|
|
||||||
|
|
||||||
<?php if (empty($ticket_closed_at)) { ?>
|
<?php if (empty($ticket_closed_at)) { ?>
|
||||||
<form action="post.php" method="post" autocomplete="off">
|
<form action="post.php" method="post" autocomplete="off">
|
||||||
@@ -849,7 +855,7 @@ if (isset($_GET['ticket_id'])) {
|
|||||||
<div class="input-group input-group-sm">
|
<div class="input-group input-group-sm">
|
||||||
<input type="text" class="form-control" name="name" placeholder="Create Task">
|
<input type="text" class="form-control" name="name" placeholder="Create Task">
|
||||||
<div class="input-group-append">
|
<div class="input-group-append">
|
||||||
<button type="submit" name="add_task" class="btn btn-dark">
|
<button type="submit" name="add_task" class="btn btn-secondary">
|
||||||
<i class="fas fa-check"></i>
|
<i class="fas fa-check"></i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user