Delete Tag
Are you sure you want to delete the tag ? This will remove the tag from all tasks.
`;
document.body.appendChild(tagDeleteModal);
}
tagDeleteNameSpan = tagDeleteModal.querySelector('#tag-delete-name');
tagDeleteConfirmBtn = tagDeleteModal.querySelector('#confirm-tag-delete');
tagDeleteCancelBtn = tagDeleteModal.querySelector('#cancel-tag-delete');
}
ensureTagDeleteModal();
function showTagDeleteModal(tagName) {
tagToDelete = tagName;
ensureTagDeleteModal();
tagDeleteNameSpan.textContent = tagName;
tagDeleteModal.classList.remove('hidden');
tagDeleteCancelBtn.onclick = hideTagDeleteModal;
tagDeleteConfirmBtn.onclick = function() {
if (tagToDelete) {
// Remove tag from global tags
delete tags[tagToDelete];
// Remove tag from all tasks
document.querySelectorAll('.task').forEach(task => {
if (task.dataset.tagName === tagToDelete) {
delete task.dataset.tagName;
delete task.dataset.tagColor;
const tagCircle = task.querySelector('.tag-circle');
if (tagCircle) {
tagCircle.style.backgroundColor = 'transparent';
tagCircle.classList.add('border-2', 'border-gray-400');
}
const tooltipOverlay = task.querySelector('.task-tooltip-overlay');
if (tooltipOverlay) {
tooltipOverlay.textContent = '';
}
}
});
openTagModal();
hideTagDeleteModal();
}
};
}
function hideTagDeleteModal() {
tagDeleteModal.classList.add('hidden');
tagToDelete = null;
}
document.addEventListener('DOMContentLoaded', () => {
let draggedTask = null;
let targetColumn = null;
let taskToDelete = null;
let currentTaskForTagging = null;
// Global tags object
let tags = {
// Example: "UI/UX": "#3b82f6",
};
// Tag delete confirmation modal logic (move inside DOMContentLoaded for correct tags reference)
let tagToDelete = null;
let tagDeleteModal = document.getElementById('tag-delete-modal');
let tagDeleteNameSpan = null;
let tagDeleteConfirmBtn = null;
let tagDeleteCancelBtn = null;
function ensureTagDeleteModal() {
tagDeleteModal = document.getElementById('tag-delete-modal');
if (!tagDeleteModal) {
tagDeleteModal = document.createElement('div');
tagDeleteModal.id = 'tag-delete-modal';
tagDeleteModal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden';
tagDeleteModal.innerHTML = `
Delete Tag
Are you sure you want to delete the tag ? This will remove the tag from all tasks.
`;
document.body.appendChild(tagDeleteModal);
}
tagDeleteNameSpan = tagDeleteModal.querySelector('#tag-delete-name');
tagDeleteConfirmBtn = tagDeleteModal.querySelector('#confirm-tag-delete');
tagDeleteCancelBtn = tagDeleteModal.querySelector('#cancel-tag-delete');
}
ensureTagDeleteModal();
function showTagDeleteModal(tagName) {
tagToDelete = tagName;
ensureTagDeleteModal();
tagDeleteNameSpan.textContent = tagName;
tagDeleteModal.classList.remove('hidden');
tagDeleteCancelBtn.onclick = hideTagDeleteModal;
tagDeleteConfirmBtn.onclick = function() {
if (tagToDelete) {
// Remove tag from global tags
delete tags[tagToDelete];
// Remove tag from all tasks
document.querySelectorAll('.task').forEach(task => {
if (task.dataset.tagName === tagToDelete) {
delete task.dataset.tagName;
delete task.dataset.tagColor;
const tagCircle = task.querySelector('.tag-circle');
if (tagCircle) {
tagCircle.style.backgroundColor = 'transparent';
tagCircle.classList.add('border-2', 'border-gray-400');
}
const tooltipOverlay = task.querySelector('.task-tooltip-overlay');
if (tooltipOverlay) {
tooltipOverlay.textContent = '';
}
}
});
openTagModal();
hideTagDeleteModal();
}
};
}
function hideTagDeleteModal() {
tagDeleteModal.classList.add('hidden');
tagToDelete = null;
}
const tagModal = document.getElementById('tag-modal');
const cancelTagBtn = document.getElementById('cancel-tag');
const saveTagBtn = document.getElementById('save-tag');
const removeTagBtn = document.getElementById('remove-tag');
const newTagNameInput = document.getElementById('new-tag-name');
const newTagColorInput = document.getElementById('new-tag-color');
const tagsListContainer = document.getElementById('tags-list');
// Function to initialize event listeners for a task
function initializeTaskEvents(task) {
task.addEventListener('dragstart', () => {
draggedTask = task;
setTimeout(() => {
task.classList.add('dragging');
}, 0);
});
task.addEventListener('dragend', () => {
task.classList.remove('dragging');
draggedTask = null;
});
// Double-click to open details modal
task.addEventListener('dblclick', (e) => {
e.stopPropagation();
openTaskDetailsModal(task);
});
const deleteBtn = task.querySelector('.delete-task-btn');
if (deleteBtn) {
deleteBtn.addEventListener('click', (e) => {
e.stopPropagation();
taskToDelete = task;
deleteModal.classList.remove('hidden');
});
}
const tagCircle = task.querySelector('.tag-circle');
const tooltipOverlay = task.querySelector('.task-tooltip-overlay');
if (tagCircle && tooltipOverlay) {
tagCircle.addEventListener('mouseenter', () => {
if (task.dataset.tagName) {
tooltipOverlay.classList.remove('hidden');
}
});
tagCircle.addEventListener('mouseleave', () => {
tooltipOverlay.classList.add('hidden');
});
tagCircle.addEventListener('click', (e) => {
e.stopPropagation();
currentTaskForTagging = task;
openTagModal();
});
}
}
// Function to open and populate the tag modal
function openTagModal() {
tagsListContainer.innerHTML = '';
Object.entries(tags).forEach(([name, color]) => {
const tagChip = document.createElement('div');
tagChip.className = 'px-3 py-1 rounded-full text-sm font-medium cursor-pointer flex items-center gap-2';
tagChip.style.backgroundColor = color;
tagChip.style.color = getContrastYIQ(color);
tagChip.textContent = name;
tagChip.dataset.tagName = name;
tagChip.dataset.tagColor = color;
tagChip.addEventListener('click', () => {
applyTagToTask(name, color);
closeTagModal();
});
// Add delete button for tag
const deleteBtn = document.createElement('button');
deleteBtn.className = 'ml-2 text-xs text-white bg-red-600 rounded-full w-5 h-5 flex items-center justify-center hover:bg-red-800';
deleteBtn.innerHTML = '