Changeset 374

Timestamp:

07/24/12 16:39:41 (13 years ago)

Author:

jkraaijeveld

Message:

Can now edit basic question properties and store them.

Location:

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

Files:

• css/layout.css (modified) (2 diffs)
• pages/question.js (modified) (4 diffs)
• pages/session.html (modified) (1 diff)
• pages/session.js (modified) (1 diff)
• run.js (modified) (1 diff)
• ui/AccountListView.js (modified) (3 diffs)
• ui/CategoryListView.js (added)
• ui/List.js (modified) (1 diff)
• ui/OrderedList.js (modified) (3 diffs)
• ui/QuestionEditorToolkit.js (modified) (4 diffs)
• ui/templates/List.html (modified) (1 diff)
• ui/templates/QuestionEditorToolkit.html (modified) (1 diff)

Dev/branches/rest-dojo-ui/client/rft/css/layout.css

@@ -288 +288 @@
 }
 .claro .dijitAccordionContainer {
+    height: 600;
     /* No styling for now, use this for margins and other layout-related business. This class does not affect the look of the AccordionContainer currently! */
 }
@@ -480 +481 @@
 }
 
+/* AccountListView */
+.claro .rftAccountListView .rftLineWithButtons .rftLineWithButtonsTitle {
+    max-width: 400px;
+    overflow: auto;
+}
 /* Generic list with lines */
 .claro .rftLineListView {
-    width: 400px;
+    max-width: 200px;
     max-height: 500px;
 }
 .claro .rftLineListView .rftLineListViewContent {
-    max-width: 400px;
+    max-width: 200px;
     overflow: auto;
 }

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

