Changeset 370

Timestamp:

07/23/12 13:07:24 (13 years ago)

Author:

hendrikvanantwerpen

Message:

Seperated question browser in TabbedQuestionBrowser? widget.
Made configuring Selector actions more flexible (both for top actions and item actions).
Fixed lowercase/uppercase problem in SurveyListView?.
Fixed whitespace and toolyip in LineWithActionsWidget?.
Added question browser to questions page. Removed the old dialog that was there and redirect to questionEditor page.

Location:

Dev/branches/rest-dojo-ui/client/rft

Files:

• pages/questions.html (modified) (1 diff)
• pages/questions.js (modified) (2 diffs)
• pages/survey.html (modified) (2 diffs)
• pages/survey.js (modified) (3 diffs)
• ui (modified) (1 prop)
• ui/LineWithActionsWidget.js (modified) (1 diff)
• ui/QuestionEditorPreviewItem.js (modified) (2 diffs)
• ui/Selector.js (modified) (5 diffs)
• ui/SurveyListView.js (modified) (1 diff)
• ui/TabbedQuestionBrowser.js (added)

Dev/branches/rest-dojo-ui/client/rft/pages/questions.html

@@ -1 @@
-<div data-dojo-type="rft.pages.questions">
-    <h1>Questions</h1>
-    <div data-dojo-type="dijit.form.Button" data-rft-attach-event="onClick:onNewQuestion" data-dojo-props="baseClass: 'rftLargeButton', iconClass:'rftIcon rftIconQuestion'">New question</div>
-    <div data-rft-attach-point="list">
-    </div>
-    <div data-dojo-type="dijit.Dialog" title="Question" data-rft-attach-point="questionDialog">
-        <form data-dojo-type="dijit.form.Form" data-rft-attach-point="questionForm" data-rft-attach-event="onSubmit:onSaveQuestion">
-            <div data-dojo-type="rft.ui.QuestionWidget" data-rft-attach-point="questionWidget"></div>
-            <div style="float: right;">
-                <button type="button" data-dojo-type="dijit.form.Button" data-rft-attach-event="onClick:onCancelQuestion">Cancel</button>
-                <button type="submit" data-dojo-type="dijit.form.Button">Save</button>
-            </div>
-        </form>
+<div data-dojo-type="rft.pages.questions" class="blue">
+    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'" style="height: 500px;">
+
+        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
+            <h2>
+                <span class="rftIcon rftIconQuestion"></span>
+                <span class="headerText">Questions</span>
+            </h2>
+        </div>
+        
+        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
+            <div data-rft-attach-point="questionBrowser"></div>
+        </div>
+
+        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
+            <div data-dojo-type="dijit.form.Button" data-rft-attach-event="onClick:onNewQuestion" data-dojo-props="baseClass: 'rftLargeButton', iconClass:'rftIcon rftIconQuestion'">New question</div>
+        </div>
+
     </div>
 </div>

Dev/branches/rest-dojo-ui/client/rft/pages/questions.js

