59 lines
2.7 KiB
HTML
59 lines
2.7 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% block content %}
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h2 class="fw-bold">Inventar Echipamente Active</h2>
|
|
|
|
<div class="d-flex gap-3 w-50 justify-content-end">
|
|
<!-- HTMX Live Search Input -->
|
|
<input class="form-control w-50" type="search"
|
|
name="search" placeholder="Caută cod, nume sau angajat..."
|
|
hx-get="{% url 'equipment:equipment_list' %}"
|
|
hx-trigger="input changed delay:400ms, search"
|
|
hx-target="#equipment-tables-container">
|
|
|
|
<!-- Dropdown to add different types of equipment -->
|
|
<div class="dropdown">
|
|
{% if user.is_staff %}
|
|
<button class="btn btn-success fw-bold dropdown-toggle" type="button" data-bs-toggle="dropdown">
|
|
+ Adaugă Echipament
|
|
</button>
|
|
{% endif %}
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#" hx-get="{% url 'equipment:computer_create' %}" hx-target="#modal-content-area" data-bs-toggle="modal" data-bs-target="#form-modal">💻 Computer / Laptop</a></li>
|
|
<li><a class="dropdown-item" href="#" hx-get="{% url 'equipment:monitor_create' %}" hx-target="#modal-content-area" data-bs-toggle="modal" data-bs-target="#form-modal">🖥️ Monitor</a></li>
|
|
<li><a class="dropdown-item" href="#" hx-get="{% url 'equipment:peripheral_create' %}" hx-target="#modal-content-area" data-bs-toggle="modal" data-bs-target="#form-modal">🖨️ Periferic</a></li>
|
|
</ul>
|
|
</div>
|
|
<!-- <a href="{% url 'equipment:export_inventory' %}" class="btn btn-success fw-bold shadow-sm me-2">
|
|
📊 Exportă Inventar (Excel)
|
|
</a> -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Added hx-trigger="equipmentListChanged from:body" to refresh the tables upon save -->
|
|
<div id="equipment-tables-container" hx-get="{% url 'equipment:equipment_list' %}" hx-trigger="equipmentListChanged from:body">
|
|
{% include 'equipment/partials/equipment_tables.html' %}
|
|
</div>
|
|
|
|
<!-- Empty Bootstrap Modal Container -->
|
|
<div class="modal fade" id="form-modal" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content" id="modal-content-area">
|
|
<!-- Form will be injected here by HTMX -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Script to automatically close the modal when HTMX triggers 'closeModal' -->
|
|
<script>
|
|
document.body.addEventListener('closeModal', function() {
|
|
var modalEl = document.getElementById('form-modal');
|
|
var modal = bootstrap.Modal.getInstance(modalEl);
|
|
if (modal) {
|
|
modal.hide();
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|