Fix Guest Approve Modal Offscreen issue, added guest header and spruced up the UI a bit

This commit is contained in:
johnnyq
2026-08-31 12:22:55 -04:00
parent d9cb0251b0
commit c07c10c610
22 changed files with 134 additions and 75 deletions

View File

@@ -38,7 +38,7 @@ $approval_id = intval($_GET['task_approval_id']);
$url_key = escapeSql($_GET['url_key']);
$task_row = mysqli_fetch_assoc(mysqli_query($mysqli,
"SELECT approval_scope, approval_status, approval_type, task_id, task_name, ticket_details,
"SELECT approval_status, task_id, task_name, ticket_details,
ticket_number, ticket_prefix, ticket_priority, ticket_status_name, ticket_subject FROM task_approvals
LEFT JOIN tasks ON approval_task_id = task_id
LEFT JOIN tickets on task_ticket_id = ticket_id
@@ -57,8 +57,6 @@ if (!$task_row) {
$task_id = intval($task_row['task_id']);
$task_name = escapeHtml($task_row['task_name']);
$approval_scope = escapeHtml($task_row['approval_scope']);
$approval_type = escapeHtml($task_row['approval_type']);
$approval_status = escapeHtml($task_row['approval_status']);
$ticket_prefix = escapeHtml($task_row['ticket_prefix']);
@@ -68,47 +66,101 @@ $ticket_priority = escapeHtml($task_row['ticket_priority']);
$ticket_subject = escapeHtml($task_row['ticket_subject']);
$ticket_details = $purifier->purify($task_row['ticket_details']);
// Same priority colours the agent ticket list uses, so a ticket reads the same
// to the client as it does to the tech looking at it
if ($ticket_priority == "Urgent") {
$ticket_priority_color = "dark";
} elseif ($ticket_priority == "High") {
$ticket_priority_color = "danger";
} elseif ($ticket_priority == "Medium") {
$ticket_priority_color = "warning";
} else {
$ticket_priority_color = "info";
}
$approve_link = "guest_post.php?approve_ticket_task=$task_id&approval_id=$approval_id&approval_url_key=$url_key";
?>
<?php /* The ask comes first. A guest arrives here from a mail link with no
context and exactly one thing to do, so the task being approved and
the button that approves it sit above the fold; the ticket itself is
supporting detail and follows underneath. */ ?>
<div class="card mt-3">
<div class="card-header bg-dark text-center">
<h4 class="mt-1">
Task Approval for Ticket <?= $ticket_prefix, $ticket_number ?>
</h4>
<div class="card-header bg-dark text-center py-3">
<h4 class="mb-0"><i class="fas fa-fw fa-clipboard-check me-2"></i>Task Approval</h4>
</div>
<div class="card-body text-center py-4">
<?php if ($approval_status == 'pending') { ?>
<p class="text-muted mb-2">You have been asked to approve the following task</p>
<?php } ?>
<h4 class="mb-3"><?= ucfirst($task_name) ?></h4>
<p class="text-muted mb-4">
Ticket <span class="text-bold"><?= $ticket_prefix, $ticket_number ?></span> &mdash; <?= $ticket_subject ?>
</p>
<?php if ($approval_status == 'pending') { ?>
<?php /* d-grid below sm so the button spans the width on a phone,
which is where a mailed approval link is usually opened */ ?>
<div class="d-grid gap-2 d-sm-block">
<a href="<?= $approve_link ?>" class="btn btn-success btn-lg confirm-link"
data-confirm-title="Approve this task?"
data-confirm-text="<?= ucfirst($task_name) ?>"
data-confirm-button="Yes, approve">
<i class="fas fa-fw fa-check me-2"></i>Approve task
</a>
</div>
<small class="text-muted d-block mt-3">Not expecting this? Get in touch using the details below.</small>
<?php } elseif ($approval_status == 'approved') { ?>
<?php /* guest_post.php redirects back here after approving, so this
is the confirmation screen for every successful approval -
not just an already-done state */ ?>
<div class="alert alert-success d-inline-block mb-0">
<i class="fas fa-fw fa-check-circle me-2"></i><span class="text-bold">Approved</span> &mdash; nothing further is needed.
</div>
<?php } else { ?>
<div class="alert alert-danger d-inline-block mb-0">
<i class="fas fa-fw fa-times-circle me-2"></i><span class="text-bold">Declined</span> &mdash; this task was not approved.
</div>
<?php } ?>
</div>
</div>
<div class="card">
<div class="card-header">
<h5 class="card-title mt-2">Ticket details</h5>
<div class="card-tools">
<span class="p-2 badge rounded-pill text-bg-secondary"><?= $ticket_status ?></span>
<span class="p-2 badge rounded-pill text-bg-<?= $ticket_priority_color ?>"><?= $ticket_priority ?></span>
</div>
</div>
<div class="card-body prettyContent">
<h5><strong>Subject:</strong> <?= $ticket_subject ?></h5>
<p>
<strong>State:</strong> <?= $ticket_status ?>
<br>
<strong>Priority:</strong> <?= $ticket_priority ?>
<br>
</p>
<?= $ticket_details ?>
<hr>
<h5>Task Approval</h5>
<p>
<strong>Task Name: </strong><?= ucfirst($task_name); ?>
<br>
<strong>Scope/Type:</strong> <?= ucfirst($approval_scope) . " - " . ucfirst($approval_type)?>
<br>
<strong>Status:</strong> <?= ucfirst($approval_status)?>
<br>
<?php
if ($approval_status == 'pending') { ?>
<strong>Action: </strong><a href="guest_post.php?approve_ticket_task=<?= $task_id ?>&approval_id=<?= $approval_id ?>&approval_url_key=<?= $url_key ?>" class="confirm-link text-bold">Approve Task</a>
<?php } ?>
</p>
</div>
</div>
<hr>
<p class="text-center text-muted my-3">
<i class="fas fa-phone fa-fw me-2"></i><?= $company_phone ?>
<span class="mx-2">|</span>
<i class="fas fa-globe fa-fw me-2"></i><?= $company_website ?>
</p>
<div class="card-footer">
<?= "<i class='fas fa-phone fa-fw me-2'></i>$company_phone | <i class='fas fa-globe fa-fw me-2 ms-2'></i>$company_website" ?>
</div>
<?php /* prettyContent above is inert without this - it is what constrains a
pasted screenshot to the column and styles tables in the ticket body */ ?>
<script src="/js/pretty_content.js"></script>
<?php
require_once $_SERVER['DOCUMENT_ROOT'] . '/includes/footer.php';