M3 Integration fixes
This commit is contained in:
Mark Gregory
+407
@@ -0,0 +1,407 @@
|
||||
@extends('m3::liberty-theme.layout.main')
|
||||
@section('title')
|
||||
Solon Sentinel Portal - ordersOnHoldReq
|
||||
@endsection
|
||||
@section('breadcrumb')
|
||||
<div class="row">
|
||||
<hr class="hr-primary" />
|
||||
<nav class="navbar navbar-expand-lg navbar-light" aria-label="Page navigation">
|
||||
<div class="container-fluid">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb breadcrumb-custom">
|
||||
<li class="breadcrumb-item"><a href="/" data-abc="true"><i class="fa fa-home"></i> Dashboard</a></li>
|
||||
<li class="breadcrumb-item"><a data-abc="true" href="/ordersOnHoldReq"><i class="fa fa-truck"></i> Orders On Hold</a></li>
|
||||
<li class="breadcrumb-item"><a data-abc="true" href="/ordersOnHoldReq/{{ $request->reason }}">Reason: {{ $request->reason }}</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Order: {{ $request->order }}</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
@endsection
|
||||
@section('content')
|
||||
<!-- /.row -->
|
||||
<div class="container-fluid px-4">
|
||||
<h1 class="mt-4">Orders</h1>
|
||||
<div class="card mb-4">
|
||||
<div class="card-header" style="line-height: 34px;">
|
||||
<ul class="nav nav-tabs" id="myTab" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<a class="nav-link active" id="order-tab" data-bs-toggle="tab" href="#order" role="tab" aria-controls="order" aria-selected="true">Order inquiry</a>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<a class="nav-link" id="details-tab" data-bs-toggle="tab" href="#details" role="tab" aria-controls="details" aria-selected="false">Details</a>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<a class="nav-link" id="comments-tab" data-bs-toggle="tab" href="#comments" role="tab" aria-controls="comments" aria-selected="false">Comments</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-body">
|
||||
<div class="tab-content" id="myTabContent">
|
||||
<div class="tab-pane fade show active" id="order" role="tabpanel" aria-labelledby="order-tab">@include('m3::liberty-theme.partials.tabs.orders')</div>
|
||||
<div class="tab-pane fade" id="details" role="tabpanel" aria-labelledby="details-tab">@include('m3::liberty-theme.partials.tabs.details')</div>
|
||||
<div class="tab-pane fade" id="comments" role="tabpanel" aria-labelledby="comments-tab">@include('m3::liberty-theme.partials.tabs.comments')</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- /.row -->
|
||||
@include('m3::liberty-theme.partials.modals.blank')
|
||||
@include('m3::liberty-theme.partials.modals.shipToEdit')
|
||||
@include('m3::liberty-theme.partials.modals.shipToCheckBox')
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
<script>
|
||||
$( document ).ready(function() {
|
||||
|
||||
$(document).on('click', '#DATE', function(e){
|
||||
e.preventDefault();
|
||||
$(this).attr("autocomplete", "off");
|
||||
});
|
||||
|
||||
$(document).on('click', '#AMSPARE5', function(e){
|
||||
e.preventDefault();
|
||||
$(this).attr("autocomplete", "off");
|
||||
});
|
||||
|
||||
$(document).on('click', '.close', function(e){
|
||||
$('.altEditor-modal').modal('hide');
|
||||
});
|
||||
|
||||
$(document).on('click', "button[data-dismiss='modal']", function(e){
|
||||
$('.altEditor-modal').modal('hide');
|
||||
});
|
||||
|
||||
$(document).on('keyup', "#AMCOMM", function(e){
|
||||
var maxlength = "150";
|
||||
var currentLength = $(this).val().length;
|
||||
|
||||
if($("#counter_" + $(this).attr("id")).length == 0) {
|
||||
$(this).after("<div id='"+"counter_" + $(this).attr("id")+"'></div>");
|
||||
}
|
||||
|
||||
if( currentLength >= maxlength ){
|
||||
$("#counter_" + $(this).attr("id")).html(currentLength + ' / ' + maxlength);
|
||||
}else{
|
||||
$("#counter_" + $(this).attr("id")).html(maxlength - currentLength + " chars left");
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
$('.toUpper').on('input', function(evt) {
|
||||
$(this).val(function(_, val) {
|
||||
return val.toUpperCase();
|
||||
});
|
||||
});
|
||||
|
||||
$(document).on('click', '#submitShipToEdit', function(){
|
||||
$("#shipToEdit").modal('hide');
|
||||
});
|
||||
$(document).on('click', '.close-modal', function(){
|
||||
$("#shipToEdit").modal('hide');
|
||||
});
|
||||
|
||||
// close and go to checkbox
|
||||
$(document).on('click', '.close-modal2', function(){
|
||||
$("#blank-modal").modal('hide');
|
||||
//$('#shipToCheckBox').modal('show');
|
||||
});
|
||||
// close and goto edit
|
||||
$(document).on('click', '.close-modal3', function(){
|
||||
$("#blank-modal").modal('hide');
|
||||
$('#shipToEdit').modal('show');
|
||||
});
|
||||
|
||||
// Make Bill to and Ship To boxes the same height
|
||||
var s1 = $('#div1').height();
|
||||
var s2 = $('#div2').height();
|
||||
if (s1 > s2){
|
||||
$('#div2').css('height', s1 + "px");
|
||||
}else{
|
||||
$('#div1').css('height', s2 + "px");
|
||||
}
|
||||
|
||||
// Open Modal Ship To Edit
|
||||
$(document).on('click', '#shipToEdit_click', function(){
|
||||
$('#shipToEdit').modal('show');
|
||||
});
|
||||
// Open Modal Ship To CheckBox
|
||||
$(document).on('click', '#shipToCheckBox_click', function(){
|
||||
$('#shipToCheckBox').modal('show');
|
||||
});
|
||||
|
||||
|
||||
// Save Ship To Edit
|
||||
$(document).on('click', '#submitShipToEdit', function(){
|
||||
|
||||
var changes_detected = 0;
|
||||
|
||||
// Retrieve the values we need to pass on
|
||||
var NEW_SHSHA1 = $("input[name=SHSHA1]").val();
|
||||
var NEW_SHSHA2 = $("input[name=SHSHA2]").val();
|
||||
var NEW_SHSHCI = $("input[name=SHSHCI]").val();
|
||||
var NEW_SHSHST = $("input[name=SHSHST]").val();
|
||||
var NEW_SHSHZP = $("input[name=SHSHZP]").val();
|
||||
|
||||
// Retrieve old values
|
||||
var OLD_SHSHA1 = $("#OLD_SHSHA1").text();
|
||||
var OLD_SHSHA2 = $("#OLD_SHSHA2").text();
|
||||
var OLD_SHSHCI = $("#OLD_SHSHCI").text();
|
||||
var OLD_SHSHST = $("#OLD_SHSHST").text();
|
||||
var OLD_SHSHZP = $("#OLD_SHSHZP").text();
|
||||
|
||||
//alert("NEW_SHSHA1: "+NEW_SHSHA1+", NEW_SHSHCI: "+NEW_SHSHCI+", NEW_SHSHST: "+NEW_SHSHST+",NEW_SHSHZP: "+NEW_SHSHZP);
|
||||
if (NEW_SHSHA1=="" || NEW_SHSHCI=="" || NEW_SHSHST=="" || NEW_SHSHZP==""){
|
||||
$('.blank-body').html("There are fields that are blank that must be populated.");
|
||||
$('#blank-submit').addClass('close-modal2');
|
||||
$('#blank-submit').html('Close');
|
||||
$('#blank-close').addClass('close-modal3');
|
||||
$('#blank-close').html('Back');
|
||||
$('#blank-modal').modal('show');
|
||||
}
|
||||
// Compare the new and the old value before submiting
|
||||
if(NEW_SHSHA1!=OLD_SHSHA1){changes_detected = 1;}
|
||||
//alert("NEW_SHSHA1: "+NEW_SHSHA1+", OLD_SHSHA1: "+OLD_SHSHA1+", changes_detected: "+changes_detected);
|
||||
if(NEW_SHSHA2!=OLD_SHSHA2){changes_detected = 1; if(NEW_SHSHA2=="") NEW_SHSHA2=" ";}
|
||||
//alert("NEW_SHSHA2: "+NEW_SHSHA2+", OLD_SHSHA2: "+OLD_SHSHA2+", changes_detected: "+changes_detected);
|
||||
if(NEW_SHSHCI!=OLD_SHSHCI){changes_detected = 1;}
|
||||
if(NEW_SHSHST!=OLD_SHSHST){changes_detected = 1;}
|
||||
if(NEW_SHSHZP!=OLD_SHSHZP){changes_detected = 1;}
|
||||
|
||||
// If we have no changes we let the user know in a blank modal
|
||||
if (changes_detected==0){
|
||||
$('.blank-body').html("No changes has been detected. Click (Back) to make changes.");
|
||||
$('#blank-submit').addClass('close-modal2');
|
||||
$('#blank-submit').html('Close');
|
||||
$('#blank-close').addClass('close-modal3');
|
||||
$('#blank-close').html('Back');
|
||||
$('#blank-modal').modal('show');
|
||||
|
||||
// Send ajax request
|
||||
}else{
|
||||
|
||||
var csrf = document.querySelector('meta[name="csrf-token"]').content;
|
||||
|
||||
$.ajax({
|
||||
type:'POST',
|
||||
url:'/ordersOnHoldReq/{{ $request->reason }}/{{ $request->order }}/saveShipToEdit',
|
||||
data: {
|
||||
'SHSHA1': NEW_SHSHA1,
|
||||
'SHSHA2': NEW_SHSHA2,
|
||||
'SHSHCI': NEW_SHSHCI,
|
||||
'SHSHST': NEW_SHSHST,
|
||||
'SHSHZP': NEW_SHSHZP,
|
||||
'_token': csrf
|
||||
},
|
||||
success:function(data){
|
||||
// If no errors load the next checkbox
|
||||
if (data=="success"){
|
||||
$('#blank-modal').modal('hide');
|
||||
$('#shipToEdit').modal('hide');
|
||||
$('#shipToCheckBox').modal('show');
|
||||
|
||||
// Update the page with out a reload
|
||||
$.get('/ordersOnHoldReq/{{ $request->reason }}/{{ $request->order }}', function(response) {
|
||||
var $page = $(response);
|
||||
$("#shipTo").replaceWith($page.find("#shipTo"));
|
||||
$("#shipToEditData").replaceWith($page.find("#shipToEditData"));
|
||||
|
||||
var s1 = $('#div1').height();
|
||||
var s2 = $('#div2').height();
|
||||
|
||||
if (s1 > s2){
|
||||
$('#div2').css('height', s1 + "px");
|
||||
}else{
|
||||
$('#div1').css('height', s2 + "px");
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// If no errors then go to the next modal
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// Save Ship To CheckBox
|
||||
|
||||
$(document).on('click', '#submitShipToCheckBox', function(){
|
||||
|
||||
// Retrieve checkbox values
|
||||
var check1 = $('#check1').is(":checked");
|
||||
var check2 = $('#check2').is(":checked");
|
||||
var csrf = document.querySelector('meta[name="csrf-token"]').content;
|
||||
|
||||
// Save with AJAX
|
||||
$.ajax({
|
||||
type:'POST',
|
||||
url:'/ordersOnHoldReq/{{ $request->reason }}/{{ $request->order }}/saveShipToCheckBox',
|
||||
data: {
|
||||
'check1': check1,
|
||||
'check2': check2,
|
||||
'_token': csrf
|
||||
},
|
||||
success:function(data){
|
||||
// If no errors load the next checkbox
|
||||
if (data=="success"){
|
||||
$('#shipToCheckBox').modal('hide');
|
||||
|
||||
$.get('/ordersOnHoldReq/{{ $request->reason }}/{{ $request->order }}', function(response) {
|
||||
|
||||
var $page = $(response);
|
||||
|
||||
$("#shipTo").html($page.find("#shipTo"));
|
||||
$("#orderData").html($page.find("#orderData"));
|
||||
|
||||
var s1 = $('#div1').height();
|
||||
var s2 = $('#div2').height();
|
||||
|
||||
if (s1 > s2){
|
||||
$('#div2').css('height', s1 + "px");
|
||||
}else{
|
||||
$('#div1').css('height', s2 + "px");
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
// Comment editor / datatable tab
|
||||
var columnDefs = [
|
||||
{
|
||||
data: "AMSPARE7",
|
||||
title: "Id",
|
||||
type: "hidden"
|
||||
},
|
||||
{
|
||||
data: "AMTRANID",
|
||||
title: "User",
|
||||
type: "hidden"
|
||||
},
|
||||
{
|
||||
data: "DATE",
|
||||
title: "Creation Date",
|
||||
type: "hidden"
|
||||
},
|
||||
{
|
||||
data: "AMSPARE5",
|
||||
title: "Reminder Date",
|
||||
datetimepicker: { timepicker: true, format : "Y/m/d H:i", forceParse: false, validateOnBlur: false}
|
||||
},
|
||||
{
|
||||
data: "AMCOMM",
|
||||
title: "Comment",
|
||||
type: "textarea"
|
||||
}
|
||||
];
|
||||
|
||||
var myTable;
|
||||
var csrf = document.querySelector('meta[name="csrf-token"]').content;
|
||||
|
||||
myTable = $('#example').DataTable({
|
||||
"sPaginationType": "full_numbers",
|
||||
ajax: {
|
||||
url : '/ordersOnHoldReq/{{$request->reason}}/{{$request->order}}/jsoncomment',
|
||||
// our data is an array of objects, in the root node instead of /data node, so we need 'dataSrc' parameter
|
||||
dataSrc : ''
|
||||
},
|
||||
columns: columnDefs,
|
||||
dom: 'Bfrtip', // Needs button container
|
||||
select: 'single',
|
||||
responsive: true,
|
||||
altEditor: true, // Enable altEditor
|
||||
buttons: [
|
||||
{
|
||||
text: 'Add',
|
||||
name: 'add', // do not change name
|
||||
className: 'comm'
|
||||
},
|
||||
{
|
||||
extend: 'selected', // Bind to Selected row
|
||||
text: 'Edit',
|
||||
name: 'edit', // do not change name
|
||||
className: 'comm'
|
||||
},
|
||||
{
|
||||
extend: 'selected', // Bind to Selected row
|
||||
text: 'Delete',
|
||||
name: 'delete' // do not change name
|
||||
},
|
||||
{
|
||||
text: 'Refresh',
|
||||
name: 'refresh' // do not change name
|
||||
}
|
||||
],
|
||||
onAddRow: function(datatable, rowdata, success, error) {
|
||||
|
||||
rowdata["_token"] = csrf;
|
||||
|
||||
$.ajax({
|
||||
// a typical url would be / with type='POST'
|
||||
url: '/ordersOnHoldReq/{{$request->reason}}/{{$request->order}}/jsoncommentsave',
|
||||
type: 'POST',
|
||||
data: rowdata,
|
||||
success: function(result) {$('.altEditor-modal').modal('hide'); myTable.ajax.reload();},
|
||||
error: error,
|
||||
});
|
||||
},
|
||||
onDeleteRow: function(datatable, rowdata, success, error) {
|
||||
|
||||
rowdata["_token"] = csrf;
|
||||
|
||||
console.log(rowdata);
|
||||
|
||||
$.ajax({
|
||||
// a typical url would be /{id} with type='DELETE'
|
||||
url: '/ordersOnHoldReq/{{$request->reason}}/{{$request->order}}/jsoncommentsave/'+rowdata.AMSPARE7,
|
||||
type: 'DELETE',
|
||||
data: rowdata,
|
||||
success: function(result) {$('.altEditor-modal').modal('hide'); myTable.ajax.reload();},
|
||||
error: error
|
||||
});
|
||||
},
|
||||
onEditRow: function(datatable, rowdata, success, error) {
|
||||
|
||||
rowdata["_token"] = csrf;
|
||||
|
||||
$.ajax({
|
||||
// a typical url would be /{id} with type='PUT'
|
||||
url: '/ordersOnHoldReq/{{$request->reason}}/{{$request->order}}/jsoncommentsave/'+rowdata.AMSPARE7,
|
||||
type: 'PUT',
|
||||
data: rowdata,
|
||||
success: function(result) {$('.altEditor-modal').modal('hide'); myTable.ajax.reload();},
|
||||
error: error
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on('click', ".comm", function(e){
|
||||
var maxlength = "150";
|
||||
var currentLength = $("#AMCOMM").val().length + 0;
|
||||
$("#AMCOMM").attr('maxlength', maxlength);
|
||||
|
||||
if($("#counter_AMCOMM").length == 0) {
|
||||
$("#AMCOMM").after("<div id='counter_AMCOMM'></div>");
|
||||
|
||||
if( currentLength >= maxlength ){
|
||||
$("#counter_AMCOMM").html(currentLength + ' / ' + maxlength);
|
||||
}else{
|
||||
$("#counter_AMCOMM").html(maxlength - currentLength + " chars left");
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
Reference in New Issue
Block a user