Commit be5af754 authored by Rene Saarsoo's avatar Rene Saarsoo
Browse files

Implement undo for deleting comments. 

Instead of showing a Yes/No prompt before deleting a comment, delete the
comment right away and replace it with link to undo the delete action.

This was easy to accomplish as we never delete the comments, but just
mark them as deleted in database.
parent ba5fffa4

opt/comments-server-side/app.js

+22 −0
Original line number Diff line number Diff line
@@ -307,6 +307,28 @@ app.namespace('/auth/:sdk/:version', function(){ 
        });

    });



    /**

     * Restores deleted comment

     */

    app.post('/comments/:commentId/undo_delete', util.requireLoggedInUser, util.findComment, function(req, res) {



        var canUndoDelete = false,

            comment = req.comment;



        canUndoDelete = _.include(req.session.user.membergroupids, 7) || req.session.user.username == req.comment.author;



        if (!canUndoDelete) {

            res.json({ success: false, reason: 'Forbidden' }, 403);

            return;

        }



        comment.deleted = false;



        comment.save(function(err, response) {

            res.send({ success: true, comment: util.scoreComments([comment], req)[0] });

        });

    });



    /**

     * Get email subscriptions

     */

template/app/controller/Comments.js

+43 −25
Original line number Diff line number Diff line
@@ -112,7 +112,8 @@ Ext.define('Docs.controller.Comments', { 
                        [ '.postComment',          'click', this.postComment],

                        [ '.updateComment',        'click', this.updateComment],

                        [ '.cancelUpdateComment',  'click', this.cancelUpdateComment],

                        [ '.deleteComment',        'click', this.promptDeleteComment],

                        [ '.deleteComment',        'click', this.deleteComment],

                        [ '.undoDeleteComment',    'click', this.undoDeleteComment],

                        [ '.editComment',          'click', this.editComment],

                        [ '.fetchMoreComments',    'click', this.fetchMoreComments],

                        [ '.voteCommentUp',        'click', this.voteUp],
@@ -297,22 +298,32 @@ Ext.define('Docs.controller.Comments', { 
    },



    /**

     * Promts the user for confirmation of comment deletion. Deleted the comment

     * if the user confirms.

     * Sends a delete comment request to the server.

     */

    promptDeleteComment: function(cmp, el) {

    deleteComment: function(cmp, el) {

        if (!this.loggedIn()) {

            return false;

            return;

        }



        Ext.Msg.show({

             title:'Are you sure?',

             msg: 'Are you sure you wish to delete this comment?',

             buttons: Ext.Msg.YESNO,

             icon: Ext.Msg.QUESTION,

             fn: function(buttonId) {

                 if (buttonId == 'yes') {

                     this.deleteComment(cmp, el);

        var id = Ext.get(el).up('.comment').getAttribute('id'),

            commentsEl = Ext.get(el).up('.comments-div'),

            target = commentsEl && commentsEl.getAttribute('id');



        Ext.Ajax.request({

            url: this.addSid(Docs.baseUrl + '/' + Docs.commentsDb + '/' + Docs.commentsVersion + '/comments/' + id + '/delete'),

            cors: true,

            method: 'POST',

            callback: function(options, success, response) {

                var data = Ext.JSON.decode(response.responseText);



                if (data.success) {

                    if (target) {

                        this.fireEvent('remove', target);

                    }

                    // Ext.get(id).remove();

                    Ext.get(id).update('<div class="deleted-comment">Comment was deleted. <a href="#" class="undoDeleteComment">Undo</a>.</div>');

                } else {

                    Ext.Msg.alert('Error', data.reason || "There was an error submitting your request");

                }

            },

            scope: this
@@ -320,25 +331,32 @@ Ext.define('Docs.controller.Comments', { 
    },



    /**

     * Sends a delete comment request to the server.

     * Sends an undo request to the server.

     */

    deleteComment: function(cmp, el) {

        var id = Ext.get(el).up('.comment').getAttribute('id'),

            commentsEl = Ext.get(el).up('.comments-div'),

            cls = commentsEl && commentsEl.getAttribute('id');

    undoDeleteComment: function(cmp, el) {

        if (!this.loggedIn()) {

            return;

        }



        var commentEl = Ext.get(el).up('.comment');

        var id = commentEl.getAttribute('id');

        var commentsEl = commentEl.up('.comments-div');

        var target = commentsEl && commentsEl.getAttribute('id');



        Ext.Ajax.request({

            url: this.addSid(Docs.baseUrl + '/' + Docs.commentsDb + '/' + Docs.commentsVersion + '/comments/' + id + '/delete'),

            url: this.addSid(Docs.baseUrl + '/' + Docs.commentsDb + '/' + Docs.commentsVersion + '/comments/' + id + '/undo_delete'),

            cors: true,

            method: 'POST',

            callback: function(options, success, response) {

                var data = Ext.JSON.decode(response.responseText);



                if (data.success) {

                    if (cls) {

                        this.fireEvent('remove', cls);

                    if (target) {

                        this.fireEvent('add', target);

                    }

                    Ext.get(id).remove();

                    data.comment.id = data.comment._id;

                    Docs.view.Comments.commentTpl.insertBefore(commentEl, data.comment);

                    commentEl.remove();

                } else {

                    Ext.Msg.alert('Error', data.reason || "There was an error submitting your request");

                }

template/resources/sass/_comments.scss

+7 −1
Original line number Diff line number Diff line
@@ -275,4 +275,10 @@ 
  .content {

    min-height: 65px;

    padding: 0 0 15px 40px;

    border-bottom: 1px solid #eee; } }
 
    border-bottom: 1px solid #eee; }

  .deleted-comment {

    text-align: center;

    background: #ffd76e;

    border: 1px solid #e1ba53;

    @include border-radius(4px);

    font-weight: bold; } }