Javascript based search system (using json to be dynamic)
This commit is contained in:
parent
76d09db5a9
commit
9cd17bd8e6
SSH key fingerprint:
SHA256:19MbXpLua4rUtk8tunMesD8KUKb91LXLHg8E/qTooww
2 changed files with 138 additions and 82 deletions
72
static/search.js
Normal file
72
static/search.js
Normal file
|
|
@ -0,0 +1,72 @@
|
||||||
|
$(document).ready(function() {
|
||||||
|
$("#search").on("click", function() {
|
||||||
|
search();
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#advanced").on("click", function() {
|
||||||
|
if ($(this).data("state") === "true") {
|
||||||
|
$(this).find("i").removeClass("bi-chevron-double-up");
|
||||||
|
$(this).find("i").addClass("bi-chevron-double-down");
|
||||||
|
$("#advanced-section").addClass("d-none");
|
||||||
|
$(this).data("state", "false");
|
||||||
|
} else {
|
||||||
|
$(this).find("i").removeClass("bi-chevron-double-down");
|
||||||
|
$(this).find("i").addClass("bi-chevron-double-up");
|
||||||
|
$("#advanced-section").removeClass("d-none");
|
||||||
|
$(this).data("state", "true");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
var json = $("#search-json").val();
|
||||||
|
if (json.length > 0) {
|
||||||
|
var searchData = JSON.parse(json);
|
||||||
|
for (const [key, value] of Object.entries(searchData)) {
|
||||||
|
if (key === "advanced") {
|
||||||
|
if (value) {
|
||||||
|
$("#advanced").trigger("click");
|
||||||
|
}
|
||||||
|
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (key === "fields") {
|
||||||
|
// TODO: gérer les champs suppl.
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof value === "boolean" && value) {
|
||||||
|
console.log(key, value, typeof(value));
|
||||||
|
$("[data-search-field=" + key + "]").prop("checked", true);
|
||||||
|
} else {
|
||||||
|
$("[data-search-field=" + key + "]").val(value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function search() {
|
||||||
|
var advancedSearch = ($("#advanced").data("state") === "true");
|
||||||
|
var searchData = {
|
||||||
|
advanced: advancedSearch
|
||||||
|
};
|
||||||
|
|
||||||
|
$("[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();
|
||||||
|
|
||||||
|
if ($(this).attr("type") == "checkbox") {
|
||||||
|
value = $(this).prop("checked");
|
||||||
|
}
|
||||||
|
|
||||||
|
searchData[index] = value;
|
||||||
|
});
|
||||||
|
|
||||||
|
var json = JSON.stringify(searchData);
|
||||||
|
$("#search-json").val(json);
|
||||||
|
$("#search-form").submit();
|
||||||
|
}
|
||||||
|
|
@ -44,20 +44,24 @@
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div class="mt-3 row">
|
||||||
<div class="col-sm-6 col-lg-3 mb-2">
|
<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">
|
<label for="section" class="form-label">
|
||||||
Section
|
Section
|
||||||
</label>
|
</label>
|
||||||
<select class="form-select" id="section" data-search-field="section" data-search-advanced="false" name="section">
|
<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 %}
|
{% for Section in Sections %}
|
||||||
<option value="{{ Section.ID }}"
|
<option value="{{ Section.ID }}">
|
||||||
{% if Section.ID == FilterSection %}
|
|
||||||
selected
|
|
||||||
{% endif %}
|
|
||||||
>
|
|
||||||
{{ Section.Name }}
|
{{ Section.Name }}
|
||||||
</option>
|
</option>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
@ -66,46 +70,63 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-6 col-lg-3 mb-2">
|
<div class="col-sm-6 col-lg-3 mb-2">
|
||||||
|
|
||||||
<label for="archive" class="form-label">
|
<label class="form-label">
|
||||||
Status
|
Status
|
||||||
</label>
|
</label>
|
||||||
<select class="form-select" id="archive" data-search-field="archive" data-search-advanced="false" name="archive">
|
<div class="form-check form-switch">
|
||||||
{% if PermShow %}
|
<input class="form-check-input" type="checkbox" role="switch" data-search-field="archive" data-search-advanced="false" id="archive">
|
||||||
<option value="0">Actif</option>
|
<label class="form-check-label" for="archive">Archivé</label>
|
||||||
{% endif %}
|
</div>
|
||||||
|
|
||||||
{% 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>
|
</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">
|
<div class="col-6">
|
||||||
<button class="btn btn-outline-primary btn-sm" id="advanced" data-state="false" type="button">
|
<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é
|
<i class="bi-chevron-double-down me-1"></i> Avancé
|
||||||
|
|
@ -118,9 +139,9 @@
|
||||||
</div>
|
</div>
|
||||||
</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="p" value="{{ Pagination.CurrentPage }}">
|
||||||
<input type="hidden" name="s">
|
<input type="hidden" id="search-json" name="s" value="{{ FilterSearch }}">
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<div class="table-responsive">
|
<div class="table-responsive">
|
||||||
|
|
@ -249,42 +270,5 @@
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block javascript %}
|
{% block javascript %}
|
||||||
<script>
|
<script src="/static/search.js"></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>
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue