425 lines
24 KiB
HTML
425 lines
24 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}Send Message{% endblock %}
|
|
|
|
{% block css %}
|
|
<link href="{% static 'assets/plugins/select2/dist/css/select2.min.css' %}" rel="stylesheet" />
|
|
<link href="{% static 'assets/plugins/summernote/dist/summernote-lite.min.css' %}" rel="stylesheet" />
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div id="content" class="app-content">
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-xl-10">
|
|
<ul class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
|
|
<li class="breadcrumb-item"><a href="{% url 'communications:message_list' %}">Messages</a></li>
|
|
<li class="breadcrumb-item active">Send Message</li>
|
|
</ul>
|
|
|
|
<h1 class="page-header">Send Message</h1>
|
|
|
|
<div class="card">
|
|
<div class="card-body">
|
|
{% if messages %}
|
|
{% for message in messages %}
|
|
<div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
|
|
{{ message }}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
|
|
<form method="post" class="form-horizontal" enctype="multipart/form-data">
|
|
{% csrf_token %}
|
|
|
|
<div class="row mb-3">
|
|
<label class="col-form-label col-md-2">Message Type <span class="text-danger">*</span></label>
|
|
<div class="col-md-10">
|
|
<select name="message_type" class="form-select" required>
|
|
<option value="">Select Type</option>
|
|
<option value="announcement" {% if form.message_type.value == 'announcement' %}selected{% endif %}>Announcement</option>
|
|
<option value="alert" {% if form.message_type.value == 'alert' %}selected{% endif %}>Alert</option>
|
|
<option value="notification" {% if form.message_type.value == 'notification' %}selected{% endif %}>Notification</option>
|
|
<option value="reminder" {% if form.message_type.value == 'reminder' %}selected{% endif %}>Reminder</option>
|
|
<option value="update" {% if form.message_type.value == 'update' %}selected{% endif %}>System Update</option>
|
|
<option value="personal" {% if form.message_type.value == 'personal' %}selected{% endif %}>Personal Message</option>
|
|
</select>
|
|
{% if form.message_type.errors %}
|
|
<div class="text-danger">{{ form.message_type.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<label class="col-form-label col-md-2">Recipients <span class="text-danger">*</span></label>
|
|
<div class="col-md-10">
|
|
<div class="btn-group mb-2" role="group">
|
|
<input type="radio" class="btn-check" name="recipient_type" id="recipient_individual" value="individual" checked>
|
|
<label class="btn btn-outline-primary" for="recipient_individual">Individual</label>
|
|
|
|
<input type="radio" class="btn-check" name="recipient_type" id="recipient_group" value="group">
|
|
<label class="btn btn-outline-primary" for="recipient_group">Group</label>
|
|
|
|
<input type="radio" class="btn-check" name="recipient_type" id="recipient_department" value="department">
|
|
<label class="btn btn-outline-primary" for="recipient_department">Department</label>
|
|
|
|
<input type="radio" class="btn-check" name="recipient_type" id="recipient_all" value="all">
|
|
<label class="btn btn-outline-primary" for="recipient_all">All Staff</label>
|
|
</div>
|
|
|
|
<div id="individual_recipients">
|
|
<select name="individual_users" class="form-select" multiple>
|
|
{% for user in users %}
|
|
<option value="{{ user.id }}">{{ user.get_full_name }} ({{ user.email }})</option>
|
|
{% endfor %}
|
|
</select>
|
|
<small class="form-text text-muted">Select individual users to send the message to</small>
|
|
</div>
|
|
|
|
<div id="group_recipients" style="display: none;">
|
|
<select name="groups" class="form-select" multiple>
|
|
{% for group in groups %}
|
|
<option value="{{ group.id }}">{{ group.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
<small class="form-text text-muted">Select user groups</small>
|
|
</div>
|
|
|
|
<div id="department_recipients" style="display: none;">
|
|
<select name="departments" class="form-select" multiple>
|
|
{% for department in departments %}
|
|
<option value="{{ department.id }}">{{ department.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
<small class="form-text text-muted">Select departments</small>
|
|
</div>
|
|
|
|
<div id="all_recipients" style="display: none;">
|
|
<div class="alert alert-warning">
|
|
<i class="fa fa-exclamation-triangle me-2"></i>
|
|
This message will be sent to all staff members in the system.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<label class="col-form-label col-md-2">Priority</label>
|
|
<div class="col-md-10">
|
|
<select name="priority" class="form-select">
|
|
<option value="normal" {% if form.priority.value == 'normal' %}selected{% endif %}>Normal</option>
|
|
<option value="high" {% if form.priority.value == 'high' %}selected{% endif %}>High</option>
|
|
<option value="urgent" {% if form.priority.value == 'urgent' %}selected{% endif %}>Urgent</option>
|
|
<option value="low" {% if form.priority.value == 'low' %}selected{% endif %}>Low</option>
|
|
</select>
|
|
{% if form.priority.errors %}
|
|
<div class="text-danger">{{ form.priority.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<label class="col-form-label col-md-2">Subject <span class="text-danger">*</span></label>
|
|
<div class="col-md-10">
|
|
<input type="text" name="subject" class="form-control"
|
|
value="{{ form.subject.value|default:'' }}" required
|
|
placeholder="Enter message subject">
|
|
{% if form.subject.errors %}
|
|
<div class="text-danger">{{ form.subject.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<label class="col-form-label col-md-2">Message Content <span class="text-danger">*</span></label>
|
|
<div class="col-md-10">
|
|
<textarea name="content" id="messageContent" class="form-control" required>{{ form.content.value|default:'' }}</textarea>
|
|
{% if form.content.errors %}
|
|
<div class="text-danger">{{ form.content.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<label class="col-form-label col-md-2">Delivery Method</label>
|
|
<div class="col-md-10">
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="checkbox" name="delivery_methods" value="in_app" id="delivery_in_app" checked>
|
|
<label class="form-check-label" for="delivery_in_app">In-App Notification</label>
|
|
</div>
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="checkbox" name="delivery_methods" value="email" id="delivery_email">
|
|
<label class="form-check-label" for="delivery_email">Email</label>
|
|
</div>
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="checkbox" name="delivery_methods" value="sms" id="delivery_sms">
|
|
<label class="form-check-label" for="delivery_sms">SMS</label>
|
|
</div>
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="checkbox" name="delivery_methods" value="push" id="delivery_push">
|
|
<label class="form-check-label" for="delivery_push">Push Notification</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<label class="col-form-label col-md-2">Schedule Delivery</label>
|
|
<div class="col-md-10">
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="radio" name="delivery_timing" id="send_now" value="now" checked>
|
|
<label class="form-check-label" for="send_now">Send Now</label>
|
|
</div>
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="radio" name="delivery_timing" id="schedule_later" value="scheduled">
|
|
<label class="form-check-label" for="schedule_later">Schedule for Later</label>
|
|
</div>
|
|
|
|
<div id="schedule_options" style="display: none;">
|
|
<div class="row mt-2">
|
|
<div class="col-md-6">
|
|
<input type="datetime-local" name="scheduled_at" class="form-control">
|
|
<small class="form-text text-muted">Select date and time</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<label class="col-form-label col-md-2">Attachments</label>
|
|
<div class="col-md-10">
|
|
<input type="file" name="attachments" class="form-control" multiple
|
|
accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif">
|
|
<small class="form-text text-muted">
|
|
Supported formats: PDF, Word, Excel, Images. Max 10MB per file.
|
|
</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<label class="col-form-label col-md-2">Options</label>
|
|
<div class="col-md-10">
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="checkbox" name="require_acknowledgment" id="require_acknowledgment">
|
|
<label class="form-check-label" for="require_acknowledgment">
|
|
Require acknowledgment from recipients
|
|
</label>
|
|
</div>
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="checkbox" name="track_read_status" id="track_read_status" checked>
|
|
<label class="form-check-label" for="track_read_status">
|
|
Track read status
|
|
</label>
|
|
</div>
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="checkbox" name="allow_replies" id="allow_replies" checked>
|
|
<label class="form-check-label" for="allow_replies">
|
|
Allow recipients to reply
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="auto_archive" id="auto_archive">
|
|
<label class="form-check-label" for="auto_archive">
|
|
Auto-archive after 30 days
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<label class="col-form-label col-md-2">Message Template</label>
|
|
<div class="col-md-10">
|
|
<select name="template" class="form-select" id="templateSelect">
|
|
<option value="">No Template</option>
|
|
{% for template in message_templates %}
|
|
<option value="{{ template.id }}" data-subject="{{ template.subject }}" data-content="{{ template.content }}">
|
|
{{ template.name }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
<small class="form-text text-muted">Select a template to pre-fill the message</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-10 offset-md-2">
|
|
<button type="submit" name="action" value="send" class="btn btn-primary">
|
|
<i class="fa fa-paper-plane me-2"></i>Send Message
|
|
</button>
|
|
<button type="submit" name="action" value="draft" class="btn btn-secondary ms-2">
|
|
<i class="fa fa-save me-2"></i>Save as Draft
|
|
</button>
|
|
<button type="button" class="btn btn-info ms-2" onclick="previewMessage()">
|
|
<i class="fa fa-eye me-2"></i>Preview
|
|
</button>
|
|
<a href="{% url 'communications:message_list' %}" class="btn btn-outline-secondary ms-2">
|
|
<i class="fa fa-times me-2"></i>Cancel
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Preview Modal -->
|
|
<div class="modal fade" id="previewModal" tabindex="-1">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Message Preview</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body" id="previewContent">
|
|
<!-- Preview content will be loaded here -->
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block js %}
|
|
<script src="{% static 'assets/plugins/select2/dist/js/select2.min.js' %}"></script>
|
|
<script src="{% static 'assets/plugins/summernote/dist/summernote-lite.min.js' %}"></script>
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Initialize Select2
|
|
$('select[multiple]').select2({
|
|
placeholder: 'Select options...',
|
|
allowClear: true
|
|
});
|
|
|
|
// Initialize Summernote
|
|
$('#messageContent').summernote({
|
|
height: 200,
|
|
toolbar: [
|
|
['style', ['style']],
|
|
['font', ['bold', 'italic', 'underline', 'clear']],
|
|
['fontname', ['fontname']],
|
|
['color', ['color']],
|
|
['para', ['ul', 'ol', 'paragraph']],
|
|
['table', ['table']],
|
|
['insert', ['link']],
|
|
['view', ['fullscreen', 'codeview', 'help']]
|
|
]
|
|
});
|
|
|
|
// Handle recipient type changes
|
|
$('input[name="recipient_type"]').change(function() {
|
|
var type = $(this).val();
|
|
$('.col-md-10 > div[id$="_recipients"]').hide();
|
|
$('#' + type + '_recipients').show();
|
|
});
|
|
|
|
// Handle delivery timing
|
|
$('input[name="delivery_timing"]').change(function() {
|
|
if ($(this).val() === 'scheduled') {
|
|
$('#schedule_options').show();
|
|
} else {
|
|
$('#schedule_options').hide();
|
|
}
|
|
});
|
|
|
|
// Handle template selection
|
|
$('#templateSelect').change(function() {
|
|
var selected = $(this).find('option:selected');
|
|
if (selected.val()) {
|
|
var subject = selected.data('subject');
|
|
var content = selected.data('content');
|
|
|
|
if (subject) {
|
|
$('input[name="subject"]').val(subject);
|
|
}
|
|
if (content) {
|
|
$('#messageContent').summernote('code', content);
|
|
}
|
|
}
|
|
});
|
|
|
|
// Set default scheduled time to 1 hour from now
|
|
var now = new Date();
|
|
now.setHours(now.getHours() + 1);
|
|
var dateTimeString = now.toISOString().slice(0, 16);
|
|
$('input[name="scheduled_at"]').val(dateTimeString);
|
|
});
|
|
|
|
function previewMessage() {
|
|
var formData = new FormData($('form')[0]);
|
|
var content = $('#messageContent').summernote('code');
|
|
|
|
var previewHtml = `
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h6 class="mb-0">${$('input[name="subject"]').val()}</h6>
|
|
<small class="text-muted">From: ${$('#user-name').text() || 'Current User'}</small>
|
|
</div>
|
|
<div>
|
|
<span class="badge bg-${getPriorityColor($('select[name="priority"]').val())}">${$('select[name="priority"] option:selected').text()}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
${content}
|
|
</div>
|
|
<div class="card-footer">
|
|
<small class="text-muted">
|
|
Type: ${$('select[name="message_type"] option:selected').text()} |
|
|
Delivery: ${getDeliveryMethods()} |
|
|
Recipients: ${getRecipientCount()}
|
|
</small>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
$('#previewContent').html(previewHtml);
|
|
$('#previewModal').modal('show');
|
|
}
|
|
|
|
function getPriorityColor(priority) {
|
|
switch(priority) {
|
|
case 'urgent': return 'danger';
|
|
case 'high': return 'warning';
|
|
case 'low': return 'secondary';
|
|
default: return 'primary';
|
|
}
|
|
}
|
|
|
|
function getDeliveryMethods() {
|
|
var methods = [];
|
|
$('input[name="delivery_methods"]:checked').each(function() {
|
|
methods.push($(this).next('label').text());
|
|
});
|
|
return methods.join(', ') || 'In-App Only';
|
|
}
|
|
|
|
function getRecipientCount() {
|
|
var type = $('input[name="recipient_type"]:checked').val();
|
|
switch(type) {
|
|
case 'individual':
|
|
return $('select[name="individual_users"]').val()?.length || 0 + ' users';
|
|
case 'group':
|
|
return $('select[name="groups"]').val()?.length || 0 + ' groups';
|
|
case 'department':
|
|
return $('select[name="departments"]').val()?.length || 0 + ' departments';
|
|
case 'all':
|
|
return 'All staff';
|
|
default:
|
|
return '0 recipients';
|
|
}
|
|
}
|
|
</script>
|
|
{% endblock %}
|
|
|