feat: add projects page JavaScript functionality
Implement complete JavaScript functionality for the projects management page: - State management for projects array and current editing project - loadProjects() - Fetch projects from /api/projects - renderProjects(filter) - Render project cards with search/filter support - setupEventListeners() - Wire up all interactive elements - openProject(projectId) - Navigate to sessions page for selected project - openProjectModal(project) - Open modal for create/edit operations - closeProjectModal() - Close modal and reset form - handleProjectSubmit(e) - Validate and save project data - showProjectMenu(projectId, event) - Display context menu - deleteProject(projectId) - Soft delete with confirmation - openRecycleBinModal() - Display deleted projects - restoreProject(projectId) - Restore from recycle bin - permanentDeleteProject(projectId) - Delete forever with confirmation - escapeHtml(text) - XSS prevention for user-generated content - formatDate(dateString) - Human-readable relative timestamps - showToast(message, type) - Toast notifications with animations Features: - Async/await for all API calls - Comprehensive error handling - Real-time search filtering - Context menu for project actions - Responsive modal system - Toast notifications for user feedback - Keyboard shortcuts (Escape to close) - Click outside to close menus/modals Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
uroma
648
public/claude-ide/projects.js
Normal file
648
public/claude-ide/projects.js
Normal file
@@ -0,0 +1,648 @@
|
||||
/**
|
||||
* Projects Page JavaScript
|
||||
* Handles project management, including CRUD operations, search, and recycle bin
|
||||
*/
|
||||
|
||||
// === State Management ===
|
||||
let projects = [];
|
||||
let currentEditingProject = null;
|
||||
let currentContextMenuProjectId = null;
|
||||
|
||||
// === DOM Elements ===
|
||||
const projectsGrid = document.getElementById('projects-grid');
|
||||
const emptyState = document.getElementById('empty-state');
|
||||
const searchInput = document.getElementById('search-input');
|
||||
const newProjectBtn = document.getElementById('new-project-btn');
|
||||
const emptyStateNewProjectBtn = document.getElementById('empty-state-new-project-btn');
|
||||
const recycleBinBtn = document.getElementById('recycle-bin-btn');
|
||||
const projectModal = document.getElementById('project-modal');
|
||||
const modalTitle = document.getElementById('modal-title');
|
||||
const projectForm = document.getElementById('project-form');
|
||||
const closeModalBtn = document.getElementById('close-modal-btn');
|
||||
const cancelModalBtn = document.getElementById('cancel-modal-btn');
|
||||
const recycleBinModal = document.getElementById('recycle-bin-modal');
|
||||
const closeRecycleBinBtn = document.getElementById('close-recycle-bin-btn');
|
||||
const recycleBinContent = document.getElementById('recycle-bin-content');
|
||||
const contextMenu = document.getElementById('context-menu');
|
||||
|
||||
// === Initialization ===
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
await loadProjects();
|
||||
setupEventListeners();
|
||||
});
|
||||
|
||||
// === Event Listeners Setup ===
|
||||
function setupEventListeners() {
|
||||
// Search functionality
|
||||
searchInput.addEventListener('input', (e) => {
|
||||
renderProjects(e.target.value);
|
||||
});
|
||||
|
||||
// Create project buttons
|
||||
newProjectBtn.addEventListener('click', () => openProjectModal());
|
||||
emptyStateNewProjectBtn.addEventListener('click', () => openProjectModal());
|
||||
|
||||
// Modal close buttons
|
||||
closeModalBtn.addEventListener('click', closeProjectModal);
|
||||
cancelModalBtn.addEventListener('click', closeProjectModal);
|
||||
|
||||
// Project form submission
|
||||
projectForm.addEventListener('submit', handleProjectSubmit);
|
||||
|
||||
// Recycle bin
|
||||
recycleBinBtn.addEventListener('click', openRecycleBinModal);
|
||||
closeRecycleBinBtn.addEventListener('click', () => {
|
||||
recycleBinModal.style.display = 'none';
|
||||
});
|
||||
|
||||
// Context menu actions
|
||||
document.getElementById('ctx-open').addEventListener('click', () => {
|
||||
if (currentContextMenuProjectId) {
|
||||
openProject(currentContextMenuProjectId);
|
||||
hideContextMenu();
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('ctx-edit').addEventListener('click', () => {
|
||||
if (currentContextMenuProjectId) {
|
||||
const project = projects.find(p => p.id === currentContextMenuProjectId);
|
||||
if (project) {
|
||||
openProjectModal(project);
|
||||
hideContextMenu();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('ctx-delete').addEventListener('click', () => {
|
||||
if (currentContextMenuProjectId) {
|
||||
deleteProject(currentContextMenuProjectId);
|
||||
hideContextMenu();
|
||||
}
|
||||
});
|
||||
|
||||
// Close context menu on click outside
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!contextMenu.contains(e.target)) {
|
||||
hideContextMenu();
|
||||
}
|
||||
});
|
||||
|
||||
// Close modals on escape key
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape') {
|
||||
closeProjectModal();
|
||||
recycleBinModal.style.display = 'none';
|
||||
hideContextMenu();
|
||||
}
|
||||
});
|
||||
|
||||
// Close modals on backdrop click
|
||||
projectModal.addEventListener('click', (e) => {
|
||||
if (e.target === projectModal) {
|
||||
closeProjectModal();
|
||||
}
|
||||
});
|
||||
|
||||
recycleBinModal.addEventListener('click', (e) => {
|
||||
if (e.target === recycleBinModal) {
|
||||
recycleBinModal.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// === API Functions ===
|
||||
|
||||
/**
|
||||
* Load projects from the server
|
||||
*/
|
||||
async function loadProjects() {
|
||||
try {
|
||||
projectsGrid.innerHTML = '<div class="loading">Loading projects...</div>';
|
||||
|
||||
const response = await fetch('/api/projects');
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
projects = data.projects || [];
|
||||
|
||||
renderProjects();
|
||||
} catch (error) {
|
||||
console.error('Error loading projects:', error);
|
||||
showToast('Failed to load projects', 'error');
|
||||
projectsGrid.innerHTML = `
|
||||
<div class="empty-state">
|
||||
<h2>Error loading projects</h2>
|
||||
<p>${escapeHtml(error.message)}</p>
|
||||
<button onclick="loadProjects()" class="btn-primary">Retry</button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Create or update a project
|
||||
*/
|
||||
async function saveProject(projectData) {
|
||||
try {
|
||||
const url = currentEditingProject
|
||||
? `/api/projects/${currentEditingProject.id}`
|
||||
: '/api/projects';
|
||||
|
||||
const method = currentEditingProject ? 'PUT' : 'POST';
|
||||
|
||||
const response = await fetch(url, {
|
||||
method,
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(projectData)
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json();
|
||||
throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (currentEditingProject) {
|
||||
// Update existing project in the array
|
||||
const index = projects.findIndex(p => p.id === currentEditingProject.id);
|
||||
if (index !== -1) {
|
||||
projects[index] = result.project;
|
||||
}
|
||||
showToast('Project updated successfully', 'success');
|
||||
} else {
|
||||
// Add new project to the array
|
||||
projects.push(result.project);
|
||||
showToast('Project created successfully', 'success');
|
||||
}
|
||||
|
||||
renderProjects(searchInput.value);
|
||||
closeProjectModal();
|
||||
} catch (error) {
|
||||
console.error('Error saving project:', error);
|
||||
showToast(error.message || 'Failed to save project', 'error');
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Soft delete a project
|
||||
*/
|
||||
async function deleteProject(projectId) {
|
||||
if (!confirm('Are you sure you want to delete this project? It will be moved to the recycle bin.')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/projects/${projectId}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json();
|
||||
throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
// Remove project from array
|
||||
projects = projects.filter(p => p.id !== projectId);
|
||||
renderProjects(searchInput.value);
|
||||
showToast('Project moved to recycle bin', 'success');
|
||||
} catch (error) {
|
||||
console.error('Error deleting project:', error);
|
||||
showToast(error.message || 'Failed to delete project', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Load deleted projects for recycle bin
|
||||
*/
|
||||
async function loadDeletedProjects() {
|
||||
try {
|
||||
const response = await fetch('/api/projects?includeDeleted=true');
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
return data.projects.filter(p => p.deletedAt) || [];
|
||||
} catch (error) {
|
||||
console.error('Error loading deleted projects:', error);
|
||||
showToast('Failed to load recycle bin', 'error');
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore a project from recycle bin
|
||||
*/
|
||||
async function restoreProject(projectId) {
|
||||
try {
|
||||
const response = await fetch(`/api/projects/${projectId}/restore`, {
|
||||
method: 'POST'
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json();
|
||||
throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
// Reload projects and recycle bin
|
||||
await loadProjects();
|
||||
await openRecycleBinModal();
|
||||
showToast('Project restored successfully', 'success');
|
||||
} catch (error) {
|
||||
console.error('Error restoring project:', error);
|
||||
showToast(error.message || 'Failed to restore project', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Permanently delete a project
|
||||
*/
|
||||
async function permanentDeleteProject(projectId) {
|
||||
if (!confirm('Are you sure you want to permanently delete this project? This action cannot be undone.')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/projects/${projectId}/permanent`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json();
|
||||
throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
// Reload recycle bin
|
||||
await openRecycleBinModal();
|
||||
showToast('Project permanently deleted', 'success');
|
||||
} catch (error) {
|
||||
console.error('Error permanently deleting project:', error);
|
||||
showToast(error.message || 'Failed to delete project', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
// === Render Functions ===
|
||||
|
||||
/**
|
||||
* Render project cards based on filter
|
||||
*/
|
||||
function renderProjects(filter = '') {
|
||||
const filteredProjects = projects.filter(project => {
|
||||
const searchTerm = filter.toLowerCase();
|
||||
return (
|
||||
project.name.toLowerCase().includes(searchTerm) ||
|
||||
(project.description && project.description.toLowerCase().includes(searchTerm)) ||
|
||||
project.path.toLowerCase().includes(searchTerm)
|
||||
);
|
||||
});
|
||||
|
||||
if (filteredProjects.length === 0) {
|
||||
projectsGrid.style.display = 'none';
|
||||
emptyState.style.display = 'block';
|
||||
return;
|
||||
}
|
||||
|
||||
projectsGrid.style.display = 'grid';
|
||||
emptyState.style.display = 'none';
|
||||
|
||||
projectsGrid.innerHTML = filteredProjects.map(project => createProjectCard(project)).join('');
|
||||
}
|
||||
|
||||
/**
|
||||
* Create HTML for a project card
|
||||
*/
|
||||
function createProjectCard(project) {
|
||||
const sessionsCount = project.sessionsCount || 0;
|
||||
const lastActivity = project.lastActivity ? formatDate(project.lastActivity) : 'No activity';
|
||||
|
||||
return `
|
||||
<div class="project-card" data-project-id="${project.id}">
|
||||
<div class="project-card-header">
|
||||
<div class="project-icon" style="background: ${escapeHtml(project.color)}20; color: ${escapeHtml(project.color)}">
|
||||
${escapeHtml(project.icon || '📁')}
|
||||
</div>
|
||||
<div style="flex: 1; min-width: 0;">
|
||||
<h3 class="project-name" title="${escapeHtml(project.name)}">${escapeHtml(project.name)}</h3>
|
||||
</div>
|
||||
<button class="project-menu-btn" data-project-id="${project.id}" style="background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1.2rem; padding: 0.25rem;">
|
||||
⋮
|
||||
</button>
|
||||
</div>
|
||||
${project.description ? `<p class="project-description">${escapeHtml(project.description)}</p>` : ''}
|
||||
<div class="project-path" title="${escapeHtml(project.path)}">${escapeHtml(project.path)}</div>
|
||||
<div class="project-stats">
|
||||
<div class="project-stat">
|
||||
<span class="project-stat-label">Sessions:</span>
|
||||
<span class="project-stat-value">${sessionsCount}</span>
|
||||
</div>
|
||||
<div class="project-stat">
|
||||
<span class="project-stat-label">Last activity:</span>
|
||||
<span class="project-stat-value">${lastActivity}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render recycle bin content
|
||||
*/
|
||||
async function openRecycleBinModal() {
|
||||
recycleBinModal.style.display = 'flex';
|
||||
recycleBinContent.innerHTML = '<div class="loading">Loading recycle bin...</div>';
|
||||
|
||||
const deletedProjects = await loadDeletedProjects();
|
||||
|
||||
if (deletedProjects.length === 0) {
|
||||
recycleBinContent.innerHTML = `
|
||||
<div class="recycle-bin-empty">
|
||||
<p>Recycle bin is empty</p>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
recycleBinContent.innerHTML = deletedProjects.map(project => `
|
||||
<div class="recycle-bin-item" data-project-id="${project.id}">
|
||||
<div class="recycle-bin-item-info">
|
||||
<div class="recycle-bin-item-name">${escapeHtml(project.name)}</div>
|
||||
<div class="recycle-bin-item-path">${escapeHtml(project.path)}</div>
|
||||
</div>
|
||||
<div class="recycle-bin-item-actions">
|
||||
<button class="btn-restore" data-project-id="${project.id}">Restore</button>
|
||||
<button class="btn-delete-permanent" data-project-id="${project.id}">Delete Forever</button>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
|
||||
// Add event listeners for restore and delete buttons
|
||||
recycleBinContent.querySelectorAll('.btn-restore').forEach(btn => {
|
||||
btn.addEventListener('click', () => restoreProject(parseInt(btn.dataset.projectId)));
|
||||
});
|
||||
|
||||
recycleBinContent.querySelectorAll('.btn-delete-permanent').forEach(btn => {
|
||||
btn.addEventListener('click', () => permanentDeleteProject(parseInt(btn.dataset.projectId)));
|
||||
});
|
||||
}
|
||||
|
||||
// === Navigation Functions ===
|
||||
|
||||
/**
|
||||
* Navigate to sessions page for a project
|
||||
*/
|
||||
function openProject(projectId) {
|
||||
const project = projects.find(p => p.id === projectId);
|
||||
if (!project) {
|
||||
showToast('Project not found', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
// Navigate to sessions page filtered by project
|
||||
window.location.href = `/?projectId=${projectId}`;
|
||||
}
|
||||
|
||||
// === Modal Functions ===
|
||||
|
||||
/**
|
||||
* Open project modal for creating or editing
|
||||
*/
|
||||
function openProjectModal(project = null) {
|
||||
currentEditingProject = project;
|
||||
|
||||
if (project) {
|
||||
modalTitle.textContent = 'Edit Project';
|
||||
document.getElementById('project-name').value = project.name;
|
||||
document.getElementById('project-path').value = project.path;
|
||||
document.getElementById('project-description').value = project.description || '';
|
||||
document.getElementById('project-icon').value = project.icon || '📁';
|
||||
document.getElementById('project-color').value = project.color || '#4a9eff';
|
||||
} else {
|
||||
modalTitle.textContent = 'Create Project';
|
||||
projectForm.reset();
|
||||
document.getElementById('project-color').value = '#4a9eff';
|
||||
}
|
||||
|
||||
projectModal.style.display = 'flex';
|
||||
document.getElementById('project-name').focus();
|
||||
}
|
||||
|
||||
/**
|
||||
* Close project modal
|
||||
*/
|
||||
function closeProjectModal() {
|
||||
projectModal.style.display = 'none';
|
||||
currentEditingProject = null;
|
||||
projectForm.reset();
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle project form submission
|
||||
*/
|
||||
async function handleProjectSubmit(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const formData = new FormData(projectForm);
|
||||
const projectData = {
|
||||
name: formData.get('name').trim(),
|
||||
path: formData.get('path').trim(),
|
||||
description: formData.get('description').trim(),
|
||||
icon: formData.get('icon').trim() || '📁',
|
||||
color: formData.get('color') || '#4a9eff'
|
||||
};
|
||||
|
||||
// Basic validation
|
||||
if (!projectData.name) {
|
||||
showToast('Project name is required', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!projectData.path) {
|
||||
showToast('Project path is required', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await saveProject(projectData);
|
||||
} catch (error) {
|
||||
// Error already handled in saveProject
|
||||
}
|
||||
}
|
||||
|
||||
// === Context Menu Functions ===
|
||||
|
||||
/**
|
||||
* Show context menu for a project
|
||||
*/
|
||||
function showProjectMenu(projectId, event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
currentContextMenuProjectId = projectId;
|
||||
|
||||
// Position the menu
|
||||
const menuWidth = 160;
|
||||
const menuHeight = 120;
|
||||
const padding = 10;
|
||||
|
||||
let x = event.clientX;
|
||||
let y = event.clientY;
|
||||
|
||||
// Prevent menu from going off screen
|
||||
if (x + menuWidth > window.innerWidth - padding) {
|
||||
x = window.innerWidth - menuWidth - padding;
|
||||
}
|
||||
if (y + menuHeight > window.innerHeight - padding) {
|
||||
y = window.innerHeight - menuHeight - padding;
|
||||
}
|
||||
|
||||
contextMenu.style.left = `${x}px`;
|
||||
contextMenu.style.top = `${y}px`;
|
||||
contextMenu.style.display = 'block';
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide context menu
|
||||
*/
|
||||
function hideContextMenu() {
|
||||
contextMenu.style.display = 'none';
|
||||
currentContextMenuProjectId = null;
|
||||
}
|
||||
|
||||
// === Utility Functions ===
|
||||
|
||||
/**
|
||||
* Escape HTML to prevent XSS attacks
|
||||
*/
|
||||
function escapeHtml(text) {
|
||||
if (typeof text !== 'string') {
|
||||
return '';
|
||||
}
|
||||
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
/**
|
||||
* Format date string to human-readable format
|
||||
*/
|
||||
function formatDate(dateString) {
|
||||
if (!dateString) return 'Unknown';
|
||||
|
||||
const date = new Date(dateString);
|
||||
const now = new Date();
|
||||
const diffMs = now - date;
|
||||
const diffMins = Math.floor(diffMs / 60000);
|
||||
const diffHours = Math.floor(diffMs / 3600000);
|
||||
const diffDays = Math.floor(diffMs / 86400000);
|
||||
|
||||
if (diffMins < 1) return 'Just now';
|
||||
if (diffMins < 60) return `${diffMins}m ago`;
|
||||
if (diffHours < 24) return `${diffHours}h ago`;
|
||||
if (diffDays < 7) return `${diffDays}d ago`;
|
||||
|
||||
// For older dates, return formatted date
|
||||
const options = { month: 'short', day: 'numeric', year: 'numeric' };
|
||||
return date.toLocaleDateString('en-US', options);
|
||||
}
|
||||
|
||||
/**
|
||||
* Show toast notification
|
||||
*/
|
||||
function showToast(message, type = 'info') {
|
||||
// Remove existing toast if any
|
||||
const existingToast = document.querySelector('.toast');
|
||||
if (existingToast) {
|
||||
existingToast.remove();
|
||||
}
|
||||
|
||||
// Create toast element
|
||||
const toast = document.createElement('div');
|
||||
toast.className = `toast toast-${type}`;
|
||||
toast.textContent = message;
|
||||
|
||||
// Add styles
|
||||
Object.assign(toast.style, {
|
||||
position: 'fixed',
|
||||
bottom: '2rem',
|
||||
right: '2rem',
|
||||
padding: '1rem 1.5rem',
|
||||
borderRadius: '8px',
|
||||
backgroundColor: type === 'success' ? '#10b981' : type === 'error' ? '#ef4444' : '#3b82f6',
|
||||
color: 'white',
|
||||
fontWeight: '500',
|
||||
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
|
||||
zIndex: '10000',
|
||||
animation: 'slideIn 0.3s ease',
|
||||
maxWidth: '400px',
|
||||
wordWrap: 'break-word'
|
||||
});
|
||||
|
||||
// Add animation keyframes if not already present
|
||||
if (!document.getElementById('toast-animations')) {
|
||||
const style = document.createElement('style');
|
||||
style.id = 'toast-animations';
|
||||
style.textContent = `
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes slideOut {
|
||||
from {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
document.body.appendChild(toast);
|
||||
|
||||
// Auto remove after 3 seconds
|
||||
setTimeout(() => {
|
||||
toast.style.animation = 'slideOut 0.3s ease';
|
||||
setTimeout(() => toast.remove(), 300);
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
// === Event Delegation for Dynamic Elements ===
|
||||
projectsGrid.addEventListener('click', (e) => {
|
||||
const projectCard = e.target.closest('.project-card');
|
||||
const menuBtn = e.target.closest('.project-menu-btn');
|
||||
|
||||
if (menuBtn) {
|
||||
e.stopPropagation();
|
||||
const projectId = parseInt(menuBtn.dataset.projectId);
|
||||
showProjectMenu(projectId, e);
|
||||
} else if (projectCard) {
|
||||
const projectId = parseInt(projectCard.dataset.projectId);
|
||||
openProject(projectId);
|
||||
}
|
||||
});
|
||||
|
||||
// Make functions globally available for HTML event handlers
|
||||
window.loadProjects = loadProjects;
|
||||
window.openProjectModal = openProjectModal;
|
||||
window.closeProjectModal = closeProjectModal;
|
||||
window.openRecycleBinModal = openRecycleBinModal;
|
||||
window.openProject = openProject;
|
||||
window.deleteProject = deleteProject;
|
||||
window.restoreProject = restoreProject;
|
||||
window.permanentDeleteProject = permanentDeleteProject;
|
||||
Reference in New Issue
Block a user