Changeset 461


Ignore:
Timestamp:
06/10/13 01:07:16 (12 years ago)
Author:
hendrikvanantwerpen
Message:

Save answers, improved response page and question widgets.

  • Warn if _ComplexValueMixin is not pout on a form element, to prevent 'name' collisions. Changed all depending widgets to <form>'s.
  • Fixed names for question widgets to actually save answers.
  • Fixed and improved response page.
  • Fixed names in MultipleChoice? widget, which behaves different for radio and check.
Location:
Dev/trunk/src/client/qed-client
Files:
23 edited

Legend:

Unmodified
Added
Removed

  • Dev/trunk/src/client/qed-client/model/widgets/SurveyRenderWidget.js

    r457 r461  
    2222            this.survey = survey;
    2323            var f = new QuestionWidgetFactory();
    24             array.forEach(Survey.Questions.get(this.survey),function(question){
    25                 array.forEach(question.content || [],function(item,index){
     24            array.forEach(Survey.Questions.get(this.survey),function(question,question_index){
     25                array.forEach(question.content || [], function(item,item_index){
    2626                    // The dot causes values to be grouped in an object!
    27                     item.code = question.code.toString()+'.'+index.toString();
    2827                    var w = f.createViewWidget(item);
    2928                    if ( w !== null ) {
     29                        w.name = question_index.toString()+'/'+question.code.toString()+'.'+item_index.toString();
    3030                        w.placeAt(this.domNode);
    3131                    }

  • Dev/trunk/src/client/qed-client/model/widgets/questions/MultipleChoiceInputWidget.js

    r443 r461  
    1010    return declare([_ComplexValueWidget],{
    1111        templateString: template,
     12        allowMultiple: false,
    1213        startup: function() {
    1314            if ( this._started ) { return; }
    … …  
    2021                }, this.domNode, "last");
    2122                var input = new Ctor({
    22                     name: index.toString()
     23                    name: this.allowMultiple === true ? index.toString() : 'choice',
     24                    value: item.text
    2325                }).placeAt(div);
    2426                var label = domConstruct.create("label",{
     27                    for: input.id,
    2528                    innerHTML: item.text
    2629                }, div);
    2730            }, this);
     31        },
     32        _getValueAttr: function() {
     33            var value = this.inherited(arguments);
     34            if ( this.allowMultiple === true ) {
     35                return value;
     36            } else {
     37                return value.choice;
     38            }
     39        },
     40        _setValueAttr: function(value) {
     41            var inherited = this.getInherited(arguments);
     42            if ( this.allowMultiple === true ) {
     43                inherited.call(this,value);
     44            } else {
     45                inherited.call(this,{choice:value});
     46            }
    2847        }
    2948    });

  • Dev/trunk/src/client/qed-client/model/widgets/questions/TextInputWidget.js

    r443 r461  
    1414        },
    1515        _getValueAttr: function() {
    16             return this.textBox.get('value');
     16            return this.textArea.get('value');
    1717        },
    1818        _setValueAttr: function(value) {
    19             return this.textBox.set('value', value);
     19            return this.textArea.set('value', value);
    2020        }
    2121    });

  • Dev/trunk/src/client/qed-client/model/widgets/questions/templates/HeaderConfigWidget.html

    r443 r461  
    1 <div>
     1<form>
    22  <label for="text" class="qedLabel">Text</label>
    33  <div class="qedField" data-dojo-type="dijit/form/TextBox" name="text"></div>
    4 </div>
     4</form>

  • Dev/trunk/src/client/qed-client/model/widgets/questions/templates/MultipleChoiceInputConfigRowWidget.html

    r443 r461  
    1 <div>
     1<form>
    22  <div data-dojo-type="dijit/form/ValidationTextBox" name="text" required="required" data-dojo-attach-point="textBox"></div><div data-dojo-type="dijit/form/Button" data-dojo-attach-event="onClick:onDestroy">X</div>
    3 </div>
     3</form>

  • Dev/trunk/src/client/qed-client/model/widgets/questions/templates/MultipleChoiceInputConfigWidget.html

    r443 r461  
    1 <div>
     1<form>
    22  <div>
    33    <label class="qedLabel" for="allowMultiple">Allow multiple</label>
    … …  
    77  </div>
    88  <div data-dojo-type="dijit/form/Button" data-dojo-attach-event="onClick:onAddItem">Add item</div>
    9 </div>
     9</form>

  • Dev/trunk/src/client/qed-client/model/widgets/questions/templates/MultipleChoiceInputWidget.html

    r443 r461  
    1 <div>
    2 </div>
     1<form>
     2</form>

  • Dev/trunk/src/client/qed-client/model/widgets/questions/templates/NumberInputConfigWidget.html

    r443 r461  
    1 <div>
     1<form>
    22  <div>
    33    <label class="qedLabel" for="text">Item/Question Text</label>
    … …  
    1616    <div class="qedField" data-dojo-type="dijit/form/NumberTextBox" data-dojo-props="constraints:{ min: 0 }" name="places"></div>
    1717  </div>
    18 </div>
     18</form>

  • Dev/trunk/src/client/qed-client/model/widgets/questions/templates/NumberInputWidget.html

    r443 r461  
    1 <div>
     1<form>
    22  <p>${text}</p>
    33  <div class="qedField" data-dojo-attach-point="numberBox" data-dojo-type="dijit/form/NumberTextBox" name="text"></div>
    4 </div>
     4</form>

  • Dev/trunk/src/client/qed-client/model/widgets/questions/templates/ScaleInputConfigWidget.html

    r443 r461  
    1 <div class="${baseClass}">
     1<form class="${baseClass}">
    22  <table>
    33    <thead>
    … …  
    4646    </tbody>
    4747  </table>
    48 </div>
     48</form>

  • Dev/trunk/src/client/qed-client/model/widgets/questions/templates/ScaleInputWidget.html

    r443 r461  
    1 <div class="${baseClass}">
     1<form class="${baseClass}">
    22  <table>
    33    <thead>
    … …  
    1212    </tbody>
    1313  </table>
    14 </div>
     14</form>

  • Dev/trunk/src/client/qed-client/model/widgets/questions/templates/StringInputConfigWidget.html

    r443 r461  
    1 <div>
     1<form>
    22  <label class="qedLabel" for="text">Item/Question Text</label>
    33  <div class="qedField" data-dojo-attach-point="textBox" data-dojo-type="dijit/form/TextBox" data-dojo-props="placeholder: 'Item/Question Text'" name="text"></div>
    4 </div>
     4</form>

  • Dev/trunk/src/client/qed-client/model/widgets/questions/templates/StringInputWidget.html

    r443 r461  
    1 <div>
     1<form>
    22  <p>${text}</p>
    33  <div data-dojo-attach-point="textBox" data-dojo-type="dijit/form/TextBox" name="text"></div>
    4 </div>
     4</form>

  • Dev/trunk/src/client/qed-client/model/widgets/questions/templates/TextConfigWidget.html

    r443 r461  
    1 <div>
     1<form>
    22  <label for="text" class="qedLabel">Text</label>
    33  <textarea class="qedField" data-dojo-type="dijit/form/Textarea" name="text"></textarea>
    4 </div>
     4</form>

  • Dev/trunk/src/client/qed-client/model/widgets/questions/templates/TextInputConfigWidget.html

    r443 r461  
    1 <div>
     1<form>
    22  <div>
    33    <label class="qedLabel" for="text">Item/Question Text</label>
    … …  
    88    <div class="qedField" data-dojo-type="dijit/form/NumberTextBox" data-dojo-props="placeholder: 'Maximum length', constraints: { min: 0 }" name="maxLength"></div>
    99  </div>
    10 </div>
     10</form>

  • Dev/trunk/src/client/qed-client/model/widgets/questions/templates/TextInputWidget.html

    r443 r461  
    1 <div>
     1<form>
    22  <p>${text}</p>
    33  <div class="qedField" data-dojo-attach-point="textArea" data-dojo-type="dijit/form/Textarea" name="text"></div>
    4 </div>
     4</form>

  • Dev/trunk/src/client/qed-client/model/widgets/templates/SurveyRenderWidget.html

    r457 r461  
    1 <div class="${baseClass}">
    2 </div>
     1<form class="${baseClass}">
     2</form>

  • Dev/trunk/src/client/qed-client/model/widgets/templates/SurveyRunWidget.html

    r457 r461  
    1 <div class="${baseClass}">
     1<form class="${baseClass}">
    22
    33    <div>
    … …  
    2424    </div>
    2525
    26 </div>
     26</form>

  • Dev/trunk/src/client/qed-client/model/widgets/templates/SurveyWidget.html

    r457 r461  
    1 <fieldset class="${baseClass}">
     1<form class="${baseClass}">
    22    <label for="title">Title</label>
    33    <input data-dojo-type="dijit/form/TextBox" name="title"/><br/>
    44    <label for="description">Description</label>
    55    <input data-dojo-type="dijit/form/Textarea" name="description"/><br/>
    6 </fieldset>
     6</form>

  • Dev/trunk/src/client/qed-client/pages/response.js

    r443 r461  
    11define([
     2    "../app/Content",
    23    "../app/Page",
    34    "../lib/async",
    … …  
    1314    "require",
    1415    "dojo/text!./templates/response.html"
    15 ], function(Page, async, Response, Survey, SurveyRun, store, declare, event, lang, all, when, require, template) {
     16], function(Content, Page, async, Response, Survey, SurveyRun, store, declare, event, lang, all, when, require, template) {
    1617    return declare([Page],{
    1718        contextRequire: require,
    … …  
    2425            if ( this._started ) { return; }
    2526            this.inherited(arguments);
    26             this._disableButtons();
     27            this._disableSubmit();
    2728            var surveyRunId = this.surveyRunId;
    2829            var responseId = this.options && this.options.id;
    2930            if ( surveyRunId && responseId ) {
    3031                this._loadSurveyAndResponse(surveyRunId,responseId)
    31                 .then(lang.hitch(this,"_enableButtons"));
     32                .then(lang.hitch(this, function() {
     33                    if ( this.response.publicationDate ) {
     34                        this._showInfo("<div>You already submitted your survey and cannot change it anymore. You can still view your answers here.</div>");
     35                        this._disableSubmit();
     36                    } else {
     37                        this._enableSubmit();
     38                    }
     39                }), function() {
     40                    this._showInfo("<div>The url seems to be incorrect, no survey found.</div>");
     41                });
    3242            } else {
    3343                throw new Error("No valid uid or survey passed!");
    … …  
    4353                }
    4454                this.titleNode.innerHTML = Survey.DisplayTitle.get(surveyRun.survey);
    45                 this.surveyWidget.set('survey',surveyRun.survey);
    46                 this.responseForm.set('value',this.response.answers || {});
     55                this.surveyWidget.set('survey', surveyRun.survey);
     56                this.surveyWidget.set('value', this.response.answers || {});
    4757            }));
    4858        },
    49         _enableButtons: function() {
     59        _enableSubmit: function() {
    5060            this.submitButton.set('disabled',false);
    5161            this.continueButton.set('disabled',false);
     62            this.surveyWidget.set('disabled', false);
    5263        },
    53         _disableButtons: function() {
     64        _disableSubmit: function() {
    5465            this.submitButton.set('disabled',true);
    5566            this.continueButton.set('disabled',true);
     67            this.surveyWidget.set('disabled', true);
     68        },
     69        _showInfo: function(html) {
     70            this.infoNode.innerHTML = html;
    5671        },
    5772        _getAnswersAndSaveResponse: function() {
    58             this.response.answers = this.responseForm.get('value');
    59             console.log(this.response);
    60             return store.put(this.response);
     73            var answers = this.surveyWidget.get('value');
     74            this.response.answers = answers;
     75            return store.put(this.response).then(function(){
     76                Content.notify("Your response is saved.");
     77            }, function(err){
     78                Content.notify(err,'error');
     79            });
    6180        },
    6281        _onSubmit: function(e) {
    6382            this.response.publicationDate = store.timestamp();
    64             this._getAnswersAndSaveResponse();
    65             this.content.domNode.innerHTML = "<div>Thanks for filling in the survey.</div>";
     83            this._getAnswersAndSaveResponse()
     84            .then(function(){
     85                this._showInfo("<div>Thanks for filling in the survey. You cannot edit your answers anymore.</div>");
     86                this._disableSubmit();
     87            });
    6688            if ( e ) { event.stop(e); }
    6789            return false;
    6890        },
    6991        _onContinueLater: function(e) {
    70             this._getAnswersAndSaveResponse();
    71             this.content.domNode.innerHTML = "<div>To continue with this survey later, just save the URL in the location bar and revisit it later. Your answers will still be there.</div>";
     92            this._getAnswersAndSaveResponse()
     93            .then(lang.hitch(this,function(){
     94                this._showInfo("<div>To continue with this survey later, just save the URL in the location bar and revisit it later. Your answers will still be there.</div>");
     95            }));
    7296            if ( e ) { event.stop(e); }
    7397            return false;

  • Dev/trunk/src/client/qed-client/pages/templates/response.html

    r457 r461  
    66            <span class="headerText" data-dojo-attach-point="titleNode">Survey</span>
    77        </h2>
     8        <div data-dojo-attach-point="infoNode"></div>
    89    </div>
    910   
    1011    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" data-dojo-attach-point="content">
    11         <form data-dojo-type="dijit/form/Form" data-dojo-attach-point="responseForm"
    12               data-dojo-attach-event="onSubmit:_ignoreEvent" style="overflow: auto">
    13             <div data-dojo-type="../model/widgets/SurveyRenderWidget" data-dojo-attach-point="surveyWidget"></div>
    14         </form>
     12        <div name="answers" data-dojo-type="../model/widgets/SurveyRenderWidget" data-dojo-attach-point="surveyWidget"></div>
    1513    </div>
    1614   

  • Dev/trunk/src/client/qed-client/store/CouchStore.js

    r446 r461  
    1212        var reason = err.response &&
    1313                     err.response.data &&
    14                      json.fromJson(err.response.data).reason;
     14                     err.response.data.reason;
    1515        return reason || "Unknown error.";
    1616    }

  • Dev/trunk/src/client/qed-client/widgets/_ComplexValueMixin.js

    r443 r461  
    33    "dijit/form/_FormMixin",
    44    "dojo/_base/array",
    5     "dojo/_base/declare"
    6 ], function(_Container, _FormMixin, array, declare) {
     5    "dojo/_base/declare",
     6    "dojo/_base/event"
     7], function(_Container, _FormMixin, array, declare, event) {
    78    return declare([_Container,_FormMixin],{
    89        name: "",
    … …  
    1011        disabled: false,
    1112        readOnly: false,
     13        postCreate: function() {
     14            this.inherited(arguments);
     15            if ( this.domNode.tagName.toLowerCase() !== "form" ) {
     16                console.warn("Not scoping a _ComplexValueMixin in a form element can cause name clashes. E.g. radio buttons might stop working correctly. It is recommended to use <form> as the root element in your template for "+this.declaredClass+".");
     17            }
     18        },
    1219        _setDisabledAttr: function(value) {
    1320            this._set("disabled", value);
    … …  
    2734                children[0].focus();
    2835            }
     36        },
     37        onSubmit: function(e) {
     38            // since this widget is used to create more complex
     39            // widgets within other forms, the onSubmit must either be
     40            // ignored or propagated, but not handled here.
     41            if ( e ) { event.stop(e); }
     42            return false;
     43        },
     44        _onSubmit: function(e) {
     45            // since this widget is used to create more complex
     46            // widgets within other forms, the onSubmit must either be
     47            // ignored or propagated, but not handled here.
     48            if ( e ) { event.stop(e); }
     49            return false;
    2950        }
    3051    });
Note: See TracChangeset for help on using the changeset viewer.