167 lines
8.1 KiB
HTML
167 lines
8.1 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" />
|
|
<link href="{{ url_for('static', filename='css/member-management.css', v=config.CSS_VERSION) }}" 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>
|
|
{% if edit_mode %}
|
|
<!-- Render existing members -->
|
|
{% for member in conversation.members %}
|
|
{% if member.id != current_user.id %}
|
|
<div class="list-group-item d-flex align-items-center member-row" data-user-id="{{ member.id }}">
|
|
<img class="member-avatar" src="{{ url_for('profile_pic', filename=member.profile_picture) if member.profile_picture else url_for('static', filename='default-avatar.png') }}">
|
|
<div class="flex-grow-1">
|
|
<div class="fw-bold">{{ member.username }} {{ member.last_name }}</div>
|
|
<div class="text-muted small">{{ member.email }}</div>
|
|
</div>
|
|
<button type="button" class="btn btn-remove-member ms-2">
|
|
<i class="fas fa-user-minus me-1"></i>Remove
|
|
</button>
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% endif %}
|
|
</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 src="{{ url_for('static', filename='js/create-conversation.js', v=config.CSS_VERSION) }}"></script>
|
|
{% endblock %} |