Subversion Repositories SmartDukaan

Rev

Rev 35626 | Blame | Compare with Previous | Last modification | View Log | RSS feed 

<script>
    $(document).ready(function () {
        // Cleanup for myModal (activity/message modal)
        $('#myModal').on('hidden.bs.modal', function (e) {
            $(".activity-container .modal-body").empty();
        });

        // Cleanup for theModal (edit/assign ticket modal)
        $('#theModal').on('hidden.bs.modal', function (e) {
            $("#theModal .modal-content").empty();
            $('body').removeClass('modal-open');
            $('.modal-backdrop').remove();
        });

        // Ensure backdrop is removed on any modal close
        $(document).on('hidden.bs.modal', '.modal', function () {
            if ($('.modal:visible').length === 0) {
                $('body').removeClass('modal-open');
                $('.modal-backdrop').remove();
            }
        });

        getPartnerAheadOptions($("#typeaheadpartnernameforassignee"), function (selectedPartner) {
            $("#assignee-ticket-search-by-partner-name").data('id', selectedPartner.partnerId);
            $("#assignee-partner-name-input").val(selectedPartner.partnerId);
        });

        // Quick filter functionality for table
        initTableQuickFilter();
    });

    // Table quick filter function
    function initTableQuickFilter() {
        var filterInput = jQuery('#table-quick-filter');
        var clearBtn = jQuery('#clear-quick-filter');
        var resultCount = jQuery('#filter-result-count');

        filterInput.on('keyup', function () {
            var searchText = jQuery(this).val().toLowerCase().trim();
            filterTable(searchText);

            // Show/hide clear button
            if (searchText.length > 0) {
                clearBtn.show();
            } else {
                clearBtn.hide();
                resultCount.text('');
            }
        });

        clearBtn.on('click', function () {
            filterInput.val('');
            filterTable('');
            jQuery(this).hide();
            resultCount.text('');
        });
    }

    function filterTable(searchText) {
        var table = jQuery('#ticket-table');
        var tbody = table.find('tbody');
        var rows = tbody.find('tr');
        var resultCount = jQuery('#filter-result-count');
        var visibleCount = 0;
        var totalCount = rows.length;

        // If no search text, show all rows
        if (!searchText) {
            rows.show();
            resultCount.text('');
            return;
        }

        // Filter rows based on search text
        rows.each(function () {
            var row = jQuery(this);
            var rowText = row.text().toLowerCase();

            // Check if any cell contains the search text
            if (rowText.indexOf(searchText) > -1) {
                row.show();
                visibleCount++;
            } else {
                row.hide();
            }
        });

        // Update result count
        if (visibleCount === 0) {
            resultCount.html('<span class="text-danger">No matches found</span>');
        } else {
            resultCount.text('Showing ' + visibleCount + ' of ' + totalCount + ' rows');
        }
    }

    // Re-apply filter when new content is loaded via AJAX (pagination, etc.)
    jQuery(document).on('ajaxComplete', function (event, xhr, settings) {
        // Check if this is a ticket-related AJAX call
        if (settings.url && settings.url.indexOf('ticket') > -1) {
            var searchText = jQuery('#table-quick-filter').val();
            if (searchText) {
                // Small delay to ensure DOM is updated
                setTimeout(function () {
                    filterTable(searchText.toLowerCase().trim());
                }, 100);
            }
        }
    });

    // Clear filter when status or order dropdowns change (these change the dataset)
    jQuery(document).on('change', '#ticketStatus, #orderBy', function () {
        clearQuickFilter();
    });

    function clearQuickFilter() {
        jQuery('#table-quick-filter').val('');
        jQuery('#clear-quick-filter').hide();
        jQuery('#filter-result-count').text('');
    }
</script>
<style>
    .pagination-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 0;
        flex-wrap: wrap;
    }
    .pagination-wrapper .pagination {
        margin: 0;
    }
    .pagination-wrapper .page-size-select {
        width: auto;
        display: inline-block;
    }
    .pagination-info {
        color: #666;
    }
    .search-form {
        margin-bottom: 15px;
    }
    .search-form .form-group {
        margin-bottom: 0;
    }
    tr.ticket-unread {
        background-color: #f0f7ff !important;
        font-weight: bold;
    }
    tr.ticket-unread td {
        font-weight: bold;
    }
    .unread-badge {
        display: inline-block;
        width: 8px;
        height: 8px;
        background-color: #007bff;
        border-radius: 50%;
        margin-right: 4px;
        vertical-align: middle;
    }
    .last-activity-preview {
        font-size: 11px;
        color: #666;
        font-weight: normal;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 200px;
    }

    /* Quick filter styles */
    #table-quick-filter {
        border-left: none;
    }

    #table-quick-filter:focus {
        border-color: #66afe9;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
    }

    #clear-quick-filter {
        border-left: none;
    }

    .input-group-addon {
        background-color: #fff;
        border-right: none;
    }

    #filter-result-count {
        font-size: 13px;
    }

    #ticket-table tbody tr.filter-highlight td {
        background-color: #fff3cd !important;
    }
