form.js

Ext.require([
    'Ext.form.*',
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.tip.QuickTipManager',
    'Ext.window.MessageBox'
]);

/* 
Used in the lineItemModel to convert the DB values
for concessionable, commissionable, and taxable
from the string values 'Y', 'N' to actual
boolean true and false values.
*/
function checkboxConvert(v, record) {
    if (v === 'Y') {
        return true;
    } else {
        return false;
    }
}

Ext.define('lineItemModel',{
    extend:'Ext.data.Model',
    fields:[{
        name: 'id',
        mapping: 'item_id',
        type: 'int',
        useNull: false},
        'item_display_number','item_name',
        'year','base_price','max_price_per_unit','unit_price',
            {name: 'include_in_program',convert: checkboxConvert},
            {name: 'commissionable',convert: checkboxConvert},
            {name: 'concessionable',convert: checkboxConvert},
            {name: 'taxable',convert: checkboxConvert},
            {name: 'print_on_preliminary',convert: checkboxConvert},
            {name: 'print_on_invoice',convert: checkboxConvert},
            {name: 'print_units',convert: checkboxConvert},
            'debit_gl_id','created','created_by','last_updated','last_updated_by',
            'line_item_notes','yearbook','commercial','donning','military','history',
            'other','none', 'item_description', 'line_item_type'
    ],
    validations: [
        {type: 'presence', field: 'item_name'}]
});

var invoicer_lineItemYearStore = new Ext.data.Store({
    fields: ['YEAR'],
    proxy: {
        type: 'ajax',
        url: '/invoicer/data/getlineitemyears',
        reader: {
            type: 'json'
        }
    }
}); // end invoicer_lineItemYearStore

var invoicer_lineItemTypeStore =  Ext.create ('Ext.data.Store',{
    fields: [{
        name: 'id',
        mapping: 'line_item_type_id',
        type: 'int'},
        'line_item_type','active'],
    autoLoad:true,
    proxy: {
        type: 'ajax',
        url : '/invoicer/data/getlineitemtypes',
        reader: {
            type: 'json',
            root: 'results'
        }
    },
    sorters:[{
        property:'line_item_type_id',
        direction:'ASC'
    }]
}); // end invoicer_lineItemTypeStore

var invoicer_glStore = new Ext.data.Store({
    fields: [
             'gl_id', 'segment1', 'segment2', 'segment3', 'segment4',
             'segment5', 'segment6', 'description'
            ],
    proxy: {
        type: 'ajax',
        url: '/invoicer/data/getgl',
        reader: {
            type: 'json',
            root: 'results',
            totalProperty: 'totalCount'
        }
    }
}); // end invoicer_glStore

var invoicer_glStore2 = new Ext.data.Store({
    fields: [
             'item_id', 'year', 'job_type', 'job_type_name',
             'gl_id', 'segment1', 'segment2', 'segment3',
             'segment4', 'segment5', 'segment6', 'display', 'gl_desc'
            ],
    proxy: {
        type: 'ajax',
        url: '/invoicer/data/getgl',
        reader: {
            type: 'json',
            root: 'results',
            totalProperty: 'totalCount'
        }
    },
    filters:[{
        property:'active',
        value:'1'
    }]

}); // end invoicer_glStore

/*
Called when a user picks a year from the year drop down
on the top dock of the grid. This filters the store to
only populate with line items from that job year.
*/
function lineItemGridFilter( store ) {
    var data = Ext.getCmp('year').getValue();
    store.remoteFilter = false;
    store.clearFilter();
    if ( data ) {
        store.filter('year', data);
    }
    store.remoteFilter = true;
    store.removeAll();
    store.load();
}

