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

Timestamp:

07/09/12 19:24:56 (13 years ago)

Author:

tjcschipper

Message:

• Made change to _Page.js to destroy the page's child widgets on page leave. This was causing widgets with identical names (such as "btnSave") to make regsitry throw a duplicate widget error.
• survey.js/html now sorts loaded questions into categories and topics and creates or adds them to the proper TabPane/Selectors?. TODO: Allow for spaces in category titles.
• Added "addQuestion()" method to Selector.js, to internalize question visualization logic.
• Included surveyAdvanced page in run.js
• Changes index to use proper button format, still need to figure out a way to bind content.goTo to the onclick field (since there is no index.js script being run!)
• Various css tweaks.

File:

• Dev/branches/rest-dojo-ui/client/rft/pages/survey.js (modified) (4 diffs)

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

@@ -1 @@
-define(['dojo/_base/declare','dojo/_base/lang','dojo/_base/event',
-    'dojo/_base/Deferred','rft/ui/AccordionList','rft/ui/LineWithActionsWidget',
-    'rft/store','rft/ui/_Page','rft/api'],
-    function(declare,lang,event,Deferred,AccordionList,LineWithActionsWidget,store,_Page,api){
+define(['dojo/_base/declare',
+    'dojo/_base/lang',
+    'dojo/_base/event',
+    'dojo/_base/Deferred',
+    'rft/ui/AccordionList',
+    'rft/ui/LineWithActionsWidget',
+    'rft/store',
+    'rft/ui/_Page',
+    'rft/api',
+    'dijit/registry',
+    'rft/content',
+    'dojo/on',
+    'dojo/query'],
+    function(declare,lang,event,Deferred,AccordionList,LineWithActionsWidget,store,_Page,api,registry,content, on, query){
         return declare('rft.pages.survey',[_Page],{
             object: null,
@@ -9 +19 @@
                     Deferred.when(store.get(this.pageArgs.uid))
                     .then(lang.hitch(this,function(obj){
-                        this.object = obj;
-                        this.setFields(obj);
-                        return Deferred.when( obj.creator && store.dereference(obj.creator) );
-                    }))
-                    .then(lang.hitch(this,function(obj){
-                        this.creator.innerHTML = (obj && obj.email) || 'unknown';
-                    }));
-                    Deferred.when(store.query('_design/default/_view/by_type',{key:'Question'}))
-                    .then(lang.hitch(this,function(items){
-                        this._questionList = new AccordionList({
-                            actions: {
-                                'Add': lang.hitch(this,'_addQuestion')
-                            },
-                            categoryProperty: 'category',
-                            titleProperty: 'title'
-                        },this.allQuestions);
-                        this._questionList.startup();
-                        this._questionList.setItems(items);
-                    }));
+                       this.object = obj;
+                       return Deferred.when( obj.creator && store.dereference(obj.creator) );
+                   }));
+                    this._createQuestionBrowser();
                 } else {
-                    this.header.innerHTML = "Error: no uid for survey!"
+                    //this.header.innerHTML = "Error: no uid for survey!"
                 }
+                this._setupButtons(this);
+                this._insertQuestion({title: "This is the question title!", sorting: {categories: ['CategoryOne', 'CategoryB123'], topic: 'The first question topic'}});
+                this._insertQuestion({title: "BLablabla question text!", sorting: {categories: ['CategoryOne'], topic: 'The first question topic'}});
+                this._insertQuestion({title: "Yaddayaddayaddaa ... sigh", sorting: {categories: ['CategoryThree', 'CategoryB123'], topic: 'Another topic'}});
+            },
+            onLeave: function() {
+                this.inherited(arguments);
             },
             onReset: function() {
@@ -36 +38 @@
             },
             onSave: function(evt) {
-                lang.mixin(this.object,this.form.get('value'));
+                /*lang.mixin(this.object,this.form.get('value'));
                 Deferred.when( store.put(this.object) )
                 .then(lang.hitch(this,function(obj){
@@ -48 +50 @@
                 evt.stopPropagation();
                 return false;
+                */
             },
-            setFields: function(obj) {
-                this.form.reset();
-                this.header.innerHTML = "Edit survey '"+(obj.title || '(undefined)')+"'";
-                obj && this.form.set('value',obj);
+            _goToPreview: function() {
+                content.goTo('surveyAdvanced', {uid: this.object._id});
+                /* 
+                * TODO: How to prevent widgets with identical id's on different pages clashing?
+                * For example: btnSave clashes when going from survey to surveyAdvanced, since both contain one. survey.btnSave is not destroyed when loading surveyAdvanced.btnSave!
+                * Since there is no page reload, only a contentPane content swap!
+                * Talk to Hendrik about this! 
+                * TEMPORARY FIX IN THIS.ONLEAVE!
+                */
             },
-            _addQuestion: function(obj) {
-                var d = {};
-                d.widget = new LineWithActionsWidget({
-                    title:obj.title,
-                    userObj: obj,
-                    actions:{
-                        "Remove": lang.hitch(this,'_removeQuestion',d)
+            _setupButtons: function() {
+                // Setup button events
+                registry.byId("btnSave").on("click", lang.hitch(this, function(){
+                    this.onSave(arguments);
+                }));
+                registry.byId("btnPreview").on("click", lang.hitch(this, function(){
+                    this._goToPreview();
+                }));
+            },
+            _createQuestionBrowser: function() {
+                Deferred.when(store.query('_design/default/_view/by_type',{key:'Question'}))
+                .then(lang.hitch(this,function(questions){
+                 questions.forEach(function(question) {
+                    this._insertQuestion(question);
+                }, this);
+             }));
+            },
+            _insertQuestion: function(question) {
+                // MASSIVE TODO: The question categories cannot have spaces currently, due to the way we append them to the ID property of the container. ID's cannot have spaces.
+                // Easy fix: Replace spaces with underscores for the time being? The alternative is to make these containers have an actual "questioncategory" property in the governing widget. Not fun.
+                var tabs = registry.byId("tabList");
+                for (var c in question.sorting.categories) {
+                    var cat = question.sorting.categories[c];
+                    var catPane = query("#tab"+cat, tabs.containerNode)[0];
+                    if (catPane) {
+                        this._insertIntoCategory(question, catPane);
+                    } else {
+                        catPane = this._createCategoryTab(cat);
+                        if (catPane) {
+                            this._insertIntoCategory(question, catPane);
+                        } else {
+                            throw "Error: could not find or create category pane!";
+                        }
                     }
+                }
+            },
+            _createCategoryTab: function(category) {
+                var tabs = registry.byId("tabList");
+                var newCat = new dijit.layout.ContentPane({
+                    title: category
                 });
-                d.widget.placeAt(this.surveyQuestions);
+                newCat.domNode.id = "tab"+category;
+                tabs.addChild(newCat);
+                var pane = query("#tab"+category, tabs.containerNode)[0];
+                return (pane) ? pane : false;
             },
-            _removeQuestion: function(data,obj) {
-                data.widget.destroy();
-            }
+            _insertIntoCategory: function(question, container) {
+                debugger;
+                var selector = query(".rftSelector[title='"+question.sorting.topic+"']", container)[0];
+                var selectorWidget;
+                if (selector) {
+                    selectorWidget = registry.byNode(selector);
+                    
+                } else {
+                    selectorWidget = new rft.ui.Selector({
+                        title: question.sorting.topic
+                    });
+                    selectorWidget.placeAt(container);
+                }
+                selectorWidget.addQuestion(question);
+            },
+
+
+
+
         });
-    });
+});