crop-monitor/manager/assets/modext/widgets/system/modx.panel.dashboard.js

MODx.panel.Dashboard = function(config) {
    config = config || {};
    Ext.applyIf(config,{
        id: 'modx-panel-dashboard'
        ,url: MODx.config.connector_url
        ,baseParams: {
            action: 'system/dashboard/update'
        }
        ,cls: 'container'
        ,defaults: { collapsible: false ,autoHeight: true }
        ,items: [{
             html: _('dashboard')
            ,id: 'modx-dashboard-header'
            ,xtype: 'modx-header'
        },{
            xtype: 'modx-tabs'
            ,defaults: {
                autoHeight: true
                ,border: false
            }
            ,id: 'modx-dashboard-tabs'
            ,forceLayout: true
            ,deferredRender: false
            ,stateful: true
            ,stateId: 'modx-dashboard-tabpanel'
            ,stateEvents: ['tabchange']
            ,getState:function() {
                return {activeTab:this.items.indexOf(this.getActiveTab())};
            }
            // todo: the layout is inconsistent with other panels, refactor the structure
            ,items: [{
                title: _('general_information')
                ,cls: 'form-with-labels'
                ,defaults: { border: false, cls: 'main-wrapper' }
                ,layout: 'form'
                ,id: 'modx-dashboard-form'
                ,labelAlign: 'top'
                ,items: [{
                    xtype: 'hidden'
                    ,name: 'id'
                    ,id: 'modx-dashboard-id'
                    ,value: config.record.id
                },{
                    layout: 'column'
                    ,border: false
                    ,defaults: {
                        layout: 'form'
                        ,labelAlign: 'top'
                        ,anchor: '100%'
                        ,border: false
                    }
                    ,items: [{
                        columnWidth: .7
                        ,cls: 'main-content'
                        ,items: [{
                            name: 'name'
                            ,id: 'modx-dashboard-name'
                            ,xtype: 'textfield'
                            ,fieldLabel: _('name')
                            ,description: MODx.expandHelp ? '' : _('dashboard_desc_name')
                            ,allowBlank: false
                            ,enableKeyEvents: true
                            ,anchor: '100%'
                            ,listeners: {
                                'keyup': {scope:this,fn:function(f,e) {
                                    Ext.getCmp('modx-dashboard-header').getEl().update(_('dashboard')+': '+f.getValue());
                                }}
                            }
                        },{
                            xtype: MODx.expandHelp ? 'label' : 'hidden'
                            ,forId: 'modx-dashboard-name'
                            ,html: _('dashboard_desc_name')
                            ,cls: 'desc-under'
                        },{
                            name: 'description'
                            ,id: 'modx-dashboard-description'
                            ,xtype: 'textarea'
                            ,fieldLabel: _('description')
                            ,description: MODx.expandHelp ? '' : _('dashboard_desc_description')
                            ,anchor: '100%'
                            ,grow: true
                        },{
                            xtype: MODx.expandHelp ? 'label' : 'hidden'
                            ,forId: 'modx-dashboard-description'
                            ,html: _('dashboard_desc_description')
                            ,cls: 'desc-under'
                        }]
                    },{
                        columnWidth: .3
                        ,cls: 'main-content'
                        ,items: [{
                            name: 'hide_trees'
                            ,id: 'modx-dashboard-hide-trees'
                            ,xtype: 'xcheckbox'
                            ,boxLabel: _('dashboard_hide_trees')
                            ,description: MODx.expandHelp ? '' : _('dashboard_desc_hide_trees')
                            ,inputValue: 1
                        },{
                            xtype: MODx.expandHelp ? 'label' : 'hidden'
                            ,forId: 'modx-dashboard-hide-trees'
                            ,html: _('dashboard_desc_hide_trees')
                            ,cls: 'desc-under'
                        }]

                    }]
                },{
                    html: '<p>'+_('dashboard_widgets.intro_msg')+'</p>'
                    ,xtype: 'modx-description'
                },{
                    xtype: 'modx-grid-dashboard-widget-placements'
                    ,preventRender: true
                    ,dashboard: config.record.id
                    ,autoHeight: true
                    ,anchor: '100%'
                    ,listeners: {
                        'afterRemoveRow': {fn:this.markDirty,scope:this}
                        ,'updateRole': {fn:this.markDirty,scope:this}
                        ,'addMember': {fn:this.markDirty,scope:this}
                    }
                }]
            }]
        }]
        ,listeners: {
            'setup': {fn:this.setup,scope:this}
            ,'success': {fn:this.success,scope:this}
            ,'beforeSubmit': {fn:this.beforeSubmit,scope:this}
        }
    });
    MODx.panel.Dashboard.superclass.constructor.call(this,config);
};
Ext.extend(MODx.panel.Dashboard,MODx.FormPanel,{
    initialized: false
    ,setup: function() {
        if (this.initialized) { return false; }
        if (Ext.isEmpty(this.config.record.id)) {
            this.fireEvent('ready');
            return false;
        }
        this.getForm().setValues(this.config.record);
        Ext.defer(function() {
            Ext.getCmp('modx-dashboard-header').update(_('dashboard')+': '+this.config.record.name);
        }, 250, this);

        /*
        var d = this.config.record.usergroups;
        var g = Ext.getCmp('modx-grid-dashboard-usergroups');
        if (d && g) {
            g.getStore().loadData(d);
        }*/

        var d = this.config.record.widgets;
        var g = Ext.getCmp('modx-grid-dashboard-widget-placements');
        if (d && g) {
            g.getStore().loadData(d);
        }

        this.fireEvent('ready',this.config.record);
        MODx.fireEvent('ready');
        this.initialized = true;
    }
    ,beforeSubmit: function(o) {
        var bp = {};
        var wg = Ext.getCmp('modx-grid-dashboard-widget-placements');
        if (wg) {
            bp['widgets'] = wg.encode();
        }
        Ext.apply(o.form.baseParams,bp);
    }
    ,success: function(o) {
        if (Ext.isEmpty(this.config.record) || Ext.isEmpty(this.config.record.id)) {
            MODx.loadPage('system/dashboards/update', 'id='+o.result.object.id);
        } else {
            Ext.getCmp('modx-abtn-save').setDisabled(false);
            var wg = Ext.getCmp('modx-grid-dashboard-widget-placements');
            if (wg) { wg.getStore().commitChanges(); }

        }
    }
});
Ext.reg('modx-panel-dashboard',MODx.panel.Dashboard);

MODx.grid.DashboardWidgetPlacements = function(config) {
    config = config || {};
    this.exp = new Ext.grid.RowExpander({
        tpl : new Ext.Template(
            '<p class="desc">{description_trans}</p>'
        )
    });
    Ext.applyIf(config,{
        id: 'modx-grid-dashboard-widget-placements'
        ,url: MODx.config.connector_url
        ,action: 'system/dashboard/widget/placement/getList'
        ,fields: ['dashboard','widget','rank','name','name_trans','description','description_trans']
        ,autoHeight: true
        ,primaryKey: 'widget'
        ,cls: 'modx-grid modx-grid-draggable'
        ,plugins: [this.exp,new Ext.ux.dd.GridDragDropRowOrder({
            copy: false // false by default
            ,scrollable: true // enable scrolling support (default is false)
            ,targetCfg: {}
            ,listeners: {
                'afterrowmove': {fn:this.onAfterRowMove,scope:this}
            }
        })]
        ,columns: [this.exp,{
            header: _('widget')
            ,dataIndex: 'name_trans'
            ,width: 600
        },{
            header: _('rank')
            ,dataIndex: 'rank'
            ,width: 80
            ,editor: { xtype: 'numberfield', allowBlank: false, allowNegative: false }
        }]
        ,tbar: [{
            text: _('widget_place')
            ,cls:'primary-button'
            ,handler: this.placeWidget
            ,scope: this
        }]
    });
    MODx.grid.DashboardWidgetPlacements.superclass.constructor.call(this,config);
    this.propRecord = Ext.data.Record.create(['dashboard','widget','rank','name','name_trans','description','description_trans']);
};
Ext.extend(MODx.grid.DashboardWidgetPlacements,MODx.grid.LocalGrid,{
    getMenu: function() {
        return [{
            text: _('widget_unplace')
            ,handler: this.unplaceWidget
            ,scope: this
        }];
    }

    ,onAfterRowMove: function(dt,sri,ri,sels) {
        var s = this.getStore();
        var sourceRec = s.data.items[sri];
        var total = s.data.length;

        sourceRec.set('rank',sri);
        sourceRec.commit();

        /* get all rows below ri, and up their rank by 1 */
        var brec;
        for (var x=(ri-1);x<total;x++) {
            brec = s.data.items[x];
            if (brec) {
                brec.set('rank',x);
                brec.commit();
            }
        }
        return true;
    }

    ,unplaceWidget: function(btn,e) {
        var rec = this.getSelectionModel().getSelected();
        var s = this.getStore();
        var idx = s.indexOf(rec);
        var total = s.getTotalCount();
        var r,x;
        for (x=idx;x<total;x++) {
            r = s.getAt(x);
            if (r) {
                r.set('rank',r.get('rank')-1);
                r.commit();
            }
        }
        s.remove(rec);
    }

    ,placeWidget: function(btn,e) {
        if (!this.windows.placeWidget) {
            this.windows.placeWidget = MODx.load({
                xtype: 'modx-window-dashboard-widget-place'
                ,listeners: {
                    'success': {fn:function(vs) {
                        var rec = new this.propRecord(vs);
                        this.getStore().add(rec);
                    },scope:this}
                }
            });
        }
        this.windows.placeWidget.reset();
        this.windows.placeWidget.setValues({
            dashboard: this.config.dashboard
        });
        this.windows.placeWidget.show(btn);
    }
});
Ext.reg('modx-grid-dashboard-widget-placements',MODx.grid.DashboardWidgetPlacements);



MODx.window.DashboardWidgetPlace = function(config) {
    config = config || {};
    this.ident = config.ident || 'dbugadd'+Ext.id();
    Ext.applyIf(config,{
        title: _('widget_place')
        // ,frame: true
        ,id: 'modx-window-dashboard-widget-place'
        ,fields: [{
            xtype: 'modx-combo-dashboard-widgets'
            ,fieldLabel: _('widget')
            ,name: 'widget'
            ,hiddenName: 'widget'
            ,id: 'modx-'+this.ident+'-widget'
            ,allowBlank: false
            ,msgTarget: 'under'
            ,anchor: '100%'
        }]
    });
    MODx.window.DashboardWidgetPlace.superclass.constructor.call(this,config);
};
Ext.extend(MODx.window.DashboardWidgetPlace,MODx.Window,{
    submit: function() {
        var f = this.fp.getForm();
        var fld = f.findField('widget');
        var g = Ext.getCmp('modx-grid-dashboard-widget-placements');
        var s = g.getStore();
        if (s.find('widget',fld.getValue()) != -1) {
            fld.markInvalid(_('dashboard_widget_err_placed'));
            return false;
        }
        var rank =  s.data.length > 0
            // Get the rank of the last record
            ? s.data.items[s.data.length - 1].get('rank') + 1
            // Or set it to '0' if no record found
            : 0;

        var fldStore = fld.getStore();
        var fldRi = fldStore.find('id',fld.getValue());
        var rec = fldStore.getAt(fldRi);

        if (id != '' && this.fp.getForm().isValid()) {

            if (this.fireEvent('success',{
                widget: fld.getValue()
                ,dashboard: g.config.dashboard
                ,name: rec.data.name
                ,name_trans: rec.data.name_trans
                ,description: rec.data.description
                ,description_trans: rec.data.description_trans
                ,rank: rank
            })) {
                this.fp.getForm().reset();
                this.hide();
                return true;
            }
        } else {
            MODx.msg.alert(_('error'),_('widget_err_ns'));
        }
        return true;
    }
});
Ext.reg('modx-window-dashboard-widget-place',MODx.window.DashboardWidgetPlace);


/*
MODx.grid.DashboardUserGroups = function(config) {
    config = config || {};
    Ext.applyIf(config,{
        id: 'modx-grid-dashboard-usergroups'
        ,url: MODx.config.connector_url
        ,action: 'system/dashboard/group/getList'
        ,fields: ['id','name']
        ,autoHeight: true
        ,primaryKey: 'user'
        ,columns: [{
            header: _('user_group')
            ,dataIndex: 'name'
            ,width: 600
        }]
        ,tbar: [{
            text: _('dashboard_usergroup_add')
            ,handler: this.addUserGroup
            ,scope: this
        }]
    });
    MODx.grid.DashboardUserGroups.superclass.constructor.call(this,config);
    this.propRecord = Ext.data.Record.create(['id','name']);
};
Ext.extend(MODx.grid.DashboardUserGroups,MODx.grid.LocalGrid,{
    getMenu: function() {
        return [{
            text: _('dashboard_usergroup_remove')
            ,handler: this.remove.createDelegate(this,[{
                title: _('dashboard_usergroup_remove')
                ,text: _('dashboard_usergroup_remove_confirm')
            }])
            ,scope: this
        }];
    }

    ,addUserGroup: function(btn,e) {
        this.loadWindow(btn,e,{
           xtype: 'modx-window-dashboard-usergroup-add'
           ,listeners: {
                'success': {fn:function(vs) {
                    var rec = new this.propRecord(vs);
                    this.getStore().add(rec);
                },scope:this}
           }
        });
        var w = Ext.getCmp('modx-window-dashboard-usergroup-add');
        w.reset();
        w.setValues({
            dashboard: this.config.dashboard
        });

    }
});
Ext.reg('modx-grid-dashboard-usergroups',MODx.grid.DashboardUserGroups);


MODx.window.DashboardUserGroupAdd = function(config) {
    config = config || {};
    this.ident = config.ident || 'dbugadd'+Ext.id();
    Ext.applyIf(config,{
        title: _('dashboard_usergroup_add')
        ,frame: true
        ,id: 'modx-window-dashboard-usergroup-add'
        ,fields: [{
            xtype: 'modx-combo-usergroup'
            ,fieldLabel: _('user_group')
            ,name: 'usergroup'
            ,hiddenName: 'usergroup'
            ,id: 'modx-'+this.ident+'-usergroup'
            ,allowBlank: false
        }]
    });
    MODx.window.DashboardUserGroupAdd.superclass.constructor.call(this,config);
};
Ext.extend(MODx.window.DashboardUserGroupAdd,MODx.Window,{
    submit: function() {
        var f = this.fp.getForm();
        var fld = f.findField('usergroup');

        if (id != '' && this.fp.getForm().isValid()) {
            if (this.fireEvent('success',{
                id: fld.getValue()
                ,name: fld.getRawValue()
            })) {
                this.fp.getForm().reset();
                this.hide();
                return true;
            }
        } else {
            MODx.msg.alert(_('error'),_('user_group_err_ns'));
        }
        return true;
    }
});
Ext.reg('modx-window-dashboard-usergroup-add',MODx.window.DashboardUserGroupAdd);
*/


MODx.combo.DashboardWidgets = function(config) {
    config = config || {};
    Ext.applyIf(config,{
        name: 'widget'
        ,hiddenName: 'widget'
        ,displayField: 'name_trans'
        ,valueField: 'id'
        ,fields: ['id','name','name_trans','description','description_trans']
        // ,listWidth: 400
        ,pageSize: 20
        ,url: MODx.config.connector_url
        ,baseParams: {
            action: 'system/dashboard/widget/getlist'
            ,combo: true
        }
        ,tpl: new Ext.XTemplate('<tpl for=".">'
            ,'<div class="x-combo-list-item">'
            ,'<h4 class="modx-combo-title">{name_trans:htmlEncode}</h4>'
            ,'<p class="modx-combo-desc">{description_trans:htmlEncode}</p>'
            ,'</div></tpl>')
    });
    MODx.combo.DashboardWidgets.superclass.constructor.call(this,config);
};
Ext.extend(MODx.combo.DashboardWidgets,MODx.combo.ComboBox);
Ext.reg('modx-combo-dashboard-widgets',MODx.combo.DashboardWidgets);