Datatable example with the cell data update or row data update and refresh the datatable
<%@ page trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="template" tagdir="/WEB-INF/tags/template" %>
<%@ taglib prefix="product" tagdir="/WEB-INF/tags/product" %>
<%@ taglib prefix="cart" tagdir="/WEB-INF/tags/cart" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
<%@ taglib prefix="cms" uri="/cms2lib/cmstags/cmstags.tld" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="common" tagdir="/WEB-INF/tags/common" %>
<%@ taglib prefix="breadcrumb" tagdir="/WEB-INF/tags/nav/breadcrumb" %>
<%@ page trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="template" tagdir="/WEB-INF/tags/template" %>
<%@ taglib prefix="product" tagdir="/WEB-INF/tags/product" %>
<%@ taglib prefix="cart" tagdir="/WEB-INF/tags/cart" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
<%@ taglib prefix="cms" uri="/cms2lib/cmstags/cmstags.tld" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="common" tagdir="/WEB-INF/tags/common" %>
<%@ taglib prefix="breadcrumb" tagdir="/WEB-INF/tags/nav/breadcrumb" %>
<template:page pageTitle="${pageTitle}">
<jsp:body>
<link rel="stylesheet" href="${request.contextPath}/_ui/msa/css/csp-styles.css?ver=${build_number}">
<link rel="stylesheet" href="${request.contextPath}/_ui/common/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="${request.contextPath}/_ui/common/css/daterangepicker.css">
<script type="text/javascript" src="${request.contextPath}/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="${request.contextPath}/js/moment.min.js"></script>
<script type="text/javascript" src="${request.contextPath}/js/daterangepicker.js"></script>
<div id="globalMessages">
<common:globalMessages/>
</div>
<div class="csp-custom-design-page csp-configurator-page">
<div id="cspDesignLibrary" class="cspBanner">
<div id="breadcrumb" class="breadcrumb col">
<breadcrumb:breadcrumb breadcrumbs="${breadcrumbs}"/>
</div>
<div class="row">
<div class="col-12 col-sm-9">
<div class="w-50 customHeaderW">
<h3><spring:theme code="cspLibrary.customizationLib" text="" /></h3>
<div class="my-3"><spring:theme code="cspLibrary.subHeading" text="" /></div>
</div>
</div>
<div class="col-12 col-sm-3 mt-5 mt-sm-0 text-right rightContent d-none">
<div>
<img src="/_ui/common/images/archive.png" style="width:30px;" /> <strong> <a class="text-white" href="?archive=true"><spring:theme code="cspLibrary.viewArch" text="" /></a></strong></h4>
</div>
</div>
</div>
<div class='tab-section'>
<div class="tab">
<a href="javascript:;" id="normalCspDesigns" class='active'><spring:theme code="cspLibrary.tab.library" text="" /></a>
<a href="javascript:;" id="archiveCspDesigns"><spring:theme code="cspLibrary.tab.archive" text="" /></a>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="row mx-5 mt-5 filterSection">
<div class="col-sm-4 pl-0">
<div class="block">
<label class="font-weight-bold"><spring:theme code="cspLibrary.search.label" text="" /></label>
<div class="input-container align-items-center d-none">
<i class="fa fa-search icon pl-2 pr-1"></i>
<input class="input-field w-100 border-0" id="dtCustomSearch" type="text" placeholder="eg. MSA Safety">
</div>
</div>
</div>
<div class="d-none">
<select id="filterByStatusSelect"><option value=""><spring:theme code="cspLibrary.filters.none" text="" /></option></select>
<select id="filterByCBySelect"><option value=""><spring:theme code="cspLibrary.filters.none" text="" /></option></select>
</div>
</div>
<div id="designsdata" style="display: none">
<c:forEach items="${cspDesignTableData}" var="item"><span>${item.designId}</span></c:forEach>
</div>
<div class="row mb-5 mx-5" id="cspDesignTableloadedData">
<div class="col-12 px-0 ${empty cspDesignTableData ? 'empty-cspCustomTable' : ''}">
<table id="cspCustomTable" class="display cspCustomTable text-center w-100" cellspacing="0">
<thead>
<tr>
<th class="thumbnail"></th>
<th class="productName"><spring:theme code="cspLibrary.table.pName" text="" /></th>
<th>
<div class="dropdown">
<div id="menuStatus" data-toggle="dropdown" class="cursor-pointer"><spring:theme code="cspLibrary.table.status" text="" /> <i class="fal fa-filter"></i></div>
<ul class="dropdown-menu" role="menu" aria-labelledby="menuStatus" id="dropDownStatus">
<li><spring:theme code="cspLibrary.filters.byStatus" text="" /></li>
<li><a data-clickval="" class="active font-weight-bold"><spring:theme code="cspLibrary.filters.all" text="" /></a></li>
</ul>
</div>
</th>
<th><spring:theme code="cspLibrary.table.did" text="" /></th>
<th><spring:theme code="cspLibrary.table.jid" text="" /></th>
<th id="datePickerColumn" class="cursor-pointer"><spring:theme code="cspLibrary.table.cAt" text="" /><input id="date_range" class="dateRangePicker border-0 cursor-pointer" style="width:24px;" autocomplete="off" type="text"></th>
<th>
<div class="dropdown">
<div id="menuCBy" data-toggle="dropdown" class="cursor-pointer"><spring:theme code="cspLibrary.table.cBy" text="" /> <i class="fal fa-filter"></i></div>
<ul class="dropdown-menu" role="menu" aria-labelledby="menuCBy" id="dropDownCBy">
<li><spring:theme code="cspLibrary.filters.byCBy" text="" /></li>
<li><a data-clickcbyval="" class="active font-weight-bold"><spring:theme code="cspLibrary.filters.all" text="" /></a></li>
</ul>
</div>
</th>
<th class="shortName"><spring:theme code="cspLibrary.table.notes" text="Notes" /></th>
<th class="cartIcons lastColFixedWidth"></th>
<th class="d-none"></th>
<th></th>
</tr>
</thead>
<tbody>
<c:set var="currentUser" value="${currentUser}"></c:set>
<c:forEach items="${cspDesignTableData}" var="item">
<c:set var="showDesignComments" value="false" />
<c:choose>
<c:when test="${fn:toLowerCase(item.status) == fn:toLowerCase('INCART')}">
<spring:message code="cspLibrary.table.design.status.approved" text="Approved" var="status" />
</c:when>
<c:when test="${fn:toLowerCase(item.status) == fn:toLowerCase('DELETED')}">
<spring:message code="cspLibrary.table.design.status.deleted" text="Deleted" var="status" />
</c:when>
<c:when test="${fn:toLowerCase(item.status) == fn:toLowerCase('AWAITINGPROOFAPPROVAL')}">
<spring:message code="cspLibrary.table.design.status.AWAITINGPROOFAPPROVAL" text="Awaiting Approval" var="status" />
</c:when>
<c:when test="${fn:toLowerCase(item.status) == fn:toLowerCase('AWAITINGTHIRDPARTYAPPROVAL')}">
<spring:message code="cspLibrary.table.design.status.AWAITINGTHIRDPARTYAPPROVAL" text="Awaiting Approval" var="status" />
</c:when>
<c:when test="${fn:toLowerCase(item.status) == fn:toLowerCase('THIRDPARTYAPPROVALDENIED')}">
<spring:message code="cspLibrary.table.design.status.THIRDPARTYAPPROVALDENIED" text="Rejected" var="status" />
<c:set var="showDesignComments" value="${not empty item.designComments}" />
</c:when>
<c:when test="${fn:toLowerCase(item.status) == fn:toLowerCase('AWAITINGARTDEPARTMENT')}">
<spring:message code="cspLibrary.table.design.status.AWAITINGARTDEPARTMENT" text="Ordered" var="status" />
</c:when>
<c:when test="${fn:toLowerCase(item.status) == fn:toLowerCase('DECORATORTRIAGE')}">
<spring:message code="cspLibrary.table.design.status.DECORATORTRIAGE" text="Ordered" var="status" />
</c:when>
<c:when test="${fn:toLowerCase(item.status) == fn:toLowerCase('RELEASEDTODECORATOR')}">
<spring:message code="cspLibrary.table.design.status.RELEASEDTODECORATOR" text="Ordered" var="status" />
</c:when>
<c:when test="${fn:toLowerCase(item.status) == fn:toLowerCase('WAITINGFORPRODUCT')}">
<spring:message code="cspLibrary.table.design.status.WAITINGFORPRODUCT" text="Ordered" var="status" />
</c:when>
<c:when test="${fn:toLowerCase(item.status) == fn:toLowerCase('INPROGRESS')}">
<spring:message code="cspLibrary.table.design.status.INPROGRESS" text="Ordered" var="status" />
</c:when>
<c:when test="${fn:toLowerCase(item.status) == fn:toLowerCase('COMPLETE')}">
<spring:message code="cspLibrary.table.design.status.COMPLETE" text="Ordered" var="status" />
</c:when>
<c:when test="${fn:toLowerCase(item.status) == fn:toLowerCase('CLOSED')}">
<spring:message code="cspLibrary.table.design.status.CLOSED" text="Closed" var="status" />
</c:when>
<c:otherwise>
<spring:message code="cspLibrary.table.design.status.others" text="Unknown" var="status" />
</c:otherwise>
</c:choose>
<c:if test="${fn:toLowerCase(item.status) ne fn:toLowerCase('Deleted')}"><!-- Do not show any deleted designs from CSP. -->
<c:set var="hasJobId" value="${not empty item.jobId and item.jobId > 0}" />
<tr data-archive-flag="${item.archive}" data-design-id="${item.designId}" id="cspDesignRow_${item.designId}" data-design-status-api="${item.status}" data-design-status="${status}" class="cursor-pointer design-row ${showDesignComments ? ' has-design-comments ' : ''}">
<td class="imgBlock">
<img src="${item.cspItems[0].thumbnail}" width="90" class="ml-3 mb-2" alt="NoImage">
<%-- <div class="ml-3">SKU: <c:out value="${item.cspItems[0].sku}" /></div>
<div class="ml-3">QTY: <c:out value="${item.cspItems[0].qty}" /></div> --%>
</td>
<td class="productName">
<div>${item.productName}</div>
<c:if test="${showDesignComments}" >
<div class="design-comments-wrap"><div><c:out value="${item.designComments}" /></div></div>
</c:if>
</td>
<!-- add classes based on status textRed/textGreen/textYellow -->
<td class='font-weight-bold'><c:out value = "${status}"/></td>
<td class="productDesignId">${item.designId}</td>
<td class="productJobId">${hasJobId ? item.jobId : ''}</td>
<td><fmt:formatDate value="${item.createdDate}" pattern="${datePatternMMddyyyySlash}" /></td>
<td>${item.createdBy}</td>
<td class="shortName" >
<div class="d-flex w-100 align-items-center">
<div class="notesBlock" data-field="name" data-uid="${item.designId}"><c:if test="${empty item.notes}"><spring:theme code="cspLibrary.table.notesDefault" text="" /></c:if><c:if test="${not empty item.notes}">${item.notes}</c:if></div>
<div>
<a class="button button-small edit" title="Edit">
<i class="fa fa-pencil"></i>
</a>
</div>
</div>
</td>
<td class="cartIcons lastColFixedWidth">
<div class='d-flex' id="icons_${item.designId}">
<ul class='actionBlocks d-flex flex-column p-0 my-0 list-unstyled text-left'>
<li class="my-1"><a href="/logoexpress/edit/${item.designId}" class="${hasJobId ? ' disabled-on-load ' : ''} edit-disable-start" ${hasJobId ? ' disabled="disabled" ' : ''}><i class="far fa-edit mr-2"></i>Edit</a></li>
<li class="my-1"><a href="/logoexpress/duplicate/${item.designId}" class="duplicate-disable-start"><i class="far fa-clone mr-2"></i>Duplicate</a></li>
</ul>
<ul class='actionBlocks d-flex flex-column p-0 my-0 list-unstyled text-left'>
<c:choose>
<c:when test="${item.jobId gt 0}">
<li class="my-1"><a href="javascript:;" class="trReorderDes" data-did="${item.designId}" data-sku="${item.cspItems[0].sku}" data-qty="${item.cspItems[0].qty}"><i class="far fa-clone mr-2"></i>Reorder</a></li>
</c:when>
<c:otherwise>
<c:set var="addToCartDisabled" value="${hasJobId || fn:toLowerCase(item.status) != fn:toLowerCase('INCART')}" />
<li class="my-1"><a href="/logoexpress/cart/${item.designId}" class="${addToCartDisabled ? ' disabled-on-load ' : ''}" ${addToCartDisabled ? ' disabled="disabled" ' : ''}><i class="far fa-cart-plus mr-2"></i>Add to Cart</a></li>
</c:otherwise>
</c:choose>
<li class="my-1">
<a href="javascript:;" class="trArchiveDes" data-did="${item.designId}" data-archive-flag="${item.archive}">
<i class="far fa-archive mr-2 trArchiveDes-archive"></i><span class="trArchiveDes-archive">Archive</span>
<i class="far fa-arrow-rotate-left mr-2 trArchiveDes-restore"></i><span class="trArchiveDes-restore">Restore</span>
</a>
</li>
</ul>
</div>
</td>
<td><c:if test="${not empty item.proofUrl}"><a href="${item.proofUrl}" class="" style="" target="_blank" title=""><spring:theme code="cspLibrary.table.proof" text="Proof" /></a></c:if></td>
<td class="d-none expandRowSkuDetails">
<table class="display expanded-sku-details" cellspacing="0" data-parent-row-id="cspDesignRow_${item.designId}">
<thead>
<tr>
<th class="no-min-width ${item.jobId gt 0 ? '' : 'hidden'}">
</th>
<th>
</th>
<th>
SKU
</th>
<th>
Qty
</th>
<th>
Minimum Quantity
</th>
<th>
Lot Size
</th>
</tr>
</thead>
<tbody>
<c:forEach items="${item.cspItems}" var="skuDetail" varStatus="skuDetailCounter">
<tr class="expanded-sku-details-sku">
<td class="no-min-width ${item.jobId gt 0 ? '' : 'hidden'}">
<input type="checkbox" value="" checked="checked" />
<input type="hidden" class="sku-detail-sku" value="${skuDetail.sku}" />
<input type="hidden" class="sku-detail-qty" value="${skuDetail.qty}" />
</td>
<td>
<img src="${skuDetail.thumbnail}" width="90" alt="NoImage">
</td>
<td>
${skuDetail.sku}
</td>
<td>
<c:choose>
<c:when test="${item.jobId gt 0}">
<input type="text" class="sku-detail-entered-qty" value="${skuDetail.qty}" data-min-quantity="${item.minQuantity}" data-lot-size="${item.lotSize}" />
</c:when>
<c:otherwise>
${skuDetail.qty}
</c:otherwise>
</c:choose>
</td>
<td class="min-quantity-column">
${item.minQuantity}
</td>
<td class="lot-size-column">
${item.lotSize}
</td>
</tr>
</c:forEach>
</tbody>
</table>
</td>
</tr>
</c:if>
</c:forEach>
</tbody>
</table>
</div>
</div>
</div>
<script>
var table;
const groupColumn = 2;
const dataTableSettings = {
"columnDefs": [
{ "visible": true, "targets": groupColumn },
{ orderable: false, targets: [] }
],
"ordering": false,
"order": [[ groupColumn, 'asc' ]],
"displayLength": 2,
"sScrollX" : "100%",
"language" : {
"search" : "_INPUT_",
"searchPlaceholder" : "<spring:theme code='cspLibrary.search.placeholder' />",
"emptyTable" : "<div class='noRecFound'><spring:theme code='cspLibrary.customizationLib.no.records' /> <spring:theme code='cspLibrary.search.customize' /></div>",
"info" : " Viewing _START_ - _END_ Designs of _TOTAL_",
"zeroRecords" : "<spring:theme code='cspLibrary.search.zeroRec' />",
"paginate" : {
"previous" : "<spring:theme code='cspLibrary.search.prevPage' />",
"next" : "<spring:theme code='cspLibrary.search.nextPage' />"
}
},
"fnInitComplete": function(settings, json) {
let columns = [2, 6];
for(let i=0; i<columns.length; i++){
this.api().columns(columns[i]).every(function () {
var column = this;
var _elm = "";
if(columns[i] == 2){
_elm = $('#filterByStatusSelect');
$('#filterByStatusSelect option:not(:first)').remove();
}else{
$('#filterByCBySelect option:not(:first)').remove();
_elm = $('#filterByCBySelect');
}
var select = _elm.on('change', function () {
var val = $.fn.dataTable.util.escapeRegex($(this).val());
column.search(val ? '^' + val + '$' : '', true, false).draw();
});
column.data().unique().sort().each(function (d, j) {
select.append('<option value="' + d + '">' + d + '</option>');
if(columns[i] == 2){
$('#dropDownStatus').append('<li><a data-clickval="'+d+'">'+d+'</a></li>');
}else{
$('#dropDownCBy').append('<li><a data-clickcbyval="'+d+'">'+d+'</a></li>');
}
});
});
let selVal1 = $('#filterByStatusSelect').find('option').first().val();
$('#filterByStatusSelect').val(selVal1).change();
let selVal2 = $('#filterByCBySelect').find('option').first().val();
$('#filterByCBySelect').val(selVal2).change();
}
}
}
$(document).delegate('#dropDownStatus li a', 'click', function(){
let clickVal = $(this).data('clickval');
if(clickVal){
$('#filterByStatusSelect').val(clickVal).change();
$('#dropDownStatus').closest('.dropdown').addClass('active');
}else{
$('#filterByStatusSelect').val("").change();
$('#dropDownStatus').closest('.dropdown').removeClass('active');
}
$(this).closest('li').siblings('li').find('a').removeClass('active font-weight-bold');
$(this).addClass('active font-weight-bold');
});
$(document).delegate('#dropDownCBy li a', 'click', function(){
let clickVal = $(this).data('clickcbyval');
if(clickVal){
$('#filterByCBySelect').val(clickVal).change();
$('#dropDownCBy').closest('.dropdown').addClass('active');
}else{
$('#filterByCBySelect').val("").change();
$('#dropDownCBy').closest('.dropdown').removeClass('active');
}
$(this).closest('li').siblings('li').find('a').removeClass('active font-weight-bold');
$(this).addClass('active font-weight-bold');
});
$("#datePickerColumn").on('click', function(){
$('#date_range').trigger('focus');
});
var expandedRowClass = 'sku-details-expanded';
$(document).on('click', '.cspCustomTable tbody tr.design-row', function(){
var clickedTr = $(this);
var clickedDatatableRow = table.row(clickedTr);
if(clickedDatatableRow.child.isShown()) {
clickedDatatableRow.child.hide();
clickedTr.removeClass(expandedRowClass);
clickedTr.find('.cartIcons a').not('.disabled-on-load').removeAttr('disabled');
} else {
clickedDatatableRow.child(clickedTr.find('.expandRowSkuDetails').html()).show();
clickedTr.addClass(expandedRowClass);
}
});
function getRowInfoForCommand(selectedTr, disallowEnteredQuantities, ignoreCheckmarks) {
var selectedDatatableRow = table.row(selectedTr);
var skuDetailsTableToUse = selectedTr.find('.expanded-sku-details');
if(selectedDatatableRow.child.isShown()) {
skuDetailsTableToUse = selectedTr.next().find('.expanded-sku-details');
}
var returnObject = {
status: selectedTr.data('design-status-api'),
DesignId: selectedTr.data('design-id'),
SkusAndQtys:[]
}
var checkmarkInputsToUse = skuDetailsTableToUse.find('input[type="checkbox"]:checked');
if(ignoreCheckmarks) {
checkmarkInputsToUse = skuDetailsTableToUse.find('input[type="checkbox"]');
}
checkmarkInputsToUse.each(function(){
var thisCheck = $(this);
var newSkuObject = {
Sku:thisCheck.siblings('.sku-detail-sku').val(),
Quantity:thisCheck.siblings('.sku-detail-qty').val()
};
var enteredQtyInput = thisCheck.parents('.expanded-sku-details-sku').find('.sku-detail-entered-qty');
if(!disallowEnteredQuantities && enteredQtyInput.length > 0) {
newSkuObject.Quantity = enteredQtyInput.val();
}
returnObject.SkusAndQtys.push(newSkuObject);
});
return returnObject;
}
/* $('.cspCustomTable tbody tr').on( 'click', function () {
$('tr.appendedRow').remove();
$(this).toggleClass('activeRow');
$(this).siblings("tr").removeClass('activeRow');
let _designId = $(this).attr('data-design-id');
let archiveStatus = $(this).attr('data-archive-flag');
let _designStatus = $(this).attr('data-design-status');
let finalEditLink = "javascript:;";
let opacityClass = "";
let _toolTipMsg = `<div class='toolTipContent'> <spring:theme code='cspLibrary.table.tooltipMsg' /> </div>`;
if(_designStatus !== "Approved"){
finalEditLink = `/logoexpress/edit/\${_designId}`;
opacityClass = "fullOpacity";
_toolTipMsg = "";
}
let _elms = $(this).find('td.expandRowSkuDetails').text().trim();
let eachItem = [];
let _errMsg = "<spring:theme code='cspLibrary.table.errorLoading' />";
let oneObj = _elms.split(";;;");
for(let i of oneObj){
if(i){
let splitObj = i.split('___');
let obj = {
qty:splitObj[1],
sku:splitObj[0],
img:splitObj[2]
}
eachItem.push(obj);
}
}
let _skuContent = "";
if(eachItem && eachItem.length>0){
for(let i of eachItem){
_skuContent += `<div class="skus my-2 mx-3"><div class="img"><img src="\${i.img}" alt="\${i.sku}"/></div><div class="sku mt-3 mb-1">SKU: \${i.sku}</div><div class="qty">QTY: \${i.qty}</div></div>`;
}
}else{
_skuContent += `<div class="skus my-2 mx-3"><p class='py-2'>\${_errMsg}</p></div>`;
}
let _imgUrl = "";
let _text ="" ;
if(archiveStatus === "true"){
_imgUrl = "/_ui/common/images/restoreDesign.png";
_text = "Restore";
}else{
_imgUrl = "/_ui/common/images/cspArchiveNew.png";
_text = "Archive";
}
let duplicateItemsArr = window.btoa(JSON.stringify(eachItem));
if($(this).hasClass("activeRow")){
let _nextRowContent = `
<tr class='appendedRow' style="display:none">
<td colspan='7' class="text-left">
<h5 class="font-weight-bold mt-1 mb-2 ml-3">SKUs In This Design</h5>
<div class='skuDetails d-flex'>
\${_skuContent}
</div>
</td>
<td colspan='1' class='lastColFixedWidth'>
<ul class='d-flex flex-column p-0 my-0 list-unstyled text-left'>
<li class="my-2 edit">
<a href="\${finalEditLink}" class="\${opacityClass}"><i class="far fa-edit mr-3"></i> Edit</a>
\${_toolTipMsg}
</li>
<li class="my-2"><a href="javascript:;" class="duplicateDesign" data-json="\${duplicateItemsArr}"><img src="/_ui/common/images/cspDuplicateNew.png" class="mr-3" /> Duplicate</a></li>
<li class="my-2"><a href='javascript:;' class="archiveDesign"><img src="\${_imgUrl}" class="mr-3" /> \${_text}</a></li>
</ul>
</td>
</tr>
`;
$(this).after(_nextRowContent);
$('tr.appendedRow').slideToggle("slow");
}
}); */
$(document).on('click', "td.shortName, td.cartIcons", function(e) {
e.stopPropagation();
});
/* $(document).delegate('a.archiveDesign', 'click', function(e){
e.stopPropagation();
let _flagData = $(this).closest('tr').prev('tr').attr('data-archive-flag');
let _dId = $(this).closest('tr').prev('tr').attr('data-design-id');
if(_flagData === 'true'){
_flagData = 'false';
}else{
_flagData = 'true';
}
$.ajax({
type:"GET",
url:"/logoexpress/archiveDesign/"+_dId+"/?archive="+_flagData,
success:function (data){
if(data == false) console.log('Failed to update archive flag data');
$('.cspCustomTable tbody tr').removeClass('activeRow');
$('#cspDesignRow_'+_dId).attr("data-archive-flag", _flagData);
let _api = new $.fn.dataTable.Api('#cspCustomTable');
_api.draw();
},
error:function (err){
console.log('Failed to update archive flag data');
}
});
}); */
$(document).delegate('a.trArchiveDes', 'click', function(e){
e.stopPropagation();
let _flagData = $(this).closest('tr').attr('data-archive-flag');
let _dId = $(this).attr('data-did');
if(_flagData === 'true'){
_flagData = 'false';
}else{
_flagData = 'true';
}
$.ajax({
type:"GET",
url:"/logoexpress/archiveDesign/"+_dId+"/?archive="+_flagData,
success:function (data){
if(data == false) console.log('Failed to update archive flag data');
//$('.cspCustomTable tbody tr').removeClass('activeRow');
$('#cspDesignRow_'+_dId).attr("data-archive-flag", _flagData);
let _api = new $.fn.dataTable.Api('#cspCustomTable');
_api.draw();
},
error:function (err){
console.log('Failed to update archive flag data');
}
});
});
/* $(document).delegate('a.duplicateDesign', 'click', function(e){
e.stopPropagation();
let _dId = $(this).closest('tr').prev('tr').attr('data-design-id');
let _skus = $(this).attr('data-json');
_sku = JSON.parse(window.atob(_skus));
let duplicateDesPayload = {
"DesignId":Number(_dId),
"SkusAndQtys":[]
}
if(_sku && _sku.length>0){
for(let i of _sku){
let obj = {
"Sku":i.sku,
"Quantity":Number(i.qty)
}
duplicateDesPayload.SkusAndQtys.push(obj);
}
}
let cspData = { "Designs": [duplicateDesPayload], "ReuseDecorator": false};
$.ajax({
type:"POST",
url:"/logoexpress/duplicateDesign",
data: { '${csrfTokenKey}':'${csrfTokenValue}', "cspDuplicateData" : JSON.stringify(cspData)},
success:function (data){
if(typeof data === 'object' && data !== null){
if(data.Success === true){
window.location.assign("/logoexpress/edit/"+data.Designs[0].NewDesignId);
}else{
console.log('Response from CSP : ' + data);
}
}else{
console.log('Response from CSP : ' + data);
}
},
error:function (err){
alert(err);
}
});
}); */
$(document).delegate('a.trReorderDes', 'click', function(e){
e.stopPropagation();
var theRow = $(this).parents('.design-row');
var infoForCommand = getRowInfoForCommand(theRow);
if(infoForCommand.SkusAndQtys.length == 0) {
//do handling
return false;
}
$.ajax({
type:"POST",
url:"/logoexpress/reorder?_requestConfirmationToken=${csrfTokenValue}",
data: JSON.stringify(infoForCommand),
contentType:"application/json; charset=utf-8",
success:function (newDesignId){
//alert(" newDesignId "+newDesignId);
if(newDesignId != 0){
window.location.assign("/logoexpress/cart/"+newDesignId);
console.log('Response from CSP or Design table: newDesignId ' + newDesignId);
}else{
console.log('Response from CSP or Design table: newDesignId ' + newDesignId);
}
},
error:function (err){
console.log('Error Response from CSP or during creation of the Design table'+err);
//alert(err);
}
});
});
$(document).ready(function() {
table = $('.cspCustomTable').DataTable(dataTableSettings);
$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) {
return $(table.row(dataIndex).node()).attr('data-archive-flag') === "false";
}
);
table.draw();
if(!(document.querySelector('#customTextBeforeNav'))){
$('.dataTables_paginate > span').before('<div id="customTextBeforeNav" class="d-inline-block">Pages </div>');
}else{
$("#customTextBeforeNav").text("Pages ");
}
table.on( 'draw.dt', function () {
if(!(document.querySelector('#customTextBeforeNav'))){
$('.dataTables_paginate > span').before('<div id="customTextBeforeNav" class="d-inline-block">Pages </div>');
}else{
$("#customTextBeforeNav").text("Pages ");
}
editTable();
});
setTimeout(function(){
$(".daterangepicker.dropdown-menu").prepend("<div class='d-flex custText mx-4 align-items-center justify-content-between mt-3 mb-2'><div class='font-weight-bold'>Filter by Date Created</div> <i class='fa fa-times font-weight-light'></i></div>.");
},2000);
// Date range script - Start of the sscript
$("#date_range").daterangepicker({
autoUpdateInput: false,
locale: {"cancelLabel": "Cancel"}
});
$("#date_range").on('apply.daterangepicker', function(ev, picker) {
$(this).val(picker.startDate.format('MM/DD/YYYY') + ' to ' + picker.endDate.format('MM/DD/YYYY'));
table.draw();
$('.csp-custom-design-page .dataTables_scrollHead th#datePickerColumn').addClass('activeFlt');
});
$("#date_range").on('cancel.daterangepicker', function(ev, picker) {
$(this).val('');
table.draw();
$('.csp-custom-design-page .dataTables_scrollHead th#datePickerColumn').removeClass('activeFlt');
});
function commonTabFunctionality(boolVal){
//$('.cspCustomTable tbody tr').removeClass('activeRow');
$('#dropDownStatus li:first-child + li > a').trigger('click');
$('#dropDownCBy li:first-child + li > a').trigger('click');
$('.csp-custom-design-page .dataTables_scrollHead th#datePickerColumn').removeClass('activeFlt');
$('#date_range').val('');
$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) {
return $(table.row(dataIndex).node()).attr('data-archive-flag') === boolVal;
}
);
table.draw();
}
$(document).delegate('#normalCspDesigns', 'click', function(){
$.fn.dataTable.ext.search.pop();
$(this).addClass('active').siblings('a').removeClass('active');
commonTabFunctionality("false");
});
let clickCount = 1;
$(document).delegate('#archiveCspDesigns', 'click', function(){
if(clickCount == 1){
$.fn.dataTable.ext.search.shift();
}else{
$.fn.dataTable.ext.search.pop();
}
$(this).addClass('active').siblings('a').removeClass('active');
commonTabFunctionality("true");
clickCount +=1;
});
$(document).delegate('.daterangepicker .custText i', 'click', function(){
$(".daterangepicker.dropdown-menu").hide();
$('#date_range').val('');
table.draw();
});
// Date range script - END of the script
$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ) {
var grab_daterange = $("#date_range").val();
var give_results_daterange = grab_daterange.split(" to ");
var filterstart = give_results_daterange[0];
var filterend = give_results_daterange[1];
var iStartDateCol = 5; //using column 2 in this instance
var iEndDateCol = 5;
var tabledatestart = aData[iStartDateCol];
var tabledateend= aData[iEndDateCol];
if ( !filterstart && !filterend ){
return true;
}else if ((moment(filterstart).isSame(tabledatestart) || moment(filterstart).isBefore(tabledatestart)) && filterend === ""){
return true;
}else if ((moment(filterstart).isSame(tabledatestart) || moment(filterstart).isAfter(tabledatestart)) && filterstart === ""){
return true;
}else if ((moment(filterstart).isSame(tabledatestart) || moment(filterstart).isBefore(tabledatestart)) && (moment(filterend).isSame(tabledateend) || moment(filterend).isAfter(tabledateend))){
return true;
}
return false;
}
);
});
(function($, window, document, undefined) {
var pluginName = "editable",
defaults = {
keyboard: true,
dblclick: true,
button: true,
buttonSelector: ".edit",
dropdowns: {},
edit: function() {},
save: function() {},
cancel: function() {}
};
function editable(element, options) {
this.element = element;
this.options = $.extend({}, defaults, options);
this._defaults = defaults;
this._name = pluginName;
this.init();
}
editable.prototype = {
init: function() {
this.editing = false;
//if (this.options.dblclick) {
//$(this.element).css('cursor', 'pointer').bind('dblclick', this.toggle.bind(this));
//}
if (this.options.button) {
$(this.options.buttonSelector, this.element).bind('click', this.toggle.bind(this));
}
},
toggle: function(e) {
e.preventDefault();
this.editing = !this.editing;
if (this.editing) {
this.edit();
} else {
this.save();
}
},
edit: function() {
var instance = this, values = {};
$('div[data-field]', this.element).each(function() {
var input, field = $(this).data('field'), value = $(this).text(), width = $(this).width(), uid = $(this).data('uid');
values[field] = value;
values[uid] = uid;
$(this).empty();
if(field in instance.options.dropdowns) {
console.log('Dropdowns removed');
} else {
input = $('<input type="text" data-current-val="'+value+'" />').val("").data('old-value', value).dblclick(instance._captureEvent);
}
input.appendTo(this);
if (instance.options.keyboard) {
input.keydown(instance._captureKey.bind(instance));
}
});
this.options.edit.bind(this.element)(values);
},
save: function() {
var instance = this, values = {};
$('div[data-field]', this.element).each(function() {
var value = $(':input', this).val();
let _oldVal = $(':input', this).attr('data-current-val');
values[$(this).data('field')] = value;
let _uId = $(this).data('uid');
var parentTrId = $(this).parents('tr').attr('id');
$.ajax({
type:"POST",
url:"/logoexpress/updateNotes",
data: { '${csrfTokenKey}':'${csrfTokenValue}', designId : _uId, notes: value},
success:function (data){
// $('.cspCustomTable').DataTable().destroy();
// table = $('.cspCustomTable').DataTable(dataTableSettings).draw();
table.row('#' + parentTrId).invalidate().draw();
},
error:function (err){
alert(err);
}
});
if(value){
$(this).empty().text(value);
}else{
$(this).empty().text(_oldVal);
}
});
this.options.save.bind(this.element)(values);
},
_captureKey: function(e) {
if (e.which === 13) {
this.editing = false;
this.save();
} else if (e.which === 27) {
this.editing = false;
this.cancel();
}
}
};
$.fn[pluginName] = function(options) {
return this.each(function() {
if (!$.data(this, "plugin_" + pluginName)) {
$.data(this, "plugin_" + pluginName, new editable(this, options));
}
});
};
})(jQuery, window, document);
editTable();
//custome editable starts
function editTable(){
$(function() {
//console.log('editTable()');
$('table tr').editable({
edit: function(values) {
console.log('edit()');
$(".edit i", this).removeClass('fa-pencil').addClass('fa-save').attr('title', 'Save');
$(this).addClass('activeRowEdit');
},
save: function(values) {
console.log('save()');
$(".edit i", this).removeClass('fa-save').addClass('fa-pencil').attr('title', 'Edit');
$(this).removeClass('activeRowEdit');
$('.cspCustomTable tbody tr').removeClass('activeRow');
}
});
});
}
$('body, .dropdown > div').click(function(){
let _elm = document.querySelector('.daterangepicker.show-calendar');
let _dis = _elm.style.display;
if(_dis && _dis === "block"){
$('.csp-custom-design-page .dataTables_scrollHead th#datePickerColumn').addClass('active');
}else{
$('.csp-custom-design-page .dataTables_scrollHead th#datePickerColumn').removeClass('active');
}
});
$(document).on('input', '.sku-detail-entered-qty', function(){
var thisInput = $(this);
var thisLotSize = thisInput.data('lot-size');
var thisMinQuantity = thisInput.data('min-quantity');
var thisParentRow = $('#' + thisInput.parents('.expanded-sku-details').data('parent-row-id'));
var thisParentExpandedRow = thisInput.parents('.expanded-sku-details-sku');
var qtyValid = true;
var thisInputValue = Number(thisInput.val());
thisParentExpandedRow.removeClass('invalid-min');
thisParentExpandedRow.removeClass('invalid-lot');
if(!thisInputValue || isNaN(thisInputValue) || thisInputValue < thisMinQuantity || thisInputValue % thisLotSize != 0) {
qtyValid = false;
}
if(thisInputValue && !isNaN(thisInputValue)) {
if(thisInputValue < thisMinQuantity) {
thisParentExpandedRow.addClass('invalid-min');
}
if(thisInputValue % thisLotSize != 0) {
thisParentExpandedRow.addClass('invalid-lot');
}
}
if(qtyValid) {
thisInput.removeClass('input-form-error');
thisParentRow.find('.cartIcons a').not('.disabled-on-load').removeAttr('disabled');
} else {
thisInput.addClass('input-form-error');
thisParentRow.find('.cartIcons a').not('.disabled-on-load').attr('disabled', 'disabled');
}
});
let ajaxLoadPage = false;
$(document).ready(function() {
//console.log(" document loaded ");//for old url do not do the ajax calls. getDesignLibraryOld
if (window.location.pathname== "/logoexpress/getDesignLibrary") {
console.log("URL contains getDesignLibrary doing ajax calls to fetch latest infomration from CSP API.");
ajaxLoadPage = true;
$('#cspDesignTableloadedData').addClass('cspDesignTableloadedData');
}
});
function getStatusValue(status) {
let cspStatus = "";
switch (status) {
case "INCART":
cspStatus = "Approved";
break;
case "DELETED":
cspStatus = "Deleted";
break;
case "AWAITINGPROOFAPPROVAL":
cspStatus = "Awaiting Approval";
break;
case "AWAITINGTHIRDPARTYAPPROVAL":
cspStatus = "Awaiting Approval";
break;
case "THIRDPARTYAPPROVALDENIED":
cspStatus = "Rejected";
break;
case "AWAITINGARTDEPARTMENT":
cspStatus = "Ordered";
break;
case "DECORATORTRIAGE":
cspStatus = "Ordered";
break;
case "RELEASEDTODECORATOR":
cspStatus = "Ordered";
break;
case "WAITINGFORPRODUCT":
cspStatus = "Ordered";
break;
case "INPROGRESS":
cspStatus = "Ordered";
break;
case "COMPLETE":
cspStatus = "Ordered";
break;
case "CLOSED":
cspStatus = "Closed";
break;
default:
cspStatus = "Unknown";
}
return cspStatus;
}
window.onload = function() {
if (ajaxLoadPage) {
let _designIds = [];
let _dIds = [...document.querySelectorAll('#designsdata > span')];
if (_dIds && _dIds.length > 0) {
for (let i = 0; i < _dIds.length; i++) {
if (_dIds[i].innerHTML != '') _designIds.push(_dIds[i].innerHTML);
}
} else {
$('#cspDesignTableloadedData').removeClass('cspDesignTableloadedData');
}
for (let [i, _item] of _designIds.entries()) {
//console.log(_item);
$.ajax({
url: "design/" + _item,
success: function(result) {
//console.log(result);
result = JSON.parse(JSON.stringify(result))
table.rows().every(function(index) {
let rowdata = this.data();
//console.log(rowdata);
if (rowdata[3] === result.designId) {
if (result.status) {
rowdata[2] = getStatusValue(result.status.toUpperCase())
if ("THIRDPARTYAPPROVALDENIED".toLowerCase() === result.status.toLowerCase()) {
if (result.designComments) {
$('#cspDesignRow_' + result.designId).addClass('has-design-comments');
rowdata[1] += '<div class="design-comments-wrap"><div>' + result.designComments + '</div></div>';
}
}
}
if (result.jobId) {
rowdata[4] = result.jobId;
}
if (result.notes) {
//rowdata[7] = result.notes;
}
if(result.createdBy){
if(result.createdBy != rowdata[6]){
// Disable the edit and duplicate buttons
//console.log(" Designs created by other user.");
if(rowdata[8].includes('edit-disable-start')){
rowdata[8]=rowdata[8].replace('edit-disable-start', 'cspDesignTableloadedData')
}
if(rowdata[8].includes('duplicate-disable-start')){
rowdata[8]=rowdata[8].replace('duplicate-disable-start', 'cspDesignTableloadedData')
}
}
}
let _trItems = "";
if (result.cspItems && result.cspItems.length != 0) {
//console.log(result.cspItems);
result.cspItems.forEach(function(cspitem) {
//console.log(cspitem);
//console.log(" qty " + cspitem.qty + " sku " + cspitem.sku + " thumbnail " + cspitem.thumbnail + " minQuantity " + result.minQuantity + " lotSize " + result.lotSize);
_trItems += '<tr class="expanded-sku-details-sku"> <td class="no-min-width hidden"> <input type="checkbox" value="" checked="checked"> <input type="hidden" class="sku-detail-sku" value="' + cspitem.sku + '"> <input type="hidden" class="sku-detail-qty" value="' + cspitem.qty + '"> </td> <td> <img src=" ' + cspitem.thumbnail + ' " width="90" alt="NoImage"> </td> <td>' + cspitem.sku + '</td> <td>' + cspitem.qty + '</td> <td class="min-quantity-column">' + result.minQuantity + '</td> <td class="lot-size-column">' + result.lotSize + '</td> </tr>';
//console.log(_trItems);
});
}
let _tabeleData = '<table class="display expanded-sku-details" cellspacing="0" data-parent-row-id="cspDesignRow_' + result.designId + '"> <thead> <tr> <th class="no-min-width hidden"> </th> <th> </th> <th> SKU </th> <th> Qty </th> <th> Minimum Quantity </th> <th> Lot Size </th> </tr> </thead> <tbody>' + _trItems + '</tbody> </table>';
// rowdata[10] = _tabeleData;
//console.log(rowdata);
//table.row(index).data(rowdata).draw(false)
/* let parentTrId = $(this).parents('tr').attr('id');
table.row('#' + parentTrId).invalidate().draw();
table.row(index).data(rowdata).draw(false); */
//table.rows().invalidate().draw(false);
/* console.log(table.rows(index).cells(3).data());
console.log('-------------');
console.log(table.cells(3).data()); */
let cell = table.cell( '#cspDesignRow_' + result.designId, 10 );
//console.log(cell.data());
cell.data( _tabeleData ).draw();
//console.log(cell.data());
console.log(table.data());
}
});
if (i == _designIds.length - 1) {
$('#cspDesignTableloadedData').removeClass('cspDesignTableloadedData');
}
}
});
}
}
};
</script>
</jsp:body>
</template:page>
Comments
Post a Comment