Add mobile numbers table to customer form + initial commit for customer vehicle table

src/Entity/CustomerVehicle.php

@@ -80,15 +80,14 @@ class CustomerVehicle
     // warranty code
     // TODO: figure out how to check expiration
     /**
-     * @ORM\Column(type="string", length=20)
+     * @ORM\Column(type="string", length=20, nullable=true)
      * @Assert\NotBlank()
      */
     protected $warranty_code;
 
     // date that battery warranty expires
     /**
-     * @ORM\Column(type="date")
+     * @ORM\Column(type="date", nullable=true)
-     * @Assert\NotBlank()
      */
     protected $warranty_expiration;
 
@@ -96,7 +95,6 @@ class CustomerVehicle
     /**
      * @ORM\ManyToOne(targetEntity="Battery", inversedBy="cust_vehicles")
      * @ORM\JoinColumn(name="battery_id", referencedColumnName="id")
-     * @Assert\NotBlank()
      */
     protected $curr_battery;
 

templates/customer/form.html.twig

@@ -13,7 +13,7 @@
     <div class="m-content">
         <!--Begin::Section-->
         <div class="row">
-            <div class="col-xl-8 offset-xl-2">
+            <div class="col-xl-12">
             	<div class="m-portlet m-portlet--mobile">
             		<div class="m-portlet__head">
 						<div class="m-portlet__head-caption">
@@ -51,54 +51,52 @@
 										<label class="col-lg-2 col-form-label" data-field="first_name">
 											First Name:
 										</label>
-										<div class="col-lg-4">
+										<div class="col-lg-3">
 											<input type="text" name="first_name" class="form-control m-input" value="{{ obj.getFirstName() }}">
 											<div class="form-control-feedback hide" data-field="first_name"></div>
 										</div>
 										<label class="col-lg-2 col-form-label" data-field="last_name">
 											Last Name:
 										</label>
-										<div class="col-lg-4">
+										<div class="col-lg-3">
 											<input type="text" name="last_name" class="form-control m-input" value="{{ obj.getLastName() }}">
 											<div class="form-control-feedback hide" data-field="last_name"></div>
 										</div>
 									</div>	
 								</div>
 								<div class="tab-pane" id="mobile-numbers" role="tabpanel">
-									<div class="form-group m-form__group row form-group-inner">
+									<div class="form-group m-form__group row form-group-inner row">
 										<div class="col-lg-12">
 											<div id="data-mobile-numbers"></div>
 										</div>
 									</div>
-									<div class="form-group m-form__group row form-group-inner">
+									<div class="form-group m-form__group row form-group-inner row">
-										<div class="col-lg-3">
+										<div class="col-lg-4">
-											<input type="text" name="mobile_number" class="form-control m-input" placeholder="Mobile number">
+											<input type="text" class="form-control m-input" placeholder="Mobile number" id="mobile-number">
-											<div class="form-control-feedback hide" data-field="mobile_number"></div>
+											<div class="form-control-feedback hide" data-field="mobile-number"></div>
-											<span class="m-form__help">Use the format 63xxxxxxxxxx</span>
+											<span class="m-form__help">Use the format <span class="text-info">63xxxxxxxxxx</span></span>
 										</div>
-										<div class="col-lg-3">
+										<div class="col-lg-4">
-											<div class='input-group date' id='date_registered'>
+											<div class="input-group date">
-												<input type='text' class="form-control m-input datetimepicker" name="date_registered" placeholder="Select registration date" readonly />
+												<input type="text" id="date-confirmed" class="form-control m-input" readonly placeholder="Date confirmed">
 												<span class="input-group-addon">
 													<i class="la la-calendar glyphicon-th"></i>
 												</span>
 											</div>
 										</div>
-										<div class="col-lg-3">
+										<div class="col-lg-4">
-											<div class='input-group date' id='date_confirmed'>
+											<button type="button" class="btn btn-primary" id="btn-add-mobile-number">Add to List</button>
-												<input type='text' class="form-control m-input datetimepicker" name="date_confirmed" placeholder="Select confirmation date" readonly />
-												<span class="input-group-addon">
-													<i class="la la-calendar glyphicon-th"></i>
-												</span>
-											</div>
-										</div>
-										<div class="col-lg-3">
-											<button type="button" class="btn btn-primary" id="btn-add-vehicle" disabled>Add to List</button>
 										</div>
 									</div>
 								</div>
 								<div class="tab-pane" id="vehicles" role="tabpanel">
-									
+									<div class="form-group m-form__group row form-group-inner row">
+										<div class="col-lg-12">
+											<div class="m_datatable" id="data-vehicles"></div>
+										</div>
+									</div>
+									<div class="form-group m-form__group row form-group-inner">
+									</div>
 								</div>
 							</div>		
 			            </div>
@@ -186,19 +184,197 @@
 			}
 
 			// datetimepicker
-			$(".datetimepicker").datetimepicker({
+			$(".date").datetimepicker({
-	            format: "dd MM yyyy - HH:ii P",
+	            format: "dd M yyyy - HH:ii P",
 	            showMeridian: true,
 	            todayHighlight: true,
 	            autoclose: true,
-	            pickerPosition: 'bottom-left'
+	            pickerPosition: 'top-left',
+	            bootcssVer: 3,
+	            todayBtn: true
 	        });
 
-	        // data tables
+	        // input mask
-			var options = {
+	        $("#mobile-number").inputmask("mask", {
+	            mask: "639999999999",
+	            placeholder: ""
+	        });
+
+	        // initialize arrays
+	        var numberRows = [];
+			var numberIds = [];
+			var mfgVehicles = [];
+			var vehicleRows = [];
+			var vehicleIds = [];
+
+			{% for number in obj.getMobileNumbers() %}
+				nrow = {
+					id: "{{ number.getID() }}",
+					date_registered: "{{ number.getDateRegistered() }}",
+					date_confirmed: "{{ number.getDateConfirmed() }}"
+				};
+
+				numberRows.push(nrow);
+				numberIds.push("{{ number.getID() }}");
+			{% endfor %}
+
+			{% for cv in obj.getVehicles() %}
+				{% set vehicle = cv.getVehicle() %}
+				{% set battery = cv.getCurrentBattery() %}
+
+				vrow = {
+					id: "{{ cv.getID() }}",
+					mfg_name: "{{ vehicle.getManufacturer().getName() }}",
+					make: "{{ vehicle.getMake() }}",
+					model_year: "{{ cv.getModelYear() }}",
+					color: "{{ cv.getColor() }}",
+					status_condition: "{{ cv.getStatusCondition() }}",
+					fuel_type: "{{ cv.getFuelType() }}",
+					warranty_code: "{{ cv.getWarrantyCode() }}",
+					warranty_expiration: "{{ cv.getWarrantyExpiration() ? cv.getWarrantyExpiration()|date('d M Y') }}",
+					curr_battery_id: "{{ battery.getID() }}",
+					curr_battery_prod_code: "{{ battery.getProductCode() }}",
+					curr_battery_manufacturer: "{{ battery.getManufacturer().getName() }}",
+					flag_motolite_battery: {{ cv.hasMotoliteBattery() }},
+					flag_active: {{ cv.isActive() }}
+				};
+
+				vehicleRows.push(vrow);
+				vehicleIds.push("{{ cv.getID() }}");
+			{% endfor %}
+
+			vrow = {
+				id: "123",
+				mfg_name: "Mitsubishi",
+				make: "Lancer",
+				model_year: "1996",
+				color: "Red",
+				status_condition: "New",
+				fuel_type: "Gas",
+				warranty_code: "12345",
+				warranty_expiration: "15 Jan 2018",
+				curr_battery_id: "11",
+				curr_battery_prod_code: "TESTBATT",
+				curr_battery_manufacturer: "Motolite",
+				flag_motolite_battery: 1,
+				flag_active: 1
+			};
+
+			vehicleRows.push(vrow);
+
+			// add a mobile number to the table
+			$("#btn-add-mobile-number").click(function() {
+				var id = $("#mobile-number").val();
+				var dateRegistered = moment().format("DD MMM YYYY - hh:mm A");
+				var dateConfirmed = $("#date-confirmed").val();
+				var index = $("#vehicle").find(":selected").data('index');
+
+				if (!id) {
+					swal({
+						title: 'Whoops',
+						text: 'You did not specify a mobile number.',
+						type: 'warning'
+					});
+
+					return true;
+				} else if (id.toString().length != 12) {
+					swal({
+						title: 'Whoops',
+						text: 'Invalid mobile number specified.',
+						type: 'warning'
+					});
+
+					return true;
+				} else if (numberIds.indexOf(id) !== -1) {
+					swal({
+						title: 'Whoops',
+						text: 'This mobile number is already on the list.',
+						type: 'warning'
+					});
+
+					return true;
+				}
+
+				// add number to arrays
+				numberIds.push(id);
+				numberRows.push({
+					id: id,
+					date_registered: dateRegistered,
+					date_confirmed: dateConfirmed
+				});
+
+				// clear input fields
+				$("#mobile-number, #date-confirmed").val("");
+
+				// refresh the data table
+				numberTable.originalDataSet = numberRows;
+				numberTable.reload();
+			});
+
+			// add a vehicle to the table
+			$("#btn-add-vehicle").click(function() {
+				var id = $("#vehicle").val();
+				var index = $("#vehicle").find(":selected").data('index');
+
+				if (vehicleIds.indexOf(id) !== -1) {
+					swal({
+						title: 'Whoops',
+						text: 'This vehicle is already on the list.',
+						type: 'warning'
+					});
+
+					return true;
+				}
+
+				// add vehicle to arrays
+				vehicleIds.push(id);
+				vehicleRows.push(mfgVehicles[index]);
+
+				// refresh the data table
+				vehicleTable.originalDataSet = vehicleRows;
+				vehicleTable.reload();
+			});
+
+			// remove mobile number from table
+			$(document).on('click', '.btn-delete', function(e) {
+				var btn = $(this);
+				var id = $(this).data('id');
+				var table = $(this).closest('table');
+				var rowArray;
+				var rowIds;
+				var dt;
+
+				if (table.parent().prop('id') == 'data-mobile-numbers') {
+					rowArray = numberRows;
+					rowIds = numberIds;
+					dt = numberTable;
+				} else {
+					rowArray = vehicleRows;
+					rowIds = vehicleIds;
+					dt = vehicleTable;
+				}
+
+				$.each(rowArray, function(index, row) {
+					if (row.id == id) {
+						rowArray.splice(index, 1);
+						return false;
+					}
+				});
+
+				// remove from ids
+				rowIds.splice(rowIds.indexOf(id), 1);
+				
+				// reload table
+				dt.row(btn.parents('tr')).remove();
+				dt.originalDataSet = rowArray;
+				dt.reload();
+			});
+
+	        // mobile numbers data table
+			var numberOptions = {
 				data: {
 					type: 'local',
-					source: vehicleRows,
+					source: numberRows,
 					saveState: {
 			            cookie: false,
 			            webstorage: false
@@ -210,23 +386,15 @@
 				columns: [
 					{
 						field: 'id',
-						title: 'ID',
+						title: 'Mobile Number'
-						width: 30
 					},
 					{
-						field: 'mfg_name',
+						field: 'date_registered',
-						title: 'Manufacturer'
+						title: 'Date Registered'
 					},
 					{
-						field: 'make',
+						field: 'date_confirmed',
-						title: 'Make'
+						title: 'Date Confirmed'
-					},
-					{
-						field: 'model_year_from',
-						title: 'Year',
-						template: function (data) {
-				            return data.model_year_from + ' - ' + data.model_year_to;
-				        }
 					},
 					{
 						field: 'Actions',
@@ -242,7 +410,114 @@
 				pagination: false
 			};
 
-			var table = $("#data-vehicles").mDatatable(options);
+			var numberTable = $("#data-mobile-numbers").mDatatable(numberOptions);
+
+			// vehicles data table
+			var vehicleOptions = {
+				data: {
+					type: 'local',
+					source: vehicleRows,
+					saveState: {
+			            cookie: false,
+			            webstorage: false
+			        }
+				},
+				layout: {
+					scroll: true
+				},
+				columns: [
+					{
+						field: 'mfg_name',
+						title: 'Manufacturer'
+					},
+					{
+						field: 'make',
+						title: 'Make'
+					},
+					{
+						field: 'model_year',
+						title: 'Year',
+						template: function (row, index, datatable) {
+							return '<input type="text" class="form-control" value="' + row.model_year + '" name="year_' + index + '">'
+						}
+					},
+					{
+						field: 'color',
+						title: 'Color',
+						template: function (row, index, datatable) {
+							return '<input type="text" class="form-control" value="' + row.color + '" name="color_' + index + '">'
+						}
+					},
+					{
+						field: 'status_condition',
+						title: 'Status',
+						width: 50
+					},
+					{
+						field: 'fuel_type',
+						title: 'Fuel Type'
+					},
+					{
+						field: 'warranty_code',
+						title: 'Warranty Code',
+						template: function (row, index, datatable) {
+							return '<input type="text" class="form-control" value="' + row.warranty_code + '" name="warranty_code_' + index + '">'
+						}
+					},
+					{
+						field: 'warranty_expiration',
+						title: 'Warranty Expiration',
+						width: 150,
+						template: function (row, index, datatable) {
+							return '<input type="text" class="form-control" value="' + row.warranty_expiration + '" name="warranty_expiration_' + index + '">'
+						}
+					},
+					{
+						field: 'curr_battery',
+						title: 'Current Battery',
+						template: function (row, index, datatable) {
+							return row.curr_battery_manufacturer + ' ' + row.curr_battery_prod_code;
+						}
+					},
+					{
+						field: 'flag_motolite_battery',
+						title: 'Using Motolite battery?',
+						template: function (row, index, datatable) {
+							html = '<select class="form-control" name="flag_motolite_battery_' + index + '">';
+							$.each(['False', 'True'], function(val, text) {
+								html += '<option value="' + val + '"' + (val == row.flag_motolite_battery ? ' selected' : '') + '>' + text + '</option>';
+							});
+							html += '</select>';
+							return html;
+						}
+					},
+					{
+						field: 'flag_active',
+						title: 'Is the vehicle active?',
+						template: function (row, index, datatable) {
+							html = '<select class="form-control" name="flag_motolite_battery_' + index + '">';
+							$.each(['False', 'True'], function(val, text) {
+								html += '<option value="' + val + '"' + (val == row.flag_active ? ' selected' : '') + '>' + text + '</option>';
+							});
+							html += '</select>';
+							return html;
+						}
+					},
+					{
+						field: 'Actions',
+						width: 70,
+						title: 'Actions',
+						sortable: false,
+						overflow: 'visible',
+						template: function (row, index, datatable) {
+							return '<button data-id="' + row.id + '" type="button" class="m-portlet__nav-link btn m-btn m-btn--hover-danger m-btn--icon m-btn--icon-only m-btn--pill btn-delete" title="Delete"><i class="la la-trash"></i></button>';
+						},
+					}
+				],
+				pagination: false
+			};
+
+			var vehicleTable = $("#data-vehicles").mDatatable(vehicleOptions);
 		});
 	</script>
-{% endblock %}
+{% endblock %}