From fafb81e9c5ba0a93347272e2050cb87d273931ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Espino?= <jesus.espino@kaleidos.net>
Date: Thu, 18 Sep 2014 18:06:14 +0200
Subject: [PATCH] Custom filters spinner

---
 app/coffee/modules/issues/list.coffee   | 28 +++++++++++++++++++------
 app/styles/modules/filters/filters.scss | 19 +++++++++++++++++
 2 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/app/coffee/modules/issues/list.coffee b/app/coffee/modules/issues/list.coffee
index 98690d0d..88009a63 100644
--- a/app/coffee/modules/issues/list.coffee
+++ b/app/coffee/modules/issues/list.coffee
@@ -449,7 +449,7 @@ module.directive("tgIssues", ["$log", "$tgLocation", IssuesDirective])
 ## Issues Filters Directive
 #############################################################################
 
-IssuesFiltersDirective = ($log, $location, $rs, $confirm) ->
+IssuesFiltersDirective = ($log, $location, $rs, $confirm, $loading) ->
     template = _.template("""
     <% _.each(filters, function(f) { %>
         <% if (!f.selected) { %>
@@ -468,7 +468,9 @@ IssuesFiltersDirective = ($log, $location, $rs, $confirm) ->
         </a>
         <% } %>
     <% }) %>
-    <input class="hidden my-filter-name" type="text" placeholder="filter name" />
+    <span class="new">
+        <input class="hidden my-filter-name" type="text" placeholder="filter name" />
+    </span>
     """)
 
     templateSelected = _.template("""
@@ -646,13 +648,17 @@ IssuesFiltersDirective = ($log, $location, $rs, $confirm) ->
             $el.find('.my-filter-name').show()
             $el.find('.my-filter-name').focus()
 
-        $el.on "keyup", ".my-filter-name", (event) ->
+        $el.on "keyup", ".new .my-filter-name", (event) ->
             event.preventDefault()
             if event.keyCode == 13
                 target = angular.element(event.currentTarget)
                 newFilter = target.val()
-                $ctrl.saveCurrentFiltersTo(newFilter).then ->
-                    $ctrl.loadMyFilters().then (filters) ->
+                $loading.start($el.find(".new"))
+                promise = $ctrl.saveCurrentFiltersTo(newFilter)
+                promise.then ->
+                    loadPromise = $ctrl.loadMyFilters()
+                    loadPromise.then (filters) ->
+                        $loading.finish($el.find(".new"))
                         $scope.filters.myFilters = filters
 
                         currentfilterstype = $el.find("h2 a.subfilter span.title").prop('data-type')
@@ -661,6 +667,16 @@ IssuesFiltersDirective = ($log, $location, $rs, $confirm) ->
 
                         $el.find('.my-filter-name').hide()
                         $el.find('.save-filters').show()
+
+                    loadPromise.then null, ->
+                        $loading.finish($el.find(".new"))
+                        $confirm.notify("error", "Error loading custom filters")
+
+                promise.then null, ->
+                    $loading.finish($el.find(".new"))
+                    $el.find(".my-filter-name").val(newFilter).focus().select()
+                    $confirm.notify("error", "Filter not saved")
+
             else if event.keyCode == 27
                 $el.find('.my-filter-name').val('')
                 $el.find('.my-filter-name').hide()
@@ -668,7 +684,7 @@ IssuesFiltersDirective = ($log, $location, $rs, $confirm) ->
 
     return {link:link}
 
-module.directive("tgIssuesFilters", ["$log", "$tgLocation", "$tgResources", "$tgConfirm",
+module.directive("tgIssuesFilters", ["$log", "$tgLocation", "$tgResources", "$tgConfirm", "$tgLoading",
                                      IssuesFiltersDirective])
 
 
diff --git a/app/styles/modules/filters/filters.scss b/app/styles/modules/filters/filters.scss
index 4bf75748..5663bec0 100644
--- a/app/styles/modules/filters/filters.scss
+++ b/app/styles/modules/filters/filters.scss
@@ -47,11 +47,30 @@
         right: .7rem;
         top: .7rem;
     }
+
 }
 
 .filters-inner {
     opacity: 0;
     @include transition (all .1s ease-in);
+
+    .loading {
+        background: $grayer;
+        border: 1px solid #b8b8b8;
+        display: inline-block;
+        margin: 0;
+        padding: 8px;
+        text-align: center;
+        width: 100%;
+        .icon-spinner {
+            float: none;
+            color: $whitish;
+        }
+        span {
+            @include animation (loading .5s linear);
+            @include animation (spin 1s linear infinite);
+        }
+    }
 }
 
 .filters-applied {