Fix subtask form AJAX submission

- Add onsubmit handler to prevent default form submission
- Add addSubtask() function for AJAX form submission
- Update subtasks list dynamically after adding
- Add updateSubtasksCount() helper function
This commit is contained in:
Vladimir Tomashevskiy 2026-02-08 15:08:42 +00:00
parent cee6c636ad
commit 5bf25d9505
1 changed files with 74 additions and 2 deletions

View File

@ -128,7 +128,8 @@
<p class="text-muted text-center mb-3">Подзадач пока нет</p> <p class="text-muted text-center mb-3">Подзадач пока нет</p>
{% endif %} {% endif %}
<form action="{{ base_url('/tasks/' ~ task.id ~ '/subtasks') }}" method="post" class="d-flex gap-2"> <form action="{{ base_url('/tasks/' ~ task.id ~ '/subtasks') }}" method="post"
class="d-flex gap-2 subtask-form" onsubmit="addSubtask(event, {{ task.id }})">
{{ csrf_field()|raw }} {{ csrf_field()|raw }}
<input type="text" name="title" class="form-control" <input type="text" name="title" class="form-control"
placeholder="Добавить подзадачу..." required> placeholder="Добавить подзадачу..." required>
@ -226,6 +227,68 @@
{% block scripts %} {% block scripts %}
{{ parent() }} {{ parent() }}
<script> <script>
function addSubtask(event, taskId) {
event.preventDefault();
const form = event.target;
const formData = new FormData(form);
const input = form.querySelector('input[name="title"]');
const title = input.value.trim();
if (!title) return;
fetch(`/tasks/${taskId}/subtasks`, {
method: 'POST',
headers: {
'X-Requested-With': 'XMLHttpRequest',
},
body: formData
})
.then(response => response.json())
.then(data => {
if (data.success) {
// Добавляем подзадачу в список
const list = document.getElementById('subtasks-list');
const emptyMessage = list.querySelector('.text-muted.text-center');
if (emptyMessage) {
emptyMessage.remove();
}
const newItem = document.createElement('li');
newItem.className = 'list-group-item d-flex align-items-center gap-2';
newItem.setAttribute('data-subtask-id', data.subtask_id);
newItem.innerHTML = `
<input type="checkbox" class="form-check-input subtask-checkbox" onchange="toggleSubtask(${taskId}, ${data.subtask_id})">
<span class="flex-grow-1">${title}</span>
<button type="button" class="btn btn-outline-danger btn-sm" onclick="deleteSubtask(${taskId}, ${data.subtask_id})" title="Удалить">
<i class="fa-solid fa-times"></i>
</button>
`;
list.appendChild(newItem);
// Очищаем поле ввода
input.value = '';
// Обновляем счётчик
updateSubtasksCount();
} else {
alert(data.error || 'Ошибка при создании подзадачи');
}
})
.catch(error => {
console.error('Error:', error);
alert('Ошибка при создании подзадачи');
});
}
function updateSubtasksCount() {
const count = document.querySelectorAll('#subtasks-list li').length;
const completed = document.querySelectorAll('#subtasks-list li input:checked').length;
const badge = document.querySelector('#subtasks-list ~ .badge');
if (badge) {
badge.textContent = `${completed}/${count}`;
}
}
function toggleSubtask(taskId, subtaskId) { function toggleSubtask(taskId, subtaskId) {
fetch(`/tasks/${taskId}/subtasks/${subtaskId}/toggle`, { fetch(`/tasks/${taskId}/subtasks/${subtaskId}/toggle`, {
method: 'POST', method: 'POST',
@ -264,7 +327,16 @@ function deleteSubtask(taskId, subtaskId) {
alert(data.error || 'Ошибка'); alert(data.error || 'Ошибка');
} else { } else {
// Удаляем из DOM // Удаляем из DOM
document.querySelector(`li[data-subtask-id="${subtaskId}"]`).remove(); const item = document.querySelector(`li[data-subtask-id="${subtaskId}"]`);
if (item) {
item.remove();
updateSubtasksCount();
}
// Если список пуст, показываем сообщение
const list = document.getElementById('subtasks-list');
if (list.querySelectorAll('li').length === 0) {
list.innerHTML = '<p class="text-muted text-center mb-3">Подзадач пока нет</p>';
}
} }
}) })
.catch(error => { .catch(error => {