From 0db66953a78b704e3710b970ab11b87058bb3859 Mon Sep 17 00:00:00 2001
From: Frederic Guillot <fred@kanboard.net>
Date: Mon, 16 Feb 2015 23:02:47 -0500
Subject: Use chosen for board dropdown filters

---
 app/Core/Helper.php               |  4 ++--
 app/Template/board/filters.php    |  6 ++----
 app/Template/calendar/sidebar.php | 12 ++++++------
 assets/css/app.css                |  2 +-
 assets/css/src/board.css          |  2 +-
 assets/js/app.js                  | 11 +++++------
 assets/js/src/board.js            | 14 ++++++++++----
 7 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/app/Core/Helper.php b/app/Core/Helper.php
index 187fcfbb..9f69cee1 100644
--- a/app/Core/Helper.php
+++ b/app/Core/Helper.php
@@ -221,9 +221,9 @@ class Helper
      * @param  string  $class    CSS class
      * @return string
      */
-    public function formSelect($name, array $options, array $values = array(), array $errors = array(), $class = '')
+    public function formSelect($name, array $options, array $values = array(), array $errors = array(), array $attributes = array(), $class = '')
     {
-        $html = '<select name="'.$name.'" id="form-'.$name.'" class="'.$class.'">';
+        $html = '<select name="'.$name.'" id="form-'.$name.'" class="'.$class.'" '.implode(' ', $attributes).'>';
 
         foreach ($options as $id => $value) {
 
diff --git a/app/Template/board/filters.php b/app/Template/board/filters.php
index a5697f3f..fee8176c 100644
--- a/app/Template/board/filters.php
+++ b/app/Template/board/filters.php
@@ -49,12 +49,10 @@
             </ul>
         </li>
         <li>
-            <?= t('Filter by user') ?>
-            <?= $this->formSelect('user_id', $users) ?>
+            <?= $this->formSelect('user_id', $users, array(), array(), array('data-placeholder="'.t('Filter by user').'"')) ?>
         </li>
         <li>
-            <?= t('Filter by category') ?>
-            <?= $this->formSelect('category_id', $categories) ?>
+            <?= $this->formSelect('category_id', $categories, array(), array(), array('data-placeholder="'.t('Filter by category').'"')) ?>
         </li>
         <li>
             <a href="#" id="filter-due-date"><?= t('Filter by due date') ?></a>
diff --git a/app/Template/calendar/sidebar.php b/app/Template/calendar/sidebar.php
index 599b2912..b074ed91 100644
--- a/app/Template/calendar/sidebar.php
+++ b/app/Template/calendar/sidebar.php
@@ -4,37 +4,37 @@
             <?= t('Filter by user') ?>
         </li>
         <li>
-            <?= $this->formSelect('owner_id', $users_list, array(), array(), 'calendar-filter') ?>
+            <?= $this->formSelect('owner_id', $users_list, array(), array(), array(), 'calendar-filter') ?>
         </li>
         <li>
             <?= t('Filter by category') ?>
         </li>
         <li>
-            <?= $this->formSelect('category_id', $categories_list, array(), array(), 'calendar-filter') ?>
+            <?= $this->formSelect('category_id', $categories_list, array(), array(), array(), 'calendar-filter') ?>
         </li>
         <li>
             <?= t('Filter by column') ?>
         </li>
         <li>
-            <?= $this->formSelect('column_id', $columns_list, array(), array(), 'calendar-filter') ?>
+            <?= $this->formSelect('column_id', $columns_list, array(), array(), array(), 'calendar-filter') ?>
         </li>
         <li>
             <?= t('Filter by swimlane') ?>
         </li>
         <li>
-            <?= $this->formSelect('swimlane_id', $swimlanes_list, array(), array(), 'calendar-filter') ?>
+            <?= $this->formSelect('swimlane_id', $swimlanes_list, array(), array(), array(), 'calendar-filter') ?>
         </li>
         <li>
             <?= t('Filter by color') ?>
         </li>
         <li>
-            <?= $this->formSelect('color_id', $colors_list, array(), array(), 'calendar-filter') ?>
+            <?= $this->formSelect('color_id', $colors_list, array(), array(), array(), 'calendar-filter') ?>
         </li>
         <li>
             <?= t('Filter by status') ?>
         </li>
         <li>
-            <?= $this->formSelect('is_active', $status_list, array(), array(), 'calendar-filter') ?>
+            <?= $this->formSelect('is_active', $status_list, array(), array(), array(), 'calendar-filter') ?>
         </li>
     </ul>
 </div>
diff --git a/assets/css/app.css b/assets/css/app.css
index 031900f8..de7525ed 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -724,7 +724,7 @@ nav .active a {
 }
 /* board filters */
 .board-filters {
-    font-size: 0.9em;
+    font-size: 0.95em;
 }
 
 .filter-on {
diff --git a/assets/css/src/board.css b/assets/css/src/board.css
index 09366d33..00e0ad7c 100644
--- a/assets/css/src/board.css
+++ b/assets/css/src/board.css
@@ -1,6 +1,6 @@
 /* board filters */
 .board-filters {
-    font-size: 0.9em;
+    font-size: 0.95em;
 }
 
 .filter-on {
diff --git a/assets/js/app.js b/assets/js/app.js
index bda28c66..8067e16c 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -150,12 +150,11 @@ at:"center bottom+9",using:function(a,b){$(this).css(a);var c=b.target.left+b.ta
 $("#tooltip-subtasks a").click(function(a){a.preventDefault();a.stopPropagation();$(this).hasClass("popover-subtask-restriction")?(Kanboard.OpenPopover($(this).attr("href")),$(b).tooltip("close")):$.get($(this).attr("href"),p)})});return'<i class="fa fa-refresh fa-spin fa-2x"></i>'}}}).on("mouseenter",function(){var a=this;$(this).tooltip("open");$(".ui-tooltip").on("mouseleave",function(){$(a).tooltip("close")})}).on("mouseleave focusout",function(a){a.stopImmediatePropagation();var b=this;setTimeout(function(){$(".ui-tooltip:hover").length||
 $(b).tooltip("close")},100)});var b=parseInt($("#board").attr("data-check-interval"));0<b&&(l=window.setInterval(m,1E3*b))}function n(a,b,c,d){clearInterval(l);$.ajax({cache:!1,url:$("#board").attr("data-save-url"),contentType:"application/json",type:"POST",processData:!1,data:JSON.stringify({task_id:a,column_id:b,swimlane_id:d,position:c}),success:function(a){$("#board").remove();$("#main").append(a);Kanboard.InitAfterAjax();k();h();g()}})}function m(){Kanboard.IsVisible()&&$.ajax({cache:!1,url:$("#board").attr("data-check-url"),
 statusCode:{200:function(a){$("#board").remove();$("#main").append(a);Kanboard.InitAfterAjax();clearInterval(l);k();h();g()}}})}function h(){var a=$("#form-user_id").val(),b=$("#form-category_id").val(),c=$("#filter-due-date").hasClass("filter-on"),d=$("#filter-recent").hasClass("filter-on"),e=$("#board").data("project-id");$("[data-task-id]").each(function(e,g){var f=g.getAttribute("data-owner-id"),k=g.getAttribute("data-due-date"),h=g.getAttribute("data-category-id"),m=g.matches(".task-board-recent");
-g.style.display=f!=a&&-1!=a?"none":"block";!c||""!=k&&"0"!=k||(g.style.display="none");h!=b&&-1!=b&&(g.style.display="none");d&&!m&&(g.style.display="none")});Kanboard.SetStorageItem("board_filter_"+e+"_form-user_id",a);Kanboard.SetStorageItem("board_filter_"+e+"_form-category_id",b);Kanboard.SetStorageItem("board_filter_"+e+"_filter-due-date",~~c);Kanboard.SetStorageItem("board_filter_"+e+"_filter-recent",~~d)}function q(){var a=$("#board").data("project-id");$("#form-user_id").change(function(a){$(this).parent().toggleClass("filter-on",
--1!=$(this).val());h()});$("#form-category_id").change(function(a){$(this).parent().toggleClass("filter-on",-1!=$(this).val());h()});$("#filter-due-date").click(function(a){$(this).toggleClass("filter-on");h();a.preventDefault()});$("#filter-recent").click(function(a){$(this).toggleClass("filter-on");h();a.preventDefault()});$("#form-user_id").val(Kanboard.GetStorageItem("board_filter_"+a+"_form-user_id")||-1);$("#form-user_id").parent().toggleClass("filter-on",-1!=$("#form-user_id").val());$("#form-category_id").val(Kanboard.GetStorageItem("board_filter_"+
-a+"_form-category_id")||-1);$("#form-category_id").parent().toggleClass("filter-on",-1!=$("#form-category_id").val());+Kanboard.GetStorageItem("board_filter_"+a+"_filter-due-date")?$("#filter-due-date").addClass("filter-on"):$("#filter-due-date").removeClass("filter-on");+Kanboard.GetStorageItem("board_filter_"+a+"_filter-recent")?$("#filter-recent").addClass("filter-on"):$("#filter-recent").removeClass("filter-on");h()}var l=null;jQuery(document).ready(function(){Kanboard.Exists("board")&&(k(),q(),
-b(),c())})}();
-Kanboard.Calendar=function(){function a(a){$.ajax({cache:!1,url:$("#calendar").data("save-url"),contentType:"application/json",type:"POST",processData:!1,data:JSON.stringify({task_id:a.id,date_due:a.start.format()})})}function c(){var a=$("#user-calendar"),b=a.data("check-url"),c={start:a.fullCalendar("getView").start.format(),end:a.fullCalendar("getView").end.format(),user_id:a.data("user-id")},d;for(d in c)b+="&"+d+"="+c[d];$.getJSON(b,function(b){a.fullCalendar("removeEvents");a.fullCalendar("addEventSource",b);
-a.fullCalendar("rerenderEvents")})}function b(a){var b=$("#calendar"),c=b.data("check-url"),d={start:b.fullCalendar("getView").start.format(),end:b.fullCalendar("getView").end.format()};jQuery.extend(d,a);for(var e in d)c+="&"+e+"="+d[e];$.getJSON(c,function(a){b.fullCalendar("removeEvents");b.fullCalendar("addEventSource",a);b.fullCalendar("rerenderEvents")})}function d(){var a=Kanboard.GetStorageItem(f);if(""!==a){var a=JSON.parse(a),c;for(c in a)$("select[name="+c+"]").val(a[c])}b(a||{});$(".calendar-filter").change(e)}
+g.style.display=f!=a&&-1!=a?"none":"block";!c||""!=k&&"0"!=k||(g.style.display="none");h!=b&&-1!=b&&(g.style.display="none");d&&!m&&(g.style.display="none")});Kanboard.SetStorageItem("board_filter_"+e+"_form-user_id",a);Kanboard.SetStorageItem("board_filter_"+e+"_form-category_id",b);Kanboard.SetStorageItem("board_filter_"+e+"_filter-due-date",~~c);Kanboard.SetStorageItem("board_filter_"+e+"_filter-recent",~~d)}function q(){var a=$("#board").data("project-id");$("#form-user_id").chosen({width:"180px"});
+$("#form-user_id").change(function(a){h()});$("#form-category_id").chosen({width:"200px"});$("#form-category_id").change(function(a){h()});$("#filter-due-date").click(function(a){$(this).toggleClass("filter-on");h();a.preventDefault()});$("#filter-recent").click(function(a){$(this).toggleClass("filter-on");h();a.preventDefault()});$("#form-user_id").val(Kanboard.GetStorageItem("board_filter_"+a+"_form-user_id")||-1);$("#form-user_id").trigger("chosen:updated");$("#form-category_id").val(Kanboard.GetStorageItem("board_filter_"+
+a+"_form-category_id")||-1);$("#form-category_id").trigger("chosen:updated");+Kanboard.GetStorageItem("board_filter_"+a+"_filter-due-date")?$("#filter-due-date").addClass("filter-on"):$("#filter-due-date").removeClass("filter-on");+Kanboard.GetStorageItem("board_filter_"+a+"_filter-recent")?$("#filter-recent").addClass("filter-on"):$("#filter-recent").removeClass("filter-on");h()}var l=null;jQuery(document).ready(function(){Kanboard.Exists("board")&&(k(),q(),b(),c())})}();
+Kanboard.Calendar=function(){function a(a){$.ajax({cache:!1,url:$("#calendar").data("save-url"),contentType:"application/json",type:"POST",processData:!1,data:JSON.stringify({task_id:a.id,date_due:a.start.format()})})}function c(){var a=$("#user-calendar"),b=a.data("check-url"),c={start:a.fullCalendar("getView").start.format(),end:a.fullCalendar("getView").end.format(),user_id:a.data("user-id")},d;for(d in c)b+="&"+d+"="+c[d];$.getJSON(b,function(b){a.fullCalendar("removeEvents");a.fullCalendar("addEventSource",
+b);a.fullCalendar("rerenderEvents")})}function b(a){var b=$("#calendar"),c=b.data("check-url"),d={start:b.fullCalendar("getView").start.format(),end:b.fullCalendar("getView").end.format()};jQuery.extend(d,a);for(var e in d)c+="&"+e+"="+d[e];$.getJSON(c,function(a){b.fullCalendar("removeEvents");b.fullCalendar("addEventSource",a);b.fullCalendar("rerenderEvents")})}function d(){var a=Kanboard.GetStorageItem(f);if(""!==a){var a=JSON.parse(a),c;for(c in a)$("select[name="+c+"]").val(a[c])}b(a||{});$(".calendar-filter").change(e)}
 function e(){var a={};$(".calendar-filter").each(function(){a[$(this).attr("name")]=$(this).val()});Kanboard.SetStorageItem(f,JSON.stringify(a));b(a)}var f="";jQuery(document).ready(function(){Kanboard.Exists("calendar")?(f="calendar_filters_"+$("#calendar").data("project-id"),$("#calendar").fullCalendar({lang:$("body").data("js-lang"),editable:!0,eventLimit:!0,defaultView:"month",header:{left:"prev,next today",center:"title",right:"month,agendaWeek,agendaDay"},viewRender:d,eventDrop:a}),d()):Kanboard.Exists("user-calendar")&&
 $("#user-calendar").fullCalendar({lang:$("body").data("js-lang"),editable:!1,eventLimit:!0,height:Kanboard.Exists("dashboard-calendar")?500:"auto",defaultView:"agendaWeek",header:{left:"prev,next today",center:"title",right:"month,agendaWeek,agendaDay"},viewRender:c})})}();
 Kanboard.Analytic=function(){jQuery(document).ready(function(){Kanboard.Exists("analytic-task-repartition")?Kanboard.Analytic.TaskRepartition.Init():Kanboard.Exists("analytic-user-repartition")?Kanboard.Analytic.UserRepartition.Init():Kanboard.Exists("analytic-cfd")&&Kanboard.Analytic.CFD.Init()});return{}}();
