1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-10-24 01:28:52 +02:00
phorge-phorge/webroot/rsrc/js/application/projects/behavior-project-boards.js
epriestley 5dca1569b5 Preview the effects of a drag-and-drop operation on workboards
Summary:
Ref T10335. Ref T5474. When you drag-and-drop a card on a workboard, show a UI hint which lists all the things that the operation will do.

This shows: column moves; changes because of dragging a card to a different header; and changes which will be caused by triggers.

Not implemented here:

  - Actions are currently shown even if they have no effect. For example, if you drag a "Normal" task to a different column, it says "Change priority to Normal.". I plan to hide actions which have no effect, but figuring this out is a little bit tricky.
  - I'd like to make "trigger effects" vs "non-trigger effects" a little more clear in the future, probably.

Test Plan:
Dragged stuff between columns and headers, and into columns with triggers. Got appropriate preview text hints previewing what the action would do in the UI.

(This is tricky to take a screenshot of since it only shows up while the mouse cursor is down.)

Reviewers: amckinley

Reviewed By: amckinley

Maniphest Tasks: T10335, T5474

Differential Revision: https://secure.phabricator.com/D20299
2019-03-25 13:22:56 -07:00

163 lines
4.3 KiB
JavaScript

/**
* @provides javelin-behavior-project-boards
* @requires javelin-behavior
* javelin-dom
* javelin-util
* javelin-vector
* javelin-stratcom
* javelin-workflow
* javelin-workboard-controller
* javelin-workboard-drop-effect
*/
JX.behavior('project-boards', function(config, statics) {
function update_statics(update_config) {
statics.boardID = update_config.boardID;
statics.projectPHID = update_config.projectPHID;
statics.order = update_config.order;
statics.moveURI = update_config.moveURI;
}
function setup() {
JX.Stratcom.listen('click', 'boards-dropdown-menu', function(e) {
var data = e.getNodeData('boards-dropdown-menu');
if (data.menu) {
return;
}
e.kill();
var list = JX.$H(data.items).getFragment().firstChild;
var button = e.getNode('boards-dropdown-menu');
data.menu = new JX.PHUIXDropdownMenu(button);
data.menu.setContent(list);
data.menu.open();
});
JX.Stratcom.listen(
'quicksand-redraw',
null,
function (e) {
var data = e.getData();
if (!data.newResponse.boardConfig) {
return;
}
var new_config;
if (data.fromServer) {
new_config = data.newResponse.boardConfig;
statics.boardConfigCache[data.newResponseID] = new_config;
} else {
new_config = statics.boardConfigCache[data.newResponseID];
statics.boardID = new_config.boardID;
}
update_statics(new_config);
});
return true;
}
if (!statics.setup) {
update_statics(config);
var current_page_id = JX.Quicksand.getCurrentPageID();
statics.boardConfigCache = {};
statics.boardConfigCache[current_page_id] = config;
statics.setup = setup();
}
if (!statics.workboard) {
statics.workboard = new JX.WorkboardController()
.setUploadURI(config.uploadURI)
.setCoverURI(config.coverURI)
.setMoveURI(config.moveURI)
.setChunkThreshold(config.chunkThreshold)
.start();
}
var board_phid = config.projectPHID;
var board_node = JX.$(config.boardID);
var board = statics.workboard.newBoard(board_phid, board_node)
.setOrder(config.order)
.setPointsEnabled(config.pointsEnabled);
var templates = config.templateMap;
for (var k in templates) {
board.getCardTemplate(k)
.setNodeHTMLTemplate(templates[k]);
}
var ii;
var jj;
var effects;
for (ii = 0; ii < config.columnTemplates.length; ii++) {
var spec = config.columnTemplates[ii];
var column = board.getColumn(spec.columnPHID);
effects = [];
for (jj = 0; jj < spec.effects.length; jj++) {
effects.push(
JX.WorkboardDropEffect.newFromDictionary(
spec.effects[jj]));
}
column.setDropEffects(effects);
for (jj = 0; jj < spec.cardPHIDs.length; jj++) {
column.newCard(spec.cardPHIDs[jj]);
}
}
var order_maps = config.orderMaps;
for (var object_phid in order_maps) {
var order_card = board.getCardTemplate(object_phid);
for (var order_key in order_maps[object_phid]) {
order_card.setSortVector(order_key, order_maps[object_phid][order_key]);
}
}
var property_maps = config.propertyMaps;
for (var property_phid in property_maps) {
board.getCardTemplate(property_phid)
.setObjectProperties(property_maps[property_phid]);
}
var headers = config.headers;
for (ii = 0; ii < headers.length; ii++) {
var header = headers[ii];
effects = [];
for (jj = 0; jj < header.effects.length; jj++) {
effects.push(
JX.WorkboardDropEffect.newFromDictionary(
header.effects[jj]));
}
board.getHeaderTemplate(header.key)
.setOrder(header.order)
.setNodeHTMLTemplate(header.template)
.setVector(header.vector)
.setEditProperties(header.editProperties)
.setDropEffects(effects);
}
var orders = config.orders;
for (ii = 0; ii < orders.length; ii++) {
var order = orders[ii];
board.getOrderTemplate(order.orderKey)
.setHasHeaders(order.hasHeaders)
.setCanReorder(order.canReorder);
}
var header_keys = config.headerKeys;
for (var header_phid in header_keys) {
board.getCardTemplate(header_phid)
.setHeaderKey(config.order, header_keys[header_phid]);
}
board.start();
});