Merge pull request #60 from startersacademy/issue43_instructor

Issue43 instructor

Author: tbashor

client/spa/js/instructor/editInstructor.html

@@ -0,0 +1,20 @@
+<style type="text/css">
+.main {
+  margin: auto;
+  max-width: 980px;
+}
+input {
+  margin: 0 0 1em 0;
+}
+</style>
+<section id="instructor">
+  <div class="main container">
+    <form action="#">
+      <input class="textfield" id="firstName" value="<%- firstName %>" /><br/>
+      <input class="textfield" id="lastName" value="<%- lastName %>" /><br/>
+      <input class="textfield" id="skills" value="<%- skills %>" /><br/>
+      <button class="i-save">Save</button>
+      <button class="i-cancel">Cancel</button>
+    </form>
+  </div>
+</section>

client/spa/js/instructor/instructor.controller.js

@@ -0,0 +1,59 @@
+'use strict';
+
+var Backbone = require('../vendor/index').Backbone;
+var $ = require('../vendor/index').$;
+var Model = require('./instructor.model');
+var View = require('./instructor.view');
+
+module.exports = Backbone.Controller.extend({
+  routes: {
+    'instructors/:id': 'showInstructor'
+  },
+  initialize: function(){
+    this.options.container = this.options.container || 'body';
+    this.model = new Model();
+    this.view = new View({model: this.model});
+  },
+  showInstructor: function(instructorId, cb){
+    this.fetchModel(instructorId, function(err){
+      var view;
+
+      this.remove();
+      this.view = new View({model: this.model});
+
+      if (err){
+        view = this.renderError();
+      } else {
+        view = this.renderView();
+      }
+      if (cb){
+        cb(err, view);
+      }
+
+    }.bind(this));
+  },
+  fetchModel: function(instructorId, cb){
+    this.model.set({id: instructorId});
+    this.model.fetch({
+      success: function(model, response, options){
+        //console.log(model);
+        cb(null, model);
+      },
+      error: function(model, response, options){
+        //console.error(response);
+        cb(response, model);
+      }
+    });
+  },
+  renderToContainer: function(view){
+    return $(this.options.container).html(view);
+  },
+  renderView: function(){
+    this.renderToContainer(this.view.render().$el);
+    return this.view;
+  },
+  renderError: function(){
+    return this.renderToContainer(
+      '<p>There was a problem rendering this instructor</p>');
+  }
+});

client/spa/js/instructor/instructor.html

@@ -0,0 +1,21 @@
+<style type="text/css">
+.main {
+  margin: auto;
+  max-width: 980px;
+}
+#result {
+  padding: 1em 0;
+}
+.success {
+  color: green;
+}
+</style>
+<section id="instructor">
+  <div class="main container">
+    <h1><%- firstName %> <%- lastName %></h1>
+    <p><%- skills %></p>
+    <button class="i-edit">Edit</button>
+    <button class="i-delete">Delete</button>
+    <div id="result"></div>
+  </div>
+</section>

client/spa/js/instructor/instructor.model.js

@@ -0,0 +1,29 @@
+'use strict';
+
+var Backbone = require('../vendor/index').Backbone;
+module.exports = Backbone.Model.extend({
+  defaults: {
+    firstName: '',
+    lastName: '',
+    skills: ''
+  },
+  urlRoot: '/api/instructors',
+  initialize: function(){
+    this.on('change', function(){
+      this.trigger('foo', 'bar');
+    });
+  },
+  validate: function(attrs){
+    var errors = [];
+    if (!attrs.firstName){
+      errors.push('firstName cannot be empty');
+    }
+    if (!attrs.lastName){
+      errors.push('lastName cannot be empty');
+    }
+    if (!attrs.skills){
+      errors.push('skills cannot be empty');
+    }
+    return errors;
+  }
+});

client/spa/js/instructor/instructor.view.js

