238 lines
10 KiB
HTML
238 lines
10 KiB
HTML
{% extends "common/base.html" %}
|
|
{% from "components/header.html" import header %}
|
|
|
|
{% block title %}Create Conversation - {% if site_settings.company_name %}DocuPulse for {{ site_settings.company_name }}{% else %}DocuPulse{% endif %}{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
|
|
<link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet" />
|
|
<style>
|
|
.member-avatar {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
margin-right: 1rem;
|
|
}
|
|
.badge-creator {
|
|
background-color: #d1f2eb;
|
|
color: #117a65;
|
|
font-weight: 500;
|
|
}
|
|
.btn-remove-member {
|
|
background: #f8d7da;
|
|
color: #c82333;
|
|
border: none;
|
|
font-weight: 500;
|
|
}
|
|
.btn-remove-member:hover {
|
|
background: #f5c6cb;
|
|
color: #a71d2a;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
{{ header(
|
|
title=("Edit Conversation" if edit_mode else "Create New Conversation"),
|
|
description=("Update conversation details" if edit_mode else "Start a new conversation with your team"),
|
|
button_text="Cancel",
|
|
button_url=url_for('conversations.conversations'),
|
|
icon="fa-edit" if edit_mode else "fa-comments",
|
|
button_class="btn-secondary",
|
|
button_icon="fa-times"
|
|
) }}
|
|
|
|
<!-- Alert Modal -->
|
|
<div id="alertModal" class="modal fade" tabindex="-1" aria-labelledby="alertModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="alertModalLabel">Notification</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="d-flex align-items-center gap-3">
|
|
<i class="fas fa-exclamation-circle text-warning" style="font-size: 2rem;"></i>
|
|
<div id="alertModalMessage"></div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">OK</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container-fluid py-4">
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<div class="card shadow-sm">
|
|
<div class="card-body">
|
|
<form method="POST" id="conversationForm">
|
|
{{ form.csrf_token }}
|
|
<div class="mb-3">
|
|
{{ form.name.label(class="form-label") }}
|
|
{{ form.name(class="form-control", placeholder="Enter conversation name") }}
|
|
{% if form.name.errors %}
|
|
<div class="text-danger">
|
|
{% for error in form.name.errors %}
|
|
<small>{{ error }}</small>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="{{ form.description.id }}" class="form-label">Description (Optional)</label>
|
|
{{ form.description(class="form-control", rows="3", placeholder="Enter a description (optional)") }}
|
|
{% if form.description.errors %}
|
|
<div class="text-danger">
|
|
{% for error in form.description.errors %}
|
|
<small>{{ error }}</small>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="d-flex justify-content-end">
|
|
<button type="submit" class="btn btn-primary">
|
|
{{ "Edit Conversation" if edit_mode else "Create Conversation" }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<div class="card shadow-sm">
|
|
<div class="card-header bg-white">
|
|
<h5 class="card-title mb-0">Add Members</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<label for="user_id" class="form-label">Select User</label>
|
|
<select class="form-select select2" id="user_id" name="user_id">
|
|
<option value="">Search for a user...</option>
|
|
{% for user in form.members.choices %}
|
|
{% if user[0] != current_user.id %}
|
|
<option value="{{ user[0] }}" data-email="{{ user[2] if user|length > 2 else '' }}" data-avatar="{{ url_for('profile_pic', filename=user[3]) if user|length > 3 and user[3] else url_for('static', filename='default-avatar.png') }}">{{ user[1] }}</option>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<button type="button" class="btn btn-primary w-100 mb-3" id="addMemberBtn">
|
|
<i class="fas fa-user-plus me-2"></i>Add Member
|
|
</button>
|
|
|
|
<div class="list-group" id="selectedMembersList">
|
|
<!-- Render creator row server-side -->
|
|
<div class="list-group-item d-flex align-items-center member-row" data-user-id="{{ current_user.id }}">
|
|
<img class="member-avatar" src="{{ url_for('profile_pic', filename=current_user.profile_picture) if current_user.profile_picture else url_for('static', filename='default-avatar.png') }}">
|
|
<div class="flex-grow-1">
|
|
<div class="fw-bold">{{ current_user.username }} {{ current_user.last_name }}</div>
|
|
<div class="text-muted small">{{ current_user.email }}</div>
|
|
</div>
|
|
<span class="badge badge-creator ms-2"><i class="fas fa-user"></i> Creator</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
|
|
<script>
|
|
$(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 = '{{ current_user.id }}';
|
|
addedMembers.add(creatorId);
|
|
|
|
// Function to show alert modal
|
|
function showAlert(message) {
|
|
$('#alertModalMessage').text(message);
|
|
var alertModal = new bootstrap.Modal(document.getElementById('alertModal'));
|
|
alertModal.show();
|
|
}
|
|
|
|
// Handle Add Member button click
|
|
$('#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') || "{{ url_for('static', filename='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();
|
|
});
|
|
|
|
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();
|
|
});
|
|
</script>
|
|
{% endblock %} |