/*
Called when a user clicks a record in the grid.
This sets the value of each combobox for the record.

If we get 'None' as a GL Type from the database, we're
disabling the other comboboxes.

***Cross Browser Warning!!!***
*
*  forEach used in this
*  function doesn't work
*  in IE.
*
******************************
*/
function lineItemGlFilter( store ) {
    var id = +Ext.getCmp('item_id').getValue();
    store.remoteFilter = false;
    store.clearFilter();
    if ( id ) {
        store.filter('item_id', id);
        store.sort('job_type_name', 'ASC');
    }
    store.remoteFilter = true;
    store.removeAll();
    store.load({
        scope: this,
        callback: function ( records ) {
            var components = ['Commercial', 'Donning', 'History',
                              'Military', 'Other', 'Yearbook'];
            if ( records.length <= 1 ) {
                if ( records[0].data.job_type_name === 'None' ) {
                  components.forEach(function ( comp ) {
                    Ext.getCmp(comp).hide();
                    Ext.getCmp('None').show();
                    });
                }
            } else {
                Ext.getCmp('None').hide();
            }
            /* forEach(function(elementValue, elementIndex,traversedArray))*/
            //https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/forEach
            components.forEach(function (comp, index) {
                //# of times following line has been used for debug: 4
                //console.log('Component: ' + comp + ' | ' + 'Type: ' + records[index].data.job_type_name + ' Value: ' + records[index].data.display)
                Ext.getCmp(comp).setValue(records[index].data.display);
            });
        }
    });
}

var invoicer_lineItemStore = Ext.create('Ext.data.Store', {
    model: 'lineItemModel',
    autoLoad: false,
    autoSync: true,
    pageSize: 10,
    proxy: {
        type: 'ajax',
        api: {
            read: '/invoicer/data/getlineitems',
            create: '/invoicer/data/savelineitem',
            update: '/invoicer/data/savelineitem',
            destroy: ''
        },
        reader: {
            type: 'json',
            successProperty: 'success',
            root: 'results',
            totalProperty: 'totalCount',
            messageProperty: 'message'
        },
        writer: {
            type: 'json',
            writeAllFields: true,
            root: 'data'
        },
        listeners: {
            exception: function (proxy, response, operation) {
                Ext.MessageBox.show({
                    title: 'REMOTE EXCEPTION',
                    msg: operation.getError(),
                    icon: Ext.MessageBox.ERROR,
                    buttons: Ext.Msg.OK
                });
            }
        }
    },
    listeners: {
        write: function (proxy, operation) {
            if (operation.action === 'destroy') {
                invoicer_creditMemoReasonPanel.child('#form').setActiveRecord(null);
            }
        }
    },
    sorters:[{
        property:'item_id',
        direction:'ASC'
    }]  
});

// var store = invoicer_lineItemStore;
// store.filter('item_id','472');
// store.remoteFilter = true;
// store.removeAll();
// store.load();

