Add acl/menu/route lists for vehicle modules

config/acl.yaml

@@ -37,19 +37,6 @@ access_keys:
       acls:
         - id: database.menu
           label: Menu
-    - id: battery
-      label: Battery Access
-      acls:
-        - id: battery.menu
-          label: Menu
-        - id: battery.list
-          label: List
-        - id: battery.add
-          label: Add
-        - id: battery.update
-          label: Update
-        - id: battery.delete
-          label: Delete
     - id: bmfg
       label: Battery Manufacturer Access
       acls:
@@ -88,4 +75,30 @@ access_keys:
         - id: bsize.update
           label: Update
         - id: bsize.delete
+          label: Delete
+    - id: vehicle
+      label: Vehicle Access
+      acls:
+        - id: vehicle.menu
+          label: Menu
+        - id: vehicle.list
+          label: List
+        - id: vehicle.add
+          label: Add
+        - id: vehicle.update
+          label: Update
+        - id: vehicle.delete
+          label: Delete
+    - id: vmfg
+      label: Vehicle Manufacturer Access
+      acls:
+        - id: vmfg.menu
+          label: Menu
+        - id: vmfg.list
+          label: List
+        - id: vmfg.add
+          label: Add
+        - id: vmfg.update
+          label: Update
+        - id: vmfg.delete
           label: Delete

config/menu.yaml

@@ -20,10 +20,6 @@ main_menu:
       acl: database.menu
       label: Database
       icon: flaticon-tabs
-    - id: battery_list
-      acl: battery.list
-      label: Batteries
-      parent: database
     - id: bmfg_list
       acl: bmfg.list
       label: Battery Manufacturers
@@ -35,4 +31,12 @@ main_menu:
     - id: bsize_list
       acl: bsize.list
       label: Battery Sizes
+      parent: database
+    - id: vehicle_list
+      acl: vehicle.list
+      label: Vehicles
+      parent: database
+    - id: vmfg_list
+      acl: vmfg.list
+      label: Vehicle Manufacturers
       parent: database

config/routes.yaml

@@ -196,6 +196,78 @@ bsize_delete:
     controller: App\Controller\BatterySizeController::destroy
     methods: [DELETE]
 
+# vehicles
+
+vehicle_list:
+    path: /vehicle
+    controller: App\Controller\VehicleController::index
+
+vehicle_rows:
+    path: /vehicle/rows
+    controller: App\Controller\VehicleController::rows
+    methods: [POST]
+
+vehicle_create:
+    path: /vehicle/create
+    controller: App\Controller\VehicleController::create
+    methods: [GET]
+
+vehicle_create_submit:
+    path: /vehicle/create
+    controller: App\Controller\VehicleController::createSubmit
+    methods: [POST]
+
+vehicle_update:
+    path: /vehicle/{id}
+    controller: App\Controller\VehicleController::update
+    methods: [GET]
+
+vehicle_update_submit:
+    path: /vehicle/{id}
+    controller: App\Controller\VehicleController::updateSubmit
+    methods: [POST]
+
+vehicle_delete:
+    path: /vehicle/{id}
+    controller: App\Controller\VehicleController::destroy
+    methods: [DELETE]
+
+# vehicle manufacturers
+
+vmfg_list:
+    path: /vehicle-manufacturers
+    controller: App\Controller\VehicleManufacturerController::index
+
+vmfg_rows:
+    path: /vehicle-manufacturers/rows
+    controller: App\Controller\VehicleManufacturerController::rows
+    methods: [POST]
+
+vmfg_create:
+    path: /vehicle-manufacturers/create
+    controller: App\Controller\VehicleManufacturerController::create
+    methods: [GET]
+
+vmfg_create_submit:
+    path: /vehicle-manufacturers/create
+    controller: App\Controller\VehicleManufacturerController::createSubmit
+    methods: [POST]
+
+vmfg_update:
+    path: /vehicle-manufacturers/{id}
+    controller: App\Controller\VehicleManufacturerController::update
+    methods: [GET]
+
+vmfg_update_submit:
+    path: /vehicle-manufacturers/{id}
+    controller: App\Controller\VehicleManufacturerController::updateSubmit
+    methods: [POST]
+
+vmfg_delete:
+    path: /vehicle-manufacturers/{id}
+    controller: App\Controller\VehicleManufacturerController::destroy
+    methods: [DELETE]
+
 # test
 
 test_acl:

