Jessica's Rolodex

build/index.html

@@ -15,22 +15,22 @@
         <h1>Rolodex</h1>
         <section class="row contact-form">
           <h3>Add A New Contact</h3>
-          <div class="columns">
-            <label>
-              Name
-              <input type="text" name="name">
-            </label>
-            <label>
-              Email
-              <input type="text" name="email">
-            </label>
-            <label>
-              Phone
-              <input type="text" name="phone">
-            </label>
-            <h3 class="button btn-save">Save</h3>
-            <h3 class="button btn-cancel">Cancel</h3>
-          </div>
+              <div class="columns">
+                <label>
+                  Name
+                  <input type="text" name="name">
+                </label>
+                <label>
+                  Email
+                  <input type="text" name="email">
+                </label>
+                <label>
+                  Phone
+                  <input type="text" name="phone">
+                </label>
+                <h3 type= "submit" class="button btn-save">Save</h3>
+                <h3 type= "button" class="button btn-cancel">Cancel</h3>
+              </div>
         </section>
       </header>
 
@@ -51,6 +51,8 @@ <h4><%- name %></h4>
       <h3><%- name %></h3>
       <h4><%- email %></h4>
       <h4><%- phone %></h4>
+      <button class="edit button">Edit</button>
+      <button class="delete button">Delete</button>
     </script>
 
     <!-- Entire JS project built by Webpack -->

src/app.js

@@ -1,9 +1,43 @@
-import Application from 'app/models/application';
+import $ from 'jquery';
+import _ from 'underscore';
+import Backbone from 'backbone';
+import Rolodex from 'app/collections/rolodex';
 import ApplicationView from 'app/views/application_view';
 
-var application = new Application();
+// some data to start with
+var contactData = [
+  {
+    name: 'Jane',
+    phone: '123-4567',
+    email: 'Janedoe2@gmail.com'
+  },
+  {
+    name: 'John',
+    phone: '369-2468',
+    email: 'Johndoe@gmail.com'
+  }
+];
 
