bump version to 7.0.0-4

[extjs.git] / extjs / build / examples / classic / personel-review / reviewapp.js

Ext.require([
    '*'
]);

Ext.BLANK_IMAGE_URL = '../libs/ext-4.0/resources/themes/images/default/tree/s.gif';

Ext.onReady(function() {
    var employeeStore, radarStore, reviewStore;

    // Employee Data Model
    Ext.regModel('Employee', {
        fields: [
            { name: 'id', type: 'int' },
            { name: 'first_name', type: 'string' },
            { name: 'last_name', type: 'string' },
            { name: 'title', type: 'string' }
        ],

        hasMany: { model: 'Review', name: 'reviews' }
    });

    // Review Data Model    
    Ext.regModel('Review', {
        fields: [
            { name: 'review_date', label: 'Date', type: 'date', dateFormat: 'd-m-Y' },
            { name: 'attendance', label: 'Attendance', type: 'int' },
            { name: 'attitude', label: 'Attitude', type: 'int' },
            { name: 'communication', label: 'Communication', type: 'int' },
            { name: 'excellence', label: 'Excellence', type: 'int' },
            { name: 'skills', label: 'Skills', type: 'int' },
            { name: 'teamwork', label: 'Teamwork', type: 'int' },
            { name: 'employee_id', label: 'Employee ID', type: 'int' }
        ],

        belongsTo: 'Employee'
    });

    // Instance of a Data Store to hold Employee records
    employeeStore = new Ext.data.Store({
        storeId: 'employeeStore',
        model: 'Employee',
        data: [
            { id: 1, first_name: 'Michael', last_name: 'Scott', title: 'Regional Manager' },
            { id: 2, first_name: 'Dwight', last_name: 'Schrute', title: 'Sales Rep' },
            { id: 3, first_name: 'Jim', last_name: 'Halpert', title: 'Sales Rep' },
            { id: 4, first_name: 'Pam', last_name: 'Halpert', title: 'Office Administrator' },
            { id: 5, first_name: 'Andy', last_name: 'Bernard', title: 'Sales Rep' },
            { id: 6, first_name: 'Stanley', last_name: 'Hudson', title: 'Sales Rep' },
            { id: 7, first_name: 'Phyllis', last_name: 'Lapin-Vance', title: 'Sales Rep' },
            { id: 8, first_name: 'Kevin', last_name: 'Malone', title: 'Accountant' },
            { id: 9, first_name: 'Angela', last_name: 'Martin', title: 'Senior Accountant' },
            { id: 10, first_name: 'Meredith', last_name: 'Palmer', title: 'Supplier Relations Rep' }
        ],
        autoLoad: true
    });

    /**
     * App.RadarStore
     * @extends Ext.data.Store
     * This is a specialized Data Store with dynamically generated fields
     * data reformating capabilities to transform Employee and Review data
     * into the format required by the Radar Chart.
     *
     * The constructor demonstrates dynamically generating store fields.
     * populateReviewScores() populates the store using records from 
     * the reviewStore which holds all the employee review scores.
     *
     * calculateAverageScores() iterates through each metric in the
     * review and calculates an average across all available reviews.
     * 
     * Most of the actual data population and updates done by
     * addUpdateRecordFromReviews() and removeRecordFromReviews()
     * called when add/update/delete events are triggered on the ReviewStore.      
     */      
    Ext.define('App.RadarStore', {
        extend: 'Ext.data.Store',

        constructor: function(config) {
            var dynamicFields = ['metric', 'avg'];  // initalize the non-dynamic fields first

            config = config || {};

            employeeStore.each(function(record) {    // loops through all the employees to setup the dynamic fields
                dynamicFields.push('eid_' + record.get('id'));
            });

            Ext.apply(config, {
                storeId: 'radarStore',   // let's us look it up later using Ext.data.StoreMgr.lookup('radarStore')
                fields: dynamicFields,
                data: []
            });

            App.RadarStore.superclass.constructor.call(this, config);
        },

        addUpdateRecordFromReviews: function(reviews) {
            var me = this,
                metricRecord, newRecord;

            Ext.Array.each(reviews, function(review, recordIndex, all) {    // add a new radarStore record for each review record 
                var eid = 'eid_' + review.get('employee_id');   // creates a unique id for each employee column in the store    

                review.fields.each(function(field) {

                    if (field.name !== "employee_id" && field.name !== "review_date") {  // filter out the fields we don't need
                        metricRecord = me.findRecord('metric', field.name); // checks for an existing metric record in the store

                        if (metricRecord) {
                            metricRecord.set(eid, review.get(field.name));  // updates existing record with field value from review
                        }
                        else {
                            newRecord = {};    // creates a new object we can populate with dynamic keys and values to create a new record

                            newRecord[eid] = review.get(field.name);
                            newRecord.metric = field.label;
                            me.add(newRecord);
                        }
                    }
                });
            });

            this.calculateAverageScores();  // update average scores
        },

        /**
         * Calculates an average for each metric across all employees.
         * We use this to create the average series always shown in the Radar Chart.      
         */              
        calculateAverageScores: function() {
            var me = this, // keeps the store in scope during Ext.Array.each
                reviewStore = Ext.data.StoreMgr.lookup('reviewStore'),
                Review = Ext.ModelMgr.getModel('Review'),
                avgScore, record;

            Ext.Array.each(Review.prototype.fields.keys, function(fieldName) {  // loop through the Review model fields and calculate average scores
                if (fieldName !== "employee_id" && fieldName !== "review_date") {  // ignore non-score fields
                    avgScore = Math.round(reviewStore.average(fieldName));  // takes advantage of Ext.data.Store.average()
                    record = me.findRecord('metric', fieldName);

                    if (record) {
                        record.set('avg', avgScore);
                    }
                    else {
                        me.add({ metric: fieldName, avg: avgScore });
                    }
                }
            });
        },

        populateReviewScores: function() {
            var reviewStore = Ext.data.StoreMgr.lookup('reviewStore');

            this.addUpdateRecordFromReviews(reviewStore.data.items); // add all the review records to this store
        },

        removeRecordFromReviews: function(reviews) {
            var me = this;

            Ext.Array.each(reviews, function(review, recordIndex, all) {
                var eid = 'eid_' + review.get('employee_id');

                me.each(function(record) {
                    delete record.data[eid];
                });
            });

            // upate average scores
            this.calculateAverageScores();
        }
    }); // end App.RadarStore definition

    /** Creates an instance of App.RadarStore here so we
     * here so we can re-use it during the life of the app.
     * Otherwise we'd have to create a new instance everytime
     * refreshRadarChart() is run.
     */
    radarStore = new App.RadarStore();

    reviewStore = new Ext.data.Store({
        storeId: 'reviewStore',
        model: 'Review',
        data: [
            { review_date: '01-04-2011', attendance: 10, attitude: 6, communication: 6, excellence: 3, skills: 3, teamwork: 3, employee_id: 1 },
            { review_date: '01-04-2011', attendance: 6, attitude: 5, communication: 2, excellence: 8, skills: 9, teamwork: 5, employee_id: 2 },
            { review_date: '01-04-2011', attendance: 5, attitude: 4, communication: 3, excellence: 5, skills: 6, teamwork: 2, employee_id: 3 },
            { review_date: '01-04-2011', attendance: 8, attitude: 2, communication: 4, excellence: 2, skills: 5, teamwork: 6, employee_id: 4 },
            { review_date: '01-04-2011', attendance: 4, attitude: 1, communication: 5, excellence: 7, skills: 5, teamwork: 5, employee_id: 5 },
            { review_date: '01-04-2011', attendance: 5, attitude: 2, communication: 4, excellence: 7, skills: 9, teamwork: 8, employee_id: 6 },
            { review_date: '01-04-2011', attendance: 10, attitude: 7, communication: 8, excellence: 7, skills: 3, teamwork: 4, employee_id: 7 },
            { review_date: '01-04-2011', attendance: 10, attitude: 8, communication: 8, excellence: 4, skills: 8, teamwork: 7, employee_id: 8 },
            { review_date: '01-04-2011', attendance: 6, attitude: 4, communication: 9, excellence: 7, skills: 6, teamwork: 5, employee_id: 9 },
            { review_date: '01-04-2011', attendance: 7, attitude: 5, communication: 9, excellence: 4, skills: 2, teamwork: 4, employee_id: 10 }
        ],
        listeners: {
            add: function(store, records, storeIndex) {
                var radarStore = Ext.data.StoreMgr.lookup('radarStore');

                if (radarStore) {    // only add records if an instance of the rardarStore already exists
                    radarStore.addUpdateRecordFromReviews(records);   // add a new radarStore records for new review records                              
                }
            }, // end add listener
            update: function(store, record, operation) {
                radarStore.addUpdateRecordFromReviews([record]);
                refreshRadarChart();
            },
            remove: function(store, records, storeIndex) {
            // update the radarStore and regenerate the radarChart
                Ext.data.StoreMgr.lookup('radarStore').removeRecordFromReviews(records);
                refreshRadarChart();
            } // end remove listener
        }
    });

    /**
     * App.PerformanceRadar
     * @extends Ext.chart.Chart
     * This is a specialized Radar Chart which we use to display employee 
     * performance reviews.
     *
     * The class will be registered with an xtype of 'performanceradar'
     */      
    Ext.define('App.PerformanceRadar', {
        extend: 'Ext.chart.Chart',
        alias: 'widget.performanceradar',           // register xtype performanceradar
        constructor: function(config) {
            config = config || {};

            this.setAverageSeries(config);    // make sure average is always present

            Ext.apply(config, {
                id: 'radarchart',
                theme: 'Category2',
                animate: true,
                store: Ext.data.StoreMgr.lookup('radarStore'),
                margin: '0 0 50 0',
                width: 350,
                height: 500,
                insetPadding: 80,
                legend: {
                    position: 'bottom'
                },
                axes: [{
                    type: 'Radial',
                    position: 'radial',
                    label: {
                        display: true
                    }
                }]
            }); // end Ext.apply

            App.PerformanceRadar.superclass.constructor.call(this, config);

        }, // end constructor

        setAverageSeries: function(config) {
            var avgSeries = {
                type: 'radar',
                xField: 'metric',
                yField: 'avg',
                title: 'Avg',
                labelDisplay: 'over',
                showInLegend: true,
                showMarkers: true,
                markerCfg: {
                    radius: 5,
                    size: 5,
                    stroke: '#0677BD',
                    fill: '#0677BD'
                },
                style: {
                    'stroke-width': 2,
                    'stroke': '#0677BD',
                    fill: 'none'
                }
            };

            if (config.series) {
                config.series.push(avgSeries);     // if a series is passed in then append the average to it
            }
            else {
                config.series = [avgSeries];    // if a series isn't passed just create average
            }
        }

    }); // end Ext.ux.Performance radar definition

    /**
     * App.EmployeeDetail
     * @extends Ext.Panel
     * This is a specialized Panel which is used to show information about
     * an employee and the reviews we have on record for them.
     *
     * This demonstrates adding 2 custom properties (tplMarkup and
     * startingMarkup) to the class. It also overrides the initComponent
     * method and adds a new method called updateDetail.
     *
     * The class will be registered with an xtype of 'employeedetail'
     */
    Ext.define('App.EmployeeDetail', {
        extend: 'Ext.panel.Panel',
        // register the App.EmployeeDetail class with an xtype of employeedetail
        alias: 'widget.employeedetail',
        // add tplMarkup as a new property
        tplMarkup: [
            '<b>{first_name}&nbsp;{last_name}</b>&nbsp;&nbsp;',
            'Title: {title}<br/><br/>',
            '<b>Last Review</b>&nbsp;&nbsp;',
            'Attendance:&nbsp;{attendance}&nbsp;&nbsp;',
            'Attitude:&nbsp;{attitude}&nbsp;&nbsp;',
            'Communication:&nbsp;{communication}&nbsp;&nbsp;',
            'Excellence:&nbsp;{excellence}&nbsp;&nbsp;',
            'Skills:&nbsp;{skills}&nbsp;&nbsp;',
            'Teamwork:&nbsp;{teamwork}'
        ],

        height: 90,
        bodyPadding: 7,
        // override initComponent to create and compile the template
        // apply styles to the body of the panel
        initComponent: function() {
            this.tpl = new Ext.Template(this.tplMarkup);

            // call the superclass's initComponent implementation
            App.EmployeeDetail.superclass.initComponent.call(this);
        }
    });

    Ext.define('App.ReviewWindow', {
        extend: 'Ext.window.Window',

        constructor: function(config) {
            config = config || {};
            Ext.apply(config, {
                title: 'Employee Performance Review',
                width: 320,
                height: 420,
                layout: 'fit',
                items: [{
                    xtype: 'form',
                    id: 'employeereviewcomboform',
                    fieldDefaults: {
                        labelAlign: 'left',
                        labelWidth: 90,
                        anchor: '100%'
                    },
                    bodyPadding: 5,
                    items: [{
                        xtype: 'fieldset',
                        title: 'Employee Info',
                        items: [{
                            xtype: 'hiddenfield',
                            name: 'employee_id'
                        }, {
                            xtype: 'textfield',
                            name: 'first_name',
                            fieldLabel: 'First Name',
                            allowBlank: false
                        }, {
                            xtype: 'textfield',
                            name: 'last_name',
                            fieldLabel: 'Last Name',
                            allowBlank: false
                        }, {
                            xtype: 'textfield',
                            name: 'title',
                            fieldLabel: 'Title',
                            allowBlank: false
                        }]
                    }, {
                        xtype: 'fieldset',
                        title: 'Performance Review',
                        items: [{
                            xtype: 'datefield',
                            name: 'review_date',
                            fieldLabel: 'Review Date',
                            format: 'd-m-Y',
                            maxValue: new Date(),
                            value: new Date(),
                            allowBlank: false
                        }, {
                            xtype: 'slider',
                            name: 'attendance',
                            fieldLabel: 'Attendance',
                            value: 5,
                            increment: 1,
                            minValue: 1,
                            maxValue: 10
                        }, {
                            xtype: 'slider',
                            name: 'attitude',
                            fieldLabel: 'Attitude',
                            value: 5,
                            minValue: 1,
                            maxValue: 10
                        }, {
                            xtype: 'slider',
                            name: 'communication',
                            fieldLabel: 'Communication',
                            value: 5,
                            increment: 1,
                            minValue: 1,
                            maxValue: 10
                        }, {
                            xtype: 'numberfield',
                            name: 'excellence',
                            fieldLabel: 'Excellence',
                            value: 5,
                            minValue: 1,
                            maxValue: 10
                        }, {
                            xtype: 'numberfield',
                            name: 'skills',
                            fieldLabel: 'Skills',
                            value: 5,
                            minValue: 1,
                            maxValue: 10
                        }, {
                            xtype: 'numberfield',
                            name: 'teamwork',
                            fieldLabel: 'Teamwork',
                            value: 5,
                            minValue: 1,
                            maxValue: 10
                        }]
                    }]
                }],
                buttons: [{
                    text: 'Cancel',
                    width: 80,
                    handler: function() {
                        this.up('window').close();
                    }
                }, {
                    text: 'Save',
                    width: 80,
                    handler: function(btn, eventObj) {
                        var window = btn.up('window'),
                            form = window.down('form').getForm(),
                            vals, employeeStore, currentEmployee, currentReview, newId;

                        if (form.isValid()) {
                            window.getEl().mask('saving data...');
                            vals = form.getValues();
                            employeeStore = Ext.data.StoreMgr.lookup('employeeStore');
                            currentEmployee = employeeStore.findRecord('id', vals.employee_id);

                            // look up id for this employee to see if they already exist
                            if (vals.employee_id && currentEmployee) {
                                currentEmployee.set('first_name', vals.first_name);
                                currentEmployee.set('last_name', vals.last_name);
                                currentEmployee.set('title', vals.title);

                                currentReview = Ext.data.StoreMgr.lookup('reviewStore').findRecord('employee_id', vals.employee_id);

                                currentReview.set('review_date', vals.review_date);
                                currentReview.set('attendance', vals.attendance);
                                currentReview.set('attitude', vals.attitude);
                                currentReview.set('communication', vals.communication);
                                currentReview.set('excellence', vals.excellence);
                                currentReview.set('skills', vals.skills);
                                currentReview.set('teamwork', vals.teamwork);
                            }
                            else {
                                newId = employeeStore.getCount() + 1;

                                employeeStore.add({
                                    id: newId,
                                    first_name: vals.first_name,
                                    last_name: vals.last_name,
                                    title: vals.title
                                });

                                Ext.data.StoreMgr.lookup('reviewStore').add({
                                    review_date: vals.review_date,
                                    attendance: vals.attendance,
                                    attitude: vals.attitude,
                                    communication: vals.communication,
                                    excellence: vals.excellence,
                                    skills: vals.skills,
                                    teamwork: vals.teamwork,
                                    employee_id: newId
                                });
                            }

                            window.getEl().unmask();
                            window.close();
                        }
                    }
                }]
            }); // end Ext.apply

            App.ReviewWindow.superclass.constructor.call(this, config);

        } // end constructor

    });

    // adds a record to the radar chart store and 
    // creates a series in the chart for selected employees
    function refreshRadarChart(employees) {
        var existingRadarChart = Ext.getCmp('radarchart'), // grab the radar chart component (used down below)
            reportsPanel = Ext.getCmp('reportspanel'), // grab the reports panel component (used down below)
            dynamicSeries = [], // setup an array of chart series that we'll create dynamically
            index, fullName, eid, newRadarChart;

        employees = employees || []; // in case its called with nothing we'll at least have an empty array

        for (index = 0; index < employees.length; index++) {
            fullName = employees[index].get('first_name') + ' ' + employees[index].get('last_name');
            eid = 'eid_' + employees[index].get('id');

            // add to the dynamic series we're building
            dynamicSeries.push({
                type: 'radar',
                title: fullName,
                xField: 'metric',
                yField: eid,
                labelDisplay: 'over',
                showInLegend: true,
                showMarkers: true,
                markerCfg: {
                    radius: 5,
                    size: 5
                },
                style: {
                    'stroke-width': 2,
                    fill: 'none'
                }
            });

        } // end for loop

        // destroy the existing chart
        existingRadarChart.destroy();
        // create the new chart using the dynamic series we just made
        newRadarChart = new App.PerformanceRadar({ series: dynamicSeries });

        // mask the panel while we switch out charts
        reportsPanel.getEl().mask('updating chart...');
        // display the new one
        reportsPanel.add(newRadarChart);
        // un mask the reports panel
        reportsPanel.getEl().unmask();
    }

    function refreshEmployeeDetails(employees) {
        var detailsPanel = Ext.getCmp('detailspanel'),
            reviewStore = Ext.data.StoreMgr.lookup('reviewStore'),
            items = [],
            index, templateData, employeePanel;

        for (index = 0; index < employees.length; index++) {
            templateData = Ext.applyIf(employees[index].data, reviewStore.findRecord('employee_id', employees[index].get('id')).data);
            employeePanel = new App.EmployeeDetail({
                title: employees[index].get('first_name') + ' ' + employees[index].get('last_name'),
                data: templateData // combined employee and latest review dataTransfer
            });

            items.push(employeePanel);
        }

        detailsPanel.getEl().mask('updating details...');
        detailsPanel.removeAll();
        detailsPanel.add(items);
        detailsPanel.getEl().unmask();
    }

    new Ext.container.Viewport({
        id: 'mainviewport',
        layout: 'border',            // sets up Ext.layout.container.Border
        items: [{
            xtype: 'panel',
            region: 'center',
            layout: 'auto',
            scrollable: true,
            title: 'Employee Performance Manager',
            tbar: [{
                text: 'Add Employee',
                tooltip: 'Add a new employee',
                iconCls: 'add',
                handler: function() {       // display a window to add a new employee
                    new App.ReviewWindow().show();
                }
            }],
            items: [{
                xtype: 'grid',
                store: Ext.data.StoreMgr.lookup('employeeStore'),
                height: 300,
                columns: [
                    {
                        text: 'First Name',
                        dataIndex: 'first_name',
                        flex: 2
                    },
                    {
                        text: 'Last Name',
                        dataIndex: 'last_name',
                        flex: 2
                    },
                    {
                        text: 'Title',
                        dataIndex: 'title',
                        flex: 3
                    },
                    {
                        xtype: 'actioncolumn',
                        width: 45,
                        items: [
                            {
                                icon: 'images/edit.png',
                                tooltip: 'Edit Employee',
                                handler: function(grid, rowIndex, colIndex) {
                                    var employee = grid.getStore().getAt(rowIndex),
                                        review = reviewStore.findRecord('employee_id', employee.get('id')),
                                        win = new App.ReviewWindow({ hidden: true }),
                                        form = win.down('form').getForm();

                                    form.loadRecord(employee);
                                    form.loadRecord(review);
                                    win.show();
                                }
                            },
                            {
                                icon: 'images/delete.png',
                                tooltip: 'Delete Employee',
                                width: 75,
                                handler: function(grid, rowIndex, colIndex) {
                                    Ext.Msg.confirm(
                                        'Remove Employee?', 'Are you sure you want to remove this employee?', function(choice) {
                                            var reviewStore, employee, reviewIndex;

                                            if (choice === 'yes') {
                                                reviewStore = Ext.data.StoreMgr.lookup('reviewStore');
                                                employee = grid.getStore().getAt(rowIndex);
                                                reviewIndex = reviewStore.find('employee_id', employee.get('id'));

                                                reviewStore.removeAt(reviewIndex);
                                                grid.getStore().removeAt(rowIndex);
                                            }
                                        }
                                    );
                                }
                            }
                        ]
                    }
                ],
                selModel: new Ext.selection.CheckboxModel(),
                columnLines: true,
                viewConfig: { stripeRows: true },
                listeners: {
                    selectionchange: function(selModel, selected) {
                        refreshRadarChart(selected);
                        refreshEmployeeDetails(selected);
                    }
                }
            }, {
                xtype: 'container',
                id: 'detailspanel',
                layout: {
                    type: 'vbox',
                    align: 'stretch',
                    autoSize: true
                }
            }]
        }, {
            xtype: 'panel',          // sets up the chart panel (starts collapsed)
            region: 'east',
            id: 'reportspanel',
            title: 'Performance Report',
            width: 350,
            layout: 'fit',
            items: [{
                xtype: 'performanceradar'  // this instantiates a App.PerformanceRadar object
            }]
        }]  // mainviewport items array ends here
    });

});