"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
//React
var React = require("react");
//Wijmo
var wjcCore = require("wijmo/wijmo");
//Application
var DataSvc_1 = require("../services/DataSvc");
var Paging = /** @class */ (function (_super) {
    __extends(Paging, _super);
    function Paging(props) {
        var _this = _super.call(this, props) || this;
        _this.fieldNames = DataSvc_1.DataSvc.default.getNames();
        _this.cvPaging = new wjcCore.CollectionView(DataSvc_1.DataSvc.default.getData(55));
        _this.cvPaging.pageSize = 10;
        _this.state = {
            pageSize: _this.cvPaging.pageSize
        };
        return _this;
    }
    Paging.prototype.moveToFirstPage = function () {
        this.cvPaging.moveToFirstPage();
        this.forceUpdate();
    };
    Paging.prototype.moveToPreviousPage = function () {
        this.cvPaging.moveToPreviousPage();
        this.forceUpdate();
    };
    Paging.prototype.moveToNextPage = function () {
        this.cvPaging.moveToNextPage();
        this.forceUpdate();
    };
    Paging.prototype.moveToLastPage = function () {
        this.cvPaging.moveToLastPage();
        this.forceUpdate();
    };
    Paging.prototype.pageSizeChanged = function (event) {
        var pageSize = event.target.value;
        if (!pageSize) {
            pageSize = 0;
        }
        else {
            pageSize = wjcCore.Globalize.parseInt(pageSize);
        }
        this.setState({ pageSize: pageSize });
        this.cvPaging.pageSize = pageSize;
        this.forceUpdate();
    };
    Paging.prototype.render = function () {
        var _this = this;
        return React.createElement("div", null,
            React.createElement("h2", null, "Paging"),
            React.createElement("p", null,
                "The CollectionView class, like the one in .NET, implements the ",
                React.createElement("b", null, "IPagedCollectionView"),
                " interface to support paging. To enable paging, set the ",
                React.createElement("b", null, "IPagedCollectionView.pageSize"),
                " property to the number of items you want on each page, and provide a UI for navigating the pages."),
            React.createElement("p", null,
                "In this example, the CollectionView object is initialized to show 10 items per page. You can customize it in the text box. We add navigation buttons, and call IPagedCollectionView methods in the button click event. Note that we use the ",
                React.createElement("strong", null, "pageIndex"),
                " and ",
                React.createElement("strong", null, "pageCount"),
                " properties to show the current page and total number of pages. You can customize the page size in the first text box. Leave it empty or set it to 0 to disable paging and hide the navigation buttons."),
            React.createElement("div", { className: "row" },
                React.createElement("div", { className: "col-md-6" },
                    React.createElement("ul", { className: "nav nav-tabs", role: "tablist" },
                        React.createElement("li", { className: "active" },
                            React.createElement("a", { href: "#pgJsx", role: "tab", "data-toggle": "tab" }, "JSX")),
                        React.createElement("li", null,
                            React.createElement("a", { href: "#pgJs", role: "tab", "data-toggle": "tab" }, "TS"))),
                    React.createElement("div", { className: "tab-content" },
                        React.createElement("div", { className: "tab-pane active pane-content", id: "pgJsx" },
                            '<div className="row-fluid well row">\n',
                            '    <div className="col-md-5">\n',
                            '        <input type="text" className="form-control" placeholder="0 or empty is for no paging." \n',
                            '           value={this.state.pageSize} onChange={this.pageSizeChanged.bind(this)} />\n',
                            '    </div>\n',
                            '   <div className="btn-group col-md-7">\n',
                            '       <button type="button" className="btn btn-default"\n',
                            '               disabled={this.cvPaging.pageIndex <= 0}\n',
                            '               onClick={this.moveToFirstPage.bind(this)}>\n',
                            '           <span className="glyphicon glyphicon-fast-backward"></span>\n',
                            '       </button>\n',
                            '       <button type="button" className="btn btn-default"\n',
                            '       disabled={this.cvPaging.pageIndex <= 0}\n',
                            '       onClick={this.moveToPreviousPage.bind(this)}>\n',
                            '           <span className="glyphicon glyphicon-step-backward"></span>\n',
                            '       </button>\n',
                            '       <button type="button" className="btn btn-default" disabled style={{width:"100px"}}>\n',
                            '           {this.cvPaging.pageIndex + 1}\n',
                            '           / {this.cvPaging.pageCount}\n',
                            '       </button>\n',
                            '       <button type="button" className="btn btn-default"\n',
                            '       disabled={this.cvPaging.pageIndex >= this.cvPaging.pageCount - 1}\n',
                            '       onClick={this.moveToNextPage.bind(this)}>\n',
                            '           <span className="glyphicon glyphicon-step-forward"></span>\n',
                            '       </button>\n',
                            '       <button type="button" className="btn btn-default"\n',
                            '       disabled={this.cvPaging.pageIndex >= this.cvPaging.pageCount - 1}\n',
                            '       onClick={this.moveToLastPage.bind(this)}>\n',
                            '           <span className="glyphicon glyphicon-fast-forward"></span>\n',
                            '       </button>\n',
                            '   </div>\n',
                            '</div>\n',
                            '<div className="sGrid">\n',
                            '     <table className="table table-condensed table-bordered">\n',
                            '         <thead>\n',
                            '             <tr className="active">\n',
                            '                 {this.fieldNames.map((fieldName, index) => {\n',
                            '                     return <th key={index} className="text-center" >\n',
                            '                         {fieldName}\n',
                            '                     </th>\n',
                            '                 })}\n',
                            '             </tr>\n',
                            '         </thead>\n',
                            '         <tbody>\n',
                            '             {this.cvPaging.items.map((item, idx1) => {\n',
                            '                 return <tr key={idx1}>\n',
                            '                     {this.fieldNames.map((fieldName, idx2) => {\n',
                            '                         let itm = wjcCore.Globalize.format(item[fieldName], \'\');\n',
                            '                         return <td key={idx2} className="text-center" >\n',
                            '                             {itm}\n',
                            '                         </td>\n',
                            '                     })}\n',
                            '                 </tr>\n',
                            '             })}\n',
                            '         </tbody>\n',
                            '     </table>\n',
                            '  </div >  \n',
                            '</div >\n'),
                        React.createElement("div", { className: "tab-pane pane-content", id: "pgJs" },
                            '  fieldNames = DataSvc.default.getNames();\n',
                            '  cvPaging= new wjcCore.CollectionView(DataSvc.default.getData(55));\n',
                            '\n',
                            '  constructor(props) {\n',
                            '      super(props);\n',
                            '       this.cvPaging.pageSize = 10;\n',
                            '       this.state = {\n',
                            '          pageSize:this.cvPaging.pageSize\n',
                            '      }\n',
                            '  }\n',
                            '\n',
                            '  moveToFirstPage(){\n',
                            '      this.cvPaging.moveToFirstPage();\n',
                            '      this.forceUpdate();\n',
                            '  }\n',
                            '\n',
                            '  moveToPreviousPage(){\n',
                            '      this.cvPaging.moveToPreviousPage();\n',
                            '      this.forceUpdate();\n',
                            '  }\n',
                            '\n',
                            '  moveToNextPage(){\n',
                            '      this.cvPaging.moveToNextPage();\n',
                            '      this.forceUpdate();\n',
                            '  }\n',
                            '\n',
                            '  moveToLastPage(){\n',
                            '      this.cvPaging.moveToLastPage();\n',
                            '      this.forceUpdate();\n',
                            '  }\n',
                            '\n',
                            '  pageSizeChanged(event){\n',
                            '   let pageSize = event.target.value;\n',
                            '    if (!pageSize) {\n',
                            '          pageSize = 0;\n',
                            '      } else {\n',
                            '          pageSize = wjcCore.Globalize.parseInt(pageSize);\n',
                            '      }\n',
                            '      this.setState({ pageSize: pageSize });\n',
                            '      this.cvPaging.pageSize = pageSize;\n',
                            '      this.forceUpdate();\n',
                            '  }\n'))),
                React.createElement("div", { className: "col-md-6" },
                    React.createElement("h4", null, "Result (live):"),
                    React.createElement("div", { className: "row-fluid well row" },
                        React.createElement("div", { className: "col-md-5" },
                            React.createElement("input", { type: "text", className: "form-control", placeholder: "0 or empty is for no paging.", value: this.state.pageSize, onChange: this.pageSizeChanged.bind(this) })),
                        React.createElement("div", { className: "btn-group col-md-7" },
                            React.createElement("button", { type: "button", className: "btn btn-default", disabled: this.cvPaging.pageIndex <= 0, onClick: this.moveToFirstPage.bind(this) },
                                React.createElement("span", { className: "glyphicon glyphicon-fast-backward" })),
                            React.createElement("button", { type: "button", className: "btn btn-default", disabled: this.cvPaging.pageIndex <= 0, onClick: this.moveToPreviousPage.bind(this) },
                                React.createElement("span", { className: "glyphicon glyphicon-step-backward" })),
                            React.createElement("button", { type: "button", className: "btn btn-default", disabled: true, style: { width: "100px" } },
                                this.cvPaging.pageIndex + 1,
                                "/ ",
                                this.cvPaging.pageCount),
                            React.createElement("button", { type: "button", className: "btn btn-default", disabled: this.cvPaging.pageIndex >= this.cvPaging.pageCount - 1, onClick: this.moveToNextPage.bind(this) },
                                React.createElement("span", { className: "glyphicon glyphicon-step-forward" })),
                            React.createElement("button", { type: "button", className: "btn btn-default", disabled: this.cvPaging.pageIndex >= this.cvPaging.pageCount - 1, onClick: this.moveToLastPage.bind(this) },
                                React.createElement("span", { className: "glyphicon glyphicon-fast-forward" })))),
                    React.createElement("div", { className: "sGrid" },
                        React.createElement("table", { className: "table table-condensed table-bordered" },
                            React.createElement("thead", null,
                                React.createElement("tr", { className: "active" }, this.fieldNames.map(function (fieldName, index) {
                                    return React.createElement("th", { key: index, className: "text-center" }, fieldName);
                                }))),
                            React.createElement("tbody", null, this.cvPaging.items.map(function (item, idx1) {
                                return React.createElement("tr", { key: idx1 }, _this.fieldNames.map(function (fieldName, idx2) {
                                    var itm = wjcCore.Globalize.format(item[fieldName], '');
                                    return React.createElement("td", { key: idx2, className: "text-center" }, itm);
                                }));
                            })))))));
    };
    return Paging;
}(React.Component));
exports.Paging = Paging;
//# sourceMappingURL=Paging.js.map