Ext.define('Writer.Form', {
    extend: 'Ext.form.Panel',
    alias: 'widget.creditMemoReasonForm',

    requires: ['Ext.form.field.Text'],

    initComponent: function() {
        this.addEvents('create');
        Ext.apply(this, {
            activeRecord: null,
            id: 'itemYear',
            frame: true,
            defaultType: 'textfield',
            bodyPadding: 5,
            fieldDefaults: {
                anchor: '100%',
                labelAlign: 'right'
            },
            items: [{
                        xtype: 'hiddenfield',
                        name: 'year',
                        id: 'li_year',
                        fieldLabel: 'Label',
                        anchor: '100%'
                    },{
                        xtype: 'hiddenfield',
                        name: 'id',
                        id: 'item_id',
                        fieldLabel: 'Item ID',
                        anchor: '100%'
                    },{
                        xtype: 'fieldset',
                        height: 32,
                        layout: {
                            align: 'stretch',
                            type: 'hbox'
                        },
                        anchor: '100%',
                        items: [{
                                    xtype: 'numberfield',
                                    padding: '5 0 0 0',
                                    //height: 25,
                                    width: 200,
                                    name: 'item_display_number',
                                    fieldLabel: 'Display Number',
                                    labelWidth: 100,
                                    flex: .5,
                                    allowBlank: false
                                },{
                                    xtype: 'textfield',
                                    padding: '2 0 0 0',
                                    height: 25,
                                    name: 'item_name',
                                    id: 'item_name',
                                    fieldLabel: 'Name',
                                    labelWidth: 60,
                                    width: 100,
                                    flex: 1,
                                    allowBlank: false
                                },{
                                    xtype: 'numberfield',
                                    padding: '5 0 0 0',
                                    width: 200,
                                    name: 'unit_price',
                                    fieldLabel: 'Unit Price',
                                    renderer: 'usMoney',
                                    flex: .5,
                                    allowBlank: false
                }]
        },{
            xtype: 'fieldset',
            height: 77,
            layout: {
                align: 'stretch',
                type: 'hbox'
            },
            anchor: '100%',
            items: [{
                xtype: 'panel',
                cls: 'lulz',
                items: [{
                    xtype: 'checkboxgroup',
                    width: 150,
                    height: 75,
                    layout: {
                        align: 'stretch',
                        type: 'vbox'
                    },
                    flex: 1,
                    items: [
                        {
                            xtype: 'checkboxfield',
                            name: 'commissionable',
                            boxLabel: 'Commissionable',
                            dataIndex: 'commissionable',
                            inputValue:'Y',
                            uncheckedValue:'N',
                            flex: 1
                        },{
                            xtype: 'checkboxfield',
                            name: 'concessionable',
                            boxLabel: 'Concessionable',
                            inputValue:'Y',
                            uncheckedValue:'N',
                            flex: 1
                        },{
                            xtype: 'checkboxfield',
                            name: 'taxable',
                            boxLabel: 'Taxable',
                            inputValue:'Y',
                            uncheckedValue:'N',
                            flex: 1
                        }
                    ]
                }]
            },{
                xtype: 'panel',
                cls: 'lulz',
                items: [{
                    xtype: 'checkboxgroup',
                    width: 150,
                    height: 75,
                    layout: {
                        align: 'stretch',
                        type: 'vbox'
                    },
                    flex: 1,
                    items: [
                        {
                            xtype: 'checkboxfield',
                            name: 'print_on_preliminary',
                            boxLabel: 'Print On Prelim',
                            inputValue: 'Y',
                            uncheckedValue: 'N',
                            flex: 1
                        },{
                            xtype: 'checkboxfield',
                            name: 'print_on_invoice',
                            boxLabel: 'Print On Invoice',
                            inputValue: 'Y',
                            uncheckedValue: 'N',
                            flex: 1
                        },{
                            xtype: 'checkboxfield',
                            name: 'print_units',
                            boxLabel: 'Print Units',
                            inputValue: 'Y',
                            uncheckedValue: 'N',
                            flex: 1
                        }
                    ]
                }]
                },{
                    xtype: 'panel',
                    cls: 'lulz',
                    height: 150,
                    width: 850,
                    layout: {
                        type: 'auto'
                    },
                    items: [{
                        xtype: 'container',
                        width: 850,
                        height: 25,
                        layout: {
                            align: 'stretch',
                            type: 'hbox'
                        },
                        items: [{
                            xtype: 'combobox',
                            name: 'debit_gl_id',
                            fieldLabel: 'Debit GL ID',
                            store: invoicer_glStore,
                            displayField: 'description',
                            valueField: 'gl_id',
                            width: 450
                        },{
                            xtype: 'combobox',
                            fieldLabel: 'Line Item Type',
                            anchor: '100%',
                            name: 'line_item_type',
                            store: invoicer_lineItemTypeStore,
                            displayField: 'line_item_type',
                            valueField: 'id',
                            width: 400
                        }]
                    },{
                            xtype: 'container',
                            width: 850,
                            height: 50,
                            items: [{
                                xtype: 'textareafield',
                                name: 'item_description',
                                width: 850,
                                height: 50,
                                fieldLabel: 'Description'
                            }
                            ]
                        }]
                }
            ]
        },{
            xtype: 'fieldset',
            height: 117,
            layout: {
                align: 'stretch',
                type: 'hbox'
            },
            items: [
                {
                    xtype: 'fieldset',
                    cls: 'removeFSBorder',
                    padding: '15 0 0 0',
                    border: 0,
                    layout: {
                        align: 'stretch',
                        type: 'vbox'
                    },
                    flex: 1,
                    items: [
                        {
                            xtype: 'combobox',
                            name: 'yearbook',
                            id: 'Yearbook',
                            fieldLabel: 'Yearbook',
                            labelAlign: 'right',
                            store: invoicer_glStore,
                            displayField: 'description',
                            valueField: 'gl_id',
                            labelWidth: 70,
                            flex: 1
                        },{
                            xtype: 'combobox',
                            name: 'commercial',
                            id: 'Commercial',
                            fieldLabel: 'Commercial',
                            labelAlign: 'right',
                            store: invoicer_glStore,
                            displayField: 'description',
                            valueField: 'gl_id',
                            labelWidth: 70,
                            flex: 1
                        },{
                            xtype: 'combobox',
                            name: 'donning',
                            id: 'Donning',
                            fieldLabel: 'Donning',
                            labelAlign: 'right',
                            store: invoicer_glStore,
                            displayField: 'description',
                            valueField: 'gl_id',
                            labelWidth: 70,
                            flex: 1
                        }
                    ]
                },
                {
                    xtype: 'fieldset',
                    cls: 'removeFSBorder',
                    padding: '15 0 0 0',
                    border: 0,
                    flex: 1,
                    //height: 200,
                    items: [
                        {
                            xtype: 'combobox',
                            name: 'military',
                            id: 'Military',
                            fieldLabel: 'Military',
                            labelAlign: 'right',
                            store: invoicer_glStore,
                            displayField: 'description',
                            valueField: 'gl_id',
                            labelWidth: 50,
                            flex: 1
                        },{
                            xtype: 'combobox',
                            name: 'history',
                            id: 'History',
                            fieldLabel: 'History',
                            labelAlign: 'right',
                            padding: '1 0 0 0',
                            store: invoicer_glStore,
                            displayField: 'description',
                            valueField: 'gl_id',
                            labelWidth: 50,
                            flex: 1
                        },{
                            xtype: 'combobox',
                            name: 'other',
                            id: 'Other',
                            fieldLabel: 'Other',
                            labelAlign: 'right',
                            store: invoicer_glStore,
                            displayField: 'description',
                            valueField: 'gl_id',
                            labelWidth: 50,
                            flex: 1
                        },{
                            xtype: 'combobox',
                            name: 'none',
                            hidden: true,
                            id: 'None',
                            fieldLabel: 'None',
                            labelAlign: 'right',
                            store: invoicer_glStore,
                            displayField: 'description',
                            valueField: 'gl_id',
                            labelWidth: 50,
                            flex: .5
                        }
                    ]
                }
            ]
        }],
            dockedItems: [{
                xtype: 'toolbar',
                dock: 'bottom',
                ui: 'footer',
                items: ['->', {
                    itemId: 'save',
                    text: 'Save',
                    disabled: true,
                    scope: this,
                    handler: this.onSave
                }, {
                    text: 'Create',
                    scope: this,
                    handler: this.onCreate
                }, {
                    text: 'Reset',
                    scope: this,
                    handler: this.onReset
                }]
            }]
        });
        this.callParent();
    },

    setActiveRecord: function(record){
        this.activeRecord = record;
        if (record) {
            this.down('#save').enable();
            this.getForm().loadRecord(record);
        } else {
            this.down('#save').disable();
            this.getForm().reset();
        }
    },

    onSave: function(){
        var active = this.activeRecord,
            form = this.getForm();

        if ( !active ) {
            return;
        }

        if (form.isValid()) {
            form.updateRecord(active);
            this.onReset();
        }
    },

    onCreate: function(){
        var form = this.getForm();
        if (form.isValid()) {
            this.fireEvent('create', this, form.getValues());
            form.reset();
        }
    },

    onReset: function(){
        this.setActiveRecord(null);
        this.getForm().reset();
    }
});

