pop-camarades/static/search.js

$(document).ready(function() {
	$("#search").on("click", function() {
		search();
	});

	$("#advanced").on("click", function() {
		if ($(this).data("state") === "true") {
			$(this).find("i").removeClass("bi-arrow-up");
			$(this).find("i").addClass("bi-arrow-down");
			$("#advanced-section").addClass("d-none");
			$(this).data("state", "false");
		} else {
			$(this).find("i").removeClass("bi-arrow-down");
			$(this).find("i").addClass("bi-arrow-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") {
				$("[data-search-field=" + key + "]").prop("checked", value);
			} else {
				$("[data-search-field=" + key + "]").val(value);				
			}
		}
	}

	createFieldSelection();
	$("body").on("change", ".search-fields-count .field-select", function() {
		var lastfield = $(this).attr("data-last-field");
		var field = $(this).val();
		if (field == "") {
			$(this).parents(".row").remove();
			return;
		}

		if (lastfield.length === 0) {
			createFieldSelection();
		}
		$(this).attr("data-last-field", field);

		$(this).parents(".row").find(".end-col").find("input").remove();
		$(this).parents(".row").find(".end-col").find("select").remove();

		$(elem).parents(".row").find(".end-col").append($("<input>", {
			class: "form-control",
			type: "text",
			disabled: true,
		}));

		var elem = $(this);
		$.getJSON("/fields/" + field, function(data) {
			$(this).parents(".row").find(".end-col").find("input").remove();

			if (data.FieldType === "list") {
				var select = $("<select>", {
					class: "form-select",
					"data-optional-field": field
				});
				$(elem).parents(".row").find(".end-col").append(select);

				for (const [_, value] of Object.entries(data.List.ListItems)) {
					$(select).append($("<option>", {
						value: value.ID,
						text: value.Value
					}));
				}
			} else if (data.FieldType === "number") {
				$(elem).parents(".row").find(".end-col").append($("<input>", {
					class: "form-control",
					type: "number",
					"data-optional-field": field
				}));
			} else if (data.FieldType === "date") {
				$(elem).parents(".row").find(".end-col").append($("<input>", {
					class: "form-control",
					type: "date",
					"data-optional-field": field
				}));
			} else {
				$(elem).parents(".row").find(".end-col").append($("<input>", {
					class: "form-control",
					type: "text",
					"data-optional-field": field
				}));
			}
		});
	});
});

function createFieldSelection() {
	const uuid = crypto.randomUUID();

	var elem = $("#search-fields-model").clone().appendTo("#search-fields");
	$(elem).attr("id", "search-field-" + uuid);
	//$(elem).find(".start-col").find("label").attr("for", "search-field-field-" + uuid);
	//$(elem).find(".start-col").find("select").attr("id", "search-field-field-" + uuid);
	//$(elem).find(".end-col").find("label").attr("for", "search-field-value-" + uuid);
	//$(elem).find(".end-col").find("input").attr("id", "search-field-value-" + uuid);
	$(elem).removeClass("d-none");
	$(elem).addClass("search-fields-count");
}

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;
	});

	fields = {}
	$("[data-optional-field]:not(:disabled)").each(function() {
		var index = $(this).attr("data-optional-field");
		var value = $(this).val();

		fields[index] = value;
	});
	searchData["fields"] = fields;

	var json = JSON.stringify(searchData);
	$("#search-json").val(json);
	console.log(searchData);
	//$("#search-form").submit();
}