Replace categories modal by view with categories management

inc/myco.js

@@ -103,8 +103,7 @@ view_home=function() {
           sum+=value;
           diff='<td class="positive">+'+value.toFixed(2)+' €</td>';
         }
-        menu='<div class="btn-group" data-grp="'+g+'"><button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span></button><ul class="dropdown-menu"><li><a class="home_grp_cat_btn"><span class="glyphicon glyphicon-th-list"></span> Catégories</a></li></ul></div>';
+        tbody.html(tbody.html()+'<tr><td><a class="group-link" data-uuid="'+g+'">'+balances[g].name+'</a></td>'+diff+'</tr>');
-        tbody.html(tbody.html()+'<tr><td><a class="group-link" data-uuid="'+g+'">'+balances[g].name+'</a></td>'+diff+'<td>'+menu+'</td></tr>');
       }
     }
     $('#view-home #mybalances a.group-link').bind('click',function(e) {
@@ -130,18 +129,6 @@ view_home=function() {
   view_part('#view-home');
 }
 
-on_home_grp_cat_btn_click=function(e) {
-  grp_id=$(e.target).parents('div.btn-group').data('grp');
-  grp=groups[grp_id];
-  ul=$('#grp_cat_modal ul');
-  html="";
-  for(cid in grp.getSortedCategories()) {
-    html+="<li><span class='cat-color' style='background-color: "+grp.categories[cid]['color']+"'></span> "+grp.categories[cid]['name']+"</li>";
-  }
-  ul.html(html);
-  $('#grp_cat_modal').modal('show');
-}
-
 /****************
  * View group
  ****************/
@@ -207,6 +194,77 @@ show_contributions=function(group,contributor_email) {
   $('.contribution_edit_btn').bind('click',on_contribution_edit_btn_click);
 }
 
+on_categories_group_btn_click=function(e) {
+  group=groups[$('#view-group').data('uuid')];
+  $('#view-group-categories').data('group-uuid',$('#view-group').data('uuid'));
+  refresh_group_categories(group);
+  view_part('#view-group-categories');
+}
+
+refresh_group_categories=function(group) {
+  ul=$('#view-group-categories ul');
+  html="";
+  for(cid in group.getSortedCategories()) {
+    html+="<li data-uuid='"+cid+"'><span class='cat-color' style='background-color: "+group.categories[cid]['color']+"'></span> "+group.categories[cid]['name']+"</li>";
+  }
+  ul.html(html);
+  $('#view-group-categories ul li').bind('click',on_categories_group_cat_click);
+}
+
+on_categories_group_cat_click=function(e) {
+  li=$(e.target);
+  if (li.prop("tagName")!='LI') {
+    return true;
+  }
+  cid=li.data('uuid');
+  group=groups[$('#view-group-categories').data('group-uuid')];
+  cat=group.categories[cid];
+  li.html("<span class='cat-color' style='background-color: "+cat['color']+"'></span> "+
+  "<input type='text' value=\""+cat.name+"\"/> "+
+  "<button class='btn btn-default btn-xs cat_edit'><span class='glyphicon glyphicon-ok'></span></button>"+
+  "<button class='btn btn-default btn-xs cat_delete'><span class='glyphicon glyphicon-trash'></span></button>");
+  li.children('button.cat_edit').bind('click',{'li': li,'group': group,'cid': cid},on_categories_group_cat_edit_valid_btn_click);
+  li.children('button.cat_delete').bind('click',{'li': li,'group': group,'cid': cid},on_categories_group_cat_delete_btn_click);
+}
+
+on_categories_group_cat_edit_valid_btn_click=function(e) {
+  name=e.data.li.children('input:first').val();
+  cat=e.data.group.categories[e.data.cid];
+  e.data.group.updateCategory(e.data.cid,new Category(name,cat.color));
+  groups.save();
+  refresh_group_categories(e.data.group);
+}
+
+on_categories_group_cat_delete_btn_click=function(e) {
+  e.data.group.deleteCategory(e.data.cid);
+  groups.save();
+  refresh_group_categories(e.data.group);
+}
+
+on_categories_go_back_group_btn_click=function(e) {
+  view_group(groups[$('#view-group-categories').data('group-uuid')]);
+}
+
+on_categories_group_add_btn_click=function(e) {
+  name=$('#add_category input')[0].value;
+  
+  if (jQuery.type(name)!='string' || name=='') {
+    return;
+  }
+  group_uuid=$('#view-group-categories').data('group-uuid');
+  group=groups[group_uuid];
+  
+  if (group.getCategoryByName(name,true)) {
+    alert('Cette catégorie existe déjà');
+  }
+  else {
+    group.addCategory(new Category(name));
+    $('#add_category input')[0].value='';
+    refresh_group_categories(group);
+  }
+}
+
+
 /*****************************
  * Trash
  *****************************/
@@ -856,8 +914,13 @@ $( document ).ready( function() {
   $("#view-group-trash #go-back-group").bind('click',on_go_back_group_btn_click);
   $("#view-group-trash-contributors #go-back-group").bind('click',on_go_back_group_trash_contributors_btn_click);
 
+  $('#categories_group_btn').bind('click',on_categories_group_btn_click);
   $('#trash_group_btn').bind('click',on_trash_group_btn_click);
   $('#remove_group_btn').bind('click',on_remove_group_btn_click);
+  
+  $('#view-group-categories span.input-group-addon').bind('click',on_categories_group_add_btn_click);
+  $("#view-group-categories button.go-back-group").bind('click',on_categories_go_back_group_btn_click);
+  
   view_home();
   pleaseWaitHide();
 } );

inc/myco_objects.js

@@ -352,21 +352,39 @@ function Group(uuid,name,data) {
 
   this.deleteCategory=function(uuid,time) {
     this.categories[uuid].lastChange=time || new Date().getTime();
-    this.deletedCategory[uuid]=this.categories[uuid].export();
+    this.deletedCategories[uuid]=this.categories[uuid].export();
     delete this.categories[uuid];
   }
 
   this.restoreCategory=function(uuid) {
-    this.deletedCategory[uuid].lastChange=new Date().getTime();
+    this.deletedCategories[uuid].lastChange=new Date().getTime();
-    this.categories[uuid]=this.importCategory(this.deletedCategory[uuid]);
+    this.categories[uuid]=this.importCategory(this.deletedCategories[uuid]);
-    delete this.deletedCategory[uuid];
+    delete this.deletedCategories[uuid];
+  }
+  
+  this.getCategoryByName=function(name,approx) {
+    if(approx) {
+      name=String(name).replace(/^\s+|\s+$/g, '').toLowerCase();
+    }
+    for (uuid in this.categories) {
+      if (approx) {
+        if (String(this.categories[uuid].name).replace(/^\s+|\s+$/g, '').toLowerCase()==name) {
+          return this.categories[uuid];
+        }
+      }
+      else if(this.categories[uuid].name==name) {
+        return this.categories[uuid]
+      }
+    }
+    return false;
   }
 
   this.importCategory=function(data) {
     return new Category(
       decodeURIComponent(data.name),
       data.color,
-      data.lastChange
+      data.lastChange,
+      data.uuid
     );
   }
   
@@ -452,7 +470,6 @@ function Group(uuid,name,data) {
           this.deletedContributions[uuid]=data.deletedContributions[uuid];
         }
       }
-      console.log(data.categories);
       if (jQuery.type(data.categories) == 'object') {
         for (uuid in data.categories) {
           this.categories[uuid]=this.importCategory(data.categories[uuid]);
@@ -497,15 +514,17 @@ function Contributor(name,email) {
   }
 }
 
-function Category(name,color,lastChange) {
+function Category(name,color,lastChange,uuid) {
   this.name=name;
   this.color=color || '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6);
   this.lastChange=lastChange || new Date().getTime();
+  this.uuid=uuid || generate_uuid();
   this.export=function() {
     return {
       'name': encodeURIComponent(this.name),
       'color': this.color,
-      'lastChange': this.lastChange
+      'lastChange': this.lastChange,
+      'uuid': this.uuid
     };
   }
 }

index.html

@@ -67,7 +67,7 @@ span.cat-color {
   display: inline-block;
 }
 
-#grp_cat_modal ul {
+#view-group-categories ul {
   list-style-type: none;
   padding: 0;
 }
@@ -132,6 +132,10 @@ span.cat-color {
 .group-title {
   font-weight: bold;
 }
+
+.nav a, #mybalances a, #add_category span {
+  cursor: pointer;
+}
 </style>
   <body>
     <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
@@ -175,7 +179,6 @@ span.cat-color {
       <tr>
         <th>Groupe</th>
         <th>Balance</th>
-        <th>&nbsp;</th>
       </tr>
     </thead>
     <tbody></tbody>
@@ -183,7 +186,6 @@ span.cat-color {
       <tr>
         <td id='total-label'>Total :</td>
         <td id='total-value'></td>
-        <td>&nbsp;</td>
       </tr>
     </tfoot>
   </table>
@@ -256,6 +258,7 @@ span.cat-color {
       </div>
       <div class="collapse navbar-collapse" id="bottom-navbar-collapse-1">
         <ul class="nav navbar-nav navbar-right">
+          <li><a id='categories_group_btn'><span class='glyphicon glyphicon-th-list'></span> Catégories</span></a></li>
           <li><a id='trash_group_btn'><span class='glyphicon glyphicon-trash'></span> Corbeille</span></a></li>
           <li><a id='remove_group_btn'><span class='glyphicon glyphicon-floppy-remove'></span> Supprimer le groupe</span></a></li>
         </ul>
@@ -309,6 +312,18 @@ span.cat-color {
   </table>
 </div>
 
+<div id='view-group-categories' class='part row'>
+  <h1>Catégories <button type="button" class="btn btn-default go-back-group"><span class="glyphicon glyphicon-arrow-left"> Retour</span></button></h1>
+  <div class='col-xs-6'>
+    <ul>
+    </ul>
+    <div id="add_category" class='input-group'>
+      <input type='text' class="form-control" placeholder='nom'/>
+      <span class="input-group-addon"><span class="glyphicon glyphicon-plus"></span></span>
+    </div>
+  </div>
+</div>
+
 <div class="modal fade" id="add_group_modal" tabindex="-1" role="dialog" aria-labelledby="addGroupModal" aria-hidden="true">
   <div class="modal-dialog">
     <div class="modal-content">
@@ -615,23 +630,6 @@ span.cat-color {
   </div><!-- /.modal-dialog -->
 </div>
 
-<div class="modal fade" id="grp_cat_modal" tabindex="-1" role="dialog" aria-labelledby="grpCatModal" aria-hidden="true">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-        <h4 class="modal-title">Catégories</h4>
-      </div>
-      <div class="modal-body">
-        <ul id='grp_cat_list'></ul>
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-default" data-dismiss="modal">Ok</button>
-      </div>
-    </div><!-- /.modal-content -->
-  </div><!-- /.modal-dialog -->
-</div>
-
 
 </div>
   <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->