restored delete refresh and rename for categories
This commit is contained in:
Chris Rosenau
parent
99474ccd75
commit
eeccc6c5f9
|
|
@ -104,6 +104,19 @@ function createTreeNode(node, source = 'm2') {
|
||||||
label.appendChild(labelText);
|
label.appendChild(labelText);
|
||||||
label.appendChild(badge);
|
label.appendChild(badge);
|
||||||
|
|
||||||
|
// Add rename button for Magento 2 categories only (except system root)
|
||||||
|
if (canDelete && source === 'm2') {
|
||||||
|
const renameBtn = document.createElement('button');
|
||||||
|
renameBtn.className = 'tree-rename-btn';
|
||||||
|
renameBtn.textContent = 'Rename';
|
||||||
|
renameBtn.title = 'Rename this category';
|
||||||
|
renameBtn.onclick = function(e) {
|
||||||
|
e.stopPropagation();
|
||||||
|
startRenameCategory(nodeDiv, node, source);
|
||||||
|
};
|
||||||
|
label.appendChild(renameBtn);
|
||||||
|
}
|
||||||
|
|
||||||
if (canDelete) {
|
if (canDelete) {
|
||||||
const deleteBtn = document.createElement('button');
|
const deleteBtn = document.createElement('button');
|
||||||
deleteBtn.className = 'tree-delete-btn';
|
deleteBtn.className = 'tree-delete-btn';
|
||||||
|
|
@ -253,6 +266,7 @@ function deleteCategory(categoryId, categoryName, source) {
|
||||||
loadM1Tree();
|
loadM1Tree();
|
||||||
} else {
|
} else {
|
||||||
loadM2Tree();
|
loadM2Tree();
|
||||||
|
// Reload page to refresh statistics and M2 Categories Not Found in M1 section
|
||||||
location.reload();
|
location.reload();
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -266,3 +280,260 @@ function deleteCategory(categoryId, categoryName, source) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Start renaming a category
|
||||||
|
function startRenameCategory(nodeDiv, node, source) {
|
||||||
|
const label = nodeDiv.querySelector('.tree-label');
|
||||||
|
const labelText = label.querySelector('.tree-label-text');
|
||||||
|
const originalName = node.name || 'Unnamed Category';
|
||||||
|
|
||||||
|
// Hide the label text and badge
|
||||||
|
labelText.style.display = 'none';
|
||||||
|
const badge = label.querySelector('.tree-badge');
|
||||||
|
if (badge) badge.style.display = 'none';
|
||||||
|
|
||||||
|
// Hide rename and delete buttons
|
||||||
|
const renameBtn = label.querySelector('.tree-rename-btn');
|
||||||
|
const deleteBtn = label.querySelector('.tree-delete-btn');
|
||||||
|
if (renameBtn) renameBtn.style.display = 'none';
|
||||||
|
if (deleteBtn) deleteBtn.style.display = 'none';
|
||||||
|
|
||||||
|
// Create input field
|
||||||
|
const input = document.createElement('input');
|
||||||
|
input.type = 'text';
|
||||||
|
input.className = 'tree-rename-input';
|
||||||
|
input.value = originalName;
|
||||||
|
input.onclick = function(e) {
|
||||||
|
e.stopPropagation();
|
||||||
|
};
|
||||||
|
|
||||||
|
// Create action buttons
|
||||||
|
const actionsDiv = document.createElement('div');
|
||||||
|
actionsDiv.className = 'tree-rename-actions';
|
||||||
|
|
||||||
|
const saveBtn = document.createElement('button');
|
||||||
|
saveBtn.className = 'tree-rename-save-btn';
|
||||||
|
saveBtn.textContent = 'Save';
|
||||||
|
saveBtn.onclick = function(e) {
|
||||||
|
e.stopPropagation();
|
||||||
|
saveRenameCategory(nodeDiv, node, input.value, source);
|
||||||
|
};
|
||||||
|
|
||||||
|
const cancelBtn = document.createElement('button');
|
||||||
|
cancelBtn.className = 'tree-rename-cancel-btn';
|
||||||
|
cancelBtn.textContent = 'Cancel';
|
||||||
|
cancelBtn.onclick = function(e) {
|
||||||
|
e.stopPropagation();
|
||||||
|
cancelRenameCategory(nodeDiv, labelText, badge, renameBtn, deleteBtn);
|
||||||
|
};
|
||||||
|
|
||||||
|
actionsDiv.appendChild(saveBtn);
|
||||||
|
actionsDiv.appendChild(cancelBtn);
|
||||||
|
|
||||||
|
label.appendChild(input);
|
||||||
|
label.appendChild(actionsDiv);
|
||||||
|
|
||||||
|
// Focus and select input
|
||||||
|
input.focus();
|
||||||
|
input.select();
|
||||||
|
|
||||||
|
// Handle Enter and Escape keys
|
||||||
|
input.onkeydown = function(e) {
|
||||||
|
if (e.key === 'Enter') {
|
||||||
|
e.preventDefault();
|
||||||
|
saveRenameCategory(nodeDiv, node, input.value, source);
|
||||||
|
} else if (e.key === 'Escape') {
|
||||||
|
e.preventDefault();
|
||||||
|
cancelRenameCategory(nodeDiv, labelText, badge, renameBtn, deleteBtn);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Save category rename
|
||||||
|
function saveRenameCategory(nodeDiv, node, newName, source) {
|
||||||
|
const categoryId = node.id;
|
||||||
|
const label = nodeDiv.querySelector('.tree-label');
|
||||||
|
const input = label.querySelector('.tree-rename-input');
|
||||||
|
const actionsDiv = label.querySelector('.tree-rename-actions');
|
||||||
|
|
||||||
|
if (!newName || newName.trim() === '') {
|
||||||
|
alert('Category name cannot be empty');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Disable input and buttons
|
||||||
|
input.disabled = true;
|
||||||
|
const saveBtn = actionsDiv.querySelector('.tree-rename-save-btn');
|
||||||
|
const cancelBtn = actionsDiv.querySelector('.tree-rename-cancel-btn');
|
||||||
|
if (saveBtn) saveBtn.disabled = true;
|
||||||
|
if (cancelBtn) cancelBtn.disabled = true;
|
||||||
|
|
||||||
|
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
|
||||||
|
const renameRoute = routes.renameCategory.replace(':id', categoryId);
|
||||||
|
|
||||||
|
fetch(renameRoute, {
|
||||||
|
method: 'PUT',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'X-CSRF-TOKEN': csrfToken
|
||||||
|
},
|
||||||
|
body: JSON.stringify({ name: newName.trim() })
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
if (data.success) {
|
||||||
|
// Update the node name
|
||||||
|
node.name = data.new_name;
|
||||||
|
|
||||||
|
// Update the label text
|
||||||
|
const labelText = label.querySelector('.tree-label-text');
|
||||||
|
labelText.textContent = `[${node.id}] ${data.new_name}`;
|
||||||
|
|
||||||
|
// Restore display
|
||||||
|
labelText.style.display = '';
|
||||||
|
const badge = label.querySelector('.tree-badge');
|
||||||
|
if (badge) badge.style.display = '';
|
||||||
|
const renameBtn = label.querySelector('.tree-rename-btn');
|
||||||
|
const deleteBtn = label.querySelector('.tree-delete-btn');
|
||||||
|
if (renameBtn) renameBtn.style.display = '';
|
||||||
|
if (deleteBtn) deleteBtn.style.display = '';
|
||||||
|
|
||||||
|
// Remove input and actions
|
||||||
|
label.removeChild(input);
|
||||||
|
label.removeChild(actionsDiv);
|
||||||
|
|
||||||
|
// Reload M2 Categories Not Found in M1 section
|
||||||
|
loadM2CategoriesNotInM1();
|
||||||
|
} else {
|
||||||
|
alert('Error: ' + (data.message || 'Failed to rename category'));
|
||||||
|
// Re-enable input and buttons
|
||||||
|
input.disabled = false;
|
||||||
|
if (saveBtn) saveBtn.disabled = false;
|
||||||
|
if (cancelBtn) cancelBtn.disabled = false;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
alert('Error: ' + error.message);
|
||||||
|
// Re-enable input and buttons
|
||||||
|
input.disabled = false;
|
||||||
|
if (saveBtn) saveBtn.disabled = false;
|
||||||
|
if (cancelBtn) cancelBtn.disabled = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Cancel category rename
|
||||||
|
function cancelRenameCategory(nodeDiv, labelText, badge, renameBtn, deleteBtn) {
|
||||||
|
const label = nodeDiv.querySelector('.tree-label');
|
||||||
|
const input = label.querySelector('.tree-rename-input');
|
||||||
|
const actionsDiv = label.querySelector('.tree-rename-actions');
|
||||||
|
|
||||||
|
// Restore display
|
||||||
|
labelText.style.display = '';
|
||||||
|
if (badge) badge.style.display = '';
|
||||||
|
if (renameBtn) renameBtn.style.display = '';
|
||||||
|
if (deleteBtn) deleteBtn.style.display = '';
|
||||||
|
|
||||||
|
// Remove input and actions
|
||||||
|
if (input) label.removeChild(input);
|
||||||
|
if (actionsDiv) label.removeChild(actionsDiv);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Load M2 Categories Not Found in M1 section
|
||||||
|
function loadM2CategoriesNotInM1() {
|
||||||
|
const tbody = document.getElementById('m2-categories-not-in-m1-tbody');
|
||||||
|
const wrapper = document.getElementById('m2-categories-not-in-m1-table-wrapper');
|
||||||
|
const totalDiv = document.getElementById('m2-categories-not-in-m1-total');
|
||||||
|
const emptyDiv = document.getElementById('m2-categories-not-in-m1-empty');
|
||||||
|
|
||||||
|
if (!tbody && !wrapper && !totalDiv && !emptyDiv) {
|
||||||
|
// Section doesn't exist on this page
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
fetch(routes.m2CategoriesNotInM1)
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
if (data.success) {
|
||||||
|
const categories = data.categories || [];
|
||||||
|
const count = data.count || 0;
|
||||||
|
|
||||||
|
// Remove existing content
|
||||||
|
if (tbody) tbody.innerHTML = '';
|
||||||
|
if (totalDiv) totalDiv.style.display = 'none';
|
||||||
|
if (emptyDiv) emptyDiv.style.display = 'none';
|
||||||
|
if (wrapper) wrapper.style.display = 'none';
|
||||||
|
|
||||||
|
if (count > 0) {
|
||||||
|
// Show table and populate it
|
||||||
|
if (wrapper) wrapper.style.display = 'block';
|
||||||
|
if (totalDiv) {
|
||||||
|
totalDiv.style.display = 'block';
|
||||||
|
totalDiv.innerHTML = `<strong>Total:</strong> ${count} ${count === 1 ? 'category' : 'categories'} found in Magento 2 but not in Magento 1.`;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (tbody) {
|
||||||
|
categories.forEach(category => {
|
||||||
|
const row = document.createElement('tr');
|
||||||
|
row.style.borderBottom = '1px solid #dee2e6';
|
||||||
|
|
||||||
|
const activeClass = category.is_active ? 'active' : 'inactive';
|
||||||
|
const activeText = category.is_active ? 'Active' : 'Inactive';
|
||||||
|
|
||||||
|
let rootCategoryHtml = '<span style="color: #999;">N/A</span>';
|
||||||
|
if (category.root_category_name && category.root_category_name !== 'N/A') {
|
||||||
|
rootCategoryHtml = `<span style="font-weight: 500;">${escapeHtml(category.root_category_name)}</span>`;
|
||||||
|
if (category.root_category_id) {
|
||||||
|
rootCategoryHtml += ` <span style="font-size: 0.85em; color: #666;">(ID: ${category.root_category_id})</span>`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create delete button with event listener
|
||||||
|
const deleteBtn = document.createElement('button');
|
||||||
|
deleteBtn.className = 'tree-delete-btn';
|
||||||
|
deleteBtn.textContent = 'Delete';
|
||||||
|
deleteBtn.title = 'Delete this category';
|
||||||
|
deleteBtn.onclick = function(e) {
|
||||||
|
e.stopPropagation();
|
||||||
|
showDeleteConfirmPopup(deleteBtn, category.entity_id, category.name, 'm2', false, 0);
|
||||||
|
};
|
||||||
|
|
||||||
|
row.innerHTML = `
|
||||||
|
<td style="padding: 10px 12px;">${category.entity_id}</td>
|
||||||
|
<td style="padding: 10px 12px; font-weight: 500;">${escapeHtml(category.name)}</td>
|
||||||
|
<td style="padding: 10px 12px;">${category.level}</td>
|
||||||
|
<td style="padding: 10px 12px;">
|
||||||
|
<span class="tree-badge ${activeClass}">${activeText}</span>
|
||||||
|
</td>
|
||||||
|
<td style="padding: 10px 12px;">${rootCategoryHtml}</td>
|
||||||
|
<td style="padding: 10px 12px; font-size: 0.9em; color: #666;">${escapeHtml(category.path)}</td>
|
||||||
|
<td style="padding: 10px 12px;"></td>
|
||||||
|
`;
|
||||||
|
|
||||||
|
// Append delete button to the actions cell
|
||||||
|
const actionsCell = row.querySelector('td:last-child');
|
||||||
|
if (actionsCell) {
|
||||||
|
actionsCell.appendChild(deleteBtn);
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody.appendChild(row);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// Show empty message
|
||||||
|
if (emptyDiv) {
|
||||||
|
emptyDiv.style.display = 'block';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Error loading M2 categories not in M1:', error);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Helper function to escape HTML
|
||||||
|
function escapeHtml(text) {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.textContent = text;
|
||||||
|
return div.innerHTML;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -116,7 +116,9 @@ class="tree-delete-btn"
|
||||||
window.categoryRoutes = {
|
window.categoryRoutes = {
|
||||||
magento1CategoryTree: '{{ route("categories.magento1-category-tree") }}',
|
magento1CategoryTree: '{{ route("categories.magento1-category-tree") }}',
|
||||||
magento2CategoryTree: '{{ route("categories.magento2-category-tree") }}',
|
magento2CategoryTree: '{{ route("categories.magento2-category-tree") }}',
|
||||||
deleteCategory: '{{ route("categories.delete-category", ["categoryId" => ":id"]) }}'
|
deleteCategory: '{{ route("categories.delete-category", ["categoryId" => ":id"]) }}',
|
||||||
|
renameCategory: '{{ route("categories.rename-category", ["categoryId" => ":id"]) }}',
|
||||||
|
m2CategoriesNotInM1: '{{ route("categories.m2-categories-not-in-m1") }}'
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
@endpush
|
@endpush
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue