Commit 0def269

mo khan <mo@mokhan.ca>
2014-11-10 04:41:35
show indicators when there are unsaved changes and transition back to show page when saved.
1 parent 4a17ca5
app/assets/javascripts/controllers/video_controller.js.coffee
@@ -1,2 +1,4 @@
-App.VideoController = Ember.ObjectController.extend()
+App.VideoController = Ember.ObjectController.extend(
+  isEditing: false
+)
 
app/assets/javascripts/controllers/video_edit_controller.js.coffee
@@ -1,4 +1,15 @@
 App.VideoEditController = Ember.ObjectController.extend
   actions:
     saveChanges: ->
-      @get('model').save() if @get('model.isDirty')
+      if @get('model.isDirty')
+        @get('model').save().then => @transitionToRoute('video')
+      else
+        @transitionToRoute('video')
+
+    cancel: -> 
+      @get('model').rollback()
+      @transitionToRoute('video')
+
+  showUnsavedMessage: (->
+    @get('isDirty') and !@get('isSaving')
+  ).property('isDirty', 'isSaving')
app/assets/javascripts/routes/video_edit_route.js.coffee
@@ -0,0 +1,3 @@
+App.VideoEditRoute = Ember.Route.extend
+  activate: -> @controllerFor('video').set('isEditing', true)
+  deactivate: -> @controllerFor('video').set('isEditing', false)
app/assets/javascripts/templates/video/edit.hbs
@@ -1,12 +1,19 @@
-<h2>Edit</h2>
+<h2><small>Edit</small> {{model.title}}</h2>
 
 <p>
   <label for="">Title</label>
   <br />
-  <input type="text" name="" id="" value="{{model.title}}" />
+  {{view Ember.TextField value=model.title}}
 </p>
 <p>
   {{ view Ember.TextArea value=model.description }}
 </p>
 
 <input type="submit" value="Save" {{action 'saveChanges'}} />
+<a href="#"{{action 'cancel'}}>cancel</a>
+{{#if showUnsavedMessage}}
+  <p class="unsaved">unsaved changes</p>
+{{/if}}
+{{#if isSaving}}
+  <p class="saving">saving...</p>
+{{/if}}
app/assets/javascripts/templates/video.hbs
@@ -1,5 +1,7 @@
-<h3>Video {{title}}</h3>
-{{#link-to 'video.edit' this.id}}edit{{/link-to}}
-<p>{{description}}</p>
-<a href="{{uri}}">{{uri}}</a>
+{{#unless isEditing}}
+  <h3>Video {{title}}</h3>
+  {{#link-to 'video.edit' this}}edit{{/link-to}}
+  <p>{{description}}</p>
+  <a href="{{uri}}">{{uri}}</a>
+{{/unless}}
 {{outlet}}