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:
parent
cee6c636ad
commit
5bf25d9505
|
|
@ -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 => {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue