Changeset 370 for Dev/branches/rest-dojo-ui/client/rft/pages

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/pages

Files:

• questions.html (modified) (1 diff)
• questions.js (modified) (2 diffs)
• survey.html (modified) (2 diffs)
• survey.js (modified) (3 diffs)

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 */