collapsible group

dimagi · Dec 1, 2023 · 6a27713 · 6a27713
1 parent 4185ea6
commit 6a27713
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views/query.js b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views/query.js
@@ -457,9 +457,17 @@ hqDefine("cloudcare/js/formplayer/menus/views/query", function () {
         childViewOptions: function () {
             return {parentView: this.options.parentView};
         },
+
         initialize: function (options) {
             console.log('groupedQueryView');
         },
+
+        templateContext: function () {
+            return {
+                groupName: this.options.groupName,
+                groupKey: this.options.groupKey,
+            };
+        },
     });
 
     var QueryListView = Marionette.CollectionView.extend({
@@ -478,7 +486,14 @@ hqDefine("cloudcare/js/formplayer/menus/views/query", function () {
 
             if (child.has("groupName")) {
                 const childList = new Backbone.Collection(child.get('displays'));
-                options = _.extend({collection: childList}, childViewOptions);
+                options = _.extend(
+                    {
+                        collection: childList,
+                        groupName: child.get('groupName'),
+                        groupKey: child.get('groupKey'),
+                    },
+                    childViewOptions
+                );
             } else {
                 options = _.extend({model: child}, childViewOptions);
             }

diff --git a/corehq/apps/cloudcare/templates/formplayer/query_view.html b/corehq/apps/cloudcare/templates/formplayer/query_view.html
@@ -41,7 +41,10 @@ <h2 tabindex="0"><%- title %></h2>
 </script>
 
 <script type="text/template" id="query-view-group-template">
-    <table class="table table-hover table-striped table-bordered" role="presentation">
+    <div data-toggle="collapse" data-target="#group-<%- groupKey %>" aria-expanded="true" aria-controls="group-<%- groupKey %>">
+      <%- groupName %>
+    </div>
+    <table id="group-<%- groupKey %>" class="table table-hover table-striped table-bordered" role="presentation">
       <tbody id="query-properties">
       </tbody>
     </table>