From 23d272503c7487fca5b8181f3eae506c6772268d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Espino?= <jesus.espino@kaleidos.net>
Date: Thu, 18 Sep 2014 17:36:58 +0200
Subject: [PATCH] Add wiki links spinner on creation

---
 app/coffee/modules/wiki/nav.coffee    | 33 +++++++++++++++++++++------
 app/styles/modules/wiki/wiki-nav.scss | 16 +++++++++++++
 2 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/app/coffee/modules/wiki/nav.coffee b/app/coffee/modules/wiki/nav.coffee
index f2a26f0b..d1bfc4af 100644
--- a/app/coffee/modules/wiki/nav.coffee
+++ b/app/coffee/modules/wiki/nav.coffee
@@ -34,7 +34,7 @@ module = angular.module("taigaWiki")
 ## Wiki Main Directive
 #############################################################################
 
-WikiNavDirective = ($tgrepo, $log, $location, $confirm, $navUrls) ->
+WikiNavDirective = ($tgrepo, $log, $location, $confirm, $navUrls, $loading) ->
     template = _.template("""
     <header>
       <h1>Links</h1>
@@ -128,13 +128,32 @@ WikiNavDirective = ($tgrepo, $log, $location, $confirm, $navUrls) ->
                     target = angular.element(event.currentTarget)
                     newLink = target.val()
 
-                    $el.find(".new").addClass("hidden")
-                    $el.find(".new input").val('')
+                    $loading.start($el.find(".new"))
 
-                    $tgrepo.create("wiki-links", {project: $scope.projectId, title: newLink, href: slugify(newLink)}).then ->
-                        $ctrl.loadWikiLinks().then ->
+                    promise = $tgrepo.create("wiki-links", {project: $scope.projectId, title: newLink, href: slugify(newLink)})
+                    promise.then ->
+                        loadPromise = $ctrl.loadWikiLinks()
+                        loadPromise.then ->
+                            $loading.finish($el.find(".new"))
+                            $el.find(".new").addClass("hidden")
+                            $el.find(".new input").val('')
+                            $el.find(".add-button").show()
                             render($scope.wikiLinks)
-                    $el.find(".add-button").show()
+                        loadPromise.then null, ->
+                            $loading.finish($el.find(".new"))
+                            $el.find(".new").addClass("hidden")
+                            $el.find(".new input").val('')
+                            $el.find(".add-button").show()
+                            $confirm.notify("error", "Error loading wiki links")
+
+                    promise.then null, (error) ->
+                        $loading.finish($el.find(".new"))
+                        $el.find(".new input").val(newLink)
+                        $el.find(".new input").focus().select()
+                        if error?.__all__?[0]?
+                            $confirm.notify("error", "The link already exists")
+                        else
+                            $confirm.notify("error")
 
                 else if event.keyCode == 27
                     target = angular.element(event.currentTarget)
@@ -147,4 +166,4 @@ WikiNavDirective = ($tgrepo, $log, $location, $confirm, $navUrls) ->
 
     return {link:link}
 
-module.directive("tgWikiNav", ["$tgRepo", "$log", "$tgLocation", "$tgConfirm", "$tgNavUrls", WikiNavDirective])
+module.directive("tgWikiNav", ["$tgRepo", "$log", "$tgLocation", "$tgConfirm", "$tgNavUrls", "$tgLoading", WikiNavDirective])
diff --git a/app/styles/modules/wiki/wiki-nav.scss b/app/styles/modules/wiki/wiki-nav.scss
index a8e53663..22d8409c 100644
--- a/app/styles/modules/wiki/wiki-nav.scss
+++ b/app/styles/modules/wiki/wiki-nav.scss
@@ -30,6 +30,22 @@
                 color: $gray-light;
             }
         }
+        &.loading {
+            background: $grayer;
+            border: 1px solid #b8b8b8;
+            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);
+            }
+        }
     }
     .button {
         color: $white;