Browse Source

refactoring of templates for more flexible update / specialisation

Damien Accorsi 10 years ago
parent
commit
f85eae8afc

+ 0 - 1
pboard/pboard/templates/document-widgets-tabs.mak View File

@@ -1,6 +1,5 @@
1 1
 <%inherit file="local:templates.master"/>
2 2
 <%namespace name="POD" file="pboard.templates.pod"/>
3
-<%namespace name="DOC" file="pboard.templates.document-widgets"/>
4 3
 
5 4
 <%def name="HistoryTabContent(poNode)">
6 5
   <h4>${_('Revisions')}</h4>

+ 129 - 0
pboard/pboard/templates/document-widgets.mak View File

@@ -1,5 +1,6 @@
1 1
 <%inherit file="local:templates.master"/>
2 2
 <%namespace name="POD" file="pboard.templates.pod"/>
3
+<%namespace name="DOCTABS" file="pboard.templates.document-widgets-tabs"/>
3 4
 
4 5
 <%def name="node_treeview_for_set_parent_menu(node_id, node_list, indentation=-1)">
5 6
   % if indentation==-1:
@@ -674,3 +675,131 @@
674 675
     </div>
675 676
   </div>
676 677
 </%def>
678
+
679
+<%def name="TabbedMetadataPanelContent(current_user, current_node)">
680
+    <div class="tabbable">
681
+        <ul class="nav nav-tabs" style="margin-bottom: 0em;">
682
+            <li>${MetadataTab('#subdocuments', 'tab', _('Subdocuments'), 'fa-file-text-o', current_node.getChildren())}</li>
683
+            <li>${MetadataTab('#events', 'tab', _('Calendar'), 'fa-calendar', current_node.getEvents())}</li>
684
+            <li>${MetadataTab('#contacts', 'tab', _('Address book'), 'fa-user', current_node.getContacts())}</li>
685
+            <li class="active">${MetadataTab('#comments', 'tab', _('Comment thread'), 'fa-comments-o', current_node.getComments())}</li>
686
+            <li>${MetadataTab('#files', 'tab', _('Attachments'), 'fa-paperclip', current_node.getFiles())}</li>
687
+            <li class="pull-right">${MetadataTab('#accessmanagement', 'tab', _('Access Management'), 'fa-key', current_node.getGroupsWithSomeAccess())}</li>
688
+            <li class="pull-right">${MetadataTab('#history', 'tab', _('History'), 'fa-history', current_node.getHistory())}</li>
689
+        </ul>
690
+        
691
+        ################################
692
+        ##
693
+        ## PANEL SHOWING ASSOCIATED DATA AND METADATA
694
+        ##
695
+        ################################
696
+        <div class="tab-content">
697
+            <div class="tab-pane" id="subdocuments">${DOCTABS.SubdocumentContent(current_node)}</div>
698
+            <div class="tab-pane" id="events">${DOCTABS.EventTabContent(current_user, current_node)}</div>
699
+            <div class="tab-pane" id="contacts">${DOCTABS.ContactTabContent(current_node)}</div>
700
+            <div class="tab-pane active" id="comments">${DOCTABS.CommentTabContent(current_user, current_node)}</div>
701
+            <div class="tab-pane" id="files">${DOCTABS.FileTabContent(current_node)}</div>
702
+            <div class="tab-pane" id="history">${DOCTABS.HistoryTabContent(current_node)}</div>
703
+            <div class="tab-pane" id="accessmanagement">${DOCTABS.AccessManagementTab(current_node, current_user_rights, current_user)}</div>
704
+        </div>
705
+    </div>
706
+</%def>
707
+
708
+<%def name="ContentExplorerPanelContent(user, node)">
709
+    <link rel="stylesheet" href="${tg.url('/jstree/dist/themes/default/style.min.css')}" />
710
+    <script src="${tg.url('/jstree/dist/jstree.js')}"></script>
711
+    <style>
712
+      #left-menu-treeview {overflow:hidden;}
713
+      #left-menu-treeview:hover {overflow:visible; }
714
+    </style>
715
+    <h5>${_('Content explorer')}</h5>
716
+    <div id="left-menu-treeview"></div>
717
+    <script>
718
+        function prepareOrRemoveTreeNode(parentTreeViewItem, currentTreeViewItem, rootList, shouldRemoveNodeCallBack) {
719
+            // In case parentTreeViewItem is Null, then use rootList as the parent
720
+            
721
+            console.log("node #"+currentTreeViewItem.id+' => '+currentTreeViewItem.node_status);
722
+            
723
+            if(shouldRemoveNodeCallBack && shouldRemoveNodeCallBack(parentTreeViewItem, currentTreeViewItem, rootList)) {
724
+                console.log('Will remove node #'+currentTreeViewItem.id+' from tree view');
725
+                if(parentTreeViewItem!=null) {
726
+                  var currentTreeViewItemPosition = parentTreeViewItem.children.indexOf(currentTreeViewItem);
727
+                  if(currentTreeViewItemPosition != -1) {
728
+                      parentTreeViewItem.children.splice(currentTreeViewItemPosition, 1);
729
+                  }
730
+                } else {
731
+                  var currentTreeViewItemPosition = rootList.indexOf(currentTreeViewItem);
732
+                  if(currentTreeViewItemPosition != -1) {
733
+                      rootList.splice(currentTreeViewItemPosition, 1);
734
+                  }
735
+                }
736
+                
737
+            } else {
738
+                for (var i = currentTreeViewItem.children.length; i--;) {
739
+                    console.log('processing node #'+currentTreeViewItem.children[i].id);
740
+                    prepareOrRemoveTreeNode(currentTreeViewItem, currentTreeViewItem.children[i], rootList, shouldRemoveNodeCallBack);
741
+                }
742
+            }
743
+        }
744
+      
745
+        function shouldRemoveNodeDoneCallBack(parentTreeViewItem, currentTreeViewItem, rootList) {
746
+            if(currentTreeViewItem.node_status=='done' || currentTreeViewItem.node_status=='closed') {
747
+                console.log('Hide item #'+currentTreeViewItem.id+' from menu (status is '+currentTreeViewItem.node_status+')');
748
+                return true;
749
+            }
750
+            return false;
751
+        }
752
+      
753
+        $(function () {
754
+            $('#left-menu-treeview').jstree({
755
+                'plugins' : [ 'wholerow', 'types' ],
756
+                'core' : {
757
+                    'error': function (error) {
758
+                        console.log('Error ' + error.toString())
759
+                    },
760
+                    'data' : {
761
+                        'dataType': 'json',
762
+                        'contentType': 'application/json; charset=utf-8',
763
+                        'url' : function (node) {
764
+                            if (node.id==='#') {
765
+                                return '${tg.url("/api/menu/initialize", dict(current_node_id=node.node_id if node else 0))}';
766
+                            } else {
767
+                                return '${tg.url("/api/menu/children")}';
768
+                            }
769
+                        },
770
+                        'data' : function(node) {
771
+                            console.log("NODE => "+JSON.stringify(node))
772
+                            return {
773
+                                'id' : node.id
774
+                            };
775
+                        },
776
+                        'success': function (new_data) {
777
+                            console.log('loaded new menu data' + new_data)
778
+                            console.log(new_data);
779
+
780
+                            for (var i = new_data['d'].length; i--;) {
781
+                                prepareOrRemoveTreeNode(null, new_data['d'][i], new_data['d'], shouldRemoveNodeDoneCallBack);
782
+                            }
783
+                            return new_data;
784
+                        },
785
+                    },
786
+                }
787
+            });
788
+        
789
+            $('#left-menu-treeview').on("select_node.jstree", function (e, data) {
790
+                url = "${tg.url('/document/')}"+data.selected[0];
791
+                console.log("Opening document: "+url);
792
+                location.href = url;
793
+            });
794
+          
795
+            $('#left-menu-treeview').on("loaded.jstree", function () {
796
+                nodes = $('#left-menu-treeview .jstree-node');
797
+                console.log("nodes = "+nodes.length);
798
+                if (nodes.length<=0) {
799
+                    $("#left-menu-treeview").append( "<p class='pod-grey'>${_('There is no content yet.')|n}" );
800
+                    $("#left-menu-treeview").append( "<p><a class=\"btn btn-success\" data-toggle=\"modal\" role=\"button\" href=\"#add-document-modal-form\"><i class=\"fa fa-plus\"></i> ${_('Create a topic')}</a></p>" );
801
+                }
802
+            });
803
+        });
804
+    </script>
805
+</%def>

+ 34 - 210
pboard/pboard/templates/document.mak View File

@@ -11,61 +11,12 @@
11 11
   % endif
12 12
 </%def>
13 13
 
14
-<%def name="node_treeview(node_list, indentation=0)">
15
-  % if len(node_list)<=0 and indentation==0:
16
-    <p class="pod-grey">${_('You have no document yet.')}</p>
17
-  % endif
18
-
19
-  % if len(node_list)>0:
20
-    % for item in node_list:
21
-      <div id='pod-menu-item-${item.node.node_id}' class="pod-toolbar-parent ${'pod-status-active' if current_node!=None and item.node.node_id==current_node.node_id else ''}" style="padding-left: ${(indentation+2)*0.5}em; position: relative;">
22
-        <a class="toggle-child-menu-items"><i class='${item.node.getIconClass()}'></i></a>
23
-        <a href="${tg.url('/document/%s'%(item.node.node_id))}" title="${item.node.data_label}">
24
-          % if item.node.getStatus().status_family=='closed' or item.node.getStatus().status_family=='invisible':
25
-            <strike>
26
-          % endif
27
-              ${item.node.getTruncatedLabel(32-0.8*(indentation+1))}
28
-          % if item.node.getStatus().status_family=='closed' or item.node.getStatus().status_family=='invisible':
29
-            </strike>
30
-          % endif
31
-        </a>
32
-        <div class="pod-toolbar">
33
-          <a href="${tg.url('/api/move_node_upper?node_id=%i'%(item.node.node_id))}" title="${_('Move up')}"><i class="fa fa-arrow-up"></i></a>
34
-          <a href="${tg.url('/api/move_node_lower?node_id=%i'%(item.node.node_id))}" title="${_('Move down')}"><i class="fa fa-arrow-down"></i></a>
35
-        </div>
36
-        <div class="pod-status ${item.node.getStatus().css}" title='${item.node.getStatus().label}'>
37
-           <i class='${item.node.getStatus().icon}'></i>
38
-        </div>
39
-      </div>
40
-      % if len(item.children)>0:
41
-        <div id="pod-menu-item-${item.node.node_id}-children">${node_treeview(node_list=item.children, indentation=indentation+1)}</div>
42
-      % endif
43
-    % endfor
44
-  % endif
45
-</%def>
46
-
47
-<%def name="node_treeview_in_select_field(node_list, indentation, selected_id=0)">
48
-    % if len(node_list)>0:
49
-      % if indentation==0:
50
-        <option style="margin-left: ${0.5*indentation}em; color: #CCC;" value="0">no parent...</option>
51
-      % endif
52
-      % for node in node_list:
53
-        % if selected_id!=node.node_id:
54
-          <option style="margin-left: ${0.5*indentation}em;" value="${node.node_id}">${node.data_label}</option>
55
-        % else:
56
-          <option style="margin-left: ${0.5*indentation}em;" value="${node.node_id}" selected>${node.data_label}</option>
57
-        % endif
58
-        ${node_treeview_in_select_field(node.getChildren(), indentation+1, selected_id)}
59
-      % endfor
60
-    % endif
61
-</%def>
62
-
63 14
 <%def name='toggle_view_mode()'>
64
-            <li title=" ${_('Toggle view mode [narrow, medium, large]')}">
65
-              <a title="${_('Toggle view mode: narrow')}" id='view-size-toggle-button-small' class="pod-do-not-display"><i class='fa fa-eye'></i></a>
66
-              <a title="${_('Toggle view mode: medium')}" id='view-size-toggle-button-medium'><i class='fa fa-eye'></i></a>
67
-              <a title="${_('Toggle view mode: large')}"  id='view-size-toggle-button-large' class="pod-do-not-display"><i class='fa fa-eye'></i></a>
68
-            </li>
15
+    <li title=" ${_('Toggle view mode [narrow, medium, large]')}">
16
+        <a title="${_('Toggle view mode: narrow')}" id='view-size-toggle-button-small' class="pod-do-not-display"><i class='fa fa-eye'></i></a>
17
+        <a title="${_('Toggle view mode: medium')}" id='view-size-toggle-button-medium'><i class='fa fa-eye'></i></a>
18
+        <a title="${_('Toggle view mode: large')}"  id='view-size-toggle-button-large' class="pod-do-not-display"><i class='fa fa-eye'></i></a>
19
+    </li>
69 20
 </%def>
70 21
 
71 22
 #######
@@ -77,169 +28,42 @@
77 28
   </div>
78 29
 
79 30
   <div class="row">
80
-    <div id='application-left-panel' class="span3" >
81
-      <link rel="stylesheet" href="${tg.url('/jstree/dist/themes/default/style.min.css')}" />
82
-      <script src="${tg.url('/jstree/dist/jstree.js')}"></script>
83
-      <style>
84
-        #left-menu-treeview {overflow:hidden;}
85
-        #left-menu-treeview:hover {overflow:visible; }
86
-      </style>
87
-      <h5>${_('Content explorer')}</h5>
88
-      <div id="left-menu-treeview"></div>
89
-      <script>
90
-          function prepareOrRemoveTreeNode(parentTreeViewItem, currentTreeViewItem, rootList, shouldRemoveNodeCallBack) {
91
-              // In case parentTreeViewItem is Null, then use rootList as the parent
92
-              
93
-              console.log("node #"+currentTreeViewItem.id+' => '+currentTreeViewItem.node_status);
94
-              
95
-              if(shouldRemoveNodeCallBack && shouldRemoveNodeCallBack(parentTreeViewItem, currentTreeViewItem, rootList)) {
96
-                  console.log('Will remove node #'+currentTreeViewItem.id+' from tree view');
97
-                  if(parentTreeViewItem!=null) {
98
-                    var currentTreeViewItemPosition = parentTreeViewItem.children.indexOf(currentTreeViewItem);
99
-                    if(currentTreeViewItemPosition != -1) {
100
-                        parentTreeViewItem.children.splice(currentTreeViewItemPosition, 1);
101
-                    }
102
-                  } else {
103
-                    var currentTreeViewItemPosition = rootList.indexOf(currentTreeViewItem);
104
-                    if(currentTreeViewItemPosition != -1) {
105
-                        rootList.splice(currentTreeViewItemPosition, 1);
106
-                    }
107
-                  }
108
-                  
109
-              } else {
110
-                  for (var i = currentTreeViewItem.children.length; i--;) {
111
-                    console.log('processing node #'+currentTreeViewItem.children[i].id);
112
-                    prepareOrRemoveTreeNode(currentTreeViewItem, currentTreeViewItem.children[i], rootList, shouldRemoveNodeCallBack);
113
-                  }
114
-              }
115
-          }
116
-        
117
-          function shouldRemoveNodeDoneCallBack(parentTreeViewItem, currentTreeViewItem, rootList) {
118
-              if(currentTreeViewItem.node_status=='done' || currentTreeViewItem.node_status=='closed') {
119
-                  console.log('Hide item #'+currentTreeViewItem.id+' from menu (status is '+currentTreeViewItem.node_status+')');
120
-                  return true;
121
-              }
122
-              return false;
123
-          }
124
-        
125
-          $(function () {
126
-              $('#left-menu-treeview').jstree({
127
-                  'plugins' : [ 'wholerow', 'types' ],
128
-                  'core' : {
129
-                      'error': function (error) {
130
-                          console.log('Error ' + error.toString())
131
-                      },
132
-                      'data' : {
133
-                          'dataType': 'json',
134
-                          'contentType': 'application/json; charset=utf-8',
135
-                          'url' : function (node) {
136
-                              if (node.id==='#') {
137
-                                  return '${tg.url("/api/menu/initialize", dict(current_node_id=current_node.node_id if current_node else 0))}';
138
-                              } else {
139
-                                  return '${tg.url("/api/menu/children")}';
140
-                              }
141
-                          },
142
-                          'data' : function(node) {
143
-                              console.log("NODE => "+JSON.stringify(node))
144
-                              return {
145
-                                  'id' : node.id
146
-                              };
147
-                          },
148
-                          'success': function (new_data) {
149
-                              console.log('loaded new menu data' + new_data)
150
-                              console.log(new_data);
151 31
 
152
-                              for (var i = new_data['d'].length; i--;) {
153
-                                  prepareOrRemoveTreeNode(null, new_data['d'][i], new_data['d'], shouldRemoveNodeDoneCallBack);
154
-                              }
155
-                              return new_data;
156
-                          },
157
-                      },
158
-                  }
159
-              });
160
-          
161
-              $('#left-menu-treeview').on("select_node.jstree", function (e, data) {
162
-                  url = "${tg.url('/document/')}"+data.selected[0];
163
-                  console.log("Opening document: "+url);
164
-                  location.href = url;
165
-              });
166
-            
167
-              $('#left-menu-treeview').on("loaded.jstree", function () {
168
-                  nodes = $('#left-menu-treeview .jstree-node');
169
-                  console.log("nodes = "+nodes.length);
170
-                  if (nodes.length<=0) {
171
-                      $("#left-menu-treeview").append( "<p class='pod-grey'>${_('There is no content yet.')|n}" );
172
-                      $("#left-menu-treeview").append( "<p><a class=\"btn btn-success\" data-toggle=\"modal\" role=\"button\" href=\"#add-document-modal-form\"><i class=\"fa fa-plus\"></i> ${_('Create a topic')}</a></p>" );
173
-                  }
174
-              });
175
-          });
176
-      </script>
177
-## INFO - D.A. - 2014-05-28 - Hide old school menu
178
-##      <div>
179
-##        ${node_treeview(menu_node_list)}
180
-##      </div>
32
+    <div id='application-left-panel' class='span3'>
33
+      ${DOC.ContentExplorerPanelContent(current_user, current_node)}
181 34
     </div>
35
+    
182 36
     <div id='application-main-panel' class="span9">
183
-
184 37
       % if current_node==None:
185
-        <div class="row">
186
-          ${DOC.FirstTimeFakeDocument()}
187
-        </div>
188
-        
38
+          <div class="row">
39
+            ${DOC.FirstTimeFakeDocument()}
40
+          </div>
189 41
       % else:
190
-      <div class="row">
191
-        <div id='application-document-panel' class="span5">
192
-          <div id='current-document-content' class="">
193
-            ######
194
-            ##
195
-            ## CURRENT DOCUMENT TOOLBAR - START
196
-            ##
197
-            ## The Toolbar is a div with a specific id
198
-            ##
199
-            ${DOC.Toolbar(current_node, node_status_list, root_node_list_for_select_field, 'current-document-toobar', current_user_rights, current_user)}
200
-            ${DOC.ShowTitle(current_node, keywords, 'current-document-title')}
201
-            ${DOC.ShowContent(current_node, keywords)}
42
+          <div class="row">
43
+              <div id='application-document-panel' class="span5">
44
+                  <div id='current-document-content' class="">
45
+                      ${DOC.Toolbar(current_node, node_status_list, root_node_list_for_select_field, 'current-document-toobar', current_user_rights, current_user)}
46
+                      ${DOC.ShowTitle(current_node, keywords, 'current-document-title')}
47
+                      ${DOC.ShowContent(current_node, keywords)}
48
+                  </div>
49
+                  ${DOC.EditForm(current_node)}
50
+              </div>
51
+              <div id='application-metadata-panel' class="span4">
52
+                ${DOC.TabbedMetadataPanelContent(current_user, current_node)}
53
+              </div>
202 54
           </div>
203
-          ${DOC.EditForm(current_node)}
204
-        </div>
205
-        <div id='application-metadata-panel' class="span4">
206
-          ######
207
-          ##
208
-          ## HERE WE INCLUDE ALL MODAL DIALOG WHICH WILL BE ACCESSIBLE THROUGH TABS OR MENU
209
-          ##
210
-          ${DOC.DocumentEditModalDialog(current_node, None, tg.url('/api/create_document'), h.ID.AddDocumentModalForm(current_node), _('New Sub-document'))}
211
-          ${DOC.EventEditModalDialog(current_node, None, tg.url('/api/create_event'), h.ID.AddEventModalForm(current_node), _('Add an event'))}
212
-          ${DOC.ContactEditModalDialog(current_node, None, tg.url('/api/create_contact'), h.ID.AddContactModalForm(current_node), _('Add a new contact'))}
213
-          ${DOC.FileEditModalDialog(current_node, None, tg.url('/api/create_file'), h.ID.AddFileModalForm(current_node), _('Add a new file'))}
214
-          ${DOC.MoveDocumentModalDialog(current_node, tg.url('/api/set_parent_node'), h.ID.MoveDocumentModalForm(current_node), _('Move the document'))}
215
-
216
-          <div class="tabbable">
217
-            <ul class="nav nav-tabs" style="margin-bottom: 0em;">
218
-                <li>${DOC.MetadataTab('#subdocuments', 'tab', _('Subdocuments'), 'fa-file-text-o', current_node.getChildren())}</li>
219
-                <li>${DOC.MetadataTab('#events', 'tab', _('Calendar'), 'fa-calendar', current_node.getEvents())}</li>
220
-                <li>${DOC.MetadataTab('#contacts', 'tab', _('Address book'), 'fa-user', current_node.getContacts())}</li>
221
-                <li class="active">${DOC.MetadataTab('#comments', 'tab', _('Comment thread'), 'fa-comments-o', current_node.getComments())}</li>
222
-                <li>${DOC.MetadataTab('#files', 'tab', _('Attachments'), 'fa-paperclip', current_node.getFiles())}</li>
223
-                <li class="pull-right">${DOC.MetadataTab('#accessmanagement', 'tab', _('Access Management'), 'fa-key', current_node.getGroupsWithSomeAccess())}</li>
224
-                <li class="pull-right">${DOC.MetadataTab('#history', 'tab', _('History'), 'fa-history', current_node.getHistory())}</li>
225
-            </ul>
226
-            ################################
227
-            ##
228
-            ## PANEL SHOWING ASSOCIATED DATA AND METADATA
229
-            ##
230
-            ################################
231
-            <div class="tab-content">
232
-              <div class="tab-pane" id="subdocuments">${DOCTABS.SubdocumentContent(current_node)}</div>
233
-              <div class="tab-pane" id="events">${DOCTABS.EventTabContent(current_user, current_node)}</div>
234
-              <div class="tab-pane" id="contacts">${DOCTABS.ContactTabContent(current_node)}</div>
235
-              <div class="tab-pane active" id="comments">${DOCTABS.CommentTabContent(current_user, current_node)}</div>
236
-              <div class="tab-pane" id="files">${DOCTABS.FileTabContent(current_node)}</div>
237
-              <div class="tab-pane" id="history">${DOCTABS.HistoryTabContent(current_node)}</div>
238
-              <div class="tab-pane" id="accessmanagement">${DOCTABS.AccessManagementTab(current_node, current_user_rights, current_user)}</div>
239
-            </div>
55
+          
56
+          <div>
57
+              ######
58
+              ##
59
+              ## HERE WE INCLUDE ALL MODAL DIALOG WHICH WILL BE ACCESSIBLE THROUGH TABS OR MENU
60
+              ##
61
+              ${DOC.DocumentEditModalDialog(current_node, None, tg.url('/api/create_document'), h.ID.AddDocumentModalForm(current_node), _('New Sub-document'))}
62
+              ${DOC.EventEditModalDialog(current_node, None, tg.url('/api/create_event'), h.ID.AddEventModalForm(current_node), _('Add an event'))}
63
+              ${DOC.ContactEditModalDialog(current_node, None, tg.url('/api/create_contact'), h.ID.AddContactModalForm(current_node), _('Add a new contact'))}
64
+              ${DOC.FileEditModalDialog(current_node, None, tg.url('/api/create_file'), h.ID.AddFileModalForm(current_node), _('Add a new file'))}
65
+              ${DOC.MoveDocumentModalDialog(current_node, tg.url('/api/set_parent_node'), h.ID.MoveDocumentModalForm(current_node), _('Move the document'))}
240 66
           </div>
241
-        </div>
242
-      </div>
243 67
       % endif
244 68
     </div>
245 69
   </div>