Message Editor w/ Standard Options

Message Editor w/ Standard Options

by Jimmy Chandra

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<div id="message_editor">
    Please choose one or more reasons of why you are archiving this invoice (<span data-bind="text:invoiceName"></span>):<br/><br/>
<div><label><input type="checkbox" value="Extraction from Account Statement document is not supported" data-bind="checked: reasons" /> Extraction from Account Statement document is not supported</label></div>
<div><label><input type="checkbox" value="Extraction from Order Acknowledgements document is not supported" data-bind="checked: reasons" /> Extraction from Order Acknowledgements document is not supported</label></div>
<div><label><input type="checkbox" value="Extraction from a scan containing multiple invoices is not supported" data-bind="checked: reasons" /> Extraction from a scan containing multiple invoices is not supported</label></div>
<div><label><input type="checkbox" value="Unsupported Receipt document type" data-bind="checked: reasons" /> Unsupported Receipt document type</label></div>
<div><label><input type="checkbox" value="Unsupported document type.  Currently InvoiceSmash only supports extraction from Invoice and Purchase Order document types" data-bind="checked: reasons" /> Unsupported document type.  Currently InvoiceSmash only supports extraction from Invoice and Purchase Order document types</label></div>    
<div><label><input type="checkbox" value="Unable to extract data due to poor image scan quality" data-bind="checked: reasons" /> Unable to extract data due to poor image scan quality</label></div>
<div><label><input type="checkbox" value="Other" data-bind="checked: reasons" /> Other</label></div>
<div><textarea data-bind="visible: reasons().indexOf('Other') > -1, value:otherReason" rows="5" cols="40" ></textarea></div>
    <div><a href="#" data-bind="click:archive">Archive Invoice</a></div>
</div>

<div class="output" data-bind="html:outputMessage"></div>

CSS

#message_editor {
    border: solid 1px #999966;
    background: #ffffcc;
    width: 400px;
    padding: 10px;
    font: 8pt segoe ui, sans-serif
}

#message_editor h4 {
    margin-bottom:10px;
    color:#999966;
}

#message_editor input[type=checkbox] {
    position:absolute;
    margin-left:-24px;    
    margin-bottom:10px;
}

#message_editor label {
    position:relative;
    margin-left:24px;
    margin-top:5px;
    margin-bottom:5px;
    display:inline-block;
}

#message_editor textarea {
    margin-left:24px;
    font:8pt segoe ui, sans-serif;
    padding:5px;
    width:360px
}

.output {
    margin:20px;
    border:solid 1px #cccccc;
    padding:10px;
    font:8pt segoe ui, sans-serif;
}

.output ul {
    list-style-type: disc;
    margin-left:24px;
}

JavaScript

function newMessageViewModel(invoiceId, invoiceName) {
    var self = this;
    self.invoiceId = ko.observable(invoiceId);
    self.invoiceName = ko.observable(invoiceName);
    self.reasons = ko.observableArray();
    self.otherReason = ko.observable();
    self.outputMessage = ko.observable(); 
    
    self.archive = function() {
        var m = "<p>InvoiceSmash is unable to perform extraction on this file due to the following reason";
        if (self.reasons().length > 1) m += "s";        
        m += ":</p><ul>";
        
        for (var i=0,l=self.reasons().length; i < l; i += 1) {
            var d = self.reasons()[i];
            if (d !== 'Other') {
                m += "<li>" + d + "</li>";
            } else {
                m += "<li>" + self.otherReason() + "</li>";
            }
        }
            
        m += "</ul>";
        
        self.outputMessage(m);
        
    };
}

$(function () {
    
    if(!Array.prototype.indexOf) {
        Array.prototype.indexOf = function(needle) {
            for(var i = 0; i < this.length; i++) {
                if(this[i] === needle) {
                    return i;
                }
            }
            return -1;
        };
    }
    
 var viewModel = new newMessageViewModel(1, '150990.pdf');
    
    ko.applyBindings(viewModel);
});