118 lines
4.1 KiB
JavaScript
118 lines
4.1 KiB
JavaScript
/**
|
|
* @fileoverview Manages the conversation creation functionality.
|
|
* This file handles:
|
|
* - User selection interface using Select2
|
|
* - Member management for new conversations
|
|
* - Form submission with member data
|
|
* - UI updates and validation
|
|
*/
|
|
|
|
/**
|
|
* Initializes conversation creation functionality when the document is ready.
|
|
* Sets up:
|
|
* - Select2 dropdown for user selection
|
|
* - Member tracking and management
|
|
* - Form handling
|
|
* @function
|
|
*/
|
|
$(document).ready(function() {
|
|
$('.select2').select2({
|
|
theme: 'bootstrap-5',
|
|
width: '100%',
|
|
placeholder: 'Search for a user...',
|
|
allowClear: true
|
|
});
|
|
|
|
// Keep track of added members
|
|
var addedMembers = new Set();
|
|
var creatorId = document.querySelector('.member-row').dataset.userId;
|
|
addedMembers.add(creatorId);
|
|
|
|
/**
|
|
* Shows an alert modal with the specified message.
|
|
* @function
|
|
* @param {string} message - The message to display in the alert modal
|
|
*/
|
|
function showAlert(message) {
|
|
$('#alertModalMessage').text(message);
|
|
var alertModal = new bootstrap.Modal(document.getElementById('alertModal'));
|
|
alertModal.show();
|
|
}
|
|
|
|
/**
|
|
* Handles adding a new member to the conversation.
|
|
* Validates the selection and updates the UI accordingly.
|
|
* @event
|
|
*/
|
|
$('#addMemberBtn').click(function() {
|
|
var selectedUserId = $('#user_id').val();
|
|
var selectedUserName = $('#user_id option:selected').text();
|
|
var selectedUserEmail = $('#user_id option:selected').data('email') || '';
|
|
var selectedUserAvatar = $('#user_id option:selected').data('avatar') || "/static/default-avatar.png";
|
|
|
|
if (!selectedUserId) {
|
|
showAlert('Please select a user to add.');
|
|
return;
|
|
}
|
|
|
|
if (addedMembers.has(selectedUserId)) {
|
|
showAlert('This user has already been added.');
|
|
return;
|
|
}
|
|
|
|
// Add to the set of added members
|
|
addedMembers.add(selectedUserId);
|
|
|
|
// Disable the option in the dropdown
|
|
$('#user_id option[value="' + selectedUserId + '"]').prop('disabled', true);
|
|
$('#user_id').val(null).trigger('change');
|
|
|
|
// Create the member list item
|
|
var memberItem = $('<div class="list-group-item d-flex align-items-center member-row" data-user-id="' + selectedUserId + '">')
|
|
.append($('<img class="member-avatar">').attr('src', selectedUserAvatar))
|
|
.append($('<div class="flex-grow-1">')
|
|
.append($('<div class="fw-bold">').text(selectedUserName))
|
|
.append($('<div class="text-muted small">').text(selectedUserEmail))
|
|
)
|
|
.append($('<button type="button" class="btn btn-remove-member ms-2">')
|
|
.append($('<i class="fas fa-user-minus me-1"></i>'))
|
|
.append('Remove')
|
|
.click(function() {
|
|
$(this).closest('.list-group-item').remove();
|
|
addedMembers.delete(selectedUserId);
|
|
// Re-enable the option in the dropdown
|
|
$('#user_id option[value="' + selectedUserId + '"]').prop('disabled', false);
|
|
$('#user_id').trigger('change');
|
|
updateHiddenInputs();
|
|
})
|
|
);
|
|
|
|
// Add to the list
|
|
$('#selectedMembersList').append(memberItem);
|
|
|
|
// Update hidden inputs
|
|
updateHiddenInputs();
|
|
});
|
|
|
|
/**
|
|
* Updates the hidden form inputs with the current member list.
|
|
* Removes existing member inputs and adds new ones for each current member.
|
|
* @function
|
|
*/
|
|
function updateHiddenInputs() {
|
|
// Remove any existing members inputs
|
|
$('#conversationForm input[name="members"]').remove();
|
|
|
|
// Add new hidden inputs for each member
|
|
addedMembers.forEach(function(memberId) {
|
|
var input = $('<input>')
|
|
.attr('type', 'hidden')
|
|
.attr('name', 'members')
|
|
.val(memberId);
|
|
$('#conversationForm').append(input);
|
|
});
|
|
}
|
|
|
|
// Initialize hidden inputs
|
|
updateHiddenInputs();
|
|
});
|