Merge pull request #10 from nicolastarzia/master

Enable changes in column title

README.md

@@ -11,6 +11,7 @@ JavaScript Scrum App to manage tasks with ease.
 - All updated text will be saved automatically without you doing anything except for typing out your edits on the card. (Can't edit titles as of now, will be released in next version.)
 - Drag your task card to the bin(red) on the footer to delete your task (Note that this cannot be reverted)
 - Move your task card around to update the status of your task, say from Development to Testing and so on.
+- Update a column name by double clicking on Title text.
 
 ---
 
@@ -27,7 +28,7 @@ JavaScript Scrum App to manage tasks with ease.
 ---
 
 #### More to come
-- [ ] Edit task title
+- [x] Edit task title
 - [ ] Set tasks priority
 - [ ] Import / Export tasks
 - [ ] Remember expanded/collapsed state of a task

index.html

@@ -12,19 +12,9 @@
     <div class="wrapper">
       <header class="clear">
         <ul>
-          <li>Rejected</li>
-          <li>Pending</li>
-          <li>Development</li>
-          <li>Testing</li>
-          <li>Production</li>
         </ul>
       </header>
       <section id="dashboard" class="dashboard clear">
-        <div id="rejected" class="rejected"></div>
-        <div id="pending" class="pending"></div>
-        <div id="development" class="development"></div>
-        <div id="testing" class="testing"></div>
-        <div id="production" class="production"></div>
       </section>
       
       <footer>
@@ -54,6 +44,25 @@
     
     <div id="removed-task-notification" class="removed-task-notification hide"></div>
     
+   <div class="modal hide" id="change-status-modal">
+     <div class="modal-wrapper">
+       <form action="index.html" method="post" class="change-status-form" name="change_status">
+          <span class="close-modal">X</span>
+
+          <h3>Change column name</h3>
+
+          <ul>
+            <li>
+              <input type="text" id="new_status" placeholder="Column name" autofocus>
+            </li>
+            <li>
+              <input type="submit" name="change_status" value="Change column name">
+            </li>
+          </ul>
+       </form>
+     </div>
+   </div>
+
     <div class="modal hide" id="add-task-modal">
       <div class="modal-wrapper">
         <form action="index.html" method="post" class="add-task-form" name="add_task">
@@ -87,7 +96,7 @@
     </div>
     
     <div class="hide" id="tips">
-      Double click on the task text to edit it <br> <span>(Task titles are not editable for now)</span>
+      Double click on the task text to edit it <br> <span>(Task titles are <b>editable</b> for now)</span>
     </div>
     
     <script id="task-card-template" type="text/x-handlebars-template">

src/scripts/app.js

@@ -12,6 +12,8 @@ var App = function() {
   function init() {
     tips();
     preset();
+    addStatusColumns();
+    changeStatus();
     draggable();
     droppable();
     openCard();
@@ -38,10 +40,63 @@ var App = function() {
     
     if(!LocalStorage.get('appInitialized', true)) {
       LocalStorage.set('taskCounter', 1);
+      LocalStorage.set('status', JSON.stringify([
+        {key: 'rejected', value: 'Rejected'}, 
+        {key: 'pending', value: 'Pending'}, 
+        {key: 'development', value: 'Development'}, 
+        {key: 'testing', value: 'Testing'}, 
+        {key: 'production', value: 'Production'}]));
       LocalStorage.set('task-1', JSON.stringify(defaultTask));
       LocalStorage.set('appInitialized', true);
     }
   }
+
+  function addStatusColumns(){
+
+    var statusArr = JSON.parse(LocalStorage.get('status'));
+    var headerObj = $('header ul');
+    var myDashboard = $('#dashboard');
+    statusArr.map(function(item){
+      var newLi = $('<li>' + item.value + '</li>');
+      newLi.attr('data-id', item.key);
+      headerObj.append(newLi);
+
+      var newDiv = $('<div id=' + item.key + ' class=' + item.key + '></div>');
+      myDashboard.append(newDiv);
+    });
+    
+  }
+
+  function changeStatus(){
+    $('header li').on('dblclick', function(e){
+        e.preventDefault();
+        var statusToChange = $(this).attr('data-id');
+        
+        $('#change-status-modal').removeClass('hide');
+
+        $('#new_status').val($(this).text());
+
+        $('#change-status-modal').find('form').on('submit', function(e){
+            e.preventDefault();
+            var newStatus = $('#new_status').val();
+            var currentStatus = JSON.parse(LocalStorage.get('status'));
+            currentStatus.map(function(obj){
+                if(obj.key == statusToChange)
+                {
+                  obj.value = newStatus;
+                }
+            });
+
+            $('header ul li[data-id=' + statusToChange + ']').html(newStatus);
+
+            LocalStorage.set('status', JSON.stringify(currentStatus));
+
+            
+            $('.close-modal').trigger('click');
+
+        });
+    });
+  }
   
   function createTask() {
     var source = $("#task-card-template").html();
@@ -201,16 +256,16 @@ var App = function() {
     var source = $("#task-card-template").html();
     var template = Handlebars.compile(source);
     
-    var status = ['rejected', 'pending', 'development', 'testing', 'production'];
+    var status = JSON.parse(LocalStorage.get('status'));
     
     for(var i = 0, l = status.length; i < l; i++) {
       var result = App.getAllNotes().filter(function(obj) {
-        return obj.status == status[i];
+        return obj.status == status[i].key;
       });
       
       if(result) {
         var cards = template(result);
-        $('#dashboard #' + status[i]).append(cards);
+        $('#dashboard #' + status[i].key).append(cards);
         draggable();
       }
     }

src/stylesheets/app.scss

@@ -338,7 +338,7 @@ header {
   }
 }
 
-.add-task-form {
+.add-task-form, .change-status-form {
   text-align: center;
   
   li {