YouTrack Grid Demo

<!DOCTYPE html>
<html ng-app="app">
<!-– Written by:  Michael Petryk  11/22/2014 -–>

<head>
    <base href="https://cdn.kendostatic.com/">
    <style>html {
        font-size: 12px;
        font-family: Arial, Helvetica, sans-serif;
    }</style>
    <title></title>
    <link rel="stylesheet" href="2014.3.1119/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="2014.3.1119/styles/kendo.blueopal.min.css"/>
    <link rel="stylesheet" href="2014.3.1119/styles/kendo.blueopal.mobile.min.css"/>
    <link rel="stylesheet" href="2014.3.1119/styles/kendo.dataviz.min.css"/>
    <link rel="stylesheet" href="2014.3.1119/styles/kendo.dataviz.default.min.css"/>
 
    <script src="2014.3.1119/js/jquery.min.js"></script>
    <script src="2014.3.1119/js/angular.min.js"></script>
    <script src="2014.3.1119/js/jszip.min.js"></script>
    <script src="2014.3.1119/js/kendo.all.min.js"></script>
 
</head>
<body>
<div ng-controller="appCtrl">
    <label for="projectList">Project:</label>
    <select id="projectList" kendo-combo-box
            k-placeholder="'Select project'"
            k-data-text-field="'name'"
            k-data-value-field="'shortName'"
            k-filter="'contains'"
            k-min-length="3"
            k-data-source="projects"
            ng-model="Project"
            k-on-change="reloadGrid(true);"
            style="width: 200px;">
    </select>
    <label for="typeList">Type:</label>
    <select id="typeList" kendo-combo-box
            k-placeholder="'Select type'"
            k-filter="'contains'"
            k-min-length="3"
            k-data-source="types"
            ng-model="Type"
            k-on-change="reloadGrid(false);"
            style="width: 200px;">
    </select>
    <label for="tagList">Tag:</label>
    <select id="tagList" kendo-combo-box
            k-placeholder="'Select tag'"
            k-filter="'contains'"
            k-min-length="3"
            k-data-source="tags"
            ng-model="Tag"
            k-on-change="reloadGrid(false);"
            style="width: 200px;">
    </select>
    <label for="resolved">Resolved:</label>
    <input id="resolved" kendo-mobile-switch ng-model="Resolved" k-on-change="reloadGrid();"/>
    <label for="string">Search String:</label>
    <input id="string" kendo-masked-text-box ng-model="searchString" k-on-change="reloadGrid();"/>
    <button kendo-button class="k-primary" ng-click="reloadGrid()" k-icon="'refresh'">Refresh</button>
    <div>
        <div kendo-grid="grid" k-options="gridOptions" k-ng-delay="gridOptions"></div>
    </div>
</div>
</body>
<script>
    angular.module("app", ["kendo.directives"])
            .controller("appCtrl", function ($scope, $http) {
                var YouTrackUrl = "https://youtrack.jetbrains.com/";
                var project = "";
                var filter = "";
                var issues;
                var types = [];
                var tags = [];
                $scope.tags = tags;
                $scope.projects = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: YouTrackUrl + "rest/project/all",
                            dataType: "json"
                        }
                    },
                    pageSize: 15
                })
                $scope.reloadGrid = function (clearCombo) {
                    if ($scope.Project) {
                        filter = '?filter=';
                        if ($scope.Type) filter += "type:+" + $scope.Type + "+";
                        if ($scope.Tag) filter += "tag:+" + $scope.Tag + "+";
                        filter += ($scope.Resolved) ? "%23Resolved" : "%23Unresolved";
                        if ($scope.searchString) filter += "+" + $scope.searchString;
                        project = $scope.Project;
                        types = [];
                        tags = [];
                        var issues = $http.get(YouTrackUrl + "rest/issue/byproject/" + project + filter + "&max=1000")
                                .success(function (data, status, headers, config) {
                                    angular.forEach(data, function (issue, key) {
                                        angular.forEach(issue.field, function (field, key) {
                                            issue[field.name] = field.value;
                                        })
                                        issue.created = new Date(parseInt(issue.created));
                                        issue.updated = new Date(parseInt(issue.updated));
                                        if (issue.Assignee) issue.Assignee = issue.Assignee[0].fullName;
                                        if (issue["Fix versions"]) issue.FixVersion = issue["Fix versions"][0];
                                        if (issue.Percent) issue.Percent = issue.Percent[0];
                                        if (issue.Priority) issue.Priority = issue.Priority[0];
                                        if (issue.Promote) issue.Promote = issue.Promote[0];
                                        if (issue.QMSR) issue.QMSR = issue.QMSR[0];
                                        if (issue.Reference)issue.Reference = issue.Reference[0];
                                        if (issue.Subsystem) issue.Subsystem = issue.Subsystem[0];
                                        if (issue.State) issue.State = issue.State[0];
                                        if (issue.tag.length > 0) {
                                            issue.Tag = issue.tag[0].value;
                                            if (tags.indexOf(issue.Tag) == -1) tags.push(issue.Tag);
                                        }
                                        if (issue.Type.length > 0) {
                                            issue.Type = issue.Type[0];
                                            if (types.indexOf(issue.Type) == -1) types.push(issue.Type);
                                        }
                                        if (issue.comment.length > 0) {
                                            var dat = new Date(parseInt(issue.comment[issue.comment.length - 1].created));
                                            issue.lastComment = dat.toDateString() + " - " + issue.comment[issue.comment.length - 1].text;
                                        }
                                    })
                                    $scope.grid.dataSource.data(data);
                                    if (clearCombo) {
                                        $scope.tags = tags;
                                        $scope.types = types;
                                    }
                                    return data.issue;
                                });
                    }
                }
                function onChanged(arg) {
                    var selected = $.map(this.select(), function (item) {
                        return $(item).text();
                    })
                    var a = selected[0];
                    if (a.indexOf(project) == 0) {
                        window.open(YouTrackUrl + 'issue/' + a, "PM");
                    }
                }
 
                $scope.gridOptions = {
                        change: onChanged,
                        columnMenu: true,
                        dataSource: issues,
                        editable: "inline",
                        filterable: true,
                        groupable: true,
                        pageable: {pageSize: 30, pageSizes: [15, 30, 100, 250, 1000]},
                        reorderable: true,
                        selectable: 'cell',
                        resizable: true,
                        sortable: true,
                        toolbar: ["excel", "pdf"
                ],
                excel: {
                    fileName: "Kendo UI Grid Export.xlsx",
                            proxyURL
                :
                    "https://demos.telerik.com/kendo-ui/service/export",
                            filterable
                :
                    true
                }
                ,
                columns: [
                    {
                        field: "id",
                        width: "100px",
                        title: "ID",
                        attributes: {"class": "k-button k-button-icontext"}
                    },
                    {field: "State", width: "150px"},
                    {field: "summary", title: "Summary"},
                    {field: "Reference", width: "150px"},
                    {field: "lastComment", title: "Last Comment", hidden: true},
                    {field: "QMSR", width: "150px"},
                    {field: "Assignee", width: "150px"},
                    {field: "Promote", hidden: true},
                    {field: "Subsystem", hidden: true, width: "150px"},
                    {field: "Type", hidden: true, width: "150px"},
                    {field: "Tag", hidden: true, width: "150px"},
                    {field: "description", hidden: true},
                    {field: "FixVersion", hidden: true, width: "100px"},
                    {field: "Priority", hidden: true, width: "100px"},
                    {field: "Percent", hidden: true, width: "100px"},
                    {field: "updated", type: 'date', format: "{0:MM/dd/yyyy hh:mm tt}", hidden: true},
                    {field: "created", type: 'date', format: "{0:MM/dd/yyyy hh:mm tt}", hidden: true}
                ]
            };
    })
    ;
</script>
</html>