Custom Comments Form Module

Question

Okay , I don't know where I am wrong in the code. But it does not show up comment piece when submitting comments in show.html . In my show.html , I have my singleton:

    <section class="comment-area">
        {{ apos.singleton(data.page, 'commentArea', 'comments-form') }}
    </section>

And in my comments-form : {} :

var async = require('async');
module.exports = {
    extend : 'apostrophe-pieces',
    name : 'comments-form',
    label : 'Comments Form',
    pluralLabel : 'Comments',
    alias : 'commentsForm',
    addFields : [
        {
            name: 'title',
            label: 'Page',
            type: 'string',
            required: true,
            contextual : true
        },
        {
            name : 'readerName',
            label : 'Reader\'s Name',
            type :'string',
            required : true
        }, 
        {
            name: 'comment',
            label: 'Comment',
            type: 'string',
            textarea: true,
            required: true
        }
    ],
    permissionsFields : false,
    afterConstruct : function(self){
        self.setSubmitComments();
    },
    construct  :function(self,options){

        self.beforeSave = function(req ,piece , options ,callback){
            piece.title = 'portfolio';
            return callback();
        }

        self.setSubmitComments = function(){
            self.submitComments = self.apos.schemas.subset(self.schema , 
                ['title' , 'readerName' , 'comment']
            );
        }

        self.submit = function(req , callback){
            var piece = {};

            return async.series([
                convert,
                insert
            ] ,callback);

            function convert(callback){
                return self.apos.schemas.convert(req , self.schema , 'form' , req.body , piece , callback);
            }
            function insert(callback){
                return self.insert(req , piece , {permissions : false},callback);
            }
        }
    }
}

In my comments-forms-widgets : {} :

module.exports = {
    extend : 'apostrophe-pieces-widgets',
    label : 'Comments Widgets',
    contextualOnly : true,
    scene : 'user', // to enable AJAX on page
    construct : function(self , options){
        self.pushAsset('script' , 'always' , {when : 'always'});
        self.pushAsset('stylesheet' , 'commentWidget' , {when : 'always'});

        self.forms = self.apos.commentsForm;

        self.output = function(widget , options){
            return self.partial(self.template , {
                widget : widget,
                options :options,
                manager : self,
                schema : self.forms.submitComments
            });
        };

        self.route('post' , 'comments' , function(req , res){
            return self.forms.submit(req, function(err){
                return res.send({status : err ? 'error' : 'ok'});
            })
        });

        var superGetCreateSingletonOptions = self.getCreateSingletonOptions;

        self.getCreateSingletonOptions = function(req){
            var options = superGetCreateSingletonOptions(req);
            options.submitComments = self.forms.submitComments;
            options.piece = self.forms.newInstance();
            return options;
        }
    }
}

In my /comments-forms-widgets/views/widget.html :

{% import "apostrophe-schemas:macros.html" as schemas %}
<form class="comment-widget" style="padding: 50px;" data-contact-form>
    <h4>Leave a comment</h4>
    {{ schemas.fields(data.schema , {tabs : false}) }}
    <button type="submit" style="padding: 10px;">Submit</button>
</form>

And lastly in my always.js :

apos.define('comments-form-widgets', {
    extend: 'apostrophe-pieces-widgets',
    construct: function (self, options) {
        self.play = function ($widget, data, options) {
            var $form = $widget.find('[data-contact-form]');
            console.log("Forms ?" , $form);
            var schema = self.options.submitComments;
            console.log("Schema ?" , schema);
            var piece = _.cloneDeep(self.options.piece);
            return apos.schemas.populate($form , self.schema , self.piece , function(err){
                if(err){
                    alert('A problem occured setting up the contact form');
                    return;
                }
                enableSubmit();
            });

            function enableSubmit(){
                $form.on('submit' , function(){
                    submit();
                    console.log("Submit and Return False");
                    return false;
                });
            }

            function submit(){
                return async.series([
                    convert,
                    submitToServer
                ],function(err){
                    if(err){
                        alert('Something was not right. Please review your submission');
                    }
                    console.log("Submit Sucess");
                })
            }

            function convert(callback){
                return apos.schemas.convert($form , schema , piece,callback);
            }

            function submitToServer(callback){
                return self.api('comments' ,piece, function(data){
                    if(data.status === 'ok'){
                        // All is well
                        return callback(null);
                    }
                    // API Level error
                    return callback('error');
                },function(err){
                    // Transport-level error
                    return callback(err);
                });
            }
        };
    }
});

Please help , it may be mistaken/misspelling in the code . But this problem has been tried many solutions before . I just want enable comment in show.html(pieces-pages)

Answer 1

In your apos.singleton call you are passing the widget type name comments-form, but your widget module is called comments-forms-widgets (note the plural).

You should rename the module (to comments-form-widgets) or use the right name in the singleton call (comments-forms).

Also check whether the apostrophe-pieces-submit-widgets module already does what you are trying to do here.