Switching between text line and textarea has been improved

package.json

@@ -102,7 +102,7 @@
     "pack": "yarn build:css && yarn build:pegjs && electron-builder --dir",
     "lint": "eslint --ext .js, src --ext .mjs, src",
     "test": "mocha --timeout 10000",
-    "test1": "mocha ./test/createTodos.js --timeout 10000",
+    "test1": "mocha ./test/todoModal.js --timeout 10000",
     "sass": "sass -w src/scss/style.scss:src/css/style.css",
     "start": "yarn sass & electron ."
   },

src/css/style.css

@@ -1615,6 +1615,7 @@ body.compact #autoCompleteContainer h4 {
 }
 #drawerContainer .drawer section .todoFilterHint {
   cursor: pointer;
+  opacity: 0.5;
 }
 #drawerContainer .drawer table tr td:nth-child(odd) {
   width: auto;

src/index.html

@@ -380,7 +380,7 @@
           <footer class="card-footer">
             <button id="btnSave" class="card-footer-item" tabindex="0"></button>
             <button id="btnItemStatus" class="card-footer-item" tabindex="0"></button>
-            <button class="card-footer-item" role="cancel" tabindex="0"></button>
+            <button id="btnCancel" class="card-footer-item" role="cancel" tabindex="0"></button>
           </footer>
         </div>
       </div>

src/js/form.mjs

