Improves tree data formatting. re #4357

archesproject · Dec 19, 2018 · 8e9cce6 · 8e9cce6
1 parent f4cd390
commit 8e9cce6
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 16 deletions.
diff --git a/arches/app/media/js/views/mobile-survey-designer.js b/arches/app/media/js/views/mobile-survey-designer.js
@@ -29,14 +29,49 @@ define([
 
     viewModel.tree = new Tree({
         mobilesurvey: viewModel.mobilesurvey,
-        items: [{name: viewModel.mobilesurvey.name, selected: true},
-            {name: 'Map Extent'},
-            {name: 'Offline Maps'},
-            {name: 'Models'},
-            {name: 'Data'},
-            {name: 'People'}]
+        items: [{
+            name: viewModel.mobilesurvey.name,
+            selected: true,
+            istopnode: true,
+            expanded: ko.observable(true),
+            childNodes: ko.observableArray([{
+                name: 'Map Extent',
+                selected: false,
+                childNodes: ko.observableArray([]),
+                expanded: ko.observable(false)
+            },
+            {
+                name: 'Offline Maps',
+                selected: false,
+                childNodes: ko.observableArray([]),
+                expanded: ko.observable(false)
+            },
+            {
+                name: 'Models',
+                selected: false,
+                childNodes: ko.observableArray([{
+                    name: 'Model 1',
+                    selected: false,
+                    childNodes: ko.observableArray([]),
+                    expanded: ko.observable(false)
+                },]),
+                expanded: ko.observable(false)
+            },
+            {
+                name: 'Data',
+                selected: false,
+                childNodes: ko.observableArray([]),
+                expanded: ko.observable(false)
+            },
+            {
+                name: 'People',
+                selected: false,
+                childNodes: ko.observableArray([]),
+                expanded: ko.observable(false)
+            }
+            ])
+        }]
     });
-
     viewModel.discardEdits = function() {
         this.resourceList.resetCards(this.mobilesurvey.get('source').cards);
         this.mobilesurvey.reset();

diff --git a/arches/app/media/js/views/mobile-survey-manager/mobile-survey-tree.js b/arches/app/media/js/views/mobile-survey-manager/mobile-survey-tree.js
@@ -28,24 +28,36 @@ define([
             this.mobilesurvey = options.mobilesurvey;
             this.items = options.items;
         },
+        _initializeItem: function(item){
+            if (!item.expanded) {
+                item.expanded = ko.observable(item.istopnode);
+            }
+            TreeView.prototype._initializeItem.apply(this, arguments);
+        },
         selectItem: function(node){
-            // if (!this.graphSettings.dirty()) {
-            //     this.graphModel.selectNode(node);
-            //     this.trigger('node-selected', node);
-            // }
+            console.log('selecting node', node);
+            this.trigger('node-selected', node);
         },
-        isChildSelected: function(node) {
+        isChildSelected: function(node){
+            console.log(node);
             var isChildSelected = function(parent) {
                 var childSelected = false;
-                if (!parent.istopnode) {
-                    return childSelected;
-                }
+                console.log(parent);
+                // if (!parent.istopnode) {
+                //     parent.childNodes().forEach(function(child) {
+                //         if (child && child.selected() || isChildSelected(child)) {
+                //             childSelected = true;
+                //         }
+                //     });
+                //     return childSelected;
+                // }
             };
 
             return ko.computed(function() {
                 return isChildSelected(node);
             }, this);
         }
+
     });
     return tree;
 });
diff --git a/arches/app/templates/views/mobile-survey-manager/mobile-survey-tree.htm b/arches/app/templates/views/mobile-survey-manager/mobile-survey-tree.htm
@@ -29,10 +29,20 @@
 <!-- /ko -->
 
 <template id="mobile-survey-tree">
-    <li role="treeitem" class="jstree-node jstree-closed" data-bind="container: '.mobile-designer-tree'">
+    <li role="treeitem" data-toggle="tab" href="#project-summary-card" class="jstree-node jstree-open" data-bind="css: {'jstree-open': (node.childNodes().length > 0 && node.expanded), 'jstree-closed' : (node.childNodes().length > 0 && !node.expanded()), 'jstree-leaf': node.childNodes().length === 0}, container: '.mobile-survey-tree'">
         <i class="jstree-icon jstree-ocl" role="presentation" data-bind="click: function(){node.expanded(!node.expanded())}"></i>
         <a class="jstree-anchor" href="#" tabindex="-1" data-bind="click: tree.selectItem.bind(tree), css:{'jstree-clicked': node.selected, 'child-selected': tree.isChildSelected(node), 'filtered': tree.filter().length > 0 && !node.filtered()}">
             <div data-bind="text: node.name"></div>
         </a>
+        <ul class="jstree-children" aria-expanded="true" data-bind="if: node.childNodes().length > 0">
+            <div data-bind="sortable: {
+                template: 'mobile-survey-tree',
+                data: node.childNodes,
+                as: 'node',
+                beforeMove: tree.beforeMove,
+                afterMove: tree.reorderNodes
+            }">
+            </div>
+        </ul>
     </li>
 </template>