Updating Manager Pages in a Plugin V

Creating a functional Delete Draft button


This is the fifth in a series of articles dealing with issues created by operations performed in plugins that work on the Create/Edit Resource Panel in the MODX Manager. In the previous article, we saw the final form of the Edit Draft and Edit Original buttons to be placed on the Create/Edit Resource panel. In this one, we'll look at how to create a functional Delete Draft button and its corresponding function.

MODX logo

Delete Draft Button Code

The code for the Delete Draft button is not all that different from the previous two buttons, it is inserted in the same way (more on this in later articles), but instead of forwarding the user, it launches a JavaScript function called stagecoachDeleteDraft() with the ID of the staged resource to be deleted as the only argument. Here's the code:

$deleteDraftButton = <<<DELETDRAFTBUTTON
    var buttonDiv=document.getElementById('modx-action-buttons');
    var buttonRows=buttonDiv.getElementsByClassName("x-toolbar-left-row");

    /* InjectDelete Draft button */
    var row = buttonRows[0];
    var editDraftButton = row.insertCell(0);

        var deleteDraftButton=buttonRow.insertCell(0);
        deleteDraftButton.innerHTML='\
            <span id="stagecoach_delete_draft_button" class="x-btn x-btn-small stagecoach-link">\
                <button onclick="stagecoachDeleteDraft({$scId});">Delete Draft</button>\
            <span>' ;
        DELETDRAFTBUTTON;

The onClick code here is very simple — just a call to the stagecoachDeleteDraft function with the ID of the Staged Resource ($scId) as an argument.

Without that actual function, of course, our code isn't going to do anything but throw a JavaScript error when the function is not found. We could have put the function itself into the herdoc code above, but putting it in a separate herdoc block makes the code a little easier to read and to maintain.


The stagecoachDeleteDraft Function

Our function to delete the draft will make an AJAX call to the MODX resource/delete processor after asking the user if they're sure they reallyu want to delete the draft. It does a few other things as well. We'll discuss it further below the code. Here's the code for the function:

$deleteDraftFunction = <<<FNDELETEDRAFT
function stagecoachDeleteDraft(id) {
  //console.log("ID = " + id);
  MODx.msg.confirm({
     text: '$stageCoachConfirmDelete'
     , url: MODx.config.connector_url
     , params: {
       action: 'resource/delete'
       ,id: id
     }
     ,listeners: {
       success: {
          fn: function (r) {
             if (r.object.deletedCount > 0) { // successfully deleted staged resource
                /* Enable empty trash icon */
                var trashcan = Ext.getCmp('emptifier');
                if (trashcan !== 0[0]) {
                   trashcan.enable();
                }

                /* Add overstrike in tree (might need this in the future)
                var rTree = Ext.getCmp('modx-resource-tree');
                var nd = rTree.getNodeById('web_' + id);
                if (nd) {
                   nd.getUI().addClass('deleted');
                }
                */

                /* clear the TV values */
                document.getElementById('tv{$stagedResourceTvId}').value = '';
                MODx.fireResourceFormChange();
                document.getElementById('tv{$stageDateTvId}').value = '';
                MODx.fireResourceFormChange();

                document.getElementById("tv{$stageDateTvId}-tr").getElementsByTagName("td")[0].getElementsByTagName("input")[0].value = "";
                document.getElementById("tv{$stageDateTvId}-tr").getElementsByTagName("td")[1].getElementsByTagName("input")[0].value = "";

                /* Save the resource */
                document.getElementById('modx-abtn-save').click();

                /* Hide the two buttons */
                document.getElementById('stagecoach_delete_draft_button').style.display = 'none';
                document.getElementById('stagecoach_edit_draft_button').style.display = 'none';

             } // end of if statement
          }, scope: this // end of function(r)
       }, // end of success function
       failure: function(response, options) {
          Ext.MessageBox.alert('Error', "Failed to delete staged Resource");
       } // end of failure function
     } // end of listeners section
  }); // end of MODx.msg.confirm call

} // end of stagecoachDeleteDraft function

FNDELETEDRAFT;

This function is a little difficult to read because of the long lines and an attempt on my part to keep the indented code from going too far to the right. Comments indicate the end of each section.

The first action of the outer delete function is a call to the MODx.msg.confirm function. Most of the rest of the code is actually inside that function. The MODx.msg.confirm function (part of the modExt JavaScript code) displays an "are you sure" popup message. The first argument to the MODx.msg.confirm function is the text for the popup. Everything beyond that will be ignored if the user says no to the popup's question.

The next arguments specify the URL for the MODX connector, the parameters sent to the connector, and the listeners that will act on the return from the connector.

The parameters specify the action (the processor that the connector will call), (resource/delete) and the ID of the draft to be deleted which will be sent via the connector to the specified processor. Remember that we passed that argument in our call in the onClick() code.

The listeners argument contains functions that will respond to the return value that the connector passes back from the processor. The code in the success: function will execute if the AJAX call is successful. If not, the failure: code will execute and pop up an error message.

The code in the success: function contains actions we want to take if the resource is successfully deleted. First, we check r.object.deletedCount to make sure the resource was deleted. AJAX functions can return successfully even though their action wasn't really completed properly.

Once we know for sure the the staged resource was deleted, we enable the trashcan icon, since the resource/delete processor only marks the resource for deletion, rather than actually deleting it. If the user wants to finish up by actually deleting it, they'll need the trashcan icon enabled. Note that we could have written our own processor to actually remove the staged resource from the DB (there is no resource/remove processor), but just marking it for deletion gives the user another opportunity to change their mind.

The next section is commented out. Earlier versions of the code failed to add the strikethrough in the Resource tree so it looked like the action had failed until the tree was reloaded. I've left it here in case it's needed in the future, and in case you want to see how to modify a particular resource in the tree in JavaScript.

Next, we need to clear the two StageCoach TVs. If we don't, and the user saves the page with them still set, the buttons will appear in the future and their functions will be acting on a non-existent resource. Each TV is cleared twice, first, the value of the TV itself is set to an empty string, then the td tag that represents the TV in the display is cleared. We call MODx.fireResourceFormChange(); to let MODX know that something has changed for the resource. To be honest, I don't know if it's necessary to call this twice, but it can't hurt.

Deleting the staged resource and blanking out the TV values, the buttons no longer make sense, so we hide them.

Finally, we save the resource with a nice trick by calling the click function of the "Save" button.


Coming Up

We have three working buttons, but we need to show them only on the appropriate pages. Many (maybe most) of the pages on our site won't have a staged resource, so there shouldn't be any buttons on those pages. In addition, we don't want the Edit Draft button to show when we're editing the draft, or the Edit Original button to show when we're editing the original. We'll see how to manage the buttons in the next article.


Looking for high-quality, MODX-friendly hosting? As of May 2016, Bob's Guides is hosted at A2 hosting. (More information in the box below.)



Comments (0)


Please login to comment.

  (Login)