bouzoure/pop-camarades
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Javascript based search system (using json to be dynamic)

Browse source
This commit is contained in:
William Bouzourène 2025-03-24 21:36:25 +01:00
parent 9d17259855
commit fac4e695fc
2 changed files with 138 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

148
views/people.html
View file

@ -44,20 +44,24 @@
{% endif %}
</div>
<div class="row">
<div class="col-sm-6 col-lg-3 mb-2">
<div class="mt-3 row">
<div class="col-lg-6 mb-3">
<label for="name" class="form-label">
Nom
</label>
<input type="text" class="form-control" id="name" data-search-field="name" data-search-advanced="false" name="name">
</div>
<div class="col-sm-6 col-lg-3 mb-3">
<label for="section" class="form-label">
Section
</label>
<select class="form-select" id="section" data-search-field="section" data-search-advanced="false" name="section">
<option value="0">Choisir...</option>
<option value="">Choisir...</option>
{% for Section in Sections %}
<option value="{{ Section.ID }}"
{% if Section.ID == FilterSection %}
selected
{% endif %}
>
<option value="{{ Section.ID }}">
{{ Section.Name }}
</option>
{% endfor %}
@ -66,46 +70,63 @@
</div>
<div class="col-sm-6 col-lg-3 mb-2">
<label for="archive" class="form-label">
<label class="form-label">
Status
</label>
<select class="form-select" id="archive" data-search-field="archive" data-search-advanced="false" name="archive">
{% if PermShow %}
<option value="0">Actif</option>
{% endif %}
{% if PermShowArchived %}
<option
value="1"
{% if FilterArchive == "1" %}
selected
{% endif %}
>
Archivé
</option>
{% endif %}
</select>
</div>
<div class="col-sm-6 col-lg-3 mb-2">
<label for="last_name" class="form-label">
Nom de famille
</label>
<input type="text" class="form-control" id="last_name" data-search-field="last_name" data-search-advanced="false" name="last_name">
</div>
<div class="col-sm-6 col-lg-3 mb-2">
<label for="first_name" class="form-label">
Prénom
</label>
<input type="text" class="form-control" id="first_name" data-search-field="first_name" data-search-advanced="true" name="first_name">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" data-search-field="archive" data-search-advanced="false" id="archive">
<label class="form-check-label" for="archive">Archivé</label>
</div>
</div>
</div>
<div class="row mt-2">
<div class="mb-3 d-none" id="advanced-section">
<div class="row">
<div class="col-lg-6 mb-3">
<label for="email" class="form-label">
Email
</label>
<input type="text" class="form-control" id="email" data-search-field="email" data-search-advanced="true" name="email">
</div>
<div class="col-lg-6 mb-3">
<label for="phone" class="form-label">
Téléphone
</label>
<input type="text" class="form-control" id="phone" data-search-field="phone" data-search-advanced="true" name="phone">
</div>
<div class="col-lg-6 mb-3">
<label for="address" class="form-label">
Adresse
</label>
<input type="text" class="form-control" id="address" data-search-field="address" data-search-advanced="true" name="address">
</div>
<div class="col-sm-4 col-lg-2 mb-3">
<label for="postal_code" class="form-label">
Code postal
</label>
<input type="text" class="form-control" id="postal_code" data-search-field="postal_code" data-search-advanced="true" name="postal_code">
</div>
<div class="col-sm-8 col-lg-4 mb-3">
<label for="city" class="form-label">
Lieu
</label>
<input type="text" class="form-control" id="city" data-search-field="city" data-search-advanced="true" name="city">
</div>
</div>
</div>
<div class="row my-3">
<div class="col-6">
<button class="btn btn-outline-primary btn-sm" id="advanced" data-state="false" type="button">
<i class="bi-chevron-double-down me-1"></i> Avancé
@ -118,9 +139,9 @@
</div>
</div>
<form id="filters" method="get" class="my-3">
<form id="search-form" method="get" class="my-3 d-none">
<input type="hidden" name="p" value="{{ Pagination.CurrentPage }}">
<input type="hidden" name="s">
<input type="hidden" id="search-json" name="s" value="{{ FilterSearch }}">
</form>
<div class="table-responsive">
@ -249,42 +270,5 @@
{% endblock %}
{% block javascript %}
<script>
$(document).ready(function() {
$("#search").on("click", function() {
search();
});
$("#advanced").on("click", function() {
var state = $(this).data("state");
$(this).data("state", !state);
if (state) {
$(this).find("i").removeClass("bi-chevron-double-up");
$(this).find("i").addClass("bi-chevron-double-down");
} else {
$(this).find("i").removeClass("bi-chevron-double-down");
$(this).find("i").addClass("bi-chevron-double-up");
}
});
});
function search() {
var advancedSearch = $("#advanced").data("state");
var searchData = {};
$("[data-search-field]").each(function() {
var advancedField = $(this).data("search-advanced");
if (!advancedSearch && advancedField) {
return;
}
var index = $(this).data("search-field");
var value = $(this).val();
searchData[index] = value;
});
console.log(searchData);
}
</script>
<script src="/static/search.js"></script>
{% endblock %}