@@ -252,8 +252,6 @@ function setDueDate(days) {
 }
 function show(todo, templated) {
   try {
-    // switch to textarea if needed
-    if(userData.useTextarea) toggleInputSize("input");
     // remove any previously set data-item attributes
     //modalForm.removeAttribute("data-item");
     modalForm.setAttribute("data-item", "");
@@ -288,11 +286,13 @@ function show(todo, templated) {
         modalForm.setAttribute("data-item", todo.toString());
         // this is an existing todo task to be edited
         // replace special char with line breaks before passing it to textarea
-        if(userData.useTextarea) document.getElementById("modalFormInput").value = todo.toString().replaceAll(String.fromCharCode(16),"\r\n");
+        //if(userData.useTextarea) document.getElementById("modalFormInput").value = todo.toString().replaceAll(String.fromCharCode(16),"\r\n");
         // replace special char with space before passing it to regular input
-        if(!userData.useTextarea) document.getElementById("modalFormInput").value = todo.toString().replaceAll(String.fromCharCode(16)," ");
+        //if(!userData.useTextarea) document.getElementById("modalFormInput").value = todo.toString().replaceAll(String.fromCharCode(16)," ");
         //document.getElementById("modalFormInput").value = todo.toString();
         //modalTitle.innerHTML = translations.editTodo;
+        document.getElementById("modalFormInput").value = todo.toString();
+
         btnItemStatus.classList.remove("is-hidden");
       }
       // only show the complete button on open items
@@ -317,6 +317,8 @@ function show(todo, templated) {
       //modalTitle.innerHTML = translations.addTodo;
       btnItemStatus.classList.add("is-hidden");
     }
+    // switch to textarea if needed
+    if(userData.useTextarea) toggleInputSize("input");
     // adjust size of picker inputs
     resizeInput(datePickerInput);
     resizeInput(recurrencePickerInput);
@@ -427,15 +429,28 @@ function submitForm() {
 
 function toggleInputSize(type) {
   let newInputElement;
+  let value = "";
+
+
+  if(document.getElementById("modalFormInput").value!=="") {
+    value = document.getElementById("modalFormInput").value.replaceAll("\n", String.fromCharCode(16));
+  } /*else if(modalForm.getAttribute("data-item")!=="") {
+    value = modalForm.getAttribute("data-item").replaceAll("\n", String.fromCharCode(16));
+  }*/
+  //modalForm.setAttribute("data-item", document.getElementById("modalFormInput").value);
+
   switch (type) {
     case "input":
       newInputElement = document.createElement("textarea");
+      newInputElement.value = value.replaceAll(String.fromCharCode(16),"\r\n");
       modalFormInputResize.setAttribute("data-input-type", "textarea");
       modalFormInputResize.innerHTML = "<i class=\"fas fa-compress-alt\"></i>";
       setUserData("useTextarea", true);
       break;
     case "textarea":
       newInputElement = document.createElement("input");
+      //newInputElement.value = value.replaceAll(String.fromCharCode(16)," ");
+      newInputElement.value = value;
       newInputElement.type = "text";
       modalFormInputResize.setAttribute("data-input-type", "input");
       modalFormInputResize.innerHTML = "<i class=\"fas fa-expand-alt\"></i>";
@@ -445,18 +460,25 @@ function toggleInputSize(type) {
   newInputElement.id = "modalFormInput";
   newInputElement.setAttribute("tabindex", 0);
   newInputElement.setAttribute("class", "input is-medium");
+
+  // if(userData.useTextarea) {
+  //   value.replaceAll(String.fromCharCode(16),"\r\n");
+  // } else {
+  //   value.replaceAll(String.fromCharCode(16)," ");
+  // }
+
+  //newInputElement.value = value;
   // replace old element with the new one
   document.getElementById("modalFormInput").replaceWith(newInputElement);
   // replace special char with line break before passing it to textarea
-  if(userData.useTextarea && modalForm.getAttribute("data-item")) document.getElementById("modalFormInput").value = document.getElementById("modalForm").getAttribute("data-item").replaceAll(String.fromCharCode(16),"\r\n");
+  //if(userData.useTextarea && modalForm.getAttribute("data-item")) document.getElementById("modalFormInput").value = document.getElementById("modalForm").getAttribute("data-item").replaceAll(String.fromCharCode(16),"\r\n");
   // replace special char with space before passing it to regular input
-  if(!userData.useTextarea && modalForm.getAttribute("data-item")) document.getElementById("modalFormInput").value = document.getElementById("modalForm").getAttribute("data-item").replaceAll(String.fromCharCode(16)," ");
+  //if(!userData.useTextarea && modalForm.getAttribute("data-item")) document.getElementById("modalFormInput").value = document.getElementById("modalForm").getAttribute("data-item").replaceAll(String.fromCharCode(16)," ");
+
 
   positionAutoCompleteContainer();
   resizeInput(document.getElementById("modalFormInput"));
-  // document.getElementById("modalFormInput").addEventListener("keyup", () => {
-  //   modalFormInputEvent();
-  // });
+
   document.getElementById("modalFormInput").onfocus = function() {
     modalForm.classList.add("is-focused");
   }

src/js/view.mjs

@@ -114,8 +114,10 @@ function toggle(toggleName, variable) {
     const toggle = document.getElementById(toggleName);
     if(userData[toggle.id]==false || variable) {
       userData[toggle.id] = true;
+      toggle.checked = true;
     } else {
       userData[toggle.id] = false;
+      toggle.checked = false;
     }
     if(toggle.id==="compactView" && userData[toggle.id]) {
       body.classList.add("compact");

src/scss/drawer.scss

@@ -144,6 +144,7 @@
       }
       .todoFilterHint {
         cursor: pointer;
+        opacity: 0.5;
       }
     }
     table tr td:nth-child(odd) {

test/preferences_existent/user-preferences.json

-{"theme":"light","width":1538,"height":863,"horizontal":382,"vertical":577,"maximizeWindow":false,"notifications":true,"useTextarea":false,"compactView":false,"matomoEvents":false,"drawerWidth":"500","showDueIsPast":true,"showDueIsFuture":true,"showDueIsToday":true,"showHidden":false,"showCompleted":true,"sortCompletedLast":false,"sortBy":["priority","dueString","contexts","projects"],"zoom":"100","tray":false,"showEmptyFilters":true,"dismissedNotifications":[-1319247018],"dismissedMessages":[],"hideFilterCategories":[],"language":"en","uid":"TESTING","path":"test/preferences_existent/todo.txt","files":[[1,"test/preferences_existent/todo.txt"]],"file":"test/preferences_existent/todo.txt","filterDrawer":false,"selectedFilters":[],"viewDrawer":false,"sortByLevel":["priority","dueString","contexts","projects"],"deferredTodos":true,"fileTabs":true}
\ No newline at end of file
+{"theme":"light","width":1538,"height":863,"horizontal":46,"vertical":29,"maximizeWindow":true,"notifications":true,"useTextarea":false,"compactView":false,"matomoEvents":false,"drawerWidth":"500","showDueIsPast":true,"showDueIsFuture":true,"showDueIsToday":true,"showHidden":false,"showCompleted":true,"sortCompletedLast":false,"sortBy":["priority","dueString","contexts","projects"],"zoom":"100","tray":false,"showEmptyFilters":true,"dismissedNotifications":[-1319247018],"dismissedMessages":[],"hideFilterCategories":[],"language":"en","uid":"TESTING","path":"test/preferences_existent/todo.txt","files":[[1,"test/preferences_existent/todo.txt"]],"file":"test/preferences_existent/todo.txt","filterDrawer":false,"selectedFilters":[],"viewDrawer":false,"sortByLevel":["priority","dueString","contexts","projects"],"deferredTodos":true,"fileTabs":true}
\ No newline at end of file

test/todoModal.js

@@ -27,47 +27,124 @@ describe("Add/Edit window", function () {
     const todoTableContainer = await app.client.$("#todoTable");
     const todos = await todoTableContainer.$$(".todo");
     const todo = await todos[8];
-    setTimeout(async () => {
-      await todo.click();
-      await modalForm.waitForDisplayed({ timeout: 10000 });
-      const modalFormInput = await app.client.$("#modalFormInput");
-      const value = await modalFormInput.getValue();
-      assert.equal(value, "2021-04-03 Todo with due date tomorrow due:2021-06-11");
-    }, 1000);
+    await todo.click();
+    await modalForm.waitForDisplayed({ timeout: 10000 });
+    const modalFormInput = await app.client.$("#modalFormInput");
+    const value = await modalFormInput.getValue();
+    assert.equal(value, "2021-04-03 Todo with due date tomorrow due:2021-06-11");
+  })
+
+  it("Todo is clicked and a context is appended", async () => {
+    const modalForm = await app.client.$("#modalForm");
+    const todoTableContainer = await app.client.$("#todoTable");
+    const todos = await todoTableContainer.$$(".todo");
+    const todo = await todos[8];
+    await todo.click();
+    await modalForm.waitForDisplayed({ timeout: 10000 });
+    let modalFormInput = await app.client.$("#modalFormInput");
+    let value = await modalFormInput.getValue();
+    if(value!=="2021-04-03 Todo with due date tomorrow due:2021-06-11") throw new Error("Value differs from what is expected");
+    await modalFormInput.setValue(value + " @");
+    const autoCompleteContainer = await app.client.$("#autoCompleteContainer");
+    const contexts = await autoCompleteContainer.$$("button");
+    await contexts[2].click();
+    modalFormInput = await app.client.$("#modalFormInput");
+    value = await modalFormInput.getValue();
+    if(value!=="2021-04-03 Todo with due date tomorrow due:2021-06-11 @phone ") throw new Error("Value differs from what is expected");
   })
 
   it("Modal is opened, autocomplete shown and third project added to todo input field", async () => {
     const navBtnAddTodo = await app.client.$("#navBtnAddTodo");
     let modalFormInput = await app.client.$("#modalFormInput");
     const autoCompleteContainer = await app.client.$("#autoCompleteContainer");
-    setTimeout(async () => {
-      navBtnAddTodo.click();
-      await modalFormInput.setValue("+");
-      const projects = await autoCompleteContainer.$$(".button");
-      projects[2].click();
-      modalFormInput = await app.client.$("#modalFormInput");
-      const value = await modalFormInput.getValue();
-      assert.equal(value, "+PeaceLoveAndHappiness ")
-    }, 1000);
+    navBtnAddTodo.click();
+    await modalFormInput.setValue("+");
+    const projects = await autoCompleteContainer.$$("button");
+    projects[2].click();
+    modalFormInput = await app.client.$("#modalFormInput");
+    const value = await modalFormInput.getValue();
+    assert.equal(value, "+PeaceLoveAndHappiness ")
   })
-
+  //
   it("Modal is opened, input is resized, autocomplete shown and second context added to todo input field", async () => {
     const navBtnAddTodo = await app.client.$("#navBtnAddTodo");
     const autoCompleteContainer = await app.client.$("#autoCompleteContainer");
     let modalFormInput = await app.client.$("#modalFormInput");
     let modalFormInputResize = await app.client.$("#modalFormInputResize");
-    setTimeout(async () => {
-      navBtnAddTodo.click();
-      modalFormInputResize.click();
-      await modalFormInput.setValue("@");
-      const contexts = await autoCompleteContainer.$$(".button");
-      await contexts[2].click();
-      modalFormInput = await app.client.$("#modalFormInput");
-      const value = await modalFormInput.getValue();
-      modalFormInputResize = await app.client.$("#modalFormInputResize");
-      modalFormInputResize.click();
-      assert.equal(value, "@phone ")
-    }, 1000);
+    navBtnAddTodo.click();
+    modalFormInputResize.click();
+    await modalFormInput.setValue("@");
+    const contexts = await autoCompleteContainer.$$("button");
+    await contexts[2].click();
+    modalFormInput = await app.client.$("#modalFormInput");
+    const value = await modalFormInput.getValue();
+    modalFormInputResize = await app.client.$("#modalFormInputResize");
+    modalFormInputResize.click();
+    assert.equal(value, "@phone ")
+  })
+
+  it("Modal is opened, input field is resized to textarea, multi lined content is inserted, switched back to input and checked for correct replacement", async () => {
+    const modalForm = await app.client.$("#modalForm");
+    const navBtnAddTodo = await app.client.$("#navBtnAddTodo");
+    await navBtnAddTodo.waitForClickable({ timeout: 10000 });
+    navBtnAddTodo.click();
+    await modalForm.waitForDisplayed({ timeout: 10000 });
+    let modalFormInputResize = await app.client.$("#modalFormInputResize");
+    modalFormInputResize.click();
+    let modalFormInput = await app.client.$("#modalFormInput");
+    let tag = await modalFormInput.getProperty("tagName");
+    if(tag!=="TEXTAREA") throw new Error("Input has not switched to textarea");
+    await modalFormInput.setValue("line1\nline2\nline3\nline4");
+    modalFormInputResize.click();
+    modalFormInput = await app.client.$("#modalFormInput");
+    let value = await modalFormInput.getValue();
+    if(value!=="line1line2line3line4") throw new Error("Switch did no replace with correct value");
   })
 
+  // it("Modal is opened, footer buttons are clicked", async () => {
+  //   const modalForm = await app.client.$("#modalForm");
+  //   const todoTableContainer = await app.client.$("#todoTable");
+  //   let todos = await todoTableContainer.$$(".todo");
+  //   let todo = await todos[8];
+  //   todo.click();
+  //
+  //   const btnSave = await app.client.$("#btnSave");
+  //   btnSave.click();
+  //
+  //   todo.click();
+  //   await modalForm.waitForDisplayed({ timeout: 10000 });
+  //
+  //   const btnCancel = await app.client.$("#btnCancel");
+  //   btnCancel.click();
+  //
+  //   todo.click();
+  //   await modalForm.waitForDisplayed({ timeout: 10000 });
+  //
+  //   let btnItemStatus = await app.client.$("#btnItemStatus");
+  //   btnItemStatus.click();
+  //
+  //   todo.click();
+  //   //await modalForm.waitForDisplayed({ timeout: 10000 });
+  //
+  //   let modalFormInput = await app.client.$("#modalFormInput");
+  //   let value = await modalFormInput.getValue();
+  //
+  //   console.log(modalFormInput);
+  //
+  //   if(value.search("x 202" >= 0)) throw new Error("1Got an unexpected value in input field");
+  //
+  //   btnItemStatus.click();
+  //
+  //   todos = await todoTableContainer.$$(".todo");
+  //   todo = await todos[8];
+  //
+  //   todo.click();
+  //   await modalForm.waitForDisplayed({ timeout: 10000 });
+  //
+  //   modalFormInput = await app.client.$("#modalFormInput");
+  //   value = await modalFormInput.getValue();
+  //
+  //   if(value.search("x 202" === -1)) throw new Error("2Got an unexpected value in input field");
+  // })
+
 })