Changeset 379

Timestamp:

07/26/12 21:57:20 (13 years ago)

Author:

hendrikvanantwerpen

Message:

Changed SurveyListView? to more general OrderedDndList?.
Survey page has rudimentary properties dialog and saves included questions.
Fixed bug in store for null question.

Location:

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

Files:

• pages/survey.html (modified) (2 diffs)
• pages/survey.js (modified) (5 diffs)
• run.js (modified) (1 diff)
• store.js (modified) (1 diff)
• ui/OrderedDndList.js (moved) (moved from Dev/branches/rest-dojo-ui/client/rft/ui/SurveyListView.js) (7 diffs)
• ui/templates/OrderedDndList.html (moved) (moved from Dev/branches/rest-dojo-ui/client/rft/ui/templates/SurveyListView.html)

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

@@ -5 +5 @@
             <h2>
                 <span class="rftIcon rftIconSurvey"></span>
-                <span class="headerText" data-dojo-attach-point="header">Survey A [editing]</span>
+                <span class="headerText" data-rft-attach-point="titleNode">Survey Editor</span>
             </h2>
         </div>
@@ -18 +18 @@
 
             <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-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>
+                <button data-dojo-type="dijit.form.Button"
+                        data-rft-attach-event="onClick:_onShowProperties"
+                        data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconProperties'">
+                    Properties</button>
+                <button 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-dojo-type="dijit.form.Button"
+                        data-rft-attach-event="onClick:_onDiscard"
+                        data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconCancel'">
+                    Discard changes</button>
+                <button data-dojo-type="dijit.form.Button"
+                        data-rft-attach-event="onClick:_onShowPreview"
+                        data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconPreview'">
+                    Preview</button>
             </div>
         </div>
     </div>
+
+    <div data-dojo-type="dijit.Dialog"
+         title="Survey properties"
+         data-rft-attach-point="propertiesDialog"
+         data-rft-attach-event="onSubmit:_onPropertiesOk">
+
+        <form data-dojo-type="dijit.form.Form"
+              data-rft-attach-point="propertiesForm">
+            <label for="title">Title</label>
+            <input data-dojo-type="dijit.form.TextBox" name="title"/>
+        </form>
+            
+        <div>
+            <button data-dojo-type="dijit.form.Button"
+                    type="submit"
+                    data-rft-attach-event="onClick:_onPropertiesOk">
+                OK</button>
+            <button data-dojo-type="dijit.form.Button"
+                    type="button"
+                    data-rft-attach-event="onClick:_onPropertiesCancel">
+                Cancel</button>
+        </div>
+    </div>
+
 </div>

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

