yaro/inventory
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Implement search functionality with pagination and enhance templates for improved user experience

Browse source
This commit is contained in:
Yaro Kasear 2025-06-13 15:29:35 -05:00
parent 67c85a4569
commit eb7e446e56
7 changed files with 193 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

86
templates/layout.html
View file

@ -14,46 +14,78 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT" crossorigin="anonymous">
<style>
{% block style %}
.sticky-top {
position: sticky;
top: 0;
z-index: 1020;
}
{
% block style %
}
table td,
th {
white-space: nowrap;
}
.sticky-top {
position: sticky;
top: 0;
z-index: 1020;
}
input[type="checkbox"][disabled] {
pointer-events: none;
opacity: 1;
filter: none;
appearance: auto;
-webkit-appearance: checkbox;
background-color: white !important;
color: black !important;
}
table td,
th {
white-space: nowrap;
}
input[type="checkbox"][disabled]::-moz-checkbox {
background-color: white;
}
{% endblock %}
input[type="checkbox"][disabled] {
pointer-events: none;
opacity: 1;
filter: none;
appearance: auto;
-webkit-appearance: checkbox;
background-color: white !important;
color: black !important;
}
input[type="checkbox"][disabled]::-moz-checkbox {
background-color: white;
}
{
% endblock %
}
</style>
</head>
<body class="bg-tertiary text-primary-emphasis">
<header class="bg-success text-light p-2">
<h1>{{ title }}</h1>
</header>
<nav class="navbar navbar-expand bg-body-tertiary border-bottom">
<div class="container-fluid">
<span class="navbar-brand">
Inventory Manager
</span>
<button class="navbar-toggler">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto">
{{ links.navigation_link(endpoint = 'inventory_index', label = 'Inventory') }}
{{ links.navigation_link(endpoint = 'list_users', label = 'Users') }}
{{ links.navigation_link(endpoint = 'list_worklog', label = 'Worklog') }}
</ul>
<form class="d-flex" method="GET" action="{{ url_for('main.search') }}">
<input type="text" class="form-control me-2" placeholder="Search" name="q" id="search" />
<button class="btn btn-primary" type="submit" id="searchButton" disabled>Search</button>
</form>
</div>
</div>
</nav>
<main class="container-flex m-5">{% block content %}{% endblock %}</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"
integrity="sha384-j1CDi7MgGQ12Z7Qab0qlWQ/Qqz24Gc6BM0thvEMVjHnfYGF0rmFCozFSxQBxwHKO"
crossorigin="anonymous"></script>
<script src="{{ url_for('static', filename='js/datalist.js') }}"></script>
<script>{% block script %}{% endblock %}</script>
<script>
const searchInput = document.querySelector('#search');
const searchButton = document.querySelector('#searchButton');
searchInput.addEventListener('input', () => {
searchButton.disabled = searchInput.value.trim() === '';
});
{% block script %} {% endblock %}
</script>
</body>
</html>