Merge branch 'add-form-ux'

cypress/e2e/adminText.cy.js

@@ -101,6 +101,79 @@ describe('The admin text detail page', () => {
       .should('contain', 'Shemos')
   })
 
+  it('pressing Enter in the add-child input submits', () => {
+    cy.intercept('POST', '/api/nodes').as('createNode')
+    cy.intercept('GET', '/api/nodes/0').as('getNodesRefresh')
+
+    cy.get('#text-detail > ul > li')
+      .first()
+      .children('button.add-child')
+      .click()
+    cy.get('#text-detail > ul > li')
+      .first()
+      .children('input.child-title')
+      .type('Enter Child{enter}')
+
+    cy.wait('@createNode').its('response.statusCode').should('eq', 201)
+    cy.wait('@getNodesRefresh')
+
+    cy.get('#text-detail li').should('contain', 'Enter Child')
+  })
+
+  it('opening add-child on another node closes the first one', () => {
+    cy.get('#text-detail > ul > li')
+      .first()
+      .children('button.add-child')
+      .click()
+    cy.get('#text-detail > ul > li')
+      .first()
+      .children('input.child-title')
+      .should('be.visible')
+
+    cy.get('#text-detail > ul > li > ul > li')
+      .first()
+      .children('button.add-child')
+      .click()
+
+    cy.get('#text-detail > ul > li')
+      .first()
+      .children('input.child-title')
+      .should('not.exist')
+    cy.get('#text-detail > ul > li')
+      .first()
+      .children('button.save-child')
+      .should('not.exist')
+    cy.get('#text-detail > ul > li > ul > li')
+      .first()
+      .children('input.child-title')
+      .should('be.visible')
+  })
+
+  it('opening bulk-add closes an open add-child form', () => {
+    cy.get('#text-detail > ul > li')
+      .first()
+      .children('button.add-child')
+      .click()
+    cy.get('#text-detail > ul > li')
+      .first()
+      .children('input.child-title')
+      .should('be.visible')
+
+    cy.get('#text-detail > ul > li > ul > li')
+      .first()
+      .children('button.bulk-add-children')
+      .click()
+
+    cy.get('#text-detail > ul > li')
+      .first()
+      .children('input.child-title')
+      .should('not.exist')
+    cy.get('#text-detail > ul > li > ul > li')
+      .first()
+      .children('input.bulk-title')
+      .should('be.visible')
+  })
+
   it('newly added child persists after page reload', () => {
     cy.intercept('POST', '/api/nodes').as('createNode')
     cy.intercept('GET', '/api/nodes/0').as('getNodesRefresh')

cypress/e2e/adminTextBulkAdd.cy.js

@@ -65,6 +65,30 @@ describe('Bulk add children on the admin text detail page', () => {
     cy.get('@bulkCreate.all').should('have.length', 0)
   })
 
+  it('pressing Enter in the bulk-count input submits', () => {
+    cy.intercept('POST', '/api/nodes/bulk').as('bulkCreate')
+    cy.intercept('GET', '/api/nodes/0').as('getNodesRefresh')
+    cy.get('#text-detail > ul > li').first().children('button.bulk-add-children').click()
+    cy.get('#text-detail > ul > li').first().children('input.bulk-title').type('Enter')
+    cy.get('#text-detail > ul > li').first().children('input.bulk-count').type('2{enter}')
+    cy.wait('@bulkCreate').its('response.statusCode').should('eq', 201)
+    cy.wait('@getNodesRefresh')
+    cy.get('#text-detail li').should('contain', 'Enter 1')
+    cy.get('#text-detail li').should('contain', 'Enter 2')
+  })
+
+  it('pressing Enter in the bulk-title input submits', () => {
+    cy.intercept('POST', '/api/nodes/bulk').as('bulkCreate')
+    cy.intercept('GET', '/api/nodes/0').as('getNodesRefresh')
+    cy.get('#text-detail > ul > li').first().children('button.bulk-add-children').click()
+    cy.get('#text-detail > ul > li').first().children('input.bulk-count').type('2')
+    cy.get('#text-detail > ul > li').first().children('input.bulk-title').type('Title{enter}')
+    cy.wait('@bulkCreate').its('response.statusCode').should('eq', 201)
+    cy.wait('@getNodesRefresh')
+    cy.get('#text-detail li').should('contain', 'Title 1')
+    cy.get('#text-detail li').should('contain', 'Title 2')
+  })
+
   it('bulk added nodes persist after page reload', () => {
     cy.intercept('POST', '/api/nodes/bulk').as('bulkCreate')
     cy.intercept('GET', '/api/nodes/0').as('getNodesRefresh')

public/js/text.js

@@ -101,6 +101,21 @@ function renderTree(nodes, textId, depth = 0) {
     return ul;
 }
 
+function closeAllAddForms() {
+    const selectors = [
+        'input.child-title',
+        'button.save-child',
+        'input.bulk-title',
+        'input.bulk-count',
+        'button.save-bulk',
+    ];
+    selectors.forEach((selector) => {
+        document
+            .querySelectorAll('#text-detail ' + selector)
+            .forEach((element) => element.remove());
+    });
+}
+
 function toggleAddForm(li, parentNodeId, textId) {
     const existing = li.querySelector('input.child-title');
     if (existing) {
@@ -109,6 +124,8 @@ function toggleAddForm(li, parentNodeId, textId) {
         return;
     }
 
+    closeAllAddForms();
+
     const input = document.createElement('input');
     input.type = 'text';
     input.className = 'child-title';
@@ -117,7 +134,8 @@ function toggleAddForm(li, parentNodeId, textId) {
     const saveBtn = document.createElement('button');
     saveBtn.textContent = 'Save';
     saveBtn.className = 'save-child';
-    saveBtn.addEventListener('click', () => {
+
+    function submit() {
         const title = input.value.trim();
         if (!title) return;
 
@@ -133,10 +151,19 @@ function toggleAddForm(li, parentNodeId, textId) {
                 return res.json();
             })
             .then(() => fetchAndRenderNodes(textId));
+    }
+
+    saveBtn.addEventListener('click', submit);
+    input.addEventListener('keydown', (event) => {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            submit();
+        }
     });
 
     li.appendChild(input);
     li.appendChild(saveBtn);
+    input.focus();
 }
 
 function toggleBulkAddForm(li, parentNodeId, textId) {
@@ -148,6 +175,8 @@ function toggleBulkAddForm(li, parentNodeId, textId) {
         return;
     }
 
+    closeAllAddForms();
+
     const titleInput = document.createElement('input');
     titleInput.type = 'text';
     titleInput.className = 'bulk-title';
@@ -162,7 +191,8 @@ function toggleBulkAddForm(li, parentNodeId, textId) {
     const saveBtn = document.createElement('button');
     saveBtn.textContent = 'Save';
     saveBtn.className = 'save-bulk';
-    saveBtn.addEventListener('click', () => {
+
+    function submit() {
         const titlePrefix = titleInput.value.trim();
         const count = parseInt(countInput.value);
         if (!titlePrefix || !count || count < 1) return;
@@ -179,9 +209,21 @@ function toggleBulkAddForm(li, parentNodeId, textId) {
                 return res.json();
             })
             .then(() => fetchAndRenderNodes(textId));
-    });
+    }
+
+    function submitOnEnter(event) {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            submit();
+        }
+    }
+
+    saveBtn.addEventListener('click', submit);
+    titleInput.addEventListener('keydown', submitOnEnter);
+    countInput.addEventListener('keydown', submitOnEnter);
 
     li.appendChild(titleInput);
     li.appendChild(countInput);
     li.appendChild(saveBtn);
+    titleInput.focus();
 }