From c45a4d1f1777e4a31cc236e43e458aff61025844 Mon Sep 17 00:00:00 2001 From: Vivek Singh Date: Thu, 25 Apr 2024 15:50:11 +0530 Subject: [PATCH] #1370 - individual results card styling --- .../src/views/common/IndividualDetailsCard.js | 4 +- .../src/views/common/SubjectInfoCard.js | 31 ++++++++------- .../src/views/common/SubjectProfilePicture.js | 38 ++++++++++++------- .../views/individual/SearchResultsHeader.js | 19 +++++----- packages/openchs-android/translations/en.json | 2 +- 5 files changed, 55 insertions(+), 39 deletions(-) diff --git a/packages/openchs-android/src/views/common/IndividualDetailsCard.js b/packages/openchs-android/src/views/common/IndividualDetailsCard.js index 23d1b653c..882794483 100644 --- 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 ( - + ); diff --git a/packages/openchs-android/src/views/common/SubjectInfoCard.js b/packages/openchs-android/src/views/common/SubjectInfoCard.js index 51d725d9f..954399e0c 100644 --- 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 {this.props.individual.userProfileSubtext1(i18n)} @@ -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 ( - {this.props.individual.nameString} - {this.props.individual.voided && + {individual.nameString} + {individual.voided && {` ${this.I18n.t("voidedLabel")}`} } - {this.props.renderDraftString && + {renderDraftString && {` (${this.I18n.t("draft")})`} } - {this.props.individual.isPerson() ? this.renderAgeAndGender(i18n) : null} + {individual.isPerson() ? this.renderAgeAndGender(i18n) : null} {subjectAddressText} {this.renderCustomSearchResultFields(i18n, conceptService)} - {!this.props.hideEnrolments && + {!hideEnrolments && n[0].toUpperCase()).join(''); + return {initials} +} 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 - } - 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 - {loadDefaultIcon ? this.renderDefaultIcon(iconConfig) : this.renderIcon(iconConfig)} + {loadDefaultIcon ? : this.renderIcon(iconConfig)} } render() { + const {containerStyle, individual} = this.props; + return ( - + this.onIconTouch()} visible={this.state.expandIcon}> - {this.renderImage({round: false, size: 250})} + {this.renderImage({round: false, size: 250, individual: individual})} this.onIconTouch(true)}> - + {this.renderImage(this.props)} - + ) } } diff --git a/packages/openchs-android/src/views/individual/SearchResultsHeader.js b/packages/openchs-android/src/views/individual/SearchResultsHeader.js index 3b9763ea2..9d3b38569 100644 --- 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 ( - {`${this.I18n.t("totalMatchingResults")}: `} - {this.props.totalCount} + {totalCount} + {` ${this.I18n.t("totalMatchingResults")}`} {displayResultCounts && - - {`${this.I18n.t("displayed")}: `} - {this.props.displayedCount} - + + {`${this.I18n.t("displayed")}: `} + {displayedCount} + } - ); } diff --git a/packages/openchs-android/translations/en.json b/packages/openchs-android/translations/en.json index dafe769cb..17aba197c 100644 --- 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",