added a task search feature

diff --git a/TODO.TXT b/TODO.TXT
index 76f2474ac6ba2839cb4bd77ed3c43e8598be885f..a34c85eca7b0c53a312e2dbc6fd9b4ea6cb01eda 100644 (file)
--- a/TODO.TXT
+++ b/TODO.TXT
@@ -2,6 +2,5 @@
 -add a session timer when user logged in
 -don't give direct access to paths esp. when usr. is not logged in or that path must not be accessible
 -add a short animation loading progress bar when user did some actions to a task
--create 'task sorting' feature
--create 'task search' feature
+-create 'task sorting' feature (not now, maybe when im not lazy to change a lot of code)
 -when popup is open, the main window will be unaccessible
\ No newline at end of file

diff --git a/includes/dashboard.php b/includes/dashboard.php
index 453db9479c62ed101411a0803727d6506911bc53..01ab04a100b79b57225c797c85bc786f391e88b1 100644 (file)
--- a/includes/dashboard.php
+++ b/includes/dashboard.php
@@ -51,11 +51,11 @@
       <div>
         <div>
           <input type="search" id="search" placeholder="Search task...">
-          <select class="rpgui-dropdown" name="sort" id="sort">
+          <!-- <select class="rpgui-dropdown" name="sort" id="sort">
             <option value="all" selected>All</option>
             <option value="incomplete">Incomplete</option>
             <option value="complete">Complete</option>
-          </select>
+          </select> -->
         </div>
         
         <!-- action buttons for tasks -->
@@ -107,7 +107,8 @@
       </div>
     </main>
   </div>
-
+  
+  <script src="./js/search.js"></script>
   <script src="./js/tasks.js"></script>
 </body>
 </html>
\ No newline at end of file

diff --git a/js/search.js b/js/search.js
new file mode 100644 (file)
index 0000000..f6c2c7c
--- /dev/null
+++ b/js/search.js
@@ -0,0 +1,14 @@
+function searchFilter(query){
+  const taskItems = document.querySelectorAll('.task-item');
+
+  taskItems.forEach(function(taskItem){
+    const label = taskItem.querySelector('.task-label');
+    const text = label ? label.textContent.toLowerCase() : '';
+    taskItem.style.display = text.includes(query) ? 'block' : 'none';
+  });
+}
+
+document.getElementById('search').addEventListener('input', function(){
+  query = this.value.trim().toLowerCase();
+  searchFilter(query);
+});
\ No newline at end of file

diff --git a/js/tasks.js b/js/tasks.js
index 927d2d395caa3a111a5c5a6b3de68bd12db04358..f90529cb98410ad514b41091661c367723f24df9 100644 (file)
--- a/js/tasks.js
+++ b/js/tasks.js
@@ -15,9 +15,10 @@ function loadTasks(){
     if(Array.isArray(data) && data.length > 0){
       data.forEach(function(task){
         const div = document.createElement('div');
+        div.classList.add('task-item');
         div.innerHTML = `
           <input class="rpgui-checkbox" type="checkbox" id="${task.task_id}">
-          <label for="${task.task_id}">${task.task}</label>
+          <label for="${task.task_id}" class="task-label">${task.task}</label>
         `;
 
         taskBody.appendChild(div);
@@ -109,6 +110,7 @@ function addTask(){
     console.log('Message:', data.message);
     setTimeout(function(){
     loadTasks();
+    removeSearchInput();
     }, 500);
     setDisabledAttributesOnDeleteBtn();
     setDisabledAttributesOnEditBtn();
@@ -147,6 +149,7 @@ function editTask(){
     console.log(data);
     setTimeout(function(){
     loadTasks();
+    removeSearchInput();
     }, 500);
     setDisabledAttributesOnEditBtn();
     popupEditTaskClose();
@@ -174,6 +177,7 @@ function deleteTask(){
     console.log('Message:', data.message);
     setTimeout(function(){
     loadTasks();
+    removeSearchInput();
     }, 500);
     setDisabledAttributesOnDeleteBtn();
   })
@@ -223,6 +227,10 @@ function popupEditTaskClose(){
   popupWindow.style.visibility = 'hidden';
 }
 
+function removeSearchInput(){
+  document.getElementById('search').value = '';
+}
+
 
 // event listeners
 document.getElementById('new-task-popup-open').addEventListener('click', function(){