AEM 6420 - Touch UI Add Delete in Assets Review Task

Goal

Add Delete the selected assets functionality in Assets Create Review Task

Demo | Package Install | Github

Solution

1) Login to CRXDE Lite, create folder (nt:folder) /apps/eaem-touchui-delete-in-review-task

2) Create Delete button UI node /apps/eaem-touchui-delete-in-review-task/ui/delete-button add the following code

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
             xmlns:granite="http://www.adobe.com/jcr/granite/1.0"
             xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    granite:rel="eaem-project-admin-actions-delete-asset"
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/collection/action"
    icon="delete"
    text="Delete"
    title="Delete"
    variant="actionBar"/>

3) Create clientlib (type cq:ClientLibraryFolder) /apps/eaem-touchui-delete-in-review-task/clientlib and set property categories of String[] type to cq.inbox.itemdetails and dependencies String[] to lodash

4) Create file ( type nt:file ) /apps/eaem-touchui-delete-in-review-task/clientlib/js.txt, add the following

  review-task-delete.js

5) Create file (type nt:file) /apps/eaem-touchui-delete-in-review-task/clientlib/review-task-delete.js, add the following code

(function ($, $document) {
"use strict";

    var REVIEW_TASK_PAYLOAD_PAGE = "/mnt/overlay/cq/core/content/projects/showtasks/reviewtd/payload.html",
        DELETE_BUTTON = "/apps/eaem-touchui-delete-in-review-task/ui/delete-button.html",
        COMMAND_URL = Granite.HTTP.externalize("/bin/wcmcommand"),
        TD_ACTION_BAR = ".review-taskdetail-action-bar",
        $deleteButton = null;

    if(!isReviewTaskPayloadPage()){
        return;
    }

    $document.on("foundation-selections-change", addDelete);

    function addDelete(event){
        var $collection = $(event.target),
            selectApi = $collection.adaptTo("foundation-selections");

        if(!_.isEmpty($deleteButton)){
            ( (selectApi.count() == 0) ? $deleteButton.hide() : $deleteButton.show());
            return;
        }

        $.ajax(DELETE_BUTTON).done(function(html){
            var $titleBar = $(TD_ACTION_BAR).find("betty-titlebar-primary");

            $deleteButton = $(html).appendTo($titleBar).click(deleteAction);

            $deleteButton.hide();
        });
    }

    function deleteAction(){
        var $collection = $(".foundation-collection"),
            $items = $collection.find(".foundation-selections-item"),
            paths = [];

        $items.each(function(index, item) {
            paths.push($(item).data("foundation-collection-item-id"));
        });

        if(_.isEmpty(paths)){
            return;
        }

        var data = {
            _charset_: "UTF-8",
            cmd: "deletePage",
            path: paths,
            force: true
        };

        $.post(COMMAND_URL, data).done(function(){
            $(".foundation-content").adaptTo("foundation-content").refresh();

            showAlert("Selected assets deleted", "Delete");

            $deleteButton = null;
        });
    }

    function showAlert(message, title, callback){
        var fui = $(window).adaptTo("foundation-ui"),
            options = [{
                id: "ok",
                text: "OK",
                primary: true
            }];

        message = message || "Unknown Error";
        title = title || "Error";

        fui.prompt(title, message, "warning", options, callback);
    }

    function isReviewTaskPayloadPage() {
        return (window.location.pathname.indexOf(REVIEW_TASK_PAYLOAD_PAGE) >= 0);
    }
})(jQuery, jQuery(document));