Begin making card updates on boards independent of context

Summary:
Ref T4900. To eventually support realtime board updates, we need to be able to perform a board state update without the context of the action which caused it.

For example, if the server says "update card Y", we need to know what to do without being told "card Y was moved from column A to column B" explicitly. Currently, all the update code relies on knowing what happened and which nodes were affected.

This is only a small step forward, but starts making things a bit more independent and consistent.

Test Plan:
  - Moved cards around.
  - Changed card cover images.

Reviewers: chad

Reviewed By: chad

Maniphest Tasks: T4900

Differential Revision: https://secure.phabricator.com/D15228

resources/celerity/map.php

@@ -415,8 +415,8 @@ return array(
     'rsrc/js/application/phortune/phortune-credit-card-form.js' => '2290aeef',
     'rsrc/js/application/policy/behavior-policy-control.js' => 'd0c516d5',
     'rsrc/js/application/policy/behavior-policy-rule-editor.js' => '5e9f347c',
-    'rsrc/js/application/projects/Workboard.js' => 'fa8ab410',
+    'rsrc/js/application/projects/Workboard.js' => '088b2495',
-    'rsrc/js/application/projects/behavior-project-boards.js' => '7784bfc6',
+    'rsrc/js/application/projects/behavior-project-boards.js' => '37eb99e4',
     'rsrc/js/application/projects/behavior-project-create.js' => '065227cc',
     'rsrc/js/application/projects/behavior-reorder-columns.js' => 'e1d25dfb',
     'rsrc/js/application/releeph/releeph-preview-branch.js' => 'b2b4fbaf',
@@ -656,7 +656,7 @@ return array(
     'javelin-behavior-phui-profile-menu' => '12884df9',
     'javelin-behavior-policy-control' => 'd0c516d5',
     'javelin-behavior-policy-rule-editor' => '5e9f347c',
-    'javelin-behavior-project-boards' => '7784bfc6',
+    'javelin-behavior-project-boards' => '37eb99e4',
     'javelin-behavior-project-create' => '065227cc',
     'javelin-behavior-quicksand-blacklist' => '7927a7d3',
     'javelin-behavior-recurring-edit' => '5f1c4d5f',
@@ -723,7 +723,7 @@ return array(
     'javelin-view-renderer' => '6c2b09a2',
     'javelin-view-visitor' => 'efe49472',
     'javelin-websocket' => 'e292eaf4',
-    'javelin-workboard' => 'fa8ab410',
+    'javelin-workboard' => '088b2495',
     'javelin-workflow' => '5b2e3e2b',
     'lightbox-attachment-css' => '7acac05d',
     'maniphest-batch-editor' => 'b0f0b6d5',
@@ -930,6 +930,16 @@ return array(
       'javelin-stratcom',
       'javelin-vector',
     ),
+    '088b2495' => array(
+      'javelin-install',
+      'javelin-dom',
+      'javelin-util',
+      'javelin-vector',
+      'javelin-stratcom',
+      'javelin-workflow',
+      'phabricator-draggable-list',
+      'phabricator-drag-and-drop-file-upload',
+    ),
     '0a3f3021' => array(
       'javelin-behavior',
       'javelin-stratcom',
@@ -1086,6 +1096,17 @@ return array(
       'javelin-vector',
       'phuix-autocomplete',
     ),
+    '37eb99e4' => array(
+      'javelin-behavior',
+      'javelin-dom',
+      'javelin-util',
+      'javelin-vector',
+      'javelin-stratcom',
+      'javelin-workflow',
+      'phabricator-draggable-list',
+      'phabricator-drag-and-drop-file-upload',
+      'javelin-workboard',
+    ),
     '3ab51e2c' => array(
       'javelin-behavior',
       'javelin-behavior-device',
@@ -1407,17 +1428,6 @@ return array(
       'javelin-reactor',
       'javelin-util',
     ),
-    '7784bfc6' => array(
-      'javelin-behavior',
-      'javelin-dom',
-      'javelin-util',
-      'javelin-vector',
-      'javelin-stratcom',
-      'javelin-workflow',
-      'phabricator-draggable-list',
-      'phabricator-drag-and-drop-file-upload',
-      'javelin-workboard',
-    ),
     '782ab6e7' => array(
       'javelin-behavior',
       'javelin-dom',
@@ -2078,16 +2088,6 @@ return array(
       'javelin-vector',
       'javelin-magical-init',
     ),
-    'fa8ab410' => array(
-      'javelin-install',
-      'javelin-dom',
-      'javelin-util',
-      'javelin-vector',
-      'javelin-stratcom',
-      'javelin-workflow',
-      'phabricator-draggable-list',
-      'phabricator-drag-and-drop-file-upload',
-    ),
     'fb20ac8d' => array(
       'javelin-behavior',
       'javelin-aphlict',

src/applications/project/controller/PhabricatorProjectController.php

@@ -192,7 +192,8 @@ abstract class PhabricatorProjectController extends PhabricatorController {
     return id(new AphrontAjaxResponse())
       ->setContent(
         array(
-          'task' => $item,
+          'objectPHID' => $object->getPHID(),
+          'cardHTML' => $item,
         ));
   }
 

webroot/rsrc/js/application/projects/Workboard.js

@@ -17,9 +17,14 @@ JX.install('Workboard', {
     this._config = config;
 
     this._boardNodes = {};
+    this._columnMap = {};
+  },
 
-    this._setupCoverImageHandlers();
+  properties: {
-    this._setupPanHandlers();
+    uploadURI: null,
+    coverURI: null,
+    moveURI: null,
+    chunkThreshold: null
   },
 
   members: {
@@ -31,13 +36,19 @@ JX.install('Workboard', {
     _panNode: null,
     _panX: null,
 
+    _columnMap: null,
+
+    start: function() {
+      this._setupCoverImageHandlers();
+      this._setupPanHandlers();
+
+      return this;
+    },
+
     addBoard: function(board_phid, board_node) {
       this._currentBoard = board_phid;
-
+      this._boardNodes[board_phid] = board_node;
-      if (!this._boardNodes[board_phid]) {
+      this._setupDragHandlers(board_node);
-        this._boardNodes[board_phid] = board_node;
-        this._setupDragHandlers(board_node);
-      }
     },
 
     _getConfig: function() {
@@ -49,11 +60,9 @@ JX.install('Workboard', {
         return;
       }
 
-      var config = this._getConfig();
-
       var drop = new JX.PhabricatorDragAndDropFileUpload('project-card')
-        .setURI(config.uploadURI)
+        .setURI(this.getUploadURI())
-        .setChunkThreshold(config.chunkThreshold);
+        .setChunkThreshold(this.getChunkThreshold());
 
       drop.listen('didBeginDrag', function(node) {
         JX.DOM.alterClass(node, 'phui-workcard-upload-target', true);
@@ -63,27 +72,26 @@ JX.install('Workboard', {
         JX.DOM.alterClass(node, 'phui-workcard-upload-target', false);
       });
 
-      drop.listen('didUpload', function(file) {
+      drop.listen('didUpload', JX.bind(this, this._oncoverupload));
-        var node = file.getTargetNode();
-
-        var board = JX.DOM.findAbove(node, 'div', 'jx-workboard');
-
-        var data = {
-          boardPHID: JX.Stratcom.getData(board).boardPHID,
-          objectPHID: JX.Stratcom.getData(node).objectPHID,
-          filePHID: file.getPHID()
-        };
-
-        new JX.Workflow(config.coverURI, data)
-          .setHandler(function(r) {
-            JX.DOM.replace(node, JX.$H(r.task));
-          })
-          .start();
-      });
 
       drop.start();
     },
 
+    _oncoverupload: function(file) {
+      var node = file.getTargetNode();
+      var board = JX.DOM.findAbove(node, 'div', 'jx-workboard');
+
+      var data = {
+        boardPHID: JX.Stratcom.getData(board).boardPHID,
+        objectPHID: JX.Stratcom.getData(node).objectPHID,
+        filePHID: file.getPHID()
+      };
+
+      new JX.Workflow(this.getCoverURI(), data)
+        .setHandler(JX.bind(this, this._queueCardUpdate))
+        .start();
+    },
+
     _setupPanHandlers: function() {
       var mousedown = JX.bind(this, this._onpanmousedown);
       var mousemove = JX.bind(this, this._onpanmousemove);
@@ -192,7 +200,7 @@ JX.install('Workboard', {
       var config = this._getConfig();
       data.order = config.order;
 
-      new JX.Workflow(config.moveURI, data)
+      new JX.Workflow(this.getMoveURI(), data)
         .setHandler(JX.bind(this, this._oncardupdate, item, list))
         .start();
     },
@@ -200,7 +208,33 @@ JX.install('Workboard', {
     _oncardupdate: function(item, list, response) {
       list.unlock();
       JX.DOM.alterClass(item, 'drag-sending', false);
-      JX.DOM.replace(item, JX.$H(response.task));
+
+      this._queueCardUpdate(response);
+    },
+
+    _queueCardUpdate: function(response) {
+      var board_node = this._boardNodes[this._currentBoard];
+
+      var columns = this._findBoardColumns(board_node);
+      var cards;
+      var ii;
+      var jj;
+      var data;
+
+      for (ii = 0; ii < columns.length; ii++) {
+        cards = this._findCardsInColumn(columns[ii]);
+        for (jj = 0; jj < cards.length; jj++) {
+          data = JX.Stratcom.getData(cards[jj]);
+          if (data.objectPHID == response.objectPHID) {
+            this._replaceCard(cards[jj], JX.$H(response.cardHTML));
+          }
+        }
+      }
+
+    },
+
+    _replaceCard: function(old_node, new_node) {
+      JX.DOM.replace(old_node, new_node);
     }
 
   }

webroot/rsrc/js/application/projects/behavior-project-boards.js

@@ -234,7 +234,12 @@ JX.behavior('project-boards', function(config, statics) {
   }
 
   if (!statics.workboard) {
-    statics.workboard = new JX.Workboard(config);
+    statics.workboard = new JX.Workboard(config)
+      .setUploadURI(config.uploadURI)
+      .setCoverURI(config.coverURI)
+      .setMoveURI(config.moveURI)
+      .setChunkThreshold(config.chunkThreshold)
+      .start();
   }
 
   statics.workboard.addBoard(config.projectPHID, JX.$(config.boardID));