@@ -0,0 +1,64 @@
+'use strict';
+var Backbone = require('../vendor/index').Backbone;
+var _ = require('../vendor/index')._;
+var $ = require('../vendor/index').$;
+var fs = require('fs'); //will be replaced by brfs in the browser
+// readFileSync will be evaluated statically so errors can't be caught
+var template = fs.readFileSync(__dirname + '/instructor.html', 'utf8');
+var editTemplate = fs.readFileSync(__dirname + '/editInstructor.html', 'utf8');
+
+module.exports = Backbone.View.extend({
+  className: 'instructor',
+  template: _.template(template),
+  editTemplate: _.template(editTemplate),
+  events: {
+    'click .i-delete': 'destroy',
+    'click .i-edit': 'edit',
+    'click .i-save': 'save',
+    'click .i-cancel': 'cancel'
+  },
+  initialize: function(){
+    this.listenTo(this.model, 'destroy', this.remove);
+    this.listenTo(this.model, 'change', this.render);
+  },
+  render: function(){
+    var context = this.model.toJSON();
+    this.$el.html(this.template(context));
+
+    return this;
+  },
+  destroy: function(){
+    this.model.destroy();
+  },
+  edit: function(e){
+    var context = this.model.toJSON();
+    this.$el.html(this.editTemplate(context));
+
+    return this;
+  },
+  save: function(e) {
+    e.preventDefault(); // if there's no changes, do not do anything
+
+    var formData = {
+      firstName: this.$('#firstName').val().trim(),
+      lastName: this.$('#lastName').val().trim(),
+      skills: this.$('#skills').val().trim()
+    };
+    var validate = {
+      success: function() {
+        $('#result').addClass('success')
+                    .html('Successfully updated instructor')
+                    .fadeIn().delay(4000).fadeOut();
+      },
+      error: function(model, error) {
+
+      }
+    };
+
+    this.model.save(formData, validate);
+  },
+  cancel: function(e) {
+    e.preventDefault();  // prevent event bubbling
+    this.render();
+  }
+});

client/spa/js/instructor/spec/instructor.controller.spec.js

@@ -0,0 +1,95 @@
+'use strict';
+
+/*
+global jasmine, describe, it, expect, beforeEach, afterEach, xdescribe, xit,
+spyOn
+*/
+// Get the code you want to test
+var Controller = require('../instructor.controller');
+var $ = require('jquery');
+var matchers = require('jasmine-jquery-matchers');
+// Test suite
+console.log('test instructor.controller');
+describe('Instructor controller', function(){
+  var controller;
+
+  beforeEach(function(){
+    controller = new Controller();
+  });
+
+  it('can be created', function(){
+    expect(controller).toBeDefined();
+  });
+
+  describe('when it is created', function(){
+
+    it('has the expected routes', function(){
+      expect(controller.routes).toEqual(jasmine.objectContaining({
+        'instructors/:id': 'showInstructor'
+      }));
+    });
+
+    it('without a container option, uses body as the container', function(){
+      expect(controller.options.container).toEqual('body');
+    });
+
+    it('with a container option, uses specified container', function(){
+      var ctrl = new Controller({container: '.newcontainer'});
+      expect(ctrl.options.container).toEqual('.newcontainer');
+    });
+
+  });
+
+  describe('when calling showInstructor', function(){
+
+    beforeEach(function(){
+      jasmine.addMatchers(matchers);
+    });
+
+    var success = function(callbacks){
+      controller.model.set({'firstName': 'valid firstName',
+        'lastName': 'valid lastName', 'skills':'valid skills'});
+      callbacks.success(controller.model);
+    };
+
+    var err = function(callbacks){
+      callbacks.error('error', controller.model);
+    };
+
+    it('with a valid instructor id, fetches the model', function(){
+      spyOn(controller.model, 'fetch').and.callFake(success);
+      var cb = function(err, view){
+        expect(err).toBeNull();
+        expect(controller.model.get('firstName')).toEqual('valid firstName');
+        expect(controller.model.get('lastName')).toEqual('valid lastName');
+        expect(controller.model.get('skills')).toEqual('valid skills');
+      };
+
+      controller.showInstructor(1, cb);
+
+    });
+
+    it('with a valid instructor id, renders the view', function(){
+      spyOn(controller.model, 'fetch').and.callFake(success);
+      spyOn(controller.view, 'render').and.callFake(function(){
+        controller.view.$el = 'fake render';
+        return controller.view;
+      });
+      var cb = function(err, view){
+        expect($('body')).toHaveText('');
+        expect(view.cid).toEqual(controller.view.cid);
+      };
+      controller.showInstructor(1, cb);
+    });
+
+    it('with an invalid instructor id, renders an error message', function(){
+      spyOn(controller.model, 'fetch').and.callFake(err);
+      var cb = function(err, view){
+        expect(err).toBeTruthy();
+        expect($('body')).toHaveText(
+          'There was a problem rendering this instructor');
+      };
+      controller.showInstructor('whatid', cb);
+    });
+  });
+});