From 8ca79d9a17c9ce76f860ad5b304413fe97bf4f04 Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Wed, 5 Dec 2012 14:47:28 -0500
Subject: [PATCH] Search field for tasks

Fixes #2103
---
 UI/Scheduler/UIxCalListingActions.m           |  2 +-
 .../UIxAdministrationFilterPanel.wox          | 19 +++--
 .../ContactsUI/UIxContactsFilterPanel.wox     | 27 ++++---
 UI/Templates/MailerUI/UIxMailFilterPanel.wox  | 31 ++++----
 .../SchedulerUI/UIxCalFilterPanel.wox         | 19 +++--
 UI/Templates/SchedulerUI/UIxCalMainView.wox   | 15 +++-
 UI/WebServerResources/AdministrationUI.js     | 30 ++++----
 UI/WebServerResources/ContactsUI.js           |  6 +-
 UI/WebServerResources/MailerUI.js             |  4 +-
 UI/WebServerResources/SchedulerUI.css         |  4 +-
 UI/WebServerResources/SchedulerUI.js          | 27 +++++--
 UI/WebServerResources/generic.css             |  4 +-
 UI/WebServerResources/generic.js              | 73 +++++++++++--------
 13 files changed, 145 insertions(+), 116 deletions(-)

diff --git a/UI/Scheduler/UIxCalListingActions.m b/UI/Scheduler/UIxCalListingActions.m
index 0e37d3bd4..cbb0b0087 100644
--- a/UI/Scheduler/UIxCalListingActions.m
+++ b/UI/Scheduler/UIxCalListingActions.m
@@ -211,11 +211,11 @@ static NSArray *tasksFields = nil;
   user = [context activeUser];
   userLogin = [user login];
 
