[CDSK-969] Add PoC of autocomplete in projects dropdown

Author: Kamil Mowinski

master/buildbot/VERSION

@@ -1 +1 @@
-1525251296
+1526455518

master/buildbot/status/web/status_json.py

@@ -22,6 +22,7 @@
 import time
 
 import jsonschema
+from operator import attrgetter
 from twisted.python import log
 from twisted.internet import defer
 from twisted.web import html, resource, server
@@ -950,10 +951,27 @@ class ProjectsJsonResource(JsonResource):
 
     def __init__(self, status):
         JsonResource.__init__(self, status)
+        self.putChild('list', ProjectsListJsonResource(status))
         for project_name, project_status in status.getProjects().iteritems():
             self.putChild(project_name, SingleProjectJsonResource(status, project_status))
 
 
+class ProjectsListJsonResource(JsonResource):
+    help = """List the registered projects with sorting by priority and name"""
+    pageTitle = 'Projects'
+
+    def __init__(self, status):
+        JsonResource.__init__(self, status)
+        self.status = status
+
+    def asDict(self, request):
+        projects = sorted(
+            self.status.getProjects().values(),
+            key=attrgetter('priority', 'name'),
+        )
+        return map(lambda project: project.asDict(), projects)
+
+
 class LatestRevisionResource(JsonResource):
 
     def __init__(self, status, project_status):

www/prod/script/main.js

@@ -1,7 +1,9 @@
 /*global define, jQuery*/
-define(['jquery', 'screensize'], function ($, screenSize) {
-
+define(function (require) {
     "use strict";
+    var $ = require('jquery'),
+        screenSize = require('screensize'),
+        hb = require('project/handlebars-extend');
 
     // Extend our jquery object with dropdown widget
     (function ($) {
@@ -159,12 +161,14 @@ define(['jquery', 'screensize'], function ($, screenSize) {
 
     return {
         init: function () {
-
-            var mobileHTML,
-                desktopHTML;
+            var projects;
+            var page = 0;
+            var maxPage = 0;
+            var maxShowedItems = 10;
 
             $("#projectDropdown").dropdown({
-                url: "/projects",
+                url: "/json/projects/list",
+                title: "<h3>Project list</h3>",
                 beforeCreate: function ($elem) {
                     $("#preloader").preloader("showPreloader");
                 },
@@ -175,45 +179,58 @@ define(['jquery', 'screensize'], function ($, screenSize) {
                     });
                 },
                 onResponse: function ($elem, $dropdown, response) {
-                    if (desktopHTML === undefined || mobileHTML === undefined) {
-                        //Cache desktop HTML
-                        desktopHTML = $(response).find('.tablesorter-js');
-
-
-                        var fw = $(response).find('.scLink');
-                        mobileHTML = $('<ul/>').addClass('submenu list-unstyled');
-                        $(fw).each(function () {
-                            var scLink = $(this).attr('data-sc');
-                            $(this).attr('href', scLink);
-                            var $li = $('<li/>').append($(this));
-                            mobileHTML.append($li);
-                        });
-
-                        $(desktopHTML, mobileHTML).find("a").each(function () {
-                            var scLink = $(this).attr('data-sc');
-                            $(this).attr('href', scLink);
-                        });
-                    }
-
+                    var self = this;
+                    projects = response.map(function(item) {
+                        return item.name;
+                    });
+                    maxPage = projects.length / maxShowedItems;
+                    var html = hb.projectListDropdown();
+                    var projectList = hb.projectList({projects: projects});
+                    $dropdown.append(html);
+                    $dropdown.append(projectList);
+                    $('body').on('keyup', '#project-list', function() {
+                        self.updateProject($(this).val());
+                    });
+                    $('body').on('click', '#prev-projects', function() {
+                        console.log('prev'); // @TODO
+                    });
+                    $('body').on('click', '#next-projects', function() {
+                        console.log('next'); // @TODO
+                    });
                     return true;
                 },
-                beforeShow: function ($elem, $dropdown) {
-                    if (screenSize.isMediumScreen()) {
-                        $dropdown.append(desktopHTML);
-                    } else {
-                        $elem.append(mobileHTML);
-                    }
-                },
                 onShow: function ($elem, $dropdown) {
                     if (!screenSize.isMediumScreen()) {
                         $dropdown.hide();
                     }
+                    if (page === 0) {
+                        $('#prev-projects').hide();
+                    }
+                    if (page === maxPage) {
+                        $('#next-projects').show();
+                    }
                 },
-                onHide: function ($elem, $dropdown) {
-                    $elem.find("ul").remove();
+                onHide: function($elem, $dropdown) {
+                    $('#project-list').val('');
+                },
+                beforeShow: function() {
+                    this.updateProject("");
                 },
                 animate: function () {
                     return screenSize.isMediumScreen();
+                },
+                updateProject: function(text) {
+                    var showedItems = 0;
+                    text = text.toLowerCase();
+                    $('#dropdown-project-list .item').each(function() {
+                        var name = $(this).data('name').toLowerCase();
+                        if(name.includes(text) && showedItems < maxShowedItems) {
+                            $(this).show();
+                            showedItems++;
+                        } else {
+                            $(this).hide();
+                        }
+                    });
                 }
             });
 

www/prod/script/main.js.map

@@ -0,0 +1,5 @@
+<div class="dataTables_filter" style="width: 100%; margin-bottom: 30px;">
+    <label for="project-list" style="width: 100%">
+        <input type="text" id="project-list" name="project-list" placeholder="Filter projects"/>
+    </label>
+</div>

www/script/project/ui/dropdown.js

@@ -0,0 +1,26 @@
+<div>
+    <table class="table table-katana table-stripes no-bg dataTable shortcut-js tools-js no-footer" id="dropdown-project-list" role="grid">
+        <thead>
+            <tr role="row">
+                <th class="sorting" tabindex="0" rowspan="1" colspan="1">Name</th>
+            </tr>
+        </thead>
+        <tbody>
+            {{#each projects}}
+                <tr role="row" class="odd item" data-name="{{this}}">
+                    <td>
+                        <a class="scLink" href="/projects/{{this}}" data-sc="/projects/{{this}}/builders?fmod_branch=master">
+                            {{this}}
+                        </a>
+                    </td>
+                </tr>
+            {{/each}}
+        </tbody>
+    </table>
+
+    <div class="dataTables_paginate" style="width: 100%; text-align: center;">
+        <a id="prev-projects" class="paginate_button previous" href="#">Prev</a>
+        <a href="/projects" class="paginiate_button">All projects</a>
+        <a id="next-projects" class="paginate_button next" href="#">Next</a>
+    </div>
+</div>