replaced ember-form by ember-easyForm

ember-easyForm seems to have better support for i18n
also seems to be more stable
This commit is contained in:
jelhan 2014-10-18 21:07:21 +02:00
parent 7ce3fc6a92
commit 18a77d1523
10 changed files with 91 additions and 98 deletions

View file

@ -18,7 +18,7 @@ export default Ember.ObjectController.extend(Ember.Validations.Mixin, {
})
];
}.property(),
validations: {
pollType: {
presence: true,

View file

@ -1,47 +1,36 @@
export default Ember.ObjectController.extend(Ember.Validations.Mixin, {
actions: {
/*
* handles submit of option input for poll of type MakeAPoll
*/
submitMakeAPoll: function() {
var options = this.get('model.options'),
submit: function() {
var pollType = this.get('pollType');
if (pollType === 'MakeAPoll') {
var options = this.get('model.options'),
newOptions = [];
// remove options without value
options.forEach(function(option) {
if (option.title !== '') {
newOptions.pushObject(option);
}
});
// remove options without value
options.forEach(function(option) {
if (option.title !== '') {
newOptions.pushObject(option);
}
});
// set updated options
//
// we have to hardly set new options even if they wasn't changed to
// trigger computed property; push on array doesn't trigger computed
// property to recalculate
this.set('model.options', newOptions);
// tricker save action
this.send('save');
},
/*
* handles submit of selected dates for poll of type MakeAPoll
*/
submitFindADate: function() {
// tricker save action
this.send('save');
},
save: function(){
// redirect to crate/options-datetime route if datetime is true
// otherwise redirect directly to create/settings
if (this.get('isDateTime')) {
this.transitionToRoute('create.options-datetime');
// set updated options
//
// we have to hardly set new options even if they wasn't changed to
// trigger computed property; push on array doesn't trigger computed
// property to recalculate
this.set('model.options', newOptions);
this.transitionToRoute('create.settings');
}
else {
this.transitionToRoute('create.settings');
}
if (this.get('isDateTime')) {
this.transitionToRoute('create.options-datetime');
}
else {
this.transitionToRoute('create.settings');
}
}
}
},

View file

@ -54,7 +54,7 @@
<script src="/vendor/ic-ajax/dist/named-amd/main.js"></script>
<script src="/vendor/ember-load-initializers/ember-load-initializers.js"></script>
<script src="/vendor/ember-validations/index.js"></script>
<script src="/vendor/ember-forms/dist/ember_forms.js"></script>
<script src="/vendor/ember-easyForm/index.js"></script>
<script src="/vendor/sjcl/sjcl.js"></script>
<script src="/vendor/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script src="/vendor/moment/moment.js"></script>

View file

@ -1,13 +1,12 @@
<div class="box">
{{#em-form model=controller submit_button=false}}
{{em-select
property="pollType"
label="poll type"
prompt="-select-"
contentBinding="pollTypes"
optionValuePath="content.id"
optionLabelPath="content.label"
prompt="Please select a poll type"}}
{{em-form-submit text="next"}}
{{/em-form}}
{{#form-for controller}}
{{input pollType as='select'
collection="pollTypes"
value="pollType"
optionValuePath="content.id"
optionLabelPath="content.label"
prompt="Please select a poll type"
}}
{{submit 'next'}}
{{/form-for}}
</div>

View file

@ -1,14 +1,14 @@
<div class="box">
{{#em-form model=controller submit_button=false}}
{{em-input
property="title"
label="title"
placeholder="Enter a title..."}}
{{em-text
property="description"
label="description"
placeholder="Enter a description if you like..."
rows=4}}
{{em-form-submit text="next"}}
{{/em-form}}
{{#form-for controller}}
{{input title
label="title"
placeholder="Enter a title..."
}}
{{input description as='text'
label="description"
placeholder="Enter a description if you like..."
rows=4
}}
{{submit 'next'}}
{{/form-for}}
</div>

View file

@ -19,8 +19,10 @@
</tbody>
</table>
{{em-form-control-help text="Hours and minutes have to be seperated by a color (e.g. 12:30).
You have to enter atleast one valid time for each date."}}
<p class="help-text">
Hours and minutes have to be seperated by a color (e.g. 12:30).
You have to enter atleast one valid time for each date.
</p>
<div class="form-group">
<button {{action "moreTimes"}} class="btn btn-default"> more inputs for time </button>

View file

@ -5,14 +5,16 @@
<label class="control-label">options</label>
<fieldset>
{{#each option in options}}
{{view Ember.TextField valueBinding="option.title" class="form-control"}}<br/>
{{#form-for option}}
{{input option.title label=" "}}<br/>
{{/form-for}}
{{/each}}
{{em-form-control-help text="You have to enter at least two options."}}
<p class="help-text">You have to enter at least two options.</p>
</fieldset>
</div>
<div class="form-group">
<button {{action "moreOptions" target="view"}} class="btn btn-default"> add another option </button>
<button {{action "submitMakeAPoll"}} class="btn btn-default" {{bind-attr disabled=isNotValid}}> next </button>
<button {{action "submit"}} class="btn btn-default" {{bind-attr disabled=isNotValid}}> next </button>
</div>
</form>
{{/if}}
@ -20,15 +22,14 @@
{{#if isFindADate}}
<div id="datepicker">
{{view 'datepicker'}}
{{em-form-control-help text="You have to select at least two dates."}}
<p class="help-text">You have to select at least two dates."</p>
{{#em-form model=controller submit_button=false}}
{{em-checkbox label="Define times?" property="isDateTime"}}
{{/em-form}}
<div class="form-group">
<button {{action "submitFindADate"}} class="btn btn-default" {{bind-attr disabled=isNotValid}}> next </button>
</div>
{{#form-for controller}}
{{input isDateTime as='checkbox'
label="Define times?"
}}
{{submit 'next'}}
{{/form-for}}
</div>
{{/if}}
</div>

View file

@ -1,15 +1,19 @@
<div class="box">
{{#em-form model=controller submit_button=false}}
{{em-select
property="answerType"
label="available answers"
prompt="-select-"
contentBinding="answerTypes"
{{#form-for controller}}
{{input answerType as='select'
collection="answerTypes"
value="answerType"
optionValuePath="content.id"
optionLabelPath="content.label"
prompt="Please define available answers"}}
{{em-checkbox label="Allow anonym participation?" property="anonymousUser"}}
{{em-checkbox label="Force an answer?" property="forceAnswer"}}
{{em-form-submit text="save"}}
{{/em-form}}
label="available answers"
prompt="Please define available answers"
}}
{{input anonymousUser as='checkbox'
label="Allow anonym participation?"
}}
{{input forceAnswer as='checkbox'
label="Force an answer?"
}}
{{submit 'save'}}
{{/form-for}}
</div>

View file

@ -56,16 +56,18 @@
handlebar each helper
}}
<td>
{{#em-form model=controller submit_button=false}}
{{em-form-label text="name" extraClass="sr-only"}}
{{em-input property="newUserName" placeholder="Enter your name..."}}
{{/em-form}}
{{#form-for controller}}
{{input newUserName
label=" "
placeholder="Enter your name..."
}}
{{/form-for}}
</td>
{{#each newUserSelection in controller.newUserSelections}}
<td>
{{#em-form model=newUserSelection submit_button=false}}
{{#form-for newUserSelection}}
{{#if isFreeText}}
{{em-input property="value"}}
{{input value label=" "}}
{{else}}
{{#each answer in answers}}
<div class="radio">
@ -75,7 +77,7 @@
</div>
{{/each}}
{{/if}}
{{/em-form}}
{{/form-for}}
</td>
{{/each}}
<td>

View file

@ -17,13 +17,9 @@
"ember-validations": "http://builds.dockyard.com.s3.amazonaws.com/ember-validations/tags/v1.0.0/ember-validations.js",
"bootstrap": "~3.2.0",
"bootstrap-datepicker": "~1.3.0",
"ember-forms": "f6456c334a07950365ecfebd087596dedc1bdec5",
"ember-easyForm": "http://builds.dockyard.com/ember-easyForm/latest/ember-easyForm.js",
"floatThead": "~1.2.8",
"webshim": "~1.15.3",
"modernizr": "~2.8.3"
},
"resolutions": {
"ember": "~1.7.0",
"jquery": "~1.11.1"
}
}