#1370 - chevron on dashboard cards

avniproject · Apr 25, 2024 · f27f669 · f27f669
1 parent f5d199f
commit f27f669
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 26 deletions.
diff --git a/packages/openchs-android/src/views/LandingView.js b/packages/openchs-android/src/views/LandingView.js
@@ -118,7 +118,9 @@ class LandingView extends AbstractComponent {
     renderDefaultDashboard(startSync) {
         return <MyDashboardView
             startSync={startSync && this.state.syncRequired}
-            icon={(name, style) => this.Icon(name, style)}/>
+            icon={(name, style) => this.Icon(name, style)}
+            onSearch={() => this.dispatchAction(Actions.ON_SEARCH_CLICK)}
+        />
     }
 
     renderDashboard(startSync) {
@@ -150,7 +152,7 @@ class LandingView extends AbstractComponent {
 
         return (
             <CHSContainer>
-                {home && this.renderDashboard(startSync) }
+                {home && this.renderDashboard(startSync)}
                 {search && <IndividualSearchView
                     onIndividualSelection={(source, individual) => CHSNavigator.navigateToProgramEnrolmentDashboardView(source, individual.uuid)}
                     buttonElevated={true}

diff --git a/packages/openchs-android/src/views/customDashboard/CardListView.js b/packages/openchs-android/src/views/customDashboard/CardListView.js
@@ -4,6 +4,7 @@ import Colors from "../primitives/Colors";
 import Styles from "../primitives/Styles";
 import {CountResult} from "./CountResult";
 import _, {get} from 'lodash';
+import MCIcon from "react-native-vector-icons/MaterialCommunityIcons";
 
 export const CardListView = ({reportCard, I18n, onCardPress, countResult}) => {
     const {name, colour, itemKey} = reportCard;
@@ -28,14 +29,17 @@ export const CardListView = ({reportCard, I18n, onCardPress, countResult}) => {
         <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(cardName)}</Text>
-                    </View>
                     <View style={[styles.numberContainer, {backgroundColor: cardColor}]}>
                         <View style={{alignSelf: 'center'}}>
                             {renderNumber()}
                         </View>
                     </View>
+                    <View style={styles.nameContainer}>
+                        <Text style={styles.nameTextStyle}>{I18n.t(cardName)}</Text>
+                        <View style={{borderRadius: 6, alignSelf: "flex-end"}}>
+                            <MCIcon name={'chevron-right'} size={40} color={colour} style={{opacity: 0.8}}/>
+                        </View>
+                    </View>
                 </View>
             </View>
         </TouchableNativeFeedback>
@@ -46,8 +50,9 @@ const styles = StyleSheet.create({
     container: {
         elevation: 2,
         backgroundColor: Colors.cardBackgroundColor,
-        marginVertical: 3,
+        marginVertical: 1,
         marginHorizontal: 3,
+        borderRadius: 4
     },
     rowContainer: {
         flexDirection: 'row',
@@ -60,12 +65,18 @@ const styles = StyleSheet.create({
         height: 100,
     },
     nameContainer: {
-        paddingHorizontal: 10,
+        marginLeft: 5,
+        paddingHorizontal: 3,
         width: '75%',
-        alignSelf: 'center'
+        height: '100%',
+        alignSelf: 'center',
+        flexDirection: "row",
+        justifyContent: "space-between"
     },
     nameTextStyle: {
-        fontSize: Styles.normalTextSize
+        paddingTop: 15,
+        fontSize: Styles.normalTextSize,
+        width: '80%'
     },
     numberContainer: {
         width: '25%',

diff --git a/packages/openchs-android/src/views/customDashboard/CardTileView.js b/packages/openchs-android/src/views/customDashboard/CardTileView.js
@@ -3,8 +3,9 @@ import Icon from "react-native-vector-icons/MaterialIcons";
 import React from 'react';
 import {CountResult} from "./CountResult";
 import _, {get} from "lodash";
+import MCIcon from "react-native-vector-icons/MaterialCommunityIcons";
 
-const renderIcon = function(iconName, textColor) {
+const renderIcon = function (iconName, textColor) {
     return (
         <View style={styles.iconContainer}>
             <Icon name={iconName} size={30} color={textColor} style={{opacity: 0.8}}/>
@@ -44,13 +45,32 @@ export const CardTileView = ({index, reportCard, I18n, onCardPress, countResult}
                       backgroundColor: cardColor
                   }]}>
                 <View style={{flexDirection: 'row'}}>
-                    <View style={styles.leftContainer}>
+                    <View style={{
+                        flexDirection: 'column',
+                        alignItems: 'flex-start',
+                        flex: 0.8,
+                        paddingHorizontal: 12,
+                        paddingVertical: 10
+                    }}>
                         <View style={{alignItems: 'flex-start', margin: 5, height: 45, width: 100}}>
                             {renderNumber(countResult, textColor)}
                         </View>
                         <Text style={[styles.cardNameTextStyle, {color: textColor}]}>{I18n.t(cardName)}</Text>
                     </View>
-                    {iconName && renderIcon(iconName, textColor)}
+                    <View style={{
+                        flexDirection: 'column',
+                        flex: 0.2,
+                        justifyContent: 'space-between',
+                        alignItems: 'flex-end',
+                        marginRight: 5
+                    }}>
+                        <View>
+                            {iconName && renderIcon(iconName, textColor)}
+                        </View>
+                        <View style={{backgroundColor: colour, borderRadius: 6}}>
+                            <MCIcon name={'chevron-right'} size={40} color={textColor} style={{opacity: 0.8}}/>
+                        </View>
+                    </View>
                 </View>
             </View>
         </TouchableNativeFeedback>
@@ -59,17 +79,10 @@ export const CardTileView = ({index, reportCard, I18n, onCardPress, countResult}
 
 const styles = StyleSheet.create({
     container: {
-        borderRadius: 8,
+        borderRadius: 10,
         elevation: 2,
         justifyContent: 'center',
-        alignItems: 'flex-start',
-        paddingHorizontal: 20,
-        paddingVertical: 5
-    },
-    leftContainer: {
-        flexDirection: 'column',
-        alignItems: 'flex-start',
-        flex: 1
+        alignItems: 'flex-start'
     },
     cardNameTextStyle: {
         fontSize: 12,

diff --git a/packages/openchs-android/src/views/customDashboard/CustomDashboardCard.js b/packages/openchs-android/src/views/customDashboard/CustomDashboardCard.js
@@ -15,10 +15,9 @@ export default class CustomDashboardCard extends AbstractComponent {
     }
 
     render() {
-        const {reportCard, index, viewType, onCardPress, countResult, countUpdateTime } = this.props;
+        const {reportCard, index, viewType, onCardPress, countResult } = this.props;
         return viewType === 'Tile' ?
             <CardTileView reportCard={reportCard} I18n={this.I18n} onCardPress={onCardPress} index={index} countResult={countResult} /> :
             <CardListView reportCard={reportCard} I18n={this.I18n} onCardPress={onCardPress} countResult={countResult} />
     }
-
 }
diff --git a/packages/openchs-android/src/views/customDashboard/CustomDashboardView.js b/packages/openchs-android/src/views/customDashboard/CustomDashboardView.js
@@ -312,6 +312,7 @@ const styles = StyleSheet.create({
         flexDirection: 'row',
         flexWrap: 'wrap',
         justifyContent: 'flex-start',
+        marginTop: 20
     }
 });
 

diff --git a/packages/openchs-android/src/views/mydashbaord/MyDashboardView.js b/packages/openchs-android/src/views/mydashbaord/MyDashboardView.js
@@ -20,10 +20,17 @@ import RefreshReminder from "./RefreshReminder";
 import AvniIcon from '../common/AvniIcon';
 import _ from 'lodash';
 import OrganisationConfigService from '../../service/OrganisationConfigService';
+import PropTypes from "prop-types";
 
 @Path('/MyDashboard')
 class MyDashboardView extends AbstractComponent {
-    static propTypes = {};
+    static propTypes = {
+        onSearch: PropTypes.func,
+    };
+
+    static defaultProps = {
+        onSearch: _.noop
+    }
 
     constructor(props, context) {
         super(props, context, Reducers.reducerKeys.myDashboard);
@@ -115,10 +122,11 @@ class MyDashboardView extends AbstractComponent {
         General.logDebug(this.viewName(), "render");
         const dataSource = this.ds.cloneWithRows(this.renderableVisits());
         const date = this.state.date;
+        const {startSync, icon, onSearch} = this.props;
         return (
             <CHSContainer style={{backgroundColor: Colors.GreyContentBackground}}>
-                <AppHeader title={this.I18n.t('home')} hideBackButton={true} startSync={this.props.startSync}
-                           renderSync={true} icon={this.props.icon}/>
+                <AppHeader title={this.I18n.t('home')} hideBackButton={true} startSync={startSync}
+                           renderSync={true} icon={icon} onSearch={() => onSearch()} renderSearch={true}/>
                 <View>
                     <DashboardFilters date={date} filters={this.state.filters}
                                       selectedLocations={this.state.selectedLocations}