pop-camarades/views/people.html

{% extends "layouts/main.html" %}

{% block main %}
<div class="container my-4">
	<div class="mb-4">
		<nav>
			<ol class="breadcrumb">
				<li class="breadcrumb-item"><a href="/">Accueil</a></li>

				{% if MembersPage %}
					<li class="breadcrumb-item active">Membres</li>
				{% else %}
					<li class="breadcrumb-item active">Contacts</li>					
				{% endif %}
				
			</ol>
		</nav>
		<hr>
	</div>

	<div class="my-3 text-end">
		{% if MembersPage %}
			<div class="btn-group">
				<a class="btn btn-outline-primary" href="/members/add">
					<i class="bi-plus-lg"></i>
					Ajouter
				</a>
				<a class="btn btn-outline-primary" href="/members/export?se={{ FilterSection }}&s={{ FilterSearch|urlencode }}&a={{ FilterArchive }}">
					<i class="bi-filetype-csv"></i>
					Exporter
				</a>
			</div>
		{% else %}
			<div class="btn-group">
				<a class="btn btn-outline-primary" href="/contacts/add">
					<i class="bi-plus-lg"></i>
					Ajouter
				</a>
				<a class="btn btn-outline-primary" href="/contacts/export?se={{ FilterSection }}&s={{ FilterSearch|urlencode }}&a={{ FilterArchive }}">
					<i class="bi-filetype-csv"></i>
					Exporter
				</a>
			</div>
		{% endif %}
	</div>

	<div class="row">
		<div class="col-sm-6 col-lg-3 mb-2">

			<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>
				{% for Section in Sections %}
					<option value="{{ Section.ID }}"
						{% if Section.ID == FilterSection %}
						selected
						{% endif %}
					>
						{{ Section.Name }}
					</option>
				{% endfor %}
			</select>

		</div>
		<div class="col-sm-6 col-lg-3 mb-2">

			<label for="archive" 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>
	</div>

	<div class="row mt-2">
		<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é
			</button>
		</div>
		<div class="col-6 text-end">
			<button class="btn btn-outline-success btn-sm" id="search" type="button">
				<i class="bi-search me-1"></i> Recherche
			</button>
		</div>
	</div>

	<form id="filters" method="get" class="my-3">
		<input type="hidden" name="p" value="{{ Pagination.CurrentPage }}">
		<input type="hidden" name="s">
	</form>

	<div class="table-responsive">
		<table class="table">
			<thead>
				<tr>
					<th class="w-25">Nom</th>
					<th class="w-50 d-none d-sm-table-cell">Adresse</th>
					<th class="w-25">Section</th>
				</tr>
			</thead>
			<tbody>
				{% for Person in People %}
				<tr>
					<td>
						{% if Person.IsMember %}
							<a href="/members/{{ Person.ID }}">
								{{ Person.LastName }} {{ Person.FirstName }}
							</a>
						{% else %}
							<a href="/contacts/{{ Person.ID }}">
								{{ Person.LastName }} {{ Person.FirstName }}
							</a>
						{% endif %}
					</td>
					<td class="d-none d-sm-table-cell">
						{{ Person.Address1 }}
						{% if Person.Address1 and (Person.PostalCode or Person.City) %}						
						&ndash;
						{% endif %}
						{{ Person.PostalCode }} {{ Person.City }}
					</td>
					<td>
						{% if Person.SectionID %}
							{{ Person.Section.Name }}
						{% endif %}
					</td>
				</tr>
				{% endfor %}
			</tbody>
		</table>
	</div>

	<nav class="mt-3 mb-5">
		<ul class="pagination justify-content-center">

			{% if Pagination.CurrentPage <= 1 %}
			<li class="page-item disabled">
				<a class="page-link" href="javascript:;">
					<i class="bi-rewind"></i>
				</a>
			</li>
			<li class="page-item disabled">
				<a class="page-link" href="javascript:;">
					<i class="bi-caret-left"></i>
				</a>
			</li>
			{% else %}
			<li class="page-item">
				<a
					class="page-link"
					href="?se={{ FilterSection }}&s={{ FilterSearch|urlencode }}&a={{ FilterArchive }}&p=1"
				>
					<i class="bi-rewind"></i>
				</a>
			</li>
			<li class="page-item">
				<a
					class="page-link"
					href="?se={{ FilterSection }}&s={{ FilterSearch|urlencode }}&a={{ FilterArchive }}&p={{ Pagination.CurrentPage - 1 }}"
				>
					<i class="bi-caret-left"></i>
				</a>
			</li>
			{% endif %}

			{% for i in Pagination.Pages %}
			<li class="page-item">
				<a
					{% if i == Pagination.CurrentPage %}
					class="page-link active"
					{% else %}
					class="page-link"
					{% endif %}
					
					href="?se={{ FilterSection }}&s={{ FilterSearch|urlencode }}&a={{ FilterArchive }}&p={{ i }}"
				>
					{{ i }}
				</a>
			</li>
			{% endfor %}

			{% if Pagination.CurrentPage >= Pagination.MaxPages %}
				<li class="page-item disabled">
					<a class="page-link" href="javascript:;">
						<i class="bi-caret-right"></i>
					</a>
				</li>
				<li class="page-item disabled">
					<a class="page-link" href="javascript:;">
						<i class="bi-fast-forward"></i>
					</a>
				</li>
			{% else %}
				<li class="page-item">
					<a
						class="page-link"
						href="?se={{ FilterSection }}&s={{ FilterSearch|urlencode }}&a={{ FilterArchive }}&p={{ Pagination.CurrentPage + 1 }}"
					>
						<i class="bi-caret-right"></i>
					</a>
				</li>
				<li class="page-item">
					<a
						class="page-link"
						href="?se={{ FilterSection }}&s={{ FilterSearch|urlencode }}&a={{ FilterArchive }}&p={{ Pagination.MaxPages }}"
					>
						<i class="bi-fast-forward"></i>
					</a>
				</li>
			{% endif %}
		</ul>
	</nav>

</div>
{% 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>
{% endblock %}