@@ -1 +1 @@
 define(['dojo/_base/declare',
     'dojo/_base/lang',
+    'dojo/_base/event',
     'dojo/_base/Deferred',
     'rft/ui/LineWithActionsWidget',
@@ -14 +15 @@
     'rft/ui/QuestionEditorToolkit',
     'dijit/form/FilteringSelect'],
-    function(declare, lang, Deferred, LineWithActionsWidget, store, _Page, api, content, registry, on, behavior, query){
+    function(declare, lang, event, Deferred, LineWithActionsWidget, store, _Page, api, content, registry, on, behavior, query){
         return declare('rft.pages.question', [_Page], {
             question: null,
@@ -37 +38 @@
             },
             _refresh: function () {
-                this._toolkit.propertiesForm.set('value', this.question);
+                this._toolkit.loadQuestion(this.question);
+            },
+            _onSave: function() {
+                lang.mixin(this.question, this._toolkit.propertiesForm.get('value'));
+                this.question.categories = this._toolkit._categories; 
+                store.put(this.question)
+                .then(function() {
+                    content.goTo('questions');
+                });
+                return false;
+            },
+            _onDiscard: function() {
+                this._toolkit.propertiesForm.reset();
+                content.goTo('questions');
+                return false;
             },
             _setupButtons: function() {
@@ -43 +58 @@
                     "#btnSave": {
                         onclick: lang.hitch(this, function(){
-                            this._saveSurvey();
+                            this._onSave();
                         })
                     },
                     "#btnDiscard": {
                         onclick: lang.hitch(this, function(){
-                            this._restartEditor();
+                            this._onDiscard();
                         })
                     }

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

@@ -31 +31 @@
                             <br/><br/>
                             
-                            <div data-rft-attach-point="listViewNode" class="rftLineListView">
+                            <div data-rft-attach-point="listViewNode" class="rftAccountListView">
                             </div>
                         </fieldset>

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

@@ -55 +55 @@
             },
             _addAccount: function(item) {
+                if (!this.session.accounts) 
+                    this.session.accounts = [];
                 this.session.accounts.push(item);
                 this._listView.insertItem(item);

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

@@ -30 +30 @@
     'dojox/data/QueryReadStore',
     'rft/elastic/ElasticReadStore',
-    'rft/ui/ListView',
+    'rft/ui/List',
+    'rft/ui/OrderedList',
     'rft/ui/AccountListView',
     'rft/ui/MainMenu',

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

@@ -7 +7 @@
     'dijit/_Container',
     'rft/ui/LineWithActionsWidget',
-    'rft/ui/ListView',
+    'rft/ui/OrderedList',
     'dojo/text!./templates/AccountListView.html'
         ],function(
@@ -22 +22 @@
         return declare('rft.ui.AccountListView',[OrderedList,_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,_Container],{
             templateString: templateString,
-            baseClass: 'rftLineListView',
+            baseClass: 'rftAccountListView',
             region: 'center',
 
@@ -58 +58 @@
                 };
                 return fullItem;
-                },
+                }
 
            

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

@@ -1 +1 @@
 define([
     'dojo/_base/declare',
+    'dojo/_base/lang',
     'dijit/_WidgetBase',
     'dijit/_TemplatedMixin',
     'dijit/_WidgetsInTemplateMixin',
     'dijit/_Container',
+    'rft/ui/LineWithActionsWidget',
     'dojo/text!./templates/List.html'
     ],function(
         declare,
+        lang,
         _WidgetBase,
         _TemplatedMixin,
         _WidgetsInTemplateMixin,
         _Container,
+        LineWithActionsWidget,
         templateString
         ){
         return declare('rft.ui.List',[_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,_Container],{
             templateString: templateString,
-            baseClass: 'rftList'
+            baseClass: 'rftList',
+            removeCallback: null,
+            creator: null,
+
+            constructor: function() {
+                lang.mixin(this, arguments);
+            },
+
+            postCreate: function() {
+                if (this.title) {
+                    this.titleNode.innerHTML = this.title;
+                } else {
+                    this.domNode.removeChild(this.titleNode);
+                }
+
+                this.source = new dojo.dnd.Source(this.sourceNode, {
+                    isSource: false,
+                    accept: ["LineListViewItem"],
+                    horizontal: false,
+                    withHandles: false,
+                    selfCopy: false,
+                    selfAccept: true,
+                    delay: 0,
+                    singular: true,
+                    creator: lang.hitch(this, this.creatorMethod)
+                })
+            },
+
+            removeItem: function(item, widget) {
+                widget.destroy();
+                if(this.removeCallback)
+                    this.removeCallback(item);
+            },
+
+            insertItem: function(item) {
+                this.source.insertNodes(false, [item]);
+            }
+
         });
     });

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

@@ -6 +6 @@
     'dijit/_WidgetsInTemplateMixin',
     'dijit/_Container',
-    'dojo/text!./templates/List.html'
+    'rft/ui/List',
+    'dojo/text!./templates/OrderedList.html'
     ],function(
         declare,
@@ -14 +15 @@
         _WidgetsInTemplateMixin,
         _Container,
+        List,
         templateString
         ){
-        return declare('rft.ui.List',[_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,_Container],{
+        return declare('rft.ui.OrderedList',[_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,_Container,List],{
             templateString: templateString,
-            baseClass: 'rftList',
-
-            removeCallback: null,
-
-            constructor: function() {
-                lang.mixin(this, arguments);
-            },
+            baseClass: 'rftLineListView',
 
             postCreate: function() {
@@ -100 +96 @@
                     this.source.insertNodes(false, [item]);
                 }
-            },
-            removeItem: function(item, widget) {
-                widget.destroy();
-                if(this.removeCallback)
-                    this.removeCallback(item);
             }
+
         });
     });

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

@@ -6 +6 @@
         'dijit/_Container',
         'dojo/dom-construct',
+        'rft/store',
         'rft/ui/QuestionEditorPreviewItem',
+        'rft/ui/CategoryListView',
         'dijit/_TemplatedMixin',
         'dijit/_WidgetsInTemplateMixin',
+        'dijit/form/ComboBox',
         'dojo/text!./templates/QuestionEditorToolkit.html'
-        ], function(declare, lang, baseArray, _WidgetBase, _Container, domConstruct, QuestionEditorPreviewItem, _TemplatedMixin, _WidgetsInTemplateMixin, template) {
+        ], function(declare, lang, baseArray, _WidgetBase, _Container, domConstruct, store, QuestionEditorPreviewItem, CategoryListView, _TemplatedMixin, _WidgetsInTemplateMixin, ComboBox, template) {
                 return declare("rft.ui.QuestionEditorToolkit", [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, _Container], {
 
                         templateString: template,
-                        question: null,
+                        _list: null,
+                        _categorySelect: null,
+                        _categoryStore: null,
+                        _categories : null,
+
+//                      constructor: function() {
+//                              lang.mixin(this, arguments);
+//                      },
 
                         postCreate: function(){
@@ -42 +52 @@
                                 this.inputsSource.insertNodes(false, inputsItems);
                         },
+                        loadQuestion: function(question) {
+                                this.propertiesForm.set('value', question);
+                                this._categories = question.categories;
+                                this._setupListView();
+                                this._setupAutoComplete();
+                        },
+                        onCategoryAdd: function() {
+                                this._addCategory(this._categorySelect.get('displayedValue')); 
+                                this._categorySelect.reset();
+                        },
                         _creator: function(item, hint) {
                                 var node;
@@ -47 +67 @@
                                         node = document.createElement("span");
                                         node.innerHTML = item.widgetType;
-                                        // debugger;
                                         return {node: node, data: item, type: "ToolkitItem"};
                                 } else {
@@ -60 +79 @@
                                 }
                         },
+                        _setupListView: function() {
+                                this._list = new CategoryListView( {
+                                        controller: this,
+                                        removeCallback: lang.hitch(this, this._removeCategory),
+                                }).placeAt(this.listNode);
+                                for (category in this._categories) {
+                                        this._list.insertItem(this._categories[category]);
+                                }       
+                                this._list.startup();
+                        },
+                        _setupAutoComplete: function() {
+                                this._categoryStore = new dojo.store.Memory({data: [] });
+                                store.query("_design/default/_view/questions", {reduce:true, group:false, group_level:1})
+                                        .forPairs(lang.hitch(this, function(value, key) {
+                                                this._categoryStore.put({ category: key[0] });
+                                        }));
+                                this._categorySelect = new ComboBox( {
+                                        id: "categoriesBox",
+                                        name: "categories",
+                                        store: this._categoryStore,
+                                        searchAttr: "category"
+                                }, "categoriesBox");
+
+                                this._topicStore = new dojo.store.Memory( {data: [] });
+                                store.query("_design/default/_view/questions", {reduce:true, group:true, group_level:2})
+                                        .forPairs(lang.hitch(this, function(value, key) {
+                                                this._topicStore.put({ topic: key[1]});
+                                        }));
+                                this._topicSelect = new ComboBox( {
+                                        id: "topicBox",
+                                        name: "topic",
+                                        store: this._topicStore,
+                                        searchAttr: "topic"
+                                }, "topicBox");
+            },
+                        _addCategory: function(item) {
+                                this._categories.push(item);
+                                this._list.insertItem(item);
+                        },
+                        _removeCategory: function(item) {
+                                this._categories.splice(this._categories.indexOf(item), 1);
+                        },
                         _contentItems: function() {
                                 // Returns an array of objects, from which to generate buttons to populate the ToolkitContentSource list.

Dev/branches/rest-dojo-ui/client/rft/ui/templates/List.html

@@ -1 +1 @@
 <div>
-    <div data-dojo-attach-point="containerNode"></div>
-    <div style="float: right;">
-        <span>Move selected: </span>
-        <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftBlockButton', iconClass:'rftIcon rftIconFullArrowUp'" class="trans"></button>
-        <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftBlockButton', iconClass:'rftIcon rftIconFullArrowDown'" class="trans"></button>
-    </div>
+        <h3 data-dojo-attach-point="titleNode"></h3>
+    <div data-dojo-attach-point="sourceNode" id="source" class="${baseClass}Content"></div>
 </div>

Dev/branches/rest-dojo-ui/client/rft/ui/templates/QuestionEditorToolkit.html

@@ -5 +5 @@
                                 <fieldset class="align">
                                         <label for="propertiesTitle">Title:</label><input data-dojo-type="dijit.form.TextBox" id="propertiesTitle" name="title"/>
-                                        <label for="propertiesCode">Code:</label><input data-dojo-type="dijit.form.TextBox" id="propertiesCode" name= "code"/>
-                                        <label for="propertiesCategories">Categories:</label><input data-dojo-type="dijit.form.FilteringSelect" id="propertiesCategories" name="categories"/>
-                                        <label for="propertiesTopic">Topic:</label><input data-dojo-type="dijit.form.FilteringSelect" id="propertiesTopic" name="topic"/>
-                                        <label for="propertiesDescription">Description:</label><textarea data-dojo-type="dijit.form.Textarea" id="propertiesDescription" name="description"></textarea>
+                                        <label for="propertiesCode">Code:</label><input data-dojo-type="dijit.form.TextBox" id="propertiesCode" name= "_id"/>
+                                        <label for="propertiesCategories">Categories:</label>
+                                        <div data-dojo-attach-point="listNode" class="rftLineListView"></div> 
+                                        <select id="categoriesBox"></select>
+                                        <button data-rft-attach-point="btnCategory" data-dojo-type="dijit.form.Button" data-dojo-attach-event="onClick:onCategoryAdd" data-dojo-props="baseClass:'rftBlockButton', class:'orange', iconClass: 'rftIcon rftIconPlus'">Add</button><br>
+                                        <label for="propertiesTopic">Topic:</label>
+                                        <select id="topicBox"></select>
+                                        <label for="propertiesDescription">Description:</label><textarea data-dojo-type="dijit.form.TextBox" id="propertiesDescription" name="description"></textarea>
                                 </fieldset>
                         </div>