+
+ <text>
+ <locale id="cchq.case"/>
+ </text>
+
+
+
+ <text>
+ <locale id="m0.case_long.tab.1.title"/>
+ </text>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <text>
+ <locale id="m0.case_long.tab.2.title"/>
+ </text>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/corehq/apps/app_manager/tests/data/suite/case-tile-case-detail.xml b/corehq/apps/app_manager/tests/data/suite/case-tile-case-detail.xml
new file mode 100644
index 000000000000..a148da24ab77
--- /dev/null
+++ b/corehq/apps/app_manager/tests/data/suite/case-tile-case-detail.xml
@@ -0,0 +1,39 @@
+
+
+
+ <text>
+ <locale id="cchq.case"/>
+ </text>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/corehq/apps/app_manager/tests/test_build_errors.py b/corehq/apps/app_manager/tests/test_build_errors.py
index b41adcb8789d..7570c03cc94b 100644
--- a/corehq/apps/app_manager/tests/test_build_errors.py
+++ b/corehq/apps/app_manager/tests/test_build_errors.py
@@ -18,6 +18,7 @@
CaseSearchLabel,
CaseSearchProperty,
DetailColumn,
+ DetailTab,
FormLink,
Module,
)
@@ -132,7 +133,7 @@ def test_parent_cycle_in_app(self, *args):
self._clean_unique_id(errors)
self.assertIn(cycle_error, errors)
- def test_case_tile_configuration_errors(self, *args):
+ def test_case_tile_mapping_errors(self, *args):
case_tile_error = {
'type': "invalid tile configuration",
'module': {'id': 0, 'name': {'en': 'View'}},
@@ -147,6 +148,83 @@ def test_case_tile_configuration_errors(self, *args):
self._clean_unique_id(errors)
self.assertIn(case_tile_error, errors)
+ def test_case_tile_case_detail(self, *args):
+ case_tile_error = {
+ 'type': 'invalid tile configuration',
+ 'module': {'id': 0, 'name': {'en': 'Add Song module'}},
+ 'reason': 'Case tiles on the case detail must be manually configured.',
+ }
+ factory = AppFactory(build_version='2.51.0')
+ app = factory.app
+ module = factory.new_basic_module('Add Song', 'song', with_form=False)
+ module.case_details.long.case_tile_template = "one_3X_two_4X_one_2X"
+ module.case_details.long.columns.append(DetailColumn(
+ format='plain',
+ field='artist',
+ header={'en': 'Artist'},
+ ))
+
+ errors = app.validate_app()
+ self._clean_unique_id(errors)
+ self.assertIn(case_tile_error, errors)
+
+ module.case_details.long.case_tile_template = "custom"
+ errors = app.validate_app()
+ self._clean_unique_id(errors)
+ self.assertNotIn(case_tile_error, errors)
+
+ def test_case_tile_case_detail_tabs(self, *args):
+ case_tile_error = {
+ 'type': 'invalid tile configuration',
+ 'module': {'id': 0, 'name': {'en': 'Add Song module'}},
+ 'reason': 'Each row of the tile may contain fields only from a single tab. '
+ 'Row #1 contains fields from multiple tabs.'
+ }
+ factory = AppFactory(build_version='2.51.0')
+ app = factory.app
+ module = factory.new_basic_module('Add Song', 'song', with_form=False)
+ module.case_details.long.case_tile_template = "custom"
+
+ # Start with a legitimate tab+column layout
+ module.case_details.long.tabs = [
+ DetailTab(starting_index=0),
+ DetailTab(starting_index=2),
+ ]
+ module.case_details.long.columns = []
+ module.case_details.long.columns.append(DetailColumn(
+ format='plain',
+ field='artist', header={'en': 'Artist'},
+ grid_x=0, grid_y=0, width=4, height=1,
+ ))
+ module.case_details.long.columns.append(DetailColumn(
+ format='plain',
+ field='name', header={'en': 'Name'},
+ grid_x=5, grid_y=0, width=4, height=1,
+ ))
+ module.case_details.long.columns.append(DetailColumn(
+ format='plain',
+ field='mood', header={'en': 'Mood'},
+ grid_x=0, grid_y=1, width=4, height=1,
+ ))
+ module.case_details.long.columns.append(DetailColumn(
+ format='plain',
+ field='energy', header={'en': 'Energy'},
+ grid_x=5, grid_y=1, width=4, height=1,
+ ))
+
+ module.case_details.long_case_tile_template = "custom"
+ errors = app.validate_app()
+ self._clean_unique_id(errors)
+ self.assertNotIn(case_tile_error, errors)
+
+ # Move field from second tab into first row of tile
+ module.case_details.long.columns[2].grid_y = 0
+ module.case_details.long.columns[2].grid_x = 9
+
+ errors = app.validate_app()
+ self._clean_unique_id(errors)
+ self.assertIn(case_tile_error, errors)
+
def create_app_with_module(self):
factory = AppFactory(build_version='2.51.0')
app = factory.app
diff --git a/corehq/apps/app_manager/tests/test_suite_custom_case_tiles.py b/corehq/apps/app_manager/tests/test_suite_custom_case_tiles.py
index 3b5df18f3861..4b04886cebea 100644
--- a/corehq/apps/app_manager/tests/test_suite_custom_case_tiles.py
+++ b/corehq/apps/app_manager/tests/test_suite_custom_case_tiles.py
@@ -3,8 +3,10 @@
from corehq.apps.app_manager.models import (
Application,
DetailColumn,
+ DetailTab,
Module,
)
+from corehq.apps.app_manager.tests.app_factory import AppFactory
from corehq.apps.app_manager.tests.util import (
SuiteMixin,
patch_get_xform_resource_overrides,
@@ -31,6 +33,7 @@ def add_columns_for_case_details(_module, field='a', format='plain', useXpathExp
@patch_get_xform_resource_overrides()
class SuiteCustomCaseTilesTest(SimpleTestCase, SuiteMixin):
+ file_path = ('data', 'suite')
def test_custom_case_tile(self, *args):
app = Application.new_app('domain', 'Untitled Application')
@@ -84,10 +87,9 @@ def test_custom_case_tile(self, *args):
self.assertXmlDoesNotHaveXpath(suite, "./detail[@id='m0_case_short']/field[2]")
def test_custom_case_tile_address(self, *args):
- app = Application.new_app('domain', 'Untitled Application')
-
- module = app.add_module(Module.new_module('Untitled Module', None))
- module.case_type = 'patient'
+ factory = AppFactory(build_version='2.51.0')
+ app = factory.app
+ module = factory.new_basic_module('register', 'patient', with_form=False)
module.case_details.short.case_tile_template = "custom"
add_columns_for_case_details(module, format='address')
@@ -116,10 +118,9 @@ def test_custom_case_tile_address(self, *args):
)
def test_custom_case_tile_empty_style(self, *args):
- app = Application.new_app('domain', 'Untitled Application')
-
- module = app.add_module(Module.new_module('Untitled Module', None))
- module.case_type = 'patient'
+ factory = AppFactory(build_version='2.51.0')
+ app = factory.app
+ module = factory.new_basic_module('register', 'patient', with_form=False)
module.case_details.short.case_tile_template = "custom"
module.case_details.short.columns = [
DetailColumn(
@@ -150,3 +151,73 @@ def test_custom_case_tile_empty_style(self, *args):
app.create_suite(),
"./detail[@id='m0_case_short']/field[1]"
)
+
+ def test_case_tile_for_case_detail(self, *args):
+ factory = AppFactory(build_version='2.51.0')
+ app = factory.app
+ module, form = factory.new_basic_module('Add Song', 'song')
+ module.case_details.long.case_tile_template = "custom"
+
+ module.case_details.long.columns = [
+ DetailColumn(
+ model='case', format='plain',
+ field='artist', header={'en': 'Artist'},
+ grid_x=0, grid_y=0, width=4, height=1,
+ ),
+ DetailColumn(
+ model='case', format='plain',
+ field='name', header={'en': 'Name'},
+ grid_x=5, grid_y=0, width=4, height=1,
+ ),
+ ]
+
+ self.assertXmlPartialEqual(
+ self.get_xml('case-tile-case-detail'),
+ app.create_suite(),
+ "./detail[@id='m0_case_long']"
+ )
+
+ def test_case_tile_for_case_detail_tabs(self, *args):
+ factory = AppFactory(build_version='2.51.0')
+ app = factory.app
+ module, form = factory.new_basic_module('Add Song', 'song')
+ module.case_details.long.case_tile_template = "custom"
+
+ module.case_details.long.tabs = [
+ DetailTab(starting_index=0),
+ DetailTab(starting_index=2),
+ ]
+
+ module.case_details.long.columns = [
+ DetailColumn(
+ model='case', format='plain',
+ field='artist', header={'en': 'Artist'},
+ grid_x=0, grid_y=0, width=6, height=1,
+ ),
+ DetailColumn(
+ model='case', format='plain',
+ field='name', header={'en': 'Name'},
+ grid_x=5, grid_y=0, width=6, height=1,
+ ),
+ DetailColumn(
+ model='case', format='plain',
+ field='rating', header={'en': 'Rating'},
+ grid_x=0, grid_y=1, width=4, height=1,
+ ),
+ DetailColumn(
+ model='case', format='plain',
+ field='energy', header={'en': 'Energy'},
+ grid_x=5, grid_y=1, width=4, height=1,
+ ),
+ DetailColumn(
+ model='case', format='plain',
+ field='mood', he1der={'en': 'Mood'},
+ grid_x=9, grid_y=1, width=4, height=1,
+ ),
+ ]
+
+ self.assertXmlPartialEqual(
+ self.get_xml('case-tile-case-detail-tabs'),
+ app.create_suite(),
+ "./detail[@id='m0_case_long']"
+ )
diff --git a/corehq/apps/app_manager/views/modules.py b/corehq/apps/app_manager/views/modules.py
index 40f5e69ac84f..a02ed94acd5b 100644
--- a/corehq/apps/app_manager/views/modules.py
+++ b/corehq/apps/app_manager/views/modules.py
@@ -1197,6 +1197,7 @@ def edit_module_detail_screens(request, domain, app_id, module_unique_id):
parent_select = params.get('parent_select', None)
fixture_select = params.get('fixture_select', None)
sort_elements = params.get('sort_elements', None)
+ case_tile_template = params.get('caseTileTemplate', None)
print_template = params.get('printTemplate', None)
custom_variables_dict = {
'short': params.get("short_custom_variables_dict", None),
@@ -1232,6 +1233,11 @@ def edit_module_detail_screens(request, domain, app_id, module_unique_id):
# Note that we use the empty tuple as the sentinel because a filter
# value of None represents clearing the filter.
detail.short.filter = filter
+ if case_tile_template is not None:
+ if short is not None:
+ detail.short.case_tile_template = case_tile_template
+ else:
+ detail.long.case_tile_template = case_tile_template
if custom_xml is not None:
detail.short.custom_xml = custom_xml
@@ -1416,7 +1422,6 @@ def _set_if_not_none(param_name, attribute_name=None):
if value is not None:
setattr(detail.short, attribute_name or param_name, value)
- _set_if_not_none('caseTileTemplate', 'case_tile_template')
_set_if_not_none('persistTileOnForms', 'persist_tile_on_forms')
_set_if_not_none('persistentCaseTileFromModule', 'persistent_case_tile_from_module')
_set_if_not_none('enableTilePullDown', 'pull_down_tile')
diff --git a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/controller.js b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/controller.js
index a0a4b58bdbb1..0f1420e4a646 100644
--- a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/controller.js
+++ b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/controller.js
@@ -202,15 +202,21 @@ hqDefine("cloudcare/js/formplayer/menus/controller", function () {
}
return;
}
- var detailObject = detailObjects[detailTabIndex];
- var menuListView = getDetailList(detailObject);
-
var tabModels = _.map(detailObjects, function (detail, index) {
return {title: detail.get('title'), id: index, active: index === detailTabIndex};
});
var tabCollection = new Backbone.Collection();
tabCollection.reset(tabModels);
+ let contentView;
+ const detailObject = detailObjects[detailTabIndex],
+ usesCaseTiles = detailObject.get('usesCaseTiles');
+ if (usesCaseTiles && !detailObject.get('entities')) {
+ contentView = getCaseTile(detailObject.toJSON());
+ } else {
+ contentView = getDetailList(detailObject);
+ }
+
var tabListView = views.DetailTabListView({
collection: tabCollection,
onTabClick: function (detailTabIndex) {
@@ -223,7 +229,7 @@ hqDefine("cloudcare/js/formplayer/menus/controller", function () {
isMultiSelect: isMultiSelect,
});
$('#case-detail-modal').find('.js-detail-tabs').html(tabListView.render().el);
- $('#case-detail-modal').find('.js-detail-content').html(menuListView.render().el);
+ $('#case-detail-modal').find('.js-detail-content').html(contentView.render().el);
$('#case-detail-modal').find('.js-detail-footer-content').html(detailFooterView.render().el);
$('#case-detail-modal').modal('show');
@@ -248,8 +254,12 @@ hqDefine("cloudcare/js/formplayer/menus/controller", function () {
collection: listCollection,
headers: detailObject.get('headers'),
styles: detailObject.get('styles'),
+ tiles: detailObject.get('tiles'),
title: detailObject.get('title'),
};
+ if (detailObject.get('usesCaseTiles')) {
+ return views.CaseTileDetailView(menuData);
+ }
return views.CaseListDetailView(menuData);
}
@@ -279,7 +289,7 @@ hqDefine("cloudcare/js/formplayer/menus/controller", function () {
});
};
- // return a case tile from a detail object (for persistent case tile)
+ // return a case tile from a detail object (for persistent case tile and case tile in case detail)
var getCaseTile = function (detailObject) {
var detailModel = new Backbone.Model({
data: detailObject.details,
diff --git a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js
index 31bea2283f8a..cb21ef78123a 100644
--- a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js
+++ b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js
@@ -473,6 +473,34 @@ hqDefine("cloudcare/js/formplayer/menus/views", function () {
},
});
+ const CaseTileViewUnclickable = CaseTileView.extend({
+ events: {},
+ className: "list-cell-wrapper-style panel panel-default",
+ rowClick: function () {},
+ });
+
+ const initCaseTileList = function (options) {
+ const numEntitiesPerRow = options.numEntitiesPerRow || 1;
+ const numRows = options.maxHeight;
+ const numColumns = options.maxWidth;
+ const useUniformUnits = options.useUniformUnits;
+
+ const caseTileStyles = buildCaseTileStyles(options.tiles, options.styles, numRows, numColumns,
+ numEntitiesPerRow, useUniformUnits, 'list');
+
+ const gridPolyfillPath = FormplayerFrontend.getChannel().request('gridPolyfillPath');
+
+ $("#list-cell-layout-style").html(caseTileStyles.cellLayoutStyle).data("css-polyfilled", false);
+ $("#list-cell-grid-style").html(caseTileStyles.cellGridStyle).data("css-polyfilled", false);
+ // If we have multiple cases per line, need to generate the outer grid style as well
+ if (caseTileStyles.cellWrapperStyle && caseTileStyles.cellContainerStyle) {
+ $("#list-cell-wrapper-style").html(caseTileStyles.cellWrapperStyle).data("css-polyfilled", false);
+ $("#list-cell-container-style").html(caseTileStyles.cellContainerStyle).data("css-polyfilled", false);
+ }
+
+ $.getScript(gridPolyfillPath);
+ };
+
const CaseTileGroupedView = CaseTileView.extend({
tagName: "div",
className: "formplayer-request list-cell-wrapper-style case-tile-group panel panel-default",
@@ -540,7 +568,9 @@ hqDefine("cloudcare/js/formplayer/menus/views", function () {
});
const PersistentCaseTileView = CaseTileView.extend({
- className: "formplayer-request persistent-sticky",
+ className: function () {
+ return "persistent-sticky" + (this.options.hasInlineTile ? " formplayer-request" : "");
+ },
rowClick: function (e) {
e.preventDefault();
if (this.options.hasInlineTile) {
@@ -599,8 +629,8 @@ hqDefine("cloudcare/js/formplayer/menus/views", function () {
},
initialize: function (options) {
- const self = this;
- var sidebarNoItemsText = gettext("Please perform a search.");
+ const self = this,
+ sidebarNoItemsText = gettext("Please perform a search.");
self.styles = options.styles;
self.hasNoItems = options.collection.length === 0 || options.triggerEmptyCaseList;
self.noItemsText = options.triggerEmptyCaseList ? sidebarNoItemsText : this.options.collection.noItemsText;
@@ -1086,26 +1116,7 @@ hqDefine("cloudcare/js/formplayer/menus/views", function () {
initialize: function (options) {
CaseTileListView.__super__.initialize.apply(this, arguments);
-
- const numEntitiesPerRow = options.numEntitiesPerRow || 1;
- const numRows = options.maxHeight;
- const numColumns = options.maxWidth;
- const useUniformUnits = options.useUniformUnits;
-
- const caseTileStyles = buildCaseTileStyles(options.tiles, options.styles, numRows, numColumns,
- numEntitiesPerRow, useUniformUnits, 'list');
-
- const gridPolyfillPath = FormplayerFrontend.getChannel().request('gridPolyfillPath');
-
- $("#list-cell-layout-style").html(caseTileStyles.cellLayoutStyle).data("css-polyfilled", false);
- $("#list-cell-grid-style").html(caseTileStyles.cellGridStyle).data("css-polyfilled", false);
- // If we have multiple cases per line, need to generate the outer grid style as well
- if (caseTileStyles.cellWrapperStyle && caseTileStyles.cellContainerStyle) {
- $("#list-cell-wrapper-style").html(caseTileStyles.cellWrapperStyle).data("css-polyfilled", false);
- $("#list-cell-container-style").html(caseTileStyles.cellContainerStyle).data("css-polyfilled", false);
- }
-
- $.getScript(gridPolyfillPath);
+ initCaseTileList(options);
registerContinueListener(this, options);
},
@@ -1213,6 +1224,21 @@ hqDefine("cloudcare/js/formplayer/menus/views", function () {
template: _.template($("#case-view-list-detail-template").html() || ""),
childView: CaseViewUnclickable,
});
+ const CaseTileDetailView = CaseListView.extend({
+ template: _.template($("#case-view-tile-detail-template").html() || ""),
+ childView: CaseTileViewUnclickable,
+
+ initialize: function (options) {
+ CaseTileDetailView.__super__.initialize.apply(this, arguments);
+ initCaseTileList(options);
+ },
+
+ childViewOptions: function () {
+ const dict = CaseTileDetailView.__super__.childViewOptions.apply(this, arguments);
+ dict.prefix = 'list';
+ return dict;
+ },
+ });
const BreadcrumbView = Marionette.View.extend({
tagName: "li",
@@ -1446,6 +1472,9 @@ hqDefine("cloudcare/js/formplayer/menus/views", function () {
CaseListDetailView: function (options) {
return new CaseListDetailView(options);
},
+ CaseTileDetailView: function (options) {
+ return new CaseTileDetailView(options);
+ },
CaseListView: function (options) {
return new CaseListView(options);
},
diff --git a/corehq/apps/cloudcare/templates/formplayer/case_list.html b/corehq/apps/cloudcare/templates/formplayer/case_list.html
index 5af57581b198..ab82c658d01c 100644
--- a/corehq/apps/cloudcare/templates/formplayer/case_list.html
+++ b/corehq/apps/cloudcare/templates/formplayer/case_list.html
@@ -331,3 +331,7 @@
<%- title %>