Added messaging functions
This commit is contained in:
238
templates/conversations/create_conversation.html
Normal file
238
templates/conversations/create_conversation.html
Normal file
@@ -0,0 +1,238 @@
|
||||
{% 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 %}
|
||||
Reference in New Issue
Block a user