@@ -1 @@
-define(['dojo/_base/declare','dojo/_base/lang','dojo/_base/event',
-    'dojo/_base/Deferred','rft/store','rft/ui/_Page','rft/ui/AccordionList', 'rft/content'],
-    function(declare,lang,event,Deferred,store,_Page,AccordionList,content) {
+define([
+    'dojo/_base/declare',
+    'dojo/_base/Deferred',
+    'dojo/_base/event',
+    'dojo/_base/lang',
+    'rft/content',
+    'rft/store',
+    'rft/ui/_Page',
+    'rft/ui/TabbedQuestionBrowser'
+    ],function(declare,Deferred,event,lang,content,store,_Page,TabbedQuestionBrowser) {
         return declare('rft.pages.questions',[_Page],{
             constructor: function() {
                 this.inherited(arguments);
-                this.questions = {};
             },
             onVisit: function() {
-                debugger;
-                this._list = new AccordionList({
-                    actions: {
+                this.questionBrowser = new TabbedQuestionBrowser({
+                    region: 'center',
+                    'class': 'blue',
+                    itemActions: {
                         'Edit': {
-                            callback: lang.hitch(this,'_editQuestion'),
-                            properties: {
-                                blockButton: true,
-                                icon: "Edit",
-                                label: "Edit"
-                            }
+                            callback: lang.hitch(this,"onEditQuestion"),
+                               icon: 'Edit',
+                               description: 'Edit question'
                         }
-
-                        
-                    },
-                    idProperty: store.idProperty,
-                    categoryProperty: 'category',
-                    titleProperty: 'title'
-                },this.list);
-                this._list.startup();
-                this._refresh();
+                    }
+                },this.questionBrowser);
+                this.questionBrowser.startup();
             },
             _refresh: function() {
@@ -38 +36 @@
                 Deferred.when(store.add({type:'Question'}))
                 .then(lang.hitch(this,function(question){
-                    this._editQuestion(question);
+                    this.onEditQuestion(question);
                 }));
             },
-            _editQuestion: function(question) {
+            onEditQuestion: function(question) {
                 content.goTo("question", {uid: question._id});
-                // this.questionForm.reset();
-                // this.questionWidget.set('value',question);
-                // this.questionDialog.show();
-            },
-            onSaveQuestion: function(evt) {
-                var value = this.questionWidget.get('value');
-                Deferred.when(store.put(value))
-                .then(lang.hitch(this,function(){
-                    this.questionDialog.hide();
-                    this.questionForm.reset();
-                    this._refresh();
-                }));
-                event.stop(evt);
-                return false;
-            },
-            onCancelQuestion: function() {
-                this.questionDialog.hide();
-                this.questionForm.reset();
             }
         });

Dev/branches/rest-dojo-ui/client/rft/pages/survey.html

@@ -10 +10 @@
         
         <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'">
-            <div data-rft-attach-point="tabList" data-dojo-type="dijit.layout.TabContainer" class="blue" data-dojo-props="tabPosition:'left-h',region:'center'">
-                <!-- tabs go here -->
-            </div>
+            <div data-rft-attach-point="questionBrowser"></div>
         </div>
         
@@ -21 +19 @@
             <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'bottom'">
                 <button data-rft-attach-point="btnProperties" data-dojo-type="dijit.form.Button" data-rft-attach-event="onClick:onProperties" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconProperties'">Properties</button>
-                <button data-rft-attach-point="btnSave" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton' data-rft-attach-event="onClick:onSave", iconClass: 'rftIcon rftIconAccept'">Save Changes</button>
+                <button data-rft-attach-point="btnSave" data-dojo-type="dijit.form.Button" data-rft-attach-event="onClick:onSave" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconAccept'">Save Changes</button>
                 <button data-rft-attach-point="btnDiscard" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconCancel'">Discard changes</button>
                 <button data-rft-attach-point="btnPreview" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconPreview'">Preview</button>

Dev/branches/rest-dojo-ui/client/rft/pages/survey.js

@@ -1 @@
-define(['dojo/_base/declare',
+define([
+    'dojo/_base/declare',
+    'dojo/_base/Deferred',
+    'dojo/_base/event',
     'dojo/_base/lang',
-    'dojo/_base/event',
-    'dojo/_base/Deferred',
-    'dojo/on',
-    'rft/ui/Selector',
-    'rft/ui/SurveyListView',
-    'dijit/layout/ContentPane',
+    'rft/content',
     'rft/store',
     'rft/ui/_Page',
-    'rft/content',
-    'dojo/store/Cache',
-    'dojo/store/Memory' ],
-    function(declare,lang,event,Deferred,on,Selector,SurveyListView,ContentPane,store,_Page,content,Cache,Memory){
+    'rft/ui/SurveyListView',
+    'rft/ui/TabbedQuestionBrowser'
+    ],
+    function(declare,Deferred,event,lang,content,store,_Page,SurveyListView,TabbedQuestionBrowser){
         return declare('rft.pages.survey',[_Page],{
             object: null,
@@ -27 +25 @@
                         return Deferred.when( obj.creator && store.dereference(obj.creator) );
                     }));
-                    this._setupButtons();
                     this._setupQuestionBrowser();
                     this._setupListView();
@@ -49 +46 @@
                 content.goTo('surveyAdvanced', {uid: this.object._id});
             },
-            _setupButtons: function() {
-                this.btnSave.on("click", lang.hitch(this, this.onSave));
-                this.btnPreview.on("click", lang.hitch(this, this._goToPreview));
-            },
             _setupQuestionBrowser: function() {
-                this.tabList.watch("selectedChildWidget",lang.hitch(this,function(name,oldTab,newTab){
-                    this._fillCategoryTab(newTab.__category);
-                }));
-                store.query('_design/default/_view/questions', {reduce:true,group:true,group_level:1})
-                .forPairs(lang.hitch(this,function(value,key){
-                    this._createCategoryTab(key[0],value);
-                }));
-            },
-            _createCategoryTab: function(category,count) {
-                if (this._dataMap[category] === undefined) {
-                    var categoryTab = new ContentPane({
-                        __category: category,
-                        title: category+" ("+count+")"
-                    });
-                    categoryTab.startup();
-                    this._dataMap[category] = {
-                        _widget: categoryTab
-                    };
-                    this.tabList.addChild(categoryTab);
-                }
-            },
-            _fillCategoryTab: function(category) {
-                var categoryMap = this._dataMap[category];
-                if (!categoryMap._filled) {
-                    categoryMap._filled = true;
-                    store.query('_design/default/_view/questions', {reduce:true,group:true,group_level:2,startkey:[category],endkey:[category,{}]})
-                    .forPairs(lang.hitch(this,function(value,key){
-                        this._createTopicSelector(key[1],category,value);
-                    }));
-                }
-            },
-            _createTopicSelector: function(topic,category,count){
-                var categoryMap = this._dataMap[category];
-                if (categoryMap[topic] === undefined) {
-                    var w = new Selector({
-                        __category: category,
-                        __topic: topic,
-                        title: topic+" ("+count+")"
-                    }).placeAt(categoryMap._widget.containerNode);
-                    w.startup();
-                    categoryMap[topic] = {
-                        _widget: w
-                    };
-                    this._fillTopicSelector(topic,category);
-                    w.on('include',lang.hitch(this,this.includeQuestion));
-                }
-            },
-            _fillTopicSelector: function(topic,category) {
-                var categoryMap = this._dataMap[category];
-                var topicMap = categoryMap[topic];
-                if (!topicMap._filled) {
-                    store.query('_design/default/_view/questions', {reduce:false,include_docs:true,key:[category,topic]})
-                    .forEach(lang.hitch(this,function(value){
-                        topicMap._widget.addItem(value);
-                    }));
-                }
+                this.questionBrowser = new TabbedQuestionBrowser({
+                    region: 'center',
+                    'class': 'blue',
+                    selectedActions: {
+                        "Include": {
+                            callback: lang.hitch(this,this.includeQuestion),
+                            icon: "Accept",
+                            description: "Include in survey"
+                        }
+                    },
+                    itemActions: {
+                        "Info": {
+                            callback: function(item){ item.description && alert(item.description); },
+                            icon: "Inspect",
+                            description: "Show item description"
+                        }
+                    }
+                },this.questionBrowser);
+                this.questionBrowser.startup();
             },
             /* ListView code */

Dev/branches/rest-dojo-ui/client/rft/ui/LineWithActionsWidget.js

@@ -40 +40 @@
                                                         label: "Default",
                                                         iconClass: 'rftIcon rftIcon'+this.actions[action].properties.icon,
-                                                        title: action,
-                                                        onClick: lang.hitch(this, dojo.partial(function(ac, e){
-                                                                lang.hitch(this, this.actions[ac].callback )(e);
-                                                                event.stop(e);
-                                                                return false;
-                                                        }, action))
+                                                        title: this.actions[action].properties.tooltip,
+                            onClick: lang.hitch(this, function(action, e){
+                                action.callback && action.callback(e);
+                                event.stop(e);
+                                return false;
+                            }, this.actions[action])
                                                 }, this.actions[action].properties);
-                                                        properties["class"] = properties.modifiers;
-                                                        new Button(properties).placeAt(this.buttonsNode);
-                                                } else {
-                                                        properties = lang.mixin({
-                                                                baseClass: 'rftInlineButton',
-                                                                modifiers: 'black',
-                                                                label: "Default",
-                                                                showLabel: false,
-                                                                iconClass: 'rftIcon rftIcon'+this.actions[action].properties.icon,
-                                                                title: action,
-                                                                onClick: lang.hitch(this, dojo.partial(function(ac, e){
-                                                                        lang.hitch(this, this.actions[ac].callback)(e);
-                                                                        event.stop(e);
-                                                                        return false;
-                                                                }, action))
-                                                        }, this.actions[action].properties);
-                                                        properties["class"] = properties.modifiers;
-                                                        new Button(properties).placeAt(this.buttonsNode);
-                                                }
-                                        }
-                                },
-                                refresh: function() {
-                                        this.titleNode.innerHTML = this.title;
-                                },
-                                _onClick: function(e){
-                                        var preventDefault = this.onClick(e) === false;
-                                        if (preventDefault) {
-                                                event.stop(e);
-                                        }
-                                        return !preventDefault;
-                                },
-                                onClick: function(e) {
-                                },
-                                _setTitleAttr: function(value){
-                                        this.title = value;
-                                        this.refresh();
-                                }
-                        });
-});
+                        properties["class"] = properties.modifiers;
+                        new Button(properties).placeAt(this.buttonsNode);
+                    } else {
+                        properties = lang.mixin({
+                            baseClass: 'rftInlineButton',
+                            modifiers: 'black',
+                            label: "Default",
+                            showLabel: false,
+                            iconClass: 'rftIcon rftIcon'+this.actions[action].properties.icon,
+                            title: this.actions[action].properties.tooltip,
+                            onClick: lang.hitch(this, function(action, e){
+                                action.callback && action.callback(e);
+                                event.stop(e);
+                                return false;
+                            }, this.actions[action])
+                        }, this.actions[action].properties);
+                        properties["class"] = properties.modifiers;
+                        new Button(properties).placeAt(this.buttonsNode);
+                    }
+                }
+            },
+            refresh: function() {
+                this.titleNode.innerHTML = this.title;
+            },
+            _onClick: function(e){
+                var preventDefault = this.onClick(e) === false;
+                if (preventDefault) {
+                    event.stop(e);
+                }
+                return !preventDefault;
+            },
+            onClick: function(e) {
+            },
+            _setTitleAttr: function(value){
+                this.title = value;
+                this.refresh();
+            }
+        });
+    });

Dev/branches/rest-dojo-ui/client/rft/ui/QuestionEditorPreviewItem.js

@@ -8 +8 @@
         'dijit/_TemplatedMixin',
         'dijit/_WidgetsInTemplateMixin',
-        'dijit/form/Textbox',
+        'dijit/form/TextBox',
         'dojo/text!./templates/QuestionEditorPreviewItem.html',
-        ], function(declare, fx, _WidgetBase, domClass, lang, on, _TemplatedMixin, _WidgetsInTemplateMixin, Textbox, templateFull) {
+        ], function(declare, fx, _WidgetBase, domClass, lang, on, _TemplatedMixin, _WidgetsInTemplateMixin, TextBox, templateFull) {
                 return declare("rft.ui.QuestionEditorPreviewItem", [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
 
@@ -70 +70 @@
                                 switch (this.item.widgetType) {
                                         default:
-                                        this.innerWidget = new Textbox();
+                                        this.innerWidget = new TextBox();
                                         break;
                                 }

Dev/branches/rest-dojo-ui/client/rft/ui/Selector.js

@@ -30 +30 @@
         return declare('rft.ui.Selector',[_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,_Container],{
             templateString: templateString,
-            title: "",
             baseClass: 'rftSelector',
             modifiers: 'blue',
+
+            title: "",
+            selectedActions: null,
+            itemActions: null,
+            // main selector action: Object
+            //    title:
+            //    description:
+            //    icon:
+
             _folded: true,
             _titleLine: null,
@@ -42 +50 @@
                 domClass.add(this.selectedColorNode, "pending");
 
+                this._createTitleLine();
+                this._createSelectorLine();
+
+                fx.wipeOut({
+                    node: this.optionsNode
+                }).play();
+            },
+            _createTitleLine: function() {
+                var actions = {};
+                var action = null;
+                if ( this.selectedActions !== null ) {
+                    for (var actionName in this.selectedActions) {
+                        action = this.selectedActions[actionName];
+                        actions[actionName] = {
+                            callback: action.callback &&
+                                    lang.hitch(this,this._onSelectedAction,
+                                            action.callback),
+                            properties: {
+                                 blockButton: true,
+                                 modifiers: this.modifiers,
+                                 label: action.title || actionName,
+                                 icon: action.icon,
+                                 tooltip: action.description
+                             }
+
+                        };
+                    }
+                }
+
                 this._titleLine = new LineWithActionsWidget({
                     title: this.title,
                     modifiers: this.modifiers,
-                    actions: {
-                        "Include in survey" : {
-                            callback: lang.hitch(this, this._onInclude),
-                            properties: {
-                                blockButton: true,
-                                modifiers: this.modifiers,
-                                icon: "Accept",
-                                label: "Include"
-                            }
-                        }
-                    }
+                    actions: actions
                 },this.titleNode);
                 this._titleLine.startup();
-
+            },
+            _createSelectorLine: function() {
                 this._selectorLine = new LineWithActionsWidget({
                     title: 'None',
@@ -76 +104 @@
                 this._selectorLine.startup();
                 this._selectorLine.on('click',lang.hitch(this, this.onToggle));
-
-                fx.wipeOut({
-                    node: this.optionsNode
-                }).play();
             },
             _onSelect: function(item, widget) {
@@ -97 +121 @@
                 this.onSelect(item);
             },
-            _onInclude: function() {
-                if (this._selectedItem) {
-                    this.onInclude(this._selectedItem);
+            _onSelectedAction: function(callback) {
+                if (this._selectedItem && callback) {
+                    callback(this._selectedItem);
                 }
             },
@@ -126 +150 @@
                 return false;
             },
+
             addItem: function(item) {
-                var w = new LineWithActionsWidget({
-                    title: item.title,
-                    actions: {
-                        "Info" : {
-                            callback: function() {
-                                item.description && alert(item.description);
-                            },
+                var actions = {};
+                var action;
+                if (this.itemActions) {
+                    for (var actionName in this.itemActions) {
+                        action = this.itemActions[actionName];
+                        actions[actionName] = {
+                            callback: function(){action.callback && action.callback(item);},
                             properties: {
                                 blockButton: false,
                                 showLabel: false,
-                                icon: "Inspect"
+                                icon: action.icon,
+                                tooltip: action.description
                             }
                         }
                     }
+                }
+                var w = new LineWithActionsWidget({
+                    title: item.title,
+                    actions: actions
                 }).placeAt(this.optionsNode);
                 w.startup();
                 w.on("click", lang.hitch(this, this._onSelect, item, w));
             },
-            onSelect: function(item) {},
-            onInclude: function(item) {}
+
+            onSelect: function(item) {}
         });
 });

Dev/branches/rest-dojo-ui/client/rft/ui/SurveyListView.js

@@ -110 +110 @@
                     node: node,
                     data: item,
-                    type: "SurveyListviewItem"
+                    type: "SurveyListViewItem"
                 };
                 return fullItem;