auto_repair_saas/templates/vehicles/index.html
{% extends "base.html" %}
{% block content %}
<div class="row mb-4">
<div class="col">
<h4>Vehicles</h4>
</div>
<div class="col">
<div class="row">
<div class="col">
<button class="btn btn-primary float-end"
data-mdb-toggle="modal"
data-mdb-target="#vehicleFormModal"
title="Create New Vehicle">
<i class="fas fa-plus"></i>
</button>
</div>
<div class="col">
<form action="{% url 'search-vehicles' %}" method="get" id="vehicles-search-form">
<div class="form-outline">
{{ search_form.q }}
<label class="form-label" for="id_q"><i class="fas fa-search me-2"></i> Search</label>
</div>
</form>
</div>
</div>
</div>
</div>
{% if vehicles %}
{# vehicles table #}
<div class="card">
<div class="card-body">
<table class="table table-hover">
<thead>
<tr>
<th>Number Plate</th>
<th>Owner</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{% for vehicle in vehicles %}
<tr>
<td>{{ vehicle }}</td>
<td>{{ vehicle.owner }}</td>
<td>
<a href="#" role="button" title="Edit"
data-mdb-toggle="modal"
data-mdb-target="#vehicleFormModal"
data-mdb-mode="edit"
data-mdb-vehicle-id="{{ vehicle.id }}"
data-mdb-vehicle-number_plate="{{ vehicle }}"
data-mdb-vehicle-owner="{{ vehicle.owner.id }}"
><i class="fas fa-edit p-2"></i></a>
<a href="#" role="button" title="Delete"
data-mdb-toggle="modal"
data-mdb-target="#confirmDeleteVehicleModal"
data-mdb-vehicle-id="{{ vehicle.id }}"
><i class="fas fa-trash-alt text-danger p-2"></i></a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
{% else %}
<div class="p-5 mt-5" style="text-align: center; color: #dce0e6">
<i class="fas fa-inbox fa-5x"></i>
<h6>No Data</h6>
</div>
{% endif %}
{# vehicle modal #}
<div
class="modal fade"
id="vehicleFormModal"
data-mdb-backdrop="static"
data-mdb-keyboard="false"
tabindex="-1"
aria-labelledby="vehicle-modal-title"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="vehicle-modal-title">Create vehicle</h5>
<button
type="button"
class="btn-close"
data-mdb-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<form action="{% url 'vehicles' %}" method="post" id="vehicle-form">
{% csrf_token %}
<div class="row">
<div class="col">
<label class="form-label" for="id_number_plate">Number Plate</label>
{{ form.number_plate }}
</div>
<div class="col">
<label class="form-label" for="id_owner">Owner</label>
{{ form.owner }}
</div>
</div>
<br>
<div class="float-end">
<button type="button" class="btn btn-light" data-mdb-dismiss="modal">
Cancel
</button>
<span class="ps-1">
<button type="submit" class="btn btn-primary"
id="submit-vehicle-form">Create</button></span>
</div>
</form>
</div>
</div>
</div>
</div>
{# delete confirmation modal #}
<div
class="modal fade"
id="confirmDeleteVehicleModal"
data-mdb-backdrop="static"
data-mdb-keyboard="false"
tabindex="-1"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">
Are you sure you want to delete this vehicle?
</h5>
<button
type="button"
class="btn-close"
data-mdb-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<form id="confirm-delete-vehicle-form" method="post">
{% csrf_token %}
<p class="p-3">
All jobs related to this vehicle will also be deleted.
This action can not be undone.
</p>
<div class="float-end">
<button type="button" class="btn btn-light" data-mdb-dismiss="modal">
Cancel
</button>
<span class="ps-1">
<button type="submit" class="btn btn-danger">Delete</button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
const vehicleFormModal = document.getElementById('vehicleFormModal')
const form = document.getElementById('vehicle-form')
vehicleFormModal.addEventListener('show.mdb.modal', event => {
const button = event.relatedTarget
const modalMode = button.getAttribute('data-mdb-mode')
const modalTitle = vehicleFormModal.querySelector('#vehicle-modal-title')
if (modalMode === 'edit') {
const vehicleId = button.getAttribute('data-mdb-vehicle-id')
const vehicleNumberPlate = button.getAttribute('data-mdb-vehicle-number_plate')
const vehicleOwner = button.getAttribute('data-mdb-vehicle-owner')
const modalVehicleNumberPlate = vehicleFormModal.querySelector('#id_number_plate')
const modalVehicleOwner = vehicleFormModal.querySelector('#id_owner')
modalTitle.textContent = `Edit vehicle`
modalVehicleNumberPlate.value = vehicleNumberPlate
modalVehicleOwner.value = vehicleOwner
const form = document.getElementById("vehicle-form")
form.action = `/vehicles/update/${vehicleId}/`
const submitButton = document.getElementById("submit-vehicle-form")
submitButton.textContent = 'Save'
} else {
form.reset()
modalTitle.textContent = `Create vehicle`
form.action = `/vehicles/`
const submitButton = document.getElementById("submit-vehicle-form")
submitButton.textContent = 'Create'
}
})
const confirmDeleteVehicleModal = document.getElementById('confirmDeleteVehicleModal')
confirmDeleteVehicleModal.addEventListener('show.mdb.modal', event => {
const form = document.getElementById("confirm-delete-vehicle-form")
const button = event.relatedTarget
const vehicleId = button.getAttribute('data-mdb-vehicle-id')
form.action = `/vehicles/delete/${vehicleId}/`
})
</script>
{% endblock %}