Compare commits
3 commits
a9a7461aad
...
838c31293e
| Author | SHA1 | Date | |
|---|---|---|---|
| 838c31293e | |||
| 1342a67cf3 | |||
| dce4e4a4f6 |
2 changed files with 50 additions and 1 deletions
|
|
@ -65,6 +65,42 @@ describe('The admin text detail page', () => {
|
||||||
cy.get('#text-detail li').should('contain', 'Nested Child Node')
|
cy.get('#text-detail li').should('contain', 'Nested Child Node')
|
||||||
})
|
})
|
||||||
|
|
||||||
|
it('keeps a parent expanded after adding a child to it', () => {
|
||||||
|
cy.intercept('POST', '/api/nodes').as('createNode')
|
||||||
|
cy.intercept('GET', '/api/nodes/0').as('getNodesRefresh')
|
||||||
|
|
||||||
|
cy.get('#text-detail > ul > li > ul > li')
|
||||||
|
.first()
|
||||||
|
.find('button.toggle-children')
|
||||||
|
.click()
|
||||||
|
cy.get('#text-detail > ul > li > ul > li > ul')
|
||||||
|
.first()
|
||||||
|
.should('be.visible')
|
||||||
|
|
||||||
|
cy.get('#text-detail > ul > li > ul > li')
|
||||||
|
.first()
|
||||||
|
.children('button.add-child')
|
||||||
|
.click()
|
||||||
|
cy.get('#text-detail > ul > li > ul > li')
|
||||||
|
.first()
|
||||||
|
.children('input.child-title')
|
||||||
|
.type('Shemos')
|
||||||
|
cy.get('#text-detail > ul > li > ul > li')
|
||||||
|
.first()
|
||||||
|
.children('button.save-child')
|
||||||
|
.click()
|
||||||
|
|
||||||
|
cy.wait('@createNode').its('response.statusCode').should('eq', 201)
|
||||||
|
cy.wait('@getNodesRefresh')
|
||||||
|
|
||||||
|
cy.get('#text-detail > ul > li > ul > li > ul')
|
||||||
|
.first()
|
||||||
|
.should('be.visible')
|
||||||
|
cy.get('#text-detail > ul > li > ul > li > ul')
|
||||||
|
.first()
|
||||||
|
.should('contain', 'Shemos')
|
||||||
|
})
|
||||||
|
|
||||||
it('newly added child persists after page reload', () => {
|
it('newly added child persists after page reload', () => {
|
||||||
cy.intercept('POST', '/api/nodes').as('createNode')
|
cy.intercept('POST', '/api/nodes').as('createNode')
|
||||||
cy.intercept('GET', '/api/nodes/0').as('getNodesRefresh')
|
cy.intercept('GET', '/api/nodes/0').as('getNodesRefresh')
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,5 @@
|
||||||
|
const expandedNodeIds = new Set();
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
const textId = window.location.pathname.split('/').pop();
|
const textId = window.location.pathname.split('/').pop();
|
||||||
|
|
||||||
|
|
@ -69,7 +71,11 @@ function renderTree(nodes, textId, depth = 0) {
|
||||||
|
|
||||||
if (node.children.length > 0) {
|
if (node.children.length > 0) {
|
||||||
const childUl = renderTree(node.children, textId, depth + 1);
|
const childUl = renderTree(node.children, textId, depth + 1);
|
||||||
const childrenVisible = depth === 0;
|
const childrenVisible =
|
||||||
|
expandedNodeIds.has(node.id) || depth === 0;
|
||||||
|
if (childrenVisible) {
|
||||||
|
expandedNodeIds.add(node.id);
|
||||||
|
}
|
||||||
childUl.style.display = childrenVisible ? '' : 'none';
|
childUl.style.display = childrenVisible ? '' : 'none';
|
||||||
|
|
||||||
const toggleBtn = document.createElement('button');
|
const toggleBtn = document.createElement('button');
|
||||||
|
|
@ -79,6 +85,11 @@ function renderTree(nodes, textId, depth = 0) {
|
||||||
const isHidden = childUl.style.display === 'none';
|
const isHidden = childUl.style.display === 'none';
|
||||||
childUl.style.display = isHidden ? '' : 'none';
|
childUl.style.display = isHidden ? '' : 'none';
|
||||||
toggleBtn.textContent = isHidden ? '▼' : '▶';
|
toggleBtn.textContent = isHidden ? '▼' : '▶';
|
||||||
|
if (isHidden) {
|
||||||
|
expandedNodeIds.add(node.id);
|
||||||
|
} else {
|
||||||
|
expandedNodeIds.delete(node.id);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
li.appendChild(toggleBtn);
|
li.appendChild(toggleBtn);
|
||||||
|
|
@ -110,6 +121,7 @@ function toggleAddForm(li, parentNodeId, textId) {
|
||||||
const title = input.value.trim();
|
const title = input.value.trim();
|
||||||
if (!title) return;
|
if (!title) return;
|
||||||
|
|
||||||
|
expandedNodeIds.add(parentNodeId);
|
||||||
fetch('/api/nodes', {
|
fetch('/api/nodes', {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: { 'Content-Type': 'application/json' },
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
|
@ -155,6 +167,7 @@ function toggleBulkAddForm(li, parentNodeId, textId) {
|
||||||
const count = parseInt(countInput.value);
|
const count = parseInt(countInput.value);
|
||||||
if (!titlePrefix || !count || count < 1) return;
|
if (!titlePrefix || !count || count < 1) return;
|
||||||
|
|
||||||
|
expandedNodeIds.add(parentNodeId);
|
||||||
fetch('/api/nodes/bulk', {
|
fetch('/api/nodes/bulk', {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: { 'Content-Type': 'application/json' },
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue