improve performance + add file upload basic features

pboard/pboard/controllers/api.py

@@ -1,6 +1,11 @@
 # -*- coding: utf-8 -*-
 """Sample controller with all its actions protected."""
 from datetime import datetime
+
+import cStringIO as csio
+import Image as pil
+
+import tg
 from tg import expose, flash, require, url, lurl, request, redirect, tmpl_context
 from tg.i18n import ugettext as _, lazy_ugettext as l_
 from tg import predicates
@@ -54,6 +59,59 @@ class PODApiController(BaseController):
       redirect(lurl('/document/%i'%(loNewNode.parent_id)))
 
     @expose()
+    def create_comment(self, parent_id=None, data_label=u'', data_content=u'', **kw):
+
+      loNewNode = pld.createNode()
+      loNewNode.parent_id     = int(parent_id)
+      loNewNode.node_type     = pmd.PBNodeType.Comment
+      loNewNode.data_label    = data_label
+      loNewNode.data_content  = data_content
+
+      pm.DBSession.flush()
+      redirect(lurl('/document/%i'%(loNewNode.parent_id)))
+
+    @expose()
+    def create_file(self, parent_id=None, data_label=u'', data_content=u'', data_file=None, **kw):
+
+      loNewNode = pld.createNode()
+      loNewNode.parent_id     = int(parent_id)
+      loNewNode.node_type     = pmd.PBNodeType.File
+      loNewNode.data_label    = data_label
+      loNewNode.data_content  = data_content
+
+      loNewNode.data_file_name      = data_file.filename
+      loNewNode.data_file_mime_type = data_file.type
+      loNewNode.data_file_content   = data_file.file.read()
+
+      pm.DBSession.flush()
+      redirect(lurl('/document/%i'%(loNewNode.parent_id)))
+
+    @expose()
+    def get_file_content(self, node_id=None, **kw):
+      if node_id==None:
+        return
+      else:
+        loFile = pld.getNode(node_id)
+        tg.response.headers['Content-type'] = str(loFile.data_file_mime_type)
+        return loFile.data_file_content
+
+    @expose()
+    def get_file_content_thumbnail(self, node_id=None, **kw):
+      if node_id==None:
+        return
+      else:
+        loFile = pld.getNode(node_id)
+        
+        loJpegBytes = csio.StringIO(loFile.data_file_content)
+        loImage     = pil.open(loJpegBytes)
+        loImage.thumbnail([140,140], pil.ANTIALIAS)
+        
+        loResultBuffer = StringIO()
+        loImage.save(loResultBuffer,"JPEG")
+        tg.response.headers['Content-type'] = str(loFile.data_file_mime_type)
+        return loResultBuffer.getvalue()
+
+    @expose()
     def set_parent_node(self, node_id, new_parent_id, **kw):
       loNewNode = pld.getNode(node_id)
       if new_parent_id!='':

pboard/pboard/controllers/root.py

@@ -122,11 +122,36 @@ class RootController(BaseController):
     def document(self, node=0, came_from=lurl('/')):
         """show the user dashboard"""
         import pboard.model.data as pbmd
-        loRootNodeList = pbm.DBSession.query(pbmd.PBNode).filter(pbmd.PBNode.parent_id==None).order_by(pbmd.PBNode.node_order).all()
+        
+        # loRootNodeList   = pbm.DBSession.query(pbmd.PBNode).filter(pbmd.PBNode.parent_id==None).order_by(pbmd.PBNode.node_order).all()
+        print "===> AAA"
+        loRootNodeList = pld.buildTreeListForMenu()
+        print "===> BBB"
         liNodeId         = max(int(node), 1) # show node #1 if no selected node
         loCurrentNode    = pbm.DBSession.query(pbmd.PBNode).filter(pbmd.PBNode.node_id==liNodeId).one()
+        print "===> CCC"
         loNodeStatusList = pbmd.PBNodeStatus.getList()
+        print "===> DDD"
         return dict(root_node_list=loRootNodeList, current_node=loCurrentNode, node_status_list = loNodeStatusList)
 
 
+    @expose()
+    def fill_treepath(self):
+        """show the user dashboard"""
+        import pboard.model.data as pbmd
+        
+        loRootNodeList   = pbm.DBSession.query(pbmd.PBNode).order_by(pbmd.PBNode.parent_id).all()
+        for loNode in loRootNodeList:
+          if loNode.parent_id==None:
+            loNode.node_depth = 0
+            loNode.parent_tree_path = '/'
+          else:
+            loNode.node_depth = loNode._oParent.node_depth+1
+            loNode.parent_tree_path = '%s%i/'%(loNode._oParent.parent_tree_path,loNode.parent_id)
+        
+        pbm.DBSession.flush()
+        
+        return 
+
+
 

pboard/pboard/lib/dbapi.py

@@ -9,9 +9,11 @@ __all__ = ['User', 'Group', 'Permission']
 from sqlalchemy import Table, ForeignKey, Column
 from sqlalchemy.types import Unicode, Integer, DateTime, Text
 from sqlalchemy.orm import relation, synonym
+from sqlalchemy.orm import joinedload_all
 
 from pboard.model import DeclarativeBase, metadata, DBSession
 from pboard.model import data as pbmd
+import pboard.model as pbm
 
 def createNode():
   loNode = pbmd.PBNode()
@@ -19,7 +21,7 @@ def createNode():
   return loNode
 
 def getNode(liNodeId):
-  return DBSession.query(pbmd.PBNode).filter(pbmd.PBNode.node_id==liNodeId).one()
+  return DBSession.query(pbmd.PBNode).options(joinedload_all("_lAllChildren")).filter(pbmd.PBNode.node_id==liNodeId).one()
 
 def getParentNode(loNode):
   return DBSession.query(pbmd.PBNode).filter(pbmd.PBNode.node_id==loNode.parent_id).one()
@@ -36,7 +38,10 @@ def resetNodeOrderOfSiblingNodes(loSiblingNodes):
     liNewWeight = liNewWeight + 1
     loNode.node_order = liNewWeight
   # DBSession.save()
-  
+
+def getNodeFileContent(liNodeId):
+  return DBSession.query(pbmd.PBNode).filter(pbmd.PBNode.node_id==liNodeId).one().data_file_content
+
 
 def moveNodeUpper(loNode):
   # FIXME - manage errors and logging
@@ -81,3 +86,21 @@ def moveNodeLower(loNode):
 def deleteNode(loNode):
   DBSession.delete(loNode)
   return
+
+def buildTreeListForMenu():
+  loNodeList = pbm.DBSession.query(pbmd.PBNode).filter(pbmd.PBNode.node_type==pbmd.PBNodeType.Data).order_by(pbmd.PBNode.parent_tree_path).order_by(pbmd.PBNode.node_order).all()
+  loTreeList = []
+  loTmpDict = {}
+  for loNode in loNodeList:
+    loTmpDict[loNode.node_id] = loNode
+
+    if loNode.parent_id==None:
+      loTreeList.append(loNode)
+    else:
+      # append the node to the parent list
+      loTmpDict[loNode.parent_id].appendStaticChild(loNode)
+
+  print "=================="
+  print loTmpDict[101].getStaticChildList()
+  return loTreeList
+

pboard/pboard/model/data.py

@@ -17,15 +17,17 @@ from hashlib import sha256
 __all__ = ['User', 'Group', 'Permission']
 
 from sqlalchemy import Table, ForeignKey, Column, Sequence
-from sqlalchemy.types import Unicode, Integer, DateTime, Text
-from sqlalchemy.orm import relation, synonym
+from sqlalchemy.types import Unicode, Integer, DateTime, Text, LargeBinary
+from sqlalchemy.orm import relation, synonym, relationship
+from sqlalchemy.orm import backref
+from sqlalchemy import orm as sqlao
 
 import tg
 from pboard.model import DeclarativeBase, metadata, DBSession
 
 # This is the association table for the many-to-many relationship between
 # groups and permissions.
-pb_node_table = Table('pb_nodes', metadata,
+"""pb_node_table = Table('pb_nodes', metadata,
     Column('node_id', Integer, Sequence('pb_nodes__node_id__sequence'), primary_key=True),
     Column('parent_id', Integer, ForeignKey('pb_nodes.node_id'), nullable=True, default=None),
     Column('node_order', Integer, nullable=True, default=1),
@@ -39,8 +41,13 @@ pb_node_table = Table('pb_nodes', metadata,
     Column('data_content', Text(), unique=False, nullable=False, default=u''),
     Column('data_datetime', DateTime, unique=False, nullable=False),
     Column('data_reminder_datetime', DateTime, unique=False, nullable=True),
+    
+    Column('data_file_name', Unicode(255), unique=False, nullable=False, default=u''),
+    Column('data_file_mime_type', Unicode(255), unique=False, nullable=False, default=u''),
+    Column('data_file_content', LargeBinary(), unique=False, nullable=False, default=None),
 )
 """
+"""
 - node_type
 
 - node_created_at
@@ -136,16 +143,71 @@ class PBNodeType(object):
   Comment = 'comment'
 
 
-class PBNode(object):
+class PBNode(DeclarativeBase):
+
+  def __init__(self):
+    self._lStaticChildList = []
+
+  @sqlao.reconstructor
+  def init_on_load(self):
+    self._lStaticChildList = []
+
+  def appendStaticChild(self, loNode):
+    print "%s has child %s" % (self.node_id, loNode.node_id)
+    self._lStaticChildList.append(loNode)
+
+  def getStaticChildList(self):
+    return self._lStaticChildList
+
+  def getStaticChildNb(self):
+    return len(self._lStaticChildList)
+
+  __tablename__ = 'pb_nodes'
+  node_id          = Column(Integer, Sequence('pb_nodes__node_id__sequence'), primary_key=True)
+  parent_id        = Column(Integer, ForeignKey('pb_nodes.node_id'), nullable=True, default=None)
+  node_depth       = Column(Integer, unique=False, nullable=False, default=0)
+  parent_tree_path = Column(Unicode(255), unique=False, nullable=False, default=u'data')
+
+  node_order  = Column(Integer, nullable=True, default=1)
+  node_type   = Column(Unicode(16), unique=False, nullable=False, default=u'data')
+  node_status = Column(Unicode(16), unique=False, nullable=False, default=u'new')
+
+  created_at = Column(DateTime, unique=False, nullable=False)
+  updated_at = Column(DateTime, unique=False, nullable=False)
+
+  data_label   = Column(Unicode(1024), unique=False, nullable=False, default=u'')
+  data_content = Column(Text(),        unique=False, nullable=False, default=u'')
+  
+  data_datetime          = Column(DateTime, unique=False, nullable=False)
+  data_reminder_datetime = Column(DateTime, unique=False, nullable=True)
+  
+  data_file_name      = Column(Unicode(255),  unique=False, nullable=False, default=u'')
+  data_file_mime_type = Column(Unicode(255),  unique=False, nullable=False, default=u'')
+  data_file_content   = Column(LargeBinary(), unique=False, nullable=False, default=None)
+
+
+  _oParent = relationship('PBNode', remote_side=[node_id], backref='_lAllChildren')
 
   def getChildrenOfType(self, plNodeTypeList, plSortingCriteria):
     """return all children nodes of type 'data' or 'node' or 'folder'"""
-    return DBSession.query(PBNode).filter(PBNode.parent_id==self.node_id).filter(PBNode.node_type.in_(plNodeTypeList)).order_by(plSortingCriteria).all()
+    llChildren = []
+    for child in self._lAllChildren:
+      if child.node_type in plNodeTypeList:
+        llChildren.append(child)
+    return llChildren
+    # return DBSession.query(PBNode).filter(PBNode.parent_id==self.node_id).filter(PBNode.node_type.in_(plNodeTypeList)).order_by(plSortingCriteria).all()
   
+  def getChildNbOfType(self, plNodeTypeList):
+    """return all children nodes of type 'data' or 'node' or 'folder'"""
+    liChildNb = 0
+    for child in self._lAllChildren:
+      if child.node_type in plNodeTypeList:
+        liChildNb = liChildNb+1
+    return liChildNb
+    # return DBSession.query(PBNode).filter(PBNode.parent_id==self.node_id).filter(PBNode.node_type.in_(plNodeTypeList)).order_by(plSortingCriteria).all()
   
   def getChildNb(self):
-    liChildNb = DBSession.query(PBNode).filter(PBNode.parent_id==self.node_id).filter(PBNode.node_type==PBNodeType.Data).count()
-    return liChildNb
+    return self.getChildNbOfType([PBNodeType.Data])
 
   def getChildren(self):
     """return all children nodes of type 'data' or 'node' or 'folder'"""
@@ -156,9 +218,14 @@ class PBNode(object):
     return self.getChildrenOfType([PBNodeType.Contact], PBNode.data_label.asc())
 
   def getEvents(self):
-    return DBSession.query(PBNode).filter(PBNode.parent_id==self.node_id).filter(PBNode.node_type==PBNodeType.Event).order_by(PBNode.data_datetime.desc()).all()
-    return []
+    return self.getChildrenOfType([PBNodeType.Event], PBNode.data_datetime.desc())
     
+  def getFiles(self):
+    return self.getChildrenOfType([PBNodeType.File], PBNode.data_datetime.desc())
+
+  def getComments(self):
+    return self.getChildrenOfType([PBNodeType.Comment], PBNode.data_datetime.desc())
+
   def getIconClass(self):
     laIconClass = dict()
     laIconClass['node']   = 'icon-g-folder-open'
@@ -170,7 +237,7 @@ class PBNode(object):
     laIconClass['contact'] = 'icon-user'
     laIconClass['comment'] = 'icon-comment'
 
-    if self.node_type==PBNodeType.Data and self.getChildNb()>0:
+    if self.node_type==PBNodeType.Data and self.getStaticChildNb()>0:
       return laIconClass['folder']
     else:
       return laIconClass[self.node_type]
@@ -222,6 +289,28 @@ class PBNode(object):
 
 
 
-from sqlalchemy.orm import mapper
-mapper(PBNode, pb_node_table)
+"""from sqlalchemy.orm import mapper
+mapper(
+  PBNode,
+  pb_node_table,
+  properties = {'_lAllChildren' : relationship(PBNode, backref=backref('_oParent', remote_side=PBNode.parent_id)) }
+)"""
+
+
+
+"""    children = relationship('TreeNode',
+
+                        # cascade deletions
+                        cascade="all",
+
+                        # many to one + adjacency list - remote_side
+                        # is required to reference the 'remote' 
+                        # column in the join condition.
+                        backref=backref("parent", remote_side='TreeNode.id'),
+
+                        # children will be represented as a dictionary
+                        # on the "name" attribute.
+                        collection_class=attribute_mapped_collection('name'),
+                    ) 
+"""
 

pboard/pboard/templates/document.mak

@@ -13,7 +13,7 @@
       % for new_parent_node in node_list:
         <li>
           <a href="${tg.url('/api/set_parent_node?node_id=%i&new_parent_id=%i'%(node_id, new_parent_node.node_id))}">${new_parent_node.getTruncatedLabel(40-indentation*2)}</a>
-          ${node_treeview_for_set_parent_menu(node_id, new_parent_node.getChildren(), indentation+1)}
+          ${node_treeview_for_set_parent_menu(node_id, new_parent_node.getStaticChildList(), indentation+1)}
         </li>
       % endfor
       </ul>
@@ -36,12 +36,13 @@
   % else:
     % if len(node_list)>0:
       % for node in node_list:
-        <div class="pod-toolbar-parent ${'pod-status-active' if node.node_id==current_node.node_id else ''}" style="padding-left: ${(indentation+2)*0.5}em; position: relative;">
+        <div id='pod-menu-item-${node.node_id}' class="pod-toolbar-parent ${'pod-status-active' if node.node_id==current_node.node_id else ''}" style="padding-left: ${(indentation+2)*0.5}em; position: relative;">
+          <a class="toggle-child-menu-items"><i class='${node.getIconClass()}'></i></a>
           <a href="${tg.url('/document/%s'%(node.node_id))}" title="${node.data_label}">
             % if node.getStatus().status_family=='closed' or node.getStatus().status_family=='invisible':
               <strike>
             % endif
-            <i class='${node.getIconClass()}'></i> ${node.getTruncatedLabel(32-0.8*(indentation+1))}
+                ${node.getTruncatedLabel(32-0.8*(indentation+1))}
             % if node.getStatus().status_family=='closed' or node.getStatus().status_family=='invisible':
               </strike>
             % endif
@@ -55,7 +56,7 @@
              <i class='${node.getStatus().icon}'></i>
           </div>
         </div>
-        ${node_treeview(node.getChildren(), indentation+1)}
+        <div id="pod-menu-item-${node.node_id}-children">${node_treeview(node.getStaticChildList(), indentation+1)}</div>
       % endfor
     % endif
   % endif
@@ -109,7 +110,8 @@ POD :: ${current_node.getTruncatedLabel(40)} [${current_node.getStatus().label}]
         ${POD.EditButton('current-document-content-edit-button', True)}
         <a class="btn" href="#" data-toggle="dropdown"><i class="icon-g-move"></i> ${_('Move to')} <span class="caret"></span></a>
         <ul class="dropdown-menu">
-          ${node_treeview_for_set_parent_menu(current_node.node_id, root_node_list)}
+          AGAGA
+          {node_treeview_for_set_parent_menu(current_node.node_id, root_node_list)}
         </ul>
 
 
@@ -145,16 +147,18 @@ POD :: ${current_node.getTruncatedLabel(40)} [${current_node.getStatus().label}]
     <div class="span4">
       <div class="tabbable">
         <ul class="nav nav-tabs">
-            <li class=""><a href="#tags" data-toggle="tab" title="${_('Tags')}"><i class='icon-g-tags'></i></a></li>
-            <li class="active">
-              <a href="#events" data-toggle="tab" title="History"><i class="icon-g-history"></i></a>
-            </li>
-            <li><a href="#contacts" data-toggle="tab" title="Contacts"><i class="icon-g-phone""></i> </a></li>
+            <li class="active"><a href="#tags" data-toggle="tab" title="${_('Tags')}"><i class='icon-g-tags'></i></a></li>
+            <li><a href="#events" data-toggle="tab" title="History"><i class="icon-g-history"></i></a></li>
+            <li><a href="#contacts" data-toggle="tab" title="Contacts"><i class="icon-g-user""></i> </a></li>
             <li><a href="#comments" data-toggle="tab" title="Comments"><i class="icon-g-comments"></i> </a></li>
             <li><a href="#files" data-toggle="tab" title="Files"><i class="icon-g-attach"></i> </a></li>
-            <li><a href="#contacts" data-toggle="tab" title="Users"><i class="icon-g-user""></i> </a></li>
         </ul>
         <div class="tab-content">
+            ################################
+            ##
+            ## PANEL SHOWING LIST OF TAGS
+            ##
+            ################################
             <div class="tab-pane" id="tags">
               <div class="well">
                 <p>
@@ -172,42 +176,46 @@ POD :: ${current_node.getTruncatedLabel(40)} [${current_node.getStatus().label}]
                 % endfor
               </div>
             </div>
+            ################################
+            ##
+            ## PANEL SHOWING LIST OF EVENTS
+            ##
+            ################################
             <div class="tab-pane active" id="events">
-
-${POD.AddButton('current-document-add-event-button', True, _(' Add event'))}
-<form style='display: none;' id='current-document-add-event-form' action='${tg.url('/api/create_event')}' method='post' class="well">
-  <input type="hidden" name='parent_id' value='${current_node.node_id}'/>
-  <fieldset>
-    <legend>Add an event</legend>
-    <label>
-      <input type="text" name='data_label' placeholder="Event"/>
-    </label>
-    <label>
-      <div class="datetime-picker-input-div input-append date">
-        <input name='data_datetime' data-format="dd/MM/yyyy hh:mm" type="text" placeholder="date and time"/>
-        <span class="add-on"><i data-time-icon="icon-g-clock" data-date-icon="icon-g-calendar"></i></span>
-      </div>
-    </label>
-    <label>
-      <div>
-        <textarea id="add_event_data_content_textarea" name='data_content' spellcheck="false" wrap="off" autofocus placeholder="${_('detail...')}"></textarea>
-      </div>
-    </label>
-    <label class="checkbox">
-      <input disabled name='add_reminder' type="checkbox"> add a reminder
-    </label>
-    <label>
-      <div class="datetime-picker-input-div input-append date">
-        <input disabled name='data_reminder_datetime' data-format="dd/MM/yyyy hh:mm" type="text" placeholder="date and time"/>
-        <span class="add-on"><i data-time-icon="icon-g-clock" data-date-icon="icon-g-calendar"></i></span>
-      </div>
-    </label>
+              ${POD.AddButton('current-document-add-event-button', True, _(' Add event'))}
+              <form style='display: none;' id='current-document-add-event-form' action='${tg.url('/api/create_event')}' method='post' class="well">
+                <input type="hidden" name='parent_id' value='${current_node.node_id}'/>
+                <fieldset>
+                  <legend>Add an event</legend>
+                  <label>
+                    <input type="text" name='data_label' placeholder="Event"/>
+                  </label>
+                  <label>
+                    <div class="datetime-picker-input-div input-append date">
+                      <input name='data_datetime' data-format="dd/MM/yyyy hh:mm" type="text" placeholder="date and time"/>
+                      <span class="add-on"><i data-time-icon="icon-g-clock" data-date-icon="icon-g-calendar"></i></span>
+                    </div>
+                  </label>
+                  <label>
+                    <div>
+                      <textarea id="add_event_data_content_textarea" name='data_content' spellcheck="false" wrap="off" autofocus placeholder="${_('detail...')}"></textarea>
+                    </div>
+                  </label>
+                  <label class="checkbox">
+                    <input disabled name='add_reminder' type="checkbox"> add a reminder
+                  </label>
+                  <label>
+                    <div class="datetime-picker-input-div input-append date">
+                      <input disabled name='data_reminder_datetime' data-format="dd/MM/yyyy hh:mm" type="text" placeholder="date and time"/>
+                      <span class="add-on"><i data-time-icon="icon-g-clock" data-date-icon="icon-g-calendar"></i></span>
+                    </div>
+                  </label>
 
 
-    ${POD.CancelButton('current-document-add-event-cancel-button', True)}
-    ${POD.SaveButton('current-document-add-event-save-button', True)}
-  </fieldset>
-</form>
+                  ${POD.CancelButton('current-document-add-event-cancel-button', True)}
+                  ${POD.SaveButton('current-document-add-event-save-button', True)}
+                </fieldset>
+              </form>
 
             % if len(current_node.getEvents())<=0:
               <p><i>${_('No history for the moment.')}</i></p>
@@ -235,6 +243,11 @@ ${POD.AddButton('current-document-add-event-button', True, _(' Add event'))}
               </table>
             % endif
             </div>
+            ##############################
+            ## 
+            ## PANEL SHOWING LIST OF CONTACTS
+            ##
+            ##############################
             <div class="tab-pane" id="contacts">
             
               <!-- ADD CONTACT FORM -->
@@ -242,7 +255,7 @@ ${POD.AddButton('current-document-add-event-button', True, _(' Add event'))}
               <form style='display: none;' id='current-document-add-contact-form' action='${tg.url('/api/create_contact')}' method='post' class="well">
                 <input type="hidden" name='parent_id' value='${current_node.node_id}'/>
                 <fieldset>
-                  <legend>Add an event</legend>
+                  <legend>${_('Add a contact')}</legend>
                   <label>
                     <input type="text" name='data_label' placeholder="Title"/>
                   </label>
@@ -266,9 +279,103 @@ ${POD.AddButton('current-document-add-event-button', True, _(' Add event'))}
                   </div>
                 </div>
               % endfor
+
+
+            </div>
+            ################################
+            ##
+            ## PANEL SHOWING LIST OF COMMENTS
+            ##
+            ################################
+            <div class="tab-pane" id="comments">
+              <!-- ADD COMMENT FORM -->
+              ${POD.AddButton('current-document-add-comment-button', True, _(' Add comment'))}
+              <form style='display: none;' id='current-document-add-comment-form' action='${tg.url('/api/create_comment')}' method='post' class="well">
+                <input type="hidden" name='parent_id' value='${current_node.node_id}'/>
+                <fieldset>
+                  <legend>${_('Add a comment')}</legend>
+                  <label>
+                    <input type="text" name='data_label' placeholder="Title"/>
+                  </label>
+                  <label>
+                    <div>
+                      <textarea id="add_comment_data_content_textarea" name='data_content' spellcheck="false" wrap="off" autofocus placeholder="${_('comment...')}"></textarea>
+                    </div>
+                  </label>
+                  ${POD.CancelButton('current-document-add-comment-cancel-button', True)}
+                  ${POD.SaveButton('current-document-add-comment-save-button', True)}
+                </fieldset>
+              </form>
+
+              <!-- LIST OF COMMENTS -->
+            % if len(current_node.getComments())<=0:
+              <p><i>${_('No comments.')}</i></p>
+            % else:
+              <table class="table table-striped table-hover table-condensed">
+                % for comment in current_node.getComments():
+                  <tr title="Last updated: ${event.updated_at}">
+                    <td>
+                      <b>${comment.data_label}</b><br/>
+                      <i>commented by comment.author the ${comment.getFormattedDate(comment.updated_at)} at ${comment.getFormattedTime(comment.updated_at)}</i></br>
+                      <p>
+                        ${comment.data_content|n}
+                      </p>
+                    </td>
+                  </tr>
+                % endfor
+              </table>
+            % endif
+            </div>
+            ################################
+            ##
+            ## PANEL SHOWING LIST OF FILES
+            ##
+            ################################
+            <div class="tab-pane" id="files">
+              <!-- ADD FILE FORM -->
+              ${POD.AddButton('current-document-add-file-button', True, _(' Add file'))}
+              <form style='display: none;' id='current-document-add-file-form' enctype="multipart/form-data" action='${tg.url('/api/create_file')}' method='post' class="well">
+                <input type="hidden" name='parent_id' value='${current_node.node_id}'/>
+                <fieldset>
+                  <legend>${_('Add a file')}</legend>
+                  <label>
+                    <input type="text" name='data_label' placeholder="Title"/>
+                  </label>
+                  <label>
+                    <input type="file" name='data_file' placeholder="choose a file..."/>
+                  </label>
+                  <label>
+                    <div>
+                      <textarea id="add_file_data_content_textarea" name='data_content' spellcheck="false" wrap="off" autofocus placeholder="${_('comment...')}"></textarea>
+                    </div>
+                  </label>
+                  ${POD.CancelButton('current-document-add-file-cancel-button', True)}
+                  ${POD.SaveButton('current-document-add-file-save-button', True)}
+                </fieldset>
+              </form>
+
+              <!-- LIST OF FILES -->
+            % if len(current_node.getFiles())<=0:
+              <p><i>${_('No files.')}</i></p>
+            % else:
+              <table class="table table-striped table-hover table-condensed">
+                % for current_file in current_node.getFiles():
+                  <tr title="Last updated: ${event.updated_at}">
+                    <td>
+                      <img src="${tg.url('/api/get_file_content_thumbnail/%s'%(current_file.node_id))}" class="img-polaroid">
+                    </td>
+                    <td>
+                      <b>${current_file.data_label}</b><br/>
+                      <i>commented by comment.author the ${current_file.getFormattedDate(comment.updated_at)} at ${current_file.getFormattedTime(comment.updated_at)}</i></br>
+                      <p>
+                        ${current_file.data_content|n}
+                      </p>
+                    </td>
+                  </tr>
+                % endfor
+              </table>
+            % endif
             </div>
-            <div class="tab-pane" id="comments">${current_node.data_content|n}</div>
-            <div class="tab-pane" id="files">Files</div>
         </div>
       </div>
     </div>

pboard/pboard/templates/master.mak

@@ -122,8 +122,6 @@ tr:Hover td div.pod-toolbar {
 
             <script>
               $(document).ready(function() {
-
-                
                 $('#current_node_textarea').wysihtml5({
                   "font-styles": true, //Font styling, e.g. h1, h2, etc. Default true
                   "emphasis": true, //Italics, bold, etc. Default true
@@ -166,6 +164,35 @@ tr:Hover td div.pod-toolbar {
                 $('#add_contact_data_content_textarea').addClass("span3");
 
 
+                /* ADD COMMENT FORM */
+                $('#add_comment_data_content_textarea').wysihtml5({
+                  "font-styles": false, //Font styling, e.g. h1, h2, etc. Default true
+                  "emphasis": true, //Italics, bold, etc. Default true
+                  "lists": false, //(Un)ordered lists, e.g. Bullets, Numbers. Default true
+                  "html": true, //Button which allows you to edit the generated HTML. Default false
+                  "link": true, //Button to insert a link. Default true
+                  "image": true, //Button to insert an image. Default true,
+                  // "color": true //Button to change color of font  
+                });
+                $('#add_comment_data_content_textarea').css('margin-bottom', '0');
+                $('#add_comment_data_content_textarea').css("height", "4em");
+                $('#add_comment_data_content_textarea').addClass("span3");
+
+                /* ADD FILE FORM */
+                $('#add_file_data_content_textarea').wysihtml5({
+                  "font-styles": false, //Font styling, e.g. h1, h2, etc. Default true
+                  "emphasis": true, //Italics, bold, etc. Default true
+                  "lists": false, //(Un)ordered lists, e.g. Bullets, Numbers. Default true
+                  "html": true, //Button which allows you to edit the generated HTML. Default false
+                  "link": true, //Button to insert a link. Default true
+                  "image": true, //Button to insert an image. Default true,
+                  // "color": true //Button to change color of font  
+                });
+                $('#add_file_data_content_textarea').css('margin-bottom', '0');
+                $('#add_file_data_content_textarea').css("height", "4em");
+                $('#add_file_data_content_textarea').addClass("span3");
+
+
                 /* Edit title form */
                 $("#current-document-title-edit-form" ).css("display", "none");
                 $("#current-document-title" ).dblclick(function() {
@@ -231,12 +258,35 @@ tr:Hover td div.pod-toolbar {
                   $('#current-document-add-contact-form').submit();
                 });
 
+                /* Add comment form hide/show behavior */
+                $("#current-document-add-comment-button" ).click(function() {
+                  $("#current-document-add-comment-form" ).css("display", "block");
+                  $("#current-document-add-comment-button" ).css("display", "none");
+                });
+                $('#current-document-add-comment-cancel-button').on('click', function(e){
+                  $("#current-document-add-comment-form" ).css("display", "none");
+                  $("#current-document-add-comment-button" ).css("display", "block");
+                });
+                $('#current-document-add-comment-save-button').on('click', function(e){
+                  e.preventDefault(); // We don't want this to act as a link so cancel the link action
+                  $('#current-document-add-comment-form').submit();
+                });
 
-
-/*                $('.date-picker-input').datepicker({
-                  format: 'mm-dd-yyyy'
+                /* Add file form hide/show behavior */
+                $("#current-document-add-file-button" ).click(function() {
+                  $("#current-document-add-file-form" ).css("display", "block");
+                  $("#current-document-add-file-button" ).css("display", "none");
                 });
-*/
+                $('#current-document-add-file-cancel-button').on('click', function(e){
+                  $("#current-document-add-file-form" ).css("display", "none");
+                  $("#current-document-add-file-button" ).css("display", "block");
+                });
+                $('#current-document-add-file-save-button').on('click', function(e){
+                  e.preventDefault(); // We don't want this to act as a link so cancel the link action
+                  $('#current-document-add-file-form').submit();
+                });
+
+
                 $(function() {
                   $('.datetime-picker-input-div').datetimepicker({
                     language: 'fr-FR',
@@ -244,8 +294,55 @@ tr:Hover td div.pod-toolbar {
                   });
                 });
 
+/*
+                // Allow to go directly to required tab on load
+                // Javascript to enable link to tab
+                var url = document.location.toString();
+                if (url.match('#')) {
+                  $('.nav-tabs a[href=#'+url.split('#')[1]+']').tab('show') ;
+                } 
+
+                // Change hash for page-reload
+                $('.nav-tabs a').on('shown', function (e) {
+                  window.location.hash = e.target.hash;
+                })
+*/
+                #################################
+                ##
+                ## The following JS code allow t
+                ##
+                ##
+                // Javascript to enable link to tab
+                var hash = document.location.hash;
+                var prefix = "tab-";
+                if (hash) {
+                    $('.nav-tabs a[href='+hash.replace(prefix,"")+']').tab('show');
+                } 
+
+                // Change hash for page-reload
+                $('.nav-tabs a').on('shown', function (e) {
+                    window.location.hash = e.target.hash.replace("#", "#" + prefix);
+                });
+
+                $('a.toggle-child-menu-items').on('click', function (e) {
+                  parent_id    = $(this).parent().attr('id');
+                  child        = $('#'+parent_id+'-children');
+                  togglebutton = $(this).children('i:first')
+                  if(child.css('display')=='none'){
+                    child.css("display", "block");
+                    togglebutton.removeClass('icon-g-folder-plus');
+                    togglebutton.attr('class', 'icon-g-folder-open');
+                    console.log("class is: "+togglebutton.attr('class'));
+                  } else {
+                    child.css("display", "none");
+                    togglebutton.removeClass('icon-g-folder-open');
+                    togglebutton.addClass('icon-g-folder-plus');
+                    console.log("class is: "+togglebutton.attr('class'));
+                  }
+                  
+                });
               });
-              
+
             </script>
 </body>