-var appView = new ApplicationView({
-  el: '#application',
-  model: application
+$(document).ready(function() {
+
+  var rolodex = new Rolodex(contactData); //create new collection that takes in starter data
+
+  $("#contact-details").hide(); //make sure that the modal is hidden by default
+
+  var application = new ApplicationView({
+    el: $('#application'), //element is the application div inside bodys; seems like I need this even though this.$el is not called in application_view??o_O
+    model: rolodex //pass collection of models to applicationview
+  });
+  application.render(); //render the application view
+});
+
+$(document).mouseup(function (e)
+{
+    var container = $("#contact-details");
+
+    if (!container.is(e.target) // if the target of the click isn't the container...
+        && container.has(e.target).length === 0) // ... nor a descendant of the container
+    {
+        container.hide();
+    }
 });

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/application.js

@@ -1,7 +1,7 @@
 import Backbone from 'backbone';
 
 const Application = Backbone.Model.extend({
-  // This model represents the overall application.
+
 });
 
 export default Application;

src/app/models/contact.js

@@ -3,6 +3,15 @@ import Backbone from 'backbone';
 const Contact = Backbone.Model.extend({
   // This model should have the attributes for
   // a single contact: name, phone number, and email.
+  defaults: {
+    name: "Jane",
+    phone: "123-4567",
+    email: "Janedoe@gmail.com"
+  },
+
+  initialize: function(){
+    console.log("Contact Created for" + this.get("name"));
+  }
 });
 
 export default Contact;

src/app/views/application_view.js

@@ -1,13 +1,57 @@
+import $ from 'jquery';
+import _ from 'underscore';
 import Backbone from 'backbone';
+import Contact from 'app/models/contact';
+import RolodexView from 'app/views/rolodex_view';
 
 const ApplicationView = Backbone.View.extend({
   initialize: function() {
-    this.render();
+    //create object which holds selectors for specific inputs in index.html
+    this.input = {
+      name: this.$('.contact-form input[name="name"]'),
+      email: this.$('.contact-form input[name="email"]'),
+      phone: this.$('.contact-form input[name="phone"]')
+    };
+
   },
 
   render: function() {
+    //render RolodexView and pass in collection of models made in app.js
+    var rolodexView = new RolodexView({
+      model: this.model,
+      input: this.input,
+      el: $('main')
+    });
+    rolodexView.render();
+
     return this;
-  }
+  },
+
+  events: {
+    'click .btn-save': 'saveInput',
+    'click .btn-cancel': 'clearInput',
+  },
+
+  clearInput: function(event) {
+    $('input').val('');//clear all values in any input tags
+  },
+
+  saveInput: function(event) {
+
+    // event.preventDefault(); <---I had this here before, but I guess it isn't needed since inputs are not in a form, and therefore the page won't refresh?
+
+    var contact = new Contact({ //create new instance in model of contact passing in values in input fields.
+      name: this.input.name.val(),
+      phone: this.input.phone.val(),
+      email: this.input.email.val()
+    });
+
+    this.model.add(contact); //make an add call which model will listenTo and run addContact in rolodexview
+
+    this.clearInput(); //clear input fields
+
+  },
+
 });
 
 export default ApplicationView;

src/app/views/contact_detail_view.js

@@ -0,0 +1,40 @@
+import $ from 'jquery';
+import _ from 'underscore';
+import Backbone from 'backbone';
+import Contact from 'app/models/contact';
+
+const ContactDetailView = Backbone.View.extend({
+
+  initialize: function() {
+    this.contactTemplate = _.template($('#tmpl-contact-details').html()); //script template for contact details
+  },
+
+  render: function() {
+    // this.$el.empty(); //***changed so that no el was assigned (before #contact-details was assigned)
+    // this.$el.show(); //default hidden modal will show
+    var html = this.contactTemplate(this.model.attributes); //pass model attributes to template
+    this.$el.html(html); //creates div tag with above html elements inside
+    // Enable chained calls
+    return this;
+  },
+
+  events: {
+    'click .edit': 'editDetail',
+    'click .delete': 'deleteContact'
+  },
+  //send trigger to rolodexview!
+  editDetail: function(event){
+    // console.log('whyyy');
+    this.trigger("editMe", this.model);
+    $('#contact-details').hide();
+  },
+ //delete the model!!
+  deleteContact: function(event){
+    console.log('hi'); //<----this indicator suggests there are ZOMBIES HERE. AHHHHHHHH **resolved :)
+    this.model.destroy();
+    $('#contact-details').hide();
+  }
+
+});
+
+export default ContactDetailView;

src/app/views/contact_view.js

@@ -1,6 +1,31 @@
+import $ from 'jquery';
+import _ from 'underscore';
 import Backbone from 'backbone';
+import Contact from 'app/models/contact';
 
 const ContactView = Backbone.View.extend({
+
+  initialize: function(options) {
+    this.rolodexTemplate = _.template($('#tmpl-contact-card').html());//template provided in script tag in index.html
+  },
+
+  render: function() {
+    this.delegateEvents();//bind events after they are emptied in rolodexview element
+    var html = this.rolodexTemplate(this.model.attributes); //pass model attributes to template
+    this.$el.html(html); //creates div tag with above html elements inside
+
+    // Enable chained calls
+    return this;
+  },
+
+  events: {
+    'click .contact-card': 'getDetail',
+  },
+
+  getDetail: function(event){
+    this.trigger("deetsplz", this.model);
+  }
+
 });
 
 export default ContactView;

src/app/views/rolodex_view.js

@@ -1,6 +1,83 @@
+import $ from 'jquery';
+import _ from 'underscore';
 import Backbone from 'backbone';
+import ContactView from 'app/views/contact_view';
+import ContactDetailView from 'app/views/contact_detail_view';
 
 const RolodexView = Backbone.View.extend({
+  initialize: function(options){
+    this.input = options.input;
+
+    this.cardList = [];//create empty array variable.
+
+    //loop through collection of models and add contacts to cardList
+    this.model.forEach(function(contact) {
+      this.addContact(contact);
+    }, this);
+
+    this.listenTo(this.model, "update", this.render);
+
+    this.listenTo(this.model, "add", this.addContact);
+
+    this.listenTo(this.model, "remove", this.removeContact);
+
+  },
+
+  render: function() {
+    $('#contact-cards').empty();//empties every time rerendered; elements are bound in contact-vew
+    // $('#contact-cards').empty(); <----things were weird when I ran this. Still not sure why this is unneccessary. Is it because of the listenTo update above?
+    //loops through cardList and appends each card to correct tag in index.html
+    this.cardList.forEach(function(card) {
+      card.render();
+      $('#contact-cards').append(card.$el);
+    }, this);
+
+    // Enable chained calls
+    return this;
+  },
+
+  makeDetail: function(model){
+    $('#contact-details').empty();//clears modal of previous details
+    //create new detail view
+    var cardDetail = new ContactDetailView({
+      model: model
+    });
+    cardDetail.render(); //render the details
+    this.listenTo(cardDetail, "editMe", this.editCard);
+    $('#contact-details').append(cardDetail.$el); //append card details
+    $('#contact-details').show(); //show modal
+  },
+
+  editCard: function(cardModel) {
+  console.log("Editing a card");
+
+  this.input.name.val(cardModel.get("name"));
+  this.input.email.val(cardModel.get("email"));
+  this.input.phone.val(cardModel.get("phone"));
+  this.model.remove(cardModel); //temporarily remove contact from collection while edited
+},
+
+  addContact: function(contact) {
+    var card = new ContactView({
+      // el: $('#contact-cards'), <---still unsure why when el was specified (and direct li objects were added to ul tag), .contact-card tags could not be clicked independently
+      model: contact, //contacts created with each individual model passed through
+    });
+    this.listenTo(card, "deetsplz", this.makeDetail);
+    this.cardList.push(card); //add each contact view to cardlist matrix
+  },
+
+  removeContact: function(model, collection, options) {
+    var filteredList = [];
+    for(var i = 0; i < this.cardList.length; i++) {
+      if(this.cardList[i].model == model) {
+        console.log("Found the bugger!");
+      } else {
+        filteredList.push(this.cardList[i]);
+      }
+    }
+    this.cardList = filteredList;
+  }
+
 });
 
 export default RolodexView;