</style>
#parse("activity-modal-styles.vm")
<section class="wrapper">
    <div class="row">
        <div class="col-lg-12">
            <h3 class="page-header"><i class="icon_document_alt"></i>TICKET</h3>
            <ol class="breadcrumb">
                <li><i class="fa fa-home"></i><a href="${rc.contextPath}/dashboard">Home</a></li>
                <li><i class="icon_document_alt"></i>My Ticket</li>
            </ol>
        </div>
    </div>

    ## Search Form
    <div class="row search-form">
        <div class="col-lg-12">
            #*<form id="ticket-search-form" class="form-inline" onsubmit="return false;">
                <div class="form-group">
                    <input type="text" id="ticket-search-input" class="form-control" style="width: 300px;"
                           placeholder="Search ticket ID, partner, category, creator..."
                           value="$!searchText">
                </div>
                <button type="submit" class="btn btn-primary" id="ticket-search-btn">Search</button>
                <a href="javascript:void(0)" class="btn btn-default" id="ticket-search-clear"
                   style="#if(!$searchText || $searchText == '')display:none;#end">Clear</a>
            </form>*#
            <div class="row" style="margin-bottom: 10px;">
                <div class="col-lg-4">
                    <div class="input-group">
                        <span class="input-group-addon"><i class="fa fa-search"></i></span>
                        <input type="text" id="table-quick-filter" class="form-control"
                               placeholder="Filter current page...">
                        <span class="input-group-btn">
                    <button class="btn btn-default" type="button" id="clear-quick-filter" style="display:none;">
                        <i class="fa fa-times"></i>
                    </button>
                </span>
                    </div>
                </div>
                <div class="col-lg-2">
                    <span id="filter-result-count" class="text-muted" style="line-height: 34px;"></span>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-2 form-group">
            <select class="form-control input-sm" id="ticketStatus" name="ticketStatus" placeholder="Type">
                #foreach($ticketStatus in $ticketStatusValues)
                    #if($ticketStatus=="RESOLVED")
                        #if($roleType)
                            #if($selectedticketStatus==$ticketStatus)
                                <option value="$ticketStatus" selected>$ticketStatus</option>
                            #else
                                <option value="$ticketStatus">$ticketStatus</option>
                            #end
                        #end
                    #else
                        #if($selectedticketStatus==$ticketStatus)
                            <option value="$ticketStatus" selected>$ticketStatus</option>
                        #else
                            <option value="$ticketStatus">$ticketStatus</option>
                        #end
                    #end
                #end
            </select>
        </div>
        <div class="col-lg-2 form-group">
            <select class="form-control input-sm" id="orderBy" name="orderBy" placeholder="Type">
                #foreach($orderby in $orderByValues)
                    #if($orderby=="UNSORTED")
                    #else
                        #if($selectedorderby==$orderby)
                            #if($orderby=="ASCENDING")
                                <option value="$orderby" selected>OLD TO NEW</option>
                            #else
                                <option value="$orderby" selected>NEW TO OLD</option>
                            #end
                        #else
                            #if($orderby=="ASCENDING")
                                <option value="$orderby">OLD TO NEW</option>
                            #else
                                <option value="$orderby">NEW TO OLD</option>
                            #end
                        #end
                    #end
                #end
            </select>
        </div>
        #if($roleType)
        <div class="col-lg-6 form-group pull-right">
            ## Quick Filter for Table

            #*<div class="col-lg-6">
                <select class="form-control" id="assigneesearchType" name="assigneesearchType"
                        placeholder="Search Type">
                    <option value="" disabled selected>Search Type</option>
                    #foreach($searchType1 in $ticketSearchTypes)
                        #if($ticketSearchType.getValue()==$searchType1.getValue())
                            <option value="$searchType1" selected>$ticketSearchType.getValue()</option>
                        #else
                            <option value="$searchType1">$searchType1.getValue()</option>
                        #end
                    #end
                </select>
            </div>*#


            #*<div class="col-lg-6">
                <input type="hidden" id="assignee-partner-name-input" name="assignee-partner-name-input" value="">
                <div class="assigneebyPartnerName" style="display: none;">
                    <div class="input-group">
                        <input placeholder="Partner Name" type="text" class="typeahead form-control"
                               id="typeaheadpartnernameforassignee" value="" name="Item" data-provide="typeahead"
                               autocomplete="off">
                        <span class="input-group-btn">
                                <button class="btn btn-primary" id="assignee-ticket-search-by-partner-name" type="button"
                            data-id="">Go!</button>
                        </span>
                    </div>
                </div>
                <div class="assigneebyTicketId" style="display: none;">
                    <div class="input-group">
                        <input placeholder="Ticket Id" type="text" class="form-control" id="assignee-search-by-ticketId"
                               value="">
                        <span class="input-group-btn">
                                <button class="btn btn-primary" id="assignee-retailer-details-search-button-by-ticketId"
                            type="button">Go!</button>
                        </span>
                    </div>
                </div>
            </div>*#
        #end
    </div>
    </div>


    <div id="ticket-content-area">
    #parse("ticket-content.vm")
    </div>

</section>
<div id="ticket-details-container" style="background:white;background-color:white;">
</div>
#set($showFileUpload = true)
#parse("activity-modal.vm")

## Edit ticket modal for CRM users to assign tickets
#if($isCrmUser)
<div class="edit-container">
    <div class="modal fade text-center" id="theModal" tabindex="-1" role="dialog" data-backdrop="true" data-keyboard="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            </div>
        </div>
    </div>
</div>
#end