From 2c1b36b9229e75c3bf64defef89cf788cca56c60 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gina=20H=C3=A4u=C3=9Fge?= <osd@foosel.net>
Date: Mon, 4 Jul 2016 16:04:25 +0200
Subject: [PATCH] Spinner on add folder & scroll to new folder

---
 .../static/js/app/viewmodels/files.js         | 40 +++++++++++++------
 src/octoprint/templates/dialogs/files.jinja2  |  2 +-
 2 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/src/octoprint/static/js/app/viewmodels/files.js b/src/octoprint/static/js/app/viewmodels/files.js
index 1011367a..9d8bcb65 100644
--- a/src/octoprint/static/js/app/viewmodels/files.js
+++ b/src/octoprint/static/js/app/viewmodels/files.js
@@ -59,12 +59,14 @@ $(function() {
         self.localTarget = undefined;
         self.sdTarget = undefined;
 
-        self._uploadInProgress = false;
+        self.ignoreUpdatedFilesEvent = false;
+
+        self.addingFolder = ko.observable(false);
 
         self.addFolderDialog = undefined;
         self.addFolderName = ko.observable(undefined);
-        self.enableAddFolder = ko.computed(function() {
-            return self.loginState.isUser() && self.addFolderName() && self.addFolderName().trim() != "";
+        self.enableAddFolder = ko.pureComputed(function() {
+            return self.loginState.isUser() && self.addFolderName() && self.addFolderName().trim() != "" && !self.addingFolder();
         });
 
         self.allItems = ko.observable(undefined);
@@ -301,9 +303,25 @@ $(function() {
 
             // "local" only for now since we only support local and sdcard,
             // and sdcard doesn't support creating folders...
-            OctoPrint.files.createFolder("local", name, self.currentPath())
-                .done(function() {
-                    self.addFolderDialog.modal("hide");
+            var location = "local";
+
+            self.ignoreUpdatedFilesEvent = true;
+            self.addingFolder(true);
+            OctoPrint.files.createFolder(location, name, self.currentPath())
+                .done(function(data) {
+                    self.requestData(data.folder.name, data.folder.origin)
+                        .done(function() {
+                            self.addFolderDialog.modal("hide");
+                        })
+                        .always(function() {
+                            self.addingFolder(false);
+                        });
+                })
+                .fail(function() {
+                    self.addingFolder(false);
+                })
+                .always(function() {
+                    self.ignoreUpdatedFilesEvent = false;
                 });
         };
 
@@ -685,7 +703,7 @@ $(function() {
         };
 
         self.onEventUpdatedFiles = function(payload) {
-            if (self._uploadInProgress) {
+            if (self.ignoreUpdatedFilesEvent) {
                 return;
             }
 
@@ -772,7 +790,7 @@ $(function() {
         };
 
         self._handleUploadStart = function(e, data) {
-            self._uploadInProgress = true;
+            self.ignoreUpdatedFilesEvent = true;
             return true;
         };
 
@@ -818,11 +836,7 @@ $(function() {
         };
 
         self._handleUploadAlways = function(e, data) {
-            self._uploadInProgress = false;
-        };
-
-        self._handleUploadAlways = function(e, data) {
-            self._uploadInProgress = false;
+            self.ignoreUpdatedFilesEvent = false;
         };
 
         self._handleUploadProgress = function(e, data) {
diff --git a/src/octoprint/templates/dialogs/files.jinja2 b/src/octoprint/templates/dialogs/files.jinja2
index 8c1b4b3a..342e5fc4 100644
--- a/src/octoprint/templates/dialogs/files.jinja2
+++ b/src/octoprint/templates/dialogs/files.jinja2
@@ -16,6 +16,6 @@
     </div>
     <div class="modal-footer">
         <a href="#" class="btn" data-dismiss="modal" aria-hidden="true">{{ _('Cancel') }}</a>
-        <a href="#" class="btn btn-primary" data-bind="click: function() { if ($root.enableAddFolder()) { $root.addFolder() } }, enabled: $root.enableAddFolder(), css: {disabled: !$root.enableAddFolder()}">{{ _('Create') }}</a>
+        <a href="#" class="btn btn-primary" data-bind="click: function() { if ($root.enableAddFolder()) { $root.addFolder() } }, enabled: $root.enableAddFolder(), css: {disabled: !$root.enableAddFolder()}"><i class="icon-spinner icon-spin" data-bind="visible: addingFolder"></i> {{ _('Create') }}</a>
     </div>
 </div>