var invoicer_lineItemColumns=[{
                        xtype: 'gridcolumn',
                         text: 'ID',
                         dataIndex:'item_display_number',
                         width:40
                    },{  xtype: 'gridcolumn',
                         text: 'Name',
                         dataIndex:'item_name',
                         width:300
                    },{
                        xtype: 'gridcolumn',
                        text: 'Description',
                        dataIndex: 'item_description',
                        width: 300
                    },{
                        xtype: 'gridcolumn',
                        text: 'Unit Price',
                        dataIndex:'unit_price',
                        renderer: 'usMoney',
                        width: 100
                    },{
                        xtype: 'booleancolumn',
                        header: 'Taxable',
                        sortable: false,
                        dataIndex: 'taxable',
                        trueText: 'Y',
                        falseText: 'N'
                    },{
                        xtype: 'booleancolumn',
                        header: 'Commissionable',
                        sortable: false,
                        dataIndex: 'commissionable',
                        trueText: 'Y',
                        falseText: 'N'
                    }, {
                        xtype: 'booleancolumn',
                        header: 'Concessionable',
                        sortable: false,
                        dataIndex: 'concessionable',
                        trueText: 'Y',
                        falseText: 'N'
                    }, {
                        xtype: 'booleancolumn',
                        header: 'Print on Prelim',
                        sortable: false,
                        dataIndex: 'print_on_preliminary',
                        trueText: 'Y',
                        falseText: 'N'
                    }, {
                        xtype: 'booleancolumn',
                        header: 'Print On Invoice',
                        sortable: false,
                        dataIndex: 'print_on_invoice',
                        trueText: 'Y',
                        falseText: 'N'
                    }];

