Commit 74b75d8c

mo khan <mo@mokhan.ca>
2014-06-27 03:39:12
update the new cake form to use an item view and add error handling logic.
1 parent 1c96046
Changed files (5)
app
assets
app/assets/javascripts/backbone/models/cake.js.coffee
@@ -6,6 +6,9 @@ class Cake.Models.Cake extends Backbone.Model
     watermark: null
     story: null
 
+  validate: (attributes, options) ->
+    return "Name can't be blank" unless attributes.name && attributes.name.trim()
+    return "Category can't be blank" unless attributes.category_id
 
 class Cake.Collections.CakesCollection extends Backbone.Collection
   model: Cake.Models.Cake
app/assets/javascripts/backbone/templates/cakes/index.jst.ejs
@@ -1,11 +0,0 @@
-<div class="row">
-  <div class="span12">
-    <a href="#/new" class="btn pull-right">Upload Cake</a>
-    <% if ( _.any(cakes) === false) { %>
-      <p>You haven't uploaded any cakes yet. <a href="#/new" class="btn pull-right">Get Started</a>.</p>
-    <% } %>
-  </div>
-  <div class="span12">
-    <div class="thumbnails"></div>
-  </div>
-</div>
app/assets/javascripts/backbone/templates/cakes/new.jst.ejs
@@ -5,7 +5,7 @@
     <form id="new-cake" name="cake" class="form-horizontal">
       <fieldset>
         <div class="control-group">
-          <label class="control-label" for="cake_name">Name</label>
+          <label class="control-label" for="cake_name">Name*</label>
           <div class="controls">
             <input class="input-xxlarge" id="cake_name" name="name" type="text">
           </div>
@@ -50,7 +50,7 @@
           </div>
         </div>
         <div class="form-actions">
-          <button type="submit" class="btn btn-primary">NEXT STEP</button>
+          <button id='save-button' type="submit" class="btn btn-primary">NEXT STEP</button>
           <a href="#/" class="btn">Cancel</a>
         </div>
       </fieldset>
app/assets/javascripts/backbone/views/cakes/new_view.js.coffee
@@ -1,45 +1,59 @@
 Cake.Views.Cakes ||= {}
 
-class Cake.Views.Cakes.NewView extends Backbone.View
+class Cake.Views.Cakes.NewView extends Marionette.ItemView
   template: JST["backbone/templates/cakes/new"]
+  ui:
+    name: "#cake_name"
+    watermark: "#cake_watermark"
+    description: "#cake_story"
+    category: "#cake_category_id"
+    tags: "#cake_tags"
+    is_restricted: "#cake_is_restricted"
+    save_button: '#save-button'
+
+  modelEvents:
+    'invalid': 'displayError'
 
   events:
+    "change input": "refreshStatus"
+    "change select": "refreshStatus"
     "submit #new-cake": "save"
 
   constructor: (options) ->
-    super(options)
-    @model = new @collection.model()
-
-    @model.bind("change:errors", () =>
-      this.render()
-    )
+    super(_.extend(options, { model: new options.collection.model() }))
 
   save: (e) ->
     e.preventDefault()
     e.stopPropagation()
-
-    @model.unset("errors")
-
-    @collection.create(@model.toJSON(),
-      success: (cake) =>
-        @model = cake
-        window.location.hash = "/cakes/#{@model.id}/photos/new"
-
-      error: (cake, jqXHR) =>
-        #@model.set({errors: $.parseJSON(jqXHR.responseText)})
-        error = new Cake.Views.ErrorView
-          el: @$('form#new-cake'),
-          attributesWithErrors: $.parseJSON(jqXHR.responseText)
-        error.render()
+    @collection.create(@model,
+      success: @savedSuccessfully
+      error: @couldNotSave
     )
 
-  render: ->
-    $(@el).html(@template(@model.toJSON()))
-    @loadTags()
-    this.$("form").backboneLink(@model)
-    return this
-
-  loadTags: () ->
+  onRender: ->
+    @$("#cake_category_id").val($("#cake_category_id option:first").val())
     @$('#cake_tags').tagit({ availableTags: ALL_TAGS })
-    $('.tooltip-item').tooltip()
-
+    @$('.tooltip-item').tooltip()
+
+  savedSuccessfully: (cake) ->
+    window.location.hash = "/cakes/#{cake.id}/photos/new"
+
+  couldNotSave: (cake, xhr) ->
+    error = new Cake.Views.ErrorView
+      el: @$('form#new-cake'),
+      attributesWithErrors: $.parseJSON(xhr.responseText)
+    error.render()
+
+  refreshStatus: ->
+    console.log('refreshing.')
+    @ui.save_button.removeAttr('disabled')
+    @model.set('name', @ui.name.val())
+    @model.set('watermark', @ui.watermark.val())
+    @model.set('story', @ui.description.val())
+    @model.set('category_id', @ui.category.val())
+    @model.set('tags', @ui.tags.val())
+    @model.set('is_restricted', @ui.is_restricted.val())
+    @model.isValid()
+
+  displayError: (model, error) ->
+    @ui.save_button.attr('disabled', 'disabled')
app/assets/javascripts/backbone/views/error_view.js.coffee
@@ -2,7 +2,7 @@ Cake.Views.Cakes ||= {}
 
 class Cake.Views.ErrorView extends Backbone.View
   initialize: (options) ->
-    @attributesWithErrors = @options.attributesWithErrors
+    @attributesWithErrors = options.attributesWithErrors
     _.bindAll(@, "clearOldErrors", "renderErrors", "renderError", "fieldFor")
 
   render: () ->
@@ -24,4 +24,4 @@ class Cake.Views.ErrorView extends Backbone.View
     field.addClass("error")
 
   fieldFor: (attribute) ->
-    @$("input[id*='_#{attribute}']").parent()
+    @$("#cake_#{attribute}").parent()