Changeset 316 for Dev/branches/rest-dojo-ui/client/rft

Timestamp:

03/23/12 17:26:55 (13 years ago)

Author:

hendrikvanantwerpen

Message:

Mockup included.

Location:

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

Files:

• pages/questions.js (modified) (2 diffs)
• pages/survey.html (modified) (2 diffs)
• pages/survey.js (modified) (3 diffs)
• ui/AccordionList.js (modified) (2 diffs)
• ui/LineWithActionsWidget.js (modified) (2 diffs)
• ui/List.js (added)
• ui/Selector.js (added)
• ui/templates/LineWithActionsWidget.html (modified) (1 diff)
• ui/templates/List.html (added)
• ui/templates/Selector.html (added)

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

@@ -10 +10 @@
                 this._store = store.getStore('Question');
                 this._list = new AccordionList({
-                    store: this._store,
                     actions: {
                         'Edit': lang.hitch(this,'_editQuestion')
                     },
+                    idProperty: this._store.idProperty,
                     categoryProperty: 'category',
                     titleProperty: 'title'
@@ -21 +21 @@
             },
             _refresh: function() {
-                this._list.refresh();
+                Deferred.when(this._store.query())
+                .then(lang.hitch(this,function(items){
+                    this._list.setItems(items);
+                }));
             },
             onNewQuestion: function() {

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

@@ -1 +1 @@
 <div data-dojo-type="rft.pages.survey">
     <h1 data-rft-attach-point="header">(default)</h1>
-    <div>Created by <span data-rft-attach-point="creator"></span><div>
+    <div>Created by <span data-rft-attach-point="creator"></span></div>
     <form data-dojo-type="dijit.form.Form" data-rft-attach-point="form" data-rft-attach-event="onSubmit:onSave">
         <div style="display: block; clear: both;">
@@ -11 +11 @@
         <label for="description" class="loginLabel">Description</label>
         <textarea name="description" data-dojo-type="dijit.form.SimpleTextarea" class="loginInput"></textarea>
+        <div>
+            <div style="width: 45%; float: left; clear: left;"><div data-rft-attach-point="allQuestions"></div></div>
+            <div style="width: 45%; float: left;"><div data-rft-attach-point="surveyQuestions"></div></div>
+        </div>
     </form>
 </div>

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/store','rft/ui/_Page','rft/api'],
-    function(declare,lang,event,Deferred,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'],
+    function(declare,lang,event,Deferred,AccordionList,LineWithActionsWidget,store,_Page,api){
         return declare('rft.pages.survey',[_Page],{
             object: null,
             postCreate: function() {
                 this.inherited(arguments);
-                this._store = store.getStore('Survey');
+                this._surveyStore = store.getStore('Survey');
+                this._questionStore = store.getStore('Question');
             },
             onVisit: function() {
                 if ( this.pageArgs.uid ) {
-                    Deferred.when(this._store.get(this.pageArgs.uid))
+                    Deferred.when(this._surveyStore.get(this.pageArgs.uid))
                     .then(lang.hitch(this,function(obj){
                         this.object = obj;
@@ -17 +20 @@
                     .then(lang.hitch(this,function(obj){
                         this.creator.innerHTML = (obj && obj.email) || 'unknown';
+                    }));
+                    Deferred.when(this._questionStore.query())
+                    .then(lang.hitch(this,function(items){
+                        this._questionList = new AccordionList({
+                            store: this._surveyStore,
+                            actions: {
+                                'Add': lang.hitch(this,'_addQuestion')
+                            },
+                            idProperty: this._questionStore.idProperty,
+                            categoryProperty: 'category',
+                            titleProperty: 'title'
+                        },this.allQuestions);
+                        this._questionList.startup();
+                        this._questionList.setItems(items);
                     }));
                 } else {
@@ -42 +59 @@
                 this.header.innerHTML = "Edit survey '"+(obj.title || '(undefined)')+"'";
                 obj && this.form.set('value',obj);
+            },
+            _addQuestion: function(obj) {
+                var d = {};
+                d.widget = new LineWithActionsWidget({
+                    title:obj.title,
+                    userObj: obj,
+                    actions:{
+                        "Remove": lang.hitch(this,'_removeQuestion',d)
+                    }
+                });
+                d.widget.placeAt(this.surveyQuestions);
+            },
+            _removeQuestion: function(data,obj) {
+                data.widget.destroy();
             }
         });

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

@@ -9 +9 @@
         return declare('rft.ui.AccordionList',[_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin],{
             templateString: template,
-            store: null,
             idProperty: null,
             categoryProperty: null,
@@ -18 +17 @@
                 this._widgets = {};
             },
-            postCreate: function() {
-                this.idProperty = this.idProperty || this.store.idProperty;
-                this.refresh(true);
-            },
-            refresh: function(initial) {
-                Deferred.when( this.store.query() )
-                .then(lang.hitch(this,'_addItems',initial));
-            },
-            _addItems: function(initial,items) {
-                var newWidgets = {};
-                array.forEach(this._widgets,domConstruct.destroy); // get everything out of the dom
-                array.forEach(items,lang.hitch(this,function(item){
-                    var widget = this._getWidgetForItem(item);
-                    var id = this._getItemProperty(this.idProperty,item);
-                    var container = this._getContainerForItem(item);
-                    widget.placeAt(container.containerNode);
-                    newWidgets[id] = widget;
-                }));
-                var oldWidgets = array.filter(this.items,function(widget){
-                    return array.indexOf(newWidgets,widget) < 0;
+            setItems: function(items) {
+                var obsoleteWidgets = array.filter(this.widgets,function(item){
+                    return array.indexOf(items,item) < 0;
                 });
-                array.forEach(oldWidgets,function(widget){
+                array.forEach(obsoleteWidgets,function(widget){
                     widget.destroy();
                 });
-                this._widgets = newWidgets; // overwrite, releasing any non-existing items
-                initial && this.accordion.selectChild(true);
+                array.forEach(this._widgets,domConstruct.destroy); // get everything out of the dom
+                array.forEach(items,lang.hitch(this,"_addItem"));
                 this._cleanupEmptyContainers();
+            },
+            addItems: function(items) {
+                array.forEach(items,lang.hitch(this,"_addItem"));
+                this._cleanupEmptyContainers();
+            },
+            addItem: function(item) {
+                this._addItem(item);
+                this._cleanupEmptyContainers();
+            },
+            _addItem: function(item) {
+                var widget = this._getWidgetForItem(item);
+                var container = this._getContainerForItem(item);
+                widget.placeAt(container.containerNode);
+            },
+            removeItem: function(item) {
+                var id = this._getItemProperty(this.idProperty,item);
+                var widget = this._getWidgetForItem(item);
+                widget && widget.destroy();
+                delete this._widgets[id];
             },
             _getWidgetForItem: function(item) {

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

@@ -1 @@
-define(['dojo/_base/declare','dojo/_base/lang','dijit/form/Button',
+define(['dojo/_base/declare','dojo/_base/lang','dojo/on','dojo/dom','dijit/form/Button',
     'dijit/_WidgetBase','dijit/_TemplatedMixin','dijit/_WidgetsInTemplateMixin',
     'dojo/text!./templates/LineWithActionsWidget.html'],
-    function(declare,lang,Button,_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,templateString){
+    function(declare,lang,on,dom,Button,_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,templateString){
         return declare('rft.ui.LineWithActionsWidget',[_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin],{
             templateString: templateString,
+            baseClass: 'rftLineWithButtons',
             title: '',
             userObject: null,
             actions: {},
+            postCreate: function() {
+                dom.setSelectable(this.domNode, false);
+                on(this.titleNode,'click',lang.hitch(this,'_onClick'));
+            },
             startup: function() {
                 this.inherited(arguments);
@@ -17 +22 @@
                     new Button({
                         label: action,
+                        //iconClass: 'dijitIconSearch',
+                        //showLabel: false,
                         onClick: lang.hitch(this,function(){
                             this.actions[action](this.userObject);
                         })
-                    }).placeAt(this.actionBar);
+                    }).placeAt(this.buttonsNode);
                 }
             },
             refresh: function() {
                 this.titleNode.innerHTML = this.title;
-            }
+            },
+            _onClick: function(e){
+                var preventDefault = this.onClick(e) === false;
+                if(preventDefault){
+                    e.preventDefault();
+                }
+                return !preventDefault;
+            },
+            onClick: function(e) {}
         });
     });

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

@@ -1 @@
-<div>
-    <span data-dojo-attach-point="actionBar"></span>
-    <span data-dojo-attach-point="titleNode"></span>
+<div class="${baseClass}">
+    <span class="${baseClass}Title" data-dojo-attach-point="titleNode"></span>
+    <span class="${baseClass}Buttons" data-dojo-attach-point="buttonsNode"></span>
 </div>