Fixed autocomplete #129, fixed renaming issues #47

README.md

@@ -92,13 +92,14 @@ A prioritized backlog of new features and known issues can be found <a href="htt
   - "rec:y" (annually)
   - also more specific recurrences are possible: "rec:2d" (every 2nd day)
 * Available contexts and projects will be suggested according to your input
-* Todos can be filtered by contexts and projects
+* Todos can be filtered by contexts, projects and priorities
+* Filters can be bulk changed by right clicking on them
+* Filters are sorted alphanummerically
 * Todos can be sorted and grouped by
   - Priorites
   - Due dates
   - Projects
   - Contexts
-* Filters are sorted alphanummerically
 * Todos can be looked up using full-text search
 * Hyperlinks are detected automatically and can be clicked using the icon
 * Alarms will be triggered when a todo is due tomorrow or today

package.json

 {
   "name": "sleek",
   "productName": "sleek",
-  "version": "1.0.5-1",
+  "version": "1.0.5-2",
   "description": "Todo app based on todo.txt for Linux, Windows and MacOS, free and open-source",
   "synopsis": "Todo app based on todo.txt for Linux, Windows and MacOS, free and open-source",
   "category": "ProjectManagement",

src/css/style.css

@@ -781,11 +781,6 @@ nav ul:nth-child(2) {
   position: fixed;
   z-index: 60;
 }
-#filterMenu #filterMenuSave {
-  cursor: pointer;
-  border: none;
-  border-right: 1px solid #f5f5f5;
-}
 #filterMenu #filterMenuDelete {
   color: #ff3860;
 }

src/index.html

@@ -637,22 +637,17 @@
       </div>
     </div>
     <div id="autoCompleteContainer" class="drawer card"></div>
-
-
     <div id="filterMenu" class="flex-row ">
-      <form class="card">
+      <div class="card">
         <div class="card-content">
           <input id="filterMenuInput" class="input" type="text">
         </div>
         <footer class="card-footer">
-          <input type="submit" id="filterMenuSave" class="card-footer-item">
+          <a href="#" id="filterMenuSave" class="card-footer-item"></a>
           <a href="#" id="filterMenuDelete" class="card-footer-item"></a>
         </footer>
-      </form>
+      </div>
     </div>
-
-
-
     <div id="modalChangeFile" class="modal" tabindex="0">
       <div class="modal-background"></div>
       <div class="modal-content">

src/js/filters.mjs

@@ -2,6 +2,7 @@
 import { userData, handleError, translations, setUserData, startBuilding, _paq } from "../render.js";
 import { items, generateGroups, generateTable } from "./todos.mjs";
 import { isToday, isPast, isFuture } from "./date.mjs";
+
 const modalFormInput = document.getElementById("modalFormInput");
 const todoTableSearch = document.getElementById("todoTableSearch");
 const autoCompleteContainer = document.getElementById("autoCompleteContainer");
@@ -10,9 +11,17 @@ const filterMenu = document.getElementById("filterMenu");
 const filterMenuInput = document.getElementById("filterMenuInput");
 const filterMenuSave = document.getElementById("filterMenuSave");
 const filterMenuDelete = document.getElementById("filterMenuDelete");
-filterMenuSave.value = translations.save;
+
+let categories,
+    filtersCounted,
+    filtersCountedReduced,
+    selectedFilters,
+    container,
+    headline;
+
+filterMenuSave.innerHTML = translations.save;
 filterMenuDelete.innerHTML = translations.delete;
