Changeset 275 for Dev/branches/rest-dojo-ui/client

Timestamp:

02/21/12 13:03:21 (13 years ago)

Author:

hendrikvanantwerpen

Message:

• [Server] Added PUT support to API.
• [Client] Extended questions page with Accordion and list with actions on each row.

Location:

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

Files:

• pages/questions.html (modified) (1 diff)
• pages/questions.js (modified) (4 diffs)
• run.js (modified) (1 diff)
• ui/LineWithActionsWidget.html (moved) (moved from Dev/branches/rest-dojo-ui/client/rft/ui/QuestionWidget.html) (1 diff)
• ui/LineWithActionsWidget.js (moved) (moved from Dev/branches/rest-dojo-ui/client/rft/ui/QuestionWidget.js) (1 diff)

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

@@ -4 +4 @@
     <div data-dojo-type="dijit.layout.AccordionContainer" data-dojo-props="doLayout: false" style="width: 100%; height: 100%;" data-rft-attach-point="accordion">
     </div>
-    <div data-dojo-type="dijit.Dialog" title="Question" data-rft-attach-point="questionDialog" style="width: 400px; height: 300px;">
+    <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">
             <fieldset>

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

@@ -1 +1 @@
 define(['dojo/_base/declare','dojo/_base/lang','dojo/_base/array','dojo/_base/event',
     'dojo/_base/Deferred','dojo/store/JsonRest','dijit/layout/ContentPane',
-    'rft/ui/_Page','rft/ui/QuestionWidget'],
-    function(declare,lang,array,event,Deferred,JsonRest,ContentPane,_Page,QuestionWidget) {
+    'rft/ui/_Page','rft/ui/LineWithActionsWidget'],
+    function(declare,lang,array,event,Deferred,JsonRest,ContentPane,_Page,LineWithActionsWidget) {
         return declare('rft.pages.questions',[_Page],{
             constructor: function() {
@@ -26 +26 @@
                 if ( !categoryContainer ) {
                     var ac = new ContentPane({
-                        title:category
+                        title:category,
+                        doLayout: false
                     });
                     categoryContainer = this.containers[category] = {
@@ -40 +41 @@
                 var question = this.questions[uid];
                 if ( !question ) {
-                    var qw = new QuestionWidget({
-                        question: q
+                    var qw = new LineWithActionsWidget({
+                        title: q.title,
+                        userObject: q,
+                        actions: {
+                            'Edit': lang.hitch(this,'_editQuestion')
+                        }
                     });
                     qw.startup();
@@ -48 +53 @@
                         widget: qw
                     }
+                } else {
+                    // update info
+                    question.question = q;
+                    question.widget.title = q.title;
+                    question.widget.userObject = q;
+                    question.widget.refresh();
                 }
                 var container = this._getContainerForQuestion(q);
                 question.widget.placeAt(container.containerNode);
-                container.resize();
             },
             onNewQuestion: function() {
                 Deferred.when( this._store.add({}) )
                 .then(lang.hitch(this,function(question){
-                    this.questionForm.reset();
-                    this.questionForm.set('value',question);
-                    this.questionDialog.show();
+                    this._editQuestion(question);
                 }));
+            },
+            _editQuestion: function(question) {
+                this.questionForm.reset();
+                this.questionForm.set('value',question);
+                this.questionDialog.show();
             },
             onSaveQuestion: function(evt) {

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

@@ -16 +16 @@
     'rft/ui/MenuBarLink',
     'rft/ui/MenuLink',
-    'rft/ui/QuestionWidget',
+    'rft/ui/LineWithActionsWidget',
     'rft/pages/questions' // could this be done dynamically?
 ]);

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

@@ -1 +1 @@
 <div>
-    <h2>Question</h2>
-    <table>
-        <tr><td>Code</td><td data-dojo-attach-point="codeField"></td></tr>
-        <tr><td>Title</td><td data-dojo-attach-point="titleField"></td></tr>
-        <tr><td>Description</td><td data-dojo-attach-point="descriptionField"></td></tr>
-    </table>
+    <span data-dojo-attach-point="actionBar"></span>
+    <span data-dojo-attach-point="titleNode"></span>
 </div>

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

@@ -1 @@
-define(['dojo/_base/declare','dijit/_WidgetBase','dijit/_TemplatedMixin','dijit/_WidgetsInTemplateMixin','dojo/text!rft/ui/QuestionWidget.html'],
-    function(declare,_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,templateString){
-        return declare('rft.ui.QuestionWidget',[_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin],{
+define(['dojo/_base/declare','dojo/_base/lang','dijit/form/Button','dijit/_WidgetBase','dijit/_TemplatedMixin','dijit/_WidgetsInTemplateMixin','dojo/text!rft/ui/LineWithActionsWidget.html'],
+    function(declare,lang,Button,_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,templateString){
+        return declare('rft.ui.LineWithActionsWidget',[_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin],{
             templateString: templateString,
-            question: null,
+            title: '',
+            userObject: null,
+            actions: {},
             startup: function() {
-                if ( this.question ) {
-                    this.codeField.innerHTML = this.question.code;
-                    this.titleField.innerHTML = this.question.title;
-                    this.descriptionField.innerHTML = this.question.description;
+                this.inherited(arguments);
+                this._setupActions();
+                this.refresh();
+            },
+            _setupActions: function() {
+                for (var action in this.actions) {
+                    new Button({
+                        label: action,
+                        onClick: lang.hitch(this,function(){
+                            this.actions[action](this.userObject);
+                        })
+                    }).placeAt(this.actionBar);
                 }
+            },
+            refresh: function() {
+                this.titleNode.innerHTML = this.title;
             }
         });