Case tiles for case detail

corehq/apps/app_manager/helpers/validators.py

@@ -642,19 +642,35 @@ def validate_details_for_build(self):
 
         for detail in [self.module.case_details.short, self.module.case_details.long]:
             if detail.case_tile_template:
-                if not detail.display == "short":
-                    errors.append({
-                        'type': self.__invalid_tile_configuration_type,
-                        'module': self.get_module_info(),
-                        'reason': _('Case tiles may only be used for the case list (not the case details).')
-                    })
+                if detail.display != "short":
+                    if detail.case_tile_template != "custom":
+                        errors.append({
+                            'type': self.__invalid_tile_configuration_type,
+                            'module': self.get_module_info(),
+                            'reason': _('Case tiles on the case detail must be manually configured.'),
+                        })
+
+                    tab_spans = detail.get_tab_spans()
+                    tile_rows = defaultdict(set)   # tile row index => {tabs that appear in that row}
+                    for index, span in enumerate(tab_spans):
+                        for col in detail.columns[span[0]:span[1]]:
+                            if col.grid_y is not None:
+                                tile_rows[col.grid_y].add(index)
+                    for row_index, tab_index_list in tile_rows.items():
+                        if len(tab_index_list) > 1:
+                            errors.append({
+                                'type': self.__invalid_tile_configuration_type,
+                                'module': self.get_module_info(),
+                                'reason': _('Each row of the tile may contain fields only from a single tab. '
+                                            'Row #{} contains fields from multiple tabs.').format(row_index + 1),
+                            })
                 col_by_tile_field = {c.case_tile_field: c for c in detail.columns}
                 for field in case_tile_template_config(detail.case_tile_template).fields:
                     if field not in col_by_tile_field:
                         errors.append({
                             'type': self.__invalid_tile_configuration_type,
                             'module': self.get_module_info(),
-                            'reason': _('A case property must be assigned to the "{}" tile field.'.format(field))
+                            'reason': _('A case property must be assigned to the "{}" tile field.').format(field)
                         })
             self._validate_fields_with_format_duplicate('address', 'Address', detail.columns, errors)
             self._validate_clickable_icons(detail.columns, errors)

corehq/apps/app_manager/static/app_manager/js/details/column.js

@@ -48,6 +48,23 @@ hqDefine("app_manager/js/details/column", function () {
         });
         self.original.late_flag = _.isNumber(self.original.late_flag) ? self.original.late_flag : 30;
 
+        // Set up tab defaults
+        const tabDefaults = {
+            isTab: false,
+            hasNodeset: false,
+            nodeset: "",
+            nodesetCaseType: "",
+            nodesetFilter: "",
+            relevant: "",
+        };
+        self.original = _.defaults(self.original, tabDefaults);
+        let screenHasChildCaseTypes = screen.childCaseTypes && screen.childCaseTypes.length;
+        if (!self.original.nodeset && !self.original.nodesetCaseType && screenHasChildCaseTypes) {
+            // If there's no nodeset but there are child case types, default to showing a case type
+            self.original.nodesetCaseType = screen.childCaseTypes[0];
+        }
+        _.extend(self, _.pick(self.original, _.keys(tabDefaults)));
+
         self.original.case_tile_field = ko.utils.unwrapObservable(self.original.case_tile_field) || "";
         self.case_tile_field = ko.observable(self.original.case_tile_field);
 
@@ -99,30 +116,13 @@ hqDefine("app_manager/js/details/column", function () {
             return Number(self.tileColumnStart()) + Number(self.tileWidth());
         });
         self.showInTilePreview = ko.computed(function () {
-            return self.coordinatesVisible() && self.tileRowStart() && self.tileColumnStart() && self.tileWidth() && self.tileHeight();
+            return !self.isTab && self.coordinatesVisible() && self.tileRowStart() && self.tileColumnStart() && self.tileWidth() && self.tileHeight();
         });
         self.tileContent = ko.observable();
         self.setTileContent = function () {
             self.tileContent(self.header.val());
         };
 