@@ -1 +1 @@
 define([
+    'dojo/_base/array',
     'dojo/_base/declare',
     'dojo/_base/Deferred',
@@ -7 +8 @@
     'rft/store',
     'rft/ui/_Page',
-    'rft/ui/SurveyListView',
+    'rft/ui/OrderedDndList',
     'rft/ui/TabbedQuestionBrowser'
     ],
-    function(declare,Deferred,event,lang,content,store,_Page,SurveyListView,TabbedQuestionBrowser){
+    function(array,declare,Deferred,event,lang,content,store,_Page,
+             OrderedDndList,TabbedQuestionBrowser){
         return declare('rft.pages.survey',[_Page],{
-            object: null,
-            listView: null,
+            survey: null,
+            questionList: null,
             _dataMap: null,
             constructor: function(){
@@ -20 +22 @@
             onVisit: function() {
                 if ( this.pageArgs.uid ) {
+                    this._setupQuestionBrowser();
+                    this._setupListView();
                     Deferred.when(store.get(this.pageArgs.uid))
                     .then(lang.hitch(this,function(obj){
-                        this.object = obj;
-                        return Deferred.when( obj.creator && store.dereference(obj.creator) );
+                        this.survey = obj;
+                        this.refresh();
                     }));
-                    this._setupQuestionBrowser();
-                    this._setupListView();
                 } else {
                     throw "No valid uid or survey passed!";
                 }
-            },
-            onProperties: function(evt) {
-
-            },
-            onSave: function(evt) {
-//                lang.mixin(this.object, this.propertiesForm.get('value'));
-                store.put(this.object)
-                .then(function() { 
-                    content.goTo('surveys');
-                });
-                event.stop(evt);
-                return false;
-            },
-            _goToPreview: function() {
-                content.goTo('surveyAdvanced', {uid: this.object._id});
             },
             _setupQuestionBrowser: function() {
@@ -52 +39 @@
                     selectedActions: {
                         "Include": {
-                            callback: lang.hitch(this,this.includeQuestion),
+                            callback: lang.hitch(this,this._includeQuestion),
                             icon: "Accept",
                             description: "Include in survey"
@@ -67 +54 @@
                 this.questionBrowser.startup();
             },
-            /* ListView code */
-            includeQuestion: function(question) {
-                var item = this.listView.insertItem(question);
+            _includeQuestion: function(question) {
+                this.questionList.insertItem(question);
             },
             _setupListView: function() {
-                this.listView = new SurveyListView({
-                    controller: this
+                this.questionList = new OrderedDndList({
+                    type: 'question',
+                    region: 'center'
                 }).placeAt(this.surveyListViewNode);
-                this.listView.startup();
+                this.questionList.startup();
+            },
+            refresh: function() {
+                this.titleNode.innerHTML = this.survey.title || "(set title in properties)";
+                this.propertiesForm.set('value',this.survey);
+                store.query(null,{keys:this.survey.questions,include_docs:true})
+                .forEach(lang.hitch(this.questionList,'appendItem'));
+            },
+            _onShowProperties: function(evt) {
+                this.propertiesDialog.show();
+            },
+            _onPropertiesOk: function(evt) {
+                this.propertiesDialog.hide();
+                lang.mixin(this.survey, this.propertiesForm.get('value'));
+                this.refresh();
+                event.stop(evt);
+                return false;
+            },
+            _onPropertiesCancel: function(evt) {
+                this.propertiesDialog.hide();
+                this.propertiesForm.set('value',this.survey);
+                event.stop(evt);
+                return false;
+            },
+            _onSave: function(evt) {
+                this.survey.questions = array.map(this.questionList.getItems(),function(item){
+                    return store.getIdentity(item);
+                });
+                store.put(this.survey)
+                .then(function() { 
+                    content.goTo('surveys');
+                });
+                event.stop(evt);
+                return false;
+            },
+            _onDiscard: function(evt) {
+            },
+            _onShowPreview: function() {
+                content.goTo('surveyAdvanced', {uid: store.getIdentity(this.survey)});
             }
         });

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

@@ -8 +8 @@
     'dojo/data/ObjectStore',
     'dojo/store/JsonRest',
+    'dijit/Dialog',
     'dijit/InlineEditBox',
     'dijit/MenuBar',

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

@@ -141 +141 @@
                 var dfd = new Deferred();
                 var queryOpts = {};
-                if ( query === undefined ) {
+                if ( !query ) {
                     query = '_all_docs';
                 }

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

@@ -1 +1 @@
 define([
     'dojo/_base/declare',
+    'dojo/_base/lang',
+    'dojo/dnd/Source',
+    'dojo/dom-construct',
+    'dijit/_Container',
+    'dijit/_TemplatedMixin',
     'dijit/_WidgetBase',
-    'dijit/_TemplatedMixin',
-    'dojo/_base/lang',
-    'dojo/fx',
-    'dojo/_base/fx',
     'dijit/_WidgetsInTemplateMixin',
-    'dijit/_Container',
+    'dijit/form/Button',
     'rft/ui/LineWithActionsWidget',
-    'dojo/text!./templates/SurveyListView.html'
+    'dojo/text!./templates/OrderedDndList.html'
     ],function(
         declare,
+        lang,
+        Source,
+        domConstruct,
+        _Container,
+        _TemplatedMixin,
         _WidgetBase,
-        _TemplatedMixin,
-        lang,
-        fx,
-        baseFx,
         _WidgetsInTemplateMixin,
-        _Container,
+        Button,
         LineWithActionsWidget,
         templateString
-        ){
-        return declare('rft.ui.SurveyListView',[_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,_Container],{
+    ){
+        return declare('rft.ui.OrderedDndList',[_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,_Container],{
             templateString: templateString,
             baseClass: 'rftSurveyListView',
+            type: 'text',
             source: null,
-            region: 'center',
 
             postCreate: function() {
@@ -35 +37 @@
                 }
 
-                this.source = new dojo.dnd.Source(this.sourceNode, {
-                    isSource: true,
-                    accept: ["SurveyListViewItem"],
+                this.source = new Source(this.sourceNode, {
+                    accept: [this.type],
                     horizontal: false,
-                    withHandles: false,
-                    copyOnly: false,
-                    selfCopy: false,
-                    selfAccept: true,
-                    delay: 0,
                     singular: true,
-                    creator: lang.hitch(this, this.creatorMethod)
+                    creator: lang.hitch(this, this._createQuestionDndItem)
                 });
 
-                new dijit.form.Button({
+                new Button({
                     label: "Move up",
                     showLabel: false,
@@ -55 +51 @@
                     'class': "trans",
                     onClick: lang.hitch(this, function() {
-                        this.moveItem("up");
+                        this._moveSelectedItem("up");
                     })
                 }, this.btnListMoveUp);
 
-                new dijit.form.Button({
+                new Button({
                     label: "Move down",
                     showLabel: false,
@@ -66 +62 @@
                     'class': "trans",
                     onClick: lang.hitch(this, function() {
-                        this.moveItem("down");
+                        this._moveSelectedItem("down");
                     })
                 }, this.btnListMoveDown);
             },
-            creatorMethod: function(item, hint) {
+            _createQuestionDndItem: function(item, hint) {
                 var node;
 
                 if (hint == "avatar") {
-                    node = document.createElement("div");
-                    node.className = "dragAvatar";
-                    node.innerHTML = item.title;
+                    node = domConstruct.create("div",{
+                        'class': 'dragAvatar',
+                        innerHTML: item.title
+                    });
                 } else {
                     var w = new LineWithActionsWidget({
@@ -83 +80 @@
                         actions: {
                             "Remove" : {
+                                // w not bound in hitch, because it's
+                                // not initialized when hitch is called.
                                 callback: lang.hitch(this, function(){
-                                    this.removeItem(item, w);
+                                    this._removeItem(w);
                                 }),
                                 properties: {
@@ -107 +106 @@
                     node = w.domNode;
                 }
-                var fullItem = {
+                return {
                     node: node,
                     data: item,
-                    type: "SurveyListViewItem"
+                    type: "question"
                 };
-                return fullItem;
             },
-            moveItem: function(dir) {
+            _moveSelectedItem: function(dir) {
                 var node = this.source.getSelectedNodes()[0];
                 if (node) {
@@ -142 +140 @@
                     this.source.insertNodes(false,[item], false, anchor);
                 } else {
-                    this.source.insertNodes(false,[item]);
+                    this.appendItem(item);
                 }
             },
-            removeItem: function(item,widget){
+            appendItem: function(item) {
+                this.source.insertNodes(false,[item]);
+            },
+            getItems: function() {
+                return this.source.getAllNodes()
+                .map(function(node){
+                    return this.source.getItem(node.id).data;
+                },this);
+            },
+            deleteItems: function() {
+                this.source.getAllNodes()
+                .forEach(function(node){
+                    node.destroy();
+                });
+                this.source.sync();
+            },
+            _removeItem: function(widget){
                 widget.destroy();
+                this.source.sync();
             }
         });
-});
+    });