Keep already-open edit forms open on re-render

src/js/render.js

@@ -5,6 +5,7 @@ import { getMatchingSearchWords, highlightSearchTerm, getSearchFilters, getSearc
 import { showSection } from './displayToggles';
 import { setupSearchFilters, setupWordOptionButtons, setupPagination, setupWordOptionSelections, setupWordEditFormButtons } from './setupListeners';
 import { getPaginationData } from './pagination';
+import { getOpenEditForms } from './wordManagement';
 
 export function renderAll() {
   renderDictionaryDetails();
@@ -108,6 +109,15 @@ export function renderWords() {
   const words = getMatchingSearchWords();
   let wordsHTML = '';
 
+  const openEditForms = getOpenEditForms();
+
+  if (openEditForms.length > 0) {
+    // Clone the dom nodes
+    openEditForms.forEach((wordFormId, index) => {
+      openEditForms[index] = document.getElementById(wordFormId.toString()).cloneNode(true);
+    });
+  }
+
   // const { pageStart, pageEnd } = getPaginationData(words);
 
   // words.slice(pageStart, pageEnd).forEach(originalWord => {
@@ -153,6 +163,16 @@ export function renderWords() {
   });
 
   document.getElementById('entries').innerHTML = wordsHTML;
+
+  if (openEditForms.length > 0) {
+    // Clone the dom nodes
+    openEditForms.forEach(editForm => {
+      const entryElement = document.getElementById(editForm.id);
+      entryElement.parentNode.replaceChild(editForm, entryElement);
+    });
+    setupWordEditFormButtons();
+  }
+  
   setupWordOptionButtons();
   setupWordOptionSelections();
   
@@ -186,8 +206,8 @@ export function renderPagination(filteredWords) {
   }
 }
 
-export function renderEditForm() {
+export function renderEditForm(wordId = false) {
-  const wordId = parseInt(this.id.replace('edit_', ''));
+  wordId = typeof wordId.target === 'undefined' ? wordId : parseInt(this.id.replace('edit_', ''));
   const word = window.currentDictionary.words.find(w => w.wordId === wordId);
   if (word) {
     const editForm = `<form id="editForm_${wordId}" class="edit-form">

src/js/setupListeners.js

@@ -1,6 +1,6 @@
 import {showSection} from './displayToggles';
-import { renderWords, renderWordOptions, destroyWordOptions, renderEditForm } from './render';
+import { renderWords, renderEditForm } from './render';
-import { validateWord, addWord, confirmEditWord } from './wordManagement';
+import { validateWord, addWord, confirmEditWord, cancelEditWord } from './wordManagement';
 import { removeTags } from '../helpers';
 import { getNextId } from './utilities';
 import { openEditModal, save, saveAndClose } from './dictionaryManagement';
@@ -194,8 +194,8 @@ export function setupWordEditFormButtons() {
     button.addEventListener('click', confirmEditWord);
   });
   Array.from(cancelChangesButtons).forEach(button => {
-    button.removeEventListener('click', renderWords);
+    button.removeEventListener('click', cancelEditWord);
-    button.addEventListener('click', renderWords);
+    button.addEventListener('click', cancelEditWord);
   });
 }
 

src/js/wordManagement.js

@@ -60,8 +60,7 @@ export function updateWord(word, wordId) {
 }
 
 export function confirmEditWord() {
-  const button = this;
+  const wordId = parseInt(this.id.replace('editWordButton_', ''));
-  const wordId = parseInt(button.id.replace('editWordButton_', ''));
   const name = document.getElementById('wordName_' + wordId).value,
     pronunciation = document.getElementById('wordPronunciation_' + wordId).value,
     partOfSpeech = document.getElementById('wordPartOfSpeech_' + wordId).value,
@@ -78,8 +77,30 @@ export function confirmEditWord() {
   };
 
   if (validateWord(word, wordId)) {
-    if (confirm(`Are you sure you want save changes to ${word.name}?`)) {
+    if (confirm(`Are you sure you want to save changes to "${word.name}"?`)) {
+      document.getElementById('editForm_' + wordId).classList.add('done');
       updateWord(word, wordId);
     }
   }
 }
+
+export function cancelEditWord() {
+  const wordId = parseInt(this.parentElement.id.replace('editForm_', ''));
+  console.log('wordId', wordId);
+  if (confirm(`Are you sure you want to cancel?\n(Any changes will be lost!)`)) {
+    document.getElementById('editForm_' + wordId).classList.add('done');
+    renderWords();
+  }
+}
+
+export function getOpenEditForms() {
+  const openEditForms = document.getElementsByClassName('edit-form');
+  const formsToReopen = [];
+  Array.from(openEditForms).forEach(form => {
+    if (!form.classList.contains('done')) {
+      formsToReopen.push(parseInt(form.id.replace('editForm_', '')));
+    }
+  });
+
+  return formsToReopen;
+}