From 1bdf446a802602a156c9bfd2decdfd5cdaf7ee51 Mon Sep 17 00:00:00 2001
From: epriestley <git@epriestley.com>
Date: Sun, 10 Mar 2019 22:22:59 -0700
Subject: [PATCH] Improve rendering of empty workboard columns in header views

Summary:
Depends on D20271. Ref T10333. When a column is empty but a board is grouped (by priority, owner, etc) render the headers properly.

When a column has headers, don't apply the "empty" style even if it has no cards. This style just makes some empty space so you can drag-and-drop more easily, but headers do the same thing.

Test Plan: {F6264611}

Reviewers: amckinley

Reviewed By: amckinley

Maniphest Tasks: T10333

Differential Revision: https://secure.phabricator.com/D20272
---
 resources/celerity/map.php                    | 14 ++++-----
 .../application/projects/WorkboardColumn.js   | 31 +++++++++++++++++--
 2 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/resources/celerity/map.php b/resources/celerity/map.php
index c96d03896c..efa2e80f17 100644
--- a/resources/celerity/map.php
+++ b/resources/celerity/map.php
@@ -411,7 +411,7 @@ return array(
     'rsrc/js/application/projects/WorkboardBoard.js' => 'fc1664ff',
     'rsrc/js/application/projects/WorkboardCard.js' => '0392a5d8',
     'rsrc/js/application/projects/WorkboardCardTemplate.js' => '2a61f8d4',
-    'rsrc/js/application/projects/WorkboardColumn.js' => '533dd592',
+    'rsrc/js/application/projects/WorkboardColumn.js' => 'fd4c2069',
     'rsrc/js/application/projects/WorkboardController.js' => '42c7a5a7',
     'rsrc/js/application/projects/WorkboardHeader.js' => '111bfd2d',
     'rsrc/js/application/projects/WorkboardHeaderTemplate.js' => 'b65351bd',
@@ -731,7 +731,7 @@ return array(
     'javelin-workboard-board' => 'fc1664ff',
     'javelin-workboard-card' => '0392a5d8',
     'javelin-workboard-card-template' => '2a61f8d4',
-    'javelin-workboard-column' => '533dd592',
+    'javelin-workboard-column' => 'fd4c2069',
     'javelin-workboard-controller' => '42c7a5a7',
     'javelin-workboard-header' => '111bfd2d',
     'javelin-workboard-header-template' => 'b65351bd',
@@ -1347,11 +1347,6 @@ return array(
       'javelin-dom',
       'javelin-fx',
     ),
-    '533dd592' => array(
-      'javelin-install',
-      'javelin-workboard-card',
-      'javelin-workboard-header',
-    ),
     '534f1757' => array(
       'phui-oi-list-view-css',
     ),
@@ -2138,6 +2133,11 @@ return array(
       'javelin-magical-init',
       'javelin-util',
     ),
+    'fd4c2069' => array(
+      'javelin-install',
+      'javelin-workboard-card',
+      'javelin-workboard-header',
+    ),
     'fdc13e4e' => array(
       'javelin-install',
     ),
diff --git a/webroot/rsrc/js/application/projects/WorkboardColumn.js b/webroot/rsrc/js/application/projects/WorkboardColumn.js
index a560234a2a..271bed467c 100644
--- a/webroot/rsrc/js/application/projects/WorkboardColumn.js
+++ b/webroot/rsrc/js/application/projects/WorkboardColumn.js
@@ -220,6 +220,8 @@ JX.install('WorkboardColumn', {
         header_keys.reverse();
       }
 
+      var header_key;
+      var next;
       for (ii = 0; ii < list.length; ii++) {
         var card = list[ii];
 
@@ -229,12 +231,12 @@ JX.install('WorkboardColumn', {
         // cards in a column.
 
         if (has_headers) {
-          var header_key = board.getCardTemplate(card.getPHID())
+          header_key = board.getCardTemplate(card.getPHID())
              .getHeaderKey(order);
 
           if (!seen_headers[header_key]) {
             while (header_keys.length) {
-              var next = header_keys.pop();
+              next = header_keys.pop();
 
               var header = this.getHeader(next);
               objects.push(header);
@@ -250,6 +252,20 @@ JX.install('WorkboardColumn', {
         objects.push(card);
       }
 
+      // Add any leftover headers at the bottom of the column which don't have
+      // any cards in them. In particular, empty columns don't have any cards
+      // but should still have headers.
+
+      while (header_keys.length) {
+        next = header_keys.pop();
+
+        if (seen_headers[next]) {
+          continue;
+        }
+
+        objects.push(this.getHeader(next));
+      }
+
       this._objects = objects;
 
       var content = [];
@@ -431,9 +447,18 @@ JX.install('WorkboardColumn', {
 
       JX.DOM.setContent(content_node, display_value);
 
-      var is_empty = !this.getCardPHIDs().length;
+      // Only put the "empty" style on the column (which just adds some empty
+      // space so it's easier to drop cards into an empty column) if it has no
+      // cards and no headers.
+
+      var is_empty =
+        (!this.getCardPHIDs().length) &&
+        (!this._hasColumnHeaders());
+
       var panel = JX.DOM.findAbove(this.getRoot(), 'div', 'workpanel');
       JX.DOM.alterClass(panel, 'project-panel-empty', is_empty);
+
+
       JX.DOM.alterClass(panel, 'project-panel-over-limit', over_limit);
 
       var color_map = {