mirror of https://github.com/glanceapp/glance.git
Add task completion and editing features to Vikunja widget
Co-authored-by: Mord0reK <135718526+Mord0reK@users.noreply.github.com>pull/878/head
copilot-swe-agent[bot]
parent
fb17edff79
commit
a2b6923428
@ -0,0 +1,228 @@
|
|||||||
|
// Vikunja widget interactivity
|
||||||
|
export default function(widget) {
|
||||||
|
if (!widget) return;
|
||||||
|
|
||||||
|
{
|
||||||
|
const widgetID = widget.querySelector('.vikunja-table')?.dataset.widgetId;
|
||||||
|
if (!widgetID) return;
|
||||||
|
|
||||||
|
// Handle task completion checkboxes
|
||||||
|
widget.querySelectorAll('.vikunja-task-checkbox').forEach(checkbox => {
|
||||||
|
checkbox.addEventListener('change', function(e) {
|
||||||
|
if (!this.checked) {
|
||||||
|
this.checked = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const row = this.closest('tr');
|
||||||
|
const taskID = parseInt(row.dataset.taskId);
|
||||||
|
|
||||||
|
if (!confirm('Czy na pewno chcesz oznaczyć to zadanie jako wykonane?')) {
|
||||||
|
this.checked = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Call API to complete task
|
||||||
|
fetch(`/api/vikunja/${widgetID}/complete-task`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({ task_id: taskID })
|
||||||
|
})
|
||||||
|
.then(response => {
|
||||||
|
if (!response.ok) throw new Error('Failed to complete task');
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then(data => {
|
||||||
|
// Remove the row with animation
|
||||||
|
row.style.transition = 'opacity 0.3s ease';
|
||||||
|
row.style.opacity = '0';
|
||||||
|
setTimeout(() => {
|
||||||
|
row.remove();
|
||||||
|
// Check if there are no more tasks
|
||||||
|
const tbody = widget.querySelector('.vikunja-table tbody');
|
||||||
|
if (!tbody || tbody.children.length === 0) {
|
||||||
|
const table = widget.querySelector('.vikunja-table');
|
||||||
|
if (table) {
|
||||||
|
table.innerHTML = '<div class="flex items-center justify-center padding-block-5"><p>Brak zadań do wykonania</p></div>';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, 300);
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Error completing task:', error);
|
||||||
|
alert('Nie udało się oznaczyć zadania jako wykonane');
|
||||||
|
this.checked = false;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Handle edit buttons
|
||||||
|
widget.querySelectorAll('.vikunja-edit-btn').forEach(btn => {
|
||||||
|
btn.addEventListener('click', function() {
|
||||||
|
const row = this.closest('tr');
|
||||||
|
const taskID = parseInt(row.dataset.taskId);
|
||||||
|
const taskTitle = this.dataset.taskTitle;
|
||||||
|
const taskDueDate = this.dataset.taskDueDate;
|
||||||
|
|
||||||
|
// Get current labels
|
||||||
|
const currentLabels = Array.from(row.querySelectorAll('.label')).map(label =>
|
||||||
|
parseInt(label.dataset.labelId)
|
||||||
|
);
|
||||||
|
|
||||||
|
openEditModal(widgetID, taskID, taskTitle, taskDueDate, currentLabels, row);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function openEditModal(widgetID, taskID, title, dueDate, currentLabelIDs, row) {
|
||||||
|
const modal = document.getElementById('vikunja-edit-modal');
|
||||||
|
const titleInput = document.getElementById('vikunja-edit-title');
|
||||||
|
const dueDateInput = document.getElementById('vikunja-edit-due-date');
|
||||||
|
const labelsContainer = document.getElementById('vikunja-labels-container');
|
||||||
|
|
||||||
|
// Set current values
|
||||||
|
titleInput.value = title || '';
|
||||||
|
|
||||||
|
// Convert date format from "2006-01-02 15:04" to datetime-local format "2006-01-02T15:04"
|
||||||
|
if (dueDate) {
|
||||||
|
dueDateInput.value = dueDate.replace(' ', 'T');
|
||||||
|
} else {
|
||||||
|
dueDateInput.value = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fetch and display labels
|
||||||
|
labelsContainer.innerHTML = '<p>Ładowanie etykiet...</p>';
|
||||||
|
|
||||||
|
fetch(`/api/vikunja/${widgetID}/labels`)
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(labels => {
|
||||||
|
labelsContainer.innerHTML = '';
|
||||||
|
|
||||||
|
if (labels && labels.length > 0) {
|
||||||
|
labels.forEach(label => {
|
||||||
|
const labelCheckbox = document.createElement('label');
|
||||||
|
labelCheckbox.className = 'vikunja-label-option';
|
||||||
|
|
||||||
|
const color = label.hex_color && label.hex_color[0] !== '#'
|
||||||
|
? '#' + label.hex_color
|
||||||
|
: label.hex_color || '#666';
|
||||||
|
|
||||||
|
const isChecked = currentLabelIDs.includes(label.id);
|
||||||
|
|
||||||
|
labelCheckbox.innerHTML = `
|
||||||
|
<input type="checkbox" value="${label.id}" ${isChecked ? 'checked' : ''}>
|
||||||
|
<span class="label" style="border-color: ${color}; color: ${color};">${label.title}</span>
|
||||||
|
`;
|
||||||
|
|
||||||
|
labelsContainer.appendChild(labelCheckbox);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
labelsContainer.innerHTML = '<p>Brak dostępnych etykiet</p>';
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Error fetching labels:', error);
|
||||||
|
labelsContainer.innerHTML = '<p>Nie udało się załadować etykiet</p>';
|
||||||
|
});
|
||||||
|
|
||||||
|
modal.style.display = 'flex';
|
||||||
|
|
||||||
|
// Handle close button
|
||||||
|
const closeBtn = modal.querySelector('.vikunja-modal-close');
|
||||||
|
const cancelBtn = modal.querySelector('.vikunja-btn-cancel');
|
||||||
|
const saveBtn = modal.querySelector('.vikunja-btn-save');
|
||||||
|
|
||||||
|
function closeModal() {
|
||||||
|
modal.style.display = 'none';
|
||||||
|
// Remove event listeners
|
||||||
|
closeBtn.removeEventListener('click', closeModal);
|
||||||
|
cancelBtn.removeEventListener('click', closeModal);
|
||||||
|
saveBtn.removeEventListener('click', saveTask);
|
||||||
|
}
|
||||||
|
|
||||||
|
function saveTask() {
|
||||||
|
const newTitle = titleInput.value.trim();
|
||||||
|
const newDueDate = dueDateInput.value;
|
||||||
|
|
||||||
|
// Get selected label IDs
|
||||||
|
const selectedLabels = Array.from(labelsContainer.querySelectorAll('input[type="checkbox"]:checked'))
|
||||||
|
.map(checkbox => parseInt(checkbox.value));
|
||||||
|
|
||||||
|
if (!newTitle) {
|
||||||
|
alert('Tytuł zadania nie może być pusty');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Convert datetime-local format to RFC3339
|
||||||
|
let formattedDueDate = '';
|
||||||
|
if (newDueDate) {
|
||||||
|
const date = new Date(newDueDate);
|
||||||
|
formattedDueDate = date.toISOString();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Call API to update task
|
||||||
|
fetch(`/api/vikunja/${widgetID}/update-task`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
task_id: taskID,
|
||||||
|
title: newTitle,
|
||||||
|
due_date: formattedDueDate,
|
||||||
|
label_ids: selectedLabels
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.then(response => {
|
||||||
|
if (!response.ok) throw new Error('Failed to update task');
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then(data => {
|
||||||
|
// Update the row with new data
|
||||||
|
const titleCell = row.querySelector('.vikunja-title');
|
||||||
|
if (titleCell) {
|
||||||
|
titleCell.textContent = newTitle;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update the edit button's data attributes
|
||||||
|
const editBtn = row.querySelector('.vikunja-edit-btn');
|
||||||
|
if (editBtn) {
|
||||||
|
editBtn.dataset.taskTitle = newTitle;
|
||||||
|
if (newDueDate) {
|
||||||
|
editBtn.dataset.taskDueDate = newDueDate.replace('T', ' ');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update labels (simplified - would need full refresh for accurate display)
|
||||||
|
const labelsCell = row.querySelector('.vikunja-labels');
|
||||||
|
if (labelsCell && selectedLabels.length > 0) {
|
||||||
|
const labelContainer = labelsCell.querySelector('.label-container');
|
||||||
|
if (labelContainer) {
|
||||||
|
// For now, just show that labels were updated
|
||||||
|
// A full page refresh would show the actual labels
|
||||||
|
alert('Zadanie zostało zaktualizowane. Odśwież stronę, aby zobaczyć wszystkie zmiany.');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
closeModal();
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Error updating task:', error);
|
||||||
|
alert('Nie udało się zaktualizować zadania');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
closeBtn.addEventListener('click', closeModal);
|
||||||
|
cancelBtn.addEventListener('click', closeModal);
|
||||||
|
saveBtn.addEventListener('click', saveTask);
|
||||||
|
|
||||||
|
// Close modal when clicking outside
|
||||||
|
modal.addEventListener('click', function(e) {
|
||||||
|
if (e.target === modal) {
|
||||||
|
closeModal();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue