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

	$("#reset-search").on("click", function() {
		$("#search-json").val("");
		$("#search-page").val("1");
		$("#search-form").submit();
	});

	$("#search-container").on("change", ".field-select", function() {
		var lastField = $(this).attr("data-last-field");
		var isInitial = $(this).attr("data-is-initial");
		var initialValue = $(this).attr("data-initial-value");

		var field = $(this).val();
		if (field == "") {
			$(this).parents(".row").remove();
			return;
		}

		if ((lastField === undefined || lastField.length === 0) && (isInitial === undefined || isInitial !== "yes")) {
			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,
					"data-search-type": "int"
				});
				$(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,
					"data-search-type": "int"
				}));
			} 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
				}));
			}

			if (initialValue !== undefined && initialValue.length > 0) {
				$(elem).parents(".row").find("[data-optional-field]").val(initialValue);
				$(elem).attr("data-initial-value", null);
			}
		});
	});

	$("#search-container").on("keyup", "input[type=text]", function(e) {
		if (e.keyCode === 13) {
			search();
		}
	});

	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") {
				for (const [field_id, field_values] of Object.entries(value)) {
					for (const field_value of field_values) {
						createFieldSelection(field_id, field_value);
					}
				}
				continue
			}

			if (typeof value === "boolean") {
				$("[data-search-field=" + key + "]").prop("checked", value);
			} else {
				$("[data-search-field=" + key + "]").val(value);				
			}
		}
	}

	createFieldSelection();
});

function createFieldSelection(field, value) {
	var elem = $("#search-fields-model").clone().appendTo("#search-fields");
	$(elem).attr("id", null);
	$(elem).removeClass("d-none");
	$(elem).addClass("search-fields-count");

	if (field !== undefined && field.length > 0) {
		$(elem).find(".field-select").attr("data-initial-value", value);
		$(elem).find(".field-select").attr("data-is-initial", "yes");
		$(elem).find(".field-select").val(field);
		$(elem).find(".field-select").trigger("change");
	}
}

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).data("search-type") === "int") {
			value = parseInt(value);
			if (isNaN(value)) return;
		} else if ($(this).attr("type") === "checkbox") {
			value = $(this).prop("checked");
		}

		searchData[index] = value;
	});

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

		if ($(this).data("search-type") === "int") {
			value = parseInt(value);
			if (isNaN(value)) return;
		}

		if (fields[index] !== undefined) {
			fields[index].push(value);
		} else {
			fields[index] = [value];
		}
	});
	searchData["fields"] = fields;

	var json = JSON.stringify(searchData);
	$("#search-json").val(json);
	$("#search-page").val("1");
	$("#search-form").submit();
}