public/assets/css/style.css

@@ -16,4 +16,14 @@ label.has-danger,
 
 .no-border {
 	border: 0 !important;
+}
+
+.flex-row {
+	display: flex;
+	flex-flow: row;
+	justify-content: center;
+}
+
+.flex-row > * + * {
+	margin-left: 10px;
 }

src/Entity/Vehicle.php

@@ -4,6 +4,7 @@ namespace App\Entity;
 
 use Doctrine\ORM\Mapping as ORM;
 use Doctrine\Common\Collections\ArrayCollection;
+use Symfony\Component\Validator\Constraints as Assert;
 
 /**
  * @ORM\Entity
@@ -21,7 +22,7 @@ class Vehicle
 
     // customer vehicles
     /**
-     * @ORM\OneToMany(targetEntity="CustomerVehicle", mappedBy="customer")
+     * @ORM\OneToMany(targetEntity="CustomerVehicle", mappedBy="vehicle")
      */
     protected $customers;
 
@@ -29,30 +30,34 @@ class Vehicle
     /**
      * @ORM\ManyToOne(targetEntity="VehicleManufacturer", inversedBy="vehicles")
      * @ORM\JoinColumn(name="manufacturer_id", referencedColumnName="id")
+     * @Assert\NotBlank()
      */
     protected $manufacturer;
 
     // make
     /**
      * @ORM\Column(type="string", length=80)
+     * @Assert\NotBlank()
      */
     protected $make;
 
     // model year from
     /**
      * @ORM\Column(type="smallint")
+     * @Assert\NotBlank()
      */
     protected $model_year_from;
 
     // model year to
     /**
      * @ORM\Column(type="smallint")
+     * @Assert\NotBlank()
      */
     protected $model_year_to;
 
     // link to batteries compatible with this vehicle
     /**
-     * @ORM\OneToMany(targetEntity="Battery", mappedBy="vehicle")
+     * @ORM\ManyToMany(targetEntity="Battery", mappedBy="vehicles", fetch="EXTRA_LAZY")
      */
     protected $batteries;
 
@@ -61,4 +66,75 @@ class Vehicle
         $this->customers = new ArrayCollection();
         $this->batteries = new ArrayCollection();
     }
+
+    public function getID()
+    {
+        return $this->id;
+    }
+
+    public function setManufacturer($manufacturer)
+    {
+        $this->manufacturer = $manufacturer;
+        return $this;
+    }
+
+    public function getManufacturer()
+    {
+        return $this->manufacturer;
+    }
+
+    public function setMake($make)
+    {
+        $this->make = $make;
+        return $this;
+    }
+
+    public function getMake()
+    {
+        return $this->make;
+    }
+
+    public function setModelYearFrom($model_year_from)
+    {
+        $this->model_year_from = $model_year_from;
+        return $this;
+    }
+
+    public function getModelYearFrom()
+    {
+        return $this->model_year_from;
+    }
+
+    public function setModelYearTo($model_year_to)
+    {
+        $this->model_year_to = $model_year_to;
+        return $this;
+    }
+
+    public function getModelYearTo()
+    {
+        return $this->model_year_to;
+    }
+
+    public function addBattery(Battery $battery)
+    {
+        $this->batteries->add($battery);
+        return $this;
+    }
+
+    public function clearBatteries()
+    {
+        $this->batteries->clear();
+        return $this;
+    }
+
+    public function getBatteries()
+    {
+        // has to return set of strings because symfony is trying to move away from role objects
+        $str_batteries = [];
+        foreach ($this->batteries as $battery)
+            $str_batteries[] = $battery->getManufacturer()->getName() . " " . $battery->getModel()->getName() . " " . $battery->getSize()->getName();
+
+        return $str_batteries;
+    }
 }

src/Entity/VehicleManufacturer.php

@@ -4,6 +4,7 @@ namespace App\Entity;
 
 use Doctrine\ORM\Mapping as ORM;
 use Doctrine\Common\Collections\ArrayCollection;