-let categories, filtersCounted, filtersCountedReduced, selectedFilters, container, headline;
+
 function saveFilter(newFilter, oldFilter, category) {
   items.objects.forEach((item) => {
     if(category!=="priority" && item[category]) {
@@ -27,14 +36,15 @@ function saveFilter(newFilter, oldFilter, category) {
   //write the data to the file
   // a newline character is added to prevent other todo.txt apps to append new todos to the last line
   window.api.send("writeToFile", [items.objects.join("\n").toString() + "\n", userData.file]);
-
 }
 function deleteFilter(filter, category) {
   items.objects.forEach((item) => {
-    if(item[category]) {
+    if(category!=="priority" && item[category]) {
       const index = item[category].indexOf(filter);
       if(index!==-1) item[category].splice(index, 1);
       if(item[category].length===0) item[category] = null;
+    } else if(category==="priority" && item[category]===filter) {
+      item[category] = null;
     }
   });
   // persisted filters will be removed
@@ -327,16 +337,25 @@ function generateFilterButtons(category, autoCompleteValue, autoCompletePrefix,
         selectedFilters.forEach(function(item) {
           if(JSON.stringify(item) === '["'+filter+'","'+category+'"]') todoFiltersItem.classList.toggle("is-dark")
         });
-
-        // context menu
+        // add context menu
         todoFiltersItem.addEventListener("contextmenu", event => {
           filterMenu.style.left = event.x + "px";
           filterMenu.style.top = event.y + "px";
           filterMenu.classList.add("is-active");
           filterMenuInput.value = filter;
           filterMenuInput.focus();
+          filterMenuInput.addEventListener("keyup", function(event) {
+            if(event.key === "Escape") filterMenu.classList.remove("is-active");
+            if(event.key === "Enter") {
+              if(filterMenuInput.value!==filter && filterMenuInput.value) {
+                saveFilter(filterMenuInput.value, filter, category);
+              } else {
+                filterMenu.classList.remove("is-active");
+              }
+            }
+          });
           filterMenuSave.onclick = function() {
-            if(filterMenuInput.value!==filter) {
+            if(filterMenuInput.value!==filter && filterMenuInput.value) {
               saveFilter(filterMenuInput.value, filter, category);
             } else {
               filterMenu.classList.remove("is-active");
@@ -346,7 +365,6 @@ function generateFilterButtons(category, autoCompleteValue, autoCompletePrefix,
             deleteFilter(filter, category);
           }
         });
-
         if(filtersCountedReduced[filter]) {
           todoFiltersItem.innerHTML += " <span class=\"tag is-rounded\">" + filtersCountedReduced[filter] + "</span>";
           // create the event listener for filter selection by user
@@ -359,17 +377,13 @@ function generateFilterButtons(category, autoCompleteValue, autoCompletePrefix,
           todoFiltersItem.classList.add("is-greyed-out");
           todoFiltersItem.innerHTML += " <span class=\"tag is-rounded\">0</span>";
         }
-
       // autocomplete container
       } else {
         // add filter to input
         todoFiltersItem.addEventListener("click", () => {
-          // remove composed filter first, as it is going to be replaced with a filter from suggestion box
           if(autoCompleteValue) {
-            // only if input is not only the prefix, otherwise all existing prefixes will be removed
-            modalFormInput.value = modalFormInput.value.replace(" " + autoCompletePrefix+autoCompleteValue, "");
-            // add filter from suggestion box
-            modalFormInput.value += " " + autoCompletePrefix+todoFiltersItem.getAttribute("data-filter") + " ";
+            // remove composed filter first, then add selected filter
+            modalFormInput.value = modalFormInput.value.slice(0, caretPosition-autoCompleteValue.length) + todoFiltersItem.getAttribute("data-filter") + modalFormInput.value.slice(caretPosition) + " ";
           } else {
             // add button data value to the exact caret position
             modalFormInput.value = [modalFormInput.value.slice(0, caretPosition), todoFiltersItem.getAttribute('data-filter'), modalFormInput.value.slice(caretPosition)].join('') + " ";
@@ -391,4 +405,5 @@ function generateFilterButtons(category, autoCompleteValue, autoCompletePrefix,
     return Promise.reject(error);
   }
 }
+
 export { filterItems, generateFilterData, selectFilter, categories };

src/render.js

@@ -537,15 +537,11 @@ function registerKeyboardShortcuts() {
       }
     }, true)
     // shortcuts for search input field
-    todoTableSearch.addEventListener("keydown", function () {
+    todoTableSearch.addEventListener("keyup", function () {
       if(event.key === "Escape") todoTableSearch.blur();
     });
-    // shortcuts for filter menu input field
-    filterMenuInput.addEventListener("keydown", function () {
-      if(event.key === "Escape") filterMenu.classList.remove("is-active");
-    });
     // shortcuts for modal form
-    modalForm.addEventListener ("keydown", function(event) {
+    modalForm.addEventListener ("keyup", function(event) {
       // priority up
       if(!(event.ctrlKey || event.metaKey) && event.altKey && event.key === "ArrowUp") {
         form.setPriority("up");
@@ -598,8 +594,10 @@ function registerKeyboardShortcuts() {
     });
     // event for closing modal windows
     modal.forEach(function(element) {
-      element.addEventListener("keyup", function(event) {
-        if(event.key === "Escape") this.classList.remove("is-active");
+      element.addEventListener("keydown", function(event) {
+        if(event.key === "Escape" && !autoCompleteContainer.classList.contains("is-active")) {
+          this.classList.remove("is-active");
+        }
       });
     });
     autoCompleteContainer.addEventListener ("keydown", function() {

src/scss/style.scss

@@ -756,11 +756,7 @@ nav {
   display: none;
   position: fixed;
   z-index: 60;
-  #filterMenuSave {
-    cursor: pointer;
-    border: none;
-    border-right: 1px solid $almost-white;
-  }
+
   #filterMenuDelete {
     color: $has-text-danger;
   }