diff --git a/assets/js/src/board.js b/assets/js/src/board.js
index 4d5a6917..cd1e0361 100644
--- a/assets/js/src/board.js
+++ b/assets/js/src/board.js
@@ -315,13 +315,19 @@ Kanboard.Board = (function() {
     {
 	    var projectId = $('#board').data('project-id');
 
+        $("#form-user_id").chosen({
+            width: "180px"
+        });
+
         $("#form-user_id").change(function(e) {
-            $(this).parent().toggleClass("filter-on", $(this).val() != -1);
             filter_apply();
         });
 
+        $("#form-category_id").chosen({
+            width: "200px"
+        });
+
         $("#form-category_id").change(function(e) {
-            $(this).parent().toggleClass("filter-on", $(this).val() != -1);
             filter_apply();
         });
 
@@ -339,10 +345,10 @@ Kanboard.Board = (function() {
 
         // Get and set filters from localStorage
         $("#form-user_id").val(Kanboard.GetStorageItem("board_filter_" + projectId + "_form-user_id") || -1);
-        $("#form-user_id").parent().toggleClass("filter-on", $("#form-user_id").val() != -1);
+        $("#form-user_id").trigger("chosen:updated");
 
         $("#form-category_id").val(Kanboard.GetStorageItem("board_filter_" + projectId + "_form-category_id") || -1);
-        $("#form-category_id").parent().toggleClass("filter-on", $("#form-category_id").val() != -1);
+        $("#form-category_id").trigger("chosen:updated");
 
         if (+Kanboard.GetStorageItem("board_filter_" + projectId + "_filter-due-date")) {
             $("#filter-due-date").addClass("filter-on");
-- 
cgit v1.2.3