+use Symfony\Component\Validator\Constraints as Assert;
 
 /**
  * @ORM\Entity
@@ -22,6 +23,7 @@ class VehicleManufacturer
     // name
     /**
      * @ORM\Column(type="string", length=80)
+     * @Assert\NotBlank()
      */
     protected $name;
 
@@ -35,4 +37,42 @@ class VehicleManufacturer
     {
         $this->vehicles = new ArrayCollection();
     }
+
+    public function getID()
+    {
+        return $this->id;
+    }
+
+    public function setName($name)
+    {
+        $this->name = $name;
+        return $this;
+    }
+
+    public function getName()
+    {
+        return $this->name;
+    }
+
+    public function addVehicle(Vehicle $vehicle)
+    {
+        $this->vehicles->add($vehicle);
+        return $this;
+    }
+
+    public function clearVehicles()
+    {
+        $this->vehicles->clear();
+        return $this;
+    }
+
+    public function getVehicles()
+    {
+        // has to return set of strings because symfony is trying to move away from role objects
+        $str_vehicles = [];
+        foreach ($this->vehicles as $vehicle)
+            $str_vehicles[] = $this->getName() . " " . $vehicle->getMake() . " " . $vehicle->getYearFrom() . "-" . $vehicle->getYearTo();
+
+        return $str_vehicles;
+    }
 }

templates/vehicle-manufacturer/form.html.twig

@@ -0,0 +1,132 @@
+{% extends 'base.html.twig' %}
+
+{% block body %}
+	<!-- BEGIN: Subheader -->
+    <div class="m-subheader">
+        <div class="d-flex align-items-center">
+            <div class="mr-auto">
+                <h3 class="m-subheader__title">Vehicle Manufacturers</h3>
+            </div>
+        </div>
+    </div>
+    <!-- END: Subheader -->
+    <div class="m-content">
+        <!--Begin::Section-->
+        <div class="row">
+            <div class="col-xl-4 offset-xl-4">
+            	<div class="m-portlet m-portlet--mobile">
+            		<div class="m-portlet__head">
+						<div class="m-portlet__head-caption">
+							<div class="m-portlet__head-title">
+								<span class="m-portlet__head-icon">
+									<i class="la la-industry"></i>
+								</span>
+								<h3 class="m-portlet__head-text">
+									{% if row is defined %}
+										Edit Manufacturer
+										<small>{{ row.getName() }}</small>
+									{% else %}
+										New Manufacturer
+									{% endif %}
+								</h3>
+							</div>
+						</div>
+					</div>
+                    <form id="row-form" class="m-form m-form--fit m-form--label-align-right m-form--group-seperator-dashed" method="post" action="{{ row is defined ? url('vmfg_update_submit', {'id': row.getId()}) : url('vmfg_create_submit') }}">
+						<div class="m-portlet__body">	
+							<div class="form-group m-form__group row">
+								<label class="col-lg-3 col-form-label" data-field="name">
+									Name:
+								</label>
+								<div class="col-lg-9">
+									<input type="text" name="name" class="form-control m-input" value="{{ values.name is defined ? values.name : (row is defined ? row.getName()) }}">
+									<div class="form-control-feedback hide" data-field="name"></div>
+									<span class="m-form__help">Display name for this manufacturer</span>
+								</div>
+							</div>	
+			            </div>
+			            <div class="m-portlet__foot m-portlet__foot--fit">
+							<div class="m-form__actions m-form__actions--solid m-form__actions--right">
+								<div class="row">
+									<div class="col-lg-12">
+										<button type="submit" class="btn btn-success">Submit</button>
+										<a href="{{ url('vmfg_list') }}" class="btn btn-secondary">Cancel</a>
+									</div>
+								</div>
+							</div>
+						</div>
+					</form>
+                </div>
+			</div>
+		</div>
+	</div>
+{% endblock %}
+
+{% block scripts %}
+	<script>
+		$(function() {
+			$("#row-form").submit(function(e) {
+				var form = $(this);
+
+				e.preventDefault();
+
+				$.ajax({
+					method: "POST",
+					url: form.prop('action'),
+					data: form.serialize()
+				}).done(function(response) {
+					// remove all error classes
+					removeErrors();
+					swal({
+						title: 'Done!',
+						text: 'Your changes have been saved!',
+						type: 'success',
+						onClose: function() {
+							window.location.href = "{{ url('vmfg_list') }}";
+						}
+					});
+				}).fail(function(response) {
+					var errors = response.responseJSON.errors;
+					var firstfield = false;
+
+					// remove all error classes first
+					removeErrors();
+
+					// display errors contextually
+					$.each(errors, function(field, msg) {
+						var formfield = $("[name='" + field + "']");
+						var label = $("label[data-field='" + field + "']");
+						var msgbox = $(".form-control-feedback[data-field='" + field + "']");
+
+						// add error classes to bad fields
+						formfield.addClass('form-control-danger');
+						label.addClass('has-danger');
+						msgbox.html(msg).addClass('has-danger').removeClass('hide');
+
+						// check if this field comes first in DOM
+						var domfield = formfield.get(0);
+
+						if (!firstfield || (firstfield && firstfield.compareDocumentPosition(domfield) === 2)) {
+							firstfield = domfield;
+						}
+					});
+
+					// focus on first bad field
+					firstfield.focus();
+
+					// scroll to above that field to make it visible
+					$('html, body').animate({
+				        scrollTop: $(firstfield).offset().top - 200
+				    }, 100);
+				});
+			});
+
+			// remove all error classes
+			function removeErrors() {
+				$(".form-control-danger").removeClass('form-control-danger');
+				$("[data-field]").removeClass('has-danger');
+				$(".form-control-feedback[data-field]").addClass('hide');
+			}
+		});
+	</script>
+{% endblock %}