-        // Set up tab defaults
-        const tabDefaults = {
-            isTab: false,
-            hasNodeset: false,
-            nodeset: "",
-            nodesetCaseType: "",
-            nodesetFilter: "",
-            relevant: "",
-        };
-        self.original = _.defaults(self.original, tabDefaults);
-        let screenHasChildCaseTypes = screen.childCaseTypes && screen.childCaseTypes.length;
-        if (!self.original.nodeset && !self.original.nodesetCaseType && screenHasChildCaseTypes) {
-            // If there's no nodeset but there are child case types, default to showing a case type
-            self.original.nodesetCaseType = screen.childCaseTypes[0];
-        }
-        _.extend(self, _.pick(self.original, _.keys(tabDefaults)));
-
         self.screen = screen;
         self.lang = screen.lang;
         self.model = uiElement.select([{

corehq/apps/app_manager/static/app_manager/js/details/screen.js

@@ -64,8 +64,11 @@
         if (hqImport('hqwebapp/js/toggles').toggleEnabled('CASE_LIST_TILE_CUSTOM')) {
             baseCaseTileTemplateOptions = baseCaseTileTemplateOptions.concat([["custom", gettext("Manually configure Case Tiles")]]);
         }
+        if (self.columnKey === 'short') {
+            baseCaseTileTemplateOptions = baseCaseTileTemplateOptions.concat(options.caseTileTemplateOptions);
+        }
 
-        self.caseTileTemplateOptions = baseCaseTileTemplateOptions.concat(options.caseTileTemplateOptions);
+        self.caseTileTemplateOptions = baseCaseTileTemplateOptions;
         self.caseTileTemplateOptions = self.caseTileTemplateOptions.map(function (templateOption) {
             return {templateValue: templateOption[0], templateName: templateOption[1]};
         });
@@ -150,6 +153,21 @@
             });
         };
 