+  title = [request formValueForKey: @"search"];
   param = [request formValueForKey: @"filterpopup"];
   if ([param length])
     {
       [self _setupDatesWithPopup: param andUserTZ: userTimeZone];
-      title = [request formValueForKey: @"search"];
     }
   else
     {
diff --git a/UI/Templates/AdministrationUI/UIxAdministrationFilterPanel.wox b/UI/Templates/AdministrationUI/UIxAdministrationFilterPanel.wox
index 4c8b24427..705241c1b 100644
--- a/UI/Templates/AdministrationUI/UIxAdministrationFilterPanel.wox
+++ b/UI/Templates/AdministrationUI/UIxAdministrationFilterPanel.wox
@@ -5,17 +5,16 @@
     xmlns:const="http://www.skyrix.com/od/constant"
     xmlns:label="OGo:label"
     >
-    <div class="menu" id="searchMenu">
-      <ul id="searchOptions" class="choiceMenu">
-        <li id="name_or_address"><var:string
-	    label:value="Name or Email"/></li>
-      </ul>
-    </div>
-
-    <div id="filterPanel">
+    <div class="filterPanel" data-search="admin">
+      <div class="menu" id="searchMenu">
+        <ul class="choiceMenu">
+          <li data-option="name_or_address"><var:string
+            label:value="Name or Email"/></li>
+        </ul>
+      </div>
       <span class="searchBox" style="float: right;">
-        <input id="searchCriteria" name="criteria" type="hidden" var:value="searchCriteria" />
-        <input id="searchValue" class="textField" autocomplete="off" name="search"
+        <input name="criteria" type="hidden" var:value="searchCriteria" />
+        <input name="search" class="textField" autocomplete="off"
 	  menuid="searchMenu"
 	  type="text" var:value="searchText" />
       </span>
diff --git a/UI/Templates/ContactsUI/UIxContactsFilterPanel.wox b/UI/Templates/ContactsUI/UIxContactsFilterPanel.wox
index 8dca00abe..672ce6e24 100644
--- a/UI/Templates/ContactsUI/UIxContactsFilterPanel.wox
+++ b/UI/Templates/ContactsUI/UIxContactsFilterPanel.wox
@@ -5,21 +5,20 @@
     xmlns:const="http://www.skyrix.com/od/constant"
     xmlns:label="OGo:label"
     >
-    <div class="menu" id="searchMenu">
-      <ul id="searchOptions" class="choiceMenu">
-        <li id="name_or_address"><var:string
-	    label:value="Name or Email"/></li>
-        <li id="category"><var:string label:value="Category"/></li>
-        <li id="organization"><var:string label:value="Organization"/></li>
-      </ul>
-    </div>
-
-    <div id="filterPanel">
+    <div class="filterPanel" data-search="contacts">
+      <div class="menu" id="searchMenu">
+        <ul id="searchOptions" class="choiceMenu">
+          <li data-option="name_or_address"><var:string
+            label:value="Name or Email"/></li>
+          <li data-option="category"><var:string label:value="Category"/></li>
+          <li data-option="organization"><var:string label:value="Organization"/></li>
+        </ul>
+      </div>
       <span class="searchBox" style="float: right;">
-        <input id="searchCriteria" name="criteria" type="hidden" var:value="searchCriteria" />
-        <input id="searchValue" class="textField" autocomplete="off" name="search"
-	  menuid="searchMenu"
-	  type="text" var:value="searchText" />
+        <input name="criteria" type="hidden" var:value="searchCriteria" />
+        <input name="search" class="textField" autocomplete="off"
+               menuid="searchMenu"
+               type="text" var:value="searchText" />
       </span>
     </div>
   </container>
diff --git a/UI/Templates/MailerUI/UIxMailFilterPanel.wox b/UI/Templates/MailerUI/UIxMailFilterPanel.wox
index 83a774a3f..a521b664a 100644
--- a/UI/Templates/MailerUI/UIxMailFilterPanel.wox
+++ b/UI/Templates/MailerUI/UIxMailFilterPanel.wox
@@ -5,25 +5,24 @@
     xmlns:const="http://www.skyrix.com/od/constant"
     xmlns:label="OGo:label"
     >
-    <div class="menu" id="searchMenu">
-      <ul id="searchOptions" class="choiceMenu">
-        <li id="subject"><var:string label:value="Subject"/></li>
-        <li id="sender"><var:string label:value="Sender"/></li>
-        <li id="subject_or_sender"><var:string
-	    label:value="Subject or Sender"/></li>
-        <li id="to_or_cc"><var:string label:value="To or Cc"/></li>
-        <li id="entire_message"><var:string
-	    label:value="Entire Message"/></li>
-      </ul>
-    </div>
-
-    <div id="filterPanel">
+    <div class="filterPanel" data-search="mail">
+      <div class="menu" id="searchMenu">
+        <ul class="choiceMenu">
+          <li data-option="subject"><var:string label:value="Subject"/></li>
+          <li data-option="sender"><var:string label:value="Sender"/></li>
+          <li data-option="subject_or_sender"><var:string
+            label:value="Subject or Sender"/></li>
+          <li data-option="to_or_cc"><var:string label:value="To or Cc"/></li>
+          <li data-option="entire_message"><var:string
+            label:value="Entire Message"/></li>
+        </ul>
+      </div>
       <var:if condition="hideFrame" const:negate="YES"
         ><span class="searchBox" style="float: right">
-          <input id="searchCriteria" name="criteria" type="hidden" var:value="searchCriteria" />
-          <input id="searchValue"
+          <input name="criteria" type="hidden" var:value="searchCriteria" />
+          <input name="search"
             class="textField"
-            autocomplete="off" name="search" type="text" var:value="searchText"
+            autocomplete="off" type="text" var:value="searchText"
 	    menuid="searchMenu" />
         </span>
       </var:if>
diff --git a/UI/Templates/SchedulerUI/UIxCalFilterPanel.wox b/UI/Templates/SchedulerUI/UIxCalFilterPanel.wox
index 05a9ad293..b98d49bdb 100644
--- a/UI/Templates/SchedulerUI/UIxCalFilterPanel.wox
+++ b/UI/Templates/SchedulerUI/UIxCalFilterPanel.wox
@@ -5,19 +5,18 @@
     xmlns:const="http://www.skyrix.com/od/constant"
     xmlns:label="OGo:label"
     >
-    <div class="menu" id="searchMenu">
-      <ul id="searchOptions" class="choiceMenu">
-        <li><var:string label:value="Title or Description"/></li>
-      </ul>
-    </div>
-
-    <div id="filterPanel">
+    <div class="filterPanel" data-search="events">
+      <div class="menu" id="eventSearchMenu">
+        <ul class="choiceMenu">
+          <li data-option="title"><var:string label:value="Title or Description"/></li>
+        </ul>
+      </div>
       <span class="searchBox" style="float: right">
         <input id="searchCriteria" name="criteria" type="hidden" var:value="searchCriteria" />
         <input id="searchValue"
-          class="textField"
-          autocomplete="off" name="search" type="text" var:value="searchText"
-	  menuid="searchMenu" />
+               class="textField"
+               autocomplete="off" name="search" type="text" var:value="searchText"
+               menuid="eventSearchMenu" />
       </span>
 
       <var:string label:value="View:" />
diff --git a/UI/Templates/SchedulerUI/UIxCalMainView.wox b/UI/Templates/SchedulerUI/UIxCalMainView.wox
index 0c6db65c1..d95e6e442 100644
--- a/UI/Templates/SchedulerUI/UIxCalMainView.wox
+++ b/UI/Templates/SchedulerUI/UIxCalMainView.wox
@@ -170,9 +170,20 @@
           </table>
         </div>
         <div id="tasksListView" class="tab">
-          <label>
+          <div class="filterPanel" data-search="tasks">
+            <div class="menu" id="taskSearchMenu">
+              <ul class="choiceMenu">
+                <li data-option="title"><var:string label:value="Title or Description"/></li>
+              </ul>
+            </div>
+            <span class="searchBox" style="float: right">
+              <input name="criteria" type="hidden" />
+              <input name="search" class="textField"
+                     autocomplete="off" type="text"
+                     menuid="taskSearchMenu" />
+            </span>
             <input id="showHideCompletedTasks" type="checkbox" class="checkBox"/><var:string label:value="Show completed tasks"/>
-          </label>
+          </div>
           <table id="tasksList" cellspacing="0">
             <thead>
               <tr>
diff --git a/UI/WebServerResources/AdministrationUI.js b/UI/WebServerResources/AdministrationUI.js
index a65c1ddfc..31071d70e 100644
--- a/UI/WebServerResources/AdministrationUI.js
+++ b/UI/WebServerResources/AdministrationUI.js
@@ -6,8 +6,8 @@ var usersRightsWindowWidth = 450;
 
 /* ACLs module */
 
-function onSearchFormSubmit() {
-    var searchValue = $("searchValue");
+function onSearchFormSubmit(panel) {
+    var searchValue = panel.down('[name="search"]');
     var encodedValue = encodeURI(searchValue.value);
     
     if (encodedValue.blank()) {
@@ -61,20 +61,18 @@ function buildUsersTree(treeDiv, response) {
     var isUserDialog = false;
     var multiplier = ((isUserDialog) ? 1 : 2);
     
-    if (response.length > 0) {
-        for (var i = 0; i < response.length; i++)
-            addUserLineToTree(d, 1 + i * multiplier, response[i]);
-        treeDiv.innerHTML = "";
-        treeDiv.appendChild(d.domObject ());
-        treeDiv.clean = false;
-        for (var i = 0; i < response.length; i++) {
-            if (!isUserDialog) {
-                var toggle = $("tgd" + (1 + i * 2));
-                toggle.observe ("click", onUserNodeToggle);
-            }
-            var sd = $("sd" + (1 + i * multiplier));
-            sd.observe("click", onTreeItemClick);
+    for (var i = 0; i < response.length; i++)
+        addUserLineToTree(d, 1 + i * multiplier, response[i]);
+    treeDiv.innerHTML = "";
+    treeDiv.appendChild(d.domObject());
+    treeDiv.clean = false;
+    for (var i = 0; i < response.length; i++) {
+        if (!isUserDialog) {
+            var toggle = $("tgd" + (1 + i * 2));
+            toggle.observe ("click", onUserNodeToggle);
         }
+        var sd = $("sd" + (1 + i * multiplier));
+        sd.observe("click", onTreeItemClick);
     }
 }
 
@@ -220,7 +218,7 @@ function initAdministration() {
             $("helpDialog").hide();
         });
 
-    var searchValue = $("searchValue");
+    var searchValue = $$('[data-search="admin"] [name="search"]').first();
     searchValue.focus();
 }
 
diff --git a/UI/WebServerResources/ContactsUI.js b/UI/WebServerResources/ContactsUI.js
index adf579bbb..07f967ef0 100644
--- a/UI/WebServerResources/ContactsUI.js
+++ b/UI/WebServerResources/ContactsUI.js
@@ -18,9 +18,9 @@ function openContactsFolder(contactsFolder, reload, idx) {
         var url = URLForFolderID(Contact.currentAddressBook, "Contacts") +
             "/view?noframe=1";
 
-        var searchValue = search["value"];
+        var searchValue = search["contacts"]["value"];
         if (searchValue && searchValue.length > 0)
-            url += ("&search=" + search["criteria"]
+            url += ("&search=" + search["contacts"]["criteria"]
                     + "&value=" + escape(searchValue.utf8encode()));
         var sortAttribute = sorting["attribute"];
         if (sortAttribute && sortAttribute.length > 0)
@@ -613,7 +613,7 @@ function onFolderSelectionChange(event) {
     }
     else {
         search = {};
-        $("searchValue").value = "";
+        $$('[name="search"]').each(function(input) { input.value = "" });
         initCriteria();
         openContactsFolder(nodes[0].getAttribute("id"));
     }
diff --git a/UI/WebServerResources/MailerUI.js b/UI/WebServerResources/MailerUI.js
index 46113e61f..8d23e2430 100644
--- a/UI/WebServerResources/MailerUI.js
+++ b/UI/WebServerResources/MailerUI.js
@@ -784,9 +784,9 @@ function openMailbox(mailbox, reload) {
             lastClickedRow = -1; // from generic.js
         }
 
-        var searchValue = search["value"];
+        var searchValue = search["mail"]["value"];
         if (searchValue && searchValue.length > 0) {
-            urlParams.set("search", search["criteria"]);
+            urlParams.set("search", search["mail"]["criteria"]);
             urlParams.set("value", escape(searchValue.utf8encode()));
         }
         var sortAttribute = sorting["attribute"];
diff --git a/UI/WebServerResources/SchedulerUI.css b/UI/WebServerResources/SchedulerUI.css
index 597d67c9f..e09af2f73 100644
--- a/UI/WebServerResources/SchedulerUI.css
+++ b/UI/WebServerResources/SchedulerUI.css
@@ -277,11 +277,11 @@ TABLE#eventsList THEAD TD:last-child,
 TABLE#tasksList THEAD TD:last-child
 { border-right: 0px; }
 
-#filterPanel,
+.filterPanel,
 #schedulerTabs .tab label
 { display: block;
   margin: 0;
-  padding: 5px;
+  padding: 0 0 5px 5px;
   background-color: #eee;
   background-color: #E6E7E6; }
 
diff --git a/UI/WebServerResources/SchedulerUI.js b/UI/WebServerResources/SchedulerUI.js
index b177bb014..00d15c5c8 100644
--- a/UI/WebServerResources/SchedulerUI.js
+++ b/UI/WebServerResources/SchedulerUI.js
@@ -2169,14 +2169,17 @@ function onHeaderClick(event) {
     Event.stop(event);
 }
 
-function refreshCurrentFolder() {
-    refreshEvents();
+function refreshCurrentFolder(id) {
+    if (id == 'tasks')
+        refreshTasks();
+    else
+        refreshEvents();
 }
 
 /* refreshes the "unifinder" list */
 function refreshEvents() {
     var titleSearch;
-    var value = search["value"];
+    var value = search["events"]["value"];
 
     if (value && value.length)
         titleSearch = "&search=" + escape(value.utf8encode());
@@ -2193,7 +2196,15 @@ function refreshEvents() {
 }
 
 function refreshTasks(setUserDefault) {
+    var titleSearch;
+    var value = search["tasks"]["value"];
     var setud;
+
+    if (value && value.length)
+        titleSearch = "&search=" + escape(value.utf8encode());
+    else
+        titleSearch = "";
+
     /* TODO: the logic behind this should be reimplemented properly:
        the "taskslist" method should save the status when the 'show-completed'
        is set to true and revert to the current status when that parameter is
@@ -2201,10 +2212,13 @@ function refreshTasks(setUserDefault) {
     setud = "";
     if (setUserDefault == 1)
       setud = "&setud=1";
+
     refreshAlarms();
+
     return _loadTasksHref("taskslist?show-completed=" + showCompletedTasks
                           + "&asc=" + sorting["task-ascending"]
-                          + "&sort=" + sorting["task-attribute"]);
+                          + "&sort=" + sorting["task-attribute"]
+                          + titleSearch);
 }
 
 function refreshEventsAndDisplay() {
@@ -2700,11 +2714,12 @@ function getMenus() {
                                        onCalendarNew, onCalendarRemove,
                                        "-", onCalendarExport, onCalendarImport,
                                        null, "-", null, "-", onMenuSharing);
-    menus["searchMenu"] = new Array(setSearchCriteria);
+    menus["eventSearchMenu"] = new Array(setSearchCriteria);
 
     menus["tasksListMenu"] = new Array (editEvent, newTask, "-",
                                         marksTasksAsCompleted, deleteEvent, "-",
 					onMenuRawTask);
+    menus["taskSearchMenu"] = new Array(setSearchCriteria);
 
     var calendarsMenu = $("calendarsMenu");
     if (calendarsMenu)
@@ -3361,4 +3376,4 @@ function initScheduler() {
     Event.observe(window, "resize", onWindowResize);
 }
 
-document.observe("dom:loaded", initScheduler);
+document.observe("generic:loaded", initScheduler);
diff --git a/UI/WebServerResources/generic.css b/UI/WebServerResources/generic.css
index c87b2e6aa..277cfa5ba 100644
--- a/UI/WebServerResources/generic.css
+++ b/UI/WebServerResources/generic.css
@@ -443,7 +443,7 @@ DIV.dragHandle:active
 { background-color: #99a; }
 
 /* search fields */
-DIV#filterPanel
+DIV.filterPanel
 { height: 2em;
   vertical-align: middle;
   width: 100%;
@@ -770,7 +770,7 @@ BUTTON.comboBoxButton:active
   background-color: #d6d7d6;
 }
 
-INPUT#searchValue
+INPUT[name="search"]
 { margin-right: 1em;
   width: 20em;
   padding-left: 24px;
diff --git a/UI/WebServerResources/generic.js b/UI/WebServerResources/generic.js
index 1236c5ddd..118465e31 100644
--- a/UI/WebServerResources/generic.js
+++ b/UI/WebServerResources/generic.js
@@ -1073,14 +1073,15 @@ function popupSearchMenu(event) {
 }
 
 function setSearchCriteria(event) {
-    var searchValue = $("searchValue");
-    var searchCriteria = $("searchCriteria");
+    var panel = $(this).up('.filterPanel');
+    var searchValue = panel.down('[name="search"]');
+    var searchCriteria = panel.down('[name="criteria"]');
 
     if (searchValue.ghostPhrase == searchValue.value)
         searchValue.value = "";
 
     searchValue.ghostPhrase = this.innerHTML;
-    searchCriteria.value = this.getAttribute('id');
+    searchCriteria.value = this.readAttribute('data-option');
 
     if (this.parentNode.chosenNode)
         this.parentNode.chosenNode.removeClassName("_chosen");
@@ -1092,20 +1093,18 @@ function setSearchCriteria(event) {
         searchValue.lastSearch = "";
         this.parentNode.chosenNode = this;
 
-        onSearchFormSubmit();
+        onSearchFormSubmit(panel);
     }
 }
 
 function configureSearchField() {
-    var searchValue = $("searchValue");
-
-    if (searchValue) {
-        searchValue.observe("click", popupSearchMenu);
-        searchValue.observe("blur", onSearchBlur);
-        searchValue.observe("focus", onSearchFocus);
-        searchValue.observe("keydown", onSearchKeyDown);
-        searchValue.observe("mousedown", onSearchMouseDown);
-    }
+    $$('.searchBox [name="search"]').each(function(searchValue) {
+        searchValue.on("click", popupSearchMenu);
+        searchValue.on("blur", onSearchBlur);
+        searchValue.on("focus", onSearchFocus);
+        searchValue.on("keydown", onSearchKeyDown);
+        searchValue.on("mousedown", onSearchMouseDown);
+    });
 }
 
 function onSearchMouseDown(event) {
@@ -1118,7 +1117,7 @@ function onSearchMouseDown(event) {
 }
 
 function onSearchFocus(event) {
-    ghostPhrase = this.ghostPhrase;
+    var ghostPhrase = this.ghostPhrase;
     if (this.value == ghostPhrase) {
         this.value = "";
         this.setAttribute("modified", "");
@@ -1130,15 +1129,16 @@ function onSearchFocus(event) {
 
 function onSearchBlur(event) {
     if (!this.value || this.value.blank()) {
+        var id = $(this).up('[data-search]').readAttribute('data-search');
         this.setAttribute("modified", "");
         this.setStyle({ color: "#909090" });
         this.value = this.ghostPhrase;
         if (this.timer)
             clearTimeout(this.timer);
-        search["value"] = "";
+        search[id]["value"] = "";
         if (this.lastSearch != "") {
             this.lastSearch = "";
-            refreshCurrentFolder();
+            refreshCurrentFolder(id);
         }
     } else if (this.value == this.ghostPhrase) {
         this.setAttribute("modified", "");
@@ -1160,43 +1160,47 @@ function IsCharacterKey(keyCode) {
 
 function onSearchKeyDown(event) {
     if (event.keyCode == Event.KEY_RETURN) {
+        var panel = $(this).up('.filterPanel');
         if (this.timer)
             clearTimeout(this.timer);
-        onSearchFormSubmit();
+        onSearchFormSubmit(panel);
         preventDefault(event);
     }
     else if (event.keyCode == Event.KEY_BACKSPACE
              || IsCharacterKey(event.keyCode)) {
+        var panel = $(this).up('.filterPanel');
         if (this.timer)
             clearTimeout(this.timer);
-        this.timer = setTimeout("onSearchFormSubmit()", 500);
+        this.timer = onSearchFormSubmit.delay(0.5, panel);
     }
 }
 
-function onSearchFormSubmit(event) {
-    var searchValue = $("searchValue");
-    var searchCriteria = $("searchCriteria");
+function onSearchFormSubmit(filterPanel) {
+    var id = filterPanel.readAttribute('data-search');
+    var searchValue = filterPanel.down('[name="search"]');
+    var searchCriteria = filterPanel.down('[name="criteria"]');
 
     if (searchValue.value != searchValue.ghostPhrase
         && (searchValue.value != searchValue.lastSearch
             && (searchValue.value.strip().length > minimumSearchLength
                 || searchValue.value.strip() == "." ))) {
-        search["criteria"] = searchCriteria.value;
-        search["value"] = searchValue.value;
+        search[id]["criteria"] = searchCriteria.value;
+        search[id]["value"] = searchValue.value;
         searchValue.lastSearch = searchValue.value;
-        refreshCurrentFolder();
+        refreshCurrentFolder(id);
     }
 }
 
 function initCriteria() {
-    var searchCriteria = $("searchCriteria");
-    var searchValue = $("searchValue");
-    var searchOptions = $("searchOptions");
-
-    if (searchValue && searchOptions) {
+    $$('[data-search]').each(function(element) {
+        var box = $(element);
+        var id = box.readAttribute('data-search');
+        var searchCriteria = box.down('[name="criteria"]');
+        var searchValue = box.down('[name="search"]');
+        var searchOptions = box.down('.choiceMenu');
         var firstOption = searchOptions.down("li");
         if (firstOption) {
-            searchCriteria.value = firstOption.getAttribute('id');
+            searchCriteria.value = firstOption.readAttribute('data-option');
             searchValue.ghostPhrase = firstOption.innerHTML;
             searchValue.lastSearch = "";
             if (searchValue.value == '') {
@@ -1209,9 +1213,11 @@ function initCriteria() {
                 searchOptions.chosenNode.removeClassName("_chosen");
             firstOption.addClassName("_chosen");
             searchOptions.chosenNode = firstOption;
+            // Initialize global array
+            search[id] = {};
         }
         searchValue.blur();
-    }
+    });
 }
 
 /* toolbar buttons */
@@ -1657,6 +1663,9 @@ function onLoadHandler(event) {
         progressImage.parentNode.removeChild(progressImage);
     $(document.body).observe("contextmenu", onBodyClickContextMenu);
 
+    // Some module are initialized only once this method is completed
+    document.fire('generic:loaded');
+
     onFinalLoadHandler();
 }
 
@@ -1862,7 +1871,7 @@ function parent$(element) {
 }
 
 /* stubs */
-function refreshCurrentFolder() {
+function refreshCurrentFolder(id) {
 }
 
 function configureDragHandles() {