templates/vehicle-manufacturer/list.html.twig

@@ -0,0 +1,152 @@
+{% extends 'base.html.twig' %}
+
+{% block body %}
+	<!-- BEGIN: Subheader -->
+    <div class="m-subheader">
+        <div class="d-flex align-items-center">
+            <div class="mr-auto">
+                <h3 class="m-subheader__title">
+                    Vehicle Manufacturers
+                </h3>
+            </div>
+        </div>
+    </div>
+    <!-- END: Subheader -->
+    <div class="m-content">
+        <!--Begin::Section-->
+        <div class="row">
+            <div class="col-xl-12">
+            	<div class="m-portlet m-portlet--mobile">
+                    <div class="m-portlet__body">
+                    	<div class="m-form m-form--label-align-right m--margin-top-20 m--margin-bottom-30">
+							<div class="row align-items-center">
+								<div class="col-xl-8 order-2 order-xl-1">
+									<div class="form-group m-form__group row align-items-center">
+										<div class="col-md-4">
+											<div class="m-input-icon m-input-icon--left">
+												<input type="text" class="form-control m-input m-input--solid" placeholder="Search..." id="data-rows-search">
+												<span class="m-input-icon__icon m-input-icon__icon--left">
+													<span><i class="la la-search"></i></span>
+												</span>
+											</div>
+										</div>
+									</div>
+								</div>
+								<div class="col-xl-4 order-1 order-xl-2 m--align-right">
+									<a href="{{ url('vmfg_create') }}" class="btn btn-focus m-btn m-btn--custom m-btn--icon m-btn--air m-btn--pill">
+										<span>
+											<i class="la la-industry"></i>
+											<span>New Manufacturer</span>
+										</span>
+									</a>					
+									<div class="m-separator m-separator--dashed d-xl-none"></div>
+								</div>
+							</div>
+						</div>
+                        <!--begin: Datatable -->
+                        <div id="data-rows"></div>
+                        <!--end: Datatable -->
+                    </div>
+                </div>
+			</div>
+		</div>
+	</div>
+{% endblock %}
+
+{% block scripts %}
+	<script>
+		$(function() {
+			var options = {
+				data: {
+					type: 'remote',
+					source: {
+						read: {
+							url: '{{ url("vmfg_rows") }}',
+							method: 'POST'
+						}
+					},
+					saveState: {
+			            cookie: false,
+			            webstorage: false
+			        },
+					pageSize: 10,
+					serverPaging: true,
+					serverFiltering: true,
+					serverSorting: true
+				},
+				layout: {
+					scroll: true
+				},
+				columns: [
+					{
+						field: 'id',
+						title: 'ID',
+						width: 30
+					},
+					{
+						field: 'name',
+						title: 'Name'
+					},
+					{
+						field: 'Actions',
+						width: 110,
+						title: 'Actions',
+						sortable: false,
+						overflow: 'visible',
+						template: function (row, index, datatable) {
+							var actions = '';
+                            
+                            if (row.meta.update_url != '') {
+                                actions += '<a href="' + row.meta.update_url + '" class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill btn-edit" data-id="' + row.name + '" title="Edit"><i class="la la-edit"></i></a>';
+                            }
+
+                            if (row.meta.delete_url != '') {
+								actions += '<a href="' + row.meta.delete_url + '" class="m-portlet__nav-link btn m-btn m-btn--hover-danger m-btn--icon m-btn--icon-only m-btn--pill btn-delete" data-id="' + row.name + '" title="Delete"><i class="la la-trash"></i></a>';
+							}
+							
+							return actions;
+						},
+					}
+				],
+				search: {
+					onEnter: false,
+					input: $('#data-rows-search'),
+					delay: 400
+				}
+			};
+
+			var table = $("#data-rows").mDatatable(options);
+
+			$(document).on('click', '.btn-delete', function(e) {
+				var url = $(this).prop('href');
+				var id = $(this).data('id');
+				var btn = $(this);
+
+				e.preventDefault();
+
+				swal({
+					title: 'Confirmation',
+					html: 'Are you sure you want to delete <strong>' + id + '</strong>?',
+					type: 'warning',
+					showCancelButton: true
+				}).then((result) => {
+					if (result.value) {
+						$.ajax({
+							method: "DELETE",
+							url: url
+						}).done(function(response) {
+							table.row(btn.parents('tr')).remove();
+							table.reload();
+						}).fail(function() {
+							swal({
+								title: 'Whoops',
+								text: 'An error occurred while deleting this item. Please contact support.',
+								type: 'error'
+							});
+						});
+					}
+				});
+			});
+		});
+	</script>
+{% endblock %}

