Files
Backend-Api/ServiceHost/wwwroot/AssetsClient/js/Ticket/Index.js

219 lines
9.4 KiB
JavaScript

if ($(window).width() < 768) {
$(document).on("click", ".openAction", function () {
$(this).next().find(".operations-btns").slideToggle(500);
$(".operations-btns").not($(this).next().find(".operations-btns")).slideUp(500);
});
}
$(document).ready(function () {
$('.loadingButton').on('click', function () {
var button = $(this);
var loadingDiv = button.find('.loading');
loadingDiv.show();
});
var firstCard = $('.cardTicket').first();
ticketType('ticketAll', firstCard);
});
function DetailTicket(TicketID) {
var ticketID = Number(TicketID);
var goTo = `#showmodal=/Client/Company/Ticket/Index?ticketID=${ticketID}&handler=ShowDetailTicket`;
window.location.href = goTo;
}
function ticketType(parameters, element) {
$('.cardTicket').removeClass('ticketActive');
$(element).addClass('ticketActive');
let status = '';
switch (parameters) {
case "ticketAll":
status = '';
break;
case "ticketAnswered":
status = 'پاسخ داده شده';
break;
case "ticketInProgress":
status = 'در حال بررسی';
break;
case "ticketOpen":
status = 'باز';
break;
case "ticketClosed":
status = 'بسته شد';
break;
default:
}
$('#pageIndex').val(0);
$('.loadTicketsAjax').html('');
loadTicketsMore(status);
}
function loadTicketsMore(status) {
let pageIndex = Number($('#pageIndex').val());
var b = pageIndex % 30;
if (b === 0) {
$.ajax({
async:false,
contentType: 'charset=utf-8',
dataType: 'json',
type: 'GET',
url: urlAjaxLoadData,
data: {
pageIndex: pageIndex,
status: status
},
headers: { "RequestVerificationToken": antiForgeryToken },
success: function (response) {
if (response.pageIndex > 0) {
var n = pageIndex + 1;
$.each(response.data, function (i, item) {
var statusClass = '';
switch (item.status) {
case "باز":
statusClass = "badget-open";
break;
case "درحال بررسی":
statusClass = "badget-inprogress";
break;
case "پاسخ داده شده":
statusClass = "badget-answer";
break;
case "بسته شده":
statusClass = "badget-close";
break;
default:
statusClass = "";
break;
};
const html = `
<div></div>
<div class="ticket-list Rtable-row align-items-center position-relative openAction">
<div class="Rtable-cell d-md-block d-flex width1">
<div class="Rtable-cell--content">
<span class="d-flex justify-content-center align-items-center justify-content-center">
${n}
</span>
</div>
</div>
<div class="Rtable-cell d-md-block d-none width2">
<div class="Rtable-cell--content">${item.ticketNumber}</div>
</div>
<div class="Rtable-cell width3 d-md-block d-none">
<div class="Rtable-cell--content">${item.contractingPartyName}</div>
</div>
<div class="Rtable-cell width3">
<div class="Rtable-cell--content">${item.title}</div>
</div>
<div class="Rtable-cell d-md-block d-none width4">
<div class="Rtable-cell--content">${item.creationDateTime}</div>
</div>
<div class="Rtable-cell d-md-block d-none width5">
<div class="Rtable-cell--content">
<div class="badget ${statusClass}">
${item.status}
</div>
</div>
</div>
<div class="Rtable-cell width6 text-end">
<div class="Rtable-cell--content align-items-center d-flex justify-content-end">
<button class="btn-ticket-detail position-relative d-flex align-items-center d-md-block d-none" onclick="DetailTicket(${item.id})">
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.58325 4.58333C4.58325 3.57081 5.40406 2.75 6.41659 2.75H10.7708C10.8973 2.75 10.9999 2.8526 10.9999 2.97917V7.33333C10.9999 8.34586 11.8207 9.16667 12.8333 9.16667H17.1874C17.314 9.16667 17.4166 9.26924 17.4166 9.39583V17.4167C17.4166 18.4292 16.5958 19.25 15.5833 19.25H6.41659C5.40406 19.25 4.58325 18.4292 4.58325 17.4167V4.58333Z" fill="#58E85B" />
<path d="M12.4167 7.33392V3.95768L16.2096 7.75058H12.8334C12.6033 7.75058 12.4167 7.56404 12.4167 7.33392Z" fill="#248826" stroke="#248826" />
<path d="M7.79175 12.375H13.2917H7.79175Z" fill="#248826" />
<path d="M7.79175 12.375H13.2917" stroke="#248826" stroke-linecap="round" />
<path d="M7.79175 15.125H12.3751H7.79175Z" fill="#248826" />
<path d="M7.79175 15.125H12.3751" stroke="#248826" stroke-linecap="round" />
</svg>
<span class="mx-1 d-md-none d-flex">جزئیات</span>
</button>
<button class="btn-ticket-more position-relative d-flex align-items-center d-md-none d-block">
<span class="mx-1 d-md-none d-flex">عملیات</span>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="currentColor">
<circle cx="8.4001" cy="8.39922" r="1.2" transform="rotate(90 8.4001 8.39922)"/>
<circle cx="8.4001" cy="4.39922" r="1.2" transform="rotate(90 8.4001 4.39922)"/>
<circle cx="8.4001" cy="12.3992" r="1.2" transform="rotate(90 8.4001 12.3992)"/>
</svg>
</button>
</div>
</div>
</div>
<div class="operation-div w-100">
<div class="operations-btns">
<div class="row p-0">
<div class="d-flex align-items-center justify-content-between">
<span class="span1">شماره پشتیبانی:</span>
<span class="span1">${item.ticketNumber}</span>
</div>
<div class="d-flex align-items-center justify-content-between">
<span class="span1">تاریخ ایجاد:</span>
<span class="span1">${item.creationDateTime}</span>
</div>
<div class="d-flex align-items-center justify-content-between">
<span class="span1">نام کاربر:</span>
<span class="span1">${item.contractingPartyName}</span>
</div>
<div class="col-md-12 col-12 p-1">
<div class="badget ${statusClass} w-100 my-2">${item.status}</div>
</div>
<div class="col-md-12 col-12">
<button class="btn-ticket-detail position-relative d-md-none d-flex align-items-center justify-content-center w-100" onclick="DetailTicket(${item.id})">
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.58325 4.58333C4.58325 3.57081 5.40406 2.75 6.41659 2.75H10.7708C10.8973 2.75 10.9999 2.8526 10.9999 2.97917V7.33333C10.9999 8.34586 11.8207 9.16667 12.8333 9.16667H17.1874C17.314 9.16667 17.4166 9.26924 17.4166 9.39583V17.4167C17.4166 18.4292 16.5958 19.25 15.5833 19.25H6.41659C5.40406 19.25 4.58325 18.4292 4.58325 17.4167V4.58333Z" fill="#58E85B" />
<path d="M12.4167 7.33392V3.95768L16.2096 7.75058H12.8334C12.6033 7.75058 12.4167 7.56404 12.4167 7.33392Z" fill="#248826" stroke="#248826" />
<path d="M7.79175 12.375H13.2917H7.79175Z" fill="#248826" />
<path d="M7.79175 12.375H13.2917" stroke="#248826" stroke-linecap="round" />
<path d="M7.79175 15.125H12.3751H7.79175Z" fill="#248826" />
<path d="M7.79175 15.125H12.3751" stroke="#248826" stroke-linecap="round" />
</svg>
<span class="mx-1 d-md-none d-flex">جزئیات</span>
</button>
</div>
</div>
</div>
</div>
`;
$('.loadTicketsAjax').append(html);
n += 1;
});
var newPageIndex = pageIndex + response.pageIndex;
$('#pageIndex').val(newPageIndex);
}
},
failure: function (response) {
console.log(5, response);
}
});
}
}
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() > $(document).height() - 600) {
loadTicketsMore();
}
if ($(this).scrollTop() > 100) {
$('.goToTop').show().fadeIn();
} else {
$('.goToTop').fadeOut().hide();
}
});
$('.goToTop').on('click', function () {
$('html, body').animate({ scrollTop: 0 }, 360);
return false;
});