"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 Sorting = /** @class */ (function (_super) {
    __extends(Sorting, _super);
    function Sorting(props) {
        var _this = _super.call(this, props) || this;
        _this.fieldNames = DataSvc_1.DataSvc.default.getNames();
        _this.cvSorting = new wjcCore.CollectionView(DataSvc_1.DataSvc.default.getData(10));
        return _this;
    }
    // sorting
    Sorting.prototype.toggleSort = function (fieldName) {
        // get all the sort descriptions.
        var sd = this.cvSorting.sortDescriptions;
        var ascending = true;
        // try to find whether the field has been sorted.
        if (sd.length > 0 && sd[0].property === fieldName) {
            // if finded, toggle the sort order.
            ascending = !sd[0].ascending;
        }
        // create a new SortDescription object.
        var sdNew = new wjcCore.SortDescription(fieldName, ascending);
        // remove any old sort descriptors and add the created one.
        sd.splice(0, sd.length, sdNew);
        this.forceUpdate();
    };
    ;
    // get the sort label
    Sorting.prototype.getSort = function (propName) {
        var sd = this.cvSorting.sortDescriptions;
        if (sd.length > 0 && sd[0].property === propName) {
            return sd[0].ascending ? '▲' : '▼';
        }
        return '';
    };
    ;
    Sorting.prototype.render = function () {
        var _this = this;
        return React.createElement("div", null,
            React.createElement("h2", null, "Sorting"),
            React.createElement("p", null,
                "The CollectionView class, like the one in .NET, implements the ICollectionView interface to support sorting. To enable sorting, add one or more ",
                React.createElement("a", { target: "_blank", href: "http://wijmo.com/5/docs/topic/wijmo.collections.SortDescription.Class.html" }, "SortDescription"),
                " objects to an array and pass it to the CollectionView.sortDescriptions property. Now you can get the sorted results from the ",
                React.createElement("b", null, "CollectionView.items"),
                " property."),
            React.createElement("p", null, "SortDescription objects are flexible, allowing you to sort data based on a value in ascending or descending order. In the sample below, click a property in the grid header to sort by that property in ascending order. Click it again to sort by that property in descending order."),
            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: "#gsJsx", role: "tab", "data-toggle": "tab" }, "JSX")),
                        React.createElement("li", null,
                            React.createElement("a", { href: "#gsJs", role: "tab", "data-toggle": "tab" }, "TS"))),
                    React.createElement("div", { className: "tab-content" },
                        React.createElement("div", { className: "tab-pane active pane-content", id: "gsJsx" },
                            ' <div className="sGrid">\n',
                            '     <table className="table table-condensed table-bordered">\n',
                            '         <thead>\n',
                            '             <tr className="active">\n',
                            '                 {this.fieldNames.map((fieldName, index) => {\n',
                            '                     let sortIcon = this.getSort(fieldName);\n',
                            '                     return <th key={index} className="text-center" onClick={this.toggleSort.bind(this, fieldName)} style={{ cursor: "pointer" }}>\n',
                            '                         {fieldName}<span style={{ color: "red" }}>{sortIcon}</span>\n',
                            '                     </th>\n',
                            '                 })}\n',
                            '             </tr>\n',
                            '         </thead>\n',
                            '         <tbody>\n',
                            '             {this.cvSorting.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'),
                        React.createElement("div", { className: "tab-pane pane-content", id: "gsJs" },
                            '  fieldNames = DataSvc.default.getNames();\n',
                            '  cvSorting = new wjcCore.CollectionView(DataSvc.default.getData(10));\n',
                            '\n',
                            '  constructor(props) {\n',
                            '      super(props);\n',
                            '  }\n',
                            '\n',
                            '  // sorting\n',
                            '  toggleSort(fieldName: string) {\n',
                            '      // get all the sort descriptions.\n',
                            '      var sd = this.cvSorting.sortDescriptions;\n',
                            '      var ascending = true;\n',
                            '\n',
                            '      // try to find whether the field has been sorted.\n',
                            '      if (sd.length > 0 && sd[0].property === fieldName) {\n',
                            '          // if finded, toggle the sort order.\n',
                            '          ascending = !sd[0].ascending;\n',
                            '      }\n',
                            '\n',
                            '      // create a new SortDescription object.\n',
                            '      var sdNew = new wjcCore.SortDescription(fieldName, ascending);\n',
                            '\n',
                            '      // remove any old sort descriptors and add the created one.\n',
                            '      sd.splice(0, sd.length, sdNew);\n',
                            '      this.forceUpdate();\n',
                            '  };\n',
                            '\n',
                            '  // get the sort label\n',
                            '  getSort(propName: string) {\n',
                            '      var sd = this.cvSorting.sortDescriptions;\n',
                            '      if (sd.length > 0 && sd[0].property === propName) {\n',
                            '          return sd[0].ascending ? \'▲\' : \'▼\';\n',
                            '      }\n',
                            '      return \'\';\n',
                            '  };\n'))),
                React.createElement("div", { className: "col-md-6" },
                    React.createElement("h4", null, "Result (live):"),
                    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) {
                                    var sortIcon = _this.getSort(fieldName);
                                    return React.createElement("th", { key: index, className: "text-center", onClick: _this.toggleSort.bind(_this, fieldName), style: { cursor: "pointer" } },
                                        fieldName,
                                        React.createElement("span", { style: { color: "red" } }, sortIcon));
                                }))),
                            React.createElement("tbody", null, this.cvSorting.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 Sorting;
}(React.Component));
exports.Sorting = Sorting;
//# sourceMappingURL=Sorting.js.map