templates/vehicle/form.html.twig

@@ -0,0 +1,168 @@
+{% extends 'base.html.twig' %}
+
+{% block body %}
+	<!-- BEGIN: Subheader -->
+    <div class="m-subheader">
+        <div class="d-flex align-items-center">
+            <div class="mr-auto">
+                <h3 class="m-subheader__title">Vehicles</h3>
+            </div>
+        </div>
+    </div>
+    <!-- END: Subheader -->
+    <div class="m-content">
+        <!--Begin::Section-->
+        <div class="row">
+            <div class="col-xl-4 offset-xl-4">
+            	<div class="m-portlet m-portlet--mobile">
+            		<div class="m-portlet__head">
+						<div class="m-portlet__head-caption">
+							<div class="m-portlet__head-title">
+								<span class="m-portlet__head-icon">
+									<i class="fa fa-car"></i>
+								</span>
+								<h3 class="m-portlet__head-text">
+									{% if row is defined %}
+										Edit Vehicle
+										<small>{{ row.getManufacturer().getName() ~ ' ' ~ row.getMake() ~ row.getModelYearFrom() ~ '-' ~ row.getModelYearTo() }}</small>
+									{% else %}
+										New Vehicle
+									{% endif %}
+								</h3>
+							</div>
+						</div>
+					</div>
+                    <form id="row-form" class="m-form m-form--fit m-form--label-align-right m-form--group-seperator-dashed" method="post" action="{{ row is defined ? url('vehicle_update_submit', {'id': row.getId()}) : url('vehicle_create_submit') }}">
+
+						<div class="m-portlet__body">
+							<div class="form-group m-form__group row no-border">
+								<label class="col-lg-3 col-form-label" data-field="manufacturer">
+									Manufacturer:
+								</label>
+								<div class="col-lg-9">
+									<select class="form-control m-input" id="manufacturer" name="manufacturer">
+										<option value=""></option>
+										{% for manufacturer in manufacturers %}
+											<option value="{{ manufacturer.getID() }}"{{ row is defined and manufacturer.getID() == row.getManufacturer().getID() ? ' selected' }}>{{ manufacturer.getName() }}</option>
+										{% endfor %}
+									</select>
+									<div class="form-control-feedback hide" data-field="manufacturer"></div>
+								</div>
+							</div>
+							<div class="form-group m-form__group row no-border">
+								<label class="col-lg-3 col-form-label" data-field="make">
+									Make:
+								</label>
+								<div class="col-lg-9">
+									<input type="text" name="make" class="form-control m-input">
+									<div class="form-control-feedback hide" data-field="make"></div>
+								</div>
+							</div>
+							<div class="form-group m-form__group row">
+								<label class="col-lg-3 col-form-label" data-field="model_year_from">
+									Year:
+								</label>
+								<div class="col-lg-9 flex-row">
+									<select class="form-control m-input" id="manufacturer" name="model_year_from">
+										<option value=""></option>
+										{% for year in years %}
+											<option value="{{ year }}"{{ row is defined and manufacturer.getModelYearFrom() == year ? ' selected' }}>{{ year }}</option>
+										{% endfor %}
+									</select>
+									<label class="col-form-label text-center">
+										to
+									</label>
+									<select class="form-control m-input" id="manufacturer" name="model_year_to">
+										<option value=""></option>
+										{% for year in years %}
+											<option value="{{ year }}"{{ row is defined and manufacturer.getModelYearTo() == year ? ' selected' }}>{{ year }}</option>
+										{% endfor %}
+									</select>	
+								</div>
+							</div>
+						</div>
+			            <div class="m-portlet__foot m-portlet__foot--fit">
+							<div class="m-form__actions m-form__actions--solid m-form__actions--right">
+								<div class="row">
+									<div class="col-lg-12">
+										<button type="submit" class="btn btn-success">Submit</button>
+										<a href="{{ url('vehicle_list') }}" class="btn btn-secondary">Cancel</a>
+									</div>
+								</div>
+							</div>
+						</div>
+					</form>
+                </div>
+			</div>
+		</div>
+	</div>
+{% endblock %}
+
+{% block scripts %}
+	<script>
+		$(function() {
+			$("#row-form").submit(function(e) {
+				var form = $(this);
+
+				e.preventDefault();
+
+				$.ajax({
+					method: "POST",
+					url: form.prop('action'),
+					data: form.serialize()
+				}).done(function(response) {
+					// remove all error classes
+					removeErrors();
+					swal({
+						title: 'Done!',
+						text: 'Your changes have been saved!',
+						type: 'success',
+						onClose: function() {
+							window.location.href = "{{ url('vehicle_list') }}";
+						}
+					});
+				}).fail(function(response) {
+					var errors = response.responseJSON.errors;
+					var firstfield = false;
+
+					// remove all error classes first
+					removeErrors();
+
+					// display errors contextually
+					$.each(errors, function(field, msg) {
+						var formfield = $("[name='" + field + "']");
+						var label = $("label[data-field='" + field + "']");
+						var msgbox = $(".form-control-feedback[data-field='" + field + "']");
+
+						// add error classes to bad fields
+						formfield.addClass('form-control-danger');
+						label.addClass('has-danger');
+						msgbox.html(msg).addClass('has-danger').removeClass('hide');
+
+						// check if this field comes first in DOM
+						var domfield = formfield.get(0);
+
+						if (!firstfield || (firstfield && firstfield.compareDocumentPosition(domfield) === 2)) {
+							firstfield = domfield;
+						}
+					});
+
+					// focus on first bad field
+					firstfield.focus();
+
+					// scroll to above that field to make it visible
+					$('html, body').animate({
+				        scrollTop: $(firstfield).offset().top - 200
+				    }, 100);
+				});
+			});
+
+			// remove all error classes
+			function removeErrors() {
+				$(".form-control-danger").removeClass('form-control-danger');
+				$("[data-field]").removeClass('has-danger');
+				$(".form-control-feedback[data-field]").addClass('hide');
+			}
+		});
+	</script>
+{% endblock %}

