#1370 - individual results card styling

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

Hide file tree

Showing 5 changed files with 55 additions and 39 deletions.
diff --git a/packages/openchs-android/src/views/common/IndividualDetailsCard.js b/packages/openchs-android/src/views/common/IndividualDetailsCard.js
@@ -8,7 +8,6 @@ import Separator from "../primitives/Separator";
 import SubjectInfoCard from "./SubjectInfoCard";
 
 class IndividualDetailsCard extends AbstractComponent {
-
     static propTypes = {
         individual: PropTypes.object.isRequired,
         renderDraftString: PropTypes.bool
@@ -19,13 +18,14 @@ class IndividualDetailsCard extends AbstractComponent {
     }
 
     render() {
+        const {individual, renderDraftString} = this.props;
         return (
             <View style={{
                 marginRight: Distances.ScaledContentDistanceFromEdge,
                 marginLeft: Distances.ScaledContentDistanceFromEdge
             }}
             >
-                <SubjectInfoCard individual={this.props.individual} renderDraftString={this.props.renderDraftString}/>
+                <SubjectInfoCard individual={individual} renderDraftString={renderDraftString}/>
                 <Separator backgroundColor={Colors.InputBorderNormal}/>
             </View>
         );

diff --git a/packages/openchs-android/src/views/common/SubjectInfoCard.js b/packages/openchs-android/src/views/common/SubjectInfoCard.js
@@ -15,8 +15,9 @@ import AddressLevelService from "../../service/AddressLevelService";
 
 const styles = {
     subjectName: {
-        fontSize: Styles.smallTextSize,
+        fontSize: Styles.normalTextSize,
         fontStyle: 'normal',
+        fontWeight: 'bold',
         color: Styles.blackColor,
         lineHeight: Styles.smallTextSizeLineHeight
     },
@@ -82,7 +83,7 @@ class SubjectInfoCard extends AbstractComponent {
         return <View style={{
             flexDirection: 'row',
             justifyContent: 'flex-start',
-            alignItems: 'flex-start'
+            alignItems: 'center'
         }}>
             <Text
                 style={styles.subjectSubtext1}>{this.props.individual.userProfileSubtext1(i18n)}</Text>
@@ -104,12 +105,13 @@ class SubjectInfoCard extends AbstractComponent {
 
     render() {
         const i18n = this.I18n;
+        const {individual, hideEnrolments, renderDraftString} = this.props;
         const conceptService = this.getService(ConceptService);
-        const iconContainerStyle = {minHeight: 72, alignItems: 'center', justifyContent: 'center'};
-        const enrolledPrograms = _.filter(this.props.individual.nonVoidedEnrolments(), (enrolment) => enrolment.isActive)
+        const iconContainerStyle = {minHeight: 72, alignItems: 'center', justifyContent: 'center', alignSelf: 'flex-start'};
+        const enrolledPrograms = _.filter(individual.nonVoidedEnrolments(), (enrolment) => enrolment.isActive)
             .map((x: ProgramEnrolment) => x.program);
 
-      const subjectAddressText = this.props.individual.lowestTwoLevelAddress(i18n);
+      const subjectAddressText = individual.lowestTwoLevelAddress(i18n);
         return (
             <View style={{
                 flexDirection: 'row',
@@ -118,42 +120,43 @@ class SubjectInfoCard extends AbstractComponent {
                 alignSelf: 'center',
                 minHeight: 72,
                 backgroundColor: Colors.cardBackgroundColor,
-                paddingHorizontal: 8
+                paddingHorizontal: 8,
+                paddingVertical: 8
             }}>
                 <SubjectProfilePicture
                     size={32}
-                    subjectType={this.props.individual.subjectType}
-                    style={{marginRight: 12}}
+                    subjectType={individual.subjectType}
                     round={true}
-                    individual={this.props.individual}
+                    individual={individual}
                     containerStyle={iconContainerStyle}
                 />
                 <View
                     style={{
+                        marginLeft: 20,
                         flexDirection: 'column',
                         alignItems: 'flex-start',
                         flex: 1
                     }}>
                     <Text style={styles.subjectName}>
-                        {this.props.individual.nameString}
-                        {this.props.individual.voided &&
+                        {individual.nameString}
+                        {individual.voided &&
                         <Text style={{color: Styles.redColor}}>
                             {` ${this.I18n.t("voidedLabel")}`}
                         </Text>
                         }
-                        {this.props.renderDraftString &&
+                        {renderDraftString &&
                         <Text style={{color: Styles.redColor}}>
                             {` (${this.I18n.t("draft")})`}
                         </Text>
                         }
                     </Text>
-                    {this.props.individual.isPerson() ? this.renderAgeAndGender(i18n) : null}
+                    {individual.isPerson() ? this.renderAgeAndGender(i18n) : null}
                     <View style={{justifyContent: 'flex-start'}}>
                         <Text
                             style={styles.subjectAddress}>{subjectAddressText}</Text>
                     </View>
                     {this.renderCustomSearchResultFields(i18n, conceptService)}
-                        {!this.props.hideEnrolments &&
+                        {!hideEnrolments &&
                         <View style={{
                             flexDirection: 'row',
                             justifyContent: 'flex-start',

diff --git a/packages/openchs-android/src/views/common/SubjectProfilePicture.js b/packages/openchs-android/src/views/common/SubjectProfilePicture.js
@@ -1,10 +1,26 @@
-import {Image, TouchableNativeFeedback, View} from "react-native";
+import {Image, TouchableNativeFeedback, View, Text} from "react-native";
 import React from "react";
 import AbstractComponent from "../../framework/view/AbstractComponent";
 import PropTypes from "prop-types";
 import MediaService from "../../service/MediaService";
 import _, {isEmpty} from 'lodash';
 import AvniModel from "./AvniModel";
+import Styles from "../primitives/Styles";
+
+function Initials({name}) {
+    const initials = name.split(' ').map(n => n[0].toUpperCase()).join('');
+    return <Text style={{
+        color: Styles.blackColor,
+        fontWeight: 'bold',
+        fontSize: Styles.titleSize,
+        borderRadius: 8,
+        backgroundColor: '#DBFBF3',
+        height: 40,
+        width: 40,
+        paddingLeft: 6,
+        paddingTop: 5
+    }}>{initials}</Text>
+}
 
 class SubjectProfilePicture extends AbstractComponent {
     static propTypes = {
@@ -38,12 +54,6 @@ class SubjectProfilePicture extends AbstractComponent {
         return super.UNSAFE_componentWillMount();
     }
 
-    renderDefaultIcon({subjectType, size, style, round}) {
-        const defaultIconFileName = `${_.toLower(subjectType.type)}.png`;
-        return <Image source={{uri: `asset:/icons/${defaultIconFileName}`}}
-                      style={{height: size, width: size, borderRadius: round ? size / 2 : 0, ...style}}/>
-    }
-
     renderIcon({subjectType, size, style, round, individual}) {
         const filePath = this.state.loadProfilePic
             ? this.getService(MediaService).getAbsolutePath(individual.profilePicture, 'Profile-Pics')
@@ -56,7 +66,7 @@ class SubjectProfilePicture extends AbstractComponent {
         this.setState({expandIcon: expand})
     }
 
-    renderImage({round, size}) {
+    renderImage({round, size, individual}) {
         const iconConfig = {...this.props, round, size};
         const loadDefaultIcon = !(this.props.subjectType.iconFileS3Key || this.state.loadProfilePic);
         return <View style={{
@@ -67,24 +77,26 @@ class SubjectProfilePicture extends AbstractComponent {
             alignItems: 'center',
             justifyContent: 'center'
         }}>
-            {loadDefaultIcon ? this.renderDefaultIcon(iconConfig) : this.renderIcon(iconConfig)}
+            {loadDefaultIcon ? <Initials name={individual.nameString}/> : this.renderIcon(iconConfig)}
         </View>
     }
 
     render() {
+        const {containerStyle, individual} = this.props;
+
         return (
-            <React.Fragment>
+            <View style={containerStyle}>
                 <AvniModel dismiss={() => this.onIconTouch()} visible={this.state.expandIcon}>
-                    {this.renderImage({round: false, size: 250})}
+                    {this.renderImage({round: false, size: 250, individual: individual})}
                 </AvniModel>
                 <TouchableNativeFeedback
                     pointerEvents={"none"}
                     onPress={() => this.onIconTouch(true)}>
-                    <View style={this.props.containerStyle}>
+                    <View>
                         {this.renderImage(this.props)}
                     </View>
                 </TouchableNativeFeedback>
-            </React.Fragment>
+            </View>
         )
     }
 }

diff --git a/packages/openchs-android/src/views/individual/SearchResultsHeader.js b/packages/openchs-android/src/views/individual/SearchResultsHeader.js
@@ -5,6 +5,7 @@ import AbstractComponent from "../../framework/view/AbstractComponent";
 import DGS from "../primitives/DynamicGlobalStyles";
 import Colors from "../primitives/Colors";
 import Distances from "../primitives/Distances";
+import Styles from "../primitives/Styles";
 
 
 class SearchResultsHeader extends AbstractComponent {
@@ -23,27 +24,27 @@ class SearchResultsHeader extends AbstractComponent {
             borderWidth: 1,
             borderStyle: 'solid',
             borderColor: Colors.InputBorderNormal,
-            paddingVertical: DGS.resizeHeight(5),
+            paddingVertical: DGS.resizeHeight(15),
             paddingLeft: Distances.ScaledContainerHorizontalDistanceFromEdge,
             paddingRight: DGS.resizeWidth(3)
         },
     });
 
     render() {
-        const displayResultCounts = (this.props.totalCount > SearchResultsHeader.SearchResultsLimit) || this.props.displayResultCounts;
+        const {totalCount, displayedCount} = this.props;
+        const displayResultCounts = (totalCount > SearchResultsHeader.SearchResultsLimit) || displayResultCounts;
         return (
             <View style={SearchResultsHeader.styles.container}>
                 <Text>
-                    <Text style={{fontSize: 18, color: Colors.DefaultPrimaryColor}}>{`${this.I18n.t("totalMatchingResults")}: `}</Text>
-                    <Text style={{fontSize: 18, color: Colors.DarkPrimaryColor}}>{this.props.totalCount}</Text>
+                    <Text style={{fontSize: 12, color: Styles.lightgrey}}>{totalCount}</Text>
+                    <Text style={{fontSize: 12, color: Styles.lightgrey}}>{` ${this.I18n.t("totalMatchingResults")}`}</Text>
                 </Text>
                 {displayResultCounts &&
-                <Text>
-                    <Text style={{fontSize: 18, color: Colors.DefaultPrimaryColor}}>{`${this.I18n.t("displayed")}: `}</Text>
-                    <Text style={{fontSize: 18, color: Colors.DarkPrimaryColor}}>{this.props.displayedCount}</Text>
-                </Text>
+                    <Text>
+                        <Text style={{fontSize: 12, color: Styles.lightgrey}}>{`${this.I18n.t("displayed")}: `}</Text>
+                        <Text style={{fontSize: 12, color: Styles.lightgrey}}>{displayedCount}</Text>
+                    </Text>
                 }
-
             </View>
         );
     }

diff --git a/packages/openchs-android/translations/en.json b/packages/openchs-android/translations/en.json
@@ -204,7 +204,7 @@
     "totalQueuedCount": "Total Queued",
     "videoListNotAvailable": "No video list available",
     "lastLoaded": "Last Loaded",
-    "totalMatchingResults": "Total matching results",
+    "totalMatchingResults": "matching results",
     "displayed": "Displayed",
     "uploadMedia": "Uploading saved media files",
     "uploadLocallySavedData": "Uploading saved data",