Jade/views/partials/popover-conversation.html
2024-05-24 19:50:42 +02:00

52 lines
2.1 KiB
HTML

<div class="dropdown is-up is-right {% if IsActive %} is-active {% endif %}" id="conversation-dropdown">
<div class="dropdown-trigger">
<button class="button is-small" aria-haspopup="true" aria-controls="dropdown-menu3"
hx-get="/refreshConversationSelection" hx-target="#conversation-dropdown" hx-swap="outerHTML">
<span class="icon">
<i class="fa-solid fa-comments"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu3" role="menu">
<div class="dropdown-content">
<div class="dropdown-item" id="models-list">
<div id="conversation-list">
{% for Conversation in Conversations %}
<div class="icon-text has-text unselected" data-id="{{ Converrsation.ID.String() }}"
style="cursor: pointer;" onclick="toggleSelection(this)">
<span>{{ Conversation.Name }}</span>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
{% if not IsActive %}
<script>
var sortable = new Sortable(document.getElementById('conversation-list'), {
animation: 150,
onEnd: function (evt) {
var items = evt.to.children;
var updates = [];
for (var i = 0; i < items.length; i++) {
var id = items[i].getAttribute('data-id');
var position = i + 1;
updates.push({ id: id, position: position });
}
var xhr = new XMLHttpRequest();
xhr.open('POST', '/updateConversationPositionBatch', true);
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
xhr.send(JSON.stringify(updates));
}
});
document.addEventListener('click', function (event) {
if (!document.getElementById('conversation-dropdown').contains(event.target)) {
document.getElementById('conversation-dropdown').classList.remove('is-active');
}
});
</script>
{% endif %}