342 lines
14 KiB
Plaintext
342 lines
14 KiB
Plaintext
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
|
pageEncoding="ISO-8859-1"%>
|
|
<%@page language="java" session="true" %>
|
|
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
|
|
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
|
|
<%@taglib prefix="spring" uri="http://www.springframework.org/tags" %>
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
|
|
<script language="javascript" src="/matrix/js/lib/constants.js" type="text/javascript"></script>
|
|
<script language="javascript" src="/matrix/js/jquery1.7.2.js" type="text/javascript"></script>
|
|
<script language="javascript" src="/matrix/js/ui/uifuncs.js" type="text/javascript"></script>
|
|
<script language="javascript" src="/matrix/js/lib/jsfuncs.js" type="text/javascript"></script>
|
|
<script language="javascript" src="/matrix/js/ui/msgdialog.js" type="text/javascript"></script>
|
|
<script language="javascript" src="/matrix/js/ui/select.js" type="text/javascript"></script>
|
|
<script language="javascript" src="/matrix/js/appjs/cutoff.js" type="text/javascript"></script>
|
|
<script language="javascript" src="/matrix/js/validator.js" type="text/javascript"></script>
|
|
|
|
<link href="/matrix/css/matrix.css" rel="stylesheet" type="text/css" />
|
|
<link href="/matrix/css/menu.css" rel="stylesheet" type="text/css" />
|
|
<link href="/matrix/css/button.css" rel="stylesheet" type="text/css" />
|
|
<link href="/matrix/css/div.css" rel="stylesheet" type="text/css" />
|
|
<link href="/matrix/css/select.css" rel="stylesheet" type="text/css" />
|
|
<link href="/matrix/css/table.css" rel="stylesheet" type="text/css" />
|
|
<title>Nimble 1.0 | Add/Edit Product</title>
|
|
</head>
|
|
<body>
|
|
<div id='PageFrame'>
|
|
<!-- Title Bar -->
|
|
<div id='title' class="title">
|
|
<img id="icon" src="/matrix/images/optmale.png" />
|
|
<img id="close" src="/matrix/images/close.jpg" onclick="javascript:closewindow();" />
|
|
<span id="title">Nimble 1.0 ${Sessvals.getCompanyCode() } (${Sessvals.getBranchLocation() }) ${Sessvals.getUserDisplayName()} (${Sessvals.getUserGroupName()}) </span>
|
|
</div>
|
|
<!-- -->
|
|
<!-- Dynamic Menu -->
|
|
<jsp:include page='../../usermenu/menu_${Sessvals.getUserID()}.html' />
|
|
<!-- -->
|
|
<div id="formcontainer" style="width:800px;margin-top:5px;position:absolute;z-index:-1">
|
|
<form:form method="post" modelAttribute="addproduct" action="addremoveproduct" >
|
|
<div>
|
|
<!-- Title -->
|
|
<div id='title' class="title">
|
|
<img id="icon" src="/matrix/images/cutlist.png" align="absmiddle" />
|
|
<span id="title" align="absmiddle">Add Edit Product</span>
|
|
<div class="divselect" id="divportfolio" style="width:217px;position:absolute;top:3px;right:30px;">
|
|
<form:select path="portfolio_id" style="width:235px" onchange="SubmitForm('getproducts','_parent','addproduct')">
|
|
<form:option value="-1" label="SELECT PORTFOLIO" selected="true"/>
|
|
<c:forEach items="${portlist}" var="port">
|
|
<form:option value="${port[0]}" label="${port[1]}" />
|
|
</c:forEach>
|
|
</form:select>
|
|
</div>
|
|
<img id="close" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('initaddproduct','_parent','addproduct')"/>
|
|
</div>
|
|
<!-- -->
|
|
<div id="FormPanel1" class="FormPanel" style="text-align:center">
|
|
<div id="FormPanel1-1" class="FormPanel" style="margin-top:10px;margin-bottom:10px;width:380px;height:400px;display:inline-block">
|
|
<div>
|
|
<div id='title' class="title">
|
|
<img id="icon" src="/matrix/images/cutlist.png" align="absmiddle" />
|
|
<span id="title" align="absmiddle">Mapped Products</span>
|
|
</div>
|
|
</div>
|
|
<div id="TablePanel" class="tableContainer" style="height:360px;overflow-y:scroll">
|
|
<table border="0" cellspacing="0" width="100%" id="mappedproductstable">
|
|
<thead class="thead">
|
|
<tr title="Row Title">
|
|
<td>S.No</td>
|
|
<td width="280">Product</td>
|
|
<td>Delete</td>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="scrollContent" id="productsbody">
|
|
<c:forEach items="${addproduct.mappedproducts}" var="products" varStatus="status">
|
|
<tr id="row${status.count}">
|
|
<td>
|
|
<input type="hidden" name="mapid" id="row${status.count}mapid" value="${products[0]}" />
|
|
<input type="hidden" name="valueid" id="row${status.count}valueid" value="${products[1]}" />
|
|
${status.count}</td>
|
|
<td style="text-align:left" class="product">${products[2]}</td>
|
|
<td>
|
|
<img id="img-p-${status.count}" src="/matrix/images/x-red.gif" title="Add Option" onclick="queueAction(this,${status.count},'remove')" style="right:5px"/>
|
|
</td>
|
|
</tr>
|
|
</c:forEach>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="FormPanel1-2" class="FormPanel" style="margin-top:10px;width:380px;height:400px;display:inline-block;">
|
|
<div>
|
|
<div id='title' class="title">
|
|
<img id="icon" src="/matrix/images/cutlist.png" align="absmiddle" />
|
|
<span id="title" align="absmiddle">All Options</span>
|
|
<input type="text" class="textbox" id="searchbox" style="width:220px;margin-top:-3px" onkeyup="findOption(this)">
|
|
<img id="close" src="/matrix/images/plus_green.png" title="Add Option" style="right:25px" onclick="newOptionDialog()" />
|
|
</div>
|
|
</div>
|
|
<div id="TablePanel" class="tableContainer" style="height:360px;overflow-y:scroll">
|
|
<table border="0" cellspacing="0" width="100%" id="optionvaluestable">
|
|
<thead class="thead">
|
|
<tr title="Row Title">
|
|
<td>S.No</td>
|
|
<td width="280">Option</td>
|
|
<td>Map</td>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="scrollContent" id="optionvaluesbody">
|
|
<c:forEach items="${addproduct.alloptionvalues}" var="options" varStatus="status">
|
|
<tr id="rowv${status.count}">
|
|
<td>
|
|
<input type="hidden" name="mapid" id="rowv${status.count}valueid" value="${options[0]}" />
|
|
${status.count}</td>
|
|
<td style="text-align:left" class="optionvalue">${options[1]}</td>
|
|
<td>
|
|
<img id="img-o-${status.count}" src="/matrix/images/attach.png" title="Add Option" onclick="queueAction(this,${status.count},'map')" style="right:5px"/>
|
|
</td>
|
|
</tr>
|
|
</c:forEach>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="FormPanel1-3" class="FormPanel" style="height:200px">
|
|
<div>
|
|
<div id='title' class="title">
|
|
<img id="icon" src="/matrix/images/cutlist.png" align="absmiddle" />
|
|
<span id="title" align="absmiddle">Unsaved Changes</span>
|
|
<input type="button" class="button" name="btnsave" style="margin-top:-3px;float:right" value="Save Changes" id="btnsave" accesskey="S" onclick="submitSaveRequest()" />
|
|
</div>
|
|
</div>
|
|
<div id="TablePanel" class="tableContainer" style="height:160px;overflow-y:scroll">
|
|
<table border="0" cellspacing="0" width="100%" id="unsavedchangestable">
|
|
<thead class="thead">
|
|
<tr title="Row Title">
|
|
<td width="30">S.No</td>
|
|
<td >Option</td>
|
|
<td width="100">Action</td>
|
|
<td width="30">Undo</td>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="scrollContent" id="unsavedchangesbody">
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<form:input type="hidden" path="userid" value="0" />
|
|
<form:input type="hidden" path="data" value="0" />
|
|
</form:form>
|
|
<input type="hidden" id="invalidfields" value="0" />
|
|
<input type="hidden" id="selectedports" value="0" />
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<!-- Page Load Javascript -->
|
|
<script language="javascript" type="text/javascript">
|
|
centerDivBoth("formcontainer","H");
|
|
InitPage();
|
|
$("#btnsave").show();
|
|
|
|
var json = {"rows":[]};
|
|
|
|
function findOption(txtel){
|
|
|
|
var valuetosearch = $(txtel).val();
|
|
|
|
$("#optionvaluesbody tr").each(function(){
|
|
|
|
if(valuetosearch.length == 0){
|
|
$(this).show();
|
|
}else{
|
|
optionvalue = $(this).find('.optionvalue').html();
|
|
if(optionvalue.toLowerCase().search(valuetosearch.toLowerCase()) > -1){
|
|
$(this).show();
|
|
}else{
|
|
$(this).hide();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
function queueAction(elm,index,action){
|
|
var valueid = "";
|
|
if(action == 'map'){
|
|
valueid = $('#rowv'+index+'valueid').val();
|
|
if(!isAlreadyMapped(valueid)){
|
|
if(!isAlreadyInUnsavedQueue(valueid)){
|
|
json.rows.push(
|
|
{
|
|
"opt_map_id" : 0,
|
|
"opt_value_id" : $('#rowv'+index+'valueid').val(),
|
|
"val_description" : $('#rowv'+index).find('.optionvalue').html(),
|
|
"action" : action
|
|
}
|
|
);
|
|
populateTable(json);
|
|
}
|
|
}
|
|
}else if(action == 'remove'){
|
|
valueid = $('#row'+index+'valueid').val();
|
|
if(!isAlreadyInUnsavedQueue(valueid)){
|
|
json.rows.push(
|
|
{
|
|
"opt_map_id" : $('#row'+index+'mapid').val(),
|
|
"opt_value_id" : $('#row'+index+'valueid').val(),
|
|
"val_description" : $('#row'+index).find('.product').html(),
|
|
"action" : action
|
|
}
|
|
);
|
|
populateTable(json);
|
|
}
|
|
}
|
|
else if(action == 'add'){
|
|
if(!isAlreadyMapped(elm.value)){
|
|
if(!isAlreadyInoption(elm.value)){
|
|
if(!isAlreadyInUnsavedQueue(elm.value)){
|
|
json.rows.push(
|
|
{
|
|
"opt_map_id" : index,
|
|
"opt_value_id" : index,
|
|
"val_description" : elm.value,
|
|
"action" : action
|
|
}
|
|
);
|
|
populateTable(json);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function isAlreadyMapped(valueid){
|
|
alreadymapped = false;
|
|
$("#productsbody tr").each(function(){
|
|
rowvalueid = $('#'+$(this).attr('id')+'valueid').val();
|
|
product = $(this).find('.product').html();
|
|
if(rowvalueid == valueid || product.toUpperCase() == valueid.toUpperCase()){
|
|
alert('Product already mapped');
|
|
alreadymapped = true;
|
|
return false;
|
|
}
|
|
});
|
|
|
|
return alreadymapped;
|
|
}
|
|
|
|
function isAlreadyInoption(valueid){
|
|
alreadinoption = false;
|
|
$("#optionvaluesbody tr").each(function(){
|
|
option = $(this).find('.optionvalue').html();
|
|
if(option == valueid){
|
|
alert('Product is already exists in option list. Please search to map it from the All Options list.');
|
|
$("#searchbox").val(valueid);
|
|
$("#searchbox").keyup();
|
|
alreadinoption = true;
|
|
return false;
|
|
}
|
|
});
|
|
|
|
return alreadinoption;
|
|
}
|
|
|
|
function isAlreadyInUnsavedQueue(valueid){
|
|
for ( var i = 0; i < json.rows.length; i++)
|
|
{
|
|
if(json.rows[i].opt_value_id == valueid || json.rows[i].val_description == valueid){
|
|
alert('Option is already in unsaved changes queue');
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function populateTable(actionsJson){
|
|
html = "";
|
|
for ( var i = 0; i < actionsJson.rows.length; i++)
|
|
{
|
|
html = html + "<tr><td>"+(i+1)+"</td>";
|
|
html = html + '<td style="text-align:left">'+actionsJson.rows[i].val_description+'</td>';
|
|
html = html + '<td class="action">'+actionsJson.rows[i].action+'</td>';
|
|
html = html + '<td><img id="img-o-${status.count}" src="/matrix/images/redo.png" title="Add Option" onclick="unqueueAction('+i+')" style="right:5px"/></td></tr>';
|
|
}
|
|
$("#unsavedchangesbody").html(html);
|
|
}
|
|
|
|
function unqueueAction(index){
|
|
delete json.rows.splice(index,1);
|
|
populateTable(json);
|
|
}
|
|
|
|
function submitSaveRequest(){
|
|
if(confirm('Are you sure about the changes. Click OK to proceed')){
|
|
$("#data").val(JSON.stringify(json.rows));
|
|
SubmitForm('addremoveproduct','_parent','addproduct');
|
|
}
|
|
}
|
|
|
|
function newOptionDialog(){
|
|
portfolioid = $("#portfolio_id").val();
|
|
if(portfolioid > 0){
|
|
var optDiv=document.createElement("div");
|
|
optDiv.setAttribute("id","FormPanel");
|
|
optDiv.setAttribute("class","FormPanel");
|
|
optDiv.setAttribute("style","font-family:Tahoma;overflow:visible;padding-right:3px;width:200px;");
|
|
var ControlsPanel="<table border='0' cellspacing='0' style='width:198px' id='FormControls'>";
|
|
ControlsPanel=ControlsPanel+"<tr><td>New Option</td></tr>";
|
|
|
|
ControlsPanel=ControlsPanel+"<tr>";
|
|
ControlsPanel=ControlsPanel+"<td><input type='text' style='width:187px' id='newoptionfield' onblur=\"validate(this,'t','SplInstruction');\" /></td>";
|
|
ControlsPanel=ControlsPanel+"</tr>";
|
|
|
|
ControlsPanel=ControlsPanel+"<tr><td><input type='button' class='button' name='btnadd' style='margin-top:5px;float:right' value='Add' id='btnadd' accesskey='K' onclick=\"queueAction(document.getElementById('newoptionfield'),0,'add')\" />";
|
|
ControlsPanel=ControlsPanel+"<input type='button' class='button' name='btncancel' style='margin-top:5px;float:right' value='Close' id='btncancel' accesskey='C' onclick=\"hideDialog(document.getElementById('inptDialog'))\" /></td></tr></table>";
|
|
optDiv.innerHTML=ControlsPanel;
|
|
ShowInputDialog(optDiv,"New Option","hint","inptDialog");
|
|
$("#newoptionfield").focus();
|
|
}else{
|
|
CallMessage('001:error:Please select portfolio',8000,200,300);
|
|
}
|
|
}
|
|
|
|
function hideDialog(ElemToRemove)
|
|
{
|
|
validate(document.getElementById('newoptionfield'),'f','SplInstruction');
|
|
$("#newoptionfield").val("");
|
|
RemoveDialog(ElemToRemove);
|
|
}
|
|
</script>
|
|
|
|
|
|
<c:if test="${not empty addproduct.getErrMsg()}">
|
|
<script language="javascript" type="text/javascript">CallMessage('${addproduct.getErrMsg()}',8000,200,300); </script>
|
|
</c:if>
|
|
|
|
</html> |