#1256 | First draft code changes to support nested reportCards on cus…

…tomDashboard

packages/openchs-android/src/action/customDashboard/CustomDashboardActions.js

@@ -73,7 +73,8 @@ class CustomDashboardActions {
     // This action is responsible for loading data for multiple views. If any of the views have to be updated then this mega action has to be invoked and duplicating the callback implementation on the action. We have to break this action into smaller actions for each view. Starting with task here, which is why it invokes a different callback and the service doesn't handle task.
     static onCardPress(state, action, context) {
         const newState = {...state};
-        const reportCard = context.get(EntityService).findByUUID(action.reportCardUUID, ReportCard.schema.name);
+        const rcUUID = action.reportCardUUID.substring(0, action.reportCardUUID.indexOf('#'));
+        const reportCard = context.get(EntityService).findByUUID(rcUUID, ReportCard.schema.name);
         if (reportCard.isStandardTaskType()) {
             action.goToTaskLists(reportCard.standardReportCardType.getTaskTypeType(), state.ruleInput.ruleInputArray);
         } else {
@@ -112,7 +113,19 @@ class CustomDashboardActions {
         newState.countUpdateTime = new Date(); //Update this to ensure reportCard count change is reflected
         reportCardSectionMappings.forEach(rcm => {
             const start = new Date();
-            newState.cardToCountResultMap[rcm.card.uuid] = context.get(ReportCardService).getReportCardCount(rcm.card, newState.ruleInput.ruleInputArray);
+            const countQueryResponse = context.get(ReportCardService).getReportCardCount(rcm.card, newState.ruleInput.ruleInputArray);
+            //todo, set counts for rcm.card.uuid with #identifier suffix if needed
+            if(rcm.card.nested) {
+                _.map(countQueryResponse, (reportCard, index) => {
+                    const itemKey = rcm.card.getCardId(index);
+                    newState.cardToCountResultMap[itemKey] = {
+                        ...reportCard,
+                        itemKey
+                    };
+                });
+            } else {
+                newState.cardToCountResultMap[rcm.card.getCardId()] = countQueryResponse;
+            }
             General.logDebug('CustomDashboardActions', `${rcm.card.name} took ${new Date() - start} ms`);
         });
         return newState;
@@ -122,8 +135,12 @@ class CustomDashboardActions {
         const newState = {...state};
         const reportCardSectionMappings = state.reportCardSectionMappings;
         newState.countUpdateTime = new Date(); //Update this to ensure reportCard count change is reflected
+        //todo, remove counts for rcm.card.uuid with #identifier suffix if needed
         reportCardSectionMappings.forEach(rcm => {
-            newState.cardToCountResultMap[rcm.card.uuid]= null;
+            const keysOfReportCard= _.keys(newState.cardToCountResultMap).filter((itemKey) => itemKey.startsWith(rcm.card.uuid));
+            _.forEach(keysOfReportCard, (itemKey) => {
+                newState.cardToCountResultMap[itemKey]= null;
+            });
         });
         return newState;
     }

packages/openchs-android/src/service/RuleEvaluationService.js

@@ -706,6 +706,15 @@ class RuleEvaluationService extends BaseService {
         const queryResult = this.executeDashboardCardRule(reportCard, ruleInput);
         if (this.isOldStyleQueryResult(queryResult)) {
             return {primaryValue: queryResult.length, secondaryValue: null, clickable: true};
+        } else if (reportCard.nested) {
+                return _.map(queryResult.reportCards, (reportCardResultsItr, index) => ({
+                    textColor: reportCard.textColor,
+                    cardColor: reportCard.cardColor,
+                    ...reportCardResultsItr,
+                    clickable: _.isFunction(reportCardResultsItr.lineListFunction),
+                    itemKey: reportCard.getCardId(index),
+                    reportCardUUID: reportCard.uuid
+                }) );
         } else {
             return {
                 primaryValue: queryResult.primaryValue,

packages/openchs-android/src/views/approval/ApprovalListingView.js

@@ -52,7 +52,8 @@ class ApprovalListingView extends AbstractComponent {
 
     onFilterChange(filterItem) {
         const {reportCardUUID, reportsFilter} = this.props;
-        const reportCard = this.getService(EntityService).findByUUID(reportCardUUID, ReportCard.schema.name);
+        const rcUUID = reportCardUUID.substring(0, reportCardUUID.indexOf('#'));
+        const reportCard = this.getService(EntityService).findByUUID(rcUUID, ReportCard.schema.name);
         const subjects = this.getService(ReportCardService).getResultForApprovalCardsType(reportCard.standardReportCardType, reportsFilter, filterItem.value);
         this.setState({subjects: subjects, formMapping: filterItem.value});
     }

packages/openchs-android/src/views/customDashboard/CardListView.js

@@ -6,7 +6,7 @@ import {CountResult} from "./CountResult";
 import {get} from 'lodash';
 
 export const CardListView = ({reportCard, I18n, onCardPress, countResult}) => {
-    const {name, colour, uuid} = reportCard;
+    const {name, colour, itemKey} = reportCard;
     const renderNumber = () => {
         return (_.isNil(get(countResult, 'primaryValue')) ?
                 <ActivityIndicator size="large" color="#0000ff" style={{paddingVertical: 25}}/> :
@@ -21,8 +21,8 @@ export const CardListView = ({reportCard, I18n, onCardPress, countResult}) => {
     };
 
     return (
-        <TouchableNativeFeedback onPress={() => onCardPress(uuid)} disabled={!get(countResult, 'clickable')}>
-            <View key={uuid} style={styles.container}>
+        <TouchableNativeFeedback onPress={() => onCardPress(itemKey)} disabled={!get(countResult, 'clickable')}>
+            <View key={itemKey} style={styles.container}>
                 <View style={styles.rowContainer}>
                     <View style={styles.nameContainer}>
                         <Text style={styles.nameTextStyle}>{I18n.t(name)}</Text>

packages/openchs-android/src/views/customDashboard/CardTileView.js

@@ -28,13 +28,13 @@ const renderNumber = function (countResult, textColor) {
 const cardGap = 16;
 
 export const CardTileView = ({index, reportCard, I18n, onCardPress, countResult}) => {
-    const {name, uuid, textColor, iconName} = reportCard;
+    const {name, itemKey, textColor, iconName} = reportCard;
     const cardWidth = (Dimensions.get('window').width - cardGap * 3) / 2;
     const cardColor = reportCard.cardColor || '#ffffff';
 
     return (
-        <TouchableNativeFeedback onPress={() => onCardPress(uuid)} disabled={!get(countResult, 'clickable')}>
-            <View key={uuid}
+        <TouchableNativeFeedback onPress={() => onCardPress(itemKey)} disabled={!get(countResult, 'clickable')}>
+            <View key={itemKey}
                   style={[styles.container, {
                       marginTop: cardGap,
                       marginLeft: index % 2 !== 0 ? cardGap : 0,

packages/openchs-android/src/views/customDashboard/CustomDashboardView.js

@@ -110,12 +110,18 @@ class CustomDashboardView extends AbstractComponent {
     }
 
     renderCards() {
+        const splitNestedCards = (cardIter) => {
+            const repeatTimes = cardIter.nested ? cardIter.initCountOfCards: 1;
+            return Array(repeatTimes).fill(cardIter).map((card, i) => ({ ...card, itemKey:  card.getCardId(i)}));
+        }
         const activeDashboardSectionMappings = _.filter(this.state.reportCardSectionMappings, ({dashboardSection}) => this.state.activeDashboardUUID === dashboardSection.dashboard.uuid);
         const sectionWiseData = _.chain(activeDashboardSectionMappings)
             .groupBy(({dashboardSection}) => dashboardSection.uuid)
             .map((groupedData, sectionUUID) => {
                 const section = this.getService(EntityService).findByUUID(sectionUUID, DashboardSection.schema.name);
-                const cards = _.map(_.sortBy(groupedData, 'displayOrder'), ({card}) => card);
+                const cardsWithNestedContent = _.map(_.sortBy(groupedData, 'displayOrder'), ({card}) => card);
+                //todo split nested cardsWithNestedContent into separate ones
+                const cards = _.flatMap(cardsWithNestedContent, splitNestedCards);
                 return {section, cards};
             })
             .sortBy('section.displayOrder')
@@ -129,13 +135,14 @@ class CustomDashboardView extends AbstractComponent {
                         this.renderSectionName(section.name, section.description, section.viewType, cards)}
                         <View style={styles.cardContainer}>
                             {_.map(cards, (card, index) => (
+                              //todo, use explicit key instead of card.uuid
                                 <CustomDashboardCard
-                                    key={card.uuid}
+                                    key={card.itemKey} //card.uuid
                                     reportCard={card}
                                     onCardPress={this.onCardPress.bind(this)}
                                     index={index}
                                     viewType={section.viewType}
-                                    countResult={this.state.cardToCountResultMap[card.uuid]}
+                                    countResult={this.state.cardToCountResultMap[card.itemKey]} //card.uuid
                                     countUpdateTime={this.state.countUpdateTime}
                                 />
                             ))}