Merge pull request #5232 from dimagi/master+caseDetailsInCC

Master+case details in cc
dimagi · Jan 8, 2015 · 2897198 · 2897198
2 parents c753d96 + 3ce1c77
commit 2897198
Show file tree

Hide file tree

Showing 5 changed files with 167 additions and 23 deletions.
diff --git a/corehq/apps/cloudcare/static/cloudcare/css/cloudcare.css b/corehq/apps/cloudcare/static/cloudcare/css/cloudcare.css
@@ -14,4 +14,9 @@ nav#sessions > ul > li.nav-header {
 #case-crumbs > .breadcrumb > .active {
     font-weight: 600;
     color: inherit;
+}
+
+#case-details > div > .breadcrumb > .active {
+    font-weight: 600;
+    color: inherit;
 }
diff --git a/corehq/apps/cloudcare/static/cloudcare/js/backbone/cases.js b/corehq/apps/cloudcare/static/cloudcare/js/backbone/cases.js
@@ -45,7 +45,49 @@ cloudCare.Case = Backbone.Model.extend({
 
     status: function () {
         return this.get("closed") ? "closed" : "open";
-    }
+    },
+
+    caseProperties: function(language) {
+        // Returns case-details as key-value pairs
+        // there should be a better way to access language var, than passing here
+        var raw_columns = this.get("module") ?
+                          this.get("module").get("case_details").long.columns :
+                          this.get("appConfig").module.get("case_details").long.columns ; // If Parent-child selection is on
+        return _.map(raw_columns, function(col){
+            return {
+                key: localize(col.header, language),
+                value: this.getProperty(col.field) ? this.getProperty(col.field) : cloudCare.EMPTY
+            };
+        }, this);
+    },
+
+    caseDetailsLabel: function(language) {
+        var caseLabel = (this.get("module") ?
+                         this.get("module").get("case_label")[language] :
+                         this.get("appConfig").module.get("case_label")[language]) + 
+                        ": ";
+        if (caseLabel === "Cases: "){
+            caseLabel = "";
+        }
+        var caseName = this.get("properties").case_name;
+        return caseLabel + caseName;
+
+    },
+
+    childCaseUrl: function() {
+        var parentConfig = this.get("appConfig");
+        if (!parentConfig) {
+            throw "not a parent case";
+        }
+        var root = window.location.href.replace(Backbone.history.getFragment(), '');
+        return getChildSelectUrl(
+            root,
+            parentConfig.app_id,
+            parentConfig.module_index,
+            parentConfig.form_index,
+            this.id
+        );
+    },
 });
 
 cloudCare.Details = Backbone.Model.extend({
@@ -365,30 +407,45 @@ cloudCare.CaseSelectionView = Backbone.View.extend({
         var childCase = self.model.get("childCase");
         var data = {parentCase: null, childCase: null};
 
-        if (parentCase){
-            data.parentCase = {};
-            var caseLabel = parentCase.get("appConfig").module.get("case_label")[self.language] + ": ";
-            if (caseLabel === "Cases: "){
-                caseLabel = "";
+        if (window.toggles.CASEDETAILS_IN_CLOUDCARE_FORMS){
+            if (parentCase){
+                data.parentCase = {};
+                data.parentCase.text = parentCase.caseDetailsLabel(self.language);
+                data.parentCase.href = parentCase.childCaseUrl();
+                data.parentCase.properties = parentCase.caseProperties(self.language);
+            }
+            if (childCase){
+                data.childCase = {};
+                data.childCase.text = childCase.caseDetailsLabel(self.language);
+                data.childCase.properties = childCase.caseProperties(self.language);
             }
-            var caseName = parentCase.get("properties").case_name;
-            data.parentCase.text = caseLabel + caseName;
-
-            // This is hacky and I hate it
-            var root = window.location.href.replace(Backbone.history.getFragment(), '');
-            data.parentCase.href = root + "view/" + parentCase.get("appConfig").app_id
-                        + "/" + parentCase.get("appConfig").module_index
-                        + "/" + parentCase.get("appConfig").form_index
-                 + "/parent/" + parentCase.id;
         }
-        if (childCase){
-            data.childCase = {};
-            var caseLabel = childCase.get("module").get("case_label")[self.language] + ": ";
-            if (caseLabel === "Cases: "){
-                caseLabel = "";
+        else{
+            if (parentCase){
+                data.parentCase = {};
+                var caseLabel = parentCase.get("appConfig").module.get("case_label")[self.language] + ": ";
+                if (caseLabel === "Cases: "){
+                    caseLabel = "";
+                }
+                var caseName = parentCase.get("properties").case_name;
+                data.parentCase.text = caseLabel + caseName; 
+
+                // This is hacky and I hate it
+                var root = window.location.href.replace(Backbone.history.getFragment(), '');
+                data.parentCase.href = root + "view/" + parentCase.get("appConfig").app_id
+                            + "/" + parentCase.get("appConfig").module_index
+                            + "/" + parentCase.get("appConfig").form_index
+                     + "/parent/" + parentCase.id;
+            }
+            if (childCase){
+                data.childCase = {};
+                var caseLabel = childCase.get("module").get("case_label")[self.language] + ": ";
+                if (caseLabel === "Cases: "){
+                    caseLabel = "";
+                }
+                var caseName = childCase.get("properties").case_name;
+                data.childCase.text = caseLabel + caseName
             }
-            var caseName = childCase.get("properties").case_name;
-            data.childCase.text = caseLabel + caseName
         }
         self.$el.html(self.template(data));
         return self;

diff --git a/corehq/apps/cloudcare/templates/cloudcare/cloudcare_home.html b/corehq/apps/cloudcare/templates/cloudcare/cloudcare_home.html
@@ -41,6 +41,12 @@
 
     GMAPS_API_KEY = '{{ maps_api_key|safe }}'; // maps api is loaded on-demand
 
+    if (window.toggles === undefined) {
+        window.toggles = {};
+    }
+
+    window.toggles.CASEDETAILS_IN_CLOUDCARE_FORMS =  {{ request|toggle_enabled:"CASEDETAILS_IN_CLOUDCARE_FORMS"|BOOL }};
+
     var translatedStrings = {
         saved : "{% trans "Form successfully saved" %}",
         loading : "{% trans "Loading..." %}",
@@ -180,11 +186,14 @@ <h3>No Apps found</h3>
             <img width="32" height="32" alt="Loading" src="{% static 'formplayer/img/loading_transparent.gif' %}" />
             {% trans "Loading" %}...
         </div>
-        <section id="case-crumbs"></section>
+        <section id="case-crumbs" style="width: 800px"></section>
         <section id="cases"></section>
         <section id="webforms" style="min-width: 800px;"></section>
     </div>
 
+    {% if request|toggle_enabled:'CASEDETAILS_IN_CLOUDCARE_FORMS' %}
+    {% include 'cloudcare/includes/case_details.html' %}
+    {% else %}
     <script type="text/html" id="template-crumbs">
         <% if (childCase || parentCase ){ %>
         <ul class='breadcrumb'>
@@ -209,5 +218,6 @@ <h3>No Apps found</h3>
         </ul>
         <% } %>
     </script>
+    {% endif %}
 
 {% endblock %}
diff --git a/corehq/apps/cloudcare/templates/cloudcare/includes/case_details.html b/corehq/apps/cloudcare/templates/cloudcare/includes/case_details.html
@@ -0,0 +1,66 @@
+{% load i18n %}
+
+<script type="text/html" id="template-crumbs">
+    <% if (childCase || parentCase ){ %>
+    <div class="accordion-group" id="case-details">
+        <div class="accordion-heading accordion-toggle collapsed" data-toggle="collapse" href="#details-list">
+            <ul class='breadcrumb'>
+                <i class="icon-double-angle-down"></i>
+                <li>{% trans "Selected Case:" %}</li>
+                    <% if (parentCase){ %>
+                    <li <% if (childCase == null){ %> class="active" <% } %>>
+                        <% if (parentCase.href){ %>
+                        <a href="<%= parentCase.href %>">
+                            <%= parentCase.text %>
+                        </a>
+                        <% } else { %>
+                            <%= parentCase.text %>
+                        <% } %>
+                        <% if (parentCase && childCase) { %>
+                        <span class="divider">/</span>
+                        <% } %>
+                    </li>
+                    <% } %>
+                <% if (childCase) { %>
+                <li class="active"><%= childCase.text %></li>
+                <% } %>
+            </ul>
+        </div>
+        <div id="details-list" class="accordion-body collapse">
+            <% if (parentCase) { %>
+            <table class="table table-striped datatable">
+                <thead>
+                    <tr><th colspan="2">{% trans "Case Details for parent: " %}<%= parentCase.text %></th></tr>
+                </thead>
+                <tbody>
+                    <% _.each(parentCase.properties,function(field){ %>
+                        <tr>
+                            <th><%= field.key %></th>
+                            <td><%= field.value %></td>
+                        </tr>
+                    <% }); %>
+                </tbody>
+            </table>
+            <% if (parentCase && childCase) { %>
+                        <br class="divider"></br>
+                        <% } %>
+            <% } %>
+            <% if (childCase) { %>
+            <table class="table table-striped datatable">
+                <thead>
+                    <tr><th colspan="2">{% trans "Case Details for: " %}<%= childCase.text %></th></tr>
+                </thead>
+                <tbody>
+                    <% _.each(childCase.properties,function(field){ %>
+                        <tr>
+                            <th><%= field.key %></th>
+                            <td><%= field.value %></td>
+                        </tr>
+                    <% }); %>
+                </tbody>
+            </table>
+            <% } %>
+        </div>
+    </div>
+    <% } %>
+</script>
diff --git a/corehq/toggles.py b/corehq/toggles.py
@@ -273,3 +273,9 @@ def toggles_dict(username=None, domain=None):
     "Explicitly allow user to access case attachments, even if they can't view the case list report.",
     [NAMESPACE_DOMAIN, NAMESPACE_USER]
 )
+
+CASEDETAILS_IN_CLOUDCARE_FORMS = StaticToggle(
+    'case_details_in_cloudcare_forms',
+    'Display details of the selected case on top in CloudCare if a form uses Case Management',
+    [NAMESPACE_DOMAIN, NAMESPACE_USER]
+)