“Plans are only good intentions unless they immediately degenerate into hard work.”
— Peter Drucker
It seemed as if we had this topic all wrapped up a while back, but then we had to play around with the Buttons and Icons. That should have been the end of that, but then we went and added Bulk Actions to the hacked up Data Table widget, which has now broken our new Content Selector Configuration Editor. So now we have to add support for the Bulk Action configuration to the editor to put things back together again. Fortunately, this is all very similar stuff, so it is mainly just a matter of making some copies of things that we have already built and then hacking them up just a bit to fit the current need.
To start with, we will need a Bulk Action Editor pop-up very similar to all of the other pop-up editors that we have been creating, and since Bulk Actions only have a name and a label for properties, the State Editor seems like the best choice for something to copy, since it too only has a name and a label for properties. Once we pull that widget up on the widget form, change the name, and then select Insert and Stay from the context menu, we can start working on our new copy. There is literally nothing to change with the HTML:
<div>
<form name="form1">
<snh-form-field
snh-model="c.widget.options.shared.label"
snh-name="label"
snh-required="true"/>
<snh-form-field
snh-model="c.widget.options.shared.name"
snh-name="persp"
snh-label="Name"
snh-required="true"/>
</form>
<div style="width: 100%; padding: 5px 50px; text-align: right;">
<button ng-click="cancel()" class="btn btn-default ng-binding ng-scope" role="button" title="Click here to cancel this edit">Cancel</button>
<button ng-click="save()" class="btn btn-primary ng-binding ng-scope" role="button" title="Click here to save your changes">Save</button>
</div>
</div>
… and only a function name change on the client script:
function BulkActionEditor($scope, $timeout) {
var c = this;
$scope.cancel = function() {
$timeout(function() {
angular.element('[ng-click*="buttonClicked"]').get(0).click();
});
};
$scope.save = function() {
if ($scope.form1.$valid) {
$timeout(function() {
angular.element('[ng-click*="buttonClicked"]').get(1).click();
});
} else {
$scope.form1.$setSubmitted(true);
}
};
$timeout(function() {
angular.element('[class*="modal-footer"]').css({display:'none'});
}, 100);
}
As you may recall, there is no server-side code for these guys, so that’s all there is to that. Now we have a Bulk Action Editor. There is a little more work involved in the main Content Selector Configurator widget. On the HTML, we need to define a table for the Bulk Actions:
<div id="label.actarray" class="snh-label" nowrap="true">
<label for="actarray" class="col-xs-12 col-md-4 col-lg-6 control-label">
<span id="status.actarray"></span>
<span title="Bulk Actions" data-original-title="Bulk Actions">${Bulk Actions}</span>
</label>
</div>
<table class="table table-hover table-condensed">
<thead>
<tr>
<th style="text-align: center;">${Label}</th>
<th style="text-align: center;">${Name}</th>
<th style="text-align: center;">${Edit}</th>
<th style="text-align: center;">${Delete}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="act in tbl[state.name].actarray" ng-hide="btn.removed">
<td data-th="${Label}">{{act.label}}</td>
<td data-th="${Name}">{{act.name}}</td>
<td data-th="${Edit}" style="text-align: center;"><img src="/images/edittsk_tsk.gif" ng-click="editAction(act)" alt="Click here to edit this Bulk Action" title="Click here to edit this Bulk Action" style="cursor: pointer;"/></td>
<td data-th="${Delete}" style="text-align: center;"><img src="/images/delete_row.gif" ng-click="deleteAction(act, tbl[state.name].actarray)" alt="Click here to delete this Bulk Action" title="Click here to delete this Bulk Action" style="cursor: pointer;"/></td>
</tr>
</tbody>
</table>
<div style="width: 100%; text-align: right;">
<action ng-click="editAction('new', tbl[state.name].actarray, tbl);" class="btn btn-primary ng-binding ng-scope" role="action" title="Click here to add a new Bulk Action">Add a new Bulk Action</action>
</div>
On the client side, we need to add a couple more functions to handle the editing and deleting of the actions, which we can basically copy from the same functions we already have for editing and deleting buttons and icons.
$scope.editAction = function(action, actArray) {
var shared = {page_id: {value: '', displayValue: ''}};
if (action != 'new') {
shared.label = action.label;
shared.name = action.name;
}
spModal.open({
title: 'Bulk Action Editor',
widget: 'bulk-action-editor',
shared: shared
}).then(function() {
if (action == 'new') {
action = {};
actArray.push(action);
}
action.label = shared.label || '';
action.name = shared.name || '';
});
};
$scope.deleteAction = function(action, actArray) {
var confirmMsg = '<b>Delete Bulk Action</b>';
confirmMsg += '<br/>Are you sure you want to delete the ' + action.label + ' Bulk Action?';
spModal.confirm(confirmMsg).then(function(confirmed) {
if (confirmed) {
var a = -1;
for (var b=0; b<actArray.length; b++) {
if (actArray[b].name == action.name) {
a = b;
}
}
actArray.splice(a, 1);
}
});
};
On the server side, we just need to add some code to format the Bulk Action section of the table configurations, which we can copy from the code that formats the Buttons/Icons section, and then delete all of the extra properties that are not needed for Bulk Actions.
script += ",\n actarray: [";
lastSeparator = '';
for (var a=0; a<tableTable[tableState.name].actarray.length; a++) {
var thisAction = tableTable[tableState.name].actarray[a];
script += lastSeparator;
script += "{\n name: '";
script += thisAction.name;
script += "',\n label: '";
script += thisAction.label;
script += "'\n }";
lastSeparator = ",";
}
script += "]";
Now all we need to do is pull up our modified ButtonTestConfig script in the editor and see how we did.
So far, so good. Now let’s pull up that new Bulk Action Editor and see how that guy works:
Not bad. A little bit of testing here and there, just to make sure that we didn’t break anything along the way, and we should be good to go. Now if we can just stop tinkering with things, this Update Set should be the final release and we can move on to other exciting adventures.
