Skip to content

Instantly share code, notes, and snippets.

@heidilux

heidilux/build-a-kit

Last active August 29, 2015 14:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save heidilux/e4ecb5aa309b3f379374 to your computer and use it in GitHub Desktop.
Save heidilux/e4ecb5aa309b3f379374 to your computer and use it in GitHub Desktop.
Download ZIP
Page displays table of components and table containing chosen components for custom kit build. (Laravel4/Blade/jQuery)
Raw
build-a-kit
```
@extends('layouts.master')
@section('styles')
<link href="{{ asset('css/jquery.dataTables.css') }}" rel="stylesheet">
@stop
@section('body')
<div class="row search-row">
<div class="col-xs-12 col-sm-6 col-md-4">
<h3 class="kit-title">Build a Custom Kit</h3>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<h3 class="kit-title">Reference # {{ $ref }}</h3>
</div>
</div>
<div class="row">
<div class="build-kit col-md-12">
<div class="panel panel-primary">
<div class="panel-heading search-heading">
<h3 class="panel-title">Item List &nbsp;<span class="processing"> <i class="fa fa-refresh fa-spin"></i></span> </h3>
{{--<span class="pull-right">Colorization Key <button type="button" class="btn btn-xs btn-info popover-dismiss" data-toggle="popover"> <i class="fa fa-question-circle"></i></button></span>--}}
</div>
<div class="kit-table component-list">
<table id="full-list" class="table display smaller-text table-condensed table-responsive">
<thead>
<tr>
<th><strong>Description</strong></th>
<th><strong>Part Number</strong></th>
<th><strong>Mfg Part</strong></th>
<th><strong>Image</strong></th>
<th><strong>UOM</strong></th>
<th style="padding-right:12px"><strong>Category</strong></th>
<th style="padding-right:14px"><strong>Vendor</strong></th>
<th><strong>MSRP</strong></th>
<th class="text-right"><strong>Add</strong></th>
</tr>
</thead>
<tbody>
@foreach ($cats as $cat)
@foreach ($cat->components as $comp)
<tr class="{{ $comp->id }}">
<td class="description">{{ $comp->description }}</td>
<td class="partnum">{{ $comp->partnum }}</td>
<td class="manuf_part">{{ $comp->man_partnum ? : '' }}</td>
<td class="image">{{ ($comp->image) ? '<a href="#img-modal" data-id="' . $comp->id . '" data-path="' . $comp->image . '" class="img-popup btn btn-success camera-btn"><i class="fa fa-camera"></i></a>' : '' }}</td>
<td class="uom">{{ $comp->uom }}</td>
<td class="category">{{ $cat->name }}</td>
<td class="manufacturer">{{ $comp->manufacturer }}</td>
<td class="msrp">{{ ($comp->msrp) ? '$' . $comp->msrp : '' }}</td>
<td class="text-right"><button type="button" class="btn-{{ $comp->id }} add-btn btn btn-success"><i class="fa fa-plus"></i></button></td>
</tr>
@endforeach
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
@foreach ($cats as $cat)
@foreach ($cat->components as $comp)
<div id="modal-{{ $comp->id }}" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">{{ $comp->partnum }}</h4>
<p>{{ $comp->description }}</p>
</div>
<div class="modal-body"></div>
</div>
</div>
</div>
@endforeach
@endforeach
{{-- var_dump(DB::getQueryLog()) --}}
{{ Form::open(['id' => 'kit-form', 'class' => 'form-inline', 'role' => 'form', 'route' => 'build-a-kit']) }}
{{ Form::hidden('newRef', $ref) }}
<div class="row">
<div class="build-kit col-xs-12">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Need to add something not in the item list above?</h3>
</div>
<table class="table table-condensed smaller-text" id="custom_add">
<thead>
<tr>
<th class="col-md-3">Enter a McKesson part number</th>
<th class="col-md-8">Or enter a description of what you would like</th>
<th class="col-md-1 text-right">Add</th>
</tr>
</thead>
<tbody>
<tr>
<td id="custom_pn">{{ Form::text("", "", ["id" => "custom_pn", "class" => "form-control custom-add", "placeholder" => "Part Number"]) }}</td>
<td id="custom_desc">{{ Form::text("", "", ["id" => "custom_desc", "class" => "form-control custom-add", "placeholder" => "Or a description"]) }}</td>
<td class="text-right"><button type="button" id="custom-add-btn" class="btn btn-success"><i class="fa fa-plus"></i></button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="row">
<div class="build-kit col-xs-12">
<div class="panel panel-primary" id="bom-panel">
<div class="panel-heading">
<h3 class="panel-title">My Custom Kit Build</h3>
<div class="pull-right">
{{ Form::submit('Save Kit', ['id' => 'kit-submit', 'class' => 'btn btn-success btn-xs']) }}
</div>
</div>
<div class="kit-table">
<table class="table table-striped table-condensed smaller-text" id="bom">
<thead>
<tr>
<th><strong>Description</strong></th>
<th><strong>Part Number</strong></th>
<th><strong>UOM</strong></th>
<th><strong>Quantity</strong></th>
<th class="text-right"><strong>Remove?</strong></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
{{ Form::close() }}
@stop
@section('scripts')
<script src="{{ asset('js/jquery.validate.min.js') }}"></script>
<script src="{{ asset('js/additional-methods.min.js') }}"></script>
<script src="{{ asset('js/jquery.dataTables.js') }}"></script>
<script src="{{ asset('js/dataTables.bootstrap.js') }}"></script>
<script>
$(document).ready(function() {
$('.img-popup').click(function(event) {
var path = $(this).data('path');
var imgId = $(this).data('id');
$('#modal-' + imgId).find('.modal-body').html('<img class="component-popup" id="img-' + imgId + '" alt="{{ $comp->partnum }}">');
$('#img-' + imgId).attr("src", path);
$('#modal-' + imgId).modal('show');
});
$('#full-list').dataTable( {
"paging": false,
"processing": true,
"dom": '<"panel-heading"rfl>tp',
"order": [[ 0, "asc" ]],
"columnDefs": [{"orderable": false,
"targets": [3,4,5,7,8]
}],
"initComplete": function(settings, json) {
$('.processing').hide();
}
});
var table = $('#full-list').DataTable();
var catColumn = 5;
$("#full-list thead th").each( function ( i ) {
if (i === catColumn) {
var select = $('<select><option value="">All Categories</option></select>')
.appendTo( $(this).empty() )
.on( 'change', function () {
table.column( i )
.search( $(this).val() )
.draw();
});
table.column( i ).data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
});
}
});
$('#full-list').dataTable().fnAdjustColumnSizing( false );
} );
var qty = '<input min="1" required="required" digits="digits" class="bom-qty form-control" name="qty[]" type="text" value="1">';
var escapeHTML = (function () {
'use strict';
var chr = {
'"': '&quot;', '&': '&amp;', "'": '&#39;',
'/': '&#47;', '<': '&lt;', '>': '&gt;'
};
return function (text) {
return text.replace(/[\"&'\/<>]/g, function (a) { return chr[a]; });
};
}());
$("#custom-add-btn").on("click", function() {
var cpn = $("input#custom_pn").val();
var cds = $("input#custom_desc").val();
var remove = "<td class='text-right'><button type='button' class='remove-btn btn btn-danger'><i class='fa fa-ban'></i></button></td>";
$('<tr>' +
'<td class="newDesc">' + cds + '</td>' +
'<input type="hidden" name="description[]" value="' + escapeHTML(cds) + '" /> + ' +
'<td class="newPartnum">' + cpn + '</td>' +
'<input type="hidden" name="partnum[]" value="' + escapeHTML(cpn) + '" /> + ' +
'<td class="newUom">TBD</td>' +
'<input type="hidden" name="uom[]" value="TBD" />' +
'<td class="newQty">' + qty + '</td>' +
remove +
'<input type="hidden" name="itemId[]" value="N/A" /> + ' +
'</tr>').appendTo($("#bom"));
$("input#custom_pn").val('');
$("input#custom_desc").val('');
});
$("#full-list").on("click", ".add-btn", function() {
var row = $(this).closest("tr");
var itemId = ($(row).attr("class").split(' ')[0]); {{-- the split should grab only the first class since dataTables adds its own --}}
var rowClass = ($(row).attr("class").split(' ')[1]);
var newPartnum = $(row).find(".partnum").html();
var newDesc = $(row).find(".description").html();
var uom = $(row).find(".uom").html();
var remove = "<td class='text-right'><button type='button' id='" + itemId + "' class='remove-btn btn btn-danger'><i class='fa fa-ban'></i></button></td>";
$('<tr class=' + rowClass + '>' +
'<td class="newDesc">' + newDesc + '</td>' +
'<input type="hidden" name="description[]" value="' + escapeHTML(newDesc) + '" /> + ' +
'<td class="newPartnum">' + newPartnum + "</td>" +
'<input type="hidden" name="partnum[]" value="' + escapeHTML(newPartnum) + '" /> + ' +
'<td class="newUom">' + uom + '</td>' +
'<input type="hidden" name="uom[]" value="' + uom + '" /> + ' +
'<td class="newQty">' + qty + '</td>' +
remove +
'<input type="hidden" name="itemId[]" value="' + itemId + '" /> + ' +
'</tr>').appendTo($("#bom"));
$("#full-list .btn-" + itemId).prop("disabled", true);
});
$("#bom").on("click", ".remove-btn", function() {
var row = $(this).closest("tr");
var oldItemId = $(row).find("button").attr("id");
$(row).remove();
$("#full-list .btn-" + oldItemId).prop("disabled", false);
});
$("#kit-submit").click(function () {
var form = $("#kit-form");
$("#custom_pn").prop("disabled", true);
$("#custom_desc").prop("disabled", true);
$(form).validate({
submitHandler: function(form) {
form.submit();
}
});
});
$('.popover-dismiss').popover({
trigger: 'focus',
placement: 'left',
html: 'true',
template: '<div class="popover popover-box"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>',
title: 'Colorization Key',
content: '<span class="colorization-popover">' +
'<table class="table">' +
'<tbody>' +
'<tr><td class="key-swatch-high">High-cost Item</td></tr>' +
'<tr><td class="key-swatch-low">Low-cost Item</td></tr>' +
'<tr><td class="key-swatch-kit">Pre-built Kit Item</td></tr>' +
'</tbody></table></span>'
});
</script>
@stop
```
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment