Ext.define("App.view.UserContainer", {
    extend: "Ext.container.Container",
    alias: "widget.userContainer",
    itemId: "userContainer",
    bodyPadding: "5px",

    scrollable: false,

    layout: {
        type: "vbox",
        align: "stretch"
    },

    doSearch: function() {
        var formData = this.down("form")
            .getForm()
            .getValues();
        var comboBox = this.up("userBasePanel")
            .down("groupGrid")
            .getSelection();
        if (comboBox.length) {
            formData.groupId = comboBox[0].data.id;
        }
        this.down("userGrid")
            .getStore()
            .load({
                params: formData,
                callback: function(records, operation, success) {}
            });
    },

    initComponent: function() {
        var me = this;

        Ext.apply(me, {
            items: [
                {
                    xtype: "form",
                    title: App.localeRes("Search"),
                    itemId: "searchCriteriaForm",
                    bodyPadding: 20,
                    buttonAlign: "left",
                    flex: 1,
                    collapsible: true,
                    defaults: {
                        selectOnFocus: true,
                        width: 600,
                        padding: "10 0 0 30"
                    },

                    items: [
                        {
                            xtype: "fieldcontainer",
                            layout: "hbox",
                            defaults: {
                                padding: "0 15 0 0",
                                listeners: {
                                    specialkey: function(field, e) {
                                        if (e.getKey() == e.ENTER) me.doSearch();
                                    }
                                }
                            },
                            items: [
                                {
                                    xtype: "textfield",
                                    fieldLabel: App.localeRes("User Name"),
                                    labelWidth: 80,
                                    name: "username",
                                    flex: 1
                                },
                                {
                                    xtype: "component",
                                    hidden: true,
                                    width: 20
                                },
                                {
                                    xtype: "textfield",
                                    fieldLabel: App.localeRes("Name"),
                                    labelWidth: 41,
                                    name: "fullname",
                                    flex: 2
                                }
                            ]
                        }
                    ],

                    buttons: [
                        {
                            text: App.localeRes("Search"),
                            iconCls: "silk-magnifier",
                            handler: function(button, event) {
                                me.doSearch();
                            }
                        },
                        {
                            text: App.localeRes("Reset"),
                            handler: function(button, event) {
                                var comboBox = me.up("userBasePanel").down("groupGrid");
                                comboBox.getSelectionModel().deselectAll();
                                me.down("form")
                                    .getForm()
                                    .reset();
                                me.doSearch();
                            }
                        }
                    ],
                    listeners: {}
                },
                {
                    xtype: "userGrid",
                    title: App.localeRes("Search Results"),
                    itemId: "userGrid",
                    margin: "10 0 0 0",
                    flex: 2,
                    collapsible: false
                }
            ],

            listeners: {
                afterrender: function(container, parent, pos, opts) {
                    me.doSearch();
                }
            }
        });

        me.callParent(arguments);
    }
});

// <#-- User Grid -->

Ext.define("App.view.UserGrid", {
    extend: "Ext.grid.Panel",
    alias: "widget.userGrid",
    title: App.localeRes("User Grid"),
    id: "userGrid",
    height: "100%",

    reloadStore: function() {
        this.getStore().reload();
    },

    initComponent: function() {
        var me = this;
        Ext.apply(me, {
            store: Ext.create("App.store.UserStore", {}),
            columns: [
                {
                    xtype: "actioncolumn",
                    width: 80,
                    align: "center",
                    items: [
                        {
                            iconCls: "icon-edit",
                            handler: function(view, rowIndex, colIndex, item, e, record) {
                                userName = record.get("username")
                                App.loadModuleWin("userWindow", "Edit User: " + userName, {
                                    params: { id: record.get('id') },
                                    callbackOnClose: function() {
                                        me.reloadStore();
                                    }
                                });
                            },
                            scope: me
                        },
                        {
                            iconCls: "silk-delete",
                            handler: function(view, rowIndex, colIndex, item, e, record) {
                                var me = this;
                                App.confirm("Confirm Delete", "User Confirm Del", function(buttonId, text, opt) {
                                    if (buttonId === "yes") {
                                        Ext.Ajax.request({
                                            url: App.url("/user/delete"),
                                            params: { id: record.data.id },
                                            success: function(response, opts) {
                                                App.showMsg("User Deleted");
                                                me.reloadStore();
                                            },
                                            failure: function(response, opts) {
                                                App.showError(
                                                    'Cannot Delete\n<@spring.message "COMMON.code"/>: ' +
                                                        response.status
                                                );
                                            },
                                            scope: this
                                        });
                                    }
                                });
                            },
                            scope: me
                        }
                    ]
                },
                {
                    xtype: "gridcolumn",
                    dataIndex: "username",
                    text: App.localeRes("User Name"),
                    flex: 1
                },
                {
                    xtype: "gridcolumn",
                    dataIndex: "fullname",
                    text: App.localeRes("Full Name"),
                    flex: 2
                },
                {
                    xtype: "gridcolumn",
                    dataIndex: "title",
                    text: App.localeRes("Title"),
                    flex: 2
                },
                {
                    xtype: "gridcolumn",
                    dataIndex: "remark",
                    text: App.localeRes("Remarks"),
                    flex: 2
                }
            ]
        });

        me.callParent(arguments);
    }
});
