James Richie
347 lines
17 KiB
XML
347 lines
17 KiB
XML
<?xml version="1.0" encoding="UTF-8"?>
|
||
|
||
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
|
||
<xsl:output method="html" encoding="utf-8" indent="yes"/>
|
||
|
||
<xsl:param name="VERSION">1.0</xsl:param>
|
||
<xsl:param name="PAGE-TITLE">Support Ticket Summary</xsl:param>
|
||
<xsl:param name="PAGE-NAME">supportTicketSummary</xsl:param>
|
||
|
||
<xsl:template match="/">
|
||
|
||
<script src="js/{$PAGE-NAME}.js?version={$VERSION}"/>
|
||
|
||
<!-- iMessage-ish chat CSS -->
|
||
<style type="text/css">
|
||
.ticket-chat {
|
||
background: #f5f5f7;
|
||
border: 1px solid rgba(0,0,0,.1);
|
||
border-radius: 1rem;
|
||
overflow: hidden;
|
||
}
|
||
.ticket-chat-header {
|
||
background: #fff;
|
||
border-bottom: 1px solid rgba(0,0,0,.08);
|
||
}
|
||
.ticket-chat-body {
|
||
height: 520px;
|
||
overflow-y: auto;
|
||
padding: 1rem;
|
||
}
|
||
.msg-row {
|
||
display: flex;
|
||
gap: .5rem;
|
||
margin-bottom: .75rem;
|
||
align-items: flex-end;
|
||
}
|
||
.msg-row.incoming { justify-content: flex-start; }
|
||
.msg-row.outgoing { justify-content: flex-end; }
|
||
|
||
.msg-avatar {
|
||
width: 34px;
|
||
height: 34px;
|
||
border-radius: 50%;
|
||
object-fit: cover;
|
||
flex: 0 0 34px;
|
||
}
|
||
.msg {
|
||
max-width: 78%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: .25rem;
|
||
}
|
||
.bubble {
|
||
padding: .6rem .75rem;
|
||
border-radius: 1.1rem;
|
||
line-height: 1.25rem;
|
||
word-wrap: break-word;
|
||
box-shadow: 0 1px 0 rgba(0,0,0,.04);
|
||
}
|
||
.incoming .bubble {
|
||
background: #fff;
|
||
color: #111;
|
||
border-bottom-left-radius: .45rem;
|
||
}
|
||
.outgoing .bubble {
|
||
background: #0d6efd;
|
||
color: #fff;
|
||
border-bottom-right-radius: .45rem;
|
||
}
|
||
.msg-meta {
|
||
font-size: .75rem;
|
||
color: #6c757d;
|
||
}
|
||
.outgoing .msg-meta { text-align: right; }
|
||
|
||
.chat-divider {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: .75rem;
|
||
margin: 1.25rem 0;
|
||
color: #6c757d;
|
||
font-size: .75rem;
|
||
}
|
||
.chat-divider:before,
|
||
.chat-divider:after {
|
||
content: "";
|
||
flex: 1;
|
||
height: 1px;
|
||
background: rgba(0,0,0,.10);
|
||
}
|
||
</style>
|
||
|
||
<div class="{$PAGE-NAME}">
|
||
<div class="card">
|
||
<div class="card-header bg-primary text-white p-1 ps-3">
|
||
<i class="bi bi-person me-2" aria-hidden="true"/>
|
||
<xsl:value-of select="$PAGE-TITLE"/>
|
||
</div>
|
||
|
||
<div class="card-body pb-0">
|
||
|
||
<!-- Details -->
|
||
<div class="card card-header rounded p-0 ms-0 me-0 mb-3">
|
||
<div class="card-body p-2">
|
||
<div class="row fs-875 lh-sm">
|
||
<div class="col-lg-6">
|
||
<div class="row">
|
||
<div class="col-3 fw-bold">Category:</div>
|
||
<div class="col-9">
|
||
<xsl:value-of select="//supporttickets/record/supportticket_catagory_verbose"/>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-3 fw-bold">Subject:</div>
|
||
<div class="col-9">
|
||
<xsl:value-of select="//supporttickets/record/supportticket_subject"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-lg-6">
|
||
<div class="row">
|
||
<div class="col-3 fw-bold">Created:</div>
|
||
<div class="col-9">
|
||
<xsl:value-of select="//supporttickets/record/supportticket_created"/>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-3 fw-bold">Created By:</div>
|
||
<div class="col-9">
|
||
<xsl:value-of select="//supporttickets/record/supportticket_creator"/>
|
||
|
|
||
<xsl:value-of select="//user/record/user_client_name"/>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row align-items-baseline mt-1">
|
||
<div class="col-3 fw-bold">Status:</div>
|
||
<div class="col-3">
|
||
<select class="form-select form-select-sm" name="supportticketactive" id="supportticketactive" size="1">
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="mb-2"/>
|
||
|
||
<!-- Action Buttons -->
|
||
<div class="buttons mt-1 mb-1">
|
||
<button type="button" class="btn btn-sm btn-primary me-1 mb-1 btnDone">
|
||
<i class="bi bi-box-arrow-left me-2"/>Done</button>
|
||
<button type="button" class="btn btn-sm btn-primary me-1 mb-1 btnPrint">
|
||
<i class="bi bi-printer me-2"/>Print</button>
|
||
</div>
|
||
|
||
<hr class="mt-1 mb-3"/>
|
||
|
||
<!-- Tabs -->
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<div class="nav nav-tabs" id="nav-tabs" role="tablist">
|
||
<a class="nav-item nav-link active" id="tab-Conversation" data-bs-toggle="tab" href="#pane-Conversation" role="tab" data-tab="Conversation" aria-controls="st-Conversation">
|
||
<i class="bi bi-pen me-1"/>Conversation</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content mb-3" id="tab-content">
|
||
|
||
<!-- Conversation -->
|
||
<div class="tab-pane show active" id="pane-Conversation" role="tabpanel" aria-labelledby="tab-Conversation">
|
||
|
||
<div class="card mb-0 mt-3">
|
||
<div class="card-body pt-2 pb-2">
|
||
|
||
<xsl:choose>
|
||
|
||
<!-- NOTE: you had count(//supporttickets/record) here.
|
||
That’s the ticket itself, not the conversation.
|
||
This checks conversation messages. Change node if needed. -->
|
||
<xsl:when test="count(//supportticketcomments/record) = 0">
|
||
<div class="col fs-6 text-danger fw-bold fst-italic mt-1 mb-1">
|
||
<xsl:text>There are no Conversation....</xsl:text>
|
||
</div>
|
||
</xsl:when>
|
||
|
||
<xsl:otherwise>
|
||
|
||
<!-- Chat container -->
|
||
<div class="ticket-chat">
|
||
|
||
<!-- Optional header inside tab -->
|
||
<div class="ticket-chat-header px-3 py-2">
|
||
<div class="d-flex align-items-center justify-content-between">
|
||
<div class="d-flex align-items-center gap-2">
|
||
<i class="bi bi-chat-dots text-primary fs-5"></i>
|
||
<div>
|
||
<div class="fw-semibold">Conversation</div>
|
||
<div class="small text-muted">
|
||
<xsl:value-of select="//supporttickets/record/supportticket_subject"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="badge bg-primary-subtle text-primary border border-primary-subtle">
|
||
Ticket
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Transcript -->
|
||
<div class="ticket-chat-body">
|
||
|
||
<div class="chat-divider">Messages</div>
|
||
|
||
<!-- Loop messages (oldest -> newest). Adjust sort fields as needed -->
|
||
<xsl:for-each select="//supportticketcomments/record">
|
||
<xsl:sort select="comment_created" data-type="text" order="ascending"/>
|
||
|
||
<!-- Determine incoming/outgoing -->
|
||
<xsl:variable name="isOutgoing">
|
||
<xsl:choose>
|
||
<xsl:when test="comment_creator_type = 'STAFF'">1</xsl:when>
|
||
<xsl:otherwise>0</xsl:otherwise>
|
||
</xsl:choose>
|
||
</xsl:variable>
|
||
|
||
<xsl:choose>
|
||
<!-- OUTGOING (you/support) -->
|
||
<xsl:when test="$isOutgoing = 1">
|
||
<div class="msg-row outgoing">
|
||
<div class="msg">
|
||
<div class="bubble">
|
||
<xsl:value-of select="comment_message"/>
|
||
</div>
|
||
<div class="msg-meta">
|
||
<xsl:text>You • </xsl:text>
|
||
<xsl:value-of select="comment_created_verbose"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</xsl:when>
|
||
|
||
<!-- INCOMING (customer) -->
|
||
<xsl:otherwise>
|
||
<div class="msg-row incoming">
|
||
<!-- You can swap this to a real avatar field if you store it -->
|
||
<img class="msg-avatar" src="assets/img/person/person-f-7.webp" alt="Customer"/>
|
||
<div class="msg">
|
||
<div class="bubble">
|
||
<xsl:value-of select="comment_message"/>
|
||
</div>
|
||
<div class="msg-meta">
|
||
<xsl:value-of select="comment_creator_name"/>
|
||
<xsl:text> • </xsl:text>
|
||
<xsl:value-of select="comment_created_verbose"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</xsl:otherwise>
|
||
</xsl:choose>
|
||
|
||
</xsl:for-each>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</xsl:otherwise>
|
||
|
||
</xsl:choose>
|
||
|
||
<div class="buttons mt-2 mb-1">
|
||
<button type="button" class="btn btn-sm btn-primary mt-2 me-1 mb-1 btnAddComment">
|
||
<i class="bi bi-plus-lg me-2"/>Add Comment</button>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div> <!-- Conversation -->
|
||
</div> <!-- Tab Content -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Form to Print the Support Ticket Summary -->
|
||
<form style="display:inline;" id="PrintSupportTicketSummaryForm" method="post" action="" target="PrintTab">
|
||
<input type="hidden" name="action" value="print"/>
|
||
<input type="hidden" name="report" value="Print_SupportTicketSummary"/>
|
||
<input type="hidden" name="supportticketserial" value=""/>
|
||
</form>
|
||
|
||
</xsl:template>
|
||
|
||
<!-- Template for Dropdowns -->
|
||
<xsl:template name="dropdowns">
|
||
<xsl:param name="dropdown-name"/>
|
||
<xsl:param name="current-value"/>
|
||
|
||
<option value="">Choose...</option>
|
||
|
||
<xsl:for-each select="//dropdowns/record[dropdowntype_name = $dropdown-name]">
|
||
<option value="{dropdown_serial}" data-tokens="{dropdown_value}">
|
||
<xsl:if test="dropdown_serial = $current-value">
|
||
<xsl:attribute name="selected">selected</xsl:attribute>
|
||
</xsl:if>
|
||
<xsl:value-of select="dropdown_value"/>
|
||
</option>
|
||
</xsl:for-each>
|
||
</xsl:template>
|
||
|
||
<!-- Existing template kept as-is -->
|
||
<xsl:template match="supportticketsubscriptions/record">
|
||
<tr class="supportticketsubscription-row hoverable" data-supportticketsubscription-serial="{supportticketsubscription_serial}">
|
||
<td class="subscription_title">
|
||
<xsl:value-of select="concat(subscription_title, '-', subscription_description)"/>
|
||
</td>
|
||
<td class="supportticketsubscription_stop_date_verbose">
|
||
<xsl:value-of select="supportticketsubscription_stop_date_verbose"/>
|
||
</td>
|
||
|
||
<xsl:choose>
|
||
<xsl:when test="supportticketsubscription_status = 'EXPIRED'">
|
||
<td class="supportticketsubscription_status">
|
||
<span class="badge rounded-pill text-bg-danger">
|
||
<xsl:value-of select="supportticketsubscription_status"/>
|
||
</span>
|
||
</td>
|
||
</xsl:when>
|
||
<xsl:otherwise>
|
||
<td class="supportticketsubscription_status">
|
||
<span class="badge text-bg-success">
|
||
<xsl:value-of select="supportticketsubscription_status"/>
|
||
</span>
|
||
</td>
|
||
</xsl:otherwise>
|
||
</xsl:choose>
|
||
</tr>
|
||
</xsl:template>
|
||
|
||
</xsl:stylesheet>
|