344 lines
14 KiB
Plaintext
344 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>
|
|
<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/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>Cygnus 1.0 | Add/Edit Product</title>
|
|
<link href="/matrix/css/bootstrap-5.3.8.min.css" rel="stylesheet" type="text/css" />
|
|
<link href="/matrix/css/matrix-v2.css?v=6" rel="stylesheet" type="text/css" />
|
|
<link href="/matrix/css/matrix-shell-v2.css?v=7" rel="stylesheet" type="text/css" />
|
|
<link href="/matrix/css/tool-workspace-v3.css?v=2" rel="stylesheet" type="text/css" />
|
|
<link href="/matrix/css/manage-product-v4.css?v=3" rel="stylesheet" type="text/css" />
|
|
<script src="/matrix/js/bootstrap-5.3.8.bundle.min.js" defer></script>
|
|
<script src="/matrix/js/matrix-shell-v2.js" defer></script>
|
|
<link href="/matrix/css/matrix-frame-dialog.css?v=6" rel="stylesheet" type="text/css" />
|
|
<script src="/matrix/js/matrix-frame-dialog.js?v=2" defer></script>
|
|
<script src="/matrix/js/matrix-accessibility-v1.js?v=1" defer></script>
|
|
<link href="/matrix/css/matrix-theme-v2.css?v=4" rel="stylesheet" type="text/css" />
|
|
</head>
|
|
<body class="matrix-v2 matrix-shell matrix-tool-workspace matrix-manage-product">
|
|
<div id='PageFrame'>
|
|
<%@ include file="/WEB-INF/app/fragments/app-shell-header.jspf" %>
|
|
<%-- Shared shell owns ${Sessvals.menuHtml}. --%>
|
|
<div id="formcontainer" class="matrix-tool-workspace__content" style="max-width:1200px">
|
|
<form:form method="post" modelAttribute="addproduct" action="addremoveproduct" >
|
|
<div>
|
|
<!-- Title -->
|
|
<div class="title">
|
|
<img class="matrix-title-icon" src="/matrix/images/cutlist.png" align="absmiddle" />
|
|
<span class="matrix-title-text" 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 class="title">
|
|
<img class="matrix-title-icon" src="/matrix/images/cutlist.png" align="absmiddle" />
|
|
<span class="matrix-title-text" 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 class="title">
|
|
<img class="matrix-title-icon" src="/matrix/images/cutlist.png" align="absmiddle" />
|
|
<span class="matrix-title-text" 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 class="title">
|
|
<img class="matrix-title-icon" src="/matrix/images/cutlist.png" align="absmiddle" />
|
|
<span class="matrix-title-text" align="absmiddle">Unsaved Changes</span>
|
|
<input type="button" class="button matrix-title-action" name="btnsave" 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">
|
|
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' class='matrix-form-controls'>";
|
|
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>
|