From fac4e695fcc3678f9b036cf0ef2740ad66c48b5f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?William=20Bouzour=C3=A8ne?= <william@bouzourene.ch>
Date: Mon, 24 Mar 2025 21:36:25 +0100
Subject: [PATCH] Javascript based search system (using json to be dynamic)

---
 static/search.js  |  72 ++++++++++++++++++++++
 views/people.html | 148 +++++++++++++++++++++-------------------------
 2 files changed, 138 insertions(+), 82 deletions(-)
 create mode 100644 static/search.js

diff --git a/static/search.js b/static/search.js
new file mode 100644
index 0000000..a6ec53b
--- /dev/null
+++ b/static/search.js
@@ -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();
+}
\ No newline at end of file
diff --git a/views/people.html b/views/people.html
index 6d1479f..bea48f5 100644
--- a/views/people.html
+++ b/views/people.html
@@ -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 %}
\ No newline at end of file