Commit 34987499 authored by Rene Saarsoo's avatar Rene Saarsoo
Browse files

Filtering of users and topics lists. 

Added field to the top of both users and topics which allows filtering
the lists below them.

Every time the filtering happens, the previously existing selection is
cleared.  This is maybe not the best behavior, but that's the compromise
I arrived at to prevent several edge-case bugs.  The problem is, that
when you filter out a currently selected record, it becomes deselected,
but the deselect event doesn't fire to let us know...
parent 95cf9b3e

template/app/view/comments/FilterField.js

0 → 100644
+40 −0
Original line number Diff line number Diff line 
/**

 * Field for filtering users list.

 */

Ext.define("Docs.view.comments.FilterField", {

    extend: "Ext.form.field.Trigger",

    alias: "widget.commentsFilterField",

    triggerCls: 'reset',

    componentCls: 'comments-filter-field',

    hideTrigger: true,

    enableKeyEvents: true,



    initComponent: function() {

        this.callParent(arguments);



        this.on({

            keyup: this.onKeyUp,

            specialkey: this.onSpecialKey,

            scope: this

        });

    },



    onKeyUp: function() {

        this.fireEvent("filter", this.getValue());

        this.setHideTrigger(this.getValue().length === 0);

    },



    onSpecialKey: function(cmp, event) {

        if (event.keyCode === Ext.EventObject.ESC) {

            this.reset();

            this.fireEvent("filter", "");

        }

    },



    onTriggerClick: function() {

        this.reset();

        this.focus();

        this.fireEvent("filter", "");

        this.setHideTrigger(true);

    }

});
 
 No newline at end of file

template/app/view/comments/Targets.js

+39 −16
Original line number Diff line number Diff line
@@ -7,7 +7,8 @@ Ext.define('Docs.view.comments.Targets', { 
    componentCls: "comments-targets",

    requires: [

        "Docs.Comments",

        "Docs.view.SimpleSelectBehavior"

        "Docs.view.SimpleSelectBehavior",

        "Docs.view.comments.FilterField"

    ],



    layout: "border",
@@ -24,11 +25,26 @@ Ext.define('Docs.view.comments.Targets', { 
            this.tabpanel = Ext.widget("tabpanel", {

                plain: true,

                region: "north",

                height: 25,

                height: 50,

                items: [

                    {

                        title: "By comment count"

                    }

                ],

                dockedItems: [

                    {

                        dock: "bottom",

                        items: [{

                            xtype: "commentsFilterField",

                            emptyText: "Filter topics by name...",

                            width: 320,

                            height: 20,

                            listeners: {

                                filter: this.onFilter,

                                scope: this

                            }

                        }]

                    }

                ]

            }),

            this.list = Ext.widget("dataview", {
@@ -36,7 +52,7 @@ Ext.define('Docs.view.comments.Targets', { 
                cls: "iScroll targets-list",

                autoScroll: true,

                store: Ext.create('Ext.data.Store', {

                    fields: ["id", "type", "cls", "member", "score"]

                    fields: ["id", "type", "cls", "member", "score", "text"]

                }),

                allowDeselect: true,

                tpl: [
@@ -44,20 +60,10 @@ Ext.define('Docs.view.comments.Targets', { 
                    '<tpl for=".">',

                        '<li>',

                            '<span class="score">{score}</span>',

                            '<span class="target">{[this.target(values)]}</span>',

                            '<span class="target">{text}</span>',

                        '</li>',

                    '</tpl>',

                    '</ul>',

                    {

                        target: function(t) {

                            if (t.type === "class") {

                                return t.cls + (t.member ? "#"+t.member.replace(/^.*-/, "") : "");

                            }

                            else {

                                return t.type + " " + t.cls;

                            }

                        }

                    }

                    '</ul>'

                ],

                itemSelector: "li"

            })
@@ -77,6 +83,12 @@ Ext.define('Docs.view.comments.Targets', { 
        this.fetchTargets();

    },



    onFilter: function(pattern) {

        this.list.getSelectionModel().deselectAll();

        this.list.getStore().clearFilter(true);

        this.list.getStore().filter({property: "text", value: pattern, anyMatch: true});

    },



    /**

     * Clears the selection.

     */
@@ -102,6 +114,17 @@ Ext.define('Docs.view.comments.Targets', { 
    },



    loadTargets: function(targets) {

        this.list.getStore().loadData(targets);

        this.list.getStore().loadData(Ext.Array.map(targets, this.convertTarget, this));

    },



    // Adds text field to target record.

    convertTarget: function(t) {

        if (t.type === "class") {

            t.text = t.cls + (t.member ? "#"+t.member.replace(/^.*-/, "") : "");

        }

        else {

            t.text = t.type + " " + t.cls;

        }

        return t;

    }

});

template/app/view/comments/Users.js

+24 −3
Original line number Diff line number Diff line
@@ -8,7 +8,8 @@ Ext.define('Docs.view.comments.Users', { 
    componentCls: "comments-users",

    requires: [

        "Docs.Comments",

        "Docs.view.SimpleSelectBehavior"

        "Docs.view.SimpleSelectBehavior",

        "Docs.view.comments.FilterField"

    ],



    layout: "border",
@@ -25,7 +26,7 @@ Ext.define('Docs.view.comments.Users', { 
            this.tabpanel = Ext.widget("tabpanel", {

                plain: true,

                region: "north",

                height: 25,

                height: 50,

                items: [

                    {

                        title: "Votes"
@@ -34,6 +35,21 @@ Ext.define('Docs.view.comments.Users', { 
                        title: "Comments"

                    }

                ],

                dockedItems: [

                    {

                        dock: "bottom",

                        items: [{

                            xtype: "commentsFilterField",

                            emptyText: "Filter users by name...",

                            width: 320,

                            height: 20,

                            listeners: {

                                filter: this.onFilter,

                                scope: this

                            }

                        }]

                    }

                ],

                listeners: {

                    tabchange: this.onTabChange,

                    scope: this
@@ -86,6 +102,12 @@ Ext.define('Docs.view.comments.Users', { 
        }

    },



    onFilter: function(pattern) {

        this.list.getSelectionModel().deselectAll();

        this.list.getStore().clearFilter(true);

        this.list.getStore().filter({property: "username", value: pattern, anyMatch: true});

    },



    /**

     * Clears the selection.

     */
@@ -94,7 +116,6 @@ Ext.define('Docs.view.comments.Users', { 
    },



    onSelect: function(user) {

        console.log("xselect");

        this.selectedUser = user;

        this.fireEvent("select", user.get("username"));

    },

template/resources/sass/_comments.scss

+17 −0
Original line number Diff line number Diff line
@@ -386,3 +386,20 @@ $moderator-color-light: #94b773; 
    overflow: hidden;

    line-height: 30px;

    font-weight: bold; } }





// Filter field with reset button

.comments-filter-field {

  table {

    border-style: solid;

    border-color: #bebebe;

    border-width: 1px;

    background: white url('../images/text-bg.gif') repeat-x 0 0; }

  .x-form-trigger.reset {

    background: url(../images/x12.png) no-repeat 2px 3px;

    padding: 0;

    margin: 0;

    border: 0; }

  input {

    background: transparent;

    border: none; } }