Maya's Rolodex wave1-3 completed (parens)

build/index.html

@@ -36,7 +36,7 @@ <h3 class="button btn-cancel">Cancel</h3>
 
       <main>
         <ul id="contact-cards" class="row align-center"></ul>
-        <section id="contact-details"></section>
+        <section id="contact-details" hidden="true"></section>
       </main>
     </div>
 

package.json

@@ -4,7 +4,7 @@
   "description": "Rolodex application using Backbone.js",
   "main": "./bin/app.bundle.js",
   "scripts": {
-    "start": "webpack-dashboard -- webpack-dev-server",
+    "start": "webpack-dashboard --display-error-details -- webpack-dev-server ",
     "test": "jasmine"
   },
   "author": "Ada Developers Academy <contact@adadevelopersacademy.org>",

src/app.js

@@ -1,9 +1,35 @@
+import $ from 'jquery';
 import Application from 'app/models/application';
 import ApplicationView from 'app/views/application_view';
+import Contact from 'app/models/contact';
+import ContactView from 'app/views/contact_view';
+import Rolodex from 'app/collections/rolodex';
+import RolodexView from 'app/views/rolodex_view';
 
+var exampleContacts = [
+  {
+    name: 'Rick', email: 'rick@example.com', phone: "123-456-7890"
+  },
+  {
+    name: 'Morty', email: 'morty@example.com', phone: "233-566-0998"
+  },
+];
+
+/*
 var application = new Application();
 
 var appView = new ApplicationView({
   el: '#application',
   model: application
 });
+*/
+
+$(document).ready(function() {
+  var contactList = new Rolodex(exampleContacts);
+
+  var application = new RolodexView({
+    el: $('#application'),
+    model: contactList
+  });
+  application.render();
+});

src/app/collections/rolodex.js

@@ -1,10 +1,12 @@
 import Backbone from 'backbone';
+import Contact from 'app/models/contact';
 
 const Rolodex = Backbone.Collection.extend({
   // This Rolodex represents a collection of Contacts
   // and should include any methods or attributes
   // that are involved in working with more than one
   // Contact.
+  model: Contact
 });
 
 export default Rolodex;

src/app/models/contact.js

@@ -1,8 +1,17 @@
 import Backbone from 'backbone';
 
 const Contact = Backbone.Model.extend({
-  // This model should have the attributes for
+  // This model has the attributes for
   // a single contact: name, phone number, and email.
+  defaults:{
+    name: "Placeholder name",
+    phone: "Placeholder phone",
+    email: "Placeholder email"
+  },
+
+  initialize: function(option){
+    // default constructor is fine
+  },
 });
 
 export default Contact;

src/app/views/contact_details_view.js

@@ -0,0 +1,28 @@
+import $ from 'jquery';
+import _ from 'underscore';
+import Backbone from 'backbone';
+
+const ContactDetailsView = Backbone.View.extend({
+    initialize: function(args){
+      this.template = _.template($('#tmpl-contact-details').html());
+      this.dialogElement = $('#contact-details');
+    },
+    render: function() {
+      // reconnect all Event Handlers
+      this.delegateEvents();
+
+      var html = this.template(this.model.toJSON());
+
+      this.$el.html(html);
+
+      this.dialogElement.empty();
+      this.dialogElement.append(this.$el);
+      return this;
+    },
+
+    show: function() {
+      this.dialogElement.show();
+    },
+ });
+
+ export default ContactDetailsView;

src/app/views/contact_view.js

@@ -1,6 +1,37 @@
+import $ from 'jquery';
 import Backbone from 'backbone';
+import ContactDetailsView from 'app/views/contact_details_view';
 
 const ContactView = Backbone.View.extend({
+  initialize: function(options) {
+    this.template = options.template;
+    this.listenTo(this.model, "change", this.render);
+  },
+
+  render: function() {
+    // reconnect all Event Handlers
+    this.delegateEvents();
+
+    var html = this.template(this.model.toJSON());
+
+    this.$el.html(html);
+
+    return this;
+  },
+
+  events: {
+    'click': "showThisContactDetails",
+  },
+
+  showThisContactDetails: function(event) {
+    event.stopPropagation();
+    var contactDetailsView = new ContactDetailsView({
+      model: this.model,
+    });
+
+    contactDetailsView.render();
+    contactDetailsView.show();
+  },
 });
 
 export default ContactView;

src/app/views/rolodex_view.js

@@ -1,6 +1,93 @@
+import $ from 'jquery';
+import _ from 'underscore';
 import Backbone from 'backbone';
+import ContactView from 'app/views/contact_view';
 
 const RolodexView = Backbone.View.extend({
+  initialize: function() {
+    this.contactTemplate = _.template($('#tmpl-contact-card').html());
+
+    // Keep track of the <ul> element
+    this.listElement = this.$('#contact-cards');
+
+    this.contactViewList = [];
+
+    // Process each contact
+    this.model.forEach(function(contact) {
+      this.addContactView(contact);
+    }, this); // bind `this` so it's available inside forEach
+
+    // Keep track of our form input fields
+    this.input = {
+      name: this.$('.contact-form input[name="name"]'),
+      phone: this.$('.contact-form input[name="phone"]'),
+      email: this.$('.contact-form input[name="email"]'),
+    };
+
+    this.listenTo(this.model, "update", this.render);
+    this.listenTo(this.model, "add", this.addContactView);
+
+    $('body').on('click', this.hideModal);
+  },
+
+  hideModal: function() {
+    $('#contact-details').hide();
+  },
+
+  events: {
+    'click .btn-save': 'createNewContact',
+    'click .btn-cancel': 'clearContactInput'
+  },
+
+  render: function() {
+    // Make sure the list in the DOM is empty
+    // before we start appending items
+    this.listElement.empty();
+
+    // Loop through the data assigned to this view
+    this.contactViewList.forEach(function(contactView) {
+      contactView.render();
+
+      this.listElement.append(contactView.$el);
+    }, this);
+
+    return this; // enable chained calls
+  },
+
+  addContactView: function(contact) {
+    // Create a card for the new task
+    var contactView = new ContactView({
+      model: contact,
+      template: this.contactTemplate
+    });
+
+    // Add the ContactView to our ContactView list
+    this.contactViewList.push(contactView);
+  },
+
+  createNewContact: function() {
+    var contactHash = this.getNewContactInput();
+    var contact = this.model.add(contactHash);
+
+    // Clear the input form so the user can add another contact
+    this.clearContactInput();
+  },
+
+  // Build a new hash from the info gathered from the new contact form
+  getNewContactInput: function() {
+    var contactHash = {
+      name: this.input.name.val(),
+      phone: this.input.phone.val(),
+      email: this.input.email.val(),
+    };
+    return contactHash;
+  },
+
+  clearContactInput: function(event) {
+    this.input.name.val('');
+    this.input.phone.val('');
+    this.input.email.val('');
+  },
 });
 
 export default RolodexView;