Implement search functionality with pagination and enhance templates for improved user experience
This commit is contained in:
Yaro Kasear
parent
67c85a4569
commit
eb7e446e56
7 changed files with 193 additions and 43 deletions
|
|
@ -1,4 +1,4 @@
|
|||
{% macro category_link(endpoint, label, icon_html=None, arguments={}) %}
|
||||
{% macro category_link(endpoint, label, icon_html=none, arguments={}) %}
|
||||
<div class="col text-center">
|
||||
<a href="{{ url_for('main.' + endpoint, **arguments) }}"
|
||||
class="d-flex flex-column justify-content-center link-success link-underline-opacity-0">
|
||||
|
|
@ -9,3 +9,14 @@
|
|||
</a>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
{% macro navigation_link(endpoint, label, icon_html=none, arguments={}, active=false) %}
|
||||
<li class="nav-item">
|
||||
<a href="{{ url_for('main.' + endpoint, **arguments) }}" class="nav-link{% if active %} active{% endif %}">
|
||||
{% if icon_html %}
|
||||
{{ icon_html | safe }}
|
||||
{% endif %}
|
||||
{{ label }}
|
||||
</a>
|
||||
</li>
|
||||
{% endmacro %}
|
||||
|
|
|
|||
|
|
@ -4,10 +4,8 @@
|
|||
{% block title %}{{ title }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<h1 class="text-center display-3">Table of Contents</h1>
|
||||
<div class="row text-center m-5">
|
||||
{{ links.category_link(endpoint = 'inventory_index', label = 'Inventory', icon_html = icons.inventory) }}
|
||||
{{ links.category_link(endpoint = 'list_users', label = "Users", icon_html = icons.user) }}
|
||||
{{ links.category_link(endpoint = 'list_worklog', label = 'Worklog', icon_html = icons.log) }}
|
||||
<div class="container text-center">
|
||||
<h1 class="display-4">Welcome to Inventory Manager</h1>
|
||||
<p class="lead">Find out about all of your assets.</p>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
@ -16,7 +16,7 @@ title=title
|
|||
</div>
|
||||
</div>
|
||||
<div class="row text-center">
|
||||
{{ links.category_link(endpoint = 'search', label = 'Search', icon_html = icons.search, arguments={'category': 'inventory'}) }}
|
||||
{{ links.category_link(endpoint = 'search', label = 'Search', icon_html = icons.search) }}
|
||||
{{ links.category_link(endpoint = 'list_inventory', label = "List", icon_html = icons.table) }}
|
||||
</div>
|
||||
<div class="row">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<!-- templates/user.html -->
|
||||
<!-- templates/search.html -->
|
||||
{% extends "layout.html" %}
|
||||
|
||||
{% block title %}{{ title }}{% endblock %}
|
||||
|
|
@ -10,11 +10,64 @@ title=title,
|
|||
) }}
|
||||
|
||||
<div class="container">
|
||||
<h1 class="display-1 text-center">Search Categories</h1>
|
||||
<div class="row text-center m-5">
|
||||
{{ links.category_link(endpoint = 'search', label = 'Inventory', icon_html = icons.laptop, arguments = {'category': 'inventory'}) }}
|
||||
{{ links.category_link(endpoint = 'search', label = 'Users', icon_html = icons.user, arguments = {'category': 'users'}) }}
|
||||
{{ links.category_link(endpoint = 'search', label = 'Work Logs', icon_html = icons.log, arguments = {'category': 'logs'}) }}
|
||||
<div>
|
||||
{{ tables.render_table(
|
||||
headers = results['inventory']['headers'],
|
||||
rows = results['inventory']['rows'],
|
||||
entry_route = 'inventory_item',
|
||||
title='Inventory Results'
|
||||
)}}
|
||||
{{ tables.render_pagination(
|
||||
endpoint = 'main.search',
|
||||
page = results['inventory']['pagination']['page'],
|
||||
has_prev = results['inventory']['pagination']['has_prev'],
|
||||
has_next = results['inventory']['pagination']['has_next'],
|
||||
total_pages = results['inventory']['pagination']['total_pages'],
|
||||
page_variable = 'inventory_page',
|
||||
extra_args = {
|
||||
'q': query,
|
||||
'user_page': results['users']['pagination']['page'],
|
||||
'worklog_page': results['worklog']['pagination']['page']
|
||||
})}}
|
||||
</div>
|
||||
<div>
|
||||
{{ tables.render_table(
|
||||
headers = results['users']['headers'],
|
||||
rows = results['users']['rows'],
|
||||
entry_route = 'user', title='User Results'
|
||||
)}}
|
||||
{{ tables.render_pagination(
|
||||
endpoint = 'main.search',
|
||||
page = results['users']['pagination']['page'],
|
||||
has_prev = results['users']['pagination']['has_prev'],
|
||||
has_next = results['users']['pagination']['has_next'],
|
||||
total_pages = results['users']['pagination']['total_pages'],
|
||||
page_variable = 'user_page',
|
||||
extra_args = {
|
||||
'q': query,
|
||||
'inventory_page': results['inventory']['pagination']['page'],
|
||||
'worklog_page': results['worklog']['pagination']['page']
|
||||
})}}
|
||||
</div>
|
||||
<div>
|
||||
{{ tables.render_table(
|
||||
headers = results['worklog']['headers'],
|
||||
rows = results['worklog']['rows'],
|
||||
entry_route = 'worklog_entry',
|
||||
title='Worklog Results'
|
||||
)}}
|
||||
{{ tables.render_pagination(
|
||||
endpoint = 'main.search',
|
||||
page = results['worklog']['pagination']['page'],
|
||||
has_prev = results['worklog']['pagination']['has_prev'],
|
||||
has_next = results['worklog']['pagination']['has_next'],
|
||||
total_pages = results['worklog']['pagination']['total_pages'],
|
||||
page_variable = 'worklog_page',
|
||||
extra_args = {
|
||||
'q': query,
|
||||
'inventory_page': results['inventory']['pagination']['page'],
|
||||
'user_page': results['users']['pagination']['page']
|
||||
})}}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue