118 lines
4.1 KiB
Cheetah
118 lines
4.1 KiB
Cheetah
{{ define "adminconversations.pages.tmpl" }}
|
|
{{ template "head" . }}
|
|
|
|
<div class="columns">
|
|
{{ template "sidebar" . }}
|
|
|
|
<div class="column is-10">
|
|
<section class="section">
|
|
{{ if eq .User.Role "ADMIN" }}
|
|
<div class="field mb-3">
|
|
<label class="label">👤 Voir les conversations de :</label>
|
|
<div class="control">
|
|
<div class="select is-small">
|
|
<select id="userSelect"
|
|
name="user"
|
|
onchange="location.href='/admin/user/' + this.value + '/conversations'">
|
|
<option value="">Tous les utilisateurs</option>
|
|
{{ range .Clients }}
|
|
<option value="{{ .ID }}" {{ if eq $.UserID (printf "%d" .ID) }}selected{{ end }}>
|
|
{{ .Email }}
|
|
</option>
|
|
{{ end }}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
|
|
<h1 class="title is-4">💬 Historique des messages — Utilisateur #{{ .UserID }}</h1>
|
|
|
|
<!-- Filtres -->
|
|
<div class="box mb-4">
|
|
<h2 class="subtitle is-6">🔍 Filtres personnalisés</h2>
|
|
<div class="columns is-multiline">
|
|
<div class="column is-2">
|
|
<input type="text" class="input is-small" placeholder="📅 Date" onkeyup="filterTable(0, this.value)">
|
|
</div>
|
|
<div class="column is-2">
|
|
<input type="text" class="input is-small" placeholder="➡️ Direction" onkeyup="filterTable(1, this.value)">
|
|
</div>
|
|
<div class="column is-2">
|
|
<input type="text" class="input is-small" placeholder="📨 Expéditeur" onkeyup="filterTable(2, this.value)">
|
|
</div>
|
|
<div class="column is-2">
|
|
<input type="text" class="input is-small" placeholder="📦 Type" onkeyup="filterTable(3, this.value)">
|
|
</div>
|
|
<div class="column is-2">
|
|
<input type="text" class="input is-small" placeholder="💬 Contenu" onkeyup="filterTable(4, this.value)">
|
|
</div>
|
|
<div class="column is-2">
|
|
<input type="text" class="input is-small" placeholder="✅ Statut" onkeyup="filterTable(5, this.value)">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tableau -->
|
|
<table class="table is-fullwidth is-striped is-hoverable" id="conversationTable">
|
|
<thead>
|
|
<tr>
|
|
<th onclick="sortTable(0)">📅 Date</th>
|
|
<th onclick="sortTable(1)">➡️ Direction</th>
|
|
<th onclick="sortTable(2)">📨 Expéditeur</th>
|
|
<th onclick="sortTable(3)">📦 Type</th>
|
|
<th onclick="sortTable(4)">💬 Contenu</th>
|
|
<th onclick="sortTable(5)">✅ Statut</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="conversationRows"
|
|
hx-get="/api/user/{{ .UserID }}/conversations"
|
|
hx-trigger="load"
|
|
hx-target="this"
|
|
hx-swap="innerHTML">
|
|
</tbody>
|
|
</table>
|
|
|
|
<hr>
|
|
<h2 class="title is-5 mt-5">🧵 Conversation complète</h2>
|
|
<div id="threadViewer" class="box mt-3"></div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function filterTable(colIndex, filterValue) {
|
|
const table = document.getElementById("conversationTable");
|
|
const rows = table.getElementsByTagName("tbody")[0].getElementsByTagName("tr");
|
|
filterValue = filterValue.toLowerCase();
|
|
|
|
for (let i = 0; i < rows.length; i++) {
|
|
const td = rows[i].getElementsByTagName("td")[colIndex];
|
|
if (td) {
|
|
const text = td.textContent || td.innerText;
|
|
rows[i].style.display = text.toLowerCase().includes(filterValue) ? "" : "none";
|
|
}
|
|
}
|
|
}
|
|
|
|
function sortTable(colIndex) {
|
|
const table = document.getElementById("conversationTable");
|
|
const tbody = table.tBodies[0];
|
|
const rows = Array.from(tbody.querySelectorAll("tr"));
|
|
|
|
const isAscending = table.getAttribute("data-sort-dir") !== "asc";
|
|
table.setAttribute("data-sort-dir", isAscending ? "asc" : "desc");
|
|
|
|
rows.sort((a, b) => {
|
|
const cellA = a.children[colIndex].innerText.toLowerCase();
|
|
const cellB = b.children[colIndex].innerText.toLowerCase();
|
|
return isAscending
|
|
? cellA.localeCompare(cellB, 'fr', { numeric: true })
|
|
: cellB.localeCompare(cellA, 'fr', { numeric: true });
|
|
});
|
|
|
|
rows.forEach(row => tbody.appendChild(row));
|
|
}
|
|
</script>
|
|
{{ end }}
|