Ext.define('Writer.Grid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.writergrid',

    requires: [
        'Ext.grid.plugin.CellEditing',
        'Ext.form.field.Text',
        'Ext.toolbar.TextItem'
    ],

    initComponent: function(){

        this.editing = Ext.create('Ext.grid.plugin.CellEditing');

        Ext.apply(this, {
            iconCls: 'icon-grid',
            frame: true,
            plugins: [this.editing],
            dockedItems: [{
                            xtype: 'toolbar',
                            dock: 'top',
                            items: [{
                                xtype: 'combobox',
                                fieldLabel: 'Year',
                                id: 'year',
                                name: 'year',
                                displayField: 'YEAR',
                                valueField: 'YEAR',
                                store: invoicer_lineItemYearStore,
                                forceSelection: true,
                                listeners:{
                                    change:{
                                        fn: function( v ) {
                                                var form = Ext.getCmp('itemYear').getForm();
                                                if ( form.isValid() ) {
                                                    form.setValues({
                                                        year: v.value
                                                    });
                                                } else {
                                                    lineItemGridFilter(invoicer_lineItemStore);
                                                }
                                            }
                                    }
                                }
                            }]
                        },{
                            xtype: 'pagingtoolbar',
                            store: invoicer_lineItemStore,
                            dock: 'bottom',
                            displayInfo: true
            }],
            columns: invoicer_lineItemColumns
        });
        this.callParent();
        this.getSelectionModel().on('selectionchange', this.onSelectChange, this);
    },
    
    onSelectChange: function(selModel, selections){
        this.down().setDisabled(selections.length === 0);
    },

    onSync: function(){
        this.store.sync();
    },

    onDeleteClick: function(){
        var selection = this.getView().getSelectionModel().getSelection()[0];
        if (selection) {
            this.store.remove(selection);
        }
    },

    onAddClick: function(){
        var rec = new Writer.Person({
            first: '',
            last: '',
            email: ''
        }), edit = this.editing;

        edit.cancelEdit();
        this.invoicer_creditMemoReasonStore.insert(0, rec);
        edit.startEditByPosition({
            row: 0,
            column: 1
        });
    }
});

Ext.onReady(function(){
    Ext.tip.QuickTipManager.init();

    var invoicer_creditMemoReasonPanel = Ext.create('Ext.Panel',{
            renderTo:'cm-panel',
            title:'Line Item Content Management',
            width: 1200,
            layout: {
                    align: 'stretch',
                    type: 'vbox'
                },
            items:[{
                itemId: 'form',
                xtype: 'creditMemoReasonForm',
                height: 300,
                margins: '0 0 10 0',
                //padding: '10 200',
                listeners: {
                    create: function(form, data) {
                    invoicer_lineItemStore.insert(0, data);
                    }
                }
            },{
                itemId: 'grid',
                xtype: 'writergrid',
                height: 300,
                store: invoicer_lineItemStore,
                listeners: {
                    selectionchange: function(selModel, selected) {
                        var form = invoicer_creditMemoReasonPanel.child('#form');
                        var id = form.getValues().item_id;

                        form.setActiveRecord(selected[0] || null);
                        lineItemGlFilter(invoicer_glStore2);
                    }
                }
            }]
    });
    // Set height of the panel equal to the height of its childen
    // Plus a buffer of 35PX.
    // # TODO: Remove before prod
    invoicer_creditMemoReasonPanel.setHeight(invoicer_creditMemoReasonPanel.child('#form').height + invoicer_creditMemoReasonPanel.child('#grid').height + 35);
});