{% extends "@UVDeskCoreFramework//Templates//layout.html.twig" %}
{% block title %}{{ 'Tickets'|trans }}{% endblock %}
{% block templateCSS %}
<style>
.uv-dropdown.asset-visibility li input {
z-index: 100;
}
.uv-dropdown.asset-visibility ul li label {
color: #333333;
font-size: 17px;
font-weight: 500;
text-transform: capitalize;
cursor: pointer;
margin: auto;
}
.uv-table td a {
color: #333333;
}
.uv-table.uv-list-view table tbody td.uv-width-100 {
width: 100px !important;
}
.uv-table.uv-list-view td[data-index="agent"] {
white-space: nowrap;
}
.uv-view:not(.uv-stack-view) .uv-table td a {
display: inline-block;
width: 100%;
}
.uv-action-bar-col-lt.uv-width-100 {
width: 100% !important;
}
#quick-view-modal .uv-view {
padding: 0;
overflow-y: visible;
display: inline-block;
position: relative;
}
#quick-view-modal .uv-view .uv-ticket-section {
margin-top: 0;
}
#quick-view-modal .uv-ticket-head {
border-top: 1px solid #d3d3d3;
padding-top: 10px;
padding-bottom: 10px;
}
#quick-view-modal .uv-ticket-strip {
padding-bottom: 0;
}
#quick-view-modal .uv-ticket-strip .uv-btn-tag {
margin-bottom: 0;
}
#quick-view-modal .quick-view-navigation {
position: absolute;
right: 50px;
top: 9px;
}
#quick-view-modal .quick-view-navigation ~ a {
width: calc(100% - 100px);
display: inline-block;
}
#quick-view-modal .uv-btn-tag[disabled="disabled"] {
opacity: .4;
cursor: not-allowed;
border-color: #B1B1AE !important;
}
#quick-view-modal .uv-loader {
transform: scale(0.5);
top: 14px;
right: 60px;
}
tr.unread {
background: #f1f1f1;
}
.uv-table table tbody tr.not-assigned td {
border-bottom: 1px solid #ffcacc;
}
@media screen and (max-width: 500px) {
.uv-action-bar label {
display: inline-block;
}
}
</style>
{% endblock %}
{% block pageContent %}
{# Quick View Popup #}
<div class="uv-pop-up-overlay" id="quick-view-modal">
<div class="uv-pop-up-box uv-pop-up-wide"></div>
</div>
<div class="uv-inner-section">
{# Ticket Sidebar #}
<div class="uv-aside" {% if app.request.cookies and app.request.cookies.get('uv-asideView') %} style="display: none;" {% endif %} >
<div class="uv-aside-default">
<div class="uv-aside-head">
<div class="uv-aside-title">
<h6>{{ 'Tickets'|trans }}</h6>
</div>
<div class="uv-aside-back">
<span onclick="history.length > 1 ? history.go(-1) : window.location = '{{ path("helpdesk_member_dashboard") }}';">{{ 'Back'|trans }}</span>
</div>
</div>
<div class="uv-aside-nav">
<ul>
{# Predefined Label List #}
<ul class="predefined-label-list uv-aside-list">
<li>
<a href="#" class="uv-aside-active">{{ 'All'|trans }} <span class="uv-flag-gray uv-flag-dark">0</span></a>
{# Status ticket count list #}
<ul class="status-list">
<li>
<a href="#" data-id="1" class="uv-aside-nav-active"><span class="name">{{ 'Open'|trans }}</span><span class="uv-flag-gray">0</span></a>
</li>
<li>
<a href="#" data-id="2"><span class="name">{{ 'Pending'|trans }}</span><span class="uv-flag-gray">0</span></a>
</li>
<li>
<a href="#" data-id="6"><span class="name">{{ 'Answered'|trans }}</span><span class="uv-flag-gray">0</span></a>
</li>
<li>
<a href="#" data-id="3"><span class="name">{{ 'Resolved'|trans }}</span><span class="uv-flag-gray">0</span></a>
</li>
<li>
<a href="#" data-id="4"><span class="name">{{ 'Closed'|trans }}</span><span class="uv-flag-gray">0</span></a>
</li>
<li>
<a href="#" data-id="5"><span class="name">{{ 'Spam'|trans }}</span><span class="uv-flag-gray">0</span></a>
</li>
<li>
<a href="#" data-id="7"><span class="name">{{ 'Outsourced IT'|trans }}</span><span class="uv-flag-gray">0</span></a>
</li>
<li>
<a href="#" data-id="8"><span class="name">{{ 'Outsourced Non IT'|trans }}</span><span class="uv-flag-gray">0</span></a>
</li>
<li>
<a href="#" data-id="9"><span class="name">{{ 'On Hold'|trans }}</span><span class="uv-flag-gray">0</span></a>
</li>
<li>
<a href="#" data-id="10"><span class="name">{{ 'To Campus'|trans }}</span><span class="uv-flag-gray">0</span></a>
</li>
<li>
<a href="#" data-id="11"><span class="name">{{ 'Outsourced Printer'|trans }}</span><span class="uv-flag-gray">0</span></a>
</li>
<li>
<a href="#" data-id="12"><span class="name">{{ 'Out-IT In-prog'|trans }}</span><span class="uv-flag-gray">0</span></a>
</li>
<li>
<a href="#" data-id="13"><span class="name">{{ 'DCD'|trans }}</span><span class="uv-flag-gray">0</span></a>
</li>
</ul>
</li>
<li>
<a href="#new">{{ 'New'|trans }} <span class="uv-flag-gray uv-flag-dark">0</span></a>
</li>
<li>
<a href="#unassigned">{{ 'UnAssigned'|trans }} <span class="uv-flag-gray uv-flag-dark">0</span></a>
</li>
<li>
<a href="#notreplied">{{ 'UnAnswered'|trans }} <span class="uv-flag-gray uv-flag-dark">0</span></a>
</li>
<li>
<a href="#mine">{{ 'My Tickets'|trans }} <span class="uv-flag-gray uv-flag-dark">0</span></a>
</li>
<li>
<a href="#starred">{{ 'Starred'|trans }} <span class="uv-flag-gray uv-flag-dark">0</span></a>
</li>
<li>
<a href="#trashed" style="border-bottom: none">{{ 'Trashed'|trans }} <span class="uv-flag-gray uv-flag-dark">0</span></a>
</li>
</ul>
{# Custom Label List #}
<ul class="uv-aside-custom"></ul>
</ul>
</div>
<a class="uv-btn-small add-new-label" href="#"><span class="uv-icon-add"></span> {{ 'Label'|trans }}</a>
</div>
<!-- Label add and edit -->
<div class="uv-add-edit-label" style="display: block"></div>
</div>
{# Ticket List #}
<div class="uv-view {% if app.request.cookies and app.request.cookies.get('uv-asideView') %} uv-aside-view {% endif %}">
<h1>{{ 'Tickets'|trans }}</h1>
{# Action Bar #}
<div class="uv-action-bar">
{# Select all checkbox #}
<div class="uv-action-select-wrapper">
<label class="uv-vertical-align uv-margin-left-27">
<div class="uv-checkbox">
<input type="checkbox" class="select-all-checkbox"><span class="uv-checkbox-view"></span>
</div>
</label>
</div>
{# Filter Options #}
<div class="uv-action-col-wrapper">
{# Ticket Sort | Asset Visibility #}
<div class="uv-action-bar-col-lt">
<div class="filter">
{# Sort By #}
<div class="uv-dropdown sort">
<div class="uv-dropdown-btn uv-vertical-align uv-margin-right-5">{{ 'Sort By:'|trans }} {{ 'Last Replied'|trans }}</div>
<div class="uv-dropdown-list uv-bottom-left">
<div class="uv-dropdown-container">
<label>{{ 'Sort By'|trans }}</label>
<ul></ul>
</div>
</div>
</div>
{# Assets Visibilities #}
<div class="uv-dropdown asset-visibility">
<div class="uv-dropdown-btn uv-vertical-align uv-margin-right-5">{{ 'Assets Visibility'|trans }}</div>
<div class="uv-dropdown-list uv-bottom-left" style="width: 215px;">
<div class="uv-dropdown-container">
<label>{{ 'Assets Visibility'|trans }}</label>
<ul>
{# Ticket Source #}
<li class="uv-dropdown-checkbox">
<label>
<div class="uv-checkbox">
<input type="checkbox" id="source" name="assetVisibility[]" value="source" checked>
<span class="uv-checkbox-view uv-checkbox-dwn"></span>
</div>
</label>
<label for="source">{{ 'Channel/Source'|trans }}</label>
</li>
{# Ticket Customer Name #}
<li class="uv-dropdown-checkbox">
<label>
<div class="uv-checkbox">
<input type="checkbox" id="customer-name" name="assetVisibility[]" value="customer-name" checked>
<span class="uv-checkbox-view uv-checkbox-dwn"></span>
</div>
</label>
<label for="customer-name">{{ 'Customer Name'|trans }}</label>
</li>
{# Ticket Customer Email #}
<li class="uv-dropdown-checkbox">
<label>
<div class="uv-checkbox">
<input type="checkbox" id="customer-email" name="assetVisibility[]" value="customer-email" checked>
<span class="uv-checkbox-view uv-checkbox-dwn"></span>
</div>
</label>
<label for="customer-email">{{ 'Customer Email'|trans }}</label>
</li>
{# Ticket Timestamp #}
<li class="uv-dropdown-checkbox">
<label>
<div class="uv-checkbox">
<input type="checkbox" id="timestamp" name="assetVisibility[]" value="timestamp" checked>
<span class="uv-checkbox-view uv-checkbox-dwn"></span>
</div>
</label>
<label for="timestamp">{{ 'Timestamp'|trans }}</label>
</li>
{# Ticket Group #}
<li class="uv-dropdown-checkbox">
<label>
<div class="uv-checkbox">
<input type="checkbox" id="group" name="assetVisibility[]" value="group" checked>
<span class="uv-checkbox-view uv-checkbox-dwn"></span>
</div>
</label>
<label for="group">{{ 'Group'|trans }}</label>
</li>
{# Ticket Team #}
<li class="uv-dropdown-checkbox">
<label>
<div class="uv-checkbox">
<input type="checkbox" id="team" name="assetVisibility[]" value="team" checked>
<span class="uv-checkbox-view uv-checkbox-dwn"></span>
</div>
</label>
<label for="team">{{ 'Team'|trans }}</label>
</li>
{# Ticket Type #}
<li class="uv-dropdown-checkbox">
<label>
<div class="uv-checkbox">
<input type="checkbox" id="type1" name="assetVisibility[]" value="type1" checked>
<span class="uv-checkbox-view uv-checkbox-dwn"></span>
</div>
</label>
<label for="type1">{{ 'Type'|trans }}</label>
</li>
{# Ticket Replies #}
<li class="uv-dropdown-checkbox">
<label>
<div class="uv-checkbox">
<input type="checkbox" id="replies" name="assetVisibility[]" value="replies" checked>
<span class="uv-checkbox-view uv-checkbox-dwn"></span>
</div>
</label>
<label for="replies">{{ 'Replies'|trans }}</label>
</li>
{# Ticket Agent #}
<li class="uv-dropdown-checkbox">
<label>
<div class="uv-checkbox">
<input type="checkbox" id="agent" name="assetVisibility[]" value="agent" checked>
<span class="uv-checkbox-view uv-checkbox-dwn"></span>
</div>
</label>
<label for="agent">{{ 'Agent'|trans }}</label>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
{# Ticket Mass Action #}
<div class="uv-action-bar-col-lt" style="display: none">
<!-- Mass action -->
<div class="mass-action">
<div class="property-block">
{# Update Assigned Support Agent #}
{% if user_service.isAccessAuthorized('ROLE_AGENT_ASSIGN_TICKET') %}
<div class="uv-dropdown">
<div class="uv-dropdown-btn uv-vertical-align uv-margin-right-5">{{ 'Agent'|trans }}</div>
<div class="uv-dropdown-list uv-bottom-left">
<div class="uv-dropdown-container">
<label>{{ 'Agent'|trans }}</label>
<div class="uv-search-sm">
<input type="text" class="uv-search-field" placeholder="Search">
</div>
</div>
<ul class="uv-agents-list agent" data-action="agent">
{% for agent in user_service.getAgentPartialDataCollection() %}
<li data-index="{{ agent.id }}">
{% if agent.smallThumbnail != null %}
<img src="{{ app.request.scheme ~'://' ~ app.request.httpHost ~ asset('') }}{{ agent.smallThumbnail }}"/>
{% else %}
<img src="{{ asset(default_agent_image_path) }}" alt=""/>
{% endif %}
{{ agent.name }}
</li>
{% endfor %}
</ul>
</div>
</div>
{% endif %}
{# Update Assigned Support Group #}
{% if user_service.isAccessAuthorized('ROLE_AGENT_ASSIGN_TICKET_GROUP') %}
<div class="uv-dropdown">
<div class="uv-dropdown-btn uv-vertical-align uv-margin-right-5">{{ 'Group'|trans }}</div>
<div class="uv-dropdown-list uv-bottom-left">
<div class="uv-dropdown-container">
<label>{{ 'Group'|trans }}</label>
<div class="uv-search-sm">
<input type="text" class="uv-search-field" placeholder="Search">
</div>
</div>
<ul class="uv-search-list group" data-action="group">
{% for group in user_service.getSupportGroups() %}
<li data-index="{{ group.id }}"><a href="#">{{ group.name }}</a></li>
{% endfor %}
</ul>
</div>
</div>
{% endif %}
{# Update Assigned Support Team #}
{% if user_service.isAccessAuthorized('ROLE_AGENT_ASSIGN_TICKET_GROUP') %}
<div class="uv-dropdown">
<div class="uv-dropdown-btn uv-vertical-align uv-margin-right-5">{{ 'Team'|trans }}</div>
<div class="uv-dropdown-list uv-bottom-left">
<div class="uv-dropdown-container">
<label>{{ 'Team'|trans }}</label>
<div class="uv-search-sm">
<input type="text" class="uv-search-field" placeholder="Search">
</div>
</div>
<ul class="uv-search-list team" data-action="team">
{% for team in user_service.getSupportTeams() %}
<li data-index="{{ team.id }}"><a href="#">{{ team.name }}</a></li>
{% endfor %}
</ul>
</div>
</div>
{% endif %}
{# Update Ticket Status #}
{% if user_service.isAccessAuthorized('ROLE_AGENT_UPDATE_TICKET_STATUS') %}
<div class="uv-dropdown">
<div class="uv-dropdown-btn uv-vertical-align uv-margin-right-5">{{ 'Status'|trans }}</div>
<div class="uv-dropdown-list uv-bottom-left">
<div class="uv-dropdown-container">
<label>{{ 'Status'|trans }}</label>
<ul class="status" data-action="status">
{% for status in ticketStatusCollection %}
<li data-index="{{ status.id }}"><a href="#">{{ status.description|trans }}</a></li>
{% endfor %}
</ul>
</div>
</div>
</div>
{% endif %}
{# Update Ticket Type #}
{% if user_service.isAccessAuthorized('ROLE_AGENT_UPDATE_TICKET_TYPE') %}
<div class="uv-dropdown">
<div class="uv-dropdown-btn uv-vertical-align uv-margin-right-5">{{ 'Type'|trans }}</div>
<div class="uv-dropdown-list uv-bottom-left">
<div class="uv-dropdown-container">
<label>{{ 'Type'|trans }}</label>
<div class="uv-search-sm">
<input type="text" class="uv-search-field" placeholder="{{ 'Search'|trans }}">
</div>
</div>
<ul class="uv-search-list type" data-action="type">
{% for type in ticket_service.getTypes() %}
<li data-index="{{ type.id }}"><a href="#">{{ type.name }}</a></li>
{% endfor %}
</ul>
</div>
</div>
{% endif %}
{# Update Priority #}
{% if user_service.isAccessAuthorized('ROLE_AGENT_UPDATE_TICKET_PRIORITY') %}
<div class="uv-dropdown">
<div class="uv-dropdown-btn uv-vertical-align uv-margin-right-5">{{ 'Priority'|trans }}</div>
<div class="uv-dropdown-list uv-bottom-left">
<div class="uv-dropdown-container">
<label>{{ 'Priority'|trans }}</label>
<ul class="priority" data-action="priority">
{% for priority in ticketPriorityCollection %}
<li data-index="{{ priority.id }}"><a href="#">{{ priority.description|trans }}</a></li>
{% endfor %}
</ul>
</div>
</div>
</div>
{% endif %}
{# Update Label #}
<div class="uv-dropdown">
<div class="uv-dropdown-btn uv-vertical-align uv-margin-right-5">{{ 'Label'|trans }}</div>
<div class="uv-dropdown-list uv-bottom-left">
<div class="uv-dropdown-container">
<label>{{ 'Label'|trans }}</label>
<div class="uv-search-sm">
<input type="text" class="uv-search-field" placeholder="Search">
</div>
</div>
<ul class="uv-search-list label" data-action="label"></ul>
</div>
</div>
{# Trashe Tickets #}
{% if user_service.isAccessAuthorized('ROLE_AGENT_DELETE_TICKET') %}
<a class="uv-btn-stroke uv-margin-right-5" id="mass-delete" data-action="trashed" style="margin-left: 5px;">{{ 'Delete'|trans }}</a>
{% endif %}
</div>
{# For Trashed Tickets #}
<div class="trashed-block" style="display: none">
{# Restore Tickets #}
{% if user_service.isAccessAuthorized('ROLE_AGENT_RESTORE_TICKET') %}
<a class="uv-btn-stroke uv-margin-right-5" id="mass-restore" data-action="restore" style="margin-left: 5px;">{{ 'Restore'|trans }}</a>
{% endif %}
{# Delete Tickets Forever #}
{% if user_service.isAccessAuthorized('ROLE_AGENT_DELETE_TICKET') %}
<a class="uv-btn-stroke uv-margin-right-5" id="mass-delete-forever" data-action="delete" style="margin-left: 5px;">{{ 'Delete Forever'|trans }}</a>
{% endif %}
</div>
</div>
</div>
{# Ticket Search | Filter Extras #}
<div class="uv-action-bar-col-rt">
<!-- Search Tickets -->
<input type="text" class="uv-search-inline" placeholder="{{ 'Search'|trans }}">
<!-- Extra Filters -->
<div class="uv-btn-stroke uv-margin-left-15 filter-view-trigger" data-target="uv-filter-view"><span class="uv-icon-filter"></span>{{ 'Filter View'|trans }}</div>
</div>
</div>
</div>
{# Ticket List #}
<div class="uv-table uv-list-view">
<table>
<thead>
<tr>
<th class="uv-width-140"></th>
<th>{{ 'ID'|trans }}</th>
<th class="uv-min-width-300">{{ 'Subject'|trans }}</th>
<th data-index="customer-name">{{ 'Customer Name'|trans }}</th>
<th data-index="customer-email">{{ 'Customer Email'|trans }}</th>
<th data-index="timestamp">{{ 'Timestamp'|trans }}</th>
<th style ="min-width:100px" data-index="lastReply">{{ "Last Reply"|trans }}</th>
<th data-index="group">{{ 'Group'|trans }}</th>
<th data-index="team">{{ 'Team'|trans }}</th>
<th data-index="type1">{{ 'Type'|trans }}</th>
<th data-index="replies">{{ 'Replies'|trans }}</th>
<th data-index="agent">{{ 'Agent'|trans }}</th>
</tr>
</thead>
<tbody></tbody>
</table>
<div class="navigation"></div>
</div>
</div>
{# Extra Filters #}
<div class="uv-filter-view" id="uv-filter-view">
{# Filter Head #}
<div class="uv-filter-head">
<div class="uv-filter-title">
<h6>{{ 'Tickets'|trans }}</h6>
<span>{{ 'Save set of filters as a preset to stay more productive'|trans }}</span>
</div>
<div class="uv-filter-toggle" id="filter-close-trigger"><span></span></div>
</div>
{# Filter Content #}
<div class="uv-filter-paper">
{# Filters #}
<div class="uv-filter-options">
<script>
var userFilters = {};
</script>
{# Saved Filters #}
<div class="uv-element-block" style="border-bottom: 1px solid #D3D3D3; padding-bottom: 5px;">
<label class="uv-field-label">{{ 'Saved Filters'|trans }}</label>
<div class="uv-field-block">
<div class="uv-customize-wrapper">
<select class="uv-select uv-select-70" id="saved-filter">
{% set filters = app.user.agentInstance.userSavedFilters %}
{% if filters|length %}
<option value="">-- Saved Filter --</option>
{% for userFilter in filters %}
<option value="{{userFilter.id}}">{{userFilter.name}}</option>
{% endfor %}
{% else %}
<option value="">{{ 'No saved filter created'|trans }}</option>
{% endif %}
</select>
{% for userFilter in app.user.agentInstance.userSavedFilters %}
<script>
{% set isDefault = 0 %}
{% if app.user.agentInstance.defaultFiltering == userFilter.id %}
{% set isDefault = 1 %}
{% endif %}
userFilters[{{userFilter.id}}] = {{ {'id': userFilter.id, 'name': userFilter.name, 'route': userFilter.route, 'is_default': isDefault}|json_encode|raw }};
</script>
{% endfor %}
<span class="uv-customize" style="display: none" data-toggle="tooltip" title="{{ 'Edit Saved Filter'|trans }}"></span>
</div>
</div>
</div>
{% set filterContext = {} %}
{# agent #}
<div class="uv-element-block">
<label class="uv-field-label">{{ 'Agent'|trans }}</label>
<div class="uv-field-block" id="agent-filter">
<input class="uv-field uv-dropdown-other preloaded" type="text" data-filter-type="agent" id="agent-filter-input">
<div class="uv-dropdown-list uv-bottom-left">
<div class="uv-dropdown-container">
<label>{{ 'Filter With'|trans }}</label>
</div>
<ul class="uv-agents-list">
{% set options = [] %}
{% for agent in user_service.getAgentsPartialDetails %}
{% set options = options|merge([{'id': agent.id, 'name': agent.name}]) %}
<li data-id="{{agent.id}}">
{% if agent.smallThumbnail != null %}
<img src="{{ app.request.scheme ~'://' ~ app.request.httpHost ~ asset('') }}{{ agent.smallThumbnail }}"/>
{% else %}
<img src="{{ asset(default_agent_image_path) }}"/>
{% endif %}
{{agent.name}}
</li>
{% endfor %}
<li class="uv-no-results" style="display: none;">
{{ 'No result found'|trans }}
</li>
{% set filterContext = filterContext|merge({'agent':options}) %}
</ul>
</div>
<div class="uv-filtered-tags"></div>
</div>
</div>
<div class="uv-element-block">
<label class="uv-field-label">{{ 'Customer'|trans }}</label>
<div class="uv-field-block" id="customer-filter">
<input class="uv-field uv-dropdown-other" type="text" data-filter-type="customer" id="customer-filter-input">
<div class="uv-dropdown-list uv-bottom-left">
<div class="uv-dropdown-container">
<label>{{ 'Filter With'|trans }}</label>
</div>
<ul class="uv-agents-list">
<li class="uv-filter-info">
{{ 'Type atleast 2 letters'|trans }}
</li>
<li class="uv-no-results" style="display: none;">
{{ 'No result found'|trans }}
</li>
</ul>
</div>
<div class="uv-filtered-tags"></div>
</div>
</div>
<div class="uv-element-block">
<label class="uv-field-label">{{ 'Group'|trans }}</label>
<div class="uv-field-block" id="group-filter">
<input class="uv-field uv-dropdown-other preloaded" type="text" data-filter-type="group" id="group-filter-input">
<div class="uv-dropdown-list uv-bottom-left">
<div class="uv-dropdown-container">
<label>{{ 'Filter With'|trans }}</label>
<ul class="">
{% set options = [] %}
{% for group in user_service.getSupportGroups() %}
{% set options = options|merge([{'id': group.id, 'name': group.name}]) %}
<li data-id="{{group.id}}">
{{group.name}}
</li>
{% endfor %}
<li class="uv-no-results" style="display: none;">
{{ 'No result found'|trans }}
</li>
{% set filterContext = filterContext|merge({'group':options}) %}
</ul>
</div>
</div>
<div class="uv-filtered-tags"></div>
</div>
</div>
<div class="uv-element-block">
<label class="uv-field-label">{{ 'Team'|trans }}</label>
<div class="uv-field-block" id="team-filter">
<input class="uv-field uv-dropdown-other preloaded" type="text" data-filter-type="team" id="team-filter-input">
<div class="uv-dropdown-list uv-bottom-left">
<div class="uv-dropdown-container">
<label>{{ 'Filter With'|trans }}</label>
<ul class="">
{% set options = [] %}
{% for team in user_service.getSupportTeams() %}
{% set options = options|merge([{'id': team.id, 'name': team.name}]) %}
<li data-id="{{team.id}}">
{{team.name}}
</li>
{% endfor %}
<li class="uv-no-results" style="display: none;">
{{ 'No result found'|trans }}
</li>
{% set filterContext = filterContext|merge({'team':options}) %}
</ul>
</div>
</div>
<div class="uv-filtered-tags"></div>
</div>
</div>
<div class="uv-element-block">
<label class="uv-field-label">{{ 'Type'|trans }}</label>
<div class="uv-field-block" id="type-filter">
<input class="uv-field uv-dropdown-other preloaded" type="text" data-filter-type="type" id="type-filter-input">
<div class="uv-dropdown-list uv-bottom-left">
<div class="uv-dropdown-container">
<label>{{ 'Filter With'|trans }}</label>
<ul class="">
{% set options = [] %}
{% for type in ticket_service.getTypes() %}
{% set options = options|merge([{'id': type.id, 'name': type.name}]) %}
<li data-id="{{type.id}}">
{{type.name}}
</li>
{% endfor %}
<li class="uv-no-results" style="display: none;">
{{ 'No result found'|trans }}
</li>
{% set filterContext = filterContext|merge({'type':options}) %}
</ul>
</div>
</div>
<div class="uv-filtered-tags"></div>
</div>
</div>
<div class="uv-element-block">
<label class="uv-field-label">{{ 'Priority'|trans }}</label>
<div class="uv-field-block" id="priority-filter">
<input class="uv-field uv-dropdown-other preloaded" type="text" data-filter-type="priority" id="priority-filter-input">
<div class="uv-dropdown-list uv-bottom-left">
<div class="uv-dropdown-container">
<label>{{ 'Filter With'|trans }}</label>
<ul class="">
{% set options = [] %}
{% for priority in ticket_service.getPriorities() %}
{% set options = options|merge([{'id': priority.id, 'name': priority.code, 'color': priority.colorCode}]) %}
<li data-id="{{priority.id}}">
{{ priority.code|trans }}
</li>
{% endfor %}
<li class="uv-no-results" style="display: none;">
{{ 'No result found'|trans }}
</li>
{% set filterContext = filterContext|merge({'priority':options}) %}
</ul>
</div>
</div>
<div class="uv-filtered-tags"></div>
</div>
</div>
<div class="uv-element-block">
<label class="uv-field-label">{{ 'Tag'|trans }}</label>
<div class="uv-field-block" id="tag-filter">
<input class="uv-field uv-dropdown-other" type="text" data-filter-type="tag" id="tag-filter-input">
<div class="uv-dropdown-list uv-bottom-left">
<div class="uv-dropdown-container">
<label>{{ 'Filter With'|trans }}</label>
<ul class="">
<li class="uv-filter-info">
{{ 'Type atleast 2 letters'|trans }}
</li>
<li class="uv-no-results" style="display: none;">
{{ 'No result found'|trans }}
</li>
</ul>
</div>
</div>
<div class="uv-filtered-tags"></div>
</div>
</div>
<div class="uv-element-block">
<label class="uv-field-label">{{ 'Source'|trans }}</label>
<div class="uv-field-block" id="source-filter">
<input class="uv-field uv-dropdown-other preloaded" type="text" data-filter-type="source" id="source-filter-input">
<div class="uv-dropdown-list uv-bottom-left">
<div class="uv-dropdown-container">
<label>{{ 'Filter With'|trans }}</label>
<ul class="">
{% set options = [] %}
{% for key, source in ticket_service.getAllSources() %}
{% set options = options|merge([{'id': key, 'name': source}]) %}
<li data-id="{{key}}">
{{ source|trans }}
</li>
{% endfor %}
<li class="uv-no-results" style="display: none;">
{{ 'No result found'|trans }}
</li>
{% set filterContext = filterContext|merge({'source': options}) %}
</ul>
</div>
</div>
<div class="uv-filtered-tags"></div>
</div>
</div>
<div class="uv-element-block">
<label class="uv-field-label">{{ 'Mailbox'|trans }}</label>
<div class="uv-field-block" id="mailbox-filter">
<input class="uv-field uv-dropdown-other preloaded" type="text" data-filter-type="mailbox" id="mailbox-filter-input">
<div class="uv-dropdown-list uv-bottom-left">
<div class="uv-dropdown-container">
<label>{{ 'Filter With'|trans }}</label>
<ul class="">
{% set options = [] %}
{% for mailbox in ticket_service.getAllMailboxes() %}
{% set options = options|merge([{'id': mailbox.email, 'name': mailbox.name}]) %}
<li data-id="{{mailbox.email}}">
{{ mailbox.name|trans }}
</li>
{% endfor %}
<li class="uv-no-results" style="display: none;">
{{ 'No result found'|trans }}
</li>
{% set filterContext = filterContext|merge({'mailbox': options}) %}
</ul>
</div>
</div>
<div class="uv-filtered-tags"></div>
</div>
</div>
<div class="uv-element-block">
<label class="uv-field-label">{{ 'Before'|trans }}</label>
<div class="uv-field-block range" id="before-filter">
<input class="uv-field uv-date-picker" type="text" data-filter-type="before" id="before-filter-input">
</div>
</div>
<div class="uv-element-block">
<label class="uv-field-label">{{ 'After'|trans }}</label>
<div class="uv-field-block range" id="after-filter">
<input class="uv-field uv-date-picker" type="text" data-filter-type="after" id="after-filter-input">
</div>
</div>
<div class="uv-element-block">
<label class="uv-field-label">{{ 'Replies less than'|trans }}</label>
<div class="uv-field-block" id="reply-filter">
<input class="uv-field" type="number" min="1" data-filter-type="replies-less" id="repliesLess-filter-input">
</div>
</div>
<div class="uv-element-block">
<label class="uv-field-label">{{ 'Replies more than'|trans }}</label>
<div class="uv-field-block" id="reply-filter">
<input class="uv-field" type="number" min="0" data-filter-type="replies-more" id="repliesMore-filter-input">
</div>
</div>
<div class="uv-action-buttons">
</div>
{# Clear Filters #}
<a class="uv-btn-remove" href="#"><span class="uv-icon-discard"></span> {{ 'Clear All'|trans }}</a>
</div>
{# Add|Edit Filter #}
<div class="uv-filter-edit" style="display: none;"></div>
</div>
<script type="text/javascript">
var filterContext = {{ filterContext|json_encode|raw }}
</script>
</div>
</div>
{% endblock %}
{% block footer %}
{{ parent() }}
{# Sort Ticket View Template #}
<script id="ticket_list_sorting_tmp" type="text/template">
<li class="<% if(sort == 'ticket.id') { %>uv-drop-list-active<% } %>">
<a href="#<% if(queryString != '') { %><%= queryString %>/<% } %><% if(page) { %>page/<%= page %><% } else { %>page/1<% } %>/sort/ticket.id/<% if(sort == 'ticket.id') { %><% if(direction) { %>direction/<%= direction %><% } else { %>direction/desc<% } %><% } else { %>direction/asc<% } %>" data-field="ticket.id">
{% trans %}Ticket Id{% endtrans %}
<% if(sort == 'ticket.id') { %>
<span class="uv-sorting <% if(direction == 'asc') { %> descend <% } else { %> ascend <% } %>"></span>
<% } %>
</a>
</li>
<li class="<% if(sort == 'ticket.updatedAt') { %>uv-drop-list-active<% } %>">
<a href="#<% if(queryString != '') { %><%= queryString %>/<% } %><% if(page) { %>page/<%= page %><% } else { %>page/1<% } %>/sort/ticket.updatedAt/<% if(sort == 'ticket.updatedAt') { %><% if(direction) { %>direction/<%= direction %><% } else { %>direction/desc<% } %><% } else { %>direction/asc<% } %>" data-field="ticket.updatedAt">
{% trans %}Last Replied{% endtrans %}
<% if(sort == 'ticket.updatedAt') { %>
<span class="uv-sorting <% if(direction == 'asc') { %> descend <% } else { %> ascend <% } %>"></span>
<% } %>
</a>
</li>
<li class="<% if(sort == 'agentName') { %>uv-drop-list-active<% } %>">
<a href="#<% if(queryString != '') { %><%= queryString %>/<% } %><% if(page) { %>page/<%= page %><% } else { %>page/1<% } %>/sort/agentName/<% if(sort == 'agentName') { %><% if(direction) { %>direction/<%= direction %><% } else { %>direction/desc<% } %><% } else { %>direction/asc<% } %>" data-field="agentName">
{% trans %}Assign To{% endtrans %}
<% if(sort == 'agentName') { %>
<span class="uv-sorting <% if(direction == 'asc') { %> descend <% } else { %> ascend <% } %>"></span>
<% } %>
</a>
</li>
<li class="<% if(sort == 'customerEmail') { %>uv-drop-list-active<% } %>">
<a href="#<% if(queryString != '') { %><%= queryString %>/<% } %><% if(page) { %>page/<%= page %><% } else { %>page/1<% } %>/sort/customerEmail/<% if(sort == 'customerEmail') { %><% if(direction) { %>direction/<%= direction %><% } else { %>direction/desc<% } %><% } else { %>direction/asc<% } %>" data-field="customerEmail">
{% trans %}Customer Email{% endtrans %}
<% if(sort == 'customerEmail') { %>
<span class="uv-sorting <% if(direction == 'asc') { %> descend <% } else { %> ascend <% } %>"></span>
<% } %>
</a>
</li>
<li class="<% if(sort == 'customerName') { %>uv-drop-list-active<% } %>">
<a href="#<% if(queryString != '') { %><%= queryString %>/<% } %><% if(page) { %>page/<%= page %><% } else { %>page/1<% } %>/sort/customerName/<% if(sort == 'customerName') { %><% if(direction) { %>direction/<%= direction %><% } else { %>direction/desc<% } %><% } else { %>direction/asc<% } %>" data-field="customerName">
{% trans %}Customer Name{% endtrans %}
<% if(sort == 'customerName') { %>
<span class="uv-sorting <% if(direction == 'asc') { %> descend <% } else { %> ascend <% } %>"></span>
<% } %>
</a>
</li>
</script>
{# Ticket Status List Template #}
<script id="ticket_status_list_tmp" type="text/template">
<ul class="status-list">
{% for status in ticketStatusCollection %}
<li>
<a href="#" class="<% if(active == {{ status.id }} {% if status.id == 1 %} || active == 0{% endif %}) { %>uv-aside-nav-active<% } %>" data-id="{{ status.id }}">
<span class="name">{{ status.description|trans }}</span>
<span class="uv-flag-gray">
<% if(status && status[1] != undefined) { %>
<%= status[{{ status.id }}] %>
<% } else { %>
0
<% } %>
</span>
</a>
</li>
{% endfor %}
</ul>
</script>
{# Default Ticket Label View Template #}
<script id="predefined_label_tmp" type="text/template">
<li>
<a href="#" <% if (active == '') { %> class="uv-aside-active" <% } %>>
{{ 'All'|trans }}
<span class="uv-flag-gray uv-flag-dark"><%= labelDetails.predefind.all %></span>
</a>
</li>
<li>
<a href="#new" <% if(active == 'new') { %> class="uv-aside-active" <% } %> >
{{ 'New'|trans }}
<span class="uv-flag-gray uv-flag-dark">
<%= labelDetails.predefind.new %>
</span>
</a>
</li>
<li>
<a href="#unassigned" <% if(active == 'unassigned') { %> class="uv-aside-active" <% } %> >
{{ 'UnAssigned'|trans }}
<span class="uv-flag-gray uv-flag-dark">
<%= labelDetails.predefind.unassigned %>
</span>
</a>
</li>
<li>
<a href="#notreplied" <% if(active == 'notreplied') { %> class="uv-aside-active" <% } %> >
{{ 'UnAnswered'|trans }}
<span class="uv-flag-gray uv-flag-dark">
<%= labelDetails.predefind.notreplied %>
</span>
</a>
</li>
<li>
<a href="#mine" <% if(active == 'mine') { %> class="uv-aside-active" <% } %> >
{{ 'My Tickets'|trans }}
<span class="uv-flag-gray uv-flag-dark">
<%= labelDetails.predefind.mine %>
</span>
</a>
</li>
<li>
<a href="#starred" <% if(active == 'starred') { %> class="uv-aside-active" <% } %> >
{{ 'Starred'|trans }}
<span class="uv-flag-gray uv-flag-dark">
<%= labelDetails.predefind.starred %>
</span>
</a>
</li>
<li>
<a href="#trashed" <% if(active == 'trashed') { %> class="uv-aside-active" <% } %>>
{{ 'Trashed'|trans }}
<span class="uv-flag-gray uv-flag-dark">
<%= labelDetails.predefind.trashed %>
</span>
</a>
</li>
</script>
{# Custom Ticket Label View Template #}
<script id="custom_label_tmp" type="text/template">
<a href="#label/<%= id %>" data-id="<%= id %>">
<%- name %>
<span class="uv-flag-gray" style="<% if(colorCode) { %>background-color:<%= colorCode %><% } %>">
<%= count %>
</span>
</a>
<span class="uv-customize" data-target="uv-task-view" data-toggle="tooltip" title="{{ 'Edit Label'|trans }}"></span>
</script>
{# Add|Edit Ticket Label View Template #}
<script id="add_edit_label_tmp" type="text/template">
<div class="uv-aside-head">
<div class="uv-aside-title">
<% if(id) { %>
<h6>{{ 'Edit Label'|trans }}</h6>
<% } else { %>
<h6>{{ 'Add Label'|trans }}</h6>
<% } %>
</div>
<div class="uv-aside-back" id="back-to-labels">
<span>{{ 'Back'|trans }}</span>
</div>
</div>
<div class="uv-aside-option" data-id="<%= id %>">
<div class="uv-element-block">
<label class="uv-field-label">{{ 'Name'|trans }}</label>
<div class="uv-field-block">
<input class="uv-field" type="text" value="<%- name %>" />
</div>
</div>
<div class="uv-element-block">
<label class="uv-field-label">{{ 'Choose a Color'|trans }}</label>
<div class="uv-field-block">
<% colors = ['#337CFF','#FEBF00','#E5549F','#27B6BB','#FB8A3F','#43AF52'] %>
<% for(var colorTemp in colors) { %>
<span class="uv-color-block <% if(colorCode == colors[colorTemp]) { %>uv-color-active<% } %>" data-color="<%- colors[colorTemp] %>" style="background:<%- colors[colorTemp] %>"></span>
<% } %>
</div>
</div>
<div>
<a class="uv-btn add-update-btn" href="#">
<% if(id) { %>
{{ 'Update'|trans }}
<% } else { %>
{{ 'Create'|trans }}
<% } %>
</a>
</div>
<% if(id) { %>
<a class="uv-btn-remove"><span class="uv-icon-discard"></span>{{ 'Remove Label'|trans }}</a>
<% } %>
</div>
</script>
{# Add|Edit Saved Ticket Filter View Template #}
<script id="add_edit_saved_filter_tmp" type="text/template">
<form>
<div class="uv-filter-edit-head">
<div class="uv-filter-edit-title">
<h6>
<% if(id) { %>
<input type="hidden" name="id" id="filter-id" value="<%= id %>"/>
{{ 'Edit Saved Filter'|trans }}
<% } else { %>
{{ 'New Saved Filter'|trans }}
<% } %>
</h6>
</div>
<div class="uv-filter-edit-back back-to-filter">
<span>{{ 'Back'|trans }}</span>
</div>
</div>
<div class="uv-element-block">
<label class="uv-field-label">{{ 'Name'|trans }}</label>
<div class="uv-field-block">
<input class="uv-field name" name="name" type="text" value="<%- name %>" />
</div>
</div>
<div class="uv-element-block">
<label>
<div class="uv-checkbox">
<input type="checkbox" name="is_default" <% if(is_default) { %>checked<% } %> />
<span class="uv-checkbox-view"></span>
</div>
<span class="uv-checkbox-label">{{ 'Is Default'|trans }}</span>
</label>
</div>
<div class="uv-filters-group">
<% _.each(filters, function(filter, key){ %>
<div class="uv-element-block" data-filter="<%= key %>">
<label class="uv-field-label"><%- filter.name %></label>
<div class="uv-field-block">
<% _.each(filter.options, function(option){ %>
<a class="uv-btn-tag" href="#" data-id="<%= option.id %>">
<%- option.name %>
<span class="uv-icon-remove-dark"></span>
</a>
<% }); %>
</div>
</div>
<% }); %>
<div class="uv-action-buttons">
<% if(id) { %>
<a class="uv-btn-remove"><span class="uv-icon-discard"></span>{{ 'Remove Saved Filter'|trans }}</a>
<% } %>
</div>
</div>
<div class="uv-action-buttons">
<a class="uv-btn <% if(id) { %>update-filter<% } else { %>save-filter<% } %>" href="#">
<% if(id) { %>
{{ 'Update'|trans }}
<% } else { %>
{{ 'Create'|trans }}
<% } %>
</a>
<a class="uv-btn back-to-filter" href="#">{{ 'Cancel'|trans }}</a>
</div>
</form>
</script>
{# Quick View Ticket View Template #}
<script id="ticket_quick_view_tmp" type="text/template">
<div class="uv-pull-right quick-view-navigation">
<div class="uv-loader" style="display: none">
<span></span>
<span></span>
<span></span>
</div>
<% if(previous) { %>
<span class="uv-btn-tag uv-icon-nav-pre" data-id="<%= previous %>">
</span>
<% } else { %>
<span class="uv-btn-tag uv-icon-nav-pre" disabled="disabled">
</span>
<% } %>
<% if(next) { %>
<span class="uv-btn-tag uv-icon-nav-nxt" data-id="<%= next %>">
</span>
<% } else { %>
<span class="uv-btn-tag uv-icon-nav-nxt" disabled="disabled">
</span>
<% } %>
</div>
<span class="uv-pop-up-close"></span>
<a href="<%= path %>"><h2>{{ 'Ticket Info'|trans }} #<%= id %></h2></a>
<div class="uv-pop-up-body uv-inner-section">
<div class="uv-view">
<div class="uv-ticket-head">
<div class="uv-ticket-strip">
<span>
<span class="uv-ticket-strip-label">
{{ 'Timestamp'|trans }} -
</span>
<span class="uv-margin-0">
<%= formatedCreatedAt %>
</span>
</span>
<span>
<span class="uv-ticket-strip-label">
{{ 'By'|trans }} -
</span>
<%- createThread.user.name %>
</span>
<% if(agent) { %>
<span class="agent-info" style="">
<span class="uv-ticket-strip-label">
{{ 'Agent'|trans }} -
</span>
<span class="name"><%- agent.name %></span>
</span>
<% } %>
</div>
<div class="uv-ticket-strip">
<span class="uv-btn-tag">
{{ 'Priority'|trans }}
- <%- priority.description %>
</span>
<span class="uv-btn-tag">
{{ 'Status'|trans }}
- <%- status.description %>
</span>
<% if(lastReplyAgentName) { %>
<span class="uv-btn-tag">
{{ 'Last Replied Agent'|trans }}
- <%- lastReplyAgentName.name.split(" ")[0] %>
</span>
<% } %>
</div>
</div>
<div class="uv-ticket-head">
<h1><%- subject %></h1>
</div>
<div class="uv-ticket-section">
<div class="uv-ticket-main create">
<div class="uv-ticket-strip">
<span>
<span class="uv-margin-0 timeago" data-timestamp="<%= createThread.timestamp %>" title="<%= createThread.formatedCreatedAt %>"><%= createThread.formatedCreatedAt %></span>
- <%- createThread.user.name %>
<span class="uv-ticket-strip-label">
{{ 'created Ticket'|trans }}
</span>
</span>
</div>
<div class="uv-ticket-main-lt">
<% if (createThread.user.smallThumbnail != null) { %>
<img class='border' src="{{ app.request.scheme ~'://' ~ app.request.httpHost ~ asset('') }}<%= createThread.user.smallThumbnail %>"/>
<% } else { %>
<% if (createThread.createdBy == 'customer') { %>
<img class='border' src="{{ asset(default_customer_image_path) }}"/>
<% } else { %>
<img class='border' src="{{ asset(default_agent_image_path) }}"/>
<% } %>
<% } %>
</div>
<div class="uv-ticket-main-rt">
<% if(createThread.createdBy == 'customer') { %>
<a href="{{ path('helpdesk_member_manage_customer_account') }}/<%= createThread.user.id %>" class="uv-ticket-member-name">
<% } else { %>
<% if(createThread.user) { %>
<a href="{{ path('helpdesk_member_account') }}/<%= createThread.user.id %>" class="uv-ticket-member-name">
<% } else { %>
<a class="uv-ticket-member-name">
<% } %>
<% } %>
<%- createThread.user.name %>
</a>
<div class="message">
<p>
<%= createThread.reply %>
</p>
</div>
<!-- Attachment Block -->
<% if(createThread.attachments.length) { %>
<div class="uv-ticket-uploads">
<h4>{{ 'Uploaded Files'|trans }}</h4>
<div class="uv-ticket-uploads-strip">
<% _.each(createThread.attachments, function(file) { %>
<a href="<%-file.downloadURL %>" target ="_blank" class="uv-ticket-uploads-brick uv-no-pointer-events" data-toggle="tooltip" title="<%- file.name %>">
<img src="<%-file.iconURL %>" class="uv-auto-pointer-events">
</a>
<% }) %>
</div>
<% if(createThread.attachments.length >1) { %>
<div class="thread-attachments-zip pull-left">
<div class="uv-upload-actions">
<a href="{{ path('helpdesk_member_ticket_download_attachment_zip') }}/<%= createThread.id %>" target="_blank"><span class="uv-icon-attachment"></span> {{ 'Download (as .zip)'|trans }}</a>
</div>
</div>
<% } %>
</div>
<% } %>
<!-- //Attachment Block -->
</div>
</div>
<% if(lastReply) { %>
<div class="uv-ticket-main">
<div class="uv-ticket-strip">
<span>
<span class="uv-margin-0 timeago" data-timestamp="<%= lastReply.timestamp %>" title="<%= lastReply.formatedCreatedAt %>"><%= lastReply.formatedCreatedAt %></span>
- <%- lastReply.user.name %>
<span class="uv-ticket-strip-label">
{{ 'made last reply'|trans }}
</span>
</span>
</div>
<div class="uv-ticket-main-lt">
<% if (lastReply.user.smallThumbnail != null) { %>
<img class='border' src="{{ app.request.scheme ~'://' ~ app.request.httpHost ~ asset('') }}<%= lastReply.user.smallThumbnail %>"/>
<% } else { %>
<% if (lastReply.createdBy == 'customer') { %>
<img class='border' src="{{ asset(default_customer_image_path) }}"/>
<% } else { %>
<img class='border' src="{{ asset(default_agent_image_path) }}"/>
<% } %>
<% } %>
</div>
<div class="uv-ticket-main-rt">
<% if(lastReply.createdBy == 'customer') { %>
<a href="{{ path('helpdesk_member_manage_customer_account') }}/<%= lastReply.user.id %>" class="uv-ticket-member-name">
<% } else { %>
<% if(lastReply.user) { %>
<a href="{{ path('helpdesk_member_account') }}/<%= lastReply.user.id %>" class="uv-ticket-member-name">
<% } else { %>
<a class="uv-ticket-member-name">
<% } %>
<% } %>
<%- lastReply.user.name %>
</a>
<div class="message">
<p>
<%= lastReply.reply %>
</p>
</div>
<!-- Attachment Block -->
<% if(lastReply.attachments.length) { %>
<div class="uv-ticket-uploads">
<h4>{{ 'Uploaded Files'|trans }}</h4>
<div class="uv-ticket-uploads-strip">
<% _.each(lastReply.attachments, function(file) { %>
<a href="<%-file.downloadURL %>" target ="_blank" class="uv-ticket-uploads-brick uv-no-pointer-events" data-toggle="tooltip" title="<%- file.name %>">
<img src="<%-file.iconURL %>" class="uv-auto-pointer-events">
</a>
<% }) %>
</div>
<% if(lastReply.attachments.length> 1) { %>
<div class="thread-attachments-zip pull-left">
<div class="uv-upload-actions">
<a href="{{ path('helpdesk_member_ticket_download_attachment_zip') }}/<%= lastReply.id %>" target="_blank"><span class="uv-icon-attachment"></span> {{ 'Download (as .zip)'|trans }}</a>
</div>
</div>
<% } %>
</div>
<% } %>
<!-- //Attachment Block -->
</div>
</div>
<% } %>
</div>
</div>
</div>
</script>
{# Ticket List Item View Template #}
<script id="ticket_list_item_tmp" type="text/template">
<td class="uv-width-140 uv-no-content">
<span class="uv-list-ticket-priority" style="<% if(priority) { %>background: <%=priority.colorCode %><% } %>;"></span>
<label class="uv-vertical-align uv-margin-right-5">
<div class="uv-checkbox">
<input type="checkbox" class="mass-action-checkbox" value="<%= id %>"/>
<span class="uv-checkbox-view"></span>
</div>
</label>
<span class="uv-star <% if(isStarred) { %>uv-star-active<% } %> uv-margin-right-5"></span>
<span data-index="source">
<% if(source == 'email') { %>
<span class="uv-channel uv-channel-email uv-margin-right-5" data-toggle="tooltip" data-placement="bottom" title="Email"></span>
<% } else if(source == 'facebook') { %>
<span class="uv-channel uv-channel-facebook uv-margin-right-5" data-toggle="tooltip" data-placement="bottom" title="Facebook"></span>
<% } else if(source == 'twitter') { %>
<span class="uv-channel uv-channel-twitter uv-margin-right-5" data-toggle="tooltip" data-placement="bottom" title="Twitter"></span>
<% } else if(source == 'binaka' || source == 'knock') { %>
<span class="uv-channel uv-channel-binaka uv-margin-right-5" data-toggle="tooltip" data-placement="bottom" title="Binaka"></span>
<% } else if(source == 'api') { %>
<span class="uv-channel uv-channel-api uv-margin-right-5" data-toggle="tooltip" data-placement="bottom" title="API"></span>
<% } else if(source == 'formbuilder') { %>
<span class="uv-channel uv-channel-form-builder uv-margin-right-5" data-toggle="tooltip" data-placement="bottom" title="Formbuilder"></span>
<% } else if(source == 'disqus-engage') { %>
<span class="uv-channel uv-channel-disqus-engage uv-margin-right-5" data-toggle="tooltip" data-placement="bottom" title="Disqus"></span>
<% } else if(source == 'ebay') { %>
<span class="uv-channel uv-channel-ebay uv-margin-right-5" data-toggle="tooltip" data-placement="bottom" title="Ebay"></span>
<% } else if(source == 'youtube') { %>
<span class="uv-channel uv-channel-youtube uv-margin-right-5" data-toggle="tooltip" data-placement="bottom" title="Youtube"></span>
<% } else { %>
<span class="uv-channel uv-channel-web uv-margin-right-5" data-toggle="tooltip" data-placement="bottom" title="<%- source %>"></span>
<% } %>
</span>
<span class="uv-quick-view-trigger" data-id="<%= id %>"></span>
</td>
<td data-value="{{ 'ID'|trans }}" class="uv-width-100">
<a href="<%= path %>">
#<%= id %>
</a>
</td>
<td data-value="{{ 'Subject'|trans }}">
<a href="<%= path %>">
<%- subject && subject.length <= 300 ? subject : subject.substr(0, 300) + '...' %>
</a>
</td>
<td data-value="{{ 'Customer Name'|trans }}" data-index="customer-name">
<a href="<%= path %>">
<%- customer.name %>
</a>
</td>
<td data-value="{{ 'Customer Email'|trans }}" data-index="customer-email">
<a href="<%= path %>">
<%- customer.email %>
</a>
</td>
<td data-value="{{ 'Timestamp'|trans }}" data-index="timestamp">
<a href="<%= path %>" class="timeago" data-timestamp="<%= timestamp %>" title="<%= formatedCreatedAt %>">
<%= formatedCreatedAt %>
</a>
</td>
<td data-value="{{ 'Last Reply'|trans }}" data-index="last-reply">
<% if(lastReplyTime) { %>
<a href="<%= path %>">
<%= lastReplyTime %>
</a>
<% } else { %>
{{ 'N/A'|trans }}
<% } %>
</td>
<td data-value="{{ 'Group'|trans }}" data-index="group">
<a href="<%= path %>">
<% if(group) { %>
<%- group %>
<% } else { %>
{{ 'N/A'|trans }}
<% } %>
</a>
</td>
<td data-value="{{ 'Team'|trans }}" data-index="team">
<a href="<%= path %>">
<% if(team) { %>
<%- team %>
<% } else { %>
{{ 'N/A'|trans }}
<% } %>
</a>
</td>
<td data-value="{{ 'Type'|trans }}" data-index="type1">
<a href="<%= path %>">
<% if(type) { %>
<%- type %>
<% } else { %>
{{ 'N/A'|trans }}
<% } %>
</a>
</td>
<td data-value="{{ 'Replies'|trans }}" data-index="replies">
<a href="<%= path %>">
<%= totalThreads %>
</a>
</td>
<td data-value="{{ 'Agent'|trans }}" data-index="agent">
<a href="<%= path %>">
<% if(agent) { %>
<% if(agent.smallThumbnail != null) { %>
<img src="{{ app.request.scheme ~'://' ~ app.request.httpHost ~ asset('') }}<%= agent.smallThumbnail %>" alt=""/>
<% } else { %>
<img src="{{ asset(default_agent_image_path) }}" alt=""/>
<% } %>
<%- agent.name %>
<% } else { %>
{{ 'Unassigned'|trans }}
<% } %>
</a>
</td>
</script>
<script type="text/javascript">
var isPageJustLoaded = true;
var globalMessageResponse = "";
var currentUserId = "{{ user_service.getCurrentUser().id }}";
var pathToTicket = "{{ path('helpdesk_member_ticket', {'ticketId': 'replaceId' }) }}";
$(() => {
$('#before-filter-input').datetimepicker({
format: 'DD-MM-YYYY',
maxDate: 'now',
useCurrent: false,
});
$('#after-filter-input').datetimepicker({
format: 'DD-MM-YYYY',
maxDate: 'now',
useCurrent: false,
});
// Ticket Model
var TicketModel = Backbone.Model.extend({
idAttribute: "id",
defaults: {
path: "",
},
urlRoot: "{{ path('helpdesk_member_ticket_xhr') }}"
});
// Ticket Label Model
var LabelModel = Backbone.Model.extend({
idAttribute: "id",
defaults: {
count: 0,
},
parse: function (resp, options) {
return JSON.parse(resp.label);
},
urlRoot: "{{ path('helpdesk_member_ticket_label_xhr') }}"
});
// Ticket Quick View Model
var TicketQuickViewModel = Backbone.Model.extend({
idAttribute: "id",
defaults: {
path: "",
isSynced: false
}
});
// Side Filter Model
var SideFilterModel = Backbone.Model.extend({
updateModel: function(type,json) {
if(this.has(type)) {
context = this.get(type)
savedOptionsIds = [];
_.each(context, function (option) {
savedOptionsIds.push(parseInt(option.id))
})
if(jQuery.inArray(parseInt(json.id), savedOptionsIds) == -1) {
context.push(json);
this.set(type, context)
}
} else {
this.set(type, [json])
}
},
loadFilterOptions: function(data) {
var self = this;
$.ajax({
url : "{{ path('helpdesk_member_ticket_collection_load_filter_options_xhr') }}",
type : 'POST',
data: data,
dataType : 'json',
success : function(response) {
_.each(response,function(filter,key) {
_.each(filter, function (item) {
self.updateModel(key,item)
})
})
sideFilter.render();
},
error: function (xhr) {
if(url = xhr.getResponseHeader('Location'))
window.location = url;
}
});
}
});
// Ticket Label Collection
var LabelCollection = Backbone.Collection.extend({
model: LabelModel,
isLabelExist: function(labelName, labelId) {
var flag = 1;
_.each(this.models, function (item) {
if(item.get('name').toUpperCase() == labelName.toUpperCase() && item.id != labelId)
flag = 0;
}, this);
return flag;
}
});
// Ticket Collection
var TicketCollection = AppCollection.extend({
model: TicketModel,
url: "{{ path('helpdesk_member_ticket_collection_xhr') }}",
filterParameters: {
label: "",
new: "",
unassigned: "",
notreplied: "",
mine: "",
starred: "",
trashed: "",
label: "",
status: "",
search: "",
agent: "",
customer: "",
priority: "",
type: "",
group: "",
team: "",
tag: "",
mailbox : "",
source : "",
after: "",
before: "",
repliesLess: "",
repliesMore: "",
},
parseRecords: function (response, options) {
return response.tickets;
},
syncData: function() {
app.appView.showLoader();
$('.select-all-checkbox').prop('checked', false);
this.fetch({
data: this.getValidParameters(),
reset: true,
success: function(model, response) {
ticketQuickViewCollection.reset()
app.appView.hideLoader();
var ticketListView = new TicketList();
app.pager.paginationData = response.pagination;
var url = app.pager.paginationData.url;
if(ticketCollection.length == 0 && app.pager.paginationData.current != "0")
router.navigate(url.replace('replacePage', app.pager.paginationData.last),{trigger: true});
else {
app.pager.render();
statusListDetails = response.tabs;
labelDetails = response.labels;
labelListView.render();
}
if (globalMessageResponse) {
app.appView.renderResponseAlert(globalMessageResponse);
}
globalMessageResponse = null;
sideFilter.backToFilter()
},
error: function (model, xhr, options) {
app.appView.hideLoader();
if(url = xhr.getResponseHeader('Location'))
window.location = url;
}
});
},
batchOperation: function(data) {
var self = this;
app.appView.showLoader();
$.ajax({
url : "{{ path('helpdesk_member_ticket_collection_mass_action_xhr') }}",
type : 'POST',
data : {data : data},
dataType : 'json',
success : function(response) {
app.appView.hideLoader();
globalMessageResponse = response;
self.syncData();
},
error: function (xhr) {
if(url = xhr.getResponseHeader('Location'))
window.location = url;
var response = warningResponse;
if(xhr.responseJSON)
response = xhr.responseJSON;
app.appView.hideLoader();
app.appView.renderResponseAlert(response);
$('.mass-action-checkbox').prop('checked', false);
}
});
}
});
// Ticket Quick View Collection
var TicketQuickViewCollection = Backbone.Collection.extend({
model: TicketQuickViewModel,
isModelSynced: function(id) {
if (model = this.get(id)) {
if (parseInt(model.attributes.isSynced)) {
return model;
}
}
return false;
},
initialize: function() {
_.bindAll(this, 'getNextPrev', 'nextElement', 'previousElement');
},
getNextPrev : function(id) {
var data = {};
currentModel = ticketQuickViewCollection.get(id)
data['next'] = (model = this.nextElement(currentModel)) ? model.id : 0;
data['previous'] = (model = this.previousElement(currentModel)) ? model.id : 0;
return data;
},
nextElement: function(model) {
var index = ticketQuickViewCollection.indexOf(model);
if ((index + 1) === ticketQuickViewCollection.length)
return 0;
return ticketQuickViewCollection.at(index + 1);
},
previousElement: function(model) {
var index = ticketQuickViewCollection.indexOf(model);
if (index === 0 )
return 0;
return ticketQuickViewCollection.at(index - 1);
}
});
// Filter
var Filter = app.Filter.extend({
defaultSortIndex: 'ticket.updatedAt',
sortText: "{% trans %}Sort By:{% endtrans %} ",
defaultSortText: "{% trans %}Sort By:{% endtrans %} {% trans %}Last Replied{% endtrans %}",
template : _.template($("#ticket_list_sorting_tmp").html()),
events : {
'keyup .uv-search-inline' : 'search',
'change .asset-visibility input[type="checkbox"]': 'filterAssetsVisibility'
},
filterAssetsVisibilityOnLoad: function() {
if(localStorage.getItem('assets-visibility')) {
var assets = JSON.parse(localStorage.getItem('assets-visibility'));
$.each(assets, function(asset, assetVal) {
if(assetVal) {
$('span[data-index="' + asset + '"], td[data-index="' +asset + '"], th[data-index="' + asset + '"]').show()
$('#' + asset).prop('checked', true);
} else {
$('span[data-index="' + asset + '"], td[data-index="' +asset + '"], th[data-index="' + asset + '"]').hide()
$('#' + asset).prop('checked', false);
}
})
}
},
filterAssetsVisibility: function(e) {
var assets = {};
$('.asset-visibility input').each(function() {
var asset = $(this).val();
if($(this).is(':checked')) {
assets[asset] = 1;
$('span[data-index="' + asset + '"], td[data-index="' + asset + '"], th[data-index="' + asset + '"]').show()
} else {
assets[asset] = 0;
$('span[data-index="' + asset + '"], td[data-index="' + asset + '"], th[data-index="' + asset + '"]').hide()
}
});
localStorage.setItem('assets-visibility', JSON.stringify(assets));
},
search : _.debounce(function(e) {
this.collection.reset();
this.collection.state.currentPage = null;
this.collection.filterParameters.search = Backbone.$(e.target).val();
var queryString = app.appView.buildQuery($.param(this.collection.getValidParameters()));
router.navigate(queryString,{trigger: true});
}, 1000)
});
// Side Filter View
var SideFilter = Backbone.View.extend({
el: $(".uv-filter-view"),
isRecurrsiveCalls: 0,
isReadyFlag: 0,
appliedFilterOptions: {},
tempAppliedFilterOptions: {},
events: {
'change #saved-filter': 'applySavedFilter',
'input .uv-field-block input' : 'searchFilterOption',
'click .uv-dropdown-list li' : 'applyFilter',
'dp.change .range input': 'applyFilter',
'click .uv-filtered-tags .uv-btn-tag' : 'removeFilter',
'change .custom-filter' : 'filterByCustom',
'change #repliesLess-filter-input' : 'filterByRepliesLessThan',
'change #repliesMore-filter-input' : 'filterByRepliesMoreThan',
'keyup .search-custom, change .search-custom' : 'filterByCustom',
'click .new-saved-reply, .edit-saved-reply, .uv-filter-paper .uv-customize': 'addEditSavedReply',
'click .back-to-filter': 'backToFilter',
'click .uv-filter-edit .uv-btn-tag': 'removeSavedFilterOption',
'click .uv-filter-edit .save-filter, .uv-filter-edit .update-filter' : "saveSavedFilter",
'click .uv-filter-edit .uv-action-buttons .uv-btn-remove': 'removeSavedFilter'
},
loaderTemplate: _.template($("#loader-tmp").html()),
addEditSavedReplyTemplate: _.template($("#add_edit_saved_filter_tmp").html()),
checkOptionAvailable: function() {
this.isReadyFlag = 0;
var self = this;
var fetchOptions = {};
_.each(ticketCollection.filterParameters, function (filter,key) {
if(jQuery.inArray(key, ['customer','tag','label']) !== -1) {
if(filter != null && filter != '') {
filter = filter.split(',');
if(typeof fetchOptions[key] === 'undefined')
fetchOptions[key] = [];
savedOptionsIds = [];
if(sideFilterModel.has(key)) {
_.each(sideFilterModel.get(key), function (option) {
savedOptionsIds.push(parseInt(option.id))
})
}
_.each(filter, function (item) {
if(jQuery.inArray(parseInt(item), savedOptionsIds) == -1) {
fetchOptions[key].push(parseInt(item));
self.isReadyFlag = 1;
}
})
}
}
});
return fetchOptions;
},
render: function() {
fetchOptions = this.checkOptionAvailable();
if(this.isReadyFlag && !this.isRecurrsiveCalls) {
this.isReadyFlag = 0;
this.isRecurrsiveCalls = 1;
sideFilterModel.loadFilterOptions(fetchOptions)
} else {
var appliedFilterOptions = {};
$('.uv-filtered-tags').html("")
var self = this;
var displayFlag = 0;
_.each(ticketCollection.filterParameters, function (filter, key) {
if(jQuery.inArray(key, ['customer', 'agent', 'priority', 'type', 'group', 'team', 'tag', 'mailbox', 'source', 'after', 'before', 'repliesLess', 'repliesMore']) !== -1) {
if(filter != null && filter != '') {
displayFlag = 1;
filter = filter.split(',');
appliedFilterOptions[key] = {'name': key.charAt(0).toUpperCase() + key.slice(1)};
appliedFilterOptions[key]['options'] = [];
_.each(filter, function (value) {
if(key == 'after' || key == 'before' || key == 'repliesLess' || key == 'repliesMore') {
$("#" + key + "-filter-input").val(filter)
appliedFilterOptions[key]['options'].push({'id': filter, 'name': filter});
} else {
savedOptions = sideFilterModel.get(key)
_.each(savedOptions, function (item) {
if(item.id == value) {
appliedFilterOptions[key]['options'].push({'id': item.id, 'name': item.name});
parent = $('#'+key+'-filter')
parent.find('.uv-filtered-tags').append("<a class='uv-btn-tag' href='#' data-id='" + item.id + "'>" + item.name + "<span class='uv-icon-remove-dark'></span></a>")
parent.find('input').val('')
}
})
}
});
}
} else if(jQuery.inArray(key, ['new','unassigned','notreplied','mine','starred','trashed']) !== -1) {
if(filter != null && filter != '') {
displayFlag = 1;
appliedFilterOptions[key] = {'name': "{{ 'Label'|trans }}"};
appliedFilterOptions[key]['options'] = [];
var optionName = (key == 'mine') ? "{% trans %}Assigned to me{% endtrans %}" : key.charAt(0).toUpperCase() + key.slice(1);
appliedFilterOptions[key]['options'].push({'id': key, 'name': optionName});
} else {
if(!ticketCollection.filterParameters.new && !ticketCollection.filterParameters.unassigned && !ticketCollection.filterParameters.notreplied && !ticketCollection.filterParameters.mine && !ticketCollection.filterParameters.starred && !ticketCollection.filterParameters.trashed &&! ticketCollection.filterParameters.label) {
appliedFilterOptions['all'] = {'name': "{{ 'Label'|trans }}"};
appliedFilterOptions['all']['options'] = [];
appliedFilterOptions['all']['options'].push({'id': 1, 'name': "{{ 'All'|trans }}"});
}
}
} else if(key == 'label') {
if(filter != null && filter != '') {
displayFlag = 1;
var labelModel = labelCollection.get(filter);
appliedFilterOptions[key] = {'name': "{{ 'Label'|trans }}"};
appliedFilterOptions[key]['options'] = [];
if(labelModel) {
appliedFilterOptions[key]['options'] = [];
appliedFilterOptions[key]['options'].push({'id': labelModel.attributes.id, 'name': labelModel.attributes.name});
} else {
savedOptions = sideFilterModel.get(key)
_.each(savedOptions, function (item) {
if(item.id == filter) {
appliedFilterOptions[key]['options'].push({'id': item.id, 'name': item.name});
}
});
}
} else {
if(!ticketCollection.filterParameters.new && !ticketCollection.filterParameters.unassigned && !ticketCollection.filterParameters.notreplied && !ticketCollection.filterParameters.mine && !ticketCollection.filterParameters.starred && !ticketCollection.filterParameters.trashed &&! ticketCollection.filterParameters.label) {
appliedFilterOptions['all'] = {'name': "{{ 'Label'|trans }}"};
appliedFilterOptions['all']['options'] = [];
appliedFilterOptions['all']['options'].push({'id': 1, 'name': "{{ 'All'|trans }}"});
}
}
} else if(key == 'status') {
appliedFilterOptions[key] = {'name': "{{ 'Status'|trans }}"};
appliedFilterOptions[key]['options'] = []
if(filter != null && filter != '' && filter != 1) {
displayFlag = 1;
appliedFilterOptions[key]['options'].push({'id': filter, 'name': $(".status-list li a[data-id='" + filter + "'] .name").text().trim()});
} else {
appliedFilterOptions[key]['options'].push({'id': 1,'name': "{{ 'Open'|trans }}"});
}
} else if(key == 'search') {
if(filter != null && filter != '') {
displayFlag = 1;
appliedFilterOptions[key] = {'name': "{{ 'Search Query'|trans }}"};
appliedFilterOptions[key]['options'] = [];
appliedFilterOptions[key]['options'].push({'id': filter, 'name': filter});
}
} else if(key == 'custom') {
if(filter != null && filter != '') {
self.$el.find('[data-filter="custom"]').remove();
displayFlag = 1;
var realKey = key;
var checkBoxStore = Array();
var dataValueValueSeprator = '_';
var columnSeperator = '|';
var multiOptions = filter.split(columnSeperator);
var multiKeyValue, multiKeyValueValue, ele, newEle;
_.each(multiOptions, function(valueData, indexData) {
if(!valueData)
return;
multiKeyValue = valueData.split(dataValueValueSeprator);
multiKeyValueValue = multiKeyValue[1].split(',');
eleSelector = '[data-value="' + multiKeyValue[0] + '"]';
ele = $(eleSelector);
if(ele[0].type == 'radio') {
var dataValue = multiKeyValue[0];
name = ele.parents('.uv-element-block:not(.radio)').find('label:first').text().trim()
value = $(eleSelector + '[value="' + multiKeyValue[1] + '"]').parent().next().text();
appliedFilterOptions['z-'+dataValue] = {'name': name, 'type': 'radio'};
appliedFilterOptions['z-'+dataValue]['options'] = [];
appliedFilterOptions['z-'+dataValue]['options'].push({'id': multiKeyValue[1], 'name': value});
} else if(ele[0].type == 'checkbox') {
var dataValue = multiKeyValue[0];
if($.inArray(dataValue, checkBoxStore) >= 0)
return;
checkBoxStore.push(dataValue);
name = ele.parents('.uv-element-block:not(.checkbox)').find('label:first').text().trim()
appliedFilterOptions['z-'+dataValue] = {'name': name, 'type': 'checkbox'};
appliedFilterOptions['z-'+dataValue]['options'] = [];
var optionName, optionValue;
_.each(multiKeyValueValue, function(value) {
newEle = $(eleSelector + '[value="' + value + '"]')
optionValue = dataValue + dataValueValueSeprator + newEle.val();
optionName = newEle.parent().next().text();
if(optionValue && optionName) {
appliedFilterOptions['z-'+dataValue]['options'].push({'id': value, 'name': optionName});
}
});
} else if(ele[0].type == 'select-multiple') {
var dataValue = multiKeyValue[0];
filter = multiKeyValueValue;
key = ele.attr('id');
name = ele.parents('.uv-element-block').find('label:first').text().trim()
appliedFilterOptions['z-'+dataValue] = {'name': name, 'type': 'select-multiple'};
appliedFilterOptions['z-'+dataValue]['options'] = [];
_.each(filter, function (value) {
var optionName;
if(optionName = $("#"+key+" option[value='" + value + "']").text()) {
appliedFilterOptions['z-'+dataValue]['options'].push({'id': value, 'name': optionName});
}
});
} else if(ele[0].type == 'text' || ele[0].type == 'number') {
filter = multiKeyValue[1];
if(filter != null && filter != '') {
filter = filter.replace(/\+/g,' ');
displayFlag = 1;
var dataValue = ele.attr('data-value');
name = ele.parents('.uv-element-block').find('label:first').text().trim()
appliedFilterOptions['z-'+dataValue] = {'name': name, 'type': ele[0].type};
appliedFilterOptions['z-'+dataValue]['options'] = [];
appliedFilterOptions['z-'+dataValue]['options'].push({'id': 1, 'name': filter});
}
}
})
}
}
if('after' == key || 'before' == key || 'repliesLess' == key || 'repliesMore' == key) {
$('#'+ key +'-filter-input').val(filter);
}
})
if(displayFlag) {
self.$el.find('.uv-filter-options .uv-action-buttons').html("")
if($("#saved-filter").val() != null && $("#saved-filter").val() != '' && Backbone.history.getFragment() == userFilters[$("#saved-filter").val()]['route']) {
self.$el.find('.uv-filter-options .uv-action-buttons').append("<a class='uv-btn edit-saved-reply' href='#'>{{ 'Edit'|trans }}</a>").show();
$('.uv-filter-paper .uv-customize').show()
} else {
self.$el.find('.uv-filter-options .uv-action-buttons').append("<a class='uv-btn new-saved-reply' href='#'>{{ 'New'|trans }}</a>").show();
if($("#saved-filter").val() != null && $("#saved-filter").val() != '') {
self.$el.find('.uv-filter-options .uv-action-buttons').append("<a class='uv-btn edit-saved-reply' href='#'>{{ 'Update'|trans }}</a>").show();
$('.uv-filter-paper .uv-customize').show()
} else {
$('.uv-filter-paper .uv-customize').hide()
}
}
} else {
$('.uv-filter-paper .uv-customize').hide()
}
this.appliedFilterOptions = appliedFilterOptions;
this.tempAppliedFilterOptions = jQuery.extend(true, {}, appliedFilterOptions);
}
},
searchFilterOption: function(e) {
self = this;
currentElement = Backbone.$(e.currentTarget);
dropdown = currentElement.siblings('.uv-dropdown-list');
var filterType = currentElement.attr('data-filter-type');
if(jQuery.inArray(filterType, ['customer', 'tag']) !== -1) {
self.searchFilterXhr(currentElement);
}
},
searchFilterXhr: _.debounce(function(currentElement) {
var parent = currentElement.parent();
if($('.uv-dropdown-other.uv-dropdown-btn-active').parent().attr('id') != parent.attr('id'))
return;
parent.find("li:not(.uv-no-results, .uv-filter-info)").remove();
parent.find(".uv-filter-info").show()
if(currentElement.val().length > 1) {
parent.append(this.loaderTemplate())
parent.find('.uv-filter-info').text("{% trans %}Searching{% endtrans %} ...")
if(self.xhrReq)
self.xhrReq.abort();
self.xhrReq = $.ajax({
url : "{{ path('helpdesk_member_ticket_collection_search_filter_options_xhr') }}",
type : 'GET',
data: {"type" : currentElement.attr('data-filter-type'), "query" : currentElement.val(), 'not' : ticketCollection.filterParameters[currentElement.attr('data-filter-type')]},
dataType : 'json',
success : function(response) {
self.xhrReq = 0;
parent.find('.uv-loader').remove()
parent.find('.uv-filter-info').text("{{ 'Type atleast 2 letters'|trans }}").hide();
if(response.length == 0) {
parent.find('.uv-no-results').show()
} else {
parent.find('.uv-no-results').hide();
_.each(response, function(item) {
if(currentElement.attr('data-filter-type') == 'customer') {
var img = item.smallThumbnail ? "{{ app.request.scheme ~'://' ~ app.request.httpHost ~ asset('') }}"+item.smallThumbnail : "{{ asset(default_customer_image_path)}}";
parent.find('.uv-dropdown-list ul').append("<li data-id='" + item.id + "'><img src='" + img + "'/>" + item.name + "</li>")
} else
parent.find('.uv-dropdown-list ul').append("<li data-id='" + item.id + "'>" + item.name + "</li>")
});
}
},
error: function (xhr) {
self.xhrReq = 0;
parent.find('.uv-loader').remove()
parent.find('.uv-no-results').hide();
parent.find('.uv-filter-info').text("{{ 'Type atleast 2 letters'|trans }}").show();
if(url = xhr.getResponseHeader('Location'))
window.location = url;
}
});
} else {
parent.find('.uv-no-results').hide();
}
},1000),
applySavedFilter: function(e) {
var element = Backbone.$(e.currentTarget);
if(element.val() != "") {
var element = Backbone.$(e.currentTarget);
router.navigate(userFilters[element.val()]['route'], {trigger: true});
} else {
router.navigate('', {trigger: true});
}
},
applyFilter: function(e) {
currentElement = Backbone.$(e.currentTarget);
if(currentElement.attr("data-id")) {
var flag = 1;
parent = currentElement.parents(".uv-field-block");
filterType = parent.find('input').attr('data-filter-type');
if(filterType == "customer" || filterType == 'tag') {
sideFilterModel.updateModel(filterType, {'id': currentElement.attr('data-id'), 'name': currentElement.text()})
parent.find(".uv-no-results").hide()
parent.find(".uv-filter-info").show().text("{{ 'Type atleast 2 letters'|trans }}")
parent.find("li:not(.uv-no-results, .uv-filter-info)").remove();
} else {
if(ticketCollection.filterParameters[filterType]) {
ids = ticketCollection.filterParameters[filterType].split(',')
if(jQuery.inArray(currentElement.attr('data-id'), ids) !== -1)
flag = 0;
}
}
parent.find('input').val('')
if(jQuery.inArray(filterType, ['agent', 'priority', 'type', 'group', 'team', 'mailbox', 'source']) !== -1) {
parent.find("li:not(.uv-no-results)").show()
}
if(flag) {
parent.find('.uv-filtered-tags').append("<a class='uv-btn-tag' href='#' data-id='" + currentElement.attr('data-id') + "'>"+currentElement.text()+"<span class='uv-icon-remove-dark'></span></a>")
ticketCollection.state.order = null;
ticketCollection.state.sortKey = null;
ticketCollection.state.currentPage = null;
ticketCollection.filterParameters[filterType] = this.joinTagValues(parent.find(".uv-filtered-tags"));
var queryString = app.appView.buildQuery($.param(ticketCollection.getValidParameters()));
router.navigate(queryString, {trigger: true});
}
} else {
filterType = currentElement.attr('data-filter-type');
if(filterType == 'before' || filterType == "after") {
ticketCollection.state.order = null;
ticketCollection.state.sortKey = null;
ticketCollection.state.currentPage = null;
ticketCollection.filterParameters[filterType] = currentElement.val();
var queryString = app.appView.buildQuery($.param(ticketCollection.getValidParameters()));
router.navigate(queryString, {trigger: true});
}
}
},
removeFilter: function(e) {
e.preventDefault()
currentElement = Backbone.$(e.currentTarget);
filterType = currentElement.parents('.uv-field-block').find('input').attr('data-filter-type')
var options = ticketCollection.filterParameters[filterType];
options = options.split(',');
var index = options.indexOf(currentElement.attr('data-id'));
options.splice(index, 1);
ticketCollection.state.order = null;
ticketCollection.state.sortKey = null;
ticketCollection.state.currentPage = null;
ticketCollection.filterParameters[filterType] = options.join(',');
currentElement.remove()
var queryString = app.appView.buildQuery($.param(ticketCollection.getValidParameters()));
router.navigate(queryString, {trigger: true});
},
joinTagValues: function(parent) {
var ids = new Array();
parent.find('.uv-btn-tag').each(function() {
ids.push($(this).attr('data-id'))
});
return ids.join();
},
filterByRepliesMoreThan: _.debounce(function(e) {
ticketCollection.state.order = null;
ticketCollection.state.sortKey = null;
ticketCollection.state.currentPage = null;
ticketCollection.filterParameters.repliesMore = $(e.target).val();
var queryString = app.appView.buildQuery($.param(ticketCollection.getValidParameters()));
router.navigate(queryString, { trigger: true });
}, 1000),
filterByRepliesLessThan: _.debounce(function(e) {
ticketCollection.state.order = null;
ticketCollection.state.sortKey = null;
ticketCollection.state.currentPage = null;
ticketCollection.filterParameters.repliesLess = $(e.target).val();
var queryString = app.appView.buildQuery($.param(ticketCollection.getValidParameters()));
router.navigate(queryString, { trigger: true });
}, 1000),
filterByCustom: _.debounce(function(e) {
var custom = '';
var checkBoxStore = Array();
var indexValueSeperator = '_';
var columnSeperator = '|';
Backbone.$('.custom-filter').each(function(){
if($(this).context.type == 'radio' && $(this).is(':checked')) {
custom += $(this).attr('data-value') + indexValueSeperator + $(this).val() + columnSeperator;
} else if($(this).context.type == 'checkbox' && $(this).is(':checked')) {
var checkboxValue = Array();
var dataValue = $(this).attr('data-value');
if($.inArray(dataValue, checkBoxStore) >= 0)
return;
$.each($('[data-value="'+ dataValue +'"]:checked'), function() {
checkboxValue.push($(this).val());
});
checkBoxStore.push(dataValue);
custom += dataValue + indexValueSeperator + checkboxValue.join() + columnSeperator;
} else if($(this).context.type == 'select-multiple' && $(this).val()) {
custom += $(this).attr('data-value') + indexValueSeperator + $(this).val().join() + columnSeperator;
}
})
Backbone.$('.search-custom').each(function(){
if($(this).val()){
custom += $(this).attr('data-value') + indexValueSeperator + $(this).val() + columnSeperator;
}
})
custom = custom.replace(/\|$/, '');
ticketCollection.state.order = null;
ticketCollection.state.sortKey = null;
ticketCollection.state.currentPage = null;
ticketCollection.filterParameters.custom = custom;
var queryString = app.appView.buildQuery($.param(ticketCollection.getValidParameters()));
router.navigate(queryString,{trigger: true});
}, 1000),
backToFilter: function(e) {
if(e)
e.preventDefault()
this.$el.find('.uv-filter-options').show()
this.$el.find('.uv-filter-edit').hide()
},
addEditSavedReply: function(e) {
e.preventDefault()
var context = {};
this.tempAppliedFilterOptions = jQuery.extend(true, {}, this.appliedFilterOptions);
if(Backbone.$(e.currentTarget).is('.new-saved-reply')) {
context = {'id': 0, 'name': '', 'is_default': 0, 'filters': this.tempAppliedFilterOptions};
} else {
context = userFilters[$("#saved-filter").val()];
context.filters = this.tempAppliedFilterOptions;
userFilters[$("#saved-filter").val()]
}
$('.uv-filter-edit').html('')
$('.uv-filter-edit').append(this.addEditSavedReplyTemplate(context));
this.$el.find('.uv-filter-options').hide()
this.$el.find('.uv-filter-edit').show()
},
removeSavedFilterOption: function(e) {
e.preventDefault()
var parent = Backbone.$(e.currentTarget).parents('.uv-element-block');
var elementIndex = Backbone.$(e.currentTarget).index();
var filterType = parent.attr('data-filter');
var filterId = Backbone.$(e.currentTarget).attr('data-id');
delete this.tempAppliedFilterOptions[filterType]['options'][elementIndex]
Backbone.$(e.currentTarget).remove()
if(!parent.find('.uv-btn-tag').length) {
parent.remove()
delete this.tempAppliedFilterOptions[filterType];
}
if(this.getSavedFilterRoute() == '') {
this.backToFilter();
}
},
saveSavedFilter: function(e) {
e.preventDefault()
if(Backbone.$(e.currentTarget).hasClass('save-filter'))
this.saveFilterAjax('POST')
else {
this.saveFilterAjax('PUT')
}
},
saveFilterAjax: function(method) {
var inputElement = $('.uv-filter-edit input.name');
inputElement.removeClass('uv-field-error');
$('.uv-field-message').remove()
if(inputElement.val() != undefined && inputElement.val() == '') {
inputElement.addClass('uv-field-error');
inputElement.parent().after("<span class='uv-field-message'>{{ 'This field is mandatory'|trans }}</span>");
} else {
var data = $('.uv-filter-edit form').serializeObject();
data['route'] = this.getSavedFilterRoute();
app.appView.showLoader();
self = this;
$.ajax({
url : "{{ path('helpdesk_member_saved_filters_xhr') }}",
type : method,
data: data,
dataType : 'json',
success : function(response) {
app.appView.hideLoader();
userFilters[response.filter.id] = response.filter;
$("#saved-filter").html("<option value=''>-- {{ 'Saved Filter'|trans }} --</option>")
_.each(userFilters, function(filter, key) {
if(response.filter.is_default && filter.id != response.filter.id)
userFilters[key]['is_default'] = 0;
var selected = '';
if(response.filter.id == filter.id)
selected = "selected";
$("#saved-filter").append("<option value='" + filter.id + "' selected='" + selected + "''>" + filter.name + "</option>")
})
$("#saved-filter").val(response.filter.id)
app.appView.renderResponseAlert(response);
self.render();
self.backToFilter();
},
error: function (xhr) {
app.appView.hideLoader();
if(url = xhr.getResponseHeader('Location'))
window.location = url;
}
});
}
},
getSavedFilterRoute: function() {
var filterParameters = {};
temp = [];
_.each(this.tempAppliedFilterOptions, function (filter, key) {
if(jQuery.inArray(key, ['customer', 'agent', 'priority', 'type', 'group', 'team', 'tag', 'mailbox', 'source', 'after', 'before', 'repliesLess', 'repliesMore']) !== -1) {
var ids = [];
_.each(filter['options'], function (item) {
ids.push(item.id)
});
filterParameters[key] = ids.join(',')
} else if(jQuery.inArray(key, ['new','unassigned','notreplied','mine','starred','trashed']) !== -1) {
filterParameters[key] = 1;
} else if(jQuery.inArray(key, ['label', 'status', 'search']) !== -1) {
_.each(filter['options'], function (item) {
filterParameters[key] = item.id;
});
} else {
custom = key.split("z-")
tempKey = custom[1];
if(filter.type == 'text' || filter.type == 'number') {
_.each(filter['options'], function (item) {
temp.push(tempKey + '_' + item.name)
});
} else if(filter.type == 'radio') {
var ids = [];
_.each(filter['options'], function (item) {
ids.push(item.id)
});
temp.push(tempKey + '_' + ids.join(','))
} else if(filter.type == 'checkbox' || filter.type == 'select-multiple') {
var ids = [];
_.each(filter['options'], function (item) {
ids.push(item.id)
});
temp.push(tempKey + '_' + ids.join(','))
}
}
})
if(temp.length)
filterParameters['custom'] = temp.join('|');
return app.appView.buildQuery($.param(filterParameters));
},
removeSavedFilter: function(e) {
e.preventDefault()
self = this;
app.appView.showLoader();
$.ajax({
url : "{{ path('helpdesk_member_saved_filters_xhr') }}/" + $("#saved-filter").val(),
type : 'DELETE',
dataType : 'json',
success : function(response) {
app.appView.hideLoader();
delete userFilters[$("#saved-filter").val()];
$("#saved-filter").html("<option value=''>-- {{ 'Saved Filter'|trans }} --</option>")
_.each(userFilters, function(filter, key) {
$("#saved-filter").append("<option value='" + filter.id + "'>" + filter.name + "</option>")
})
$("#saved-filter").val('')
app.appView.renderResponseAlert(response);
self.render();
self.backToFilter();
},
error: function (xhr) {
app.appView.hideLoader();
if(url = xhr.getResponseHeader('Location'))
window.location = url;
}
});
}
});
// Ticket Label Item View
var LabelItemView = Backbone.View.extend({
tagName: 'li',
className: 'uv-customize-wrapper',
template: _.template($("#custom_label_tmp").html()),
events: {
'click .delete': 'confirmRemove',
'click .label-color.dropdown .fa-caret-down' : 'showUpdateLabelPopup'
},
render: function() {
this.$el.html(this.template(this.model.toJSON()));
if (ticketCollection.filterParameters.label != '') {
if (ticketCollection.filterParameters.label == this.model.id) {
this.$el.find('a').addClass('uv-aside-active');
}
}
return this;
}
});
// Ticket List Item View
var TicketItem = Backbone.View.extend({
tagName: "tr",
template: _.template($("#ticket_list_item_tmp").html()),
events: {
'click .uv-star': "updateStar",
},
render: function () {
this.model.set({
path: pathToTicket.replace('replaceId', this.model.attributes.id)
});
this.$el.html(this.template(this.model.toJSON()));
if (this.model.attributes.isAgentView != true) {
this.$el.addClass('unread')
}
if (!this.model.attributes.agent) {
this.$el.addClass('not-assigned')
}
return this;
},
updateStar: function(e) {
e.preventDefault();
if (Backbone.$(e.currentTarget).hasClass('uv-star-active')) {
Backbone.$(e.currentTarget).removeClass('uv-star-active');
} else {
Backbone.$(e.currentTarget).addClass('uv-star-active');
}
this.model.save({
id: this.model.id
}, {
patch: true,
url: "{{ path('helpdesk_member_bookmark_ticket_xhr') }}",
success: function (model, response, options) {},
error: function (model, xhr, options) {
if (url = xhr.getResponseHeader('Location')) {
window.location = url;
}
}
});
}
});
// Ticket List View
var TicketList = Backbone.View.extend({
el: $(".uv-table table"),
initialize: function() {
this.render();
},
events: {
'change .mass-action-checkbox' : 'showBulkOptions',
},
showBulkOptions: function() {
var count = 0;
this.$el.find('.mass-action-checkbox').each(function() {
if ($(this).is(':checked')) {
count++;
}
});
if (count == $('.mass-action-checkbox').length) {
$('.select-all-checkbox').prop('checked', true);
} else {
$('.select-all-checkbox').prop('checked', false);
}
if (count) {
$('.uv-action-bar .filter').parent().hide();
$('.uv-action-bar .mass-action').parent().addClass("uv-width-100").show();
$('.uv-action-bar-col-rt').hide()
} else {
$('.uv-action-bar .mass-action').parent().removeClass("uv-width-100").hide();
$('.uv-action-bar .filter').parent().show();
$('.uv-action-bar-col-rt').show();
}
},
render: function () {
this.$el.find('tbody').html('');
if (ticketCollection.length) {
$('.select-all-checkbox').prop( "disabled", false );
_.each(ticketCollection.models, function (item) {
ticketQuickViewCollection.add(new TicketQuickViewModel({id: item.id}))
this.renderTicket(item);
}, this);
} else {
$('.select-all-checkbox').prop( "disabled", true );
this.$el.find('tbody').append("<tr style='text-align: center;'><td colspan='11'>{% trans %}No Record Found{% endtrans %}</td></tr>")
}
filter.filterAssetsVisibilityOnLoad()
app.appView.relativeTime()
},
renderTicket: function (item) {
var ticketItem = new TicketItem({
model: item
});
this.$el.find('tbody').append(ticketItem.render().el);
}
});
// Ticket Label List View
var LabelListView = Backbone.View.extend({
el: $(".uv-aside"),
template: _.template($("#predefined_label_tmp").html()),
statusTemplate: _.template($("#ticket_status_list_tmp").html()),
addEditLabelTemplate: _.template($("#add_edit_label_tmp").html()),
events: {
'click .status-list li a': "filterByStatus",
'click .add-new-label, .uv-customize': 'addEditLabel',
'click #back-to-labels': 'backToLabels',
'click .uv-color-block': 'setLabelColor',
'click .add-update-btn': 'saveLabel',
'click .uv-add-edit-label .uv-btn-remove': 'removeLabel'
},
render: function() {
var active = "";
if (ticketCollection.filterParameters.new != '') {
active = "new";
} else if (ticketCollection.filterParameters.unassigned != '') {
active = "unassigned";
} else if (ticketCollection.filterParameters.notreplied != '') {
active = "notreplied";
}
if (ticketCollection.filterParameters.mine != '') {
active = "mine";
} else if (ticketCollection.filterParameters.starred != '') {
active = "starred";
} else if (ticketCollection.filterParameters.trashed != '') {
active = "trashed";
} else if (ticketCollection.filterParameters.label != '') {
active = "label";
}
var data = {
'labelDetails' : labelDetails,
'active' : active
}
this.$el.find('.predefined-label-list').html(this.template(data));
labelCollection.reset();
labelCollection.set(labelDetails.custom);
this.updateMassLabelList()
},
updateMassLabelList: function() {
this.$el.find('.uv-aside-custom').html('');
var labelOptionHtml = "";
if(labelCollection.length) {
_.each(labelCollection.models, function (item) {
this.renderLabelItem(item);
labelOptionHtml = labelOptionHtml + "<li data-index='" + item.id + "'><a href='#'>" + item.attributes.name + "</a></li>";
}, this);
}
labelOptionHtml = labelOptionHtml ? labelOptionHtml : "<li data-index='0'>{{ 'No Label Created'|trans }}</li>";
$(".mass-action ul.label").html(labelOptionHtml);
this.renderStatus();
},
renderLabelItem : function (item) {
var labelItem = new LabelItemView({
model: item
});
this.$el.find('.uv-aside-custom').append(labelItem.render().el);
},
renderStatus : function() {
if(typeof ticketCollection.filterParameters.status == "undefined" || ticketCollection.filterParameters.status == null)
var active = 0;
else
var active = ticketCollection.filterParameters.status;
this.$el.find('.uv-aside-active').parent().find('.status-list').remove()
this.$el.find('.uv-aside-active').parent().append(this.statusTemplate({status : statusListDetails, active : active}));
},
filterByStatus : function(e) {
e.preventDefault()
ticketCollection.reset();
ticketCollection.state.order = null;
ticketCollection.state.sortKey = null;
ticketCollection.state.currentPage = null;
ticketCollection.filterParameters.status = Backbone.$(e.currentTarget).attr('data-id');
var queryString = app.appView.buildQuery($.param(ticketCollection.getValidParameters()));
router.navigate(queryString, {trigger: true});
},
addEditLabel: function(e) {
e.preventDefault()
currentElement = Backbone.$(e.currentTarget);
if(currentElement.hasClass('add-new-label'))
$('.uv-add-edit-label').html(this.addEditLabelTemplate({id : 0, name : '', colorCode: ''}))
else
$('.uv-add-edit-label').html(this.addEditLabelTemplate(labelCollection.get(currentElement.siblings('a').attr('data-id')).toJSON()))
$('.uv-aside-default').hide()
$('.uv-add-edit-label').show()
},
backToLabels: function(e) {
if(e)
e.preventDefault()
$('.uv-aside-default').show()
$('.uv-add-edit-label').hide()
},
setLabelColor: function(e) {
$('.uv-color-block').removeClass('uv-color-active');
Backbone.$(e.currentTarget).addClass('uv-color-active');
},
saveLabel : function(e) {
e.preventDefault()
var inputElement = $('.uv-add-edit-label input');
inputElement.removeClass('uv-field-error');
$('.uv-field-message').remove()
var labelName = app.appView.stripHTML(inputElement.val());
if(labelName == "") {
inputElement.addClass('uv-field-error');
inputElement.parent().after("<span class='uv-field-message'>{{ 'This field is mandatory'|trans }}</span>");
} else {
var labelId = parseInt($('.uv-aside-option').attr('data-id'))
model = labelId ? labelCollection.get(labelId) : new LabelModel()
model.set({name: labelName, colorCode: $('.uv-color-block.uv-color-active').attr('data-color')});
self = this;
var flag = labelCollection.isLabelExist(labelName, labelId);
if(flag) {
app.appView.showLoader();
model.save({}, {
success: function (model, response, options) {
app.appView.hideLoader();
if(response.alertClass == "success") {
if(!labelId) {
labelCollection.add(model);
}
self.updateMassLabelList()
app.appView.renderResponseAlert(response);
} else {
inputElement.addClass('uv-field-error');
inputElement.parent().after("<span class='uv-field-message'>" + response.alertMessage + "</span>");
}
self.backToLabels();
},
error: function (model, xhr, options) {
if(url = xhr.getResponseHeader('Location'))
window.location = url;
app.appView.hideLoader();
app.appView.renderResponseAlert(warningResponse);
}
});
} else {
inputElement.parent().after("<span class='uv-field-message'>{{ 'Label with same name already exist.'|trans }}</span>");
}
}
},
removeLabel: function(e) {
e.preventDefault()
self = this;
app.appView.showLoader();
model = labelCollection.get($('.uv-aside-option').attr('data-id'))
model.destroy({
success : function (model, response, options) {
app.appView.hideLoader();
self.updateMassLabelList()
app.appView.renderResponseAlert(response);
self.backToLabels();
},
error: function (model, xhr, options) {
if(url = xhr.getResponseHeader('Location'))
window.location = url;
app.appView.hideLoader();
app.appView.renderResponseAlert(warningResponse);
}
});
}
});
// Bulk Action View
var BulkActionView = Backbone.View.extend({
el: $(".mass-action"),
currentEvent: null,
events: {
'click ul li, #mass-restore': 'massAction',
'click #mass-delete, #mass-delete-forever': 'confirmRemove',
'click #mass-restore': 'confirmRestore'
},
massAction: function(e) {
e.preventDefault();
if(!parseInt(Backbone.$(e.currentTarget).attr('data-index')))
return;
var data = {};
data['actionType'] = Backbone.$(e.currentTarget).parents('ul').attr('data-action') ? Backbone.$(e.currentTarget).parents('ul').attr('data-action') : Backbone.$(e.currentTarget).attr('data-action');
data['targetId'] = Backbone.$(e.currentTarget).attr('data-index');
data['ids'] = this.getCheckedTicketIds();
ticketCollection.batchOperation(data);
this.hideBulkOptions();
},
removeItem: function(e) {
var data = {};
if(Backbone.$(this.currentEvent.currentTarget).is("#mass-delete"))
data['actionType'] = "trashed";
else if(Backbone.$(this.currentEvent.currentTarget).is("#mass-delete-forever"))
data['actionType'] = "delete";
data['ids'] = this.getCheckedTicketIds();
ticketCollection.batchOperation(data);
this.hideBulkOptions();
},
restoreItem: function(e) {
var data = {};
data['actionType'] = "restored";
data['ids'] = this.getCheckedTicketIds();
ticketCollection.batchOperation(data);
this.hideBulkOptions();
},
getCheckedTicketIds: function() {
var ids = new Array();
$('.mass-action-checkbox').each(function() {
if($(this).is(':checked')) {
ids.push($(this).val());
}
});
return ids;
},
confirmRemove: function(e) {
e.preventDefault();
this.currentEvent = e;
app.appView.openConfirmModal(this)
},
confirmRestore: function(e) {
e.preventDefault();
app.appView.openConfirmModal(this, 'restoreItem')
},
hideBulkOptions : function() {
$('.uv-action-bar .mass-action').parent().removeClass("uv-width-100").hide();
$('.uv-action-bar .filter').parent().show();
$('.uv-action-bar-col-rt').show()
}
});
var PageView = Backbone.View.extend({
el: '.uv-paper',
events : {
'change .select-all-checkbox' : 'selectAll',
'click .uv-quick-view-trigger, .quick-view-navigation .uv-btn-tag': 'navigateQuickView',
},
quickViewTemplate: _.template($("#ticket_quick_view_tmp").html()),
navigateQuickView : function(e) {
e.preventDefault();
//$("#quick-view-modal .uv-loader").hide()
var currentElement = Backbone.$(e.currentTarget);
ticketId = currentElement.attr('data-id');
if(ticketId) {
if(model = ticketQuickViewCollection.isModelSynced(ticketId)) {
this.renderQuickView(model.toJSON())
} else {
var self = this;
if(currentElement.hasClass("uv-quick-view-trigger"))
app.appView.showLoader();
if(ticketQuickViewCollection.get(ticketId)) {
navData = ticketQuickViewCollection.getNextPrev(ticketId);
requiredNext = (!navData.next && app.pager.paginationData.next) ? 1 : 0;
requiredPrev = (!navData.previous && app.pager.paginationData.previous) ? 1 : 0;
} else
requiredNext = requiredPrev = 1;
if(self.xhrReq)
self.xhrReq.abort();
$("#quick-view-modal .uv-loader").show()
self.xhrReq = $.ajax({
url : "{{ path('helpdesk_member_ticket_quick_view_xhr') }}",
type : 'GET',
data : {ticketId : ticketId, next: requiredNext, previous: requiredPrev},
dataType : 'json',
success : function(response) {
self.xhrReq = 0;
if(currentElement.hasClass("uv-quick-view-trigger"))
app.appView.hideLoader();
if(response.next == undefined)
response.next = navData.next
if(response.previous == undefined)
response.previous = navData.previous
response.isSynced = 1
response.path = pathToTicket.replace('replaceId', response.incrementId);
if(ticketQuickViewCollection.get(ticketId))
ticketQuickViewCollection.set(response,{remove: false})
else
ticketQuickViewCollection.add(new TicketQuickViewModel(response))
self.renderQuickView(response)
},
error: function (xhr) {
self.xhrReq = 0;
if(url = xhr.getResponseHeader('Location'))
window.location = url;
app.appView.hideLoader();
}
});
}
}
},
renderQuickView: function(response) {
$('#quick-view-modal .uv-pop-up-box').html(this.quickViewTemplate(response));
app.appView.openModal('quick-view-modal')
$('#quick-view-modal .message').find('img').removeAttr('crossorigin');
$('#quick-view-modal .message').find('.uv-icon-ellipsis').remove();
$('#quick-view-modal .message').find('.helpdesk_blockquote').eq(0).before("<span class='uv-icon-ellipsis uv-ellipsis-mirror'></span>").hide();
app.appView.relativeTime();
},
selectAll : function(e) {
if(Backbone.$(e.currentTarget).is(':checked')) {
$('.mass-action-checkbox').prop('checked', true);
$('.uv-action-bar .filter').parent().hide();
$('.uv-action-bar .mass-action').parent().addClass("uv-width-100").show();
$('.uv-action-bar-col-rt').hide()
} else {
var count = 0;
$('.mass-action-checkbox').each(function() {
if($(this).is(':checked'))
count++;
});
if(count == $('.mass-action-checkbox').length) {
$('.mass-action-checkbox').prop('checked', false);
$('.uv-action-bar .filter').parent().show();
$('.uv-action-bar .mass-action').parent().removeClass("uv-width-100").hide();
$('.uv-action-bar-col-rt').show()
}
}
},
});
// Ticket Router
Router = Backbone.Router.extend({
routes: {
'page/:number(/sort/:sortField)(/direction/:order)' : 'paginate',
'status/:status(/search/:query)(/agent/:agent)(/customer/:customer)(/priority/:priority)(/type/:type)(/group/:group)(/team/:team)(/tag/:tag)(/mailbox/:mailbox)(/source/:source)(/after/:after)(/before/:before)(/repliesLess/:repliesLess)(/repliesMore/:repliesMore)(/custom/:custom)(/page/:number)(/sort/:sortField)(/direction/:order)': 'filterByStatus',
'search/:query(/agent/:agent)(/customer/:customer)(/priority/:priority)(/type/:type)(/group/:group)(/team/:team)(/tag/:tag)(/mailbox/:mailbox)(/source/:source)(/after/:after)(/before/:before)(/repliesLess/:repliesLess)(/repliesMore/:repliesMore)(/custom/:custom)(/page/:number)(/sort/:sortField)(/direction/:order)': 'filterByQuery',
'agent/:agent(/customer/:customer)(/priority/:priority)(/type/:type)(/group/:group)(/team/:team)(/tag/:tag)(/mailbox/:mailbox)(/source/:source)(/after/:after)(/before/:before)(/repliesLess/:repliesLess)(/repliesMore/:repliesMore)(/custom/:custom)(/page/:number)(/sort/:sortField)(/direction/:order)': 'filterByAgent',
'customer/:customer(/priority/:priority)(/type/:type)(/group/:group)(/team/:team)(/tag/:tag)(/mailbox/:mailbox)(/source/:source)(/after/:after)(/before/:before)(/repliesLess/:repliesLess)(/repliesMore/:repliesMore)(/custom/:custom)(/page/:number)(/sort/:sortField)(/direction/:order)': 'filterByCustomer',
'priority/:priority(/type/:type)(/group/:group)(/team/:team)(/tag/:tag)(/mailbox/:mailbox)(/source/:source)(/after/:after)(/before/:before)(/repliesLess/:repliesLess)(/repliesMore/:repliesMore)(/custom/:custom)(/page/:number)(/sort/:sortField)(/direction/:order)': 'filterByPriority',
'type/:type(/group/:group)(/team/:team)(/tag/:tag)(/mailbox/:mailbox)(/source/:source)(/after/:after)(/before/:before)(/repliesLess/:repliesLess)(/repliesMore/:repliesMore)(/custom/:custom)(/page/:number)(/sort/:sortField)(/direction/:order)': 'filterByType',
'group/:group(/team/:team)(/tag/:tag)(/mailbox/:mailbox)(/source/:source)(/after/:after)(/before/:before)(/repliesLess/:repliesLess)(/repliesMore/:repliesMore)(/custom/:custom)(/page/:number)(/sort/:sortField)(/direction/:order)': 'filterByGroup',
'team/:team(/tag/:tag)(/mailbox/:mailbox)(/source/:source)(/after/:after)(/before/:before)(/repliesLess/:repliesLess)(/repliesMore/:repliesMore)(/custom/:custom)(/page/:number)(/sort/:sortField)(/direction/:order)': 'filterBySubGroup',
'tag/:tag(/mailbox/:mailbox)(/source/:source)(/after/:after)(/before/:before)(/repliesLess/:repliesLess)(/repliesMore/:repliesMore)(/custom/:custom)(/page/:number)(/sort/:sortField)(/direction/:order)': 'filterByTags',
'mailbox/:mailbox(/source/:source)(/after/:after)(/before/:before)(/repliesLess/:repliesLess)(/repliesMore/:repliesMore)(/custom/:custom)(/page/:number)(/sort/:sortField)(/direction/:order)': 'filterByMailbox',
'source/:source(/after/:after)(/before/:before)(/repliesLess/:repliesLess)(/repliesMore/:repliesMore)(/custom/:custom)(/page/:number)(/sort/:sortField)(/direction/:order)': 'filterBySource',
'after/:after(/before/:before)(/repliesLess/:repliesLess)(/repliesMore/:repliesMore)(/custom/:custom)(/page/:number)(/sort/:sortField)(/direction/:order)': 'filterByAfter',
'before/:before(/repliesLess/:repliesLess)(/repliesMore/:repliesMore)(/custom/:custom)(/page/:number)(/sort/:sortField)(/direction/:order)': 'filterByBefore',
'repliesLess/:repliesLess(/repliesMore/:repliesMore)(/custom/:custom)(/page/:number)(/sort/:sortField)(/direction/:order)': 'filterByRepliesLesserCount',
'repliesMore/:repliesMore(/custom/:custom)(/page/:number)(/sort/:sortField)(/direction/:order)': 'filterByRepliesGreaterCount',
'custom/:custom(/page/:number)(/sort/:sortField)(/direction/:order)': 'filterByCustom',
'label/:labelId(/status/:status)(/search/:query)(/agent/:agent)(/customer/:customer)(/priority/:priority)(/type/:type)(/group/:group)(/team/:team)(/tag/:tag)(/mailbox/:mailbox)(/source/:source)(/after/:after)(/before/:before)(/repliesLess/:repliesLess)(/repliesMore/:repliesMore)(/custom/:custom)(/page/:number)(/sort/:sortField)(/direction/:order)': 'filterByLabel',
'new(/status/:status)(/search/:query)(/agent/:agent)(/customer/:customer)(/priority/:priority)(/type/:type)(/group/:group)(/team/:team)(/tag/:tag)(/mailbox/:mailbox)(/source/:source)(/after/:after)(/before/:before)(/repliesLess/:repliesLess)(/repliesMore/:repliesMore)(/custom/:custom)(/page/:number)(/sort/:sortField)(/direction/:order)': 'filterNew',
'unassigned(/status/:status)(/search/:query)(/agent/:agent)(/customer/:customer)(/priority/:priority)(/type/:type)(/group/:group)(/team/:team)(/tag/:tag)(/mailbox/:mailbox)(/source/:source)(/after/:after)(/before/:before)(/repliesLess/:repliesLess)(/repliesMore/:repliesMore)(/custom/:custom)(/page/:number)(/sort/:sortField)(/direction/:order)': 'filterUnassigned',
'notreplied(/status/:status)(/search/:query)(/agent/:agent)(/customer/:customer)(/priority/:priority)(/type/:type)(/group/:group)(/team/:team)(/tag/:tag)(/mailbox/:mailbox)(/source/:source)(/after/:after)(/before/:before)(/repliesLess/:repliesLess)(/repliesMore/:repliesMore)(/custom/:custom)(/page/:number)(/sort/:sortField)(/direction/:order)': 'filterNotReplied',
'mine(/status/:status)(/search/:query)(/agent/:agent)(/customer/:customer)(/priority/:priority)(/type/:type)(/group/:group)(/team/:team)(/tag/:tag)(/mailbox/:mailbox)(/source/:source)(/after/:after)(/before/:before)(/repliesLess/:repliesLess)(/repliesMore/:repliesMore)(/custom/:custom)(/page/:number)(/sort/:sortField)(/direction/:order)': 'filterMine',
'starred(/status/:status)(/search/:query)(/agent/:agent)(/customer/:customer)(/priority/:priority)(/type/:type)(/group/:group)(/team/:team)(/tag/:tag)(/mailbox/:mailbox)(/source/:source)(/after/:after)(/before/:before)(/repliesLess/:repliesLess)(/repliesMore/:repliesMore)(/custom/:custom)(/page/:number)(/sort/:sortField)(/direction/:order)': 'filterstarred',
'trashed(/status/:status)(/search/:query)(/agent/:agent)(/customer/:customer)(/priority/:priority)(/type/:type)(/group/:group)(/team/:team)(/tag/:tag)(/mailbox/:mailbox)(/source/:source)(/after/:after)(/before/:before)(/repliesLess/:repliesLess)(/repliesMore/:repliesMore)(/custom/:custom)(/page/:number)(/sort/:sortField)(/direction/:order)': 'filterTrashed',
'': 'initializeList'
},
initializeList : function() {
$("#saved-filter").val('');
this.resetParams('', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '');
this.fetch(null, null, null);
},
paginate : function(number,sortField,order) {
this.resetParams('','','','','','','','','','','','','','','','','','','','','', '');
this.fetch(number,sortField,order);
},
filterByLabel : function(labelId,status,query,agent,customer,priority,type,group,team,tag,mailbox,source,after,before,repliesLess,repliesMore,custom,number,sortField,order) {
this.resetParams(labelId,'','','','','','',status,query,agent,customer,priority,type,group,team,tag,mailbox,source,after,before,repliesLess,repliesMore,custom);
this.fetch(number,sortField,order);
},
filterNew : function(status,query,agent,customer,priority,type,group,team,tag,mailbox,source,after,before,repliesLess,repliesMore,custom,number,sortField,order) {
this.resetParams('',1,'','','','','',status,query,agent,customer,priority,type,group,team,tag,mailbox,source,after,before,repliesLess,repliesMore,custom);
this.fetch(number,sortField,order);
},
filterUnassigned : function(status,query,agent,customer,priority,type,group,team,tag,mailbox,source,after,before,repliesLess,repliesMore,custom,number,sortField,order) {
this.resetParams('','',1,'','','','',status,query,agent,customer,priority,type,group,team,tag,mailbox,source,after,before,repliesLess,repliesMore,custom);
this.fetch(number,sortField,order);
},
filterNotReplied: function(status,query,agent,customer,priority,type,group,team,tag,mailbox,source,after,before,repliesLess,repliesMore,custom,number,sortField,order) {
this.resetParams('','','',1,'','','',status,query,agent,customer,priority,type,group,team,tag,mailbox,source,after,before,repliesLess,repliesMore,custom);
this.fetch(number,sortField,order);
},
filterMine : function(status,query,agent,customer,priority,type,group,team,tag,mailbox,source,after,before,repliesLess,repliesMore,custom,number,sortField,order) {
this.resetParams('','','','',1,'','',status,query,agent,customer,priority,type,group,team,tag,mailbox,source,after,before,repliesLess,repliesMore,custom);
this.fetch(number,sortField,order);
},
filterstarred : function(status,query,agent,customer,priority,type,group,team,tag,mailbox,source,after,before,repliesLess,repliesMore,custom,number,sortField,order) {
this.resetParams('','','','','',1,'',status,query,agent,customer,priority,type,group,team,tag,mailbox,source,after,before,repliesLess,repliesMore,custom);
this.fetch(number,sortField,order);
},
filterTrashed : function(status,query,agent,customer,priority,type,group,team,tag,mailbox,source,after,before,repliesLess,repliesMore,custom,number,sortField,order) {
this.resetParams('','','','','','',1,status,query,agent,customer,priority,type,group,team,tag,mailbox,source,custom);
this.fetch(number,sortField,order);
},
filterByStatus : function(status,query,agent,customer,priority,type,group,team,tag,mailbox,source,after,before,repliesLess,repliesMore,custom,number,sortField,order) {
this.resetParams('','','','','','','',status,query,agent,customer,priority,type,group,team,tag,mailbox,source,after,before,repliesLess,repliesMore,custom);
this.fetch(number,sortField,order);
},
filterByQuery : function(query,agent,customer,priority,type,group,team,tag,mailbox,source,after,before,repliesLess,repliesMore,custom,number,sortField,order) {
this.resetParams('','','','','','','','',query,agent,customer,priority,type,group,team,tag,mailbox,source,after,before,repliesLess,repliesMore,custom);
this.fetch(number,sortField,order);
},
filterByAgent : function(agent,customer,priority,type,group,team,tag,mailbox,source,after,before,repliesLess,repliesMore,custom,number,sortField,order) {
this.resetParams('','','','','','','','','',agent,customer,priority,type,group,team,tag,mailbox,source,after,before,repliesLess,repliesMore,custom);
this.fetch(number,sortField,order);
},
filterByCustomer : function(customer,priority,type,group,team,tag,mailbox,source,after,before,repliesLess,repliesMore,custom,number,sortField,order) {
this.resetParams('','','','','','','','','','',customer,priority,type,group,team,tag,mailbox,source,after,before,repliesLess,repliesMore,custom);
this.fetch(number,sortField,order);
},
filterByPriority : function(priority,type,group,team,tag,mailbox,source,after,before,repliesLess,repliesMore,custom,number,sortField,order) {
this.resetParams('','','','','','','','','','','',priority,type,group,team,tag,mailbox,source,after,before,repliesLess,repliesMore,custom);
this.fetch(number,sortField,order);
},
filterByType : function(type,group,team,tag,mailbox,source,after,before,repliesLess,repliesMore,custom,number,sortField,order) {
this.resetParams('','','','','','','','','','','','',type,group,team,tag,mailbox,source,after,before,repliesLess,repliesMore,custom);
this.fetch(number,sortField,order);
},
filterByGroup : function(group,team,tag,mailbox,source,after,before,repliesLess,repliesMore,custom,number,sortField,order) {
this.resetParams('','','','','','','','','','','','','',group,team,tag,mailbox,source,after,before,repliesLess,repliesMore,custom);
this.fetch(number,sortField,order);
},
filterBySubGroup : function(team,tag,mailbox,source,after,before,repliesLess,repliesMore,custom,number,sortField,order) {
this.resetParams('','','','','','','','','','','','','','',team,tag,mailbox,source,after,before,repliesLess,repliesMore,custom);
this.fetch(number,sortField,order);
},
filterByTags : function(tag,mailbox,source,after,before,repliesLess,repliesMore,custom,number,sortField,order) {
this.resetParams('','','','','','','','','','','','','','','',tag,mailbox,source,after,before,repliesLess,repliesMore,custom);
this.fetch(number,sortField,order);
},
filterByMailbox : function(mailbox,source,after,before,repliesLess,repliesMore,custom,number,sortField,order) {
this.resetParams('','','','','','','','','','','','','','','','',mailbox,source,after,before,repliesLess,repliesMore,custom);
this.fetch(number,sortField,order);
},
filterBySource: function(source,after,before,repliesLess,repliesMore,custom,number,sortField,order) {
this.resetParams('','','','','','','','','','','','','','','','','',source,after,before,repliesLess,repliesMore,custom);
this.fetch(number,sortField,order);
},
filterByAfter: function(after,before,repliesLess,repliesMore,custom,number,sortField,order) {
this.resetParams('','','','','','','','','','','','','','','','','','',after,before,repliesLess,repliesMore,custom);
this.fetch(number,sortField,order);
},
filterByBefore: function(before,repliesLess,repliesMore,custom,number,sortField,order) {
this.resetParams('','','','','','','','','','','','','','','','','','','',before,repliesLess,repliesMore,custom);
this.fetch(number,sortField,order);
},
filterByRepliesLesserCount: function(repliesLess, repliesMore, custom, number, sortField, order) {
this.resetParams('','','','','','','','','','','','','','','','','','','','',repliesLess,repliesMore,custom);
this.fetch(number,sortField,order);
},
filterByRepliesGreaterCount: function(repliesMore, custom, number, sortField, order) {
this.resetParams('','','','','','','','','','','','','','','','','','','','','',repliesMore,custom);
this.fetch(number,sortField,order);
},
filterByCustom : function(custom, number, sortField, order) {
this.resetParams('','','','','','','','','','','','','','','','','','','','','','',custom);
this.fetch(number,sortField,order);
},
fetch: function(number, sortField, order) {
ticketCollection.state.currentPage = number;
filter.sortCollection(sortField, order);
ticketCollection.syncData();
},
resetParams : function(labelId,newLabel,unassigned,notreplied,mine,starred,trashed,status,query,agent,customer,priority,type,group,team,tag,mailbox,source,after,before,repliesLess,repliesMore,custom) {
_.each(userFilters, function(filter, index) {
if(Backbone.history.getFragment() == filter['route']) {
$("#saved-filter").val(index);
}
});
isPageJustLoaded = false;
if(query != null)
query = query.replace(/\+/g,' ');
bulkAction.hideBulkOptions();
ticketCollection.filterParameters.label = labelId;
ticketCollection.filterParameters.new = newLabel;
ticketCollection.filterParameters.unassigned = unassigned;
ticketCollection.filterParameters.notreplied = notreplied;
ticketCollection.filterParameters.mine = mine;
ticketCollection.filterParameters.starred = starred;
ticketCollection.filterParameters.trashed = trashed;
ticketCollection.filterParameters.search = query;
$(".uv-search-inline").val(query);
ticketCollection.filterParameters.status = status;
ticketCollection.filterParameters.agent = agent;
ticketCollection.filterParameters.customer = customer;
ticketCollection.filterParameters.priority = priority;
ticketCollection.filterParameters.type = type;
ticketCollection.filterParameters.group = group;
ticketCollection.filterParameters.team = team;
ticketCollection.filterParameters.tag = tag;
ticketCollection.filterParameters.mailbox = mailbox;
ticketCollection.filterParameters.source = source;
ticketCollection.filterParameters.after = after;
ticketCollection.filterParameters.before = before;
ticketCollection.filterParameters.repliesLess = repliesLess;
ticketCollection.filterParameters.repliesMore = repliesMore;
ticketCollection.filterParameters.custom = custom;
$('.custom-fields').find('input[type="text"]').val('');
$('.custom-fields').find('select').val('');
$('.custom-fields').find('input[type="radio"]').prop('checked', false);
$('.custom-fields').find('input[type="checkbox"]').prop('checked', false);
if(custom) {
custom = custom.replace(/\+/g,' ');
var indexValueSeperator = '_';
var columnSeperator = '|';
var multiOptions = custom.split(columnSeperator);
var multiKeyValue, multiKeyValueValue, ele;
_.each(multiOptions, function(valueData, indexData) {
if(!valueData)
return;
multiKeyValue = valueData.split(indexValueSeperator);
multiKeyValueValue = multiKeyValue[1].split(',');
ele = $('[data-value="' + multiKeyValue[0] + '"]');
if(ele[0].type == 'radio') {
$('[data-value="' + multiKeyValue[0] + '"][value="' + multiKeyValue[1] + '"]').prop('checked', true);
} else if(ele[0].type == 'checkbox') {
_.each(ele, function(eleElements) {
if(multiKeyValueValue.indexOf(eleElements.value) > -1) {
$(eleElements).prop('checked', true);
}
});
} else if(ele[0].type == 'select-multiple') {
ele.val(multiKeyValueValue);
} else if(ele[0].type == 'text') {
ele.val(multiKeyValue[1]);
}
})
}
if(trashed) {
$('.property-block').hide();
$('.trashed-block').show();
} else {
$('.property-block').show();
$('.trashed-block').hide();
}
sideFilter.isRecurrsiveCalls = 0;
sideFilter.render();
}
});
var router = new Router();
var pageview = new PageView;
var bulkAction = new BulkActionView();
var sideFilterModel = new SideFilterModel(filterContext)
var sideFilter = new SideFilter();
var ticketCollection = new TicketCollection();
var ticketQuickViewCollection = new TicketQuickViewCollection();
var labelCollection = new LabelCollection();
var labelListView = new LabelListView()
var filter = new Filter({collection : ticketCollection});
Backbone.history.start({
push_state:true
});
});
</script>
{% endblock %}