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?s={{ SearchJSON|urlencode }}">
					<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?s={{ SearchJSON|urlencode }}">
					<i class="bi-filetype-csv"></i>
					Exporter
				</a>
			</div>
		{% endif %}
	</div>

	<div id="search-container" class="h-100 p-4 mb-3 bg-body-tertiary border rounded-3">
		<div class="row">
			<div class="col-lg-6 mb-3">

				<label for="name" class="form-label">Nom et pré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-type="int" data-search-advanced="false" name="section">
					<option value=""></option>
					{% for Section in Sections %}
						<option value="{{ Section.ID }}">
							{{ Section.Name }}
						</option>
					{% endfor %}
				</select>

			</div>
			<div class="col-sm-6 col-lg-3 mb-3 pt-3">
			
				{% if PermShow %}				
					<div class="form-check form-switch">
						<input class="form-check-input" type="checkbox" role="switch" data-search-field="active" data-search-advanced="false" id="active" checked>
						{% if MembersPage %}
							<label class="form-check-label" for="active">Afficher membres actifs</label>
						{% else %}
							<label class="form-check-label" for="active">Afficher contacts actifs</label>
						{% endif %}
					</div>
				{% endif %}

				{% if PermShowArchived %}				
					<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">
						{% if MembersPage %}
							<label class="form-check-label" for="archive">Afficher membres archivés</label>
						{% else %}
							<label class="form-check-label" for="archive">Afficher contacts archivés</label>
						{% endif %}
					</div>
				{% endif %}

			</div>
		</div>

		<div class="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 id="search-fields-model" class="row d-none">
				<div class="start-col col-lg-6 mb-3">
					<label class="form-label">Champ supplémentaire</label>
					<select class="form-select field-select" data-last-field="">
						<option value=""></option>
						{% for Field in Fields %}
							<option value="{{ Field.ID }}">
								{{ Field.Name }}
							</option>
						{% endfor %}
					</select>
				</div>
				<div class="end-col col-lg-6 mb-3">
					<label class="form-label">Valeur</label>
					<input type="text" class="form-control" disabled>
				</div>
			</div>
			
			<div id="search-fields" class="mb-3"></div>
		</div>

		<div class="row mt-2">
			<div class="col-6">
				<button class="btn btn-outline-primary" id="advanced" data-state="false" type="button">
					<i class="bi-arrow-down me-1"></i> Avancé
				</button>
				<button class="btn btn-outline-primary" id="reset-search" type="button">
					<i class="bi-arrow-clockwise me-1"></i> Réinitialiser
				</button>
			</div>
			<div class="col-6 text-end">
				<button class="btn btn-outline-success" id="search" type="button">
					<i class="bi-search me-1"></i> Recherche
				</button>
			</div>
		</div>

		<form id="search-form" method="get" class="d-none">
			<input type="hidden" id="search-page" name="p" value="{{ Pagination.CurrentPage }}">
			<input type="hidden" id="search-json" name="s" value="{{ SearchJSON }}">
		</form>
	</div>

	<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="?p=1&s={{ SearchJSON|urlencode }}"
				>
					<i class="bi-rewind"></i>
				</a>
			</li>
			<li class="page-item">
				<a
					class="page-link"
					href="?&p={{ Pagination.CurrentPage - 1 }}&s={{ SearchJSON|urlencode }}"
				>
					<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="?&p={{ i }}&s={{ SearchJSON|urlencode }}"
				>
					{{ 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="?&p={{ Pagination.CurrentPage + 1 }}&s={{ SearchJSON|urlencode }}"
					>
						<i class="bi-caret-right"></i>
					</a>
				</li>
				<li class="page-item">
					<a
						class="page-link"
						href="?p={{ Pagination.MaxPages }}&s={{ SearchJSON|urlencode }}"
					>
						<i class="bi-fast-forward"></i>
					</a>
				</li>
			{% endif %}
		</ul>
	</nav>

</div>
{% endblock %}

{% block javascript %}
<script src="/static/search.js"></script>
{% endblock %}