From 83c535652daf43ba6d418a5f64fb01d9cf2953e6 Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchampfaris@users.noreply.github.com>
Date: Mon, 19 Jun 2017 09:03:18 +0530
Subject: [PATCH] Kanban cleanup (#3501)

* Kanban empty state frappe/erpnext#8849

* Add card UX
---
 frappe/public/css/kanban.css                  |  4 ++
 .../js/frappe/views/kanban/kanban_board.html  |  3 ++
 .../js/frappe/views/kanban/kanban_board.js    | 37 +++++++++++++++----
 frappe/public/js/lib/microtemplate.js         |  2 +-
 frappe/public/less/kanban.less                |  5 +++
 5 files changed, 42 insertions(+), 9 deletions(-)

diff --git a/frappe/public/css/kanban.css b/frappe/public/css/kanban.css
index cae0ff1275..cc337984df 100644
--- a/frappe/public/css/kanban.css
+++ b/frappe/public/css/kanban.css
@@ -125,6 +125,10 @@
   width: 16px;
   height: 16px;
 }
+.kanban .kanban-empty-state {
+  width: 100%;
+  line-height: 400px;
+}
 body[data-route*="Kanban"] .modal .add-assignment:hover i {
   color: #36414C !important;
 }
diff --git a/frappe/public/js/frappe/views/kanban/kanban_board.html b/frappe/public/js/frappe/views/kanban/kanban_board.html
index 1abff6ec51..2265ee041c 100644
--- a/frappe/public/js/frappe/views/kanban/kanban_board.html
+++ b/frappe/public/js/frappe/views/kanban/kanban_board.html
@@ -7,4 +7,7 @@
             <input class="new-column-title" name="title" type="text" autocomplete="off">
         </form>
     </div>
+    <div class="kanban-empty-state text-muted text-center" style="display: none;">
+        {{ __("Loading...") }}
+    </div>
 </div>
\ No newline at end of file
diff --git a/frappe/public/js/frappe/views/kanban/kanban_board.js b/frappe/public/js/frappe/views/kanban/kanban_board.js
index 097df1b811..1443d0d347 100644
--- a/frappe/public/js/frappe/views/kanban/kanban_board.js
+++ b/frappe/public/js/frappe/views/kanban/kanban_board.js
@@ -14,10 +14,15 @@ frappe.provide("frappe.views");
 			cards: [],
 			columns: [],
 			filters_modified: false,
-			cur_list: {}
+			cur_list: {},
+			empty_state: true
 		},
 		actionCallbacks: {
 			init: function (updater, opts) {
+				updater.set({
+					empty_state: true
+				});
+
 				get_board(opts.board_name)
 					.then(function (board) {
 						var card_meta = get_card_meta(opts);
@@ -39,7 +44,8 @@ frappe.provide("frappe.views");
 							card_meta: card_meta,
 							cards: cards,
 							columns: columns,
-							cur_list: opts.cur_list
+							cur_list: opts.cur_list,
+							empty_state: false
 						});
 					})
 					.fail(function() {
@@ -145,8 +151,8 @@ frappe.provide("frappe.views");
 				if (field && !quick_entry) {
 					return insert_doc(doc)
 						.then(function (r) {
-							var doc = r.message;
-							var card = prepare_card(doc, state, doc);
+							var updated_doc = r.message;
+							var card = prepare_card(doc, state, updated_doc);
 							var cards = state.cards.slice();
 							cards.push(card);
 							updater.set({ cards: cards });
@@ -269,6 +275,7 @@ frappe.provide("frappe.views");
 			prepare();
 			store.on('change:cur_list', setup_restore_columns);
 			store.on('change:columns', setup_restore_columns);
+			store.on('change:empty_state', show_empty_state);
 		}
 
 		function prepare() {
@@ -405,6 +412,18 @@ frappe.provide("frappe.views");
 			});
 		}
 
+		function show_empty_state() {
+			var empty_state = store.getState().empty_state;
+
+			if(empty_state) {
+				self.$kanban_board.find('.kanban-column').hide();
+				self.$kanban_board.find('.kanban-empty-state').show();
+			} else {
+				self.$kanban_board.find('.kanban-column').show();
+				self.$kanban_board.find('.kanban-empty-state').hide();
+			}
+		}
+
 		init();
 
 		return self;
@@ -513,10 +532,12 @@ frappe.provide("frappe.views");
 						// not already working -- double entry
 						e.preventDefault();
 						var card_title = $textarea.val();
-						fluxify.doAction('add_card', card_title, column.title);
-						$btn_add.show();
-						$new_card_area.hide();
-						$textarea.val('');
+						fluxify.doAction('add_card', card_title, column.title)
+							.then(() => {
+								$btn_add.show();
+								$new_card_area.hide();
+								$textarea.val('');
+							});
 					}
 				}
 			});
diff --git a/frappe/public/js/lib/microtemplate.js b/frappe/public/js/lib/microtemplate.js
index a7c8422792..2318b8ba78 100644
--- a/frappe/public/js/lib/microtemplate.js
+++ b/frappe/public/js/lib/microtemplate.js
@@ -82,7 +82,7 @@ frappe.render_template = function(name, data) {
 	if(data===undefined) {
 		data = {};
 	}
-	return frappe.render(frappe.templates[name], data, name);
+	return frappe.render(template, data, name);
 }
 frappe.render_grid = function(opts) {
 	// build context
diff --git a/frappe/public/less/kanban.less b/frappe/public/less/kanban.less
index d10a606553..5991120076 100644
--- a/frappe/public/less/kanban.less
+++ b/frappe/public/less/kanban.less
@@ -153,6 +153,11 @@
 			height: 16px;
 		}
 	}
+
+	.kanban-empty-state {
+		width: 100%;
+		line-height: 400px;
+	}
 }
 
 body[data-route*="Kanban"] {