+        // Given a column model, return a boolean indicating whether the column is on an odd
+        // or an even tab, for the sake of being able to differentiate in the case tile preview
+        // which rows go with which tab.
+        self.tabPolarity = function (column) {
+            var self = this,
+                flag = false;
+            _.find(self.columns(), function (c, i) {
+                if (c.isTab) {
+                    flag = !flag;
+                }
+                return c === column;
+            });
+            return flag;
+        };
+
         self.adjustTileGridArea = function (activeColumnIndex, rowDelta, columnDelta, widthDelta, heightDelta) {
             let matrix = self._buildMatrix();
             matrix = self._adjustTileGridArea(matrix, activeColumnIndex, rowDelta, columnDelta, widthDelta, heightDelta);

corehq/apps/app_manager/suite_xml/features/case_tiles.py

@@ -11,7 +11,7 @@
 from corehq.apps.app_manager import id_strings
 from corehq.apps.app_manager.exceptions import SuiteError
 from corehq.apps.app_manager.suite_xml.xml_models import (
-    Detail, XPathVariable, Text, TileGroup, Style, EndpointAction
+    Detail, XPathVariable, TileGroup, Style, EndpointAction
 )
 from corehq.apps.app_manager.util import (
     module_offers_search,
@@ -75,7 +75,7 @@ def __init__(self, app, module, detail, detail_id, detail_type, build_profile_id
         self.detail_column_infos = detail_column_infos
         self.entries_helper = entries_helper
 
-    def build_case_tile_detail(self):
+    def build_case_tile_detail(self, detail, start, end):
         from corehq.apps.app_manager.suite_xml.sections.details import DetailContributor
         """
         Return a Detail node from an apps.app_manager.models.Detail that is
@@ -87,10 +87,10 @@ def build_case_tile_detail(self):
 
         if self.detail.case_tile_template == CUSTOM:
             from corehq.apps.app_manager.detail_screen import get_column_generator
-            title = Text(locale_id=id_strings.detail_title_locale(self.detail_type))
-            detail = Detail(id=self.detail_id, title=title)
 
-            for column_info in self.detail_column_infos:
+            start = start or 0
+            end = end or len(self.detail_column_infos)
+            for column_info in self.detail_column_infos[start:end]:
                 # column_info is an instance of DetailColumnInfo named tuple.
                 style = None
                 if any(field is not None for field in [column_info.column.grid_x, column_info.column.grid_y,
@@ -133,29 +133,30 @@ def build_case_tile_detail(self):
                 self.app, self.module, detail.actions, self.build_profile_id, self.entries_helper)
 
         # Add case search action if needed
-        if module_offers_search(self.module) and not module_uses_inline_search(self.module):
-            if (case_search_action := DetailContributor.get_case_search_action(
-                self.module,
-                self.build_profile_id,
-                self.detail_id
-            )) is not None:
-                detail.actions.append(case_search_action)
-
-        #  Excludes legacy tile template to preserve behavior of existing apps using this template.
-        if self.detail.case_tile_template not in [CaseTileTemplates.PERSON_SIMPLE.value, CUSTOM]:
-            self._populate_sort_elements_in_detail(detail)
-
-        DetailContributor.add_no_items_text_to_detail(detail, self.app, self.detail_type, self.module)
-
-        if self.module.has_grouped_tiles():
-            detail.tile_group = TileGroup(
-                function=f"string(./index/{self.detail.case_tile_group.index_identifier})",
-                header_rows=self.detail.case_tile_group.header_rows
-            )
+        if self.detail_type.endswith('short'):
+            if module_offers_search(self.module) and not module_uses_inline_search(self.module):
+                if (case_search_action := DetailContributor.get_case_search_action(
+                    self.module,
+                    self.build_profile_id,
+                    self.detail_id
+                )) is not None:
+                    detail.actions.append(case_search_action)
+
+            #  Excludes legacy tile template to preserve behavior of existing apps using this template.
+            if self.detail.case_tile_template not in [CaseTileTemplates.PERSON_SIMPLE.value, CUSTOM]:
+                self._populate_sort_elements_in_detail(detail)
+
+            DetailContributor.add_no_items_text_to_detail(detail, self.app, self.detail_type, self.module)
+
+            if self.module.has_grouped_tiles():
+                detail.tile_group = TileGroup(
+                    function=f"string(./index/{self.detail.case_tile_group.index_identifier})",
+                    header_rows=self.detail.case_tile_group.header_rows
+                )
+
+            if hasattr(self.module, 'lazy_load_case_list_fields') and self.module.lazy_load_case_list_fields:
+                detail.lazy_loading = self.module.lazy_load_case_list_fields
 
-        if (self.detail_type == 'case_short' or self.detail_type == 'search_short') \
-                and hasattr(self.module, 'lazy_load_case_list_fields') and self.module.lazy_load_case_list_fields:
-            detail.lazy_loading = self.module.lazy_load_case_list_fields
         return detail
 
     def _get_matched_detail_column(self, case_tile_field):

corehq/apps/app_manager/suite_xml/sections/details.py

@@ -116,31 +116,23 @@ def get_section_elements(self):
                         )  # list of DetailColumnInfo named tuples
                     if detail_column_infos:
                         detail_id = id_strings.detail(module, detail_type)
-                        if detail.case_tile_template:
-                            helper = CaseTileHelper(self.app, module, detail, detail_id, detail_type,
-                                self.build_profile_id, detail_column_infos, self.entries_helper)
-
-                            d = helper.build_case_tile_detail()
-                            self._add_custom_variables(detail, d)
+                        print_template_path = None
+                        if detail.print_template:
+                            print_template_path = detail.print_template['path']
+                        locale_id = id_strings.detail_title_locale(detail_type)
+                        title = Text(locale_id=locale_id) if locale_id else Text()
+                        d = self.build_detail(
+                            module,
+                            detail_type,
+                            detail,
+                            detail_column_infos,
+                            title,
+                            tabs=list(detail.get_tabs()),
+                            id=detail_id,
+                            print_template=print_template_path,
+                        )
+                        if d:
                             elements.append(d)
-                        else:
-                            print_template_path = None
-                            if detail.print_template:
-                                print_template_path = detail.print_template['path']
-                            locale_id = id_strings.detail_title_locale(detail_type)
-                            title = Text(locale_id=locale_id) if locale_id else Text()
-                            d = self.build_detail(
-                                module,
-                                detail_type,
-                                detail,
-                                detail_column_infos,
-                                tabs=list(detail.get_tabs()),
-                                id=detail_id,
-                                title=title,
-                                print_template=print_template_path,
-                            )
-                            if d:
-                                elements.append(d)
 
                     # add the persist case context if needed and if
                     # case tiles are present and have their own persistent block
@@ -159,8 +151,8 @@ def get_section_elements(self):
 
         return elements
 
-    def build_detail(self, module, detail_type, detail, detail_column_infos, tabs=None, id=None,
-                     title=None, nodeset=None, print_template=None, start=0, end=None, relevant=None):
+    def build_detail(self, module, detail_type, detail, detail_column_infos, title, tabs=None, id=None,
+                     nodeset=None, print_template=None, start=0, end=None, relevant=None):
         """
         Recursively builds the Detail object.
         (Details can contain other details for each of their tabs)
@@ -185,7 +177,7 @@ def build_detail(self, module, detail_type, detail, detail_column_infos, tabs=No
                     detail_type,
                     detail,
                     detail_column_infos,
-                    title=Text(locale_id=id_strings.detail_tab_title_locale(
+                    Text(locale_id=id_strings.detail_tab_title_locale(
                         module, detail_type, tab
                     )),
                     nodeset=self._get_detail_tab_nodeset(module, detail, tab),
@@ -223,19 +215,33 @@ def build_detail(self, module, detail_type, detail, detail_column_infos, tabs=No
             )
             if variables:
                 d.variables.extend(variables)
-
-            # Add fields
             if end is None:
                 end = len(detail_column_infos)
-            for column_info in detail_column_infos[start:end]:
-                # column_info is an instance of DetailColumnInfo named tuple.
-                fields = get_column_generator(
-                    self.app, module, detail, parent_tab_nodeset=nodeset,
-                    detail_type=detail_type, entries_helper=self.entries_helper,
-                    *column_info
-                ).fields
-                for field in fields:
-                    d.fields.append(field)
+
+            # Add fields
+            if detail.case_tile_template:
+                detail_id = id_strings.detail(module, detail_type)
+                helper = CaseTileHelper(
+                    self.app,
+                    module,
+                    detail,
+                    detail_id,
+                    detail_type,
+                    self.build_profile_id,
+                    detail_column_infos,
+                    self.entries_helper,
+                )
+                d = helper.build_case_tile_detail(d, start, end)
+            else:
+                for column_info in detail_column_infos[start:end]:
+                    # column_info is an instance of DetailColumnInfo named tuple.
+                    fields = get_column_generator(
+                        self.app, module, detail, parent_tab_nodeset=nodeset,
+                        detail_type=detail_type, entries_helper=self.entries_helper,
+                        *column_info
+                    ).fields
+                    for field in fields:
+                        d.fields.append(field)
 
             # Add actions
             if detail_type.endswith('short') and not module.put_in_root:

corehq/apps/app_manager/templates/app_manager/partials/modules/case_detail.html

@@ -19,6 +19,11 @@ <h4 class="panel-title panel-title-nolink">
     </h4>
   </div>
   <div class="panel-body" data-bind="with: longScreen">
+    {% if request|toggle_enabled:'CASE_DETAIL_TILE' %}
+      {% include 'app_manager/partials/modules/case_tile_templates.html' %}
+      {% include 'app_manager/partials/modules/case_tile_preview.html' %}
+    {% endif %}
+
     {% include 'app_manager/partials/modules/case_list_properties.html' %}
   </div>
 </div>