templates/vehicle/list.html.twig

@@ -0,0 +1,160 @@
+{% extends 'base.html.twig' %}
+
+{% block body %}
+	<!-- BEGIN: Subheader -->
+    <div class="m-subheader">
+        <div class="d-flex align-items-center">
+            <div class="mr-auto">
+                <h3 class="m-subheader__title">
+                    Vehicles
+                </h3>
+            </div>
+        </div>
+    </div>
+    <!-- END: Subheader -->
+    <div class="m-content">
+        <!--Begin::Section-->
+        <div class="row">
+            <div class="col-xl-12">
+            	<div class="m-portlet m-portlet--mobile">
+                    <div class="m-portlet__body">
+                    	<div class="m-form m-form--label-align-right m--margin-top-20 m--margin-bottom-30">
+							<div class="row align-items-center">
+								<div class="col-xl-8 order-2 order-xl-1">
+									<div class="form-group m-form__group row align-items-center">
+										<div class="col-md-4">
+											<div class="m-input-icon m-input-icon--left">
+												<input type="text" class="form-control m-input m-input--solid" placeholder="Search..." id="data-rows-search">
+												<span class="m-input-icon__icon m-input-icon__icon--left">
+													<span><i class="la la-search"></i></span>
+												</span>
+											</div>
+										</div>
+									</div>
+								</div>
+								<div class="col-xl-4 order-1 order-xl-2 m--align-right">
+									<a href="{{ url('vehicle_create') }}" class="btn btn-focus m-btn m-btn--custom m-btn--icon m-btn--air m-btn--pill">
+										<span>
+											<i class="fa fa-car"></i>
+											<span>New Vehicle</span>
+										</span>
+									</a>					
+									<div class="m-separator m-separator--dashed d-xl-none"></div>
+								</div>
+							</div>
+						</div>
+                        <!--begin: Datatable -->
+                        <div id="data-rows"></div>
+                        <!--end: Datatable -->
+                    </div>
+                </div>
+			</div>
+		</div>
+	</div>
+{% endblock %}
+
+{% block scripts %}
+	<script>
+		$(function() {
+			var options = {
+				data: {
+					type: 'remote',
+					source: {
+						read: {
+							url: '{{ url("vehicle_rows") }}',
+							method: 'POST',
+						}
+					},
+					saveState: {
+			            cookie: false,
+			            webstorage: false
+			        },
+					pageSize: 10,
+					serverPaging: true,
+					serverFiltering: true,
+					serverSorting: true
+				},
+				columns: [
+					{
+						field: 'id',
+						title: 'ID',
+						width: 30
+					},
+					{
+						field: 'mfg_name',
+						title: 'Manufacturer'
+					},
+					{
+						field: 'make',
+						title: 'Make'
+					},
+					{
+						field: 'model_year_from',
+						title: 'Year',
+						template: function (data) {
+				            return data.model_year_from + ' - ' + data.model_year_to;
+				        }
+					},
+					{
+						field: 'Actions',
+						width: 110,
+						title: 'Actions',
+						sortable: false,
+						overflow: 'visible',
+						template: function (row, index, datatable) {
+                            var actions = '';
+                            
+                            if (row.meta.update_url != '') {
+                                actions += '<a href="' + row.meta.update_url + '" class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill btn-edit" data-id="' + row.mfg_name + ' ' + row.make + '" title="Edit"><i class="la la-edit"></i></a>';
+                            }
+
+                            if (row.meta.delete_url != '') {
+								actions += '<a href="' + row.meta.delete_url + '" class="m-portlet__nav-link btn m-btn m-btn--hover-danger m-btn--icon m-btn--icon-only m-btn--pill btn-delete" data-id="' + row.mfg_name + ' ' + row.make + '" title="Delete"><i class="la la-trash"></i></a>';
+							}
+							
+							return actions;
+						},
+					}
+				],
+				search: {
+					onEnter: false,
+					input: $('#data-rows-search'),
+					delay: 400
+				}
+			};
+
+			var table = $("#data-rows").mDatatable(options);
+
+			$(document).on('click', '.btn-delete', function(e) {
+				var url = $(this).prop('href');
+				var id = $(this).data('id');
+				var btn = $(this);
+
+				e.preventDefault();
+
+				swal({
+					title: 'Confirmation',
+					html: 'Are you sure you want to delete <strong>' + id + '</strong>?',
+					type: 'warning',
+					showCancelButton: true
+				}).then((result) => {
+					if (result.value) {
+						$.ajax({
+							method: "DELETE",
+							url: url
+						}).done(function(response) {
+							table.row(btn.parents('tr')).remove();
+							table.reload();
+						}).fail(function() {
+							swal({
+								title: 'Whoops',
+								text: 'An error occurred while deleting this item. Please contact support.',
+								type: 'error'
+							});
+						});
+					}
+				});
+			});
+		});
+	</script>
+{% endblock %}