jens/TimeTrack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add user avatars and comments for tasks.

Browse Source
This commit is contained in:
Jens Luedicke
2025-07-06 16:44:06 +02:00
parent 19314bd532
commit 9bc3839587
10 changed files with 1831 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
templates/layout.html
View File

@@ -40,13 +40,14 @@
{% if g.user %}
<!-- User Account Menu -->
<a href="#" class="user-dropdown-toggle" id="user-dropdown-toggle" data-tooltip="{{ g.user.username }}">
<i class="nav-icon">👤</i>
<img src="{{ g.user.get_avatar_url(32) }}" alt="{{ g.user.username }}" class="user-avatar">
<span class="nav-text">{{ g.user.username }}<span class="dropdown-arrow">▼</span></span>
</a>
<!-- User Dropdown Context Menu -->
<div class="user-dropdown-modal" id="user-dropdown-modal">
<div class="user-dropdown-header">
<img src="{{ g.user.get_avatar_url(64) }}" alt="{{ g.user.username }}" class="user-avatar-large">
<h3>{{ g.user.username }}</h3>
<div class="user-info">
{% if g.user.email %}

627
templates/profile.html
View File

@@ -12,162 +12,403 @@
{% endif %}
{% endwith %}
<div class="profile-info">
<p><strong>Username:</strong> {{ user.username }}</p>
<p><strong>Account Type:</strong> {{ user.role.value if user.role else 'Team Member' }}</p>
<p><strong>Member Since:</strong> {{ user.created_at.strftime('%Y-%m-%d') }}</p>
<p><strong>Two-Factor Authentication:</strong>
{% if user.two_factor_enabled %}
<span class="status enabled">✅ Enabled</span>
{% else %}
<span class="status disabled">❌ Disabled</span>
{% endif %}
</p>
</div>
<h2>Profile Settings</h2>
<div class="profile-card">
<h3>Basic Information</h3>
<form method="POST" action="{{ url_for('profile') }}" class="profile-form">
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" id="email" name="email" class="form-control" value="{{ user.email }}" required>
<small>This email address is used for account verification and notifications.</small>
<div class="profile-grid">
<!-- Avatar Card -->
<div class="profile-card avatar-card">
<h3>Profile Picture</h3>
<div class="avatar-section">
<img src="{{ user.get_avatar_url(128) }}" alt="{{ user.username }}" class="profile-avatar" id="avatar-preview">
<div class="avatar-info">
<p><strong>{{ user.username }}</strong></p>
<p class="text-muted">{{ user.role.value if user.role else 'Team Member' }}</p>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Update Email</button>
</div>
</form>
</div>
<div class="profile-card">
<h3>Change Password</h3>
<p>Update your account password to keep your account secure.</p>
<form method="POST" action="{{ url_for('profile') }}" class="password-form">
<!-- Hidden email field to maintain current email -->
<input type="hidden" name="email" value="{{ user.email }}">
<div class="form-group">
<label for="current_password">Current Password</label>
<input type="password" id="current_password" name="current_password" class="form-control" required>
<small>Enter your current password to verify your identity.</small>
</div>
<div class="form-group">
<label for="new_password">New Password</label>
<input type="password" id="new_password" name="new_password" class="form-control" required>
<small>Choose a strong password with at least 8 characters.</small>
</div>
<div class="form-group">
<label for="confirm_password">Confirm New Password</label>
<input type="password" id="confirm_password" name="confirm_password" class="form-control" required>
<small>Re-enter your new password to confirm.</small>
</div>
<div class="form-group">
<button type="submit" class="btn btn-warning">Change Password</button>
</div>
</form>
</div>
<div class="security-section">
<h2>Security Settings</h2>
<div class="security-card">
<h3>Two-Factor Authentication</h3>
{% if user.two_factor_enabled %}
<p>Two-factor authentication is <strong>enabled</strong> for your account. This adds an extra layer of security by requiring a code from your authenticator app when logging in.</p>
<form method="POST" action="{{ url_for('disable_2fa') }}" class="disable-2fa-form" onsubmit="return confirm('Are you sure you want to disable two-factor authentication? This will make your account less secure.');">
<div class="form-group">
<label for="password_disable">Enter your password to disable 2FA:</label>
<input type="password" id="password_disable" name="password" class="form-control" required>
<div class="avatar-controls">
<h4>Change Avatar</h4>
<div class="avatar-options">
<div class="avatar-option">
<input type="radio" id="avatar-default" name="avatar-type" value="default" checked>
<label for="avatar-default">Default Avatar</label>
</div>
<button type="submit" class="btn btn-danger">Disable Two-Factor Authentication</button>
</form>
{% else %}
<p>Two-factor authentication is <strong>not enabled</strong> for your account. We strongly recommend enabling it to protect your account.</p>
<p>With 2FA enabled, you'll need both your password and a code from your phone to log in.</p>
<div class="avatar-option">
<input type="radio" id="avatar-upload" name="avatar-type" value="upload">
<label for="avatar-upload">Upload Image</label>
</div>
<div class="avatar-option">
<input type="radio" id="avatar-url" name="avatar-type" value="url">
<label for="avatar-url">Custom URL</label>
</div>
</div>
<a href="{{ url_for('setup_2fa') }}" class="btn btn-success">Enable Two-Factor Authentication</a>
{% endif %}
<!-- Default Avatar Options -->
<div id="default-avatar-options" class="avatar-option-panel">
<p class="help-text">Your default avatar is generated based on your username.</p>
<button type="button" class="btn btn-secondary" onclick="resetAvatar()">Use Default Avatar</button>
</div>
<!-- Upload Avatar Options -->
<div id="upload-avatar-options" class="avatar-option-panel" style="display: none;">
<form method="POST" action="{{ url_for('upload_avatar') }}" enctype="multipart/form-data" class="avatar-upload-form">
<div class="form-group">
<label for="avatar_file" class="file-upload-label">
<span class="upload-icon">📁</span>
<span class="upload-text">Choose an image file</span>
<span class="file-name" id="file-name">No file selected</span>
</label>
<input type="file" id="avatar_file" name="avatar_file" class="file-input"
accept="image/jpeg,image/jpg,image/png,image/gif,image/webp" required>
<small>Max file size: 5MB. Supported formats: JPG, PNG, GIF, WebP</small>
</div>
<div class="upload-preview" id="upload-preview" style="display: none;">
<img id="upload-preview-img" src="" alt="Preview">
</div>
<button type="submit" class="btn btn-primary" id="upload-btn" disabled>Upload Avatar</button>
</form>
</div>
<!-- URL Avatar Options -->
<div id="url-avatar-options" class="avatar-option-panel" style="display: none;">
<form method="POST" action="{{ url_for('update_avatar') }}" class="avatar-form">
<div class="form-group">
<label for="avatar_url">Avatar URL</label>
<input type="url" id="avatar_url" name="avatar_url" class="form-control"
placeholder="https://example.com/avatar.jpg"
value="{{ user.avatar_url or '' }}">
<small>Enter a direct link to an image (PNG, JPG, GIF)</small>
</div>
<button type="submit" class="btn btn-primary">Update Avatar</button>
</form>
</div>
</div>
</div>
<!-- Account Info Card -->
<div class="profile-card">
<h3>Account Information</h3>
<div class="info-grid">
<div class="info-item">
<span class="info-label">Username</span>
<span class="info-value">{{ user.username }}</span>
</div>
<div class="info-item">
<span class="info-label">Email</span>
<span class="info-value">{{ user.email }}</span>
</div>
<div class="info-item">
<span class="info-label">Role</span>
<span class="info-value">{{ user.role.value if user.role else 'Team Member' }}</span>
</div>
<div class="info-item">
<span class="info-label">Company</span>
<span class="info-value">{{ user.company.name if user.company else 'N/A' }}</span>
</div>
<div class="info-item">
<span class="info-label">Team</span>
<span class="info-value">{{ user.team.name if user.team else 'No Team' }}</span>
</div>
<div class="info-item">
<span class="info-label">Member Since</span>
<span class="info-value">{{ user.created_at.strftime('%B %d, %Y') }}</span>
</div>
</div>
</div>
<!-- Email Settings Card -->
<div class="profile-card">
<h3>Email Settings</h3>
<form method="POST" action="{{ url_for('profile') }}" class="profile-form">
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" id="email" name="email" class="form-control" value="{{ user.email }}" required>
<small>This email address is used for account verification and notifications.</small>
</div>
<button type="submit" class="btn btn-primary">Update Email</button>
</form>
</div>
<!-- Password Settings Card -->
<div class="profile-card">
<h3>Change Password</h3>
<form method="POST" action="{{ url_for('profile') }}" class="password-form">
<!-- Hidden email field to maintain current email -->
<input type="hidden" name="email" value="{{ user.email }}">
<div class="form-group">
<label for="current_password">Current Password</label>
<input type="password" id="current_password" name="current_password" class="form-control" required>
</div>
<div class="form-group">
<label for="new_password">New Password</label>
<input type="password" id="new_password" name="new_password" class="form-control" required>
<small>Choose a strong password with at least 8 characters.</small>
</div>
<div class="form-group">
<label for="confirm_password">Confirm New Password</label>
<input type="password" id="confirm_password" name="confirm_password" class="form-control" required>
</div>
<button type="submit" class="btn btn-warning">Change Password</button>
</form>
</div>
<!-- Security Settings Card -->
<div class="profile-card security-card">
<h3>Two-Factor Authentication</h3>
<div class="security-status">
{% if user.two_factor_enabled %}
<div class="status-badge enabled">
<span class="status-icon">✅</span>
<span>Enabled</span>
</div>
<p>Two-factor authentication adds an extra layer of security to your account.</p>
<form method="POST" action="{{ url_for('disable_2fa') }}" class="disable-2fa-form"
onsubmit="return confirm('Are you sure you want to disable two-factor authentication?');">
<div class="form-group">
<label for="password_disable">Enter your password to disable 2FA:</label>
<input type="password" id="password_disable" name="password" class="form-control" required>
</div>
<button type="submit" class="btn btn-danger">Disable 2FA</button>
</form>
{% else %}
<div class="status-badge disabled">
<span class="status-icon">❌</span>
<span>Disabled</span>
</div>
<p>Enable two-factor authentication to add an extra layer of security to your account.</p>
<a href="{{ url_for('setup_2fa') }}" class="btn btn-success">Enable 2FA</a>
{% endif %}
</div>
</div>
</div>
</div>
<style>
.status.enabled {
color: #28a745;
font-weight: bold;
.profile-container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
.status.disabled {
color: #dc3545;
font-weight: bold;
.profile-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}
.profile-card {
background: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 0.5rem;
background: white;
border: 1px solid #e9ecef;
border-radius: 8px;
padding: 1.5rem;
margin: 1.5rem 0;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.profile-card h3 {
color: #007bff;
margin-bottom: 1rem;
}
.profile-card p {
color: #6c757d;
color: #333;
margin-bottom: 1.5rem;
font-size: 1.25rem;
font-weight: 600;
padding-bottom: 0.75rem;
border-bottom: 1px solid #e9ecef;
}
.security-section {
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid #dee2e6;
.profile-card h4 {
color: #495057;
font-size: 1rem;
font-weight: 600;
margin: 1.5rem 0 1rem;
}
.security-card {
background: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 0.5rem;
padding: 1.5rem;
margin: 1rem 0;
/* Avatar Section */
.avatar-card {
grid-column: span 2;
}
.security-card h3 {
color: #007bff;
.avatar-section {
display: flex;
align-items: center;
gap: 2rem;
margin-bottom: 2rem;
}
.profile-avatar {
width: 128px;
height: 128px;
border-radius: 50%;
object-fit: cover;
border: 4px solid #e9ecef;
}
.avatar-info {
flex: 1;
}
.avatar-info p {
margin: 0.25rem 0;
}
.text-muted {
color: #6c757d;
font-size: 0.9rem;
}
.avatar-controls {
border-top: 1px solid #e9ecef;
padding-top: 1.5rem;
}
.avatar-options {
display: flex;
gap: 2rem;
margin-bottom: 1rem;
}
.avatar-option {
display: flex;
align-items: center;
gap: 0.5rem;
}
.avatar-option input[type="radio"] {
cursor: pointer;
}
.avatar-option label {
cursor: pointer;
margin-bottom: 0;
}
.avatar-option-panel {
margin-top: 1rem;
padding: 1rem;
background: #f8f9fa;
border-radius: 4px;
}
.help-text {
color: #6c757d;
font-size: 0.9rem;
margin-bottom: 1rem;
}
/* File Upload Styles */
.file-upload-label {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem;
border: 2px dashed #dee2e6;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
background: #f8f9fa;
}
.file-upload-label:hover {
border-color: #007bff;
background: #e7f3ff;
}
.upload-icon {
font-size: 1.5rem;
}
.upload-text {
flex: 1;
font-weight: 500;
color: #495057;
}
.file-name {
font-size: 0.875rem;
color: #6c757d;
}
.file-input {
display: none;
}
.upload-preview {
margin: 1rem 0;
text-align: center;
}
.upload-preview img {
max-width: 200px;
max-height: 200px;
border-radius: 8px;
border: 2px solid #dee2e6;
}
/* Account Info Grid */
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
.info-item {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.info-label {
font-size: 0.875rem;
color: #6c757d;
font-weight: 500;
}
.info-value {
font-size: 1rem;
color: #333;
}
/* Security Status */
.security-status {
text-align: center;
}
.status-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
border-radius: 4px;
font-weight: 600;
margin-bottom: 1rem;
}
.status-badge.enabled {
background: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.status-badge.disabled {
background: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.status-icon {
font-size: 1.25rem;
}
.disable-2fa-form {
margin-top: 1rem;
padding: 1rem;
background: #fff3cd;
border: 1px solid #ffeaa7;
border-radius: 0.25rem;
border-radius: 4px;
}
.btn {
display: inline-block;
padding: 0.75rem 1.5rem;
margin: 0.5rem 0;
border: none;
border-radius: 0.25rem;
text-decoration: none;
cursor: pointer;
font-size: 1rem;
transition: background-color 0.2s;
}
/* Button styles now centralized in main style.css */
/* Form Styles */
.form-group {
margin-bottom: 1.5rem;
}
@@ -183,9 +424,8 @@
width: 100%;
padding: 0.75rem;
border: 1px solid #ced4da;
border-radius: 0.25rem;
border-radius: 4px;
font-size: 1rem;
line-height: 1.5;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@@ -201,5 +441,146 @@
color: #6c757d;
font-size: 0.875rem;
}
/* Mobile Responsiveness */
@media (max-width: 768px) {
.profile-grid {
grid-template-columns: 1fr;
}
.avatar-card {
grid-column: span 1;
}
.avatar-section {
flex-direction: column;
text-align: center;
}
.avatar-options {
justify-content: center;
}
}
</style>
<script>
// Avatar type toggle
document.addEventListener('DOMContentLoaded', function() {
const avatarTypeRadios = document.querySelectorAll('input[name="avatar-type"]');
const defaultPanel = document.getElementById('default-avatar-options');
const uploadPanel = document.getElementById('upload-avatar-options');
const urlPanel = document.getElementById('url-avatar-options');
const avatarUrlInput = document.getElementById('avatar_url');
const avatarPreview = document.getElementById('avatar-preview');
const fileInput = document.getElementById('avatar_file');
const fileName = document.getElementById('file-name');
const uploadPreview = document.getElementById('upload-preview');
const uploadPreviewImg = document.getElementById('upload-preview-img');
const uploadBtn = document.getElementById('upload-btn');
avatarTypeRadios.forEach(radio => {
radio.addEventListener('change', function() {
// Hide all panels
defaultPanel.style.display = 'none';
uploadPanel.style.display = 'none';
urlPanel.style.display = 'none';
// Show selected panel
if (this.value === 'default') {
defaultPanel.style.display = 'block';
} else if (this.value === 'upload') {
uploadPanel.style.display = 'block';
} else if (this.value === 'url') {
urlPanel.style.display = 'block';
}
});
});
// File input handling
fileInput.addEventListener('change', function(e) {
const file = e.target.files[0];
if (file) {
// Update file name display
fileName.textContent = file.name;
// Validate file size (5MB max)
if (file.size > 5 * 1024 * 1024) {
alert('File size must be less than 5MB');
this.value = '';
fileName.textContent = 'No file selected';
uploadPreview.style.display = 'none';
uploadBtn.disabled = true;
return;
}
// Validate file type
const validTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp'];
if (!validTypes.includes(file.type)) {
alert('Please select a valid image file (JPG, PNG, GIF, or WebP)');
this.value = '';
fileName.textContent = 'No file selected';
uploadPreview.style.display = 'none';
uploadBtn.disabled = true;
return;
}
// Preview the image
const reader = new FileReader();
reader.onload = function(e) {
uploadPreviewImg.src = e.target.result;
uploadPreview.style.display = 'block';
uploadBtn.disabled = false;
};
reader.readAsDataURL(file);
} else {
fileName.textContent = 'No file selected';
uploadPreview.style.display = 'none';
uploadBtn.disabled = true;
}
});
// Preview avatar URL
avatarUrlInput.addEventListener('input', function() {
const url = this.value.trim();
if (url && isValidUrl(url)) {
// Test if image loads
const img = new Image();
img.onload = function() {
avatarPreview.src = url;
};
img.onerror = function() {
// Keep current avatar if URL is invalid
avatarPreview.src = '{{ user.get_avatar_url(128) }}';
};
img.src = url;
}
});
});
function isValidUrl(string) {
try {
new URL(string);
return true;
} catch (_) {
return false;
}
}
function resetAvatar() {
if (confirm('This will remove your custom avatar and use the default generated avatar. Continue?')) {
const form = document.createElement('form');
form.method = 'POST';
form.action = '{{ url_for("update_avatar") }}';
const input = document.createElement('input');
input.type = 'hidden';
input.name = 'avatar_url';
input.value = '';
form.appendChild(input);
document.body.appendChild(form);
form.submit();
}
}
</script>
{% endblock %}

197
templates/task_modal.html
View File

@@ -135,6 +135,24 @@
<button type="button" class="btn btn-sm btn-secondary" onclick="addSubtask()">+ Add Subtask</button>
</div>
</form>
<!-- Comments Section (outside form) -->
<div class="form-section" id="comments-section" style="display: none;">
<h3>💬 Comments</h3>
<div id="comments-container">
<!-- Comments will be populated here -->
</div>
<div class="comment-form">
<textarea id="new-comment" placeholder="Add a comment..." rows="2"></textarea>
<div class="comment-form-actions">
<select id="comment-visibility" class="comment-visibility-select" style="display: none;">
<option value="COMPANY">🏢 Company</option>
<option value="TEAM">👥 Team Only</option>
</select>
<button type="button" class="btn btn-sm btn-primary" onclick="addComment()">Post Comment</button>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" onclick="closeTaskModal()">Cancel</button>
@@ -540,4 +558,183 @@ document.addEventListener('DOMContentLoaded', function() {
padding: 0.15rem 0.3rem;
}
}
/* Comments Section Styles */
#comments-container {
max-height: 300px;
overflow-y: auto;
margin-bottom: 1rem;
}
.no-comments {
text-align: center;
color: #6c757d;
font-style: italic;
padding: 2rem;
}
.comment-edited {
font-size: 0.75rem;
color: #6c757d;
font-style: italic;
}
.comment-item {
background: #f8f9fa;
border-radius: 8px;
padding: 0.75rem;
margin-bottom: 0.5rem;
border: 1px solid #e9ecef;
}
.comment-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.5rem;
}
.comment-author-info {
display: flex;
align-items: center;
gap: 0.5rem;
}
.comment-author-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
object-fit: cover;
}
.comment-author-details {
display: flex;
flex-direction: column;
}
.comment-author {
font-weight: 600;
font-size: 0.85rem;
color: #333;
}
.comment-time {
font-size: 0.75rem;
color: #6c757d;
}
.comment-visibility-badge {
font-size: 0.7rem;
padding: 0.2rem 0.4rem;
border-radius: 4px;
background: #e9ecef;
color: #6c757d;
}
.comment-visibility-badge.team {
background: #fff3cd;
color: #856404;
}
.comment-content {
font-size: 0.85rem;
line-height: 1.5;
color: #495057;
white-space: pre-wrap;
}
.comment-actions {
display: flex;
gap: 0.5rem;
margin-top: 0.5rem;
}
.comment-action {
font-size: 0.75rem;
color: #6c757d;
background: none;
border: none;
cursor: pointer;
padding: 0.2rem 0.4rem;
border-radius: 4px;
transition: background-color 0.2s;
}
.comment-action:hover {
background: #e9ecef;
}
.comment-form {
background: #f8f9fa;
border-radius: 8px;
padding: 0.75rem;
border: 1px solid #e9ecef;
}
#new-comment {
width: 100%;
padding: 0.5rem;
border: 1px solid #ddd;
border-radius: 4px;
resize: vertical;
min-height: 60px;
font-size: 0.85rem;
}
.comment-form-actions {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 0.5rem;
}
.comment-visibility-select {
padding: 0.25rem 0.5rem;
font-size: 0.8rem;
border: 1px solid #ddd;
border-radius: 4px;
background: white;
}
/* Edit comment form */
.comment-edit-form {
margin-top: 0.5rem;
display: none;
}
.comment-edit-textarea {
width: 100%;
padding: 0.5rem;
border: 1px solid #ddd;
border-radius: 4px;
resize: vertical;
min-height: 60px;
font-size: 0.85rem;
margin-bottom: 0.5rem;
}
.comment-edit-actions {
display: flex;
gap: 0.5rem;
}
/* Reply form */
.comment-reply-form {
margin-top: 0.5rem;
padding-left: 2rem;
display: none;
}
.comment-replies {
margin-top: 0.5rem;
padding-left: 2rem;
}
.comment-reply {
background: white;
border-radius: 6px;
padding: 0.5rem;
margin-bottom: 0.3rem;
border: 1px solid #e9ecef;
}
</style>

414
templates/unified_task_management.html
View File

@@ -6,7 +6,6 @@
<div class="management-header task-header">
<h1>📋 Task Management</h1>
<div class="management-controls task-controls">
<!-- Smart Search -->
<div class="smart-search-container">
<div class="smart-search-box">
@@ -234,16 +233,64 @@
gap: 1rem;
align-items: center;
flex-wrap: wrap;
width: 100%;
}
.task-controls .smart-search-container {
flex: 1;
min-width: 300px;
max-width: 600px;
margin-bottom: 0; /* Remove margin to align with buttons */
}
.task-controls .management-actions {
flex-shrink: 0;
display: flex;
gap: 0.5rem;
align-items: center;
}
/* Ensure all buttons and search input have same height */
.smart-search-input,
.task-controls .btn {
height: 38px; /* Standard height for consistency */
}
.task-controls .btn {
padding: 0.5rem 1rem;
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap; /* Prevent button text from wrapping */
}
/* Responsive adjustments */
@media (max-width: 992px) {
.task-controls {
flex-direction: column;
align-items: stretch;
}
.task-controls .smart-search-container {
max-width: 100%;
margin-bottom: 0.5rem;
}
.task-controls .management-actions {
justify-content: center;
}
}
@media (max-width: 576px) {
.task-controls .management-actions {
flex-wrap: wrap;
gap: 0.25rem;
}
.task-controls .btn {
font-size: 0.875rem;
padding: 0.4rem 0.8rem;
}
}
/* Subtask progress styles */
@@ -371,7 +418,6 @@
/* Task Action Buttons */
.task-actions {
margin-top: 0.5rem;
display: flex;
justify-content: flex-end;
gap: 0.25rem;
@@ -487,6 +533,17 @@
.task-assignee {
font-weight: 500;
display: flex;
align-items: center;
gap: 0.25rem;
}
.task-assignee-avatar {
width: 20px;
height: 20px;
border-radius: 50%;
object-fit: cover;
border: 1px solid #e9ecef;
}
.task-due-date {
@@ -1022,6 +1079,29 @@ class UnifiedTaskManager {
await this.loadTasks();
}
getUserAvatar(userId) {
// Find user in team members
const user = window.teamMembers.find(member => member.id === userId);
if (user && user.avatar_url) {
return user.avatar_url;
}
// Generate default avatar using DiceBear API
const username = user ? user.username : `user_${userId}`;
const hash = this.hashCode(username + '_' + userId);
return `https://api.dicebear.com/7.x/initials/svg?seed=${hash}&size=24&backgroundColor=ffffff`;
}
hashCode(str) {
let hash = 0;
for (let i = 0; i < str.length; i++) {
const char = str.charCodeAt(i);
hash = ((hash << 5) - hash) + char;
hash = hash & hash; // Convert to 32bit integer
}
return Math.abs(hash).toString(16);
}
setupEventListeners() {
// Smart Search
this.setupSmartSearch();
@@ -1568,7 +1648,10 @@ class UnifiedTaskManager {
</div>
${task.project_name ? `<div class="task-project">${task.project_code} - ${task.project_name}</div>` : ''}
<div class="task-meta">
<span class="task-assignee">${task.assigned_to_name || 'Unassigned'}</span>
<span class="task-assignee">
${task.assigned_to_id ? `<img src="${this.getUserAvatar(task.assigned_to_id)}" alt="${task.assigned_to_name}" class="task-assignee-avatar">` : ''}
${task.assigned_to_name || 'Unassigned'}
</span>
${dueDate ? `<span class="task-due-date ${isOverdue ? 'overdue' : ''}">${formatUserDate(task.due_date)}</span>` : ''}
</div>
${task.subtasks && task.subtasks.length > 0 ? this.renderSubtaskProgress(task.subtasks) : ''}
@@ -1769,6 +1852,10 @@ class UnifiedTaskManager {
// Initialize subtasks
initializeSubtasks(task.id);
// Show comments section and load comments
document.getElementById('comments-section').style.display = 'block';
await this.loadComments(task.id);
} else {
document.getElementById('modal-title').textContent = 'Add New Task';
document.getElementById('task-form').reset();
@@ -1780,6 +1867,9 @@ class UnifiedTaskManager {
// Initialize empty subtasks
initializeSubtasks(null);
// Hide comments section for new tasks
document.getElementById('comments-section').style.display = 'none';
}
modal.style.display = 'block';
@@ -1988,6 +2078,320 @@ class UnifiedTaskManager {
}
}
}
// Comment management methods
async loadComments(taskId) {
try {
const response = await fetch(`/api/tasks/${taskId}/comments`);
const data = await response.json();
if (data.success) {
this.renderComments(data.comments);
// Show/hide team visibility option based on company settings
const visibilitySelect = document.getElementById('comment-visibility');
if (data.allow_team_visibility) {
visibilitySelect.style.display = 'inline-block';
} else {
visibilitySelect.style.display = 'none';
}
} else {
console.error('Failed to load comments:', data.message);
}
} catch (error) {
console.error('Error loading comments:', error);
}
}
renderComments(comments) {
const container = document.getElementById('comments-container');
container.innerHTML = '';
if (comments.length === 0) {
container.innerHTML = '<p class="no-comments">No comments yet. Be the first to comment!</p>';
return;
}
comments.forEach(comment => {
const commentElement = this.createCommentElement(comment);
container.appendChild(commentElement);
});
}
createCommentElement(comment) {
const element = document.createElement('div');
element.className = 'comment-item';
element.dataset.commentId = comment.id;
const visibilityBadge = comment.visibility === 'Team' ?
'<span class="comment-visibility-badge team">👥 Team</span>' : '';
const editedText = comment.is_edited ?
` <span class="comment-edited">(edited)</span>` : '';
element.innerHTML = `
<div class="comment-header">
<div class="comment-author-info">
<img src="${comment.author.avatar_url}" alt="${comment.author.username}" class="comment-author-avatar">
<div class="comment-author-details">
<span class="comment-author">${comment.author.username}</span>
<span class="comment-time">${this.formatRelativeTime(comment.created_at)}${editedText}</span>
</div>
</div>
${visibilityBadge}
</div>
<div class="comment-content">${this.escapeHtml(comment.content)}</div>
<div class="comment-actions">
${comment.can_edit ? '<button class="comment-action" onclick="taskManager.editComment(' + comment.id + ')">Edit</button>' : ''}
${comment.can_delete ? '<button class="comment-action" onclick="taskManager.deleteComment(' + comment.id + ')">Delete</button>' : ''}
<button class="comment-action" onclick="taskManager.replyToComment(${comment.id})">Reply</button>
</div>
<div class="comment-edit-form" id="comment-edit-${comment.id}" style="display: none;">
<textarea class="comment-edit-textarea">${this.escapeHtml(comment.content)}</textarea>
<div class="comment-edit-actions">
<button class="btn btn-sm btn-primary" onclick="taskManager.saveCommentEdit(${comment.id})">Save</button>
<button class="btn btn-sm btn-secondary" onclick="taskManager.cancelCommentEdit(${comment.id})">Cancel</button>
</div>
</div>
<div class="comment-reply-form" id="comment-reply-${comment.id}" style="display: none;">
<textarea placeholder="Write a reply..." rows="2"></textarea>
<div class="comment-edit-actions">
<button class="btn btn-sm btn-primary" onclick="taskManager.saveReply(${comment.id})">Reply</button>
<button class="btn btn-sm btn-secondary" onclick="taskManager.cancelReply(${comment.id})">Cancel</button>
</div>
</div>
`;
// Add replies if any
if (comment.replies && comment.replies.length > 0) {
const repliesContainer = document.createElement('div');
repliesContainer.className = 'comment-replies';
comment.replies.forEach(reply => {
const replyElement = this.createReplyElement(reply);
repliesContainer.appendChild(replyElement);
});
element.appendChild(repliesContainer);
}
return element;
}
createReplyElement(reply) {
const element = document.createElement('div');
element.className = 'comment-reply';
element.dataset.commentId = reply.id;
const editedText = reply.is_edited ?
` <span class="comment-edited">(edited)</span>` : '';
element.innerHTML = `
<div class="comment-header">
<div class="comment-author-info">
<img src="${reply.author.avatar_url}" alt="${reply.author.username}" class="comment-author-avatar">
<div class="comment-author-details">
<span class="comment-author">${reply.author.username}</span>
<span class="comment-time">${this.formatRelativeTime(reply.created_at)}${editedText}</span>
</div>
</div>
</div>
<div class="comment-content">${this.escapeHtml(reply.content)}</div>
<div class="comment-actions">
${reply.can_edit ? '<button class="comment-action" onclick="taskManager.editComment(' + reply.id + ')">Edit</button>' : ''}
${reply.can_delete ? '<button class="comment-action" onclick="taskManager.deleteComment(' + reply.id + ')">Delete</button>' : ''}
</div>
`;
return element;
}
async addComment() {
const taskId = document.getElementById('task-id').value;
const contentTextarea = document.getElementById('new-comment');
const content = contentTextarea.value.trim();
const visibility = document.getElementById('comment-visibility').value;
if (!taskId || !content) {
alert('Please enter a comment');
return;
}
try {
const response = await fetch(`/api/tasks/${taskId}/comments`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
content: content,
visibility: visibility
})
});
const data = await response.json();
if (data.success) {
contentTextarea.value = '';
await this.loadComments(taskId);
} else {
alert('Failed to post comment: ' + data.message);
}
} catch (error) {
console.error('Error posting comment:', error);
alert('Failed to post comment: ' + error.message);
}
}
editComment(commentId) {
const commentElement = document.querySelector(`[data-comment-id="${commentId}"]`);
const editForm = document.getElementById(`comment-edit-${commentId}`);
const content = commentElement.querySelector('.comment-content');
content.style.display = 'none';
editForm.style.display = 'block';
}
cancelCommentEdit(commentId) {
const editForm = document.getElementById(`comment-edit-${commentId}`);
const content = document.querySelector(`[data-comment-id="${commentId}"] .comment-content`);
content.style.display = 'block';
editForm.style.display = 'none';
}
async saveCommentEdit(commentId) {
const editForm = document.getElementById(`comment-edit-${commentId}`);
const textarea = editForm.querySelector('textarea');
const content = textarea.value.trim();
if (!content) {
alert('Comment cannot be empty');
return;
}
try {
const response = await fetch(`/api/comments/${commentId}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
content: content
})
});
const data = await response.json();
if (data.success) {
const taskId = document.getElementById('task-id').value;
await this.loadComments(taskId);
} else {
alert('Failed to update comment: ' + data.message);
}
} catch (error) {
console.error('Error updating comment:', error);
alert('Failed to update comment: ' + error.message);
}
}
async deleteComment(commentId) {
if (!confirm('Are you sure you want to delete this comment?')) {
return;
}
try {
const response = await fetch(`/api/comments/${commentId}`, {
method: 'DELETE'
});
const data = await response.json();
if (data.success) {
const taskId = document.getElementById('task-id').value;
await this.loadComments(taskId);
} else {
alert('Failed to delete comment: ' + data.message);
}
} catch (error) {
console.error('Error deleting comment:', error);
alert('Failed to delete comment: ' + error.message);
}
}
replyToComment(commentId) {
const replyForm = document.getElementById(`comment-reply-${commentId}`);
replyForm.style.display = 'block';
replyForm.querySelector('textarea').focus();
}
cancelReply(commentId) {
const replyForm = document.getElementById(`comment-reply-${commentId}`);
replyForm.style.display = 'none';
replyForm.querySelector('textarea').value = '';
}
async saveReply(parentCommentId) {
const taskId = document.getElementById('task-id').value;
const replyForm = document.getElementById(`comment-reply-${parentCommentId}`);
const content = replyForm.querySelector('textarea').value.trim();
if (!content) {
alert('Please enter a reply');
return;
}
try {
const response = await fetch(`/api/tasks/${taskId}/comments`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
content: content,
parent_comment_id: parentCommentId,
visibility: 'COMPANY' // Replies inherit parent visibility
})
});
const data = await response.json();
if (data.success) {
replyForm.style.display = 'none';
replyForm.querySelector('textarea').value = '';
await this.loadComments(taskId);
} else {
alert('Failed to post reply: ' + data.message);
}
} catch (error) {
console.error('Error posting reply:', error);
alert('Failed to post reply: ' + error.message);
}
}
formatRelativeTime(dateString) {
const date = new Date(dateString);
const now = new Date();
const diffMs = now - date;
const diffSecs = Math.floor(diffMs / 1000);
const diffMins = Math.floor(diffSecs / 60);
const diffHours = Math.floor(diffMins / 60);
const diffDays = Math.floor(diffHours / 24);
if (diffSecs < 60) {
return 'just now';
} else if (diffMins < 60) {
return `${diffMins} minute${diffMins > 1 ? 's' : ''} ago`;
} else if (diffHours < 24) {
return `${diffHours} hour${diffHours > 1 ? 's' : ''} ago`;
} else if (diffDays < 7) {
return `${diffDays} day${diffDays > 1 ? 's' : ''} ago`;
} else {
return date.toLocaleDateString();
}
}
escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
}
// Global functions
@@ -2011,6 +2415,10 @@ function deleteTask() {
taskManager.deleteTask();
}
function addComment() {
taskManager.addComment();
}
function addSubtask() {